From 5ce0d76154bf4c1d70543476cdfad9a30195b0f8 Mon Sep 17 00:00:00 2001
From: shinnosuke <tantao@1hoper.com>
Date: 星期六, 10 十月 2026 16:44:38 +0800
Subject: [PATCH] fix(miniapp): 调整首页圆角布局并隐藏滚动条
---
rencaika/pages/index/index.uvue | 81 +++++++++++++++++++---------------------
1 files changed, 38 insertions(+), 43 deletions(-)
diff --git a/rencaika/pages/index/index.uvue b/rencaika/pages/index/index.uvue
index 0190815..d600f7b 100644
--- a/rencaika/pages/index/index.uvue
+++ b/rencaika/pages/index/index.uvue
@@ -1,22 +1,27 @@
<template>
<view class="page">
- <scroll-view class="scroll-page" scroll-y @scroll="handleScroll">
- <view class="hero">
- <image class="hero-image" :src="homeImage('home-top.png')" mode="aspectFill"></image>
- <view class="hero-gradient"></view>
- <view v-if="homeVideoUrl != ''" class="play-button" @tap="playVideo"><text>向东看</text></view>
- </view>
-
- <view class="city-panel">
- <image class="city-stand" src="/static/home-assets/mascot-stand.png" mode="aspectFit"></image>
- <view class="city-heading"><text>才聚东区，共富未来</text><view class="city-label" @tap="openIntro"><text>幸福东区</text><image src="/static/home-assets/arrow-right.svg"></image></view></view>
- <view class="city-grid">
- <view class="city-card city-intro" @tap="openIntro"><image class="city-bg" :src="homeImage('city-intro.jpg')" mode="aspectFill"></image><text class="intro-name">东区简介</text><view class="intro-button"><text>查看更多</text><image src="/static/home-assets/arrow-right.svg"></image></view></view>
- <view class="city-side"><view class="city-card city-potential"><image class="city-bg" :src="homeImage('city-potential.jpg')" mode="aspectFill"></image><text>潜力城</text></view><view class="city-card city-golden"><image class="city-bg" :src="homeImage('city-golden.jpg')" mode="aspectFill"></image><text>黄金城</text></view></view>
- <view class="city-side"><view class="city-card city-industry"><image class="city-bg" :src="homeImage('city-industry.jpg')" mode="aspectFill"></image><text>兴业城</text></view><view class="city-card city-livable"><image class="city-bg" :src="homeImage('city-livable.png')" mode="aspectFill"></image><text>宜居城</text></view></view>
+ <scroll-view :show-scrollbar="false" class="scroll-page" scroll-y @scroll="handleScroll">
+ <view class="home-overview">
+ <view class="hero">
+ <view class="hero-surface">
+ <image class="hero-image" :src="homeImage('home-top.png')" mode="aspectFit"></image>
+ <view class="hero-gradient"></view>
+ <view class="play-button" @tap="playVideo"><text>向东看</text></view>
+ </view>
</view>
- <!-- 放在 .city-grid 之后：DOM 顺序保证它画在橙色城市区之上，不依赖 z-index 是否被小程序忽略。 -->
- <image class="city-mascot" src="/static/home-assets/mascot-rest.png" mode="aspectFit"></image>
+
+ <view class="city-panel">
+ <view class="city-panel-content">
+ <view class="city-heading"><text>才聚东区，共富未来</text><view class="city-label" @tap="openIntro"><text>幸福东区</text><image src="/static/home-assets/arrow-right.svg"></image></view></view>
+ <view class="city-grid">
+ <view class="city-card city-intro" @tap="openIntro"><image class="city-bg" :src="homeImage('city-intro.jpg')" mode="aspectFill"></image><text class="intro-name">东区简介</text><view class="intro-button"><text>查看更多</text><image src="/static/home-assets/arrow-right.svg"></image></view></view>
+ <view class="city-side"><view class="city-card city-potential"><image class="city-bg" :src="homeImage('city-potential.jpg')" mode="aspectFill"></image><text>潜力城</text></view><view class="city-card city-golden"><image class="city-bg" :src="homeImage('city-golden.jpg')" mode="aspectFill"></image><text>黄金城</text></view></view>
+ <view class="city-side"><view class="city-card city-industry"><image class="city-bg" :src="homeImage('city-industry.jpg')" mode="aspectFill"></image><text>兴业城</text></view><view class="city-card city-livable"><image class="city-bg" :src="homeImage('city-livable.png')" mode="aspectFill"></image><text>宜居城</text></view></view>
+ </view>
+ </view>
+ <image class="city-mascot" src="/static/home-assets/mascot-rest.png" mode="aspectFit"></image>
+ </view>
+ <image class="city-stand" src="/static/home-assets/mascot-stand.png" mode="aspectFit"></image>
</view>
<view class="section-head"><view class="section-title"><image class="section-icon" src="/static/home-assets/mascot-leap.png" mode="aspectFit"></image><text>人才资讯</text></view><text class="more" @tap="goNews">查看更多</text></view>
@@ -165,8 +170,10 @@
<style>
.page { height: 100%; background-color: #FFFFFF; }
.scroll-page { height: calc(100% - 126rpx); height: calc(100% - 126rpx - env(safe-area-inset-bottom)); background-color: #FFFFFF; }
- .hero { height: 468rpx; background-color: #FFFFFF; position: relative; overflow: hidden; border-bottom-left-radius: 48rpx; border-bottom-right-radius: 48rpx; }
- .hero-image { position: absolute; left: 0; top: 0; width: 100%; height: 468rpx; }
+ .home-overview { position: relative; overflow: visible; flex-shrink: 0; }
+ .hero { height: 462rpx; min-height: 462rpx; flex-shrink: 0; position: relative; z-index: 1; overflow: visible; }
+ .hero-surface { position: relative; width: 100%; height: 462rpx; flex-shrink: 0; overflow: hidden; border-bottom-left-radius: 72rpx; border-bottom-right-radius: 72rpx; }
+ .hero-image { position: absolute; left: 0; top: 0; width: 100%; height: 462rpx; }
.hero-gradient { position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 300rpx; background-image: linear-gradient(180deg, rgba(244,90,42,.88) 0%, rgba(255,130,60,.42) 62%, rgba(255,166,80,0) 100%); }
.safe-space { height: 28px; position: relative; z-index: 2; }
.nav-row { height: 32px; padding: 0 32rpx; position: relative; z-index: 2; flex-direction: row; align-items: center; justify-content: space-between; }
@@ -176,40 +183,28 @@
.nav-title { position: absolute; z-index: 1; left: 30rpx; top: 10rpx; height: 100%; flex-direction: row; align-items: center; justify-content: flex-start; }
.nav-title text { color: #FFFFFF; font-family: 'FoodCalligraphyFull', 'FoodCalligraphy'; font-size: 38rpx; font-weight: 700; opacity: .95; }
.capsule-reserve { width: 88px; height: 100%; flex-shrink: 0; }
- .play-button { position: absolute; z-index: 2; bottom: 20rpx; left: 50%; margin-left: -78rpx; width: 156rpx; height: 56rpx; border-radius: 28rpx; background-image: linear-gradient(180deg, #FFB75A 0%, #FF6A24 100%); border-width: 2rpx; border-color: rgba(255,255,255,.82); box-shadow: 0 7rpx 14rpx rgba(234,92,26,.26); flex-direction: row; justify-content: center; align-items: center; }
+ .play-button { position: absolute; z-index: 2; bottom: 52rpx; left: 50%; margin-left: -78rpx; width: 156rpx; height: 56rpx; border-radius: 28rpx; background-image: linear-gradient(180deg, #FFB75A 0%, #FF6A24 100%); border-width: 2rpx; border-color: rgba(255,255,255,.82); box-shadow: 0 7rpx 14rpx rgba(234,92,26,.26); flex-direction: row; justify-content: center; align-items: center; }
.play-button text { color: #FFFFFF; font-size: 23rpx; }
/*
- * 顶部图下方的衔接：原型里白色区是「通版」（左右不留边、上沿不圆角、没有橙色投影），
- * 主图只把底部两个角做圆角，让白色自然接上来；橙色城市区自己再左右内缩 16rpx。
- * 所以这里把面板改成通版（margin 左右 0、去掉圆角和投影），内缩交给 .city-grid。
+ * 顶图按素材原比例显示透明圆角，城市模块置于前面并上移重叠。
+ * 外层渐变与内层白色卡片相差 2rpx，形成沿圆角延伸的橙色渐变边框。
*/
- .city-panel { margin: 0 0 38rpx; padding: 22rpx 0 0; overflow: visible; background-color: #FFFFFF; position: relative; }
- /* 面板改通版后，标题的绝对位置保持不变：原来 16(面板内缩)+22(自身边距)=38rpx，现在直接给 38rpx。 */
- .city-heading { height: 58rpx; margin: 0 38rpx; position: relative; flex-direction: row; justify-content: space-between; align-items: center; }
- /*
- * 站立吉祥物：贴在面板右上角，跨在白色面板上沿之上（身体压在城市主图上），和原型一致。
- * 原型量出来可见轮廓是 58×100rpx（右边缘正好贴面板右边缘、顶端高出面板上沿约 57rpx）；
- * 素材 PNG 画布 68×198、可见内容只有 68×118（上下各 40px 透明留白），所以盒子要按画布比例放大到
- * 58×168rpx，再把盒子上沿抬到 -91rpx，可见部分才落在原型的位置上。
- */
- .city-stand { position: absolute; right: 0rpx; top: -91rpx; width: 58rpx; height: 168rpx; z-index: 4; }
- /*
- * 趴着的吉祥物：在「才聚东区，共富未来」和「幸福东区」之间，草坪底边压在橙色城市区上沿。
- * 原型量出来是 51×28px（素材无透明留白、比例 1.815 与原型一致）→ 128×70rpx；
- * 右边缘距面板右边缘 64px→160rpx；顶端距面板上沿 21px→52rpx（它现在挂在 .city-panel 上，
- * 所以 right/top 直接按面板算：right 160rpx、top 52rpx 减去画布上留白对应的 12rpx → 40rpx）。
- * 素材底部补了 8px 透明留白，所以盒子高度要按画布比例放大到 75rpx（可见部分仍是 128×70rpx）。
- * top 取 40rpx：草地底边落在橙色城市区上沿之内、但不压到下方卡片（原型里草地底边距卡片上沿还有 4px）。
- */
- .city-mascot { position: absolute; right: 160rpx; top: 40rpx; width: 128rpx; height: 75rpx; z-index: 3; }
+ .city-panel { margin: -32rpx 16rpx 38rpx; padding: 2rpx; border-radius: 40rpx; overflow: visible; position: relative; z-index: 2; background-image: linear-gradient(150deg, #FFDDC9 0%, #FF9C5A 52%, #FFD5B7 100%); }
+ .city-panel-content { padding-top: 22rpx; border-radius: 38rpx; overflow: hidden; position: relative; background-color: #FFFFFF; }
+ .city-heading { height: 58rpx; margin: 0 22rpx; position: relative; flex-direction: row; justify-content: space-between; align-items: center; }
+ /* Keep the mascot above both cards; the image canvas includes transparent padding. */
+ .city-stand { position: absolute; right: 18rpx; top: 341rpx; width: 58rpx; height: 168rpx; z-index: 3; }
+ /* 吉祥物随标题恢复位置，草坪底边保持在橙色城市区上沿。 */
+ .city-mascot { position: absolute; right: 162rpx; top: 42rpx; width: 128rpx; height: 75rpx; z-index: 3; }
.city-heading > text { color: #F16624; font-size: 35rpx; font-weight: 700; letter-spacing: 1rpx; background-image: linear-gradient(180deg, #F45A2A 0%, #FFB257 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
/*
* 「幸福东区」按钮：原型里按钮右边缘距面板右边缘 18px（面板 287px）→ 45rpx；
- * .city-heading 自身左右各留 38rpx，所以这里 margin-right 取 7rpx（38+7=45rpx），和原型一致。
+ * 面板内缩 16rpx、边框 2rpx、标题边距 22rpx，再留 7rpx 对齐右侧按钮。
*/
.city-label { margin-right: 7rpx; padding: 10rpx 13rpx; border-radius: 18rpx; background-image: linear-gradient(180deg, #FFB85E 0%, #FF6726 100%); box-shadow: 0 5rpx 10rpx rgba(239,101,34,.22); flex-direction: row; align-items: center; } .city-label text { color: #FFFFFF; font-size: 20rpx; } .city-label image { width: 20rpx; height: 20rpx; margin-left: 7rpx; }
- .city-grid { box-sizing: border-box; height: 292rpx; margin: 18rpx 16rpx 0; padding: 22rpx; overflow: visible; background-image: linear-gradient(180deg, #FF5F2D 0%, #FFB36B 100%); border-bottom-left-radius: 26rpx; border-bottom-right-radius: 26rpx; flex-direction: row; } .city-card { overflow: hidden; border-radius: 17rpx; position: relative; justify-content: flex-end; background-image: linear-gradient(135deg, #E96C3D 0%, #F8AA56 100%); }
+ /* 308rpx cards plus 22rpx padding on each side fit inside the rounded background. */
+ .city-grid { box-sizing: border-box; height: 352rpx; min-height: 352rpx; margin: 18rpx 0 0; padding: 22rpx; background-image: linear-gradient(180deg, #FF5F2D 0%, #FFB36B 100%); flex-direction: row; } .city-card { overflow: hidden; border-radius: 17rpx; position: relative; justify-content: flex-end; background-image: linear-gradient(135deg, #E96C3D 0%, #F8AA56 100%); }
.city-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.city-intro { width: 242rpx; height: 308rpx; box-sizing: border-box; margin-right: 14rpx; padding: 22rpx; } .intro-name { position: absolute; z-index: 1; top: 50%; left: 0; right: 0; transform: translateY(-50%); color: #FFFFFF; font-size: 37rpx; font-weight: 700; text-align: center; } .intro-button { position: relative; z-index: 1; align-self: center; box-sizing: border-box; width: 146rpx; height: 42rpx; margin-top: 13rpx; padding: 0 12rpx; border-radius: 21rpx; background-image: linear-gradient(90deg, rgba(255,207,138,.92) 0%, rgba(255,101,36,.68) 100%); border-width: 1rpx; border-color: rgba(255,255,255,.42); flex-direction: row; align-items: center; justify-content: space-between; } .intro-button text { color: #FFFFFF; font-size: 19rpx; } .intro-button image { width: 19rpx; height: 19rpx; margin-left: 8rpx; }
.city-side { height: 308rpx; flex: 1; margin-right: 14rpx; justify-content: space-between; } .city-side:last-child { margin-right: 0; } .city-side .city-card { height: 147rpx; padding: 0; } .city-side .city-card > text { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 10rpx 12rpx; color: #FFFFFF; font-size: 22rpx; font-weight: 700; text-shadow: 0 2rpx 8rpx rgba(0,0,0,.5); }
--
Gitblit v1.7.1