学生信息initiate

src/components/m-student/index.module.less

@@ -0,0 +1,44 @@
+.student {
+    background-color: transparent;
+    padding: 15px 12px;
+    border-radius: 10px;
+    :global {
+        .van-cell__title {
+            color: #333;
+            line-height: 22px;
+            font-size: 16px;
+        }
+
+        .van-cell__label {
+            font-size: 14px;
+            line-height: 20px;
+            color: #777;
+        }
+        .van-badge{
+            background-color: transparent !important;
+            border: none ;
+        }
+    }
+
+    .iconTeacher {
+        width: 48px;
+        height: 48px;
+        margin-right: 12px;
+    }
+    .dot{
+        width: 16px;
+        height: 16px;
+    }
+    .statusBox{
+        display: flex;
+        justify-content: flex-end;
+    }
+    .status{
+        font-size: 14px;
+        color: #fff;
+        background-color: #C1C1C1;
+        border-radius: 14px;
+        line-height: 20px;
+        padding: 3px 16px;
+    }
+}

src/components/m-student/index.tsx

@@ -0,0 +1,54 @@
+import { Badge, Cell, Image } from 'vant';
+import { PropType, defineComponent } from 'vue';
+import icon_student_man from '@/common/images/icon-student-default.png';
+import icon_vip from '@/common/images/icon-vip.png';
+import styles from './index.module.less';
+
+export default defineComponent({
+  name: 'm-student',
+  props: {
+    valueType: {
+      type: String as PropType<'status'>,
+      default: ''
+    }
+  },
+  setup(props) {
+    const valueType = props.valueType;
+    return () => (
+      <Cell
+        class={styles.student}
+        center
+        border={false}
+        title={'丁曼杰'}
+        label={'丁曼杰'}
+        isLink
+        onClick={() => {}}>
+        {{
+          icon: () => (
+            <Badge offset={[-14, 10]}>
+              {{
+                default: () => (
+                  <Image
+                    src={icon_student_man}
+                    class={styles.iconTeacher}
+                    fit="contain"
+                  />
+                ),
+                content: () => <Image class={styles.dot} src={icon_vip} />
+              }}
+            </Badge>
+          ),
+          value: () => (
+            <>
+              {valueType === 'status' && (
+                <div class={styles.statusBox}>
+                  <div class={styles.status}>退团中</div>
+                </div>
+              )}
+            </>
+          )
+        }}
+      </Cell>
+    );
+  }
+});

src/router/routes-common.ts

@@ -130,6 +130,14 @@ export default [
           title: '退团审批'
         }
       },
+      {
+        path: '/student-manage',
+        name: 'student-manage',
+        component: () => import('@/views/student-manage'),
+        meta: {
+          title: '学员信息'
+        }
+      },
     ]
   },
   ...rootRouter

src/views/student-manage/component/Assignment.tsx

