From 38e39c50dcca12534c4efe2b49355a97c396b507 Mon Sep 17 00:00:00 2001
From: shinnosuke <tantao@1hoper.com>
Date: 星期六, 10 十月 2026 11:44:05 +0800
Subject: [PATCH] 更新....
---
rencaika/pages/index/index.uvue | 41 +++++++++++++++++++++++++++++++++++------
1 files changed, 35 insertions(+), 6 deletions(-)
diff --git a/rencaika/pages/index/index.uvue b/rencaika/pages/index/index.uvue
index d55b75e..0190815 100644
--- a/rencaika/pages/index/index.uvue
+++ b/rencaika/pages/index/index.uvue
@@ -8,15 +8,18 @@
</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>
</view>
+ <!-- 放在 .city-grid 之后：DOM 顺序保证它画在橙色城市区之上，不依赖 z-index 是否被小程序忽略。 -->
+ <image class="city-mascot" src="/static/home-assets/mascot-rest.png" mode="aspectFit"></image>
</view>
- <view class="section-head"><view class="section-title"><text>人才资讯</text></view><text class="more" @tap="goNews">查看更多</text></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>
<view v-if="homeLoading" class="news-state"><text>资讯加载中...</text></view>
<view v-else-if="homeError" class="news-state" @tap="loadHome"><text>{{homeError}}</text><text class="news-retry">点击重试</text></view>
<view v-else>
@@ -176,16 +179,42 @@
.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 text { color: #FFFFFF; font-size: 23rpx; }
- .city-panel { margin: -10rpx 16rpx 38rpx; padding: 22rpx 0 0; overflow: visible; background-color: #FFFFFF; border-radius: 26rpx; position: relative; box-shadow: 0 -8rpx 14rpx rgba(255, 103, 39, .27); }
- .city-heading { height: 58rpx; margin: 0 22rpx; flex-direction: row; justify-content: space-between; align-items: center; }
+ /*
+ * 顶部图下方的衔接：原型里白色区是「通版」（左右不留边、上沿不圆角、没有橙色投影），
+ * 主图只把底部两个角做圆角，让白色自然接上来；橙色城市区自己再左右内缩 16rpx。
+ * 所以这里把面板改成通版（margin 左右 0、去掉圆角和投影），内缩交给 .city-grid。
+ */
+ .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-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; }
- .city-label { margin-right: 48rpx; 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-top: 18rpx; 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%); }
+ /*
+ * 「幸福东区」按钮：原型里按钮右边缘距面板右边缘 18px（面板 287px）→ 45rpx；
+ * .city-heading 自身左右各留 38rpx，所以这里 margin-right 取 7rpx（38+7=45rpx），和原型一致。
+ */
+ .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%); }
.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); }
- .section-head { height: 93rpx; padding: 0 31rpx; flex-direction: row; align-items: center; justify-content: space-between; } .section-title { flex-direction: row; align-items: center; } .section-title text { color: #353535; font-size: 31rpx; font-weight: 700; } .more { color: #5C5C5C; font-size: 22rpx; }
+ .section-head { height: 93rpx; padding: 0 31rpx; flex-direction: row; align-items: center; justify-content: space-between; } .section-title { flex-direction: row; align-items: center; } .section-icon { width: 44rpx; height: 54rpx; margin-right: 10rpx; } .section-title text { color: #353535; font-size: 31rpx; font-weight: 700; } .more { color: #5C5C5C; font-size: 22rpx; }
.news-state { min-height: 150rpx; margin: 0 31rpx; justify-content: center; align-items: center; color: #8B8B8B; font-size: 24rpx; } .news-retry { margin-top: 12rpx; color: #F16624; }
.news-featured { height: 205rpx; margin: 0 19rpx; border-radius: 18rpx; overflow: hidden; position: relative; background-image: linear-gradient(135deg, #F26A38 0%, #F9A551 100%); } .news-featured > image { width: 100%; height: 100%; } .news-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 118rpx; background-color: rgba(0,0,0,.44); } .top-badge { position: absolute; left: 20rpx; top: 18rpx; padding: 7rpx 14rpx; border-radius: 12rpx; background-color: #FFF3D4; } .top-badge text { color: #F2722E; font-size: 20rpx; font-weight: 700; } .featured-copy { position: absolute; left: 20rpx; right: 20rpx; bottom: 17rpx; } .featured-copy text:first-child { display: block; color: #FFFFFF; font-size: 24rpx; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .featured-copy text:last-child { display: block; margin-top: 8rpx; color: #FFFFFF; opacity: .85; font-size: 19rpx; }
.news-list { margin: 0 31rpx; } .news-row { min-height: 116rpx; padding: 22rpx 0 16rpx; border-bottom-width: 1rpx; border-bottom-color: #EEEEEE; } .news-name { color: #363636; font-size: 25rpx; line-height: 36rpx; } .news-meta { margin-top: 12rpx; flex-direction: row; align-items: center; color: #98A2B3; font-size: 19rpx; } .new-badge { margin-right: 14rpx; padding: 4rpx 10rpx; border-radius: 12rpx; background-color: #FFF0D9; color: #FE7930; font-size: 18rpx; }
--
Gitblit v1.7.1