更新

src/teacher/income-consus/index.module.less

@@ -2,4 +2,109 @@
   margin: 14px;
   border-radius: 10px;
   background-color: #fff;
+  overflow: hidden;
+}
+
+.income {
+  .countPrice {
+    font-size: 26px;
+    font-weight: bold;
+    color: #ff4e19;
+    line-height: 31px;
+  }
+
+  :global {
+    .van-cell__title {
+      font-size: 16px;
+      color: #000000;
+    }
+  }
+
+  .searchTime {
+    position: relative;
+    box-sizing: border-box;
+    max-width: 100%;
+    margin-right: 12px;
+    color: #333333;
+    &::after {
+      position: absolute;
+      top: 50%;
+      right: -10px;
+      margin-top: -5px;
+      border: 3px solid;
+      border-color: transparent transparent #999999 #999999;
+      transform: rotate(-45deg);
+      content: ' ';
+    }
+  }
+}
+
+.section {
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin: 0 12px;
+}
+.section::-webkit-scrollbar {
+  display: none;
+}
+.numberCount {
+  font-size: 13px;
+  color: #808080;
+  line-height: 24px;
+  flex-wrap: nowrap;
+  padding: 20px 0;
+  i {
+    display: inline-block;
+    width: 2px;
+    height: 42px;
+    border-radius: 2px;
+    background: linear-gradient(180deg, #b5c4ff 0%, #5b85f9 100%);
+    margin-right: 6px;
+  }
+  .color1 {
+    background: linear-gradient(166deg, #59e5d5 0%, #2dc7aa 100%);
+  }
+  .color2 {
+    background: linear-gradient(163deg, #b9ff4b 0%, #91dd1c 100%);
+  }
+  .color3 {
+    background: linear-gradient(180deg, #ffc979 0%, #ffa92c 100%);
+  }
+
+  .type {
+    span {
+      display: block;
+    }
+    .price {
+      font-size: 16px;
+      font-weight: 500;
+      color: #000000;
+      line-height: 22px;
+    }
+  }
+
+  :global {
+    .van-col {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.incomeTitle {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333333;
+  line-height: 20px;
+  i {
+    margin-right: 5px;
+    border-radius: 2px;
+    display: inline-block;
+    width: 4px;
+    height: 14px;
+    background: linear-gradient(166deg, #59e5d5 0%, #2dc7aa 100%);
+  }
 }

src/teacher/income-consus/index.tsx

@@ -1,4 +1,4 @@
-import { Cell } from 'vant'
+import { Cell, Col, Row } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
 
@@ -12,9 +12,47 @@ export default defineComponent({
           title="总收入(元)"
           value={'2022'}
           v-slots={{
-            label: () => <span>124,323.00</span>
+            label: () => <span class={styles.countPrice}>124,323.00</span>,
+            value: () => <span class={styles.searchTime}>2022年</span>
           }}
         ></Cell>
+
+        <div class={styles.section}>
+          <Row class={styles.numberCount}>
+            <Col span={7}>
+              <i></i>
+              <div class={styles.type}>
+                <span>陪练课</span>
+                <span class={styles.price}>8,000.00</span>
+              </div>
+            </Col>
+            <Col span={7}>
+              <i class={styles.color1}></i>
+              <div class={styles.type}>
+                <span>直播课</span>
+                <span class={styles.price}>8,000.00</span>
+              </div>
+            </Col>
+            <Col span={7}>
+              <i class={styles.color2}></i>
+              <div class={styles.type}>
+                <span>视频课</span>
+                <span class={styles.price}>8,000.00</span>
+              </div>
+            </Col>
+            <Col span={7}>
+              <i class={styles.color3}></i>
+              <div class={styles.type}>
+                <span>乐谱</span>
+                <span class={styles.price}>8,000.00</span>
+              </div>
+            </Col>
+          </Row>
+        </div>
+
+        <div class={styles.incomeTitle}>
+          <i></i>收入结构
+        </div>
       </div>
     )
   }