修改报名样式

src/views/student-register/index.module.less

@@ -1,23 +1,22 @@
 .student-register {
   min-height: 100vh;
   // background: #FFF4E2;
-  background: linear-gradient(180deg, #C9EDFD 0%, #CCF0FF 100%);
+  background: linear-gradient(180deg, #c9edfd 0%, #ccf0ff 100%);
   overflow: hidden;
   position: relative;
 
-  --k-font-primary: #007AFE;
+  --k-font-primary: #007afe;
 
   .studentRegisterContainer {
     padding-top: 142px;
-    background: url('./images/new/banner-bg.png') no-repeat top center;
+    background: url('./images/new1/banner-bg.png') no-repeat top center;
     background-size: contain;
   }
 
-
   .video-content {
     margin: 16px 14px 2px;
     padding: 6px;
-    background: linear-gradient(270deg, #5BBEFC 0%, #5CC9FF 100%), #5BBEFC;
+    background: linear-gradient(270deg, #5bbefc 0%, #5cc9ff 100%), #5bbefc;
     border-radius: 16px;
     height: 171.125px;
     // 154.125
@@ -61,7 +60,6 @@
         padding: 4px 5px 4px 3px;
       }
 
-
       .video-js {
         width: 100%;
         height: 100%;
@@ -73,7 +71,6 @@
         background-size: cover;
       }
 
-
       .plyr__poster {
         background-size: cover;
       }
@@ -105,9 +102,8 @@
       }
 
       .vjs-button-icon {
-        height: 42Px !important;
+        height: 42px !important;
       }
-
     }
 
     .video {
@@ -120,11 +116,16 @@
 
 .countdownSection {
   position: relative;
-  background: linear-gradient(90deg, #FFBBD1 0%, #FFEFE2 100%), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
+  background: linear-gradient(90deg, #ffbbd1 0%, #ffefe2 100%),
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.7) 100%
+    );
   border-radius: 16px;
   margin: 0 14px 12px;
   padding: 10px 16px 10px;
-  border: 2px solid #FFFFFF;
+  border: 2px solid #ffffff;
 
   &::before {
     content: '';
@@ -159,11 +160,11 @@
       height: 22px;
       min-width: 22px;
       padding: 0 3px;
-      background: #FF3A5F;
+      background: #ff3a5f;
       border-radius: 4px;
       font-weight: 600;
       font-size: 12px;
-      color: #FFFFFF;
+      color: #ffffff;
       margin: 0 4px;
     }
   }
@@ -176,12 +177,12 @@
 
   .timerTip {
     margin-top: 10px;
-    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
+    background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
     border-radius: 12px;
     text-align: center;
     padding: 4px 6px;
     font-size: 11px;
-    color: #69717C;
+    color: #69717c;
     line-height: 16px;
   }
 }
@@ -192,11 +193,10 @@
   justify-content: flex-end;
   font-size: 14px;
   padding: 16px 14px calc(16px + env(safe-area-inset-bottom)) 12px;
-  background: #FFFFFF;
-  box-shadow: 0px -1px 0px 0px #F2F2F2, inset 0px 1px 3px 0px #FFFFFF;
+  background: #ffffff;
+  box-shadow: 0px -1px 0px 0px #f2f2f2, inset 0px 1px 3px 0px #ffffff;
   border-radius: 18px 18px 0px 0px;
 
-
   .payemntPrice {
     // line-height: 0;
     position: absolute;
@@ -214,7 +214,7 @@
     font-size: 14px;
     font-family: DINAlternate-Bold, DINAlternate;
     font-weight: bold;
-    color: #FC1A19;
+    color: #fc1a19;
     padding-right: 6px;
 
     span {
@@ -238,7 +238,7 @@
     font-size: 14px;
     font-family: DINAlternate-Bold, DINAlternate;
     font-weight: bold;
-    color: #AAAAAA;
+    color: #aaaaaa;
     line-height: 16px;
     vertical-align: text-top;
   }
@@ -248,7 +248,7 @@
       height: 40px;
       line-height: 40px;
       width: 148px;
-      background: linear-gradient(135deg, #31C7FF 0%, #007AFE 100%);
+      background: linear-gradient(135deg, #31c7ff 0%, #007afe 100%);
       font-size: 16px;
       color: #fff;
       font-weight: 500;
@@ -272,13 +272,17 @@
 .studentSection {
   margin: 0 14px 12px;
   padding: 12px 15px;
-  background: linear-gradient(180deg, rgba(219, 246, 253) 0%, rgba(255, 255, 255) 30%);
+  background: linear-gradient(
+    180deg,
+    rgba(219, 246, 253) 0%,
+    rgba(255, 255, 255) 30%
+  );
   border-radius: 16px;
-  border: 2px solid #FFFFFF;
+  border: 2px solid #ffffff;
 
   &.studentSectionForm {
     padding: 12px 0;
-    background: linear-gradient(180deg, #DBF6FD 0%, #FFFFFF 10%);
+    background: linear-gradient(180deg, #dbf6fd 0%, #ffffff 10%);
   }
 
   &.noSendDay {
@@ -313,6 +317,13 @@
     background-size: contain;
   }
 
+  .videoContent {
+    font-size: 14px;
+    color: #777777;
+    line-height: 21px;
+    padding: 16px 14px 0;
+  }
+
   .goodsGroup {
     display: flex;
     align-items: center;
@@ -336,8 +347,6 @@
     background: url('./images/new/btn-left-default.png') no-repeat center;
     background-size: contain;
 
-
-
     .goodsInner {
       // transform: skewX(15deg);
       // background: #EBF3F8;
@@ -351,16 +360,13 @@
       background-size: contain !important;
       color: #fff;
       font-weight: 600;
-
     }
 
     &.checked1 {
-
       background: url('./images/new/btn-right-active.png') no-repeat center !important;
       background-size: contain !important;
       color: #fff;
       font-weight: 600;
-
     }
 
     .proposalTip {
@@ -374,7 +380,18 @@
       background-size: contain;
     }
 
-    &+.goodsItem {
+    .proposalTip2 {
+      position: absolute;
+      right: -3px;
+      top: -14px;
+      width: 62px;
+      height: 23px;
+      display: inline-block;
+      background: url('./images/new1/icon-tips-2.png') no-repeat center;
+      background-size: contain;
+    }
+
+    & + .goodsItem {
       // margin-left: 8px;
       // border-radius: 4px 20px 20px 4px;
       // transform: skewX(-15deg);
@@ -397,7 +414,7 @@
 
     .memberNumer {
       margin: 14px 0 0;
-      background: #E8F8FF;
+      background: #e8f8ff;
       border-radius: 8px;
       padding: 8px 0 8px 10px;
       display: flex;
@@ -415,7 +432,7 @@
 
       span {
         font-size: 15px;
-        color: #F62C2C;
+        color: #f62c2c;
         padding: 0 5px;
         font-weight: 600;
       }
@@ -433,7 +450,7 @@
   .selectStudentGroup {
     margin-left: 10px;
     font-size: 14px;
-    color: #1189FF;
+    color: #1189ff;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -444,7 +461,6 @@
       }
     }
 
-
     span {
       display: flex;
       align-items: center;
@@ -475,9 +491,9 @@
 
   .fieldTips {
     font-size: 13px;
-    color: #EC763B;
+    color: #ec763b;
     line-height: 18px;
-    background: #FFF8EB;
+    background: #fff8eb;
     border-radius: 4px;
     padding: 4px 10px;
   }
@@ -508,7 +524,7 @@
     min-width: 80px;
     text-align: center;
     font-size: 14px;
-    color: #A0D0FF;
+    color: #a0d0ff;
   }
 
   :global {
@@ -516,7 +532,6 @@
       padding: 18px 14px;
     }
 
-
     .van-field__label {
       font-size: 16px;
       color: #666666;
@@ -530,7 +545,7 @@
   }
 
   .codeText {
-    color: #1189FF;
+    color: #1189ff;
     font-size: 14px;
 
     // &.codeTextDisabled {
@@ -540,7 +555,7 @@
 
   .memberNumer {
     margin: 14px 12px 0;
-    background: #E8F8FF;
+    background: #e8f8ff;
     border-radius: 8px;
     padding: 8px 0 8px 10px;
     display: flex;
@@ -558,7 +573,7 @@
 
     span {
       font-size: 15px;
-      color: #F62C2C;
+      color: #f62c2c;
       padding: 0 5px;
       font-weight: 600;
     }
@@ -586,13 +601,13 @@
   opacity: 0;
 }
 
-.radioSection+.radioSection {
+.radioSection + .radioSection {
   margin-left: 12px;
 }
 
 .goodsSection {
   border-radius: 18px 18px;
-  box-shadow: 0px 1px 6px 0px #F0D8C8;
+  box-shadow: 0px 1px 6px 0px #f0d8c8;
   border-radius: 18px;
   overflow: hidden;
   background: transparent;
@@ -614,7 +629,7 @@
 .goodsExtra {
   position: relative;
   margin: 16px 12px;
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 16px;
   padding-bottom: 16px;
 
@@ -626,7 +641,7 @@
 
   .memberNumer {
     margin: 16px 16px 0;
-    background: #E8F8FF;
+    background: #e8f8ff;
     border-radius: 8px;
     padding: 8px 0 8px 10px;
     display: flex;
@@ -644,7 +659,7 @@
 
     span {
       font-size: 15px;
-      color: #F62C2C;
+      color: #f62c2c;
       padding: 0 5px;
       font-weight: 600;
     }
@@ -684,10 +699,10 @@
     margin-left: 6px;
     font-size: 12px;
     font-weight: 400;
-    color: #19A1FE;
+    color: #19a1fe;
     line-height: 17px;
     height: 18px;
-    background: #F4FAFF;
+    background: #f4faff;
     border-radius: 4px;
     border: 1px solid rgba(52, 173, 255, 0.55);
     white-space: nowrap;
@@ -697,7 +712,7 @@
     margin: 6px 0 4px;
     font-weight: 500;
     font-size: 13px;
-    color: #FF711B;
+    color: #ff711b;
 
     p {
       display: flex;
@@ -709,7 +724,7 @@
         border-radius: 50%;
         display: inline-block;
         margin-right: 4px;
-        background: #FF711B;
+        background: #ff711b;
       }
     }
   }
@@ -738,27 +753,25 @@
   .sbtnGroup {
     display: flex;
 
-    &>span {
+    & > span {
       font-size: 12px;
       font-weight: 600;
-      color: #AF540D;
+      color: #af540d;
       line-height: 18px;
       border-radius: 9px;
-      border: 1px solid rgba(175, 84, 13, .62);
+      border: 1px solid rgba(175, 84, 13, 0.62);
       padding: 0 6px;
     }
   }
-
 }
 
 .goodsTradition {
   position: relative;
   margin: 16px 12px;
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 16px;
   padding: 13px 16px 20px;
 
-
   .iconArrow {
     position: absolute;
     right: 85px;
@@ -773,7 +786,8 @@
     margin: 0 auto 11px;
   }
 
-  .steps {}
+  .steps {
+  }
 
   .step {
     position: relative;
@@ -816,7 +830,7 @@
       left: 0;
       width: 30px;
       height: 30px;
-      background: #C9E5FF;
+      background: #c9e5ff;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -831,8 +845,8 @@
         height: 22px;
         font-weight: bold;
         font-size: 13px;
-        color: #FFFFFF;
-        background: #1BA5FE;
+        color: #ffffff;
+        background: #1ba5fe;
       }
     }
   }
@@ -841,7 +855,7 @@
 .selectStudentPopup {
   :global {
     .van-popup__close-icon {
-      color: #767C7F;
+      color: #767c7f;
     }
   }
 }
@@ -852,13 +866,13 @@
   align-items: center;
 
   margin: 7px 13px 12px;
-  background-image: url('./images/new/vip_gift_suffix.png'), url('./images/new/vip_gift_bg.png');
+  background-image: url('./images/new/vip_gift_suffix.png'),
+    url('./images/new/vip_gift_bg.png');
   background-position: center right, center;
   background-repeat: no-repeat;
   background-size: contain;
   height: 47px;
 
-
   .iconGift {
     width: 60px;
     height: 51px;
@@ -867,19 +881,17 @@
 
   font-weight: 500;
   font-size: 15px;
-  color: #801D09;
+  color: #801d09;
   line-height: 21px;
 
-
-
   p {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex: 1;
 
-    &>div {
-      color: #FFFFFF;
+    & > div {
+      color: #ffffff;
       min-width: 84px;
       // text-align: center;
       display: flex;

src/views/student-register/index.tsx

@@ -61,7 +61,7 @@ import icon3 from './images/new/icon-3.png';
 import giftTip from './images/new/icon-9.png';
 import iconGift from './images/new/icon-gift.png';
 import vipGiftTIps from './images/new/vip_gift_tips.png';
-import icon10 from './images/new/icon-n-10.png';
+import icon10 from './images/new1/icon-n-10.png';
 import icon11 from './images/new/icon-n-11.png';
 import dayjs from 'dayjs';
 // import MMessageTip from '@/components/m-message-tip';
@@ -514,6 +514,7 @@ export default defineComponent({
     };
 
     const checkForm = (status = true) => {
+
       if (!checkPhone(studentInfo.username)) {
         status && showToast('请输入正确的手机号码');
         return true;
@@ -1597,7 +1598,7 @@ export default defineComponent({
       //       ...route.query
       //     })
       // );
-      forms.openId = authCode.onWeChatCatchOpenId("GET");
+      forms.openId = authCode.onWeChatCatchOpenId('GET');
       try {
         // 获取支付类型
         let expireDay = null;
@@ -1674,13 +1675,16 @@ export default defineComponent({
                 </div>
               </div>
               <div class={styles.timerTip}>
-                为了确保您能顺利参与学习，请在规定时间内报名。
+                如未在规定时间内报名，学生将无法获捐乐器。
               </div>
             </div>
           )}
 
           <div class={[styles.studentSection, styles.studentSectionForm]}>
             <div class={styles.title4}></div>
+            <div class={styles.videoContent}>
+              Ai练习是为保证乐器学习成功的建议方式，在报名时，学生自主选择使用与否，无强制要求。
+            </div>
             <div class={styles['video-content']}>
               <video
                 id="register-video"
@@ -1947,8 +1951,7 @@ export default defineComponent({
                   });
                 }}>
                 <div class={styles.goodsInner}>
-                  <i class={styles.proposalTip}></i>
-                  数字化方式
+                  <i class={styles.proposalTip2}></i>Ai练习
                 </div>
               </div>
               <div
@@ -1970,7 +1973,7 @@ export default defineComponent({
                     }, 50);
                   });
                 }}>
-                <div class={styles.goodsInner}>传统方式</div>
+                <div class={styles.goodsInner}>自行练习</div>
               </div>
             </div>