uniapp-ZHSQ/pages/index2/index2.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，各 40rpx，无组件内建空间） */
.grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 40rpx 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;
}