|
|
|
@ -2,21 +2,60 @@ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
min-height: 100vh; |
|
|
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); |
|
|
|
background: linear-gradient(135deg, #F9FAFB 0%, #F2F4F8 100%); |
|
|
|
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; |
|
|
|
} |
|
|
|
|
|
|
|
.header { |
|
|
|
background: #fff; |
|
|
|
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08); |
|
|
|
background: #FFFFFF; |
|
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); |
|
|
|
position: sticky; |
|
|
|
top: 0; |
|
|
|
z-index: 10; |
|
|
|
} |
|
|
|
|
|
|
|
.header-content { |
|
|
|
padding: 30rpx 0; |
|
|
|
text-align: center; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 24rpx 32rpx; |
|
|
|
width: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
height: 100rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.back-button { |
|
|
|
width: 100rpx; |
|
|
|
height: 60rpx; |
|
|
|
line-height: 60rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #4a90e2; |
|
|
|
background: transparent; |
|
|
|
border: none; |
|
|
|
padding: 0; |
|
|
|
margin: 0; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-start; |
|
|
|
border-radius: 8rpx; |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.back-button:hover { |
|
|
|
color: #3b82f6; |
|
|
|
background: rgba(74, 144, 226, 0.1); |
|
|
|
transform: translateX(-2rpx); |
|
|
|
} |
|
|
|
|
|
|
|
.back-icon { |
|
|
|
margin-right: 8rpx; |
|
|
|
font-size: 22rpx; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
|
|
|
|
.back-text { |
|
|
|
font-size: 26rpx; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
@ -24,15 +63,24 @@ |
|
|
|
font-weight: 700; |
|
|
|
color: #2c3e50; |
|
|
|
letter-spacing: 2rpx; |
|
|
|
flex: 1; |
|
|
|
text-align: center; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.header-right { |
|
|
|
width: 100rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
flex: 1; |
|
|
|
padding: 16rpx; |
|
|
|
padding: 32rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
width: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
overflow-x: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
/* 加载状态 */ |
|
|
|
@ -41,7 +89,15 @@ |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 160rpx 0; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
|
z-index: 9999; |
|
|
|
width: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.loading-spinner { |
|
|
|
@ -95,83 +151,80 @@ |
|
|
|
display: flex; |
|
|
|
gap: 16rpx; |
|
|
|
width: 100%; |
|
|
|
max-width: 600rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-primary { |
|
|
|
flex: 1; |
|
|
|
height: 80rpx; |
|
|
|
line-height: 80rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
border-radius: 40rpx; |
|
|
|
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); |
|
|
|
background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%); |
|
|
|
color: #fff; |
|
|
|
border: none; |
|
|
|
box-shadow: 0 4rpx 12rpx rgba(96, 165, 250, 0.4); |
|
|
|
box-shadow: 0 4rpx 8rpx rgba(0,122,255,0.2); |
|
|
|
transition: all 0.3s ease; |
|
|
|
padding: 0 48rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-primary:hover { |
|
|
|
transform: translateY(-2rpx); |
|
|
|
box-shadow: 0 6rpx 16rpx rgba(74, 144, 226, 0.5); |
|
|
|
box-shadow: 0 6rpx 16rpx rgba(0,122,255,0.3); |
|
|
|
} |
|
|
|
|
|
|
|
.btn-secondary { |
|
|
|
flex: 1; |
|
|
|
height: 80rpx; |
|
|
|
line-height: 80rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
border-radius: 40rpx; |
|
|
|
background: #fff; |
|
|
|
color: #4a90e2; |
|
|
|
border: 2rpx solid #4a90e2; |
|
|
|
color: #007AFF; |
|
|
|
border: 1rpx solid #007AFF; |
|
|
|
transition: all 0.3s ease; |
|
|
|
padding: 0 48rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-secondary:hover { |
|
|
|
background: rgba(74, 144, 226, 0.05); |
|
|
|
background: rgba(0,122,255,0.05); |
|
|
|
transform: translateY(-2rpx); |
|
|
|
} |
|
|
|
|
|
|
|
.btn-back { |
|
|
|
.btn-change-product { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 8rpx 24rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #4a90e2; |
|
|
|
padding: 12rpx 24rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #007AFF; |
|
|
|
background: transparent; |
|
|
|
border: 1rpx solid #4a90e2; |
|
|
|
border: 1rpx solid #007AFF; |
|
|
|
border-radius: 20rpx; |
|
|
|
transition: all 0.3s ease; |
|
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); |
|
|
|
} |
|
|
|
|
|
|
|
.btn-back:hover { |
|
|
|
background: rgba(74, 144, 226, 0.1); |
|
|
|
.btn-change-product:hover { |
|
|
|
background: rgba(0,122,255,0.1); |
|
|
|
transform: translateY(-2rpx); |
|
|
|
box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.2); |
|
|
|
box-shadow: 0 4rpx 12rpx rgba(0,122,255,0.2); |
|
|
|
} |
|
|
|
|
|
|
|
.btn-back-icon { |
|
|
|
margin-right: 8rpx; |
|
|
|
font-size: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-back-text { |
|
|
|
font-size: 22rpx; |
|
|
|
.btn-change-product-text { |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
/* 商品信息卡片 */ |
|
|
|
.product-card { |
|
|
|
background: #f5f5f5; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 12rpx; |
|
|
|
padding: 32rpx; |
|
|
|
margin-bottom: 24rpx; |
|
|
|
margin: 24rpx 0 32rpx; |
|
|
|
width: 100%; |
|
|
|
max-width: 600rpx; |
|
|
|
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04); |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.product-info-container { |
|
|
|
@ -183,7 +236,6 @@ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 16rpx; |
|
|
|
width: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
@ -192,29 +244,26 @@ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex: 1; |
|
|
|
gap: 8rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.product-label { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #666; |
|
|
|
font-weight: 500; |
|
|
|
white-space: nowrap; |
|
|
|
margin-right: 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.product-name { |
|
|
|
font-size: 30rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
color: #333; |
|
|
|
line-height: 1.4; |
|
|
|
word-break: break-word; |
|
|
|
flex: 1; |
|
|
|
text-align: center; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-line-clamp: 2; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
/* 规格列表区域 */ |
|
|
|
.spec-section { |
|
|
|
margin-top: 24rpx; |
|
|
|
margin-top: 32rpx; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.section-header { |
|
|
|
@ -222,49 +271,55 @@ |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 24rpx; |
|
|
|
padding: 0 8rpx; |
|
|
|
padding: 0; |
|
|
|
width: 100%; |
|
|
|
max-width: 600rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.section-title { |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 700; |
|
|
|
color: #2c3e50; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
color: #333; |
|
|
|
padding-left: 16rpx; |
|
|
|
border-left: 6rpx solid #4a90e2; |
|
|
|
border-left: 6rpx solid #007AFF; |
|
|
|
border-radius: 4rpx; |
|
|
|
line-height: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.section-count { |
|
|
|
font-size: 24rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #999; |
|
|
|
background: rgba(74, 144, 226, 0.1); |
|
|
|
padding: 6rpx 16rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
/* 规格列表布局 */ |
|
|
|
.spec-list { |
|
|
|
margin-top: 16rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
|
gap: 16rpx; |
|
|
|
width: 100%; |
|
|
|
max-width: 600rpx; |
|
|
|
} |
|
|
|
|
|
|
|
/* 规格项 */ |
|
|
|
.spec-item { |
|
|
|
background: #f5f5f5; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 12rpx; |
|
|
|
padding: 40rpx 24rpx; |
|
|
|
padding: 32rpx 24rpx; |
|
|
|
cursor: pointer; |
|
|
|
min-height: 120rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
width: 100%; |
|
|
|
max-width: 600rpx; |
|
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02); |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.spec-item:hover { |
|
|
|
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05); |
|
|
|
transform: translateY(-2rpx); |
|
|
|
} |
|
|
|
|
|
|
|
.spec-item:active { |
|
|
|
background: #F5F5F5; |
|
|
|
} |
|
|
|
|
|
|
|
.spec-name { |
|
|
|
@ -283,19 +338,30 @@ |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 160rpx 0; |
|
|
|
padding: 120rpx 0; |
|
|
|
text-align: center; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-icon { |
|
|
|
font-size: 160rpx; |
|
|
|
font-size: 120rpx; |
|
|
|
margin-bottom: 40rpx; |
|
|
|
opacity: 0.6; |
|
|
|
color: #CCC; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-text { |
|
|
|
font-size: 32rpx; |
|
|
|
color: #666; |
|
|
|
font-weight: 600; |
|
|
|
color: #333; |
|
|
|
margin-bottom: 16rpx; |
|
|
|
line-height: 1.4; |
|
|
|
padding: 0 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-subtext { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #999; |
|
|
|
margin-bottom: 48rpx; |
|
|
|
line-height: 1.4; |
|
|
|
padding: 0 40rpx; |
|
|
|
@ -304,23 +370,13 @@ |
|
|
|
/* 响应式设计 */ |
|
|
|
@media (max-width: 750rpx) { |
|
|
|
.content { |
|
|
|
padding: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.spec-grid { |
|
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
|
gap: 16rpx; |
|
|
|
padding: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.product-card { |
|
|
|
padding: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.spec-card { |
|
|
|
padding: 28rpx 20rpx; |
|
|
|
min-height: 180rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
@ -333,10 +389,6 @@ |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.price-value { |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.button-group { |
|
|
|
flex-direction: column; |
|
|
|
gap: 12rpx; |
|
|
|
@ -346,49 +398,84 @@ |
|
|
|
.btn-secondary { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.spec-item { |
|
|
|
padding: 28rpx 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.spec-name { |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.spec-list { |
|
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
|
gap: 16rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 小屏幕设备适配 */ |
|
|
|
@media (max-width: 414rpx) { |
|
|
|
.spec-grid { |
|
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
|
gap: 12rpx; |
|
|
|
.content { |
|
|
|
padding: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.spec-card { |
|
|
|
.section-title { |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.product-name { |
|
|
|
font-size: 26rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.spec-item { |
|
|
|
padding: 24rpx 16rpx; |
|
|
|
min-height: 160rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.spec-name { |
|
|
|
font-size: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.price-value { |
|
|
|
font-size: 28rpx; |
|
|
|
.btn-change-product { |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-change-product-text { |
|
|
|
font-size: 26rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.spec-list { |
|
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
|
gap: 12rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 暂无更多规格提示 */ |
|
|
|
.no-more { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 48rpx 0; |
|
|
|
margin-top: 16rpx; |
|
|
|
margin-bottom: 100rpx; /* 添加底部边距，避免被导航栏遮挡 */ |
|
|
|
margin-top: 32rpx; |
|
|
|
margin-bottom: 40rpx; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.no-more::before, |
|
|
|
.no-more::after { |
|
|
|
content: ''; |
|
|
|
flex: 1; |
|
|
|
height: 1rpx; |
|
|
|
background: #E5E5E5; |
|
|
|
margin: 0 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.no-more-text { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #999; |
|
|
|
background: rgba(0, 0, 0, 0.03); |
|
|
|
padding: 12rpx 32rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
color: #BBB; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
/* 调整规格网格布局，确保不被导航栏遮挡 */ |
|
|
|
.spec-section { |
|
|
|
margin-bottom: 40rpx; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
Trae AI
7 days ago