Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b7d01235 1 parent 560184a5

style(recall/login): 移除背景图片并调整登录页面样式 

- 删除静态背景图片，改用StarryBackground组件设置背景
- 调整标题部分的上边距
- 为输入框添加边框样式提升可视性
Inline Side-by-side
Showing 1 changed file with 4 additions and 8 deletions
1 <template> 1 <template>
2 <div class="recall-login w-full min-h-screen relative overflow-hidden flex flex-col items-center"> 2 <div class="recall-login w-full min-h-screen relative overflow-hidden flex flex-col items-center">
3 - <!-- Background Image -->
4 - <img src="@/assets/images/recall/bg01@2x.png" class="absolute inset-0 w-full h-full object-cover -z-10"
5 - alt="background" />
6 -
7 <!-- Starry Background Effect --> 3 <!-- Starry Background Effect -->
8 - <StarryBackground bg-color="transparent" /> 4 + <StarryBackground bg-image="https://cdn.ipadbiz.cn/mlaj/images/test-bgg03.jpg" />
9 5
10 <!-- Title Section --> 6 <!-- Title Section -->
11 - <div class="mt-20 flex flex-col items-center z-10 w-full px-8"> 7 + <div class="mt-10 flex flex-col items-center z-10 w-full px-8">
12 <img src="@/assets/images/recall/title01@2x.png" class="w-full max-w-[300px] mb-8 object-contain" alt="title" /> 8 <img src="@/assets/images/recall/title01@2x.png" class="w-full max-w-[300px] mb-8 object-contain" alt="title" />
13 9
14 <div class="text-white text-center space-y-3 tracking-wider text-shadow-md"> 10 <div class="text-white text-center space-y-3 tracking-wider text-shadow-md">
...@@ -26,13 +22,13 @@ ...@@ -26,13 +22,13 @@
26 22
27 <div class="space-y-5"> 23 <div class="space-y-5">
28 <!-- Phone Input --> 24 <!-- Phone Input -->
29 - <van-field v-model="phone" placeholder="请输入手机号" class="custom-input rounded-lg !bg-white/10 !text-white" 25 + <van-field v-model="phone" placeholder="请输入手机号" class="custom-input rounded-lg !bg-white/10 !text-white !border-[1px] !border-solid !border-[rgba(255,255,255,0.57)]"
30 :border="false" type="tel" maxlength="11" /> 26 :border="false" type="tel" maxlength="11" />
31 27
32 <!-- Verification Code Input --> 28 <!-- Verification Code Input -->
33 <div class="flex gap-3"> 29 <div class="flex gap-3">
34 <van-field v-model="code" placeholder="请输入验证码" 30 <van-field v-model="code" placeholder="请输入验证码"
35 - class="custom-input rounded-lg !bg-white/10 !text-white flex-1" :border="false" type="digit" 31 + class="custom-input rounded-lg !bg-white/10 !text-white flex-1 !border-[1px] !border-solid !border-[rgba(255,255,255,0.57)]" :border="false" type="digit"
36 maxlength="6" /> 32 maxlength="6" />
37 <van-button plain 33 <van-button plain
38 class="verify-btn !bg-transparent !text-white !border-[#FFDD01] !rounded-lg !px-4 !h-[44px] !font-normal" 34 class="verify-btn !bg-transparent !text-white !border-[#FFDD01] !rounded-lg !px-4 !h-[44px] !font-normal"
......