更新

src/router/router-root.ts

@@ -160,6 +160,14 @@ export default [
     }
   },
   {
+    path: '/tenantApplyData',
+    name: 'tenantApplyData',
+    component: () => import('@/views/student-register/tenant-apply-data'),
+    meta: {
+      title: '学生报名统计'
+    }
+  },
+  {
     path: '/:pathMatch(.*)*',
     component: () => import('@/views/404'),
     meta: {

src/views/student-register/tenant-apply-data/index.module.less

@@ -0,0 +1,85 @@
+.searchSchool {
+  margin: 12px 13px;
+  width: auto;
+  padding: 10px 12px;
+  border-radius: 10px;
+  font-size: 15px;
+  font-weight: 500;
+
+  :global {
+    .van-cell__right-icon {
+      color: #333;
+      font-size: 16px;
+    }
+  }
+}
+
+.statisticsGroup {
+  margin: 0 13px 15px;
+
+
+  .item {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    height: 68px;
+    background: #fff;
+    border-radius: 10px;
+    border-left: 6px solid #CAE7FF;
+    margin-bottom: 9px;
+    padding-left: 6px;
+
+    .price {
+      font-size: 20px;
+      font-family: DINAlternate-Bold, DINAlternate;
+      font-weight: bold;
+      line-height: 24px;
+    }
+
+    .text {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      line-height: 17px;
+      color: #777777;
+    }
+
+    .icon {
+      width: 14px;
+      height: 14px;
+      margin-right: 3px;
+    }
+  }
+
+  .item1 {
+    border-left-color: #CAE7FF;
+
+    .price {
+      color: #259CFE;
+    }
+  }
+
+  .item2 {
+    border-left-color: #FEDBC1;
+
+    .price {
+      color: #F96900;
+    }
+  }
+
+  .item3 {
+    border-left-color: #FEEAC1;
+
+    .price {
+      color: #F9A600;
+    }
+  }
+
+  .item4 {
+    border-left-color: #C5EEF3;
+
+    .price {
+      color: #11B9CE;
+    }
+  }
+}

src/views/student-register/tenant-apply-data/index.tsx

@@ -0,0 +1,83 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import { Cell, CellGroup, Col, Row } from 'vant';
+import MSticky from '@/components/m-sticky';
+import icon1 from './images/icon1.png';
+import icon2 from './images/icon2.png';
+import icon3 from './images/icon3.png';
+import icon4 from './images/icon4.png';
+import iconTimer from './images/icon-timer.png';
+
+export default defineComponent({
+  name: 'tenant-apply-data',
+  setup() {
+    return () => (
+      <div class={styles.tenantApplyData}>
+        <MSticky>
+          <Cell
+            class={styles.searchSchool}
+            title={'全部学校'}
+            isLink
+            arrowDirection="down"></Cell>
+        </MSticky>
+
+        <div class={styles.statisticsGroup}>
+          <Row gutter={12}>
+            <Col span={12}>
+              <div class={[styles.item, styles.item1]}>
+                <p class={styles.price}>1,200,000.00</p>
+                <p class={styles.text}>
+                  <img src={icon1} class={styles.icon} />
+                  缴费总金额
+                </p>
+              </div>
+            </Col>
+            <Col span={12}>
+              <div class={[styles.item, styles.item2]}>
+                <p class={styles.price}>1,200,000.00</p>
+                <p class={styles.text}>
+                  <img src={icon2} class={styles.icon} />
+                  缴费总人数
+                </p>
+              </div>
+            </Col>
+            <Col span={12}>
+              <div class={[styles.item, styles.item3]}>
+                <p class={styles.price}>1,200,000.00</p>
+                <p class={styles.text}>
+                  <img src={icon3} class={styles.icon} />
+                  乐器购买人数
+                </p>
+              </div>
+            </Col>
+            <Col span={12}>
+              <div class={[styles.item, styles.item4]}>
+                <p class={styles.price}>1,200,000.00</p>
+                <p class={styles.text}>
+                  <img src={icon4} class={styles.icon} />
+                  学练工具购买人数
+                </p>
+              </div>
+            </Col>
+          </Row>
+        </div>
+
+        <div class={styles.buyList}>
+          <CellGroup class={styles.buyItem}>
+            <Cell>
+              {{
+                title: () => (
+                  <div>
+                    <img src={iconTimer} class={styles.iconTimer} />
+                    2023/03/29 12:20:34
+                  </div>
+                ),
+                value: () => <span>¥ 310.00</span>
+              }}
+            </Cell>
+          </CellGroup>
+        </div>
+      </div>
+    );
+  }
+});