fix(home): 恢复城市卡片底部露出并补充横向渐变

shinnosuke

4 天以前 2c01718e732f7c4842bc4711484bbd59345caf49

fix(home): 恢复城市卡片底部露出并补充横向渐变

 rencaika/pages/index/index.uvue

@@ -15,8 +15,8 @@
                        <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 class="city-side"><view class="city-card city-potential"><image class="city-bg" :src="homeImage('city-potential.jpg')" mode="aspectFill"></image><view class="city-card-caption"></view><text>潜力城</text></view><view class="city-card city-golden"><image class="city-bg" :src="homeImage('city-golden.jpg')" mode="aspectFill"></image><view class="city-card-caption"></view><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><view class="city-card-caption"></view><text>兴业城</text></view><view class="city-card city-livable"><image class="city-bg" :src="homeImage('city-livable.png')" mode="aspectFill"></image><view class="city-card-caption"></view><text>宜居城</text></view></view>
                        </view>
                    </view>
                    <image class="city-mascot" src="/static/home-assets/mascot-rest.png" mode="aspectFit"></image>
@@ -190,8 +190,8 @@
     * 顶图按素材原比例显示透明圆角，城市模块置于前面并上移重叠。
     * 外层渐变与内层白色卡片相差 2rpx，形成沿圆角延伸的橙色渐变边框。
     */
    .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-panel { margin: -32rpx 16rpx 60rpx; 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: visible; 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; }
@@ -203,11 +203,11 @@
     * 面板内缩 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; }
    /* 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%); }
    /* Cards extend 22rpx below the background; the panel margin reserves that space. */
    .city-grid { box-sizing: border-box; height: 308rpx; min-height: 308rpx; margin: 18rpx 0 0; padding: 22rpx; overflow: visible; border-bottom-left-radius: 38rpx; border-bottom-right-radius: 38rpx; 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); }
    .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-card-caption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 46rpx; background-image: linear-gradient(90deg, rgba(239,91,117,.9) 0%, rgba(243,102,135,.55) 55%, rgba(243,102,135,0) 100%); } .city-side .city-card > text { position: absolute; z-index: 2; 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-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; }