From 8f7a416ea2adf763e2b633e1d12fd860f20f19a1 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Mon, 2 Dec 2024 00:58:53 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E9=A1=B5=E3=80=81=E9=A6=96=E9=A1=B5=E5=92=8C=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/index.vue | 16 ++++---
 src/pages/login/index.vue | 95 +++++++++++++++------------------------
 src/pages/mine/index.vue  |  6 +--
 unocss.config.ts          |  4 ++
 4 files changed, 53 insertions(+), 68 deletions(-)

diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index f3ee4aa..1185728 100644
--- a/src/pages/index/index.vue
+++ b/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"
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index f9325a8..0143b16 100644
--- a/src/pages/login/index.vue
+++ b/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>
diff --git a/src/pages/mine/index.vue b/src/pages/mine/index.vue
index cdbaee4..3820d86 100644
--- a/src/pages/mine/index.vue
+++ b/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;
     }
   }
diff --git a/unocss.config.ts b/unocss.config.ts
index 2194b7b..1a9b5fc 100644
--- a/unocss.config.ts
+++ b/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",
     },
   ],