Selaa lähdekoodia

feat: 报名提示弹窗

TIANYONG 4 kuukautta sitten
vanhempi
commit
20b49614a1

+ 35 - 4
src/views/student-register/index-apply.module.less

@@ -869,25 +869,47 @@
 
 .tipBoxPop {
   position: fixed;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   overflow: hidden;
   z-index: 999;
   .tipBox {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -55%);
     background: url('./images/tip-box-icon.png') no-repeat center;
     background-size: contain;
     height: 310px;
-    width: auto;
-    padding-top: 124px;
+    width: 260px;
+    padding: 124px 22px 0;
     .tipTitle {
-      width: 74px;
-      height: 21px;
+      width: 75px;
+      display: block;
+      margin: 0 auto 10px;
     }
     .tipBtn {
+      position: relative;
       img {
         width: 190px;
         height: 62px;
+        display: block;
+        margin: 8px auto 0;
+      }
+      span {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        padding: 12px;
+        font-size: 18px;
+        color: #fff;
+        font-weight: 500;
       }
     }
     .tipItem {
@@ -898,6 +920,15 @@
         height: 14px;
         margin-right: 5px;
       }
+      p {
+        font-size: 13px;
+        color: #777777;
+        line-height: 26px;
+        span {
+          color: #0C8BFE;
+          font-weight: 500;
+        }
+      }
     }
   }
 }

+ 5 - 4
src/views/student-register/index-apply.tsx

@@ -2176,17 +2176,18 @@ export default defineComponent({
                 <img src={tipIcon1} />
                 <p>开课时赠送<span>全新乐器一支</span></p>
               </li>
-              <li>
-                <img src={tipIcon1} />
+              <li class={styles.tipItem}>
+                <img src={tipIcon2} />
                 <p>买一赠二,即<span>团购一年,使用三年</span></p>
               </li>
-              <li>
-                <img src={tipIcon1} />
+              <li class={styles.tipItem}>
+                <img src={tipIcon3} />
                 <p><span>7天内无理由</span>全额退款保障</p>
               </li>
             </ul>
             <div class={styles.tipBtn}>
               <img src={tipBtnIcon} />
+              <span>我知道了(3s)</span>
             </div>
           </div>
         </div>