Browse Source

修改样式

lex-xin 2 months ago
parent
commit
5c5a71879c
37 changed files with 469 additions and 140 deletions
  1. 30 5
      src/business-components/course-plan-step/index.module.less
  2. 22 3
      src/business-components/course-plan-step/index.tsx
  3. 1 1
      src/business-components/user-detail/index.tsx
  4. 8 0
      src/business-components/user-list/index.module.less
  5. 1 1
      src/business-components/user-list/index.tsx
  6. BIN
      src/common/images/icon_tips2.png
  7. 1 1
      src/components/col-result/index.module.less
  8. 1 1
      src/components/col-search/index.module.less
  9. 1 1
      src/router/routes-student.ts
  10. 3 2
      src/student/live-class/live-detail.tsx
  11. 2 0
      src/student/video-class/video-class-detail.module.less
  12. 1 0
      src/student/video-class/video-detail.tsx
  13. 1 1
      src/styles/global.less
  14. 4 0
      src/styles/index.less
  15. 18 6
      src/teacher/live-class/live-detail.tsx
  16. 1 2
      src/teacher/my-sheetMusic/index.tsx
  17. 4 4
      src/teacher/statistics/home-statistics-detail/buy-item/index.module.less
  18. 32 2
      src/teacher/statistics/home-statistics-detail/echats/index.module.less
  19. 84 28
      src/teacher/statistics/home-statistics-detail/echats/index.tsx
  20. 1 1
      src/teacher/statistics/home-statistics-detail/list/index.module.less
  21. 10 4
      src/teacher/statistics/home-statistics-detail/list/index.tsx
  22. 32 8
      src/teacher/statistics/home-statistics/index.module.less
  23. 114 41
      src/teacher/statistics/home-statistics/index.tsx
  24. 1 1
      src/teacher/statistics/practice-statistics-detail/echats/index.module.less
  25. 19 2
      src/teacher/statistics/practice-statistics-detail/echats/index.tsx
  26. 8 0
      src/teacher/statistics/practice-statistics-detail/index.module.less
  27. 9 5
      src/teacher/statistics/practice-statistics-detail/index.tsx
  28. 2 0
      src/teacher/video-class/video-class-detail.module.less
  29. 6 6
      src/teacher/video-class/video-detail.tsx
  30. BIN
      src/views/award-activity/images/gift-bg.png
  31. 8 1
      src/views/music/album-detail/index.module.less
  32. 13 1
      src/views/music/album-detail/index.tsx
  33. 4 4
      src/views/music/album/index.tsx
  34. 2 2
      src/views/music/component/song/index.module.less
  35. 21 4
      src/views/music/list/index.module.less
  36. 3 1
      src/views/music/list/index.tsx
  37. 1 1
      src/views/music/personal/collection.tsx

+ 30 - 5
src/business-components/course-plan-step/index.module.less

@@ -62,18 +62,43 @@
       }
     }
 
+    .stepTitleText {
+      font-size: 13px;
+      color: #999999;
+      line-height: 18px;
+    }
+
     .stepContent {
-      padding-top: 10px;
+      padding-top: 6px;
       font-size: 13px;
       color: #7a7a7a;
       line-height: 20px;
+
+      .state0, .state1, .state2 {
+        font-weight: 500;
+        font-size: 14px;
+        color: #ff802c;
+        line-height: 22px;
+      }
+      .state2 {
+        color: #2DC7AA;
+      }
+      .state2 {
+        color: #999999;
+      }
     }
   }
 
   .videoText {
-    padding-top: 6px;
-    color: var(--van-primary);
-    font-size: 14px;
+    margin-top: 6px;
+    background: #2dc7aa;
+    border-radius: 11px;
+    font-weight: 500;
+    font-size: 12px;
+    color: #ffffff;
+    padding: 0 5px;
+    line-height: 22px;
+    display: inline-block;
   }
 
   .videoImg {
@@ -152,4 +177,4 @@
       background-size: cover;
     }
   }
-}
+}

+ 22 - 3
src/business-components/course-plan-step/index.tsx

@@ -14,6 +14,16 @@ interface IProps {
   id?: number | string
 }
 
