| | |
| | | <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; } |
| | | /* 顶图本身也裁切底角;较大的弧线在白色面板覆盖下沿 24rpx 后仍清晰可见。 */ |
| | | .hero { height: 468rpx; background-color: #FFFFFF; position: relative; overflow: hidden; border-bottom-left-radius: 96rpx; border-bottom-right-radius: 96rpx; } |
| | | .hero-image { position: absolute; left: 0; top: 0; width: 100%; height: 468rpx; border-bottom-left-radius: 96rpx; border-bottom-right-radius: 96rpx; } |
| | | .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; } |
| | |
| | | .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: 34rpx; 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。 |
| | | * 标题和城市卡片共用一个圆角面板,上移 24rpx 浅嵌入顶部图的底部圆角区。 |
| | | * 白色面板上沿两侧露出顶部图片;视频按钮底部留出 24rpx 重叠区和 10rpx 间距。 |
| | | * 面板用浅橙色实线描边,让白底上的圆角轮廓清晰可见,不依赖模糊阴影。 |
| | | * 保留 overflow: visible,让吉祥物和卡片底部自然露出,不能裁切整个面板。 |
| | | */ |
| | | .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; } |
| | | .city-panel { box-sizing: border-box; margin: -24rpx 16rpx 38rpx; padding: 22rpx 0 0; overflow: visible; background-color: #FFFFFF; border-width: 2rpx; border-style: solid; border-color: #FFC39D; border-top-left-radius: 64rpx; border-top-right-radius: 64rpx; border-bottom-left-radius: 26rpx; border-bottom-right-radius: 26rpx; position: relative; z-index: 2; } |
| | | /* 面板内缩 16rpx + 标题边距 22rpx,维持标题和下方卡片的左侧对齐。 */ |
| | | .city-heading { height: 58rpx; margin: 0 22rpx; position: relative; flex-direction: row; justify-content: space-between; align-items: center; } |
| | | /* |
| | | * 站立吉祥物:贴在面板右上角,跨在白色面板上沿之上(身体压在城市主图上),和原型一致。 |
| | | * 原型量出来可见轮廓是 58×100rpx(右边缘正好贴面板右边缘、顶端高出面板上沿约 57rpx); |
| | |
| | | /* |
| | | * 趴着的吉祥物:在「才聚东区,共富未来」和「幸福东区」之间,草坪底边压在橙色城市区上沿。 |
| | | * 原型量出来是 51×28px(素材无透明留白、比例 1.815 与原型一致)→ 128×70rpx; |
| | | * 右边缘距面板右边缘 64px→160rpx;顶端距面板上沿 21px→52rpx(它现在挂在 .city-panel 上, |
| | | * 所以 right/top 直接按面板算:right 160rpx、top 52rpx 减去画布上留白对应的 12rpx → 40rpx)。 |
| | | * 面板右侧内缩 16rpx 后,right 使用 144rpx,保持距页面右侧 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-mascot { position: absolute; right: 144rpx; 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; } |
| | | /* |
| | | * 「幸福东区」按钮:原型里按钮右边缘距面板右边缘 18px(面板 287px)→ 45rpx; |
| | | * .city-heading 自身左右各留 38rpx,所以这里 margin-right 取 7rpx(38+7=45rpx),和原型一致。 |
| | | * 「幸福东区」按钮保持距页面右侧 45rpx:面板 16rpx + 标题 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%); } |
| | | .city-grid { box-sizing: border-box; height: 292rpx; margin: 18rpx 0 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); } |