Merge remote-tracking branch 'origin/2023-4-8_ke-cheng-xiang-qing-loading' into iteration_header_to_h5

src/components/o-loading/index.module.less

@@ -0,0 +1,11 @@
+.loading{
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    height: 30vh;
+    font-size: 14px;
+    .des{
+        margin-top: 20px;
+    }
+}

src/components/o-loading/index.tsx

@@ -0,0 +1,16 @@
+import { defineComponent } from 'vue'
+import { Vue3Lottie } from 'vue3-lottie'
+import AstronautJSON from '../o-full-refresh/datas/data.json'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'o-loading',
+  setup() {
+    return () => (
+      <div class={styles.loading}>
+        <Vue3Lottie  style={{width: '55px', height: '55px'}} animationData={AstronautJSON}></Vue3Lottie>
+        <div class={styles.des}>加载中</div>
+      </div>
+    )
+  }
+})

src/router/index.ts

@@ -40,7 +40,7 @@ const router: Router = createRouter({
   }
 })
 
-const whitePath = ['/coursewarePlay']
+const whitePath = ['/coursewarePlay', '/lessonCourseware', '/courseList']
 router.beforeEach((to, from, next) => {
   if (!whitePath.includes(to.path)){
     baseEvent.emit('toastShow')

src/views/courseList/index.module.less

@@ -2,7 +2,7 @@
   min-height: 100vh;
   background-color: #fff;
   background-image: linear-gradient(180deg, #FFE8CE 0%, rgba(251, 233, 213, 0) 198px);
-  padding:10px 0;
+  padding: 10px 0;
   box-sizing: border-box;
 }
 
@@ -11,18 +11,34 @@
   padding: 20px;
 
   .cover {
+    position: relative;
     width: 107px;
+    min-height: 130px;
     margin-right: 30px;
     border-radius: 4px 8px 8px 4px;
     box-shadow: 0px 2px 6px 0px rgba(221, 168, 133, 0.67);
     overflow: hidden;
-    :global{
-      .van-image__loading{
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAABOFBMVEUAAAC0tLTT09PU1NTt7e3////T09P////T09P////T09P////X19f////U1NTU1NTT09PT09PU1NTU1NTV1dXT09PU1NTU1NTV1dXZ2dn+/v7R0dH////////KysrIyMjT09O0tLTU1NS0tLTU1NS0tLTT09PT09PT09PU1NTU1NTU1NTT09O2trbU1NTV1dXV1dXW1tbV1dXW1tbV1dXJycm4uLj///+0tLT///+0tLT////p6em0tLT4+Pj///+2trb///+1tbX///+0tLT////T09P5+fn+/v63t7e8vLz8/Pzl5eXW1tbBwcH39/fw8PDs7Ozb29v7+/vg4ODOzs65ubny8vLJycnp6enGxsbFxcW+vr62trb09PTY2NjLy8vCwsLn5+fi4uLS0tLu7u7Q0NDd3d02Mu/gAAAARHRSTlMAnPwvBfv07ODdw5AbGezmyrirl5B4aT0kDZyclTwsIPj48+Ta1tPS0LGhiIaEcGJgV05FNhMS7++8vKyslZRzc1ZWJRSpe/cAAALfSURBVFjD7djXcuIwGAVg1pTQAiT0Ekiy6b1v7whsA6b3EGAJu+//BstaiWNiCYGlXGTG55KBDzH6j2xjMmJET5ZdDivQFavDtTxLXlsCFFlam7HmiUxl49ftApRxYWkHLe3A0lZa2oqlAXUMGk/fHG9vpCnSk/pZNJ18m6aOWELRN1CmtbMI+jjNJH0Evc2GlhD0Bhu6h6DTjPIq6Pqonb8XXoCWmjKSHTCnpccp5ges6bHCZAW2dBc8JcOWLqjoPFu6oqLLr2bVQxX9h/GElBWmKDCmxSKAyXWYt1GE677rLtLGejsLcuOCQMI7lVFlsMjxJJUeW3bP+OSTskBJqcuSFppAFT4vsqMrYDrVAitazMHV8kBJs8WGzsPmNoRCFSj5fcuA7vJKvcQ8UJKrCNT0WH0mdEpASbFOSdfhyClvzagGsSzR0D14LHTSSho1/mkQaw39dB9u2vThCU8KQj1JtFiVt+z5ONSLmnoSaeszuia/+lfzAaGS09STQDum6SH/cOXX5rY9Xz0Rj6Sqy0YmjUzrbp56ah6kIT2AH8Pe4M5TT83jP6ThsnALmq+eiD8tlIt/G8POWU8FVNMNuXc8rnH4epJpOHg1jIivJ5mWcvLg4ZqMryeZhnOLm1hyPfF0C95R9PAcvp4jcSYNL7UDHEWuJ56GO46FyPXE0+/+/7Lhgs+ffU093yPoDwCAEcki1/Mjgv4BQFUkSeR6/jQh8gn0SQy5np9NqFi+CgSDWE9rwmJCJ/X9yxt9iSdisVji2y+TESNGXjiW6LU7FYkkzQ9JRiIp93XUoodyX12cBg/9qyvOHbvXxmUw4Wxe+45zZdV/GDy9uHJbZqPhk7jTjrTI4ezO+EkY8wUBW4Y6tgCSPvNxtDLnOzOhEw2HAvt7Hj2oZ28/EApHyRtpvjwPBY/8B5Ot9O1u2b2eTds6x8nr4tZtmx6vfWvXN9nCA/9RMHR+aZ5sohEji+YfnN0/51L6d+cAAAAASUVORK5CYII=');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 50%;
+    flex-shrink: 0;
+    &>img {
+      display: block;
+      width: 100%;
+      min-height: 140px;
+      opacity: 0;
+      transition: opacity .3s;
+    }
+
+    :global {
+      .van-image__loading {
         position: relative;
         min-height: 130px;
         animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out infinite;
       }
     }
+
     &::before {
       content: '';
       position: absolute;
@@ -31,7 +47,8 @@
       height: 100%;
       background: linear-gradient(270deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.03) 100%);
       box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
-  }
+      z-index: 1;
+    }
   }
 
   .contentTitle {
@@ -72,7 +89,7 @@
   .pNum {
     font-size: 12px;
     font-weight: 400;
-    color: rgba(131,131,131,1);
+    color: rgba(131, 131, 131, 1);
   }
 }
 
@@ -89,12 +106,14 @@
 
     .van-cell {
       padding: 18px 20px;
-      &::after{
+
+      &::after {
         left: 20px;
         right: 20px;
         border-color: rgba(242, 242, 242, 1);
         transform: none;
       }
+
       .van-cell__title {
         padding-right: 8px;
 
@@ -132,11 +151,13 @@
     border: 0;
     border-radius: 13px;
     flex-shrink: 0;
-    :global{
-      .van-button__text{
+
+    :global {
+      .van-button__text {
         white-space: nowrap;
       }
     }
+
     &.look {
       background: linear-gradient(180deg, #FFAB71 0%, #FF6E45 100%);
     }
@@ -149,7 +170,8 @@
       opacity: 1;
       background: linear-gradient(180deg, #D3D3D3 0%, #8F8F8F 100%);
     }
-    &.downing{
+
+    &.downing {
       width: 100px;
     }
   }

src/views/courseList/index.tsx

@@ -16,7 +16,7 @@ import {
   SkeletonImage,
   Space
 } from 'vant'
-import { defineComponent, onMounted, reactive, onUnmounted } from 'vue'
+import { defineComponent, onMounted, reactive, onUnmounted, nextTick, Transition, TransitionGroup } from 'vue'
 import styles from './index.module.less'
 import { useRoute, useRouter } from 'vue-router'
 import {
@@ -34,6 +34,8 @@ import { handleCheckVip } from '../hook/useFee'
 import iconList from './image/icon-list.png'
 import OSticky from '@/components/o-sticky'
 import OHeader from '@/components/o-header'
+import { useEventListener } from '@vant/use'
+import OLoading from '@/components/o-loading'
 export default defineComponent({
   name: 'courseList',
   setup() {
@@ -42,6 +44,7 @@ export default defineComponent({
     const browserInfo = browser()
     // const catchList = store
     const data = reactive({
+      titleOpacity: 0,
       loading: true,
       detail: {
         cover: '',
@@ -85,17 +88,21 @@ export default defineComponent({
             state.platformApi + '/courseSchedule/myCoursewareDetail/' + route.query.id
           )
           if (Array.isArray(res?.data)) {
-            const _list =  await checkCoursewareCache(res.data)
-            data.list = browserInfo.isApp ? res.data.map((item: any) => {
-              const _item = _list.find((n: any) => n.lessonCoursewareDetailId == item.lessonCoursewareDetailId)
-              const n = {
-                ...item
-              }
-              if (_item){
-                n.hasCache = _item.hasCache
-              }
-              return n
-            }) : res.data
+            const _list = await checkCoursewareCache(res.data)
+            data.list = browserInfo.isApp
+            ? res.data.map((item: any) => {
+              const _item = _list.find(
+                (n: any) => n.lessonCoursewareDetailId == item.lessonCoursewareDetailId
+                )
+                const n = {
+                  ...item
+                }
+                if (_item) {
+                  n.hasCache = _item.hasCache
+                }
+                return n
+              })
+              : res.data
           }
         } catch (error) {}
       }
@@ -231,108 +238,125 @@ export default defineComponent({
         }
       } catch (error) {}
     }
+
+    useEventListener('scroll', (e: Event) => {
+      const height = window.scrollY || window.pageYOffset || document.documentElement.scrollTop
+      data.titleOpacity = height > 100 ? 1 : height / 100
+    })
     return () => (
       <div class={styles.courseList}>
-        <OSticky
-          onGetHeight={(height: number) => {
-            document.documentElement.style.setProperty('--header-height', height + 'px')
-          }}
-        >
-          <OHeader
-            border={false}
-            background="transparent"
-            color="rgba(124, 61, 18, 1)"
-            title="教材详情"
-          />
-        </OSticky>
-
+        <OHeader
+          border={false}
+          background={`rgba(255,255,255, ${data.titleOpacity})`}
+          color="rgba(124, 61, 18, 1)"
+          title="教材详情"
+        />
         <div class={styles.periodContent}>
-          <Image class={styles.cover} src={data.detail.cover}>
-            {{
-              loading: () => <Loading />
-            }}
-          </Image>
-          {/* <img class={styles.cover} src={data.detail.cover} /> */}
+          <div class={styles.cover}>
+            <img
+              src={data.detail.cover}
+              onLoad={(e: Event) => {
+                if (e.target) {
+                  ;(e.target as any).style.opacity = 1
+                }
+              }}
+            />
+          </div>
           <div>
             <div class={styles.contentTitle}>{data.detail.name}</div>
             <div class={styles.contentLabel}>教学目标：{data.detail.des}</div>
           </div>
         </div>
 
-        <div class={styles.periodTitle}>
-          <img class={styles.pIcon} src={iconList} />
-          <div class={styles.pTitle}>课程列表</div>
-          <div class={styles.pNum}>共{data.list.length}课</div>
-        </div>
+        <TransitionGroup name="van-fade">
+          {!data.loading && (
+            <>
+              <div key="periodTitle" class={styles.periodTitle}>
+                <img class={styles.pIcon} src={iconList} />
+                <div class={styles.pTitle}>课程列表</div>
+                <div class={styles.pNum}>共{data.list.length}课</div>
+              </div>
 
-        <div class={styles.periodList}>
-          <CellGroup inset>
-            {data.list.map((item: any) => {
-              const isLock =
-              item.lockFlag ||
-              ((route.query.code == 'select' || state.platformType == 'STUDENT') && !item.unlock)
+              <div key="list" class={styles.periodList}>
+                <CellGroup inset>
+                  {data.list.map((item: any) => {
+                    const isLock =
+                      item.lockFlag ||
+                      ((route.query.code == 'select' || state.platformType == 'STUDENT') &&
+                        !item.unlock)
 
-              const isSelect = route.query.code === 'select'
-              return (
-                <Cell
-                  border
-                  center
-                  title={item.coursewareDetailName}
-                  label={!browserInfo.isStudent ? `已使用${item.useNum || 0}次` : ''}
-                  onClick={() => !isLock && handleClick(item)}
-                >
-                  {{
-                    icon: () => (
-                      <div class={styles.periodItem}>
-                        <div class={styles.periodItemModel}>
-                          <img src={isLock ? iconCourseLock : iconCourse} />
-                        </div>
-                      </div>
-                    ),
-                    value: () => (
-                      <>
-                        {isSelect ? (
-                          <Button
-                            disabled={isLock}
-                            class={[styles.baseBtn, isLock ? styles.disable : styles.look]}
-                          >
-                            选择
-                          </Button>
-                        ) : item.knowledgePointList ? (
-                          <>
-                            {item.hasCache ? (
-                              <Button disabled={isLock} class={[styles.baseBtn, isLock ? styles.disable : styles.look]}>查看</Button>
-                            ) : (
-                              <Button
-                                disabled={isLock}
-                                class={[
-                                  styles.baseBtn,
-                                  isLock ? styles.disable : styles.down,
-                                  item.downloadStatus ? styles.downing : ''
-                                ]}
-                              >
-                                {item.downloadStatus === 1
-                                  ? `下载中 ${item.progress || 0}%`
-                                  : item.downloadStatus === 2
-                                  ? '下载成功'
-                                  : item.downloadStatus === 3
-                                  ? '重新下载'
-                                  : '下载'}
-                              </Button>
-                            )}
-                          </>
-                        ) : (
-                          ''
-                        )}
-                      </>
+                    const isSelect = route.query.code === 'select'
+                    return (
+                      <Cell
+                        border
+                        center
+                        title={item.coursewareDetailName}
+                        label={!browserInfo.isStudent ? `已使用${item.useNum || 0}次` : ''}
+                        onClick={() => !isLock && handleClick(item)}
+                      >
+                        {{
+                          icon: () => (
+                            <div class={styles.periodItem}>
+                              <div class={styles.periodItemModel}>
+                                <img src={isLock ? iconCourseLock : iconCourse} />
+                              </div>
+                            </div>
+                          ),
+                          value: () => (
+                            <>
+                              {isSelect ? (
+                                <Button
+                                  disabled={isLock}
+                                  class={[styles.baseBtn, isLock ? styles.disable : styles.look]}
+                                >
+                                  选择
+                                </Button>
+                              ) : item.knowledgePointList ? (
+                                <>
+                                  {item.hasCache ? (
+                                    <Button
+                                      disabled={isLock}
+                                      class={[
+                                        styles.baseBtn,
+                                        isLock ? styles.disable : styles.look
+                                      ]}
+                                    >
+                                      查看
+                                    </Button>
+                                  ) : (
+                                    <Button
+                                      disabled={isLock}
+                                      class={[
+                                        styles.baseBtn,
+                                        isLock ? styles.disable : styles.down,
+                                        item.downloadStatus ? styles.downing : ''
+                                      ]}
+                                    >
+                                      {item.downloadStatus === 1
+                                        ? `下载中 ${item.progress || 0}%`
+                                        : item.downloadStatus === 2
+                                        ? '下载成功'
+                                        : item.downloadStatus === 3
+                                        ? '重新下载'
+                                        : '下载'}
+                                    </Button>
+                                  )}
+                                </>
+                              ) : (
+                                ''
+                              )}
+                            </>
+                          )
+                        }}
+                      </Cell>
                     )
-                  }}
-                </Cell>
-              )
-            })}
-          </CellGroup>
-        </div>
-
+                  })}
+                </CellGroup>
+              </div>
+            </>
+          )}
+        </TransitionGroup>
+        {data.loading && <OLoading />}
         {!data.loading && !data.list.length && <OEmpty tips="暂无内容" />}
       </div>
     )

src/views/coursewarePlay/component/video-play.tsx

@@ -17,11 +17,15 @@ export default defineComponent({
       default: () => {
         return {}
       }
+    },
+    isEmtry: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset'],
   setup(props, { emit, expose }) {
-    const { item } = toRefs(props)
+    const { item, isEmtry } = toRefs(props)
     const videoRef = ref()
     const videoItem = ref<Plyr>()
     const controlID = 'v' + Date.now() + Math.floor(Math.random() * 100)
@@ -150,7 +154,7 @@ export default defineComponent({
       <div class={styles.videoWrap}>
         <video
           style={{ width: '100%', height: '100%' }}
-          src={item.value.content}
+          src={isEmtry.value ? '' : item.value.content}
           ref={videoRef}
           playsinline="false"
         ></video>

src/views/coursewarePlay/index.tsx

@@ -674,6 +674,7 @@ export default defineComponent({
             <div class={styles.wraps}>
               {data.itemList.map((m: any, mIndex: number) => {
                 const isRender = m.isRender || Math.abs(popupData.activeIndex - mIndex) < 2
+                const isEmtry = Math.abs(popupData.activeIndex - mIndex) > 4
                 if (isRender) {
                   m.isRender = true
                 }
@@ -717,6 +718,7 @@ export default defineComponent({
                         <VideoPlay
                           ref={(v: any) => (data.videoRefs[mIndex] = v)}
                           item={m}
+                          isEmtry={isEmtry}
                           onLoadedmetadata={(videoItem: any) => {
                             m.videoEle = videoItem
                           }}

src/views/lessonCourseware/component/CourseItem/index.module.less

@@ -96,9 +96,19 @@
     }
 
     .coverImg {
-        display: block;
         width: 100%;
-        max-height: 140px;
+        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAABOFBMVEUAAAC0tLTT09PU1NTt7e3////T09P////T09P////T09P////X19f////U1NTU1NTT09PT09PU1NTU1NTV1dXT09PU1NTU1NTV1dXZ2dn+/v7R0dH////////KysrIyMjT09O0tLTU1NS0tLTU1NS0tLTT09PT09PT09PU1NTU1NTU1NTT09O2trbU1NTV1dXV1dXW1tbV1dXW1tbV1dXJycm4uLj///+0tLT///+0tLT////p6em0tLT4+Pj///+2trb///+1tbX///+0tLT////T09P5+fn+/v63t7e8vLz8/Pzl5eXW1tbBwcH39/fw8PDs7Ozb29v7+/vg4ODOzs65ubny8vLJycnp6enGxsbFxcW+vr62trb09PTY2NjLy8vCwsLn5+fi4uLS0tLu7u7Q0NDd3d02Mu/gAAAARHRSTlMAnPwvBfv07ODdw5AbGezmyrirl5B4aT0kDZyclTwsIPj48+Ta1tPS0LGhiIaEcGJgV05FNhMS7++8vKyslZRzc1ZWJRSpe/cAAALfSURBVFjD7djXcuIwGAVg1pTQAiT0Ekiy6b1v7whsA6b3EGAJu+//BstaiWNiCYGlXGTG55KBDzH6j2xjMmJET5ZdDivQFavDtTxLXlsCFFlam7HmiUxl49ftApRxYWkHLe3A0lZa2oqlAXUMGk/fHG9vpCnSk/pZNJ18m6aOWELRN1CmtbMI+jjNJH0Evc2GlhD0Bhu6h6DTjPIq6Pqonb8XXoCWmjKSHTCnpccp5ges6bHCZAW2dBc8JcOWLqjoPFu6oqLLr2bVQxX9h/GElBWmKDCmxSKAyXWYt1GE677rLtLGejsLcuOCQMI7lVFlsMjxJJUeW3bP+OSTskBJqcuSFppAFT4vsqMrYDrVAitazMHV8kBJs8WGzsPmNoRCFSj5fcuA7vJKvcQ8UJKrCNT0WH0mdEpASbFOSdfhyClvzagGsSzR0D14LHTSSho1/mkQaw39dB9u2vThCU8KQj1JtFiVt+z5ONSLmnoSaeszuia/+lfzAaGS09STQDum6SH/cOXX5rY9Xz0Rj6Sqy0YmjUzrbp56ah6kIT2AH8Pe4M5TT83jP6ThsnALmq+eiD8tlIt/G8POWU8FVNMNuXc8rnH4epJpOHg1jIivJ5mWcvLg4ZqMryeZhnOLm1hyPfF0C95R9PAcvp4jcSYNL7UDHEWuJ56GO46FyPXE0+/+/7Lhgs+ffU093yPoDwCAEcki1/Mjgv4BQFUkSeR6/jQh8gn0SQy5np9NqFi+CgSDWE9rwmJCJ/X9yxt9iSdisVji2y+TESNGXjiW6LU7FYkkzQ9JRiIp93XUoodyX12cBg/9qyvOHbvXxmUw4Wxe+45zZdV/GDy9uHJbZqPhk7jTjrTI4ezO+EkY8wUBW4Y6tgCSPvNxtDLnOzOhEw2HAvt7Hj2oZ28/EApHyRtpvjwPBY/8B5Ot9O1u2b2eTds6x8nr4tZtmx6vfWvXN9nCA/9RMHR+aZ5sohEji+YfnN0/51L6d+cAAAAASUVORK5CYII=');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 50%;
+
+        &>img {
+            display: block;
+            width: 100%;
+            min-height: 140px;
+            opacity: 0;
+            transition: opacity .3s;
+        }
 
         :global {
             .van-image__loading {
@@ -116,6 +126,7 @@
             height: 100%;
             background: linear-gradient(270deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.03) 100%);
             box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
+            z-index: 1;
         }
     }
 

src/views/lessonCourseware/component/CourseItem/index.tsx

@@ -36,17 +36,19 @@ export default defineComponent({
             return (
               <div class={styles.item} onClick={() => emit('itemClick', item)}>
                 <div class={styles.cover}>
-                  <Image class={styles.coverImg} src={item.coverImg}>
-                    {{
-                      loading: () => <Loading />, 
-                    }}
-                  </Image>
-                  {/* <img class={styles.coverImg} src={item.coverImg} /> */}
-                  {/* {item.delFlag && <div class={styles.model}>
-                    <img src={iconLock} />
-                    <div>未解锁</div>
-                </div>} */}
-                  <div class={styles.coverNum}>{item.courseNumName ? item.courseNumName : `共${item.courseNum}课`}</div>
+                  <div class={styles.coverImg}>
+                    <img
+                      src={item.coverImg}
+                      onLoad={(e: Event) => {
+                        if (e.target) {
+                          (e.target as any).style.opacity = 1
+                        }
+                      }}
+                    />
+                  </div>
+                  <div class={styles.coverNum}>
+                    {item.courseNumName ? item.courseNumName : `共${item.courseNum}课`}
+                  </div>
                 </div>
                 <div class={[styles.name, 'van-ellipsis']}>{item.name}</div>
               </div>

src/views/lessonCourseware/index.tsx

@@ -14,7 +14,7 @@ import {
   showToast,
   Toast
 } from 'vant'
-import { computed, defineComponent, onMounted, reactive } from 'vue'
+import { computed, defineComponent, onMounted, reactive, Transition } from 'vue'
 import styles from './index.module.less'
 import iconLook from './image/look.svg'
 import { useRoute, useRouter } from 'vue-router'
@@ -24,6 +24,7 @@ import OHeader from '@/components/o-header'
 import CourseItem from './component/CourseItem'
 import { courseEmnu } from '@/constant'
 import { browser } from '@/helpers/utils'
+import OLoading from '@/components/o-loading'
 export default defineComponent({
   name: 'lessonCourseware',
   setup() {
@@ -66,7 +67,7 @@ export default defineComponent({
               }
             })
             data.list = filterData(_data)
-            console.log("🚀 ~ data.list:", data.list)
+            console.log('🚀 ~ data.list:', data.list)
           }
         } catch (error) {}
       } else {
@@ -134,35 +135,38 @@ export default defineComponent({
       <div
         class={[styles.lessonCourseware, !Object.values(data.list).length && 'emptyRootContainer']}
       >
-        <OSticky
-          onGetHeight={(height: number) => {
-            document.documentElement.style.setProperty('--header-height', height + 'px')
-          }}
+        <OHeader
+          border={false}
+          background="rgba(255, 232, 206, 1)"
+          color="rgba(124, 61, 18, 1)"
+          title="云教材"
         >
-          <OHeader
-            border={false}
-            background="rgba(255, 232, 206, 1)"
-            color="rgba(124, 61, 18, 1)"
-            title="云教材"
-          >
-            {{
-              right: () => (
-                <>
-                  {data.showRight && (
-                    <div class={styles.filter} onClick={() => (data.actionShow = true)}>
-                      {data.actionName} <Icon style={{ transform: 'rotate(90deg)' }} name="play" />{' '}
-                    </div>
-                  )}
-                </>
+          {{
+            right: () => (
+              <>
+                {data.showRight && (
+                  <div class={styles.filter} onClick={() => (data.actionShow = true)}>
+                    {data.actionName} <Icon style={{ transform: 'rotate(90deg)' }} name="play" />{' '}
+                  </div>
+                )}
+              </>
+            )
+          }}
+        </OHeader>
+        <Transition name="van-fade">
+          {!data.loading &&
+            Object.keys(data.list).map((key: any) => {
+              return (
+                <CourseItem
+                  term={key}
+                  list={data.list[key]}
+                  onItemClick={(row) => handleClick(row)}
+                />
               )
-            }}
-          </OHeader>
-        </OSticky>
-        {Object.keys(data.list).map((key: any) => {
-          return (
-            <CourseItem term={key} list={data.list[key]} onItemClick={(row) => handleClick(row)} />
-          )
-        })}
+            })}
+        </Transition>
+        {data.loading && <OLoading />}
+
         {!data.loading && !Object.values(data.list).length && <OEmpty tips="没有课件" />}
         <Popup position="bottom" round v-model:show={data.actionShow}>
           <Picker

src/views/subject-echarts/index.tsx

@@ -301,13 +301,14 @@ export default defineComponent({
               </div>
               <div class={[styles.item, styles.line]}>
                 <div class={styles.itemNum}>
-                  <span class={styles.rect} style={{ background: '#FFE7DF' }}></span>
+                  <span class={styles.rect} style={{ background: '#4A99FF' }}></span>
                   <span>{activeData.sum.noPassNum}</span>
                 </div>
                 <div class={styles.itemTitle}>未达标人数</div>
               </div>
               <div class={styles.item}>
                 <div class={styles.itemNum}>
+                <span class={styles.rect} style={{ background: '#9884BA' }}></span>
                   <span>{activeData.sum.noMemberNum}</span>
                 </div>
                 <div class={styles.itemTitle}>非会员人数</div>

vite.config.ts

@@ -11,7 +11,8 @@ function resolve(dir: string) {
 }
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
-const proxyUrl = 'https://test.lexiaoya.cn/';
+// const proxyUrl = 'https://test.lexiaoya.cn/';
+const proxyUrl = 'https://online.lexiaoya.cn/';
 // const proxyUrl = 'http://47.98.131.38:8989/'
 // const proxyUrl = 'http://192.168.3.20:8989/' // 邹旋
 // const proxyUrl = 'http://192.168.3.143:8989/' // 尚科