部分UI，和退团接口

src/views/home/component/CurrentStudent.tsx

@@ -17,25 +17,35 @@ import icon_1 from '../image/icon_1.png';
 type EChartsOption = echarts.EChartsOption;
 
 const colors = [
-  '#5B8FF9',
-  '#F6BD16',
-  '#5AD8A6',
-  '#E8684A',
-  '#5D7092',
-  '#6DC8EC',
-  '#FF9530',
-  '#B87BDD',
-  '#92DE97',
+  ['#94C2FD', '#5B8FF9'],
+  ['#FBE031', '#F6BD16'],
+  ['#93EED2', '#5AD8A6'],
+  ['#F5A181', '#E8684A'],
+  ['#96A9C4', '#5D7092'],
+  ['#A6E6F7', '#6DC8EC'],
+  ['#FFCA7D', '#FF9530'],
+  ['#DBC6FF', '#B87BDD'],
+  ['#D2FFC4', '#92DE97'],
 
-  '#5B8FF9',
-  '#F6BD16',
-  '#5AD8A6',
-  '#E8684A',
-  '#5D7092',
-  '#6DC8EC',
-  '#FF9530',
-  '#B87BDD',
-  '#92DE97'
+  ['#94C2FD', '#5B8FF9'],
+  ['#FBE031', '#F6BD16'],
+  ['#93EED2', '#5AD8A6'],
+  ['#F5A181', '#E8684A'],
+  ['#96A9C4', '#5D7092'],
+  ['#A6E6F7', '#6DC8EC'],
+  ['#FFCA7D', '#FF9530'],
+  ['#DBC6FF', '#B87BDD'],
+  ['#D2FFC4', '#92DE97'],
+
+  ['#94C2FD', '#5B8FF9'],
+  ['#FBE031', '#F6BD16'],
+  ['#93EED2', '#5AD8A6'],
+  ['#F5A181', '#E8684A'],
+  ['#96A9C4', '#5D7092'],
+  ['#A6E6F7', '#6DC8EC'],
+  ['#FFCA7D', '#FF9530'],
+  ['#DBC6FF', '#B87BDD'],
+  ['#D2FFC4', '#92DE97']
 ];
 
 export default defineComponent({
@@ -91,12 +101,13 @@ export default defineComponent({
         },
         tooltip: {
           trigger: 'item',
-          confine: true
+          confine: true,
+          borderWidth: 0
         },
         series: [
           {
             type: 'pie',
-            radius: ['40%', '70%'],
+            radius: ['40%', '62%'],
             itemStyle: {
               borderRadius: 2,
               borderColor: '#fff',
@@ -114,7 +125,10 @@ export default defineComponent({
                 value: item.studentNum,
                 name: item.grade,
                 itemStyle: {
-                  color: colors[index]
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: colors[index][0] },
+                    { offset: 1, color: colors[index][1] }
+                  ])
                 }
               };
             })
@@ -172,7 +186,7 @@ export default defineComponent({
           <div class={styles.tags}>
             {list.value.map((item: IGradeDistribution, i: number) => (
               <div class={styles.tag}>
-                <Badge dot color={colors[i]} />
+                <Badge dot color={`linear-gradient(180deg, ${colors[i][0]} 0%, ${colors[i][1]} 100%)`} />
                 <div class={styles.tagTitle}>{item.grade}</div>
                 <span class={styles.tagNum}>{item.studentNum}</span>
               </div>

src/views/home/component/MusicGroup.tsx

@@ -152,7 +152,13 @@ export default defineComponent({
         xAxis: {
           type: 'value',
           boundaryGap: [0, 0.01],
-          minInterval: 1
+          minInterval: 1,
+          splitLine:{
+            lineStyle:{
+              type: 'dashed',
+              color: '#f2f2f2'
+            }
+          }
         },
         yAxis: {
           type: 'category',
@@ -195,7 +201,7 @@ export default defineComponent({
                 { offset: 1, color: `rgba(${group.color}, 1)` }
               ])
             },
-            barMaxWidth: 20
+            barMaxWidth: 16
           };
         })
       };

src/views/home/component/Subjects.tsx

@@ -81,7 +81,13 @@ export default defineComponent({
         },
         yAxis: {
           type: 'value',
-          minInterval: 1
+          minInterval: 1,
+          splitLine:{
+            lineStyle:{
+              type: 'dashed',
+              color: '#f2f2f2'
+            }
+          }
         },
         series: [
           {
@@ -89,7 +95,8 @@ export default defineComponent({
             type: 'bar',
             label: {
               show: true,
-              position: 'top'
+              position: 'top',
+              color: '#777'
             },
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

src/views/home/index.module.less

@@ -3,36 +3,37 @@ body {
 }
 
 .homeTab {
-    & :global {
-        .van-tabs__nav:not(.van-tabs__nav--shrink) {
-            background: transparent;
 
-            .van-tab {
+    &>div:first-child {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 10;
+        :global {
+            .van-tabs__nav:not(.van-tabs__nav--shrink) {
+                background: transparent;
+            }
+            .van-tab{
                 z-index: 10;
             }
-
             .van-tabs__line {
-                bottom: 0.7rem;
-                width: 1.5rem;
+                bottom: 0.74rem;
+                width: var(--line-width, 62px);
                 height: 6px;
                 background: linear-gradient(250deg, rgba(45, 199, 170, 0.22) 0%, #2DC7AA 100%);
+                border-radius: 0;
             }
+            
         }
     }
-
-    &>div:first-child {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        z-index: 10;
-    }
     
 
     &>div:nth-child(2) {
         :global {
             .van-tab__panel {
-                padding-top: var(--van-tabs-line-height);
+                margin-top: var(--van-tabs-line-height);
+                background: #F8F9FC;
             }
         }
     }
@@ -105,7 +106,7 @@ body {
 
     .des {
         color: #aaa;
-        font-size: 14px;
+        font-size: 12px;
         line-height: 20px;
     }
 
@@ -144,8 +145,8 @@ body {
     align-items: center;
 
     .gradeEcharts {
-        width: 180px;
-        height: 180px;
+        width: 160px;
+        height: 160px;
     }
 
     .tags {

src/views/home/index.tsx

@@ -1,5 +1,5 @@
 import { Tab, Tabs } from 'vant';
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, nextTick, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
 
 import { api_musicGroupFindByCooperationId } from './api';
@@ -46,7 +46,16 @@ export default defineComponent({
           class={[styles.homeTab, homeData.isStricky && styles.strickyTop]}
           swipeThreshold={3}
           animated
-          swipeable>
+          swipeable
+          onChange={() => {
+            nextTick(() => {
+              const tabRef : HTMLElement = document.querySelector(`.${styles.homeTab} > .van-tabs__wrap .van-tab--active .van-tab__text`)!
+              const lineRef : HTMLElement = document.querySelector(`.${styles.homeTab} > .van-tabs__wrap`)!
+              if (tabRef && lineRef){
+                lineRef.style.setProperty('--line-width', `${tabRef.offsetWidth}px`)
+              }
+            })
+          }}>
           <Tab title="数据汇总" name="home">
             <ContentItem reloadTotal={homeData.reloadTotal} />
           </Tab>

src/views/student-manage/api.ts

@@ -85,5 +85,5 @@ export const api_studentManageUpdateGrade = (data: any) => {
  * @returns 
  */
 export const api_studentManageQuitMusicGroup = (data: any) => {
-  return request.post('/api-web/studentManage/quitMusicGroup', { data, requestType: 'form' });
+  return request.post('/api-web/schoolMusicGroupQuit/quitMusicGroup', { data, requestType: 'form' });
 };