浏览代码

样式修改

黄琪勇 1 年之前
父节点
当前提交
46a34663b4

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

@@ -117,8 +117,8 @@
     line-height: 1;
 
     &.searchTenantBtn {
-      background: linear-gradient(270deg, #FF3C81 0%, #FF76A6 100%);
+      background: linear-gradient( 270deg, #FF436A 0%, #FF6D8B 100%);
       border: none;
     }
   }
-}
+}

二进制
src/tenant/images/bg.png


二进制
src/tenant/images/icon-search.png


二进制
src/tenant/music/courseList/image/bg.png


二进制
src/tenant/music/courseList/image/icon-close.png


+ 15 - 8
src/tenant/music/courseList/index.module.less

@@ -1,6 +1,6 @@
 .courseList {
   min-height: 100vh;
-  background-image: url('./image/bg.png');
+  background-image: url('../../images/bg.png');
   background-size: 100% 214px;
   background-repeat: no-repeat;
   box-sizing: border-box;
@@ -181,7 +181,7 @@
 }
 
 .courseDialog {
-  width: 315px;
+  width: 305px;
 
   :global {
     .van-dialog__header {
@@ -244,7 +244,7 @@
 }
 
 .courseDialog {
-  padding: 20px;
+  padding: 20px 15px;
 
   // :global {
   //   .van-popup__close-icon {
@@ -253,11 +253,11 @@
   //   }
   // }
   .iconClose {
-    width: 18px;
+    width: 19px;
     height: 19px;
     position: absolute;
-    top: 24px;
-    right: 23px;
+    top: 23px;
+    right: 20px;
     z-index: 9;
     background: url('./image/icon-close.png') no-repeat center;
     background-size: contain;
@@ -273,7 +273,8 @@
   }
 
   .content {
-    padding: 20px 0 25px;
+    padding: 20px 5px 25px;
+    font-weight: 400;
     font-size: 16px;
     color: #666666;
     line-height: 24px;
@@ -294,7 +295,13 @@
     }
   }
 }
-
+.btnLeft {
+  color: #333;
+  border-color: #dbdbdb;
+}
+.btnRight {
+  background: linear-gradient(270deg, #ff204b 0%, #fe5b71 100%);
+}
 .finch {
   width: 150px;
   margin: 80px auto 0;

+ 13 - 8
src/tenant/music/courseList/index.tsx

@@ -247,10 +247,10 @@ export default defineComponent({
     }
     // 下载缓存进度
     const getProgress = (res: any) => {
-      // console.log('🚀 ~ res', res)
-      if (!data.isDownloading) {
-        return
-      }
+      //console.log('🚀 ~ res', res)
+      // if (!data.isDownloading) {
+      //   return
+      // }
       if (res?.content?.lessonCoursewareDetailId) {
         const { lessonCoursewareDetailId, downloadStatus, progress } =
           res.content
@@ -444,11 +444,11 @@ export default defineComponent({
                                 ) : (
                                   ''
                                 )}
-                                {item.downloadStatus == 1 && (
+                                {/* {item.downloadStatus == 1 && (
                                   <div class={styles.downloading}>{`${
                                     item.progress || 0
                                   }%`}</div>
-                                )}
+                                )} */}
                               </div>
                             </div>
                           ),
@@ -531,14 +531,19 @@ export default defineComponent({
           <div class={styles.title}>下载提醒</div>
 
           <div class={styles.content}>
-            您尚未下载课件内容,为了更加流畅的学习体验,推荐您下载后观看课件。
+            您尚未下载课件,为了更加流畅的学习体验,推荐您下载后观看课件。
           </div>
 
           <div class={styles.popupBtnGroup}>
-            <Button round onClick={() => gotoPlay(data.catchItem)}>
+            <Button
+              class={styles.btnLeft}
+              round
+              onClick={() => gotoPlay(data.catchItem)}
+            >
               直接观看
             </Button>
             <Button
+              class={styles.btnRight}
               round
               type="primary"
               onClick={() => downCatch(data.catchItem)}

+ 23 - 3
src/tenant/music/lessonCourseware/index.module.less

@@ -5,8 +5,8 @@
 
   :global {
     .van-sticky {
-      background: url('../../images/bg-image.png') no-repeat top center;
-      background-size: 100% 214px;
+      // background: url('../../images/bg.png') no-repeat top center;
+      // background-size: 100% 214px;
     }
 
     .van-search__content {
@@ -33,6 +33,17 @@
 
     .van-dropdown-menu__title {
       padding-left: 0;
+      color: #131415;
+      &:after {
+        border-color: transparent transparent rgba(0, 0, 0, 0.4)
+          rgba(0, 0, 0, 0.4);
+      }
+      &.van-dropdown-menu__title--active {
+        color: #fe2451;
+        &:after {
+          border-color: transparent transparent #fe2451 #fe2451;
+        }
+      }
     }
 
     .van-dropdown-menu__title:after {
@@ -66,6 +77,9 @@
           background-color: rgba(254, 36, 81, 0.08);
           border-radius: 10px;
           color: #fe2451;
+          .van-cell__title {
+            font-weight: 600;
+          }
         }
         .van-cell__title {
           font-weight: 400;
@@ -79,12 +93,18 @@
     }
   }
   .titleActive {
-    color: #fe2451;
     :global(.van-ellipsis) {
       max-width: 62px;
     }
   }
 }
+.search {
+  :global {
+    .van-search {
+      height: calc(var(--van-dropdown-menu-height) + 20px);
+    }
+  }
+}
 .bgImg {
   position: fixed;
   top: 0;

+ 3 - 2
src/tenant/music/lessonCourseware/index.tsx

@@ -13,7 +13,7 @@ import styles from './index.module.less'
 import { useRouter, useRoute } from 'vue-router'
 import ColHeader from '@/components/col-header'
 import TheSticky from '@/components/the-sticky'
-import bgImg from '../../images/bg-image.png'
+import bgImg from '../../images/bg.png'
 import Search from '@/components/col-search'
 import CourseItem from './component/CourseItem'
 import ColResult from '@/components/col-result'
@@ -67,7 +67,7 @@ export default defineComponent({
         if (res.code === 200) {
           subjectOpt.value = [
             {
-              text: '全部课件',
+              text: '全部教材',
               value: ''
             },
             ...(res.data?.courseTypeList || []).map(item => {
@@ -140,6 +140,7 @@ export default defineComponent({
                 color="#131415"
               ></ColHeader>
               <Search
+                class={styles.search}
                 onSearch={onSearch}
                 type="tenant"
                 placeholder={'请输入教材关键词'}

二进制
src/tenant/music/music-detail/images/icon_checkbox.png


+ 4 - 4
src/tenant/music/music-detail/new-index.module.less

@@ -8,7 +8,7 @@
   --van-overlay-background-color: rgba(0, 0, 0, .6);
   height: 100vh;
 
-  --plyr-color-main: #FF3C81;
+  --plyr-color-main: #FF436A;
   --plyr-control-icon-size: 10px;
   --plyr-range-track-height: 4px;
   // --plyr-range-thumb-height: 4px;
@@ -19,7 +19,7 @@
     }
 
     .plyr__controls .plyr__controls__item:first-child {
-      background: linear-gradient(270deg, #FF3C81 0%, #FF76A6 100%);
+      background: linear-gradient(90deg, #FF6D8B 0%, #FF436A 100%);
       color: #fff;
       border-radius: 50%;
     }
@@ -327,7 +327,7 @@
     right: 0;
     top: 0;
     height: 26px;
-    background: linear-gradient(270deg, #FF3C81 0%, #FF76A6 100%);
+    background: linear-gradient( 270deg, #FF436A 0%, #FF6D8B 100%);
     border-radius: 0px 0px 0px 16px;
     display: flex;
     align-items: center;
@@ -656,4 +656,4 @@
 
 .staffIframe {
   // margin-top: -60px;
-}
+}

+ 2 - 2
src/tenant/music/music-detail/new-index.tsx

@@ -1095,7 +1095,7 @@ export default defineComponent({
                     round
                     block
                     type="primary"
-                    color="linear-gradient(270deg, #FF3C81 0%, #FF76A6 100%)"
+                    color="linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%)"
                     onClick={() => {
                       if (!browser().isApp) {
                         onDownloadApp()
@@ -1128,7 +1128,7 @@ export default defineComponent({
                     round
                     block
                     type="primary"
-                    color="linear-gradient(270deg, #FF3C81 0%, #FF76A6 100%)"
+                    color="linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%)"
                     onClick={() => {
                       if (!browser().isApp) {
                         onDownloadApp()

+ 20 - 9
src/tenant/music/train-list/index.module.less

@@ -5,8 +5,8 @@
 
   :global {
     .van-sticky {
-      background: url('../../images/bg-image.png') no-repeat top center;
-      background-size: 100% 214px;
+      // background: url('../../images/bg.png') no-repeat top center;
+      // background-size: 100% 214px;
     }
 
     .van-search__content {
@@ -33,13 +33,18 @@
 
     .van-dropdown-menu__title {
       padding-left: 0;
+      color: #131415;
+      &:after {
+        border-color: transparent transparent rgba(0, 0, 0, 0.4)
+          rgba(0, 0, 0, 0.4);
+      }
+      &.van-dropdown-menu__title--active {
+        color: #fe2451;
+        &:after {
+          border-color: transparent transparent #fe2451 #fe2451;
+        }
+      }
     }
-
-    .van-dropdown-menu__title:after {
-      border-color: transparent transparent rgba(0, 0, 0, 0.4)
-        rgba(0, 0, 0, 0.4);
-    }
-
     .van-dropdown-item__content {
       border-radius: 0px 0px 20px 20px;
     }
@@ -53,7 +58,13 @@
     color: #fe2451;
   }
 }
-
+.search {
+  :global {
+    .van-search {
+      height: calc(var(--van-dropdown-menu-height) + 20px);
+    }
+  }
+}
 .albumSearchSection {
   :global {
     .van-dropdown-menu__bar {

+ 2 - 1
src/tenant/music/train-list/index.tsx

@@ -27,7 +27,7 @@ import { openDefaultWebView, state as baseState, state } from '@/state'
 import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
 import Song from '../component/song'
 import ColHeader from '@/components/col-header'
-import bgImg from '../../images/bg-image.png'
+import bgImg from '../../images/bg.png'
 import TheSticky from '@/components/the-sticky'
 import dayjs from 'dayjs'
 
@@ -289,6 +289,7 @@ export default defineComponent({
                 }} */}
               </ColHeader>
               <Search
+                class={styles.search}
                 onSearch={onSearch}
                 type="tenant"
                 background="transparent"

二进制
src/tenant/music/train-tool/images/music-bg.png


+ 2 - 2
src/tenant/music/train-tool/index.module.less

@@ -306,7 +306,7 @@
     .van-tabs__line {
       width: 24px;
       height: 4px;
-      background: linear-gradient(90deg, #FF3C81 0%, rgba(255, 118, 166, 0.5) 100%) !important;
+      background: linear-gradient(90deg, #FF3C5E 0%, rgba(255, 118, 155,0.5) 100%) !important;
       border-radius: 36px 36px 0px 0px;
     }
 
@@ -343,4 +343,4 @@
       font-weight: 500;
     }
   }
-}
+}