hookehuyr

style(recall): 调整页面间距和按钮样式

优化多个页面的间距布局,统一提交按钮的样式
......@@ -4,7 +4,7 @@
<StarryBackground :bg-image="bgImg" />
<!-- Main Content Card -->
<div class="w-full px-6 mt-20 z-10">
<div class="w-full px-6 mt-10 z-10">
<FrostedGlass class="p-6 !rounded-2xl !border-white/20 !shadow-none" :bg-opacity="10" blur-level="md">
<!-- Illustration -->
<div class="flex justify-center mb-2">
......@@ -112,6 +112,16 @@ const handleConfirm = () => {
</script>
<style lang="less" scoped>
.submit-btn {
background: linear-gradient(180deg, rgba(249, 243, 157, 0.19) 0%, rgba(219, 243, 48, 0.3) 100%) !important;
backdrop-filter: blur(4px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
&:active {
transform: scale(0.99);
}
}
.custom-input {
::v-deep(.van-field__control) {
color: #fff;
......
......@@ -6,9 +6,9 @@
<!-- Title Section -->
<div class="mt-10 flex flex-col items-center z-10 w-full px-8">
<img :src="titleImg" class="w-full max-w-[300px] mb-8 object-contain" alt="title" />
<img :src="titleImg" class="w-full max-w-[300px] mb-4 object-contain" alt="title" />
<div class="text-white text-center space-y-3 tracking-wider text-shadow-md">
<div class="text-white text-center space-y-1 tracking-wider text-shadow-md">
<p class="text-sm">请验证身份</p>
<p class="text-sm">开启专属您的「时光机」</p>
<p class="text-sm">见证每一段成长故事</p>
......@@ -16,7 +16,7 @@
</div>
<!-- Login Form Module -->
<div class="w-full px-6 mt-12 z-10">
<div class="w-full px-6 mt-6 z-10">
<!-- Using existing FrostedGlass component for semi-transparent effect -->
<FrostedGlass class="p-6 !rounded-2xl !border-white/20 !shadow-none" :bg-opacity="10" blur-level="md">
<h2 class="text-white text-center text-xl font-bold mb-8 tracking-widest drop-shadow-md">手机号验证</h2>
......
......@@ -73,7 +73,7 @@
都是这片星球上不灭的星光。
</p>
<van-button block
class="!rounded-lg !bg-transparent !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px] !max-w-xs"
class="submit-btn !rounded-lg !bg-transparent !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px] !max-w-xs"
@click="handleViewHistory">
我的星光
</van-button>
......@@ -166,6 +166,16 @@ const handleViewHistory = () => {
// Custom animations if needed, or use Tailwind utility classes
}
.submit-btn {
background: linear-gradient(180deg, rgba(249, 243, 157, 0.19) 0%, rgba(219, 243, 48, 0.3) 100%) !important;
backdrop-filter: blur(4px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
&:active {
transform: scale(0.99);
}
}
// Simple fade/zoom animations
@keyframes fadeInDown {
from {
......