+const formatLiveState = (state: number) => {
+  if (state == 0) {
+    return '未开始'
+  } else if (state == 1) {
+    return '进行中'
+  } else if (state == 2) {
+    return '已结束'
+  }
+}
+
 export default defineComponent({
   name: 'CoursePlanStep',
   props: {
@@ -22,6 +32,10 @@ export default defineComponent({
       type: Number,
       default: 0
     },
+    showState: {
+      type: Boolean,
+      default: false
+    },
     hideVideo: {
       type: Boolean,
       default: false
@@ -78,11 +92,16 @@ export default defineComponent({
                       >
                         第 {index + 1} 课时
                       </span>
+                      {this.showState && (
+                        <span class={styles[`state${item.liveState}`]}>
+                          {formatLiveState(item.liveState)}
+                        </span>
+                      )}
+                    </div>
+                    <div class={styles.stepContent}>
                       <span class={styles.stepTitleText}>
                         {item.courseTime}
                       </span>
-                    </div>
-                    <div class={styles.stepContent}>
                       <p>{item.coursePlan}</p>
 
                       {item.liveState === 2 && !this.hideVideo && (
@@ -92,7 +111,7 @@ export default defineComponent({
                             this.onLookVideo(item)
                           }}
                         >
-                          查看回放{'>>'}
+                          查看回放
                         </div>
                       )}
                       {/* {item.videoPosterUrl && (

+ 1 - 1
src/business-components/user-detail/index.tsx

@@ -113,7 +113,7 @@ export default defineComponent({
                             {this.userInfo.lessonPrice <= 0 &&
                             this.userInfo.auditVersion === 0
                               ? '领取'
-                              : '购买'}
+                              : '学习'}
                           </span>
                         ) : this.userInfo.type === "group" ?
                           ((this.userInfo.mixStudentNum || 0 > 0) ? <>剩余{this.userInfo.mixStudentNum}个名额</> : '')

+ 8 - 0
src/business-components/user-list/index.module.less

@@ -8,6 +8,12 @@
   .user-names {
     display: flex;
     align-items: center;
+    span {
+      max-width: 120px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   .user-logo {
@@ -16,7 +22,9 @@
     border-radius: 50%;
     overflow: hidden;
     margin-right: 8px;
+    flex-shrink: 0;
   }
+  
 
   .user-time {
     font-size: 14px;

+ 1 - 1
src/business-components/user-list/index.tsx

@@ -28,7 +28,7 @@ export default defineComponent({
             src={this.users.avatar || defaultIcon}
             fit="cover"
           />
-          {this.users.studentName || `游客${this.users.studentId || ''}`}
+          <span>{this.users.studentName || `游客${this.users.studentId || ''}`}</span>
         </div>
         <span class={styles['user-time']}>{this.users.createTime}</span>
       </div>

BIN
src/common/images/icon_tips2.png


+ 1 - 1
src/components/col-result/index.module.less

@@ -34,7 +34,7 @@
         height: 195px;
       }
       .van-empty__description {
-        margin-top: -15px;
+        margin-top: -8px;
         padding: 0 30px;
       }
     }

+ 1 - 1
src/components/col-search/index.module.less

@@ -122,6 +122,6 @@
       border: none;
     }
 
-    padding-top: 2px;
+    // padding-top: 2px;
   }
 }

+ 1 - 1
src/router/routes-student.ts

@@ -53,7 +53,7 @@ export default [
         name: 'videoDetail',
         component: () => import('@/student/video-class/video-detail'),
         meta: {
-          title: '视频课'
+          title: '视频课详情'
         }
       },
       {

+ 3 - 2
src/student/live-class/live-detail.tsx

@@ -6,7 +6,7 @@ import dayjs from 'dayjs'
 import { Icon, Sticky, Button, Dialog, Toast, Popup } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './live-detail.module.less'
-import iconTips from '@common/images/icon_tips.png'
+import iconTips from '@common/images/icon_tips2.png'
 import { onSubmitZero, orderStatus } from '@/views/order-detail/orderStatus'
 import ColHeader from '@/components/col-header'
 import { postMessage } from '@/helpers/native-message'
@@ -319,6 +319,7 @@ export default defineComponent({
         >
           {this.courseInfo.length > 0 && (
             <CoursePlanStep
+              showState
               courseInfo={this.courseInfo}
               courseId={Number(this.courseId) || 0}
             />
@@ -327,7 +328,7 @@ export default defineComponent({
 
         <div class={styles.tips}>
           <h3>
-            <Icon name={iconTips} size={15} />
+            <Icon name={iconTips} size={18} />
             温馨提示
           </h3>
           <p>

+ 2 - 0
src/student/video-class/video-class-detail.module.less

@@ -55,6 +55,8 @@
     .message-name {
       flex-basis: 65%;
       line-height: 1.2;
+      display: flex;
+      align-items: center;
     }
 
     .message-time {

+ 1 - 0
src/student/video-class/video-detail.tsx

@@ -260,6 +260,7 @@ export default defineComponent({
         />
         <UserDetail
           userInfo={this.userInfo}
+          showBuy={false}
           onUserDetail={(item: any) => {
             if (browser().isApp && state.platformType === 'STUDENT') {
               this.$router.push({

+ 1 - 1
src/styles/global.less

@@ -108,7 +108,7 @@
   --van-step-text-color: #999;
 
   // 按钮
-  --van-button-normal-font-size: 18px;
+  --van-button-normal-font-size: 16px;
 
   // 通知栏
   --van-notice-bar-background: #ffe3d2;

+ 4 - 0
src/styles/index.less

@@ -120,6 +120,10 @@ body {
   margin-bottom: 12px !important;
 }
 
+.mb16 {
+  margin-bottom: 16px !important;
+}
+
 .mt8 {
   margin-top: 8px !important;
 }

+ 18 - 6
src/teacher/live-class/live-detail.tsx

@@ -222,16 +222,19 @@ export default defineComponent({
             contentStyle={{ paddingTop: '0' }}
           >
             <Tabs color="var(--van-primary)" lineWidth={20} sticky>
-              <Tab title="课程" titleClass="van-hairline--bottom">
+              <Tab title="课程列表" titleClass="van-hairline--bottom">
                 <CoursePlanStep
+                  showState={
+                    this.joinRoom == '1' && this.liveStatus.liveStatus !== 2
+                  }
                   courseInfo={this.courseInfo}
                   courseId={Number(this.courseId) || 0}
                 />
               </Tab>
-              <Tab title="学员列表" titleClass="van-hairline--bottom">
+              <Tab title="上课学员" titleClass="van-hairline--bottom">
                 {this.studentList.map((item: any) => (
                   <UserList
-                    class="mb12"
+                    class="mb16"
                     users={{
                       avatar: item.avatar,
                       studentId: item.studentId,
@@ -255,7 +258,10 @@ export default defineComponent({
           <>
             {this.courseOffStatus && (
               <TheSticky position="bottom">
-                <div class={['btnGroup']} style={{ paddingTop: '10px', background: '#fff' }}>
+                <div
+                  class={['btnGroup']}
+                  style={{ paddingTop: '10px', background: '#fff' }}
+                >
                   <Button
                     block
                     round
@@ -270,7 +276,10 @@ export default defineComponent({
 
             {this.joinRoom == '1' && this.liveStatus.liveStatus !== 2 && (
               <TheSticky position="bottom">
-                <div class={['btnGroup']} style={{ paddingTop: '10px', background: '#fff' }}>
+                <div
+                  class={['btnGroup']}
+                  style={{ paddingTop: '10px', background: '#fff' }}
+                >
                   <Button block round type="primary" onClick={this.onJoinRoom}>
                     进入直播间
                   </Button>
@@ -280,7 +289,10 @@ export default defineComponent({
 
             {this.share == '1' && this.courseInfo.length > 0 && (
               <TheSticky position="bottom">
-                <div class={['btnGroup']} style={{ paddingTop: '10px', background: '#fff' }}>
+                <div
+                  class={['btnGroup']}
+                  style={{ paddingTop: '10px', background: '#fff' }}
+                >
                   <Button
                     block
                     round

+ 1 - 2
src/teacher/my-sheetMusic/index.tsx

@@ -42,7 +42,6 @@ export default defineComponent({
             v-model:active={activeTab.value}
             onChange={val => (activeTab.value = val)}
             sticky
-            swipeThreshold={4}
             offsetTop={height.value}
           >
             <Tab title="购买单曲" name="personal">
@@ -60,7 +59,7 @@ export default defineComponent({
                 <AlbumMy />
               </div>
             </Tab>
-            <Tab title="收藏平台单曲" name="collection">
+            <Tab title="收藏单曲" name="collection">
               <div class={styles.container}>
                 <Collection
                   ref={collection}

+ 4 - 4
src/teacher/statistics/home-statistics-detail/buy-item/index.module.less

@@ -21,7 +21,7 @@
 
   .userInfo {
     display: flex;
-    align-items: center;
+    align-items: flex-end;
     img {
       width: 20px;
       height: 20px;
@@ -31,8 +31,8 @@
     .name {
       font-size: 13px;
       color: #333333;
-      line-height: 17px;
-      max-width: 70px;
+      line-height: 18px;
+      max-width: 60px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -81,7 +81,7 @@
       align-items: center;
 
       .price {
-        font-family: DINAlternate, DINAlternate;
+        font-family: DIN;
         font-weight: bold;
         font-size: 18px;
         color: #ff5a56;

+ 32 - 2
src/teacher/statistics/home-statistics-detail/echats/index.module.less

@@ -55,9 +55,23 @@
     border-radius: 4px;
     padding: 6px 12px;
 
+    .time {
+      font-size: 12px;
+      color: #777777;
+      line-height: 16px;
+      padding-right: 30px;
+    }
+
     .left {
       display: flex;
       align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .twoItem {
+      display: flex;
+      align-items: center;
     }
 
     .item {
@@ -96,7 +110,7 @@
 
   .eChart {
     height: 240px;
-    padding: 0;
+    padding: 10px 0 0;
   }
 }
 
@@ -123,7 +137,7 @@
   // }
 
   .popupSection {
-    padding: 0 16px 18px;
+    padding: 0 16px 30px;
     .title {
       display: flex;
       justify-content: space-between;
@@ -206,10 +220,17 @@
         line-height: 32px;
         text-align: center;
         background: #f8f8f8;
+        border: 1px solid #f8f8f8;
         border-radius: 4px;
         font-size: 13px;
         color: #999999;
         cursor: pointer;
+
+        &.active {
+          border: 1px solid #2dc7aa;
+          color: #2dc7aa;
+          background: #e9fff8;
+        }
       }
       .hasValue {
         color: #333;
@@ -241,3 +262,12 @@
     }
   }
 }
+
+
+.searchPopup {
+  :global {
+    .van-popup__close-icon {
+      top: 19px;
+    }
+  }
+}

+ 84 - 28
src/teacher/statistics/home-statistics-detail/echats/index.tsx

@@ -76,7 +76,27 @@ const lineChartOption = (xAxisData: any, seriesData: any) => {
       data: xAxisData,
       type: 'category',
       axisLine: { lineStyle: { color: '#8C8C8C' } },
-      lineStyle: { color: '#F2F2F2' }
+      lineStyle: { color: '#F2F2F2' },
+      // axisLabel: {
+      //   formatter: function (value, index) {
+      //     // 第一个和最后一个标签分别居左和居右显示
+      //     if (index === 0) {
+      //       return '{left|' + value + '}'
+      //     } else if (index === xAxisData.length - 1) {
+      //       return '{right|' + value + '}'
+      //     } else {
+      //       return value
+      //     }
+      //   },
+      //   rich: {
+      //     left: {
+      //       align: 'left'
+      //     },
+      //     right: {
+      //       align: 'right'
+      //     }
+      //   }
+      // }
     },
     color: [
       '#2DC7AA',
@@ -94,17 +114,19 @@ const lineChartOption = (xAxisData: any, seriesData: any) => {
     ],
     series: [
       {
-        lineStyle: { width: 1 },
+        lineStyle: { width: 2 },
         data: seriesData[0],
         symbol: 'circle',
+        showSymbol: false,
         name: '浏览次数',
         type: 'line',
-        emphasis: { lineStyle: { width: 1 } }
+        emphasis: { lineStyle: { width: 2 } }
       },
       {
-        lineStyle: { width: 1 },
+        lineStyle: { width: 2 },
         data: seriesData[1],
         symbol: 'circle',
+        showSymbol: false,
         name: '购买次数',
         type: 'line',
         areaStyle: {
@@ -128,14 +150,14 @@ const lineChartOption = (xAxisData: any, seriesData: any) => {
             ]
           }
         },
-        emphasis: { lineStyle: { width: 1 } }
+        emphasis: { lineStyle: { width: 2 } }
       }
     ],
     grid: {
       bottom: '3%',
       containLabel: true,
-      left: '3%',
-      right: '5%',
+      left: '4%',
+      right: '4%',
       top: '40'
     },
     tooltip: {
@@ -151,6 +173,12 @@ const lineChartOption = (xAxisData: any, seriesData: any) => {
       textStyle: {
         color: '#FFFFFF',
         fontSize: 12
+      },
+      extraCssText: 'z-index: 2',
+      axisPointer: {
+        lineStyle: {
+          color: '#FF6079'
+        }
       }
     },
     yAxis: {
@@ -181,7 +209,8 @@ export default defineComponent({
     const chartId = 'eChart' + Date.now()
     const statisticCounts = ref({
       browseCount: 0,
-      buyCount: 0
+      buyCount: 0,
+      time: ''
     })
     const currentType = ref<TIME_TYPE>(props.currentType)
     const timeRange = getTimeRange(currentType.value)
@@ -192,8 +221,10 @@ export default defineComponent({
       subjectId: '' as any, // 选择的声部
       subjectList: [] as any,
       startTimeStatus: false,
-      endTimeMinDate: new Date(),
-      endTimeMaxDate: dayjs(new Date()).add(1, 'year').toDate(),
+      endTimeMinDate: new Date(timeRange?.startTime || ''),
+      endTimeMaxDate: dayjs(new Date(timeRange?.startTime || ''))
+        .add(1, 'year')
+        .toDate(),
       endTimeStatus: false,
       startTime: new Date(timeRange?.startTime || ''),
       startTimeStr: timeRange?.startTime || '',
@@ -223,12 +254,24 @@ export default defineComponent({
 
             const browseCount = options.series[0].data[batchIndex]
             const buyCount = options.series[1].data[batchIndex]
+            const time = options.xAxis[0].data[batchIndex]
             statisticCounts.value = {
               browseCount,
-              buyCount
+              buyCount,
+              time
             }
           })
         })
+
+        // 可能出现多个时,图表同时渲染,提示有问题
+        setTimeout(() => {
+          const lastIndex = props.obj.yAxisData[0].length - 1
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0, // 系列索引
+            dataIndex: lastIndex // 数据索引
+          })
+        }, 0)
       })
     }
 
@@ -300,17 +343,26 @@ export default defineComponent({
         </div>
         <div class={styles.eChartTitle}>
           <div class={styles.left}>
-            <div class={styles.item} style="--color: #2DC7AA">
-              <span class={styles.line}></span>
-              <span class={styles.text}>浏览次数</span>
-              <span class={styles.num}>
-                {statisticCounts.value.browseCount}次
-              </span>
-            </div>
-            <div class={styles.item} style="--color: #FF6079">
-              <span class={styles.line}></span>
-              <span class={styles.text}>购买次数</span>
-              <span class={styles.num}>{statisticCounts.value.buyCount}次</span>
+            {statisticCounts.value.time && (
+              <div class={styles.time}>{statisticCounts.value.time}</div>
+            )}
+            <div class={styles.twoItem}>
+              <div class={styles.item} style="--color: #2DC7AA">
+                <span class={styles.line}></span>
+                <span class={styles.text}>浏览次数</span>
+                <span class={styles.num}>
+                  {statisticCounts.value.browseCount}
+                  <span style={{ fontWeight: 'normal' }}>次</span>
+                </span>
+              </div>
+              <div class={styles.item} style="--color: #FF6079">
+                <span class={styles.line}></span>
+                <span class={styles.text}>购买次数</span>
+                <span class={styles.num}>
+                  {statisticCounts.value.buyCount}
+                  <span style={{ fontWeight: 'normal' }}>次</span>
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -325,6 +377,7 @@ export default defineComponent({
           round
           position="bottom"
           teleport="body"
+          class={styles.searchPopup}
         >
           <div class={styles.popupContainer}>
             <div class={styles.popupTitle}>筛选</div>
@@ -370,7 +423,8 @@ export default defineComponent({
                   <p
                     class={[
                       styles.timeInput,
-                      forms.startTimeStr && styles.hasValue
+                      forms.startTimeStr && styles.hasValue,
+                      forms.startTimeStatus && styles.active
                     ]}
                     onClick={() => (forms.startTimeStatus = true)}
                   >
@@ -380,7 +434,8 @@ export default defineComponent({
                   <p
                     class={[
                       styles.timeInput,
-                      forms.endTimeStr && styles.hasValue
+                      forms.endTimeStr && styles.hasValue,
+                      forms.endTimeStatus && styles.active
                     ]}
                     onClick={() => (forms.endTimeStatus = true)}
                   >
@@ -407,7 +462,7 @@ export default defineComponent({
                 block
                 type="primary"
                 onClick={() => {
-                  if(!forms.startTimeStr || !forms.endTimeStr) {
+                  if (!forms.startTimeStr || !forms.endTimeStr) {
                     Toast('请选择时间范围')
                     return
                   }
@@ -422,7 +477,7 @@ export default defineComponent({
                   searchStatus.value = false
                 }}
               >
-                确
+                确
               </Button>
             </div>
           </div>
@@ -445,12 +500,13 @@ export default defineComponent({
               forms.startTime = val
               forms.startTimeStr = dayjs(val).format('YYYY-MM-DD')
               forms.startTimeStatus = false
-              forms.endTime = null as any
-              forms.endTimeStr = ''
+
               forms.endTimeMinDate = dayjs(val || new Date()).toDate()
               forms.endTimeMaxDate = dayjs(val || new Date())
                 .add(1, 'year')
                 .toDate()
+              forms.endTime = val
+              forms.endTimeStr = ''
               currentType.value = '' as any
             }}
           />

+ 1 - 1
src/teacher/statistics/home-statistics-detail/list/index.module.less

@@ -37,7 +37,7 @@
       font-size: 16px;
       color: #333333;
       line-height: 16px;
-      font-family: DINAlternate, DINAlternate;
+      font-family: DIN;
       span {
         font-size: 14px;
       }

+ 10 - 4
src/teacher/statistics/home-statistics-detail/list/index.tsx

@@ -149,9 +149,15 @@ export default defineComponent({
             </div>
           </div>
           {/* </Sticky> */}
-          <div class={styles.incomeTip}>
-            实际收入将在课程结束{props.accountPeriod || 1}天后结算
-          </div>
+          {['VIDEO', 'MUSIC'].includes(props.type) ? (
+            <div class={styles.incomeTip}>
+              实际收入将在学生购买{props.accountPeriod || 1}天后结算
+            </div>
+          ) : (
+            <div class={styles.incomeTip}>
+              实际收入将在课程结束{props.accountPeriod || 1}天后结算
+            </div>
+          )}
 
           <div class={styles.element}></div>
           {dataShow.value ? (
@@ -179,7 +185,7 @@ export default defineComponent({
               type="empty"
               btnStatus={false}
               classImgSize="SMALL"
-              tips="暂无数据~"
+              tips="暂无数据"
             />
           )}
         </div>

+ 32 - 8
src/teacher/statistics/home-statistics/index.module.less

@@ -1,5 +1,5 @@
 .homeStatistics {
-  background: #FFFFFF;
+  background: #ffffff;
   box-shadow: 0px 2px 10px 0px rgba(229, 229, 229, 0.1);
   border-radius: 10px;
   padding: 12px;
@@ -50,20 +50,33 @@
   .eChartTitle {
     display: flex;
     justify-content: space-between;
-    background: #F8F8F8;
+    background: #f8f8f8;
     border-radius: 4px;
     padding: 6px 12px;
+    .time {
+      font-size: 12px;
+      color: #777777;
+      line-height: 16px;
+      padding-right: 30px;
+    }
 
     .left {
       display: flex;
       align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .twoItem {
+      display: flex;
+      align-items: center;
     }
 
     .item {
       display: flex;
       align-items: center;
       margin-right: 12px;
-      --color: #2DC7AA;
+      --color: #2dc7aa;
 
       &:last-child {
         margin-right: 0;
@@ -75,7 +88,6 @@
         height: 3px;
         background: var(--color);
         border-radius: 3px;
-
       }
 
       .text {
@@ -92,6 +104,18 @@
         line-height: 16px;
       }
     }
+  }
+
+  .unit {
+    padding-top: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .unitText {
+      font-size: 12px;
+      color: #777777;
+      line-height: 14px;
+    }
 
     .right {
       display: flex;
@@ -112,7 +136,7 @@
       }
 
       &.showItemActive {
-        color: #2DC7AA;
+        color: #2dc7aa;
       }
     }
   }
@@ -126,7 +150,7 @@
 :global {
   .select-time {
     width: 81px;
-    background: #FFFFFF;
+    background: #ffffff;
     box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.15);
     border-radius: 8px;
     padding: 6px;
@@ -148,8 +172,8 @@
     .active {
       background: rgba(45, 199, 170, 0.1);
       border-radius: 4px;
-      color: #2DC7AA;
+      color: #2dc7aa;
       font-weight: 500;
     }
   }
-}
+}

+ 114 - 41
src/teacher/statistics/home-statistics/index.tsx

@@ -53,24 +53,49 @@ echarts.use([
   LineChart
 ])
 
-const lineChartOption = (xAxisData: any, seriesData: any) => {
+const lineChartOption = (
+  xAxisData: any,
+  seriesData: any,
+  countMaxCount = 5
+) => {
   return {
-    title: {
-      text: '单位:次',
-      textStyle: {
-        color: '#777777',
-        fontSize: 13,
-        fontWeight: 400
-      }
-    },
+    // title: {
+    //   text: '单位:次',
+    //   textStyle: {
+    //     color: '#777777',
+    //     fontSize: 13,
+    //     fontWeight: 400
+    //   }
+    // },
     legend: { show: false },
     emphasis: { lineStyle: { width: 2 } },
     xAxis: {
-      boundaryGap: false,
       data: xAxisData,
       type: 'category',
       axisLine: { lineStyle: { color: '#8C8C8C' } },
-      lineStyle: { color: '#F2F2F2' }
+      lineStyle: { color: '#F2F2F2' },
+      boundaryGap: false,
+      axisLabel: {
+        // formatter: function (value, index) {
+        //   // 第一个和最后一个标签分别居左和居右显示
+        //   if (index === 0) {
+        //     return '{left|' + value + '}'
+        //   } else if (index === xAxisData.length - 1) {
+        //     return '{right|' + value + '}'
+        //   } else {
+        //     return value
+        //   }
+        // },
+        // rich: {
+        //   left: {
+        //     align: 'left'
+        //   },
+        //   right: {
+        //     align: 'right'
+        //   }
+        // }
+        // align: 'left'
+      }
     },
     color: [
       '#2DC7AA',
@@ -88,17 +113,19 @@ const lineChartOption = (xAxisData: any, seriesData: any) => {
     ],
     series: [
       {
-        lineStyle: { width: 1 },
+        lineStyle: { width: 2 },
         data: seriesData[0],
         symbol: 'circle',
+        showSymbol: false,
         name: '浏览次数',
         type: 'line',
-        emphasis: { lineStyle: { width: 1 } }
+        emphasis: { lineStyle: { width: 2 } }
       },
       {
-        lineStyle: { width: 1 },
+        lineStyle: { width: 2 },
         data: seriesData[1],
         symbol: 'circle',
+        showSymbol: false,
         name: '购买次数',
         type: 'line',
         areaStyle: {
@@ -122,18 +149,22 @@ const lineChartOption = (xAxisData: any, seriesData: any) => {
             ]
           }
         },
-        emphasis: { lineStyle: { width: 1 } }
+        emphasis: { lineStyle: { width: 2 } }
       }
     ],
     grid: {
       bottom: '3%',
       containLabel: true,
-      left: '3%',
-      right: '5%',
-      top: '40'
+      left: '4%',
+      right: '4%',
+      top: '20'
     },
     tooltip: {
       trigger: 'axis',
+      position: function (point) {
+        // 固定在顶部
+        return [point[0], '10%']
+      },
       confine: true,
       formatter: function (params: any) {
         return params[0].name
@@ -145,17 +176,24 @@ const lineChartOption = (xAxisData: any, seriesData: any) => {
       textStyle: {
         color: '#FFFFFF',
         fontSize: 12
+      },
+      extraCssText: 'z-index: 2',
+      axisPointer: {
+        lineStyle: {
+          color: '#FF6079'
+        }
       }
     },
     yAxis: {
       type: 'value',
       splitLine: {
-        axisLine: { lineStyle: { color: '#8C8C8C' } },
+        axisLine: { lineStyle: { color: '#F2F2F2' } },
         lineStyle: { color: ['#f2f2f2'], type: 'dashed' }
-      }
+      },
+      splitNumber: countMaxCount
     },
-    dataZoom: [{ type: 'inside', throttle: 100 }],
-    toolbox: { feature: { saveAsImage: { show: false } } }
+    dataZoom: [{ type: 'inside', throttle: 100 }]
+    // toolbox: { feature: { saveAsImage: { show: false } } }
   }
 }
 
@@ -196,7 +234,8 @@ export default defineComponent({
     const timeRange = ref(getTimeRange(currentType.value))
     const statisticCounts = ref({
       browseCount: 0,
-      buyCount: 0
+      buyCount: 0,
+      time: ''
     })
     let myChart: echarts.ECharts
     nextTick(() => {
@@ -237,12 +276,17 @@ export default defineComponent({
         const exposure = data.exposure || []
         const xAxisData: string[] = []
         const exposureList: number[] = []
+        let maxCount = 0 // 最大人数 - 用记设置练习人数分割线
         exposure.forEach((item: any, index: number) => {
           xAxisData.push(item.date)
           exposureList.push(item.exposureNum)
 
+          if (maxCount < (item.exposureNum || 0)) {
+            maxCount = item.exposureNum
+          }
           if (exposure.length - 1 === index) {
             statisticCounts.value.browseCount = item.exposureNum
+            statisticCounts.value.time = item.date
           }
         })
         const buyList: number[] = []
@@ -254,24 +298,39 @@ export default defineComponent({
           }
         })
         const yAxisData = [exposureList, buyList]
-
+        const countMaxCount = maxCount >= 5 ? 5 : Math.max(maxCount, 1)
         myChart.clear()
         lineChartOption &&
-          myChart.setOption(lineChartOption(xAxisData, yAxisData))
+          myChart.setOption(
+            lineChartOption(xAxisData, yAxisData, countMaxCount),
+            true
+          )
+
         myChart.on('highlight', function (params: any) {
           const batch = params.batch || []
           const options: any = myChart.getOption()
           batch.forEach((item: any) => {
             const batchIndex = item.dataIndex
-
             const browseCount = options.series[0].data[batchIndex]
             const buyCount = options.series[1].data[batchIndex]
+            const time = options.xAxis[0].data[batchIndex]
             statisticCounts.value = {
               browseCount,
-              buyCount
+              buyCount,
+              time
             }
           })
         })
+
+        // 可能出现多个时,图表同时渲染,提示有问题
+        setTimeout(() => {
+          const lastIndex = yAxisData[0].length - 1
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0, // 系列索引
+            dataIndex: lastIndex // 数据索引
+          })
+        }, 0)
       } catch {
         //
       }
@@ -327,23 +386,37 @@ export default defineComponent({
         <div class={styles.eChartSection}>
           <div class={styles.eChartTitle}>
             <div class={styles.left}>
-              <div class={styles.item} style="--color: #2DC7AA">
-                <span class={styles.line}></span>
-                <span class={styles.text}>浏览次数</span>
-                <span class={styles.num}>
-                  {statisticCounts.value.browseCount}次
-                </span>
-              </div>
-              <div class={styles.item} style="--color: #FF6079">
-                <span class={styles.line}></span>
-                <span class={styles.text}>购买次数</span>
-                <span class={styles.num}>
-                  {statisticCounts.value.buyCount}次
-                </span>
+              {statisticCounts.value.time && (
+                <div class={styles.time}>{statisticCounts.value.time}</div>
+              )}
+
+              <div class={styles.twoItem}>
+                <div class={styles.item} style="--color: #2DC7AA">
+                  <span class={styles.line}></span>
+                  <span class={styles.text}>浏览次数</span>
+                  <span class={styles.num}>
+                    {statisticCounts.value.browseCount}次
+                  </span>
+                </div>
+                <div class={styles.item} style="--color: #FF6079">
+                  <span class={styles.line}></span>
+                  <span class={styles.text}>购买次数</span>
+                  <span class={styles.num}>
+                    {statisticCounts.value.buyCount}次
+                  </span>
+                </div>
               </div>
             </div>
+          </div>
+
+          <div class={styles.unit}>
+            <div class={styles.unitText}>单位:次</div>
             <div class={styles.right}>
-              <Popover v-model:show={popoverStatus.value} showArrow={false}>
+              <Popover
+                v-model:show={popoverStatus.value}
+                showArrow={false}
+                placement="bottom-end"
+              >
                 {{
                   default: () => (
                     <div class={'select-time'}>

+ 1 - 1
src/teacher/statistics/practice-statistics-detail/echats/index.module.less

@@ -45,6 +45,6 @@
 
   .eChart {
     height: 240px;
-    padding: 0;
+    padding: 10px 0 0;
   }
 }

+ 19 - 2
src/teacher/statistics/practice-statistics-detail/echats/index.tsx

@@ -96,9 +96,10 @@ const lineChartOption = (params: {
     ],
     series: [
       {
-        lineStyle: { width: 1 },
+        lineStyle: { width: 2 },
         data: params.seriesData,
         symbol: 'circle',
+        showSymbol: false,
         name: '购买次数',
         type: 'line',
         areaStyle: {
@@ -122,7 +123,7 @@ const lineChartOption = (params: {
             ]
           }
         },
-        emphasis: { lineStyle: { width: 1 } }
+        emphasis: { lineStyle: { width: 2 } }
       }
     ],
     grid: {
@@ -145,6 +146,12 @@ const lineChartOption = (params: {
       textStyle: {
         color: '#FFFFFF',
         fontSize: 12
+      },
+      extraCssText: 'z-index: 2',
+      axisPointer: {
+        lineStyle: {
+          color: '#FF6079'
+        }
       }
     },
     yAxis: {
@@ -231,6 +238,16 @@ export default defineComponent({
             }
           })
         })
+
+        // 可能出现多个时,图表同时渲染,提示有问题
+        setTimeout(() => {
+          const lastIndex = props.obj.xAxisData.length - 1
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0, // 系列索引
+            dataIndex: lastIndex // 数据索引
+          })
+        }, 0)
       })
     }
 

+ 8 - 0
src/teacher/statistics/practice-statistics-detail/index.module.less

@@ -411,3 +411,11 @@
     }
   }
 }
+
+.searchPopup {
+  :global {
+    .van-popup__close-icon {
+      top: 19px;
+    }
+  }
+}

+ 9 - 5
src/teacher/statistics/practice-statistics-detail/index.tsx

@@ -63,8 +63,10 @@ export default defineComponent({
       subjectId: '' as any, // 选择的声部
       subjectList: [] as any,
       startTimeStatus: false,
-      endTimeMinDate: new Date(),
-      endTimeMaxDate: dayjs(new Date()).add(1, 'year').toDate(),
+      endTimeMinDate: new Date(timeRange?.startTime || ''),
+      endTimeMaxDate: dayjs(new Date(timeRange?.startTime || ''))
+        .add(1, 'year')
+        .toDate(),
       endTimeStatus: false,
       startTime: new Date(timeRange?.startTime || ''),
       startTimeStr: timeRange?.startTime || '',
@@ -296,7 +298,6 @@ export default defineComponent({
     const onSort = (
       field: 'totalPracticeTime' | 'averagePracticeTime' | ''
     ) => {
-      console.log(field, 'field')
       if (!field) return
 
       if (forms.sortField !== field) {
@@ -306,6 +307,7 @@ export default defineComponent({
       forms.sortField = field
       if (forms.sortType === 'ASC') {
         forms.sortType = ''
+        forms.sortField = ''
       } else if (forms.sortType === 'DESC') {
         forms.sortType = 'ASC'
       } else {
@@ -547,6 +549,7 @@ export default defineComponent({
           closeable
           round
           position="bottom"
+          class={styles.searchPopup}
         >
           <div class={styles.popupContainer}>
             <div class={styles.popupTitle}>筛选</div>
@@ -673,12 +676,13 @@ export default defineComponent({
               forms.startTime = val
               forms.startTimeStr = dayjs(val).format('YYYY-MM-DD')
               forms.startTimeStatus = false
-              forms.endTime = null as any
-              forms.endTimeStr = ''
+
               forms.endTimeMinDate = dayjs(val || new Date()).toDate()
               forms.endTimeMaxDate = dayjs(val || new Date())
                 .add(1, 'year')
                 .toDate()
+              forms.endTime = val
+              forms.endTimeStr = ''
               searchObj.type = '' as any
             }}
           />

+ 2 - 0
src/teacher/video-class/video-class-detail.module.less

@@ -113,6 +113,8 @@
     .message-name {
       flex-basis: 65%;
       line-height: 1.2;
+      display: flex;
+      align-items: center;
     }
 
     .message-time {

+ 6 - 6
src/teacher/video-class/video-detail.tsx

@@ -66,7 +66,7 @@ export default defineComponent({
         lessonPrice: result.lessonGroup.lessonPrice,
         lessonCoverUrl: result.lessonGroup.lessonCoverUrl,
         relationType: result.lessonGroup.relationType,
-        lessonSubjectName: result.lessonGroup.lessonSubjectName,
+        subjectName: result.lessonGroup.lessonSubjectName,
         auditVersion: result.lessonGroup.auditVersion,
         isDegree: result.degreeFlag ? true : false,
         isTeacher: result.teacherFlag ? true : false,
@@ -204,7 +204,7 @@ export default defineComponent({
             contentStyle={{ paddingTop: '0' }}
           >
             <Tabs color="var(--van-primary)" lineWidth={20} sticky>
-              <Tab title="课程" titleClass="van-hairline--bottom">
+              <Tab title="课程列表" titleClass="van-hairline--bottom">
                 {this.detailList.map((item: any) => {
                   const musicAlbumInfos = item.musicAlbumInfos || []
                   const temp = musicAlbumInfos.map((info: any) => {
@@ -248,17 +248,17 @@ export default defineComponent({
                   )
                 })}
               </Tab>
-              <Tab title="学员列表" titleClass="van-hairline--bottom">
+              <Tab title="上课学生" titleClass="van-hairline--bottom">
                 {this.dataShow ? (
                   <List
                     v-model:loading={this.loading}
                     finished={this.finished}
-                    finishedText="没有更多了"
+                    finishedText=" "
                     onLoad={this.getList}
                   >
                     {this.buyUserList.map((item: any) => (
                       <UserList
-                        class="mb12"
+                        class="mb16"
                         users={{
                           avatar: item.avatar,
                           studentId: item.userId,
@@ -272,7 +272,7 @@ export default defineComponent({
                   <ColResult
                     btnStatus={false}
                     classImgSize="SMALL"
-                    tips="暂无学生购买"
+                    tips="暂无内容"
                   />
                 )}
               </Tab>

BIN
src/views/award-activity/images/gift-bg.png


+ 8 - 1
src/views/music/album-detail/index.module.less

@@ -175,7 +175,7 @@
 .musicContent {
   position: absolute;
   top: 0;
-  height: 265px;
+  height: 360px;
   width: 100%;
   padding-top: 55px;
   z-index: 10;
@@ -236,6 +236,10 @@
     background-color: rgba(113, 138, 147, 1);
     border-radius: 20px;
     display: inline-block;
+
+    &:first-child {
+      margin-left: 0;
+    }
   }
 }
 
@@ -335,6 +339,9 @@
       .van-overlay {
         top: 1px;
       }
+      input {
+        caret-color: #2dc7aa;
+      }
     }
 
     // .label {

+ 13 - 1
src/views/music/album-detail/index.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, nextTick, watch, reactive, ref } from 'vue'
+import { computed, defineComponent, nextTick, watch, reactive, ref, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import request from '@/helpers/request'
 import ColHeader from '@/components/col-header'
@@ -305,6 +305,18 @@ export default defineComponent({
     const shareMusicList = computed(() => {
       return rows.value.length > 4 ? rows.value.slice(0, 2) : rows.value
     })
+
+    postMessage({
+      api: 'setStatusBarTextColor',
+      content: { statusBarTextColor: true }
+    })
+
+    onBeforeUnmount(() => {
+      postMessage({
+        api: 'setStatusBarTextColor',
+        content: { statusBarTextColor: false }
+      })
+    })
     return () => {
       return (
         <div class={styles.detail}>

+ 4 - 4
src/views/music/album/index.tsx

@@ -1,9 +1,9 @@
-import { defineComponent, reactive, ref } from 'vue'
-import { Sticky, List, Popup, Icon, Tabs, Tab } from 'vant'
+import { defineComponent, onBeforeUnmount, reactive, ref } from 'vue'
+import { List, Popup, Icon, Tabs, Tab } from 'vant'
 import Search from '@/components/col-search'
 import request from '@/helpers/request'
-import Item from './item'
-import SelectTag from '../search/select-tag'
+// import Item from './item'
+// import SelectTag from '../search/select-tag'
 import { useRoute, useRouter } from 'vue-router'
 import ColResult from '@/components/col-result'
 import styles from './index.module.less'

+ 2 - 2
src/views/music/component/song/index.module.less

@@ -38,8 +38,8 @@
         font-size: 12px;
         color: #999;
         line-height: 16px;
-        margin-right: 12px;
-        padding-top: 2px;
+        margin-right: 10px;
+        // padding-top: 2px;
         max-width: 120px;
         white-space: nowrap;
         overflow: hidden;

+ 21 - 4
src/views/music/list/index.module.less

@@ -8,12 +8,23 @@
       background: url('./icons/bgImg.png') no-repeat top center;
       background-size: 100% 214px;
     }
+    input {
+      caret-color: #2dc7aa;
+    }
+    .van-icon-clear {
+      color: #fff !important;
+    }
   }
 }
 
 .musicList {
   background: #fff;
   min-height: 100vh;
+  .alumnList {
+    height: calc(100vh - var(--header-height));
+    overflow: hidden;
+    overflow-y: auto;
+  }
 }
 
 .listContainer {
@@ -151,6 +162,7 @@
   background-color: #fff;
   margin: 0 0 14px;
   min-height: 200px;
+  position: relative;
 
   &.alumnListOnly {
     margin-top: 0;
@@ -164,7 +176,7 @@
   width: 100%;
   height: 214px;
   // object-fit: cover;
-  z-index: -1;
+  z-index: 0;
 }
 
 .tagTabs {
@@ -250,8 +262,6 @@
   }
 }
 
-
-
 .popupContainer {
   // max-height: 504px;
   // overflow-x: hidden;
@@ -344,7 +354,6 @@
         &:first-child {
           margin-left: 5px;
         }
-
       }
     }
   }
@@ -367,3 +376,11 @@
     }
   }
 }
+
+.searchPopup {
+  :global {
+    .van-popup__close-icon {
+      top: 19px;
+    }
+  }
+}

+ 3 - 1
src/views/music/list/index.tsx

@@ -392,6 +392,7 @@ export default defineComponent({
                   background="transparent"
                   inputBackground="transparent"
                   leftIcon={iconSearch}
+                  placeholder='请搜索曲目关键词'
                   v-slots={{
                     left: () => (
                       <div
@@ -440,6 +441,7 @@ export default defineComponent({
                 inputBackground="white"
                 // leftIcon={iconSearch}
                 class={styles.searchGroup}
+                placeholder='请搜索曲目关键词'
                 v-slots={{
                   left: () => (
                     <div
@@ -553,9 +555,9 @@ export default defineComponent({
           <Popup
             round
             closeable
-            safe-area-inset-bottom
             position="bottom"
             v-model:show={searchObj.searchStatus}
+            class={styles.searchPopup}
           >
             <div class={styles.popupContainer}>
               <div class={styles.popupTitle}>筛选</div>

+ 1 - 1
src/views/music/personal/collection.tsx

@@ -102,7 +102,7 @@ export default defineComponent({
         ) : (
           !loading.value && (
             <ColResult
-              tips={props.type === 'TENANT' ? '暂无收藏机构单曲' : '暂无收藏平台单曲'}
+              tips={props.type === 'TENANT' ? '暂无内容' : '暂无收藏平台单曲'}
               classImgSize="SMALL"
               btnStatus={false}
             />