refactor: ♻️ 登录页、首页和个人中心页面样式优化

src/pages/index/index.vue

@@ -27,15 +27,19 @@
 
     <!-- 通知公告 -->
     <wd-notice-bar
-      custom-style="margin-top:10rpx"
-      text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息"
-      prefix="check-outline"
+      text="vue-uniapp-template 是一个基于 Vue3 + UniApp 的前端模板项目，提供了一套完整的前端解决方案，包括登录、权限、字典、接口请求、状态管理、页面布局、组件封装等功能。"
       color="#34D19D"
-      background-color="#f0f9eb"
-    />
+      type="info"
+    >
+      <template #prefix>
+        <wd-tag color="#FAA21E" bg-color="#FAA21E" plain custom-style="margin-right:10rpx">
+          通知公告
+        </wd-tag>
+      </template>
+    </wd-notice-bar>
 
     <!-- 数据统计 -->
-    <wd-grid :column="2" custom-style="margin-top:10rpx" :gutter="2">
+    <wd-grid :column="2" :gutter="2">
       <wd-grid-item
         v-for="(item, index) in visitStatsData"
         :key="index"

src/pages/login/index.vue

@@ -1,7 +1,11 @@
 <template>
-  <view class="login">
-    <image class="logo" src="@/static/logo.png" style="width: 100px; height: 100px" />
-    <view class="mt-10 flex-center">
+  <view class="login-container">
+    <view class="login-header">
+      <image src="/static/images/youlaiorg.png" class="w160rpx h160rpx" />
+      <view class="text-small-light">有来开源，致力于快速构建和高效开发的应用解决方案。</view>
+    </view>
+
+    <view class="login-form">
       <wd-form ref="loginFormRef" :model="loginFormData">
         <wd-cell-group border>
           <wd-input
@@ -24,23 +28,23 @@
             :rules="[{ required: true, message: '请填写密码' }]"
           />
         </wd-cell-group>
-        <view class="footer">
-          <wd-button size="large" type="primary" block @click="handleLogin">提交</wd-button>
+        <view class="mt-80rpx">
+          <wd-button size="large" type="primary" block @click="handleLogin">登录</wd-button>
         </view>
       </wd-form>
-      <div class="flex justify-center mt-[100rpx]">
-        <div class="flex flex-col items-center" @click="handleWechatLogin">
-          <img src="/static/icons/icon_wx.png" class="w-[100rpx] h-[100rpx]" />
-          <span class="mt-2">微信登录</span>
-        </div>
-      </div>
     </view>
-    <view class="agreement-text">
-      <view class="agreement-links">
-        <text class="normal-text">登录即同意</text>
-        <text class="link" @click="navigateToUserAgreement">《用户协议》</text>
-        <text class="normal-text">和</text>
-        <text class="link" @click="navigateToPrivacy">《隐私政策》</text>
+
+    <view class="login-footer">
+      <view class="text-center">
+        <wd-divider>
+          <img src="/static/icons/icon_wx.png" class="w-[100rpx] h-[100rpx]" />
+        </wd-divider>
+      </view>
+      <view class="text-center mt-20rpx">
+        <text class="text-medium-light">登录即同意</text>
+        <text @click="navigateToUserAgreement">《用户协议》</text>
+        <text class="text-medium-light">和</text>
+        <text @click="navigateToPrivacy">《隐私政策》</text>
       </view>
     </view>
   </view>
@@ -130,52 +134,25 @@ const handleWechatLogin = async () => {
 </script>
 
 <style lang="scss" scoped>
-.login {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: calc(100vh - 50px);
-  .agreement-text {
-    position: fixed;
-    right: 0;
-    bottom: 30px;
-    left: 0;
+.login-container {
+  height: calc(100vh - 165rpx);
+  background: #fff;
+  .login-header {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 0 20px;
+    justify-content: center;
+    padding: 80rpx 0;
+  }
+  .login-form {
+    width: 80%;
+    margin: 80rpx auto;
+  }
 
-    .agreement-links {
-      margin-bottom: 8px;
-      font-size: 14px;
-      line-height: 1.5;
-
-      .normal-text {
-        color: #666;
-      }
-
-      .link {
-        padding: 0 2px;
-        color: #2979ff;
-
-        &:active {
-          opacity: 0.8;
-        }
-      }
-    }
-
-    .copyright {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      .copyright-text {
-        font-size: 12px;
-        line-height: 1.5;
-        color: #999;
-      }
-    }
+  .login-footer {
+    position: absolute;
+    bottom: 40rpx;
+    width: 100%;
   }
 }
 </style>

src/pages/mine/index.vue

@@ -19,7 +19,7 @@
           <!-- 未登录 -->
           <view v-else @click="navigateToLoginPage">
             <view class="login-tip">您还未登录，请先登录</view>
-            <view class="w180rpx mt-2">
+            <view class="w120rpx mt-2">
               <button class="login-btn" @click="navigateToLoginPage">登录</button>
             </view>
           </view>
@@ -112,9 +112,9 @@ const handleItemclick = (item: any) => {
       color: #fff;
     }
     .login-btn {
-      line-height: 60rpx;
+      font-size: 28rpx;
+      line-height: 50rpx;
       color: #4d80f0;
-      background-color: #fff;
       border-radius: 10rpx;
     }
   }

unocss.config.ts

@@ -17,6 +17,10 @@ export default {
       "flex-end": "flex justify-end items-center",
       "flex-col-center": "flex flex-col justify-center items-center",
       "flex-between": "flex justify-between items-center",
+      "fixed-bottom": "fixed bottom-0 left-0 right-0",
+      "absolute-center": "absolute inset-0 flex justify-center items-center",
+      "text-small-light": "text-xs font-light text-gray-500",
+      "text-medium-light": "text-sm font-light text-gray-500",
     },
   ],