123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- import { Grid, GridItem, Icon } from 'vant'
- import { defineComponent } from 'vue'
- import { createState } from './createState'
- import styles from './steps.module.less'
- export const getAssetsHomeFile = (fileName: string) => {
- const path = `../images/${fileName}`
- const modules = import.meta.globEager('../images/*')
- return modules[path].default
- }
- export default defineComponent({
- name: 'steps',
- render() {
- return (
- <Grid class={styles.steps} border={false} columnNum="4">
- <GridItem
- v-slots={{
- default: () => (
- <>
- <Icon
- name={getAssetsHomeFile('icon_course_active.png')}
- size={24}
- />
- <span
- class={[
- styles.gridName,
- createState.active >= 1 ? styles.active : null
- ]}
- >
- 课程信息
- </span>
- </>
- )
- }}
- />
- <GridItem
- v-slots={{
- default: () => (
- <>
- <Icon
- name={
- createState.active >= 2
- ? getAssetsHomeFile('icon_plan_active.png')
- : getAssetsHomeFile('icon_plan_default.png')
- }
- size={24}
- />
- <span
- class={[
- styles.gridName,
- createState.active >= 2 ? styles.active : null
- ]}
- >
- 教学计划
- </span>
- </>
- )
- }}
- />
- <GridItem
- v-slots={{
- default: () => (
- <>
- <Icon
- name={
- createState.active >= 3
- ? getAssetsHomeFile('icon_arrange_active.png')
- : getAssetsHomeFile('icon_arrange_default.png')
- }
- size={24}
- />
- <span
- class={[
- styles.gridName,
- createState.active >= 3 ? styles.active : null
- ]}
- >
- 课程安排
- </span>
- </>
- )
- }}
- />
- <GridItem
- v-slots={{
- default: () => (
- <>
- <Icon
- name={
- createState.active >= 4
- ? getAssetsHomeFile('icon_start_active.png')
- : getAssetsHomeFile('icon_start_default.png')
- }
- size={24}
- />
- <span
- class={[
- styles.gridName,
- createState.active >= 4 ? styles.active : null
- ]}
- >
- 开课条件
- </span>
- </>
- )
- }}
- />
- </Grid>
- )
- }
- })
|