走查

src/views/home/component/CurrentStudent.tsx

@@ -102,12 +102,17 @@ export default defineComponent({
         tooltip: {
           trigger: 'item',
           confine: true,
-          borderWidth: 0
+          borderWidth: 0,
+          formatter: function(item: any){      
+            return `<span style="display: inline-block;    vertical-align: middle;margin-right:4px;border-radius:50%;width:6px;height:6px;background-color:${item.color.colorStops[1].color };"></span>
+            <span style="margin-right:10px; font-size:12px;color: #777;">${item.name}</span>
+            <span style="font-size:14px;color: #333;font-weight: bold">${item.value}</span>`;       
+          }
         },
         series: [
           {
             type: 'pie',
-            radius: ['60%', '86%'],
+            radius: ['50%', '76%'],
             itemStyle: {
               borderRadius: 2,
               borderColor: '#fff',

src/views/home/component/Practice.tsx

@@ -2,6 +2,7 @@ import { PropType, defineComponent, onMounted, ref, toRefs, watch } from 'vue';
 import styles from '../index.module.less';
 import icons from '../icons.json';
 import { Badge, Grid, GridItem, Icon, Image, Progress, Tab, Tabs } from 'vant';
+import iconLine from '../image/icon-line.png';
 import { IStudentLessons } from '../type';
 const colors = [
   {
@@ -46,6 +47,7 @@ export default defineComponent({
         </div>
         <div class={styles.tabsContainer}>
           <Tabs
+            class={styles.practiceTabs}
             shrink
             v-model:active={tab.value}
             onChange={value => {
@@ -69,6 +71,7 @@ export default defineComponent({
                 text: () => <div>提交率</div>
               }}
             </GridItem>
+            <Image class={styles.iconline} src={iconLine} />
             <GridItem>
               {{
                 icon: () => (

src/views/home/index.module.less

@@ -48,6 +48,11 @@ body {
     margin: 12px;
     border-radius: 10px;
     background: #FFFFFF;
+    :global{
+        .van-tabs__nav{
+            background: transparent;
+        }
+    }
 }
 
 .itemEmtry {
@@ -61,8 +66,8 @@ body {
     justify-content: center;
     width: calc(100% - 4px);
     height: 35px;
-    background: linear-gradient(180deg, #CFF2EB 0%, rgba(255, 255, 255, 0) 100%);
-    border-radius: 10px;
+    background: linear-gradient(180deg, #CFF2EB 0%, rgba(248, 249, 252, 1) 100%);
+    border-radius: 10px 10px 0 0;
     box-shadow: -2px -2px 0 rgba(255, 255, 255, 1), 0 -2px 0 rgba(255, 255, 255, 1), 2px 0 0 rgba(255, 255, 255, 1);
     margin: 0 auto;
 
@@ -340,26 +345,45 @@ body {
         }
     }
 }
-
+.practiceTabs{
+    :global{
+        .van-tab{
+            padding-left: 15px;
+        }
+        .van-tabs__nav{
+            padding-left: 0;
+        }
+    }
+}
 .practiceContainer {
+    .iconline{
+        height: 34px;
+    }
     :global {
+        .van-grid{
+            align-items: center;
+        }
         .van-grid-item {
             margin: 10px 0;
+            flex-basis: 23% !important;
 
             .van-grid-item__content {
-                padding-top: 0;
-                padding-bottom: 0;
+                align-items: flex-start;
+                padding: 0;
                 font-size: 12px;
                 color: #777;
                 line-height: 18px;
             }
-        }
-
-        .van-grid-item:first-child {
-            border-right: 1Px dashed #777;
-        }
-        .van-badge__wrapper{
-            padding-left: 10px;
+            &:first-child {
+                .van-grid-item__content{
+                    padding-left: 15px;
+                }
+            }
+            &:last-child {
+                .van-grid-item__content{
+                    padding-left: 30px;
+                }
+            }
         }
     }