登陆页面优化

src/pages/login/index.vue

@@ -1,6 +1,11 @@
+html
 <template>
   <view class="container">
-    <u-image src="@/static/logo.png" mode="widthFix"></u-image>
+    <u-image
+      src="@/static/logo.png"
+      mode="widthFix"
+      class="logo-image"
+    ></u-image>
     <view class="login-btn-wrap">
       <u-button shape="circle" type="primary" :loading="loading" @tap="login"
         >微信用户一键登录</u-button
@@ -12,10 +17,14 @@
         >手机号登录/注册</u-button
       >
     </view>
-    <view>
-      我已阅读并同意
-      <text>《用户协议》</text>
-      <text>《隐私政策》</text>
+    <br />
+    <view style="font-size: 12px">
+      温馨提示：登录前请详细阅读
+      <text @click="userAgreementClick" style="font-weight: bold"
+        >《用户协议》</text
+      ><text @click="privacyPolicyClick" style="font-weight: bold"
+        >《隐私政策》</text
+      >
     </view>
   </view>
 </template>
@@ -35,7 +44,9 @@ export default {
       },
     };
   },
+
   methods: {
+    //点击微信用户一键登录
     async login() {
       this.loading = true;
       this.form.token = await getWxLoginCode();
@@ -58,16 +69,29 @@ export default {
           uni.$u.toast('登录失败');
         });
     },
+
+    //点击用户协议
+    userAgreementClick() {},
+
+    //点击隐私政策
+    privacyPolicyClick() {},
   },
 };
 </script>
 
 <style scoped>
 .container {
-  padding: 0 20rpx;
-  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
+
 .login-btn-wrap {
   margin-top: 40rpx;
+  width: 80%;
+}
+.logo-image {
+  margin: auto;
 }
 </style>