@@ -0,0 +1,53 @@
+import { defineComponent } from 'vue';
+import styles from '../index.module.less';
+
+export default defineComponent({
+  name: 'Attendance',
+  setup() {
+    return () => (
+      <div class={styles.attendance}>
+        <div class={[styles.attendanceTitle, styles.assignmentTitle]}><span>本学期作业</span></div>
+        <div class={styles.items}>
+          <div class={styles.item}>
+            <div>
+              <span style={{ color: '#FC1A19' }}>12</span>/16
+            </div>
+            <div class={styles.label}>出勤情况</div>
+          </div>
+
+          <div class={styles.item}>
+            <div>
+              <span style={{ color: '#00B2A7' }}>12</span>
+              <span class={styles.ci}>次</span>
+            </div>
+            <div class={styles.label}>正常出勤</div>
+          </div>
+
+          <div class={styles.item}>
+            <div>
+              <span style={{ color: '#4498F5' }}>12</span>
+              <span class={styles.ci}>次</span>
+            </div>
+            <div class={styles.label}>迟到</div>
+          </div>
+
+          <div class={styles.item}>
+            <div>
+              <span style={{ color: '#F08226' }}>12</span>
+              <span class={styles.ci}>次</span>
+            </div>
+            <div class={styles.label}>请假</div>
+          </div>
+
+          <div class={styles.item}>
+            <div>
+              <span style={{ color: '#FC1A19' }}>12</span>
+              <span class={styles.ci}>次</span>
+            </div>
+            <div class={styles.label}>旷课</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+});

src/views/student-manage/component/Attendance.tsx

@@ -0,0 +1,53 @@
+import { defineComponent } from 'vue';
+import styles from '../index.module.less';
+
+export default defineComponent({
+  name: 'Attendance',
+  setup() {
+    return () => (
+      <div class={styles.attendance}>
+        <div class={styles.attendanceTitle}><span>本学期作业</span></div>
+        <div class={styles.items}>
+          <div class={styles.item}>
+            <div>
+              <span style={{ color: '#FC1A19' }}>12</span>/16
+            </div>
+            <div class={styles.label}>出勤情况</div>
+          </div>
+
+          <div class={styles.item}>
+            <div>
+              <span style={{ color: '#00B2A7' }}>12</span>
+              <span class={styles.ci}>次</span>
+            </div>
+            <div class={styles.label}>正常出勤</div>
+          </div>
+
+          <div class={styles.item}>
+            <div>
+              <span style={{ color: '#4498F5' }}>12</span>
+              <span class={styles.ci}>次</span>
+            </div>
+            <div class={styles.label}>迟到</div>
+          </div>
+
+          <div class={styles.item}>
+            <div>
+              <span style={{ color: '#F08226' }}>12</span>
+              <span class={styles.ci}>次</span>
+            </div>
+            <div class={styles.label}>请假</div>
+          </div>
+
+          <div class={styles.item}>
+            <div>
+              <span style={{ color: '#FC1A19' }}>12</span>
+              <span class={styles.ci}>次</span>
+            </div>
+            <div class={styles.label}>旷课</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+});

src/views/student-manage/index.module.less

@@ -0,0 +1,71 @@
+.container {
+    padding: 12px 13px;
+}
+
+.student {
+    background-color: #fff;
+    border-radius: 10px;
+}
+
+.statistics{
+    display: flex;
+    padding: 20px 30px;
+}
+
+.attendance {
+    padding: 5px 12px 15px;
+    .attendanceTitle {
+        position: relative;
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 12px;
+        & > span{
+            position: relative;
+            z-index: 1;
+        }
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 70px;
+            height: 8px;
+            background: #B4E8FF;
+        }
+    }
+    .assignmentTitle{
+        &::before {
+            background: #A1EDCB;
+        }
+    }
+
+    .items {
+        display: flex;
+        margin: 0 -11px;
+
+        .item {
+            width: calc(100% / 5);
+            text-align: center;
+            line-height: 24px;
+            font-size: 20px;
+            font-weight: bold;
+            font-family: DINAlternate-Bold, DINAlternate;
+
+            .label {
+                line-height: 16px;
+                font-size: 12px;
+                color: #777;
+                font-weight: 400;
+                margin-top: 5px;
+                white-space: nowrap;
+            }
+
+            .ci {
+                font-size: 12px;
+                margin-left: 2px;
+            }
+        }
+    }
+}

src/views/student-manage/index.tsx

@@ -0,0 +1,59 @@
+import MHeader from '@/components/m-header';
+import MSearch from '@/components/m-search';
+import MSticky from '@/components/m-sticky';
+import { Cell, DropdownItem, DropdownMenu, Image } from 'vant';
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import icon_student_default from '@/common/images/icon-teacher-default.png';
+import MStudent from '@/components/m-student';
+import Attendance from './component/Attendance';
+import Assignment from './component/Assignment';
+import icon_tuituan from './images/icon-tuituan.png';
+import icon_zaidu from './images/icon-zaidu.png';
+
+export default defineComponent({
+  name: 'student-manage',
+  setup() {
+    return () => (
+      <div class={styles.container}>
+        <MSticky position="top">
+          <MHeader />
+          <MSearch />
+          <DropdownMenu>
+            <DropdownItem title="全部乐团"></DropdownItem>
+            <DropdownItem title="全部声部"></DropdownItem>
+            <DropdownItem title="全部学员"></DropdownItem>
+          </DropdownMenu>
+        </MSticky>
+
+        <div class={styles.student}>
+          <div class={styles.statistics}>
+
+            <div>
+              <Image class={styles.iconstatistics} src={icon_zaidu} />
+              <div>
+                <div>
+                  <span>168</span>人
+                </div>
+                <div>在读学员</div>
+              </div>
+            </div>
+
+            <div>
+              <Image src={icon_tuituan} />
+              <div>
+                <div>
+                  <span>3</span>人
+                </div>
+                <div>退团人数</div>
+              </div>
+            </div>
+          </div>
+          <MStudent />
+          <Attendance />
+          <Assignment />
+        </div>
+      </div>
+    );
+  }
+});