383 lines
5.8 KiB
CSS
383 lines
5.8 KiB
CSS
/* ============ 新首页 index2 样式 ============ */
|
||
page {
|
||
background: #f5f6f8;
|
||
}
|
||
|
||
.home2 {
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* ===== 顶部红色头区（吸顶固定：滚动/切 tab 时搜索栏与分类条保持不变） ===== */
|
||
.hd {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
/* 不要红头，保持页面底色 */
|
||
background: #f5f6f8;
|
||
padding: 0 24rpx 20rpx;
|
||
}
|
||
|
||
.hd-loc {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 64rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.hd-loc-icon {
|
||
width: 30rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
.hd-loc-txt {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
max-width: 420rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.hd-loc-arrow {
|
||
font-size: 24rpx;
|
||
margin-left: 6rpx;
|
||
}
|
||
|
||
/* 搜索框 */
|
||
.hd-search {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 72rpx;
|
||
background: #fff;
|
||
border: 2rpx solid #ef111b;
|
||
border-radius: 40rpx;
|
||
padding: 0 8rpx 0 24rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.hd-search-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 12rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.hd-search-input {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.hd-search-input::-webkit-input-placeholder {
|
||
color: #b0b3b8;
|
||
}
|
||
|
||
.hd-search-btn {
|
||
flex-shrink: 0;
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
padding: 0 28rpx;
|
||
/* 与源码搜索按钮一致：纯红 #ff2b2f */
|
||
background: #ff2b2f;
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
border-radius: 32rpx;
|
||
}
|
||
|
||
/* 分类条：移到瀑布上方并吸顶（top 由内联样式给页头高度）；仅瀑布在其下滚动 */
|
||
.hd-cate {
|
||
position: sticky;
|
||
z-index: 50;
|
||
white-space: nowrap;
|
||
/* 抵消 .bd 的 20rpx 左右内边距，吸顶时整宽铺满、盖住下方瀑布 */
|
||
margin: 0 -20rpx;
|
||
padding: 16rpx 20rpx;
|
||
background: #f5f6f8;
|
||
}
|
||
|
||
.hd-cate-item {
|
||
display: inline-block;
|
||
color: #666;
|
||
font-size: 28rpx;
|
||
padding: 6rpx 4rpx;
|
||
margin-right: 34rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.hd-cate-item.on {
|
||
color: #ff4848;
|
||
font-weight: 700;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.hd-cate-item.on::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -4rpx;
|
||
transform: translateX(-50%);
|
||
width: 36rpx;
|
||
height: 6rpx;
|
||
border-radius: 3rpx;
|
||
background: #ff4848;
|
||
}
|
||
|
||
/* ===== 主体 ===== */
|
||
.bd {
|
||
position: relative;
|
||
margin-top: -8rpx;
|
||
background: #f5f6f8;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
padding: 20rpx 20rpx 180rpx;
|
||
}
|
||
|
||
/* 轮播 */
|
||
.banner {
|
||
position: relative;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.banner-swiper {
|
||
width: 100%;
|
||
height: 300rpx;
|
||
}
|
||
|
||
.banner-img {
|
||
width: 100%;
|
||
height: 300rpx;
|
||
display: block;
|
||
}
|
||
|
||
.banner-dots {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
bottom: 16rpx;
|
||
display: flex;
|
||
}
|
||
|
||
.banner-dots .dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.banner-dots .dot.on {
|
||
width: 24rpx;
|
||
border-radius: 6rpx;
|
||
background: #fff;
|
||
}
|
||
|
||
/* 金刚区（自绘 flex，上下留白 = .grid 的 margin，各 24rpx，无组件内建空间） */
|
||
.grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0;
|
||
margin: 24rpx 0;
|
||
}
|
||
|
||
.grid-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.grid-icon {
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
border-radius: 24rpx;
|
||
display: block;
|
||
}
|
||
|
||
.grid-txt {
|
||
display: block;
|
||
margin-top: 8rpx;
|
||
font-size: 24rpx;
|
||
line-height: 1;
|
||
color: #333;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 广告栏 */
|
||
.ads {
|
||
display: flex;
|
||
/* 与金刚区间距由 .grid 的 padding-bottom 5px 控制 */
|
||
margin-top: 0;
|
||
/* 按原主页广告位尺寸放大：整体约 450rpx 高 */
|
||
height: 450rpx;
|
||
}
|
||
|
||
.ads-left {
|
||
width: 50%;
|
||
margin-right: 16rpx;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.ads-left image {
|
||
width: 100%;
|
||
height: 450rpx;
|
||
display: block;
|
||
}
|
||
|
||
.ads-right {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.ads-right-item {
|
||
height: 217rpx;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.ads-right-item image {
|
||
width: 100%;
|
||
height: 217rpx;
|
||
display: block;
|
||
}
|
||
|
||
/* 空广告位占位（招商中） */
|
||
.ad-ph {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 217rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #fff3ee, #ffe9e0);
|
||
color: #ff9a76;
|
||
font-size: 24rpx;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.ads-left .ad-ph {
|
||
height: 450rpx;
|
||
}
|
||
|
||
/* 好店标题 */
|
||
.wf-title {
|
||
display: flex;
|
||
align-items: center;
|
||
/* 内容已注释为空，去掉多余留白 */
|
||
margin: 0;
|
||
}
|
||
|
||
.wf-title-main {
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
color: #222;
|
||
}
|
||
|
||
.wf-title-loc {
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.wf-title-tag {
|
||
margin-left: 16rpx;
|
||
font-size: 22rpx;
|
||
color: #ff7a45;
|
||
background: #fff0e8;
|
||
border-radius: 20rpx;
|
||
padding: 4rpx 16rpx;
|
||
}
|
||
|
||
/* 瀑布 */
|
||
.wf {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.wf-col {
|
||
width: 345rpx;
|
||
}
|
||
|
||
.wf-col:first-child {
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.wf-card {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.wf-img {
|
||
width: 345rpx;
|
||
display: block;
|
||
background: #eee;
|
||
}
|
||
|
||
.wf-meta {
|
||
padding: 16rpx;
|
||
}
|
||
|
||
.wf-name {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #222;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.wf-sub {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.wf-stars {
|
||
display: flex;
|
||
}
|
||
|
||
.wf-stars image {
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
margin-right: 2rpx;
|
||
}
|
||
|
||
.wf-dist {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.wf-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.wf-tag {
|
||
font-size: 20rpx;
|
||
color: #ff6a3d;
|
||
border: 1rpx solid #ffcbb3;
|
||
background: #fff5f0;
|
||
border-radius: 8rpx;
|
||
padding: 2rpx 10rpx;
|
||
margin-right: 8rpx;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.wf-addr {
|
||
margin-top: 8rpx;
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.wf-more {
|
||
text-align: center;
|
||
color: #999;
|
||
font-size: 24rpx;
|
||
padding: 24rpx 0 40rpx;
|
||
}
|