ruo-shan-cloud-redirect/miniprogram/pages/index/index.scss

/** 淘宝风格商品详情页样式 **/

/* ========== 基础样式 ========== */
page {
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* ========== 全屏遮蔽层 ========== */
.overlay-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-image-wrap {
  position: relative;
  width: 600rpx;
  height: 600rpx;
}

.overlay-image {
  width: 100%;
  height: 100%;
  border-radius: 36rpx;
}

.overlay-blur-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 72rpx;
  border-radius: 36rpx 36rpx 0 0;
  background: linear-gradient(to bottom, rgba(245, 245, 245, 0.6), rgba(245, 245, 245, 0) 100%);
  pointer-events: none;
}

/* ========== 弹窗 ========== */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.25s ease;
}

.popup-box {
  width: 560rpx;
  background-color: #fff;
  border-radius: 24rpx;
  padding: 48rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: popIn 0.35s cubic-bezier(0.21, 1.02, 0.58, 1);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.popup-title {
  font-size: 36rpx;
  color: #000;
  margin-bottom: 36rpx;
}

.popup-desc {
  font-size: 34rpx;
  color: #888;
  margin-bottom: 48rpx;
}

.popup-btns {
  display: flex;
  gap: 24rpx;
  width: 100%;
}

.popup-btn {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 500;
  padding: 22rpx 0;
  border-radius: 18rpx;
}

.popup-btn-close {
  color: #000;
  background-color: #f0f0f0;
}

.popup-btn-allow {
  color: #fff;
  background: linear-gradient(135deg, #07c160, #06ad56);
}

/* ========== Toast提示 ========== */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  background-color: rgba(0, 0, 0, 0.78);
  padding: 24rpx 40rpx;
  border-radius: 12rpx;
  animation: toastIn 0.3s ease;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.toast-text {
  font-size: 28rpx;
  color: #fff;
}

/* ========== 商品主图 ========== */
.product-image-wrap {
  width: 100%;
  height: 750rpx;
  background-color: #fff;
}

.product-image {
  width: 100%;
  height: 100%;
}

/* ========== 页面滚动区域 ========== */
.page-scroll {
  flex: 1;
  overflow-y: auto;
}

/* ========== 价格区域 ========== */
.price-section {
  background-color: #fff;
  padding: 24rpx 24rpx 20rpx;
  border-radius: 0 0 24rpx 24rpx;
}

.price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.price-symbol {
  font-size: 28rpx;
  color: #ff5000;
  font-weight: 700;
}

.price-value {
  font-size: 56rpx;
  color: #ff5000;
  font-weight: 700;
  line-height: 1;
}

.price-decimal {
  font-size: 28rpx;
  color: #ff5000;
  font-weight: 700;
}

.price-original {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
  margin-left: 16rpx;
}

.discount-tag {
  margin-left: 16rpx;
  padding: 4rpx 12rpx;
  font-size: 22rpx;
  color: #fff;
  background: linear-gradient(135deg, #ff5000, #ff6a30);
  border-radius: 6rpx;
}

.promo-row {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
  padding: 12rpx 16rpx;
  background: linear-gradient(90deg, #fff3f0, #fff9f5);
  border-radius: 8rpx;
}

.promo-tag {
  font-size: 22rpx;
  color: #fff;
  background: linear-gradient(135deg, #ff5000, #ff7640);
  padding: 4rpx 10rpx;
  border-radius: 4rpx;
  margin-right: 12rpx;
}

.promo-text {
  font-size: 24rpx;
  color: #ff5000;
}

/* ========== 商品标题 ========== */
.title-section {
  background-color: #fff;
  padding: 20rpx 24rpx 24rpx;
  margin-top: 16rpx;
}

.title-tags {
  display: flex;
  margin-bottom: 12rpx;
}

.tag {
  font-size: 20rpx;
  padding: 4rpx 10rpx;
  border-radius: 4rpx;
  margin-right: 10rpx;
}

.tag-brand {
  color: #ff5000;
  background-color: #fff0ec;
  border: 1rpx solid #ffc4b0;
}

.tag-guarantee {
  color: #07c160;
  background-color: #e8f8ef;
  border: 1rpx solid #a0e8c0;
}

.tag-shipping {
  color: #1677ff;
  background-color: #eaf2ff;
  border: 1rpx solid #a3c9ff;
}

.product-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #222;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ========== 优惠与配送 ========== */
.info-section {
  background-color: #fff;
  margin-top: 16rpx;
  padding: 0 24rpx;
}

.info-item {
  display: flex;
  align-items: flex-start;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 26rpx;
  color: #999;
  width: 80rpx;
  flex-shrink: 0;
}

.info-content {
  flex: 1;
}

.info-text {
  font-size: 26rpx;
  color: #333;
}

.info-arrow {
  font-size: 32rpx;
  color: #ccc;
  flex-shrink: 0;
  margin-left: 12rpx;
}

.coupon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.coupon-tag {
  font-size: 22rpx;
  color: #ff5000;
  background-color: #fff3f0;
  border: 1rpx solid #ffc4b0;
  padding: 6rpx 12rpx;
  border-radius: 6rpx;
  position: relative;
}

.coupon-tag::before,
.coupon-tag::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10rpx;
  height: 10rpx;
  background-color: #f5f5f5;
  border-radius: 50%;
  transform: translateY(-50%);
}

.coupon-tag::before {
  left: -6rpx;
}

.coupon-tag::after {
  right: -6rpx;
}

/* ========== SKU选择区域 ========== */
.sku-section {
  background-color: #fff;
  margin-top: 16rpx;
  padding: 24rpx;
}

.sku-item {
  display: flex;
  align-items: flex-start;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.sku-item:last-child {
  border-bottom: none;
}

.sku-label {
  font-size: 26rpx;
  color: #999;
  width: 120rpx;
  flex-shrink: 0;
  line-height: 48rpx;
}

.sku-options {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.sku-option {
  font-size: 26rpx;
  color: #333;
  background-color: #f5f5f5;
  padding: 12rpx 28rpx;
  border-radius: 8rpx;
  border: 2rpx solid #f5f5f5;
}

.sku-option-selected {
  color: #ff5000;
  background-color: #fff3f0;
  border-color: #ff5000;
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 0;
}

.qty-btn {
  width: 56rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #333;
  background-color: #f5f5f5;
  border: 1rpx solid #e0e0e0;
}

.qty-btn:first-child {
  border-radius: 8rpx 0 0 8rpx;
}

.qty-btn:last-child {
  border-radius: 0 8rpx 8rpx 0;
}

.qty-value {
  width: 80rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #333;
  background-color: #fff;
  border-top: 1rpx solid #e0e0e0;
  border-bottom: 1rpx solid #e0e0e0;
}

/* ========== 店铺信息 ========== */
.shop-section {
  background-color: #fff;
  margin-top: 16rpx;
  padding: 24rpx;
}

.shop-info {
  display: flex;
  align-items: center;
}

.shop-logo {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  border: 1rpx solid #f0f0f0;
  flex-shrink: 0;
}

.shop-detail {
  flex: 1;
  margin-left: 16rpx;
}

.shop-name-row {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.shop-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #222;
  max-width: 300rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-badge {
  font-size: 20rpx;
  color: #ff5000;
  background-color: #fff3f0;
  border: 1rpx solid #ffc4b0;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
  margin-left: 12rpx;
  flex-shrink: 0;
}

.shop-stats {
  display: flex;
  gap: 24rpx;
}

.shop-stat {
  font-size: 22rpx;
  color: #999;
}

.shop-actions {
  display: flex;
  gap: 16rpx;
  margin-top: 20rpx;
}

.shop-btn {
  flex: 1;
  text-align: center;
  font-size: 26rpx;
  padding: 16rpx 0;
  border-radius: 40rpx;
  border: 1rpx solid #e0e0e0;
  color: #333;
  background-color: #fff;
}

.shop-btn-follow {
  color: #ff5000;
  border-color: #ff5000;
  background-color: #fff3f0;
}

.shop-btn-enter {
  color: #333;
  border-color: #e0e0e0;
}

/* ========== 详情 Tab ========== */
.detail-tabs {
  display: flex;
  background-color: #fff;
  margin-top: 16rpx;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1rpx solid #f0f0f0;
}

.detail-tab {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 24rpx 0;
  position: relative;
}

.detail-tab-active {
  color: #ff5000;
  font-weight: 600;
}

.detail-tab-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48rpx;
  height: 4rpx;
  background-color: #ff5000;
  border-radius: 2rpx;
}

/* ========== 商品详情图片 ========== */
.detail-images {
  background-color: #fff;
}

.detail-img {
  display: block;
  width: 100%;
}

/* ========== 底部占位 ========== */
.bottom-placeholder {
  height: 120rpx;
}

/* ========== 底部操作栏 ========== */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 12rpx 24rpx;
  padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid #f0f0f0;
  z-index: 100;
}

.bar-icons {
  display: flex;
  gap: 8rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.bar-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12rpx;
}

.bar-icon-symbol {
  font-size: 40rpx;
  color: #666;
  line-height: 1.2;
}

.bar-icon-label {
  font-size: 20rpx;
  color: #999;
  margin-top: 2rpx;
}

.bar-buttons {
  flex: 1;
  display: flex;
  gap: 16rpx;
}

.bar-btn {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  font-weight: 600;
  padding: 22rpx 0;
  border-radius: 44rpx;
}

.bar-btn-cart {
  color: #fff;
  background: linear-gradient(135deg, #ff9000, #ff6a00);
}

.bar-btn-buy {
  color: #fff;
  background: linear-gradient(135deg, #ff5000, #ff3a00);
}