首页待开课

src/components/activity/extensionV1Shop.vue

 <template>
   <div class="activity">
     <img v-lazy="img1" alt />
-    <div class="title">注册领取课程</div>
-    <div class="form-block">
-      <div class="input-block">
-        <input
-          placeholder="手机（用于接收课程信息）"
-          autofocus="autofocus"
-          type="number"
-          pattern="[0-9]*"
-          v-model="mobile"
-        />
-      </div>
+    <div class="box">
+      <div class="form-block">
+        <div class="title">注册领取课程</div>
+        <div class="input-block">
+          <input
+            placeholder="手机（用于接收课程信息）"
+            autofocus="autofocus"
+            type="number"
+            pattern="[0-9]*"
+            v-model="mobile"
+          />
+        </div>
 
-      <div class="input-block">
-        <input
-          placeholder="验证码（请输入短信验证码）"
-          oninput="if(value.length>4)value=value.slice(0,4)"
-          type="number"
-          maxlength="4"
-          pattern="[0-9]*"
-          v-model="msgCode"
-        />
-        <button class="codeMsg right-btn" @click="sendMobileCode" v-if="time===0">发送验证码</button>
-        <button class="codeMsg disabled right-btn" v-if="time>0">{{time}}s后重新发送</button>
-      </div>
-      <div class="btn-block">
-        <div class="btn" ref="btn" @click="bindMobile">领取99元特惠课</div>
-      </div>
-      <div class="tip">
-        <img :src="lock" alt />&nbsp;唱唱会保护您的隐私 请放心输入
+        <div class="input-block">
+          <input
+            placeholder="验证码（请输入短信验证码）"
+            oninput="if(value.length>4)value=value.slice(0,4)"
+            type="number"
+            maxlength="4"
+            pattern="[0-9]*"
+            v-model="msgCode"
+          />
+          <button class="codeMsg right-btn" @click="sendMobileCode" v-if="time===0">发送验证码</button>
+          <button class="codeMsg disabled right-btn" v-if="time>0">{{time}}s后重新发送</button>
+        </div>
+        <div class="btn-block">
+          <div class="btn" ref="btn" @click="bindMobile">领取99元特惠课</div>
+        </div>
+        <div class="tip">
+          <img :src="lock" alt />&nbsp;唱唱会保护您的隐私 请放心输入
+        </div>
       </div>
     </div>
     <img v-lazy="img2" alt />
@@ -127,7 +129,8 @@ export default {
         query.cct_user_id = comment.getParamhref().cct_user_id;
       }
       console.log(json);
-      bindMobileApi(json).then(data => {
+      bindMobileApi(json)
+        .then(data => {
           getUserDetailApi().then(res => {
             localStorage.setItem("userDesc", JSON.stringify(res));
             this.$router.push({
@@ -135,7 +138,8 @@ export default {
               query: query
             });
           });
-        }).catch(res => {});
+        })
+        .catch(res => {});
     },
     refImgCode() {
       this.$refs.imgCode.src = "/api/public/img/verify?flag=" + Math.random();
@@ -189,13 +193,13 @@ video {
 @borderRadius: 8px;
 .activity {
   background-color: #f9d048;
-  padding-bottom: 63* @toVw;
-  .title{
+  padding-bottom: 63 * @toVw;
+  .title {
     font-size: 16 * @toVw;
     font-weight: bold;
     color: #952700;
     text-align: center;
-    margin-top: 13 * @toVw;
+    margin: 4 * @toVw 0  13 * @toVw;
   }
   .codeMsg {
     border-radius: 4 * @toVw;
@@ -209,22 +213,27 @@ video {
       opacity: 0.5;
     }
   }
+  .box{
+    padding: 0 12 * @toVw 10 * @toVw;
+    margin-top: 10 * @toVw;
+  }
   .form-block {
     // position: relative;
     z-index: 10;
     background: #f9d048;
     // top: -42*@toVw;
-    padding: 20 * @toVw;
-    // border-radius:20*@toVw;
+    background: white;
+    border-radius:5*@toVw;
+    padding: 10*@toVw;
     .tip {
       font-size: 12 * @toVw;
       color: #952700;
       text-align: center;
       margin-top: 16px;
-      img{
-        width: 11* @toVw;
+      img {
+        width: 11 * @toVw;
         position: relative;
-        top: 2* @toVw;
+        top: 2 * @toVw;
       }
     }
     .input-block {