ht80/sheji(1)/pages/xinindex/xinindex.wxss

/* 基础样式设置 */
page {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  position: relative;
  height: 100%;
  background-color: #fff5f5; /* 红色基调背景增强 */
}

.page-container {
  position: relative;
  min-height: 100vh;
  padding-bottom: 300rpx;
  overflow-x: hidden;
}

/* 搜索框样式 - 位置上移，为核心区域腾出空间 */
.sousuo {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10rpx);
  border: 2rpx solid #FFCDD2;
  display: flex;
  height: 80rpx;
  margin: 20rpx 30rpx 10rpx; /* 减少底部距离 */
  border-radius: 40rpx;
  align-items: center;
  padding: 0 20rpx;
  position: relative;
  z-index: 2;
  box-shadow: 0 4rpx 12rpx rgba(211, 47, 47, 0.15);
}

/* 红途定制核心区域 - 居中放大突出 */
.red-custom-core {
  /* 居中放大布局 */
  width: calc(100% - 60rpx); /* 几乎全屏宽度 */
  margin: 20rpx auto 40rpx; /* 居中显示，增加底部距离 */
  padding: 40rpx 30rpx; /* 增加内边距 */
  background: linear-gradient(135deg, #fff5f5 0%, #ffebee 100%);
  border-radius: 24rpx; /* 更大圆角 */
  box-shadow: 0 10rpx 30rpx rgba(211, 47, 47, 0.15); /* 强化阴影 */
  position: relative;
  overflow: hidden;
  z-index: 3; /* 提高层级 */
}

/* 装饰元素增强 */
.red-custom-core::before {
  content: '';
  position: absolute;
  top: -50rpx;
  right: -50rpx;
  width: 250rpx;
  height: 250rpx;
  background: url('/images/star-pattern.png') no-repeat;
  background-size: contain;
  opacity: 0.15;
  z-index: 1;
}

.red-custom-core::after {
  content: '';
  position: absolute;
  bottom: -30rpx;
  left: -30rpx;
  width: 200rpx;
  height: 200rpx;
  background: url('/images/red-pattern.png') no-repeat;
  background-size: contain;
  opacity: 0.1;
  z-index: 1;
}

/* 核心区域标题强化 */
.custom-header {
  display: flex;
  align-items: center;
  margin-bottom: 35rpx; /* 增加间距 */
  position: relative;
  z-index: 2;
}

.custom-icon {
  width: 100rpx; /* 放大图标 */
  height: 100rpx;
  margin-right: 25rpx;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20rpx;
  padding: 15rpx;
  box-shadow: 0 4rpx 10rpx rgba(211, 47, 47, 0.2);
}

.custom-title {
  font-size: 44rpx; /* 放大标题 */
  font-weight: bold;
  color: #D32F2F;
  line-height: 1.3;
}

.custom-subtitle {
  font-size: 28rpx;
  color: #792828;
  margin-top: 8rpx;
  opacity: 0.9;
}

/* 定制选项卡增强 */
.custom-tabs {
  display: flex;
  margin-bottom: 35rpx; /* 增加间距 */
  border-radius: 18rpx;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8rpx);
}

.custom-tab {
  flex: 1;
  padding: 20rpx 0; /* 增加高度 */
  font-size: 30rpx; /* 放大文字 */
  font-weight: 500;
}

.custom-tab.active {
  background-color: #D32F2F;
  color: white;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15) inset;
}

/* 定制选项内容区 */
.custom-options {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-bottom: 35rpx;
  z-index: 2;
  position: relative;
}

.custom-option-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1rpx solid #FFCDD2;
  border-radius: 15rpx;
  padding: 12rpx 20rpx;
  font-size: 26rpx;
  color: #666;
}

.custom-option-item.active {
  background-color: #D32F2F;
  color: white;
  border-color: #D32F2F;
}

