Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
ab85032e 1 parent e323d2aa

style(PointsPage): 优化页面布局和z-index层级 

调整页面容器高度和溢出设置，修复头部气泡和内容区域的层级问题
修改中间瓶子的上边距，简化内容区域的flex布局
Inline Side-by-side
Showing 1 changed file with 6 additions and 6 deletions
1 <template> 1 <template>
2 - <div class="points-page h-screen bg-cover bg-center bg-no-repeat relative overflow-hidden flex flex-col"> 2 + <div class="points-page min-h-screen bg-cover bg-center bg-no-repeat relative overflow-x-hidden flex flex-col">
3 <!-- Starry Background Effect --> 3 <!-- Starry Background Effect -->
4 <StarryBackground /> 4 <StarryBackground />
5 5
6 <!-- 头部积分球区域 --> 6 <!-- 头部积分球区域 -->
7 - <div class="header-bubbles relative h-48 w-full pt-6 flex-shrink-0"> 7 + <div class="header-bubbles relative h-48 w-full pt-6 flex-shrink-0 z-10">
8 <!-- 球体 1 --> 8 <!-- 球体 1 -->
9 <div class="bubble absolute left-10 top-12 animate-float-slow"> 9 <div class="bubble absolute left-10 top-12 animate-float-slow">
10 <div class="bubble-bg w-12 h-12 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }"> 10 <div class="bubble-bg w-12 h-12 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
...@@ -71,12 +71,12 @@ ...@@ -71,12 +71,12 @@
71 </div> 71 </div>
72 72
73 <!-- 中间瓶子 --> 73 <!-- 中间瓶子 -->
74 - <div class="bottle-section flex justify-center -mt-20 relative z-10 flex-shrink-0" style="margin-top: -8rem;"> 74 + <div class="bottle-section flex justify-center -mt-20 relative z-10 flex-shrink-0" style="margin-top: -5rem;">
75 <img :src="pzImg" class="w-48 h-auto object-contain drop-shadow-[0_0_15px_rgba(255,255,255,0.3)]" alt="bottle" /> 75 <img :src="pzImg" class="w-48 h-auto object-contain drop-shadow-[0_0_15px_rgba(255,255,255,0.3)]" alt="bottle" />
76 </div> 76 </div>
77 77
78 <!-- 内容区域 --> 78 <!-- 内容区域 -->
79 - <div class="flex flex-col justify-between px-4 pb-24 overflow-hidden"> 79 + <div class="flex flex-col px-4 pb-24 z-10">
80 <!-- 积分卡片 --> 80 <!-- 积分卡片 -->
81 <div class="mb-2 bg-white/10 backdrop-blur-md rounded-2xl p-4 text-center border border-white/20 shadow-lg flex-shrink-0"> 81 <div class="mb-2 bg-white/10 backdrop-blur-md rounded-2xl p-4 text-center border border-white/20 shadow-lg flex-shrink-0">
82 <p class="text-white text-sm mb-1 opacity-90">您成功收集到</p> 82 <p class="text-white text-sm mb-1 opacity-90">您成功收集到</p>
...@@ -88,10 +88,10 @@ ...@@ -88,10 +88,10 @@
88 </div> 88 </div>
89 89
90 <!-- 如何收获星球币卡片 --> 90 <!-- 如何收获星球币卡片 -->
91 - <div class="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/20 shadow-lg flex flex-col justify-center flex-1 min-h-0"> 91 + <div class="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/20 shadow-lg flex flex-col justify-center mt-3">
92 <h3 class="text-white text-[22px] font-bold mb-4 text-center shadow-text">如何收获星球币?</h3> 92 <h3 class="text-white text-[22px] font-bold mb-4 text-center shadow-text">如何收获星球币?</h3>
93 93
94 - <div class="space-y-4 flex-1 flex flex-col justify-center"> 94 + <div class="space-y-4 flex flex-col justify-center">
95 <div v-for="(item, index) in harvestMethods" :key="index" class="flex items-center space-x-3 pl-4"> 95 <div v-for="(item, index) in harvestMethods" :key="index" class="flex items-center space-x-3 pl-4">
96 <img :src="item.icon" class="w-4 h-4 object-contain" :alt="item.text" /> 96 <img :src="item.icon" class="w-4 h-4 object-contain" :alt="item.text" />
97 <span class="text-white text-[15px] font-medium tracking-wide">{{ item.text }}</span> 97 <span class="text-white text-[15px] font-medium tracking-wide">{{ item.text }}</span>
......