开发静态页面

pages/activity/invite-user/invite-passive-user.vue

@@ -1,18 +1,154 @@
 <template>
-  <div>
-    被邀请页面
+  <div class="padssive ">
+    <div>
+      <div class="bright-wrap">
+        <div class="bright-item mb-6"></div>
+        <div class="bright-item mb-6"></div>
+        <div class="bright-item"></div>
+        <div class="bright-item"></div>
+      </div>
+
+      <div class="input-wrap">
+        <div class="input-cell">
+          <div class="input-cell-label">
+            <span class="required">*</span><span class="label-name">手机号</span>
+          </div>
+          <div class="input-cell-value">
+            <input class="input" v-model.trim="value" type="text" placeholder="请输入11位手机号" />
+          </div>
+          <div class="input-error-msg">手机号码不正确，请重新输入!</div>
+        </div>
+
+        <div class="input-cell">
+          <div class="input-cell-label">
+            <span class="required">*</span><span class="label-name">短信验证</span>
+          </div>
+          <div class="code-cell">
+            <div class="input-cell-value">
+              <input class="input" v-model.trim="value" type="text" placeholder="请输入验证码" />
+            </div>
+            <div class="get-code ml-2">获取验证码</div>
+          </div>
+          <div class="input-error-msg">手机号码不正确，请重新输入!</div>
+        </div>
+        <div class="req-btn-wrap">
+          <van-button class="mb-3" type="primary" round block color="#435EFB" text="注册并下载APP" />
+        </div>
+
+        <div class="tips">
+          通过登录即可完成注册，成为我们的新用户，登录后表示同意双子星云手机服务协议
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
+  auth: false,
   name: 'InvitePassiveUser',
   head: {
     title: '受邀验证',
+  },
+  data() {
+    return {
+      value: ''
+    }
   }
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+.padssive{
+  padding: 80px 16px 16px 16px;
+}
+.bright-wrap{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+  align-content: space-around;
+  
+  .bright-item{
+    width: 155px;
+    height: 82px;
+    background: linear-gradient( 160deg, #62A9FF 0%, #3370FF 100%);
+    border-radius: 8px;
+  }
+}
+
+.input-wrap{
+  background-color: #fff;
+  padding: 16px;
+  border-radius: 8px;
+
+  .input-cell{
+    margin-bottom: 16px;
 
+    .input-cell-label{
+      font-size: 14px;
+      line-height: 20px;
+      margin-bottom: 8px;
+
+      .required{
+        color: #FE5C5B;
+      }
+
+      .label-name{
+        font-weight: 600;
+        color: #242424;
+      }
+    }
+    
+    .input-cell-value{
+      background-color: #F3F3F3;
+      border-radius: 4px;
+      display: flex;
+      height: 48px;
+      padding: 0 12px;
+      align-items: center;
+      flex: 1;
+      position: relative;
+
+     .input{
+      flex: 1;
+        background-color: transparent;
+        border: none;
+        outline: none;
+        font-size: 14px;
+        line-height: 20px;
+        color: #242424;
+     }
+    }
+    .input-error-msg{
+     bottom: 0;
+     left: 0;
+     font-size: 12px;
+     color: #FE5C5B
+    }
+    
+    .code-cell{
+      display: flex;
+      
+      .get-code{
+       font-weight: 400;
+       font-size: 14px;
+       color: #3370FF;
+       display: flex;
+       align-items: center;
+      }
+    }
+  }
+
+  .req-btn-wrap{
+      margin-top: 56px;
+    }
+
+    .tips{
+      font-weight: 400;
+      font-size: 14px;
+      color: #979797;
+      line-height: 20px;
+    }
+}
 </style>