/* 主按钮强化 */
.quick-custom-btn {
  background-color: #D32F2F;
  color: white;
  border-radius: 35rpx; /* 更大圆角 */
  padding: 22rpx 0; /* 增加高度 */
  font-size: 32rpx; /* 放大文字 */
  font-weight: bold;
  text-align: center;
  margin-top: 10rpx;
  box-shadow: 0 6rpx 20rpx rgba(211, 47, 47, 0.3);
  transition: all 0.3s;
  position: relative;
  z-index: 2;
}

.quick-custom-btn::after {
  content: '→';
  margin-left: 10rpx;
  font-size: 28rpx;
  animation: arrowMove 1.5s infinite;
}

@keyframes arrowMove {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5rpx); }
}

.quick-custom-btn:active {
  background-color: #b71c1c;
  transform: scale(0.98);
  box-shadow: 0 4rpx 15rpx rgba(211, 47, 47, 0.25);
}

/* 菜单容器下移 */
.menu {
  margin: 10rpx 30rpx 30rpx; /* 减少顶部距离 */
}

/* 菜单项调整 - 红途定制相关突出 */
.item {
  width: 170rpx;
  height: 170rpx;
  margin-bottom: 20rpx;
}

/* 红途定制菜单项特殊样式 */
.item.red-custom {
  /* 显著放大 */
  width: 185rpx;
  height: 185rpx;
  background: linear-gradient(135deg, #fff0f0 0%, #ffebee 100%);
  border: 2rpx solid #FFCDD2;
  box-shadow: 0 6rpx 20rpx rgba(211, 47, 47, 0.15);
  transform: translateY(-5rpx); /* 轻微上浮 */
}

.item.red-custom::before {
  content: "热门";
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  background-color: #ff4d4f;
  color: white;
  font-size: 20rpx;
  padding: 3rpx 10rpx;
  border-radius: 10rpx;
  z-index: 2;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
}

.item.red-custom .img {
  background: rgba(211, 47, 47, 0.2);
  transform: scale(1.1);
}

.item.red-custom .title {
  color: #D32F2F;
  font-weight: bold;
  font-size: 28rpx;
}

/* 其他区域样式弱化处理 */
.background-overlay {
  opacity: 0.8; /* 降低背景强度 */
}

/* 故事会区域下移并弱化 */
.story-container {
  margin: 20rpx 30rpx 0;
  opacity: 0.95;
}

.section-title {
  font-size: 34rpx;
  margin: 15rpx 0 25rpx 20rpx;
}

/* VR容器弱化 */
.vr-container {
  margin: 20rpx 0;
  opacity: 0.95;
}

/* 动态特征区域下移 */
.dynamic-features {
  margin: 20rpx 30rpx 30rpx;
}

/* 悬浮按钮关联红途定制 */
.float-container {
  position: fixed;
  right: 30rpx;
  bottom: 120rpx;
}

.float-btn.custom-btn {
  width: 120rpx;
  height: 120rpx;
  background-color: #D32F2F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 20rpx rgba(211, 47, 47, 0.4);
  animation: pulse 2s infinite;
}

.float-btn.custom-btn .icon {
  color: white;
  font-size: 60rpx;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.4); }
  70% { box-shadow: 0 0 0 20rpx rgba(211, 47, 47, 0); }
  100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); }
}

/* 其他原有样式保持不变 */
.hero-gradient {
  background: linear-gradient(
    to bottom, 
    transparent 0%,
    rgba(255,255,255,0.3) 30%,
    rgba(255,255,255,0.7) 70%,
    #FFFFFF 100%
  );
}

.story-scroll {
  width: 100%;
  white-space: nowrap;
}

.story-list {
  display: inline-flex;
}

.story-card {
  display: inline-flex;
  width: 400rpx;
  height: 300rpx;
  margin-right: 24rpx;
  position: relative;
  overflow: hidden;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
  transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.vr-scroll {
  width: 100%;
  white-space: nowrap;
  margin-top: 20rpx;
}

.vr-list {
  display: inline-flex;
}

.vr-card {
  display: inline-block;
  width: 280rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
  background: #fff;
}

.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}