首页走查

src/views/home/component/Attendance.tsx

@@ -85,7 +85,7 @@ export default defineComponent({
     );
     let myChart: echarts.ECharts;
     const handleInit = () => {
-      if (!data.value.totalNum) return;
+      // if (!data.value.totalNum) return;
       if (myChart) {
         myChart.dispose();
       }
@@ -96,7 +96,7 @@ export default defineComponent({
           subtext: '出勤率',
           textAlign: 'center',
           left: '48%',
-          top: '38%',
+          top: '34%',
           textStyle: {
             fontSize: '22px',
             fontWeight: 'bold',
@@ -110,7 +110,14 @@ export default defineComponent({
         },
         tooltip: {
           trigger: 'item',
-          confine: true
+          confine: true,
+          borderWidth: 0,
+          borderRadius: 6,
+          formatter: function(item: any){      
+            return `<span style="display: inline-block;    vertical-align: middle;margin-right:4px;border-radius:50%;width:6px;height:6px;background:linear-gradient(${item.color.colorStops[0].color} 0%, ${item.color.colorStops[1].color} 100%);"></span>
+            <span style="margin-right:10px; font-size:12px;color: #777;">${item.name}</span>
+            <span style="font-size:14px;color: #333;font-weight: bold;font-family: DINAlternate-Bold, DINAlternate;">${item.value}</span>`;       
+          }
         },
         series: [
           {
@@ -183,7 +190,7 @@ export default defineComponent({
           </div>
         </div>
         <div
-          style={{ display: data.value.totalNum ? '' : 'none' }}
+          // style={{ display: data.value.totalNum ? '' : 'none' }}
           class={styles.attendanceContainer}>
           <div class={styles.attendanceEcharts} ref={echratsRef}></div>
           <div class={styles.tags}>
@@ -200,11 +207,11 @@ export default defineComponent({
           </div>
         </div>
 
-        {!data.value.totalNum && (
+        {/* {!data.value.totalNum && (
           <div class={[styles.gradeContainer, styles.itemEmtry]}>
             <Image src={icon_4} />
           </div>
-        )}
+        )} */}
       </div>
     );
   }

src/views/home/component/CurrentStudent.tsx

@@ -103,10 +103,11 @@ export default defineComponent({
           trigger: 'item',
           confine: true,
           borderWidth: 0,
+          borderRadius: 6,
           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>
+            return `<span style="display: inline-block;    vertical-align: middle;margin-right:4px;border-radius:50%;width:6px;height:6px;background:linear-gradient(${item.color.colorStops[0].color} 0%, ${item.color.colorStops[1].color} 100%);"></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>`;       
+            <span style="font-size:14px;color: #333;font-weight: bold;font-family: DINAlternate-Bold, DINAlternate;">${item.value}</span>`;       
           }
         },
         series: [
@@ -114,7 +115,6 @@ export default defineComponent({
             type: 'pie',
             radius: ['50%', '76%'],
             itemStyle: {
-              borderRadius: 2,
               borderColor: '#fff',
               borderWidth: 1
             },

src/views/home/component/DetailData.tsx

@@ -107,7 +107,7 @@ export default defineComponent({
 
     return () => (
       <div class={styles.item}>
-        <div class={styles.itemTop}>
+        <div class={[styles.itemTop, styles.detailDataContainerTop]}>
           <Image class={styles.icon} src={icons[4]} />
           <div class={styles.title}>详细数据</div>
           <div class={styles.des}>(单位：人)</div>
@@ -115,13 +115,13 @@ export default defineComponent({
         <div class={styles.detailDataContainer}>
           <div class={styles.detailLeft}>
             <div>
-              <div style={{background: '#F8F8F8'}} class={styles.tableTitle}>声部</div>
+              <div style={{background: '#F8F8F8'}} class={[styles.tableTitle, styles.totalTableTitle]}>声部</div>
               {subjects.value.map(item => (
                 <div class={styles.tableTr}>{item.subjectName}</div>
               ))}
             </div>
             <div class={styles.center}>
-              <div style={{background: '#F2F2F2'}} class={styles.tableTitle}>总人数</div>
+              <div style={{background: '#F2F2F2'}} class={[styles.tableTitle]}>总人数</div>
               {subjects.value.map(item => (
                 <div class={styles.tableTr}>{item['总人数']}</div>
               ))}

src/views/home/component/MusicGroup.tsx

@@ -215,6 +215,7 @@ export default defineComponent({
           <div class={styles.title}>乐团年级分布</div>
           <div class={styles.des}>(单位：人)</div>
           <Popover
+            class={styles.subjects}
             actions={subjects.value}
             placement="bottom-end"
             onSelect={value => {

src/views/home/component/Practice.tsx

@@ -65,18 +65,20 @@ export default defineComponent({
               {{
                 icon: () => (
                   <div>
-                    <span class={styles.tagNum}>{data.value.commitRate || 0}</span>%
+                    <span class={styles.tagNum}>{data.value.commitRate || 0}</span>
+                    <span class={[styles.tagNum, styles.fenHao]}>%</span>
                   </div>
                 ),
                 text: () => <div>提交率</div>
               }}
             </GridItem>
-            <Image class={styles.iconline} src={iconLine} />
+            <Image class={styles.iconline} src={iconLine} fit="contain" />
             <GridItem>
               {{
                 icon: () => (
                   <div>
-                    <span class={styles.tagNum}>{data.value.passRate || 0}</span>%
+                    <span class={styles.tagNum}>{data.value.passRate || 0}</span>
+                    <span class={[styles.tagNum, styles.fenHao]}>%</span>
                   </div>
                 ),
                 text: () => <div>合格率</div>
@@ -89,10 +91,10 @@ export default defineComponent({
               strokeWidth={8}
               trackColor="transparent"
               showPivot={false}
-              color="linear-gradient(to right, #9AC6FF, #8DB2FF)"></Progress>
+              color="linear-gradient(to right, #9AC6FF, #5C91FF)"></Progress>
             <div>
               应提交{' '}
-              <span style={{ color: '#8DB2FF' }} class={styles.tagNum}>
+              <span style={{ color: '#5C91FF' }} class={[styles.tagNum, styles.numDes]}>
                 {data.value.expectNum || 0}
               </span>
               人
@@ -104,10 +106,10 @@ export default defineComponent({
               strokeWidth={8}
               trackColor="transparent"
               showPivot={false}
-              color="linear-gradient(to right, #91F4DA, #85DFCF)"></Progress>
+              color="linear-gradient(to right, #91F4DA, #01C1B5)"></Progress>
             <div>
               实际提交{' '}
-              <span style={{ color: '#85DFCF' }} class={styles.tagNum}>
+              <span style={{ color: '#01C1B5' }} class={[styles.tagNum, styles.numDes]}>
                 {data.value.actualNum || 0}
               </span>
               人
@@ -119,10 +121,10 @@ export default defineComponent({
               strokeWidth={8}
               trackColor="transparent"
               showPivot={false}
-              color="linear-gradient(to right, #FFDCAC, #FFD378)"></Progress>
+              color="linear-gradient(to right, #FFDCAC, #FFA724)"></Progress>
             <div>
               合格提交{' '}
-              <span style={{ color: '#FFD378' }} class={styles.tagNum}>
+              <span style={{ color: '#FFA724' }} class={[styles.tagNum, styles.numDes]}>
                 {data.value.passNum || 0}
               </span>
               人

src/views/home/component/Subjects.tsx

@@ -65,7 +65,13 @@ export default defineComponent({
         tooltip: {
           trigger: 'item',
           confine: true,
-          borderWidth: 0
+          borderWidth: 0,
+          borderRadius: 6,
+          formatter: function(item: any){      
+            return `<span style="display: inline-block;    vertical-align: middle;margin-right:4px;border-radius:50%;width:6px;height:6px;background:linear-gradient(${item.color.colorStops[0].color} 0%, ${item.color.colorStops[1].color} 100%);"></span>
+            <span style="margin-right:10px; font-size:12px;color: #777;">${item.name}</span>
+            <span style="font-size:14px;color: #333;font-weight: bold;font-family: DINAlternate-Bold, DINAlternate;">${item.value}</span>`;       
+          }
         },
         xAxis: {
           type: 'category',

src/views/home/index.module.less

@@ -16,6 +16,9 @@ body {
             }
             .van-tab{
                 z-index: 10;
+                &.van-tab--active{
+                    font-size: 15px;
+                }
             }
             .van-tabs__line {
                 bottom: 0.74rem;
@@ -168,7 +171,7 @@ body {
         .tag {
             display: flex;
             align-items: center;
-            padding: 6px 12px;
+            padding: 6px 14px 6px 0;
 
             :global {
                 .van-badge--dot {
@@ -233,6 +236,10 @@ body {
     }
 }
 
+.detailDataContainerTop{
+    margin-bottom: 10px;
+}
+
 .detailDataContainer {
     display: flex;
     font-family: DINAlternate-Bold, DINAlternate;
@@ -247,7 +254,7 @@ body {
         display: flex;
         flex: 1;
         overflow-x: auto;
-        background: rgba(249, 249, 249, 1);
+        background: linear-gradient(to bottom, rgba(253,253,253,1) 0%, rgba(249,249,249,1) 50%, rgba(253,253,253,1) 100%);
         padding-bottom: 12px;
 
         &::-webkit-scrollbar {
@@ -258,11 +265,12 @@ body {
 
     .tableTitle {
         position: relative;
-        padding: 6px;
+        padding: 6px 0;
         font-size: 10px;
         line-height: 14px;
         white-space: nowrap;
         margin: 0 1px;
+        width: 58px;
         &>div:first-child {
             position: absolute;
             left: 0;
@@ -277,6 +285,9 @@ body {
             z-index: 2;
         }
     }
+    .totalTableTitle{
+        padding: 6px;
+    }
 
     .center {
         text-align: center;
@@ -312,7 +323,7 @@ body {
         line-height: 16px;
 
         .tag {
-            width: 50%;
+            width: 40%;
             display: flex;
             align-items: center;
             padding: 6px 5px;
@@ -393,14 +404,31 @@ body {
         font-family: DINAlternate-Bold, DINAlternate;
         font-size: 22px;
     }
+    .fenHao{
+        font-size: 14px;
+    }
+    .numDes{
+        font-size: 16px;
+    }
 
     .progressItem {
         padding: 5px 15px;
         line-height: 34px;
+        color: #777;
         :global{
             .van-progress{
                 border-radius: 2Px;
             }
         }
     }
+}
+
+.subjects{
+    :global{
+        .van-popover__action{
+            font-size: 12px;
+            width: auto;
+            min-width: var(--van-popover-action-width);
+        }
+    }
 }