fucai
/
fucai-claim
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update card style

This commit is contained in:
weichengwu 2025-11-22 10:47:03 +08:00
parent 2bcf352c3e
commit 1ec48ed040
1 changed files with 117 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/home/index.vue
View File

@ -17,7 +17,12 @@
<!-- 表单区域 --> <!-- 表单区域 -->
<div class="p-4 -mt-10 z-10 relative"> <div class="p-4 -mt-10 z-10 relative">
<div class="mx-auto bg-white rounded-xl shadow-sm p-6"> <div
class="relative overflow-hidden rounded-2xl border border-[#FFD7DF] bg-gradient-to-br from-[#FFF7F9] via-white to-[#FFE4EA] shadow-[0_12px_32px_rgba(232,66,77,0.08)] p-6 sm:p-7 backdrop-blur-sm">
<div class="absolute -right-10 -top-16 h-40 w-40 rounded-full bg-[#FFE3EA] blur-3xl opacity-70"></div>
<div class="absolute -left-14 -bottom-16 h-40 w-40 rounded-full bg-[#FFD6E2] blur-3xl opacity-60"></div>
<div class="relative z-10">
<!-- 标题 --> <!-- 标题 -->
<div class="flex items-center justify-center text-xl text-[#E8424D] mb-6"> <div class="flex items-center justify-center text-xl text-[#E8424D] mb-6">
<img src="/爱心点缀1.png" alt="" class="h-5"> <img src="/爱心点缀1.png" alt="" class="h-5">
@ -29,7 +34,7 @@
<div v-if="![2, 3].includes(activityInfo.status)"> <div v-if="![2, 3].includes(activityInfo.status)">
<!-- 手机号输入 --> <!-- 手机号输入 -->
<div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4"> <div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4 bg-white/85 shadow-[0_6px_14px_rgba(232,66,77,0.06)]">
<input :disabled="formData.verifyCode" v-model="formData.phone" type="tel" placeholder="请输入手机号码" <input :disabled="formData.verifyCode" v-model="formData.phone" type="tel" placeholder="请输入手机号码"
maxlength="11" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-14 w-full" /> maxlength="11" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-14 w-full" />
@ -41,7 +46,7 @@
</div> </div>
<!-- 验证码输入 --> <!-- 验证码输入 -->
<div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4"> <div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4 bg-white/85 shadow-[0_6px_14px_rgba(232,66,77,0.06)]">
<input :disabled="formData.verifyCode" v-model="formData.smsCode" type="text" placeholder="请输入验证码" <input :disabled="formData.verifyCode" v-model="formData.smsCode" type="text" placeholder="请输入验证码"
maxlength="6" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-14 w-full" /> maxlength="6" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-14 w-full" />
<button v-if="!formData.verifyCode" @click="verifyCode" :disabled="formData.smsCode.length !== 6" <button v-if="!formData.verifyCode" @click="verifyCode" :disabled="formData.smsCode.length !== 6"
@ -59,13 +64,13 @@
<div v-if="formData.marriageNo" class="text-xs" @click="resetMarriageInfo">重新扫描</div> <div v-if="formData.marriageNo" class="text-xs" @click="resetMarriageInfo">重新扫描</div>
</div> </div>
<div v-if="!formData.marriageNo" <div v-if="!formData.marriageNo"
class="border border-dashed border-gray-200 rounded-lg p-5 flex items-center justify-center"> class="border border-dashed border-gray-200 rounded-lg p-5 flex items-center justify-center bg-white/80">
<div class="relative inline-block" @click="handleScanClick"> <div class="relative inline-block" @click="handleScanClick">
<img src="/扫描.png" alt="" class="h-20"> <img src="/扫描.png" alt="" class="h-20">
</div> </div>
</div> </div>
<div v-if="formData.marriageNo" <div v-if="formData.marriageNo"
class="w-full flex flex-col items-start border border-gray-200 rounded-lg p-5 bg-[#FAFAFA]"> class="w-full flex flex-col items-start border border-gray-200 rounded-lg p-5 bg-white/85 shadow-[0_6px_14px_rgba(232,66,77,0.06)]">
<div> <div>
<span class="inline-block w-25 text-right">结婚证字号：</span> <span class="inline-block w-25 text-right">结婚证字号：</span>
<span class="pl-2">{{ formData.marriageNo }}</span> <span class="pl-2">{{ formData.marriageNo }}</span>
@ -121,7 +126,7 @@
<div class="mt-4 text-xs text-gray-500">活动时间：--</div> <div class="mt-4 text-xs text-gray-500">活动时间：--</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
@ -147,7 +152,7 @@
</div> </div>
<div class="relative px-5 pb-5"> <div class="relative px-5 pb-5">
<div class="bg-white/92 backdrop-blur-sm rounded-xl p-4 shadow-[0_10px_24px_rgba(232,66,77,0.08)]"> <div class="bg-white/90 backdrop-blur-sm rounded-xl p-4 shadow-[0_10px_24px_rgba(232,66,77,0.08)]">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-start gap-3"> <div class="flex items-start gap-3">
<div class="h-9 w-9 shrink-0 rounded-full bg-gradient-to-br from-[#E8424D] to-[#FF7A7A] text-white flex items-center justify-center font-bold shadow-md"> <div class="h-9 w-9 shrink-0 rounded-full bg-gradient-to-br from-[#E8424D] to-[#FF7A7A] text-white flex items-center justify-center font-bold shadow-md">