page { background-color: #ffffff; padding: 0; padding-bottom: 120rpx; } .empty { font-size: 28rpx; color: #999999; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 400rpx; } .empty image { width: 340rpx; height: 240rpx; } .emptyBtn { width: 400rpx; height: 80rpx; background-color: #ea030d; color: white; align-items: center; margin-top: 400rpx; } .emptyBtn2 { width: 400rpx; height: 80rpx; background-color: white; color: #333; align-items: center; margin-top: 50rpx; border: 1rpx solid #333; } swiper { height: 100%; } image { width: 100%; height: 100%; } .container { display: flex; flex-direction: column; min-height: calc(100vh - 120rpx); width: 100%; position: relative; /* 去掉渐变续色,页面纯白底 */ } .searchBox { /* 吸顶固定:滚动时房产栏始终可见,未绑定/已绑定两态一致 */ position: sticky; top: 0; z-index: 100; display: flex; align-items: center; /* 不要红头,保持页面白底 */ background: #ffffff; } .back-btn { display: flex; align-items: center; padding-left: 20rpx; padding-right: 4rpx; } .searchBox_add { margin-left: 38rpx; } .emptyCommunity { font-size: 28rpx; color: #222222; width: auto; height: 44rpx; padding: 5rpx 15rpx; background: #f4f5f7; border-radius: 100rpx 100rpx 100rpx 100rpx; display: flex; align-items: center; justify-content: center; } .MyCommunity { display: flex; align-items: center; justify-content: space-between; white-space: nowrap; font-size: 28rpx; color: #222222; padding: 2rpx 14rpx; background: rgba(255, 255, 255, 0.8); border-radius: 100rpx 100rpx 100rpx 100rpx; } .MyCommunity image { width: 28rpx; height: 28rpx; } .MyCommunity span { margin: 0 10rpx; } .swiperBox1 { /* 与首页轮播一致:300rpx 高(绑定/未绑定统一) */ height: 300rpx; width: 710rpx; /* 与首页 banner 一致:内缩圆角卡片,两侧留白让 .container 续色透出 */ margin: 20rpx auto 0; border-radius: 20rpx; overflow: hidden; position: relative; } .swiperBox_no1 { height: 300rpx; width: 710rpx; position: relative; /* 头区已改普通流,去掉原为绝对定位 searchBox 预留的 170rpx 顶部空隙 */ margin: 20rpx auto 0; /* 与绑定态一致:圆角由容器统一裁切 */ border-radius: 20rpx; overflow: hidden; } .swiperBox_no_img{ /* 铺满容器,保证与绑定态同尺寸展示(圆角由容器裁切) */ width: 100%; height: 100%; } .swiperBox1 swiper { height: 100%; } /* B方案:去掉 banner 底部的半透明→白 遮罩(会截断红色续色、造成不连续) */ .swiperBox1::after { content: none; } .dot { position: absolute; /* 指示点放右下角(与首页轮播一致) */ right: 24rpx; bottom: 20rpx; display: flex; align-items: center; justify-content: center; } .dotItem { width: 11rpx; height: 11rpx; background: rgba(255, 55, 11, 0.8); border-radius: 100rpx 100rpx 100rpx 100rpx; margin: 0 5rpx; } .swiperBox2_img { /* 铺满 300rpx 容器(圆角由容器裁切) */ width: 100%; height: 100%; } .active { width: 26rpx; } .swiperBox2 { /* 与首页轮播一致:300rpx 高(绑定/未绑定统一),圆角与顶部轮播同款 */ height: 300rpx; width: 710rpx; /* 与金刚区互换后位于其下方,去掉原上叠 banner 的 -96rpx,改正常上间距 */ margin: 30rpx auto 0; border-radius: 20rpx; overflow: hidden; } .swiperBox2 swiper { height: 100%; } .swiperBox_no2 { height: 300rpx; width: 710rpx; margin: 30rpx auto 0; border-radius: 20rpx; overflow: hidden; } .swiperBox_no2 swiper { height: 100%; } .funcList { display: flex; align-items: center; flex-wrap: wrap; margin-top: 37rpx; } .funcItem { width: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 28rpx; color: #222222; } .funcItem image { width: 100rpx; height: 100rpx; margin-bottom: 16rpx; } .ads { width: 710rpx; height: 200rpx; margin: 0 auto; margin-top: 40rpx; } .ads_first { margin-top: 0; } .tabs { margin-top: 32rpx; display: flex; align-items: center; /* 去掉灰色背景条,与页面白底一致 */ background: #ffffff; height: 100rpx; padding: 0 20rpx; box-sizing: border-box; overflow-x: auto; white-space: nowrap; } .tabItem { font-size: 30rpx; color: #222222; margin-right: 60rpx; white-space: nowrap; } .active2 { font-size: 30rpx; font-weight: 700; color: #ff3929; position: relative; } /* 选中标记:红色短横杠(替换原弧形图片) */ .active2::after { content: ''; background: #ff3929; width: 44rpx; height: 6rpx; border-radius: 3rpx; position: absolute; left: 50%; bottom: -14rpx; transform: translateX(-50%); } .newsList { /* 公告块白卡样式(对齐设计稿):白底圆角卡包裹列表,绑定/未绑定一致 */ margin: 20rpx 20rpx 30rpx; padding: 6rpx 24rpx; background: #ffffff; border: 1rpx solid #f0f0f2; border-radius: 20rpx; box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04); } .newsItem { display: flex; align-items: center; justify-content: space-between; padding: 30rpx 0; margin: 0 20rpx; box-sizing: border-box; border-bottom: 1rpx solid #EBEBEB; } .newsItem:last-child { border-bottom: none; } .newsItem_left { flex: 1; } .newsItem_left_tit { font-size: 32rpx; color: #222222; margin-bottom: 10rpx; } .newsItem_left_sub { font-size: 26rpx; color: #999999; } .newsItem_right { width: 180rpx; height: 160rpx; border-radius: 20rpx; overflow: hidden; } /* 宣传栏:图左 + 右侧标题与内容预览(外层已是白卡,条目不再额外留边) */ .newsItemL { display: flex; align-items: center; padding: 30rpx 0; margin: 0; box-sizing: border-box; border-bottom: 1rpx solid #EBEBEB; } .newsItemL:last-child { border-bottom: none; } .newsItemL_pic { width: 220rpx; height: 160rpx; border-radius: 16rpx; overflow: hidden; flex-shrink: 0; margin-right: 24rpx; } .newsItemL_body { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; } .newsItemL_tit { font-size: 32rpx; font-weight: 600; color: #222222; margin-bottom: 14rpx; } .newsItemL_desc { font-size: 26rpx; color: #999999; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* 资讯条目底部:阅读数(左)+ 更新时间(右) */ .newsItemL_meta { display: flex; align-items: center; justify-content: space-between; margin-top: 14rpx; } .newsItemL_reads { display: flex; align-items: center; font-size: 22rpx; color: #9a9fa8; } .newsItemL_reads text { margin-left: 6rpx; } .newsItemL_time { font-size: 22rpx; color: #9a9fa8; } .tips { font-size: 26rpx; color: #999999; text-align: center; background-color: #f6f6fa; /* padding: 40rpx; */ } .bigAds { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.16); /* 弹屏广告全屏遮罩:高于吸顶房产栏(100),保证遮罩完整覆盖 */ z-index: 1000; display: flex; align-items: center; justify-content: center; } .bigAdsCon { display: flex; flex-direction: column; align-items: center; justify-content: center; } .bigAdsCon .bigAdsCon_img { width: 660rpx; height: 700rpx; } .bigAdsCon .close { width: 50rpx; height: 50rpx; margin-top: 53rpx; } .bigAdsCon2 { width: 600rpx; height: 480rpx; background: #FFFFFF; border-radius: 20rpx 20rpx 20rpx 20rpx; box-sizing: border-box; padding: 23rpx 20rpx 0; } .bigAdsCon2_img { width: 560rpx; height: 308rpx; } .AdsBtnList { margin-top: 35rpx; display: flex; align-items: center; justify-content: space-between; padding: 0 25rpx; box-sizing: border-box; } .AdsBtnItem1 { width: 230rpx; height: 70rpx; background: #D9D9D9; border-radius: 100rpx 100rpx 100rpx 100rpx; display: flex; align-items: center; justify-content: center; font-size: 36rpx; color: #222222; } .AdsBtnItem2 { width: 230rpx; height: 70rpx; background: #FF370B; border-radius: 100rpx 100rpx 100rpx 100rpx; display: flex; align-items: center; justify-content: center; font-size: 36rpx; color: #FFFFFF; } .grid_Pic { width: 100rpx; height: 100rpx; margin-bottom: 16rpx; } .grid_Text { font-size: 24rpx; }