feat: 登录页面的调整以及配置文件调整

src/pages/login/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="login-wrapper" :style="{ backgroundImage: `url(${loginBg})` }">
+  <view class="login-wrapper bg-liner">
     <!-- 返回按钮 -->
     <view class="back-btn" @click="goBack">
       <uni-icons fontFamily="znicons" size="24" color="#333">
@@ -10,11 +10,27 @@
     <!-- 头部内容 -->
     <view class="login-header">
       <!-- 卡通形象 -->
-      <image class="login-avatar" :src="logo" mode="widthFix"></image>
-      <image class="login-title" :src="subLogo" mode="widthFix"></image>
+      <image class="w-full h-full" :src="logo" mode="widthFix" />
+    </view>
 
-      <!-- 描述 -->
-      <view class="login-desc">{{ loginDesc }}</view>
+    <!-- 协议勾选 -->
+    <view class="login-agreement flex flex-items-center">
+      <CheckBox v-model="isAgree">
+        <text class="font-size-12 color-525866">我已阅读并同意</text>
+        <text
+          class="font-size-12 color-2D91FF ml-4 mr-4"
+          @click.stop="handleAgreeClick('service')"
+          >《服务协议》</text
+        >
+        <text class="font-size-12 color-525866">和</text>
+        <text
+          class="font-size-12 color-2D91FF ml-4 mr-4"
+          @click.stop="handleAgreeClick('privacy')"
+          >《隐私协议》</text
+        >
+        <text class="font-size-12 color-525866">，\n</text>
+        <text class="font-size-12 color-525866 ml-30">授权与账号关联操作</text>
+      </CheckBox>
     </view>
 
     <!-- 按钮区域 -->
@@ -27,6 +43,7 @@
         type="primary"
         @click="handleAgreeAndGetPhone"
       >
+        <uni-icons type="weixin" size="20" color="#fff"></uni-icons>
         微信一键登录
       </button>
 
@@ -37,6 +54,7 @@
         open-type="getPhoneNumber"
         @getphonenumber="getPhoneNumber"
       >
+        <uni-icons type="weixin" size="20" color="#fff"></uni-icons>
         微信一键登录
       </button>
 
@@ -46,28 +64,11 @@
         type="primary"
         @click="handleLogin"
       >
+        <uni-icons type="weixin" size="20" color="#fff"></uni-icons>
         微信一键登录
       </button>
     </view>
 
-    <!-- 协议勾选 -->
-    <view class="login-agreement">
-      <CheckBox v-model="isAgree">
-        <text class="login-agreement-text">阅读并同意</text>
-        <text
-          class="login-agreement-link"
-          @click.stop="handleAgreeClick('service')"
-          >《服务协议》</text
-        >
-        <text class="login-agreement-text">和</text>
-        <text
-          class="login-agreement-link"
-          @click.stop="handleAgreeClick('privacy')"
-          >《隐私协议》</text
-        >
-      </CheckBox>
-    </view>
-
     <AgreePopup
       ref="agreePopup"
       :visible="visible"
@@ -84,7 +85,6 @@ import {
   getPrivacyAgreement,
 } from "@/request/api/LoginApi";
 import { onLogin, goBack } from "@/hooks/useGoLogin";
-import loginBg from "./images/bg.png";
 import CheckBox from "@/components/CheckBox/index.vue";
 import AgreePopup from "./components/AgreePopup/index.vue";
 import { zniconsMap } from "@/static/fonts/znicons.js";
@@ -99,8 +99,6 @@ const privacyAgreement = ref("");
 // 协议类型
 const AgreeType = ref("service");
 const logo = computed(() => getCurrentConfig().logo);
-const subLogo = computed(() => getCurrentConfig().subLogo);
-const loginDesc = computed(() => getCurrentConfig().loginDesc);
 
 // 同意隐私协议并获取手机号
 const handleAgreeAndGetPhone = () => {

src/pages/login/styles/index.scss

@@ -4,11 +4,8 @@
   align-items: center;
   box-sizing: border-box;
   height: 100vh;
-  padding-top: 168px;
+  padding-top: 100px;
   position: relative;
-  background-position: 0 0;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
 
   .back-btn {
     position: absolute;
@@ -23,52 +20,24 @@
   }
 
   .login-header {
-    text-align: center;
-    max-height: 223px;
-
-    .login-avatar {
-      width: 150px;
-      display: block;
-    }
-
-    .login-title {
-      width: 137px;
-      height: 32px;
-      margin: 6px auto;
-    }
-
-    .login-desc {
-      font-size: $uni-font-size-sm;
-      color: #1e4c69;
-      line-height: 24px;
-    }
+    margin-top: 40px;
+    width: 200px;
+    height: 200px;
   }
 
   .login-btn-area {
-    margin-top: 46px;
-    width: 297px;
+    margin-top: 20px;
+    width: 304px;
 
     .login-btn {
-      background: linear-gradient(246deg, #22a7ff 0%, #2567ff 100%);
+      background: #2d91ff;
       width: 100%;
-      border-radius: $uni-border-radius-50px;
+      border-radius: 10px;
     }
   }
 
   .login-agreement {
-    margin-top: 20px;
-    display: flex;
-    align-items: center;
-
-    .login-agreement-text {
-      font-size: $uni-font-size-base;
-      color: #666;
-    }
-
-    .login-agreement-link {
-      font-size: $uni-font-size-base;
-      color: #007aff;
-      margin: 0 5px;
-    }
+    margin-top: 80px;
+    width: 304px;
   }
 }