Explorar o código

feat(login): 添加登录页logo和提示信息

- 引入静态资源基础路径环境变量
- 在登录页顶部添加logo图片展示
- 调整表单区域顶部间距以适配新布局
- 登录按钮下方添加账号使用提示文字
- 优化登录页布局提升用户体验
zhangtao hai 9 horas
pai
achega
0f2631dddb
Modificáronse 1 ficheiros con 11 adicións e 2 borrados
  1. 11 2
      src/pages/login/index.vue

+ 11 - 2
src/pages/login/index.vue

@@ -10,7 +10,7 @@ definePage({
     navigationStyle: 'custom',
   },
 })
-
+const StaticUrl = import.meta.env.VITE_STATIC_BASE_URL
 // 表单数据
 const phone = ref('')
 const code = ref('')
@@ -84,8 +84,14 @@ async function handleLogin() {
 
 <template>
   <view class="login-page min-h-100vh px48rpx">
+    <view class="w-full flex items-center justify-center pt40rpx">
+      <image
+        :src="`${StaticUrl}/smqjh-logo.png`"
+        class="h120rpx w120rpx"
+      />
+    </view>
     <!-- 表单区域 -->
-    <view class="pt292rpx">
+    <view class="pt242rpx">
       <!-- 手机号 -->
       <view class="mb48rpx">
         <view class="mb24rpx text-32rpx text-#333 font-medium">
@@ -131,6 +137,9 @@ async function handleLogin() {
       <wd-button block size="large" @click="handleLogin">
         登录
       </wd-button>
+      <view class="mt20rpx text-center text-#999">
+        请使用市民请集合小程序账号进行登录
+      </view>
     </view>
   </view>
 </template>