修改样式

src/teacher/statistics/home-statistics-detail/echats/index.tsx

@@ -76,7 +76,13 @@ const lineChartOption = (xAxisData: any, seriesData: any) => {
       data: xAxisData,
       type: 'category',
       axisLine: { lineStyle: { color: '#8C8C8C' } },
-      lineStyle: { color: '#F2F2F2' }
+      lineStyle: { color: '#F2F2F2' },
+      axisLabel: {
+        margin: 16
+      },
+      axisTick: {
+        show: false
+      }
       // axisLabel: {
       //   formatter: function (value, index) {
       //     // 第一个和最后一个标签分别居左和居右显示
@@ -166,6 +172,10 @@ const lineChartOption = (xAxisData: any, seriesData: any) => {
       formatter: function (params: any) {
         return params[0].name
       },
+      position: function (point) {
+        // 固定在顶部
+        return [point[0], '10%']
+      },
       backgroundColor: '#FF6079',
       borderWidth: 0,
       borderRadius: 24,
@@ -174,7 +184,7 @@ const lineChartOption = (xAxisData: any, seriesData: any) => {
         color: '#FFFFFF',
         fontSize: 12
       },
-      extraCssText: 'z-index: 2',
+      extraCssText: 'z-index: 2;box-shadow: none;',
       axisPointer: {
         lineStyle: {
           color: '#FF6079'
@@ -243,6 +253,7 @@ export default defineComponent({
       nextTick(() => {
         statisticCounts.value.browseCount = props.obj.browseCount || 0
         statisticCounts.value.buyCount = props.obj.buyCount || 0
+        statisticCounts.value.time = props.obj.time
         myChart.clear()
         lineChartOption &&
           myChart.setOption(
@@ -353,7 +364,7 @@ export default defineComponent({
                 <span class={styles.text}>浏览次数</span>
                 <span class={styles.num}>
                   {statisticCounts.value.browseCount}
-                  <span style={{ fontWeight: 'normal' }}>次</span>
+                  <span style={{ fontWeight: 'normal' }}></span>
                 </span>
               </div>
               <div class={styles.item} style="--color: #FF6079">
@@ -361,7 +372,7 @@ export default defineComponent({
                 <span class={styles.text}>购买次数</span>
                 <span class={styles.num}>
                   {statisticCounts.value.buyCount}
-                  <span style={{ fontWeight: 'normal' }}>次</span>
+                  <span style={{ fontWeight: 'normal' }}></span>
                 </span>
               </div>
             </div>

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

@@ -3,7 +3,7 @@
 }
 
 .expectedIncome {
-  background: #ffffff;
+  // background: #ffffff;
   border-radius: 10px;
   margin: 12px 14px 0;
   // overflow: hidden;
@@ -13,6 +13,13 @@
     .van-list__error-text {
       width: 100%;
     }
+    .van-cell-group {
+      border-radius: 0 0 10px 10px;
+      overflow: hidden;
+    }
+    .col-result-container {
+      background-color: #fff;
+    }
   }
   .incomeTitle {
     display: flex;
@@ -50,6 +57,10 @@
       }
     }
   }
+  .tipSection {
+    background: #fff;
+    padding-bottom: 18px;
+  }
   .incomeTip {
     font-size: 13px;
     color: #ef8548;
@@ -59,33 +70,39 @@
     border-radius: 6px;
     border: 1px solid #ffefdf;
     padding: 5px 10px;
-    margin: 0 12px 0;
+    margin: 0 12px ;
   }
 
   .element {
     position: relative;
-    height: 0;
-    border-top: 1px dashed #dedede;
-    margin: 16px 19px 0;
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      z-index: 1;
-      bottom: -6.5px;
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      background: #f6f7f8;
-      border-radius: 50%;
+    // height: 0;
+    // border-top: 1px dashed #dedede;
+    // margin: 16px 19px 0;
+    height: 20px;
+    width: 100%;
+    img {
+      width: inherit;
+      height: inherit;
     }
 
-    &::before {
-      left: -26px;
-    }
-    &::after {
-      right: -26px;
-    }
+    // &::before,
+    // &::after {
+    //   content: '';
+    //   position: absolute;
+    //   z-index: 1;
+    //   bottom: -6.5px;
+    //   display: inline-block;
+    //   width: 14px;
+    //   height: 14px;
+    //   background: #f6f7f8;
+    //   border-radius: 50%;
+    // }
+
+    // &::before {
+    //   left: -26px;
+    // }
+    // &::after {
+    //   right: -26px;
+    // }
   }
 }

src/teacher/statistics/home-statistics-detail/list/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, PropType, reactive, ref } from 'vue'
 import styles from './index.module.less'
 import { CellGroup, List } from 'vant'
 import iconMoney from '../../images/icon-money.png'
+import lineBg from '../../images/line-bg.png'
 import ColResult from '@/components/col-result'
 import Echats from '../echats'
 import TeacherItem from '../teacher-item'
@@ -35,7 +36,8 @@ export default defineComponent({
       xAxisData: [] as any,
       yAxisData: [] as any,
       browseCount: 0,
-      buyCount: 0
+      buyCount: 0,
+      time: ''
     })
 
     const dataShow = ref(true) // 判断是否有数据
@@ -70,6 +72,7 @@ export default defineComponent({
 
           if (exposure.length - 1 === index) {
             obj.value.browseCount = item.exposureNum
+            obj.value.time = item.date
           }
         })
         const buyList: number[] = []
@@ -149,6 +152,7 @@ export default defineComponent({
             </div>
           </div>
           {/* </Sticky> */}
+          <div class={styles.tipSection}>
           {['VIDEO', 'MUSIC'].includes(props.type) ? (
             <div class={styles.incomeTip}>
               实际收入将在学生购买{props.accountPeriod || 1}天后结算
@@ -158,8 +162,11 @@ export default defineComponent({
               实际收入将在课程结束{props.accountPeriod || 1}天后结算
             </div>
           )}
+          </div>
 
-          <div class={styles.element}></div>
+          <div class={styles.element}>
+            <img src={lineBg} />
+          </div>
           {dataShow.value ? (
             <List
               v-model:loading={state.loading}

src/teacher/statistics/home-statistics/index.tsx

@@ -75,7 +75,11 @@ const lineChartOption = (
       axisLine: { lineStyle: { color: '#8C8C8C' } },
       lineStyle: { color: '#F2F2F2' },
       boundaryGap: true,
+      axisTick: {
+        show: false
+      },
       axisLabel: {
+        margin: 16,
         // formatter: function (value, index) {
         //   // 第一个和最后一个标签分别居左和居右显示
         //   if (index === 0) {
@@ -177,7 +181,7 @@ const lineChartOption = (
         color: '#FFFFFF',
         fontSize: 12
       },
-      extraCssText: 'z-index: 2',
+      extraCssText: 'z-index: 2;box-shadow: none;',
       axisPointer: {
         lineStyle: {
           color: '#FF6079'
@@ -395,14 +399,14 @@ export default defineComponent({
                   <span class={styles.line}></span>
                   <span class={styles.text}>浏览次数</span>
                   <span class={styles.num}>
-                    {statisticCounts.value.browseCount}次
+                    {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}次
+                    {statisticCounts.value.buyCount}
                   </span>
                 </div>
               </div>

src/teacher/statistics/practice-statistics-detail/echats/index.tsx

@@ -33,6 +33,7 @@ import {
 import { LabelLayout } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 import { formatSecToHMS } from '..'
+import { boxShadow } from 'html2canvas/dist/types/css/property-descriptors/box-shadow'
 
 // 注册必须的组件
 echarts.use([
@@ -78,7 +79,15 @@ const lineChartOption = (params: {
       data: params.xAxisData,
       type: 'category',
       axisLine: { lineStyle: { color: '#8C8C8C' } },
-      lineStyle: { color: '#F2F2F2' }
+      lineStyle: { color: '#F2F2F2' },
+      axisLabel: {
+        margin: 16,
+        // alignWithLabel: true,
+        // inside: false
+      },
+      axisTick: {
+        show: false
+      }
     },
     color: [
       params.colors.lineColor || '#2DC7AA'
@@ -139,7 +148,12 @@ const lineChartOption = (params: {
       formatter: function (params: any) {
         return params[0].name
       },
+      position: function (point) {
+        // 固定在顶部
+        return [point[0], '10%']
+      },
       backgroundColor: '#FF6079',
+      boxShadow: 'none',
       borderWidth: 0,
       borderRadius: 24,
       padding: [1, 4],
@@ -147,7 +161,7 @@ const lineChartOption = (params: {
         color: '#FFFFFF',
         fontSize: 12
       },
-      extraCssText: 'z-index: 2',
+      extraCssText: 'z-index: 2;box-shadow: none;',
       axisPointer: {
         lineStyle: {
           color: '#FF6079'

src/teacher/statistics/practice-statistics-detail/index.module.less

@@ -260,6 +260,7 @@
     display: flex;
     align-items: center;
     flex-direction: column;
+    justify-content: center;
     margin-left: 4px;
     :global {
       .iconfont {