修改样式

src/views/activity-record/detail-swiper.tsx

@@ -7,7 +7,7 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/thumbs';
 import 'swiper/css/pagination';
-import iconVideoDefault from '@common/images/icon-video-c.png';
+import iconVideoDefault from '@common/images/icon-video-r.png';
 import { checkFile } from '@/helpers/toolsValidate';
 import palyBtn from './images/palyBtn.png';
 import arrayIcon from './images/array-icon.png';

src/views/activity-record/detail.module.less

@@ -8,6 +8,7 @@
     background-size: 375px 346px;
     width: 375px;
     height: 346px;
+
     .fixWrap {
       width: 100%;
       height: 30px;
@@ -19,24 +20,29 @@
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
+
       img {
         width: 30px;
         height: 30px;
         display: block;
       }
+
       .editIcon {
         margin-right: 16px;
       }
     }
+
     .wall {
       height: 68px;
     }
+
     .jiemuIcon {
       margin-top: 15px;
       width: 210px;
       height: 67px;
       margin-left: 16px;
     }
+
     .typeCard {
       width: 99px;
       height: 29px;
@@ -51,6 +57,7 @@
       font-size: 14px;
       margin-bottom: 43px;
     }
+
     .activeInfo {
       width: 343px;
       height: 87px;
@@ -60,15 +67,14 @@
       border: 1px solid transparent;
       background-clip: padding-box, border-box;
       background-origin: padding-box, border-box;
-      background-image: linear-gradient(
-          270deg,
+      background-image: linear-gradient(270deg,
           #1dc2ff 0%,
           #0283ff 48%,
-          #0bb7fe 100%
-        ),
+          #0bb7fe 100%),
         linear-gradient(360deg, #d1fff6, #e5f8ff);
 
       margin: 0 auto;
+
       .hornIcon {
         width: 50px;
         height: 61px;
@@ -76,6 +82,7 @@
         left: -10px;
         position: absolute;
       }
+
       .noteIcon {
         width: 38px;
         height: 34px;
@@ -83,6 +90,7 @@
         bottom: -6px;
         position: absolute;
       }
+
       .headerName {
         font-size: 18px;
         font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;
@@ -93,6 +101,7 @@
         margin-top: 12px;
         font-weight: 600;
       }
+
       .headerTimes {
         width: 192px;
         height: 26px;
@@ -107,8 +116,10 @@
       }
     }
   }
+
   .programWrap {
     background: linear-gradient(180deg, #adeee1 0%, #c5f5db 100%);
+
     .programList {
       padding: 15px;
       position: relative;
@@ -128,12 +139,11 @@
         background-clip: padding-box, border-box;
         background-origin: padding-box, border-box;
         background-image: linear-gradient(270deg, #fff, #fff),
-          linear-gradient(
-            180deg,
+          linear-gradient(180deg,
             rgba(255, 255, 255, 1),
-            rgba(201, 227, 255, 1)
-          );
+            rgba(201, 227, 255, 1));
         margin-bottom: 20px;
+
         .programInfo {
           position: relative;
           background-clip: padding-box;
@@ -148,6 +158,7 @@
           border-radius: 16px;
           z-index: 200;
           padding: 10px 10px 15px;
+
           .ballIcon {
             position: absolute;
             width: 57px;
@@ -156,16 +167,15 @@
             right: -9px;
             z-index: 100;
           }
+
           .programInfoTitleWrap {
             position: relative;
             border-radius: 100px 0px 0px 100px;
             width: 247px;
             height: 25px;
-            background: linear-gradient(
-              270deg,
-              rgba(255, 255, 255, 0),
-              rgba(255, 255, 255, 1)
-            );
+            background: linear-gradient(270deg,
+                rgba(255, 255, 255, 0),
+                rgba(255, 255, 255, 1));
             display: flex;
             flex-direction: row;
             align-items: center;
@@ -182,6 +192,7 @@
               z-index: 80;
               padding-right: 5px;
               font-size: 15px;
+
               &:after {
                 content: '';
                 width: 14px;
@@ -203,24 +214,29 @@
               top: -3px;
               z-index: 100;
             }
+
             .dotIcon {
               width: 18px;
               height: 9px;
               margin-left: 12px;
             }
           }
+
           .itemRow {
             margin-top: 12px;
+
             .label {
               font-size: 14px;
               font-weight: 600;
               color: #6a7169;
             }
+
             .content {
               font-size: 14px;
               font-weight: 600;
 
               color: #131415;
+
               span {
                 color: #13a9ff;
                 margin-left: 12px;
@@ -229,6 +245,7 @@
             }
           }
         }
+
         .progItemList {
           min-height: 237px;
           width: 311px;
@@ -241,10 +258,12 @@
             linear-gradient(180deg, #bef6e9, #c1e3f7);
           border-radius: 10px;
           overflow: hidden;
+
           .videoWErap {
             position: relative;
             width: 308px;
             height: 175px;
+
             .palyBtn {
               width: 46px !important;
               height: 46px !important;
@@ -259,6 +278,7 @@
 
           .videoSmallWErap {
             position: relative;
+
             .playBtn {
               width: 18px !important;
               height: 18px !important;
@@ -268,40 +288,48 @@
               top: 50%;
               margin-top: -9px;
               z-index: 200;
+
               img {
                 width: 18px !important;
                 height: 18px !important;
               }
             }
           }
+
           :global {
             .swiper-pagination-bullet-active {
               width: 10px !important;
               height: 4px;
               border-radius: 2px;
             }
+
             .swiper-pagination-bullet {
               width: 4px;
               height: 4px;
               border-radius: 2px;
             }
+
             .slide {
               border-radius: 10px 10px 0 0;
               overflow: hidden;
             }
+
             .topSwiper {
               width: 308px;
               height: 175px;
 
               .van-image {
                 border-radius: 10px 10px 0 0;
-
+                width: 100%;
+                height: 100%;
                 overflow: hidden;
               }
+
               video {
                 border-radius: 10px 10px 0 0;
-
                 overflow: hidden;
+                width: 100%;
+                height: 100%;
               }
             }
 
@@ -309,18 +337,21 @@
               .slide {
                 width: 74px;
                 height: 44px;
+
                 img {
                   display: block;
                   width: 66px;
                   height: 42px;
                   object-fit: cover !important;
                 }
+
                 video {
                   width: 66px;
                   height: 42px;
                 }
               }
             }
+
             .thumbs-swiper {
               box-sizing: border-box;
 
@@ -338,23 +369,20 @@
                 background-clip: padding-box, border-box;
                 background-origin: padding-box, border-box;
                 background-image: linear-gradient(225deg, #fff, #fff),
-                  linear-gradient(
-                    225deg,
+                  linear-gradient(225deg,
                     rgba(0, 98, 255, 1),
-                    rgba(46, 216, 255, 1)
-                  );
+                    rgba(46, 216, 255, 1));
 
                 &:not(.swiper-slide-thumb-active) {
-                  background-image: linear-gradient(
-                      225deg,
+                  background-image: linear-gradient(225deg,
                       transparent,
-                      transparent
-                    ),
+                      transparent),
                     linear-gradient(225deg, transparent, transparent);
                 }
               }
             }
           }
+
           .thumbsWrap {
             position: relative;
 
@@ -375,6 +403,7 @@
               text-align: center;
               top: 0;
               right: 0px;
+
               .arrayIcon {
                 width: 13px;
                 height: 13px;
@@ -389,6 +418,7 @@
           top: -2px;
           z-index: 99;
         }
+
         .pTitle {
           position: relative;
           top: -2px;
@@ -407,11 +437,14 @@
         }
       }
     }
+
     .bottomWrap {
       position: relative;
+
       .bottomBg {
         width: 100%;
       }
+
       .logo {
         width: 98px;
         height: 32px;
@@ -422,6 +455,7 @@
       }
     }
   }
+
   .iconEdit {
     font-size: 24px;
   }
@@ -580,6 +614,7 @@
     color: #ffffff;
     font-size: 12px;
   }
+
   .codeImg {
     position: relative;
     width: 315px;
@@ -591,6 +626,7 @@
     background-color: #ffffff;
     border-radius: 8px;
     overflow: hidden;
+
     .popupWeekBanner {
       width: 100%;
       // position: absolute;
@@ -610,10 +646,12 @@
       padding-left: 18px;
 
       .trainTimer {
+
         &::before,
         &::after {
           display: none;
         }
+
         .point {
           margin-left: 4px;
           margin-right: 4px;
@@ -640,8 +678,10 @@
       font-weight: 600;
       color: #ffffff;
     }
+
     .codeContent {
       position: relative;
+
       .schoolLogo {
         width: 52px;
         height: 52px;
@@ -653,6 +693,7 @@
         left: 50%;
         margin-left: -26px;
       }
+
       .schoolName {
         padding-top: 36px;
         text-align: center;
@@ -661,6 +702,7 @@
         line-height: 22px;
         font-size: 16px;
       }
+
       .shareName {
         padding-top: 4px;
         font-size: 14px;
@@ -671,12 +713,14 @@
         text-align: center;
         padding-bottom: 12px;
       }
+
       .shareBottom {
         width: 194px;
         height: 38px;
         margin: 16px auto 0;
         display: block;
       }
+
       .codeQr {
         position: relative;
         margin: 0 auto 0;
@@ -688,6 +732,7 @@
         border-radius: 11px;
         overflow: hidden;
         box-sizing: border-box;
+
         img {
           width: 100%;
           height: 100%;
@@ -706,12 +751,10 @@
     .codeBtnText {
       margin: 20px auto 0;
       display: inline-block;
-      background: linear-gradient(
-        132deg,
-        rgba(199, 239, 243, 0.25) 0%,
-        rgba(229, 206, 251, 0.25) 40%,
-        rgba(147, 194, 254, 0.25) 100%
-      );
+      background: linear-gradient(132deg,
+          rgba(199, 239, 243, 0.25) 0%,
+          rgba(229, 206, 251, 0.25) 40%,
+          rgba(147, 194, 254, 0.25) 100%);
       box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.62);
       border-radius: 18px;
       padding: 6px 16px;
@@ -728,11 +771,13 @@
       text-align: center;
     }
   }
+
   .close {
     position: absolute;
     top: 12px;
     right: 15px;
   }
+
   .codeBottom {
     position: relative;
     margin-top: 32px;
@@ -740,12 +785,14 @@
     border-radius: 20px 20px 0px 0px;
     padding-bottom: 10px;
   }
+
   .title {
     font-size: 16px;
     font-weight: 600;
     color: #333333;
     line-height: 22px;
     padding: 15px 15px 0;
+
     i {
       display: inline-block;
       margin-right: 6px;
@@ -755,14 +802,16 @@
       border-radius: 2px;
     }
   }
+
   .shareImg {
     width: 47px;
     height: 47px;
   }
+
   .shareText {
     padding-top: 6px;
     font-size: 14px;
     color: #333333;
     line-height: 20px;
   }
-}
+}

src/views/activity-record/index.module.less

@@ -70,7 +70,7 @@
 
   :global {
     .van-tab {
-      z-index: 1;
+      z-index: 1 !important;
     }
 
     .van-tab--shrink {