GVSDS/GVSite
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(首页): 手机端显示补偿标语与底部统计翻牌

Browse Source 
- 「结果不佳? 我们补偿！」去掉 hidden md:block

- .hero-stats 原先 767px 以下 display:none !important，改为竖向堆叠显示（两组并排放不下）

- 移动端统计标题字号 24px 降为 18px，翻牌区高度改自适应
This commit is contained in:
TermiNexus committed 2026-09-29 15:10:25 +08:00
1 parent a615368418
commit ec092d648e
2 files changed
+12 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/assets/gvsds-page.css
+8 -2
View File
@@ -570,10 +570,16 @@ html[data-theme-mode=dark] .M-FlipCard .digital:before {
}
}
/* ── Mobile: 底部统计翻牌区 移动端隐藏（原逻辑保留） ── */
/* ── Mobile: 底部统计翻牌区 改竖向排列 ──
原先这里整块 display:none，手机上看不到两组数字。
两组并排放不下（每组 8 张 48px 卡片，卡片盒宽 405px，两组合计 810px 远超手机可用宽度），
故 767px 以下堆叠成上下两行；transform: scale 不改变布局宽度，靠 origin-left 收在左侧即可 */
@media (max-width: 767px) {
.hero-stats {
display: none !important;
flex-direction: column;
align-items: flex-start;
gap: 24px;
height: auto;
}
}
src/views/HomeView.vue
+4 -4
View File
@@ -16,7 +16,7 @@
<span>你好 2026！</span>
</div>
<div class="block text-[22px] sm:text-[26px] md:text-[34px] text-[#FFF] mt-3">银河锋锐 —— 全站式部署项目</div>
<div class="hidden md:block text-[17px] md:text-[20px] text-[#FFF] mt-5 font-medium">结果不佳? 我们补偿！</div>
<div class="block text-[17px] md:text-[20px] text-[#FFF] mt-5 font-medium">结果不佳? 我们补偿！</div>
<div class="inline-flex items-center gap-3 mt-4 pl-1.5 pr-4 py-1.5 rounded-xl bg-black border border-white/15">
<span class="grid place-items-center w-9 h-9 rounded-lg bg-sky-400/20 text-sky-200 flex-shrink-0">
<svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
@@ -50,15 +50,15 @@
</div>
</div>
<!-- 底部统计翻牌（鼠标悬停某一组：老虎机式乱翻，最后逐个落回正常值） -->
<div class="hero-stats 2xl:h-[198px] h-[100px] sm:h-[120px] pr-[16px] sm:pr-[30px] 2xl:pr-[174px] xl:pr-[100px] flex justify-between 2xl:justify-start md:justify-start md:gap-[80px] lg:gap-[160px] 2xl:gap-[267px] items-start hidden md:flex">
<div class="hero-stats 2xl:h-[198px] md:h-[120px] pr-[16px] sm:pr-[30px] 2xl:pr-[174px] xl:pr-[100px] flex flex-col md:flex-row justify-between md:justify-start gap-6 md:gap-[80px] lg:gap-[160px] 2xl:gap-[267px] items-start">
<div>
<div class="font-['DIN_Condensed'] font-bold leading-none tracking-normal uppercase mb-[8px] md:mb-[4px] 2xl:mb-[12px] text-[24px] sm:text-[23px] md:text-[24px] text-[#FFF] opacity-80 [text-shadow:0_2px_8px_rgba(0,0,0,0.6)]">Total Code Size (characters)</div>
<div class="font-['DIN_Condensed'] font-bold leading-none tracking-normal uppercase mb-[8px] md:mb-[4px] 2xl:mb-[12px] text-[18px] sm:text-[23px] md:text-[24px] text-[#FFF] opacity-80 [text-shadow:0_2px_8px_rgba(0,0,0,0.6)]">Total Code Size (characters)</div>
<div class="flex gap-[3px] sm:gap-1 scale-[0.65] sm:scale-[0.8] 2xl:scale-[1] origin-left" data-flip-group="code" @mouseenter="spinGroup('code')">
<div v-for="(d, i) in codeDigits" :key="'c' + d.idx" class="M-FlipCard down flip-win bg-bg-primary"><div class="digital front" :class="'number' + codeFront[i]"></div><div class="digital back" :class="'number' + codeBack[i]"></div></div>
</div>
</div>
<div>
<div class="font-['DIN_Condensed'] font-bold leading-none tracking-normal uppercase mb-[8px] md:mb-[4px] 2xl:mb-[12px] text-[24px] sm:text-[23px] md:text-[24px] text-[#FFF] opacity-80 [text-shadow:0_2px_8px_rgba(0,0,0,0.6)]">Maximum Insurance Amount (CNY)</div>
<div class="font-['DIN_Condensed'] font-bold leading-none tracking-normal uppercase mb-[8px] md:mb-[4px] 2xl:mb-[12px] text-[18px] sm:text-[23px] md:text-[24px] text-[#FFF] opacity-80 [text-shadow:0_2px_8px_rgba(0,0,0,0.6)]">Maximum Insurance Amount (CNY)</div>
<div class="flex gap-[3px] sm:gap-1 scale-[0.65] sm:scale-[0.8] 2xl:scale-[1] origin-left" data-flip-group="insurance" @mouseenter="spinGroup('insurance')">
<div v-for="(d, i) in insuranceDigits" :key="'i' + d.idx" class="M-FlipCard down flip-win bg-bg-primary"><div class="digital front" :class="'number' + insuranceFront[i]"></div><div class="digital back" :class="'number' + insuranceBack[i]"></div></div>
</div>