format

pages/auth/auth.vue

@@ -2,21 +2,10 @@
     <view class="content">
         <!-- tool -->
         <view class="tool-flex">
-            <view
+            <view class="tool-flex-item" @click="$Router.back()">
-                class="tool-flex-item"
+                <uni-icons type="closeempty" size="22" color="#666"></uni-icons>
-                @click="$Router.back()"
-            >
-                <uni-icons
-                    type="closeempty"
-                    size="22"
-                    color="#666"
-                ></uni-icons>
             </view>
-            <view
+            <view class="tool-flex-item" @click="onKeyAuth()" v-if="$Route.query.keyPhone == 1">一键登录</view>
-                class="tool-flex-item"
-                @click="onKeyAuth()"
-                v-if="$Route.query.keyPhone == 1"
-            >一键登录</view>
         </view>
         <!-- 欢迎使用 -->
         <view class="header">
@@ -26,34 +15,14 @@
         <!-- 输入手机号相关 -->
         <view class="inputs phone">
             <label class="label">+86</label>
-            <input
+            <input type="number" placeholder="输入您的手机号码" maxlength="11" v-model="phone" />
-                type="number"
-                placeholder="输入您的手机号码"
-                maxlength="11"
-                v-model="phone"
-            />
         </view>
         <view class="inputs sms">
-            <input
+            <input type="number" placeholder="输入短信验证码" maxlength="4" v-model="code" />
-                type="number"
+            <button class="sms-btn" type="default" size="mini" :disabled="phone == '' || getSms"
-                placeholder="输入短信验证码"
+                @click="getPhoneCode">{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
-                maxlength="4"
-                v-model="code"
-            />
-            <button
-                class="sms-btn"
-                type="default"
-                size="mini"
-                :disabled="phone == '' || getSms"
-                @click="getPhoneCode"
-            >{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
         </view>
-        <button
+        <button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button>
-            class="btn"
-            type="default"
-            :disabled="phone == '' || code == ''"
-            @click="login"
-        >登录</button>
         <!-- 用户登录注册协议 -->
         <view class="agreement">
             未注册的手机号码验证后自动创建账号，登录即表示同意接受平台
@@ -65,9 +34,12 @@
 </template>
 
 <script>
-import { getSms, smsAuth } from "@/apis/interfaces/auth";
+    import {
-import userAuth from "@/public/userAuth";
+        getSms,
-export default {
+        smsAuth
+    } from "@/apis/interfaces/auth";
+    import userAuth from "@/public/userAuth";
+    export default {
         data() {
             return {
                 phone: "",
@@ -130,17 +102,18 @@ export default {
                 Auth.Login();
             },
         },
-};
+    };
 </script>
 
 <style lang="scss" scoped>
-.content {
+    .content {
         height: 100vh;
         width: 100vw;
         padding: $padding * 3;
         box-sizing: border-box;
         background: white;
         @extend .vertical;
+
         // 操作栏
         .tool-flex {
             position: fixed;
@@ -153,12 +126,14 @@ export default {
             padding-right: $padding * 2;
             background: white;
             @extend .ios-top;
+
             &-item {
                 line-height: 90rpx;
                 color: $text-gray;
                 font-size: $title-size-lg;
             }
         }
+
         // 表单
         .inputs {
             background: $window-color;
@@ -167,6 +142,7 @@ export default {
             height: 90rpx;
             line-height: 90rpx;
             border-radius: 45rpx;
+
             input {
                 width: 100%;
                 height: 90rpx;
@@ -179,6 +155,7 @@ export default {
 
             &.phone {
                 padding-left: 120rpx;
+
                 .label {
                     position: absolute;
                     left: 0;
@@ -192,6 +169,7 @@ export default {
 
             &.sms {
                 padding-right: 200rpx;
+
                 .sms-btn[size='mini'] {
                     width: 200rpx;
                     height: 90rpx;
@@ -205,9 +183,11 @@ export default {
                     color: $main-color;
                     font-size: $title-size-lg;
                     background: $window-color;
+
                     &::after {
                         border: none;
                     }
+
                     &[disabled] {
                         color: rgba($color: $main-color, $alpha: .6);
                         background: rgba($color: $window-color, $alpha: 0);
@@ -215,22 +195,26 @@ export default {
                 }
             }
         }
+
         // 头部
-		.header{
+        .header {
             text-align: center;
             margin-bottom: 5vh;
+
             .title {
                 font-size: $title-size + 10;
                 font-weight: bold;
                 color: $text-color;
                 line-height: 70rpx;
             }
-			.sumbit{
+
+            .sumbit {
                 line-height: 50rpx;
                 font-size: $title-size-m;
                 color: $text-gray-m;
             }
         }
+
         // 登录按钮
         .btn {
             margin: 0;
@@ -243,18 +227,22 @@ export default {
             background: $main-color;
             color: white;
             font-weight: bold;
-			&::after{
+
+            &::after {
                 display: none;
             }
-			&[disabled]{
+
+            &[disabled] {
                 background: rgba($color: $main-color, $alpha: .5);
             }
         }
+
         // 协议
         .agreement {
             padding-top: 5vh;
             font-size: $title-size-sm;
             color: $text-gray-m;
+
             view {
                 color: $main-color;
                 display: inline-block;