商品浏览页构建上传1.1.0版本
This commit is contained in:
Vendored
+1
-335
File diff suppressed because one or more lines are too long
Vendored
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-298
@@ -1,298 +1 @@
|
||||
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/@tarojs/webpack5-runner/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./src/pages/product/index.scss ***!
|
||||
\****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
@charset "UTF-8";
|
||||
.product-page {
|
||||
padding: 0 24rpx 24rpx;
|
||||
padding-bottom: 184rpx;
|
||||
/* 为底部 action-bar 留空 */
|
||||
}
|
||||
|
||||
/* 返回按钮 */
|
||||
.back-btn {
|
||||
font-size: 40rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
/* Hero 轮播 */
|
||||
.hero-section {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.hero-swiper {
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
height: 100%;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hero-icon {
|
||||
font-size: 100rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.hero-icon-img {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.hero-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* 基本信息 */
|
||||
.info-section {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx dashed rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.info-price {
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
color: var(--accent-pink);
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 详细介绍 */
|
||||
.detail-section {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.detail-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.action-bar .price-summary {
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
font-size: 22rpx;
|
||||
color: var(--text-secondary);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.summary-price {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: var(--accent-pink);
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
width: 100%;
|
||||
max-width: 600rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
margin-bottom: 24rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modal-product {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.modal-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.modal-icon-img {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.modal-name {
|
||||
font-size: 32rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.quantity-row {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.qty-label {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.qty-control {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.qty-btn {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 12rpx;
|
||||
background: var(--bg-input);
|
||||
border: var(--line-card);
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.qty-num {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
min-width: 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-total {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32rpx;
|
||||
padding-top: 24rpx;
|
||||
border-top: 1rpx dashed rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.total-label {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: 36rpx;
|
||||
font-weight: 800;
|
||||
color: var(--accent-pink);
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.modal-actions .btn-outline,
|
||||
.modal-actions .btn-gradient {
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.product-page{padding:0 24rpx 184rpx}.back-btn{font-size:40rpx;padding:10rpx}.hero-section{margin-top:20rpx}.hero-swiper{height:400rpx}.hero-card{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;-webkit-justify-content:center;justify-content:center;text-align:center}.hero-icon{font-size:100rpx;margin-bottom:16rpx}.hero-icon-img{height:100rpx;margin-bottom:16rpx;width:100rpx}.hero-name{color:var(--text-primary);font-size:36rpx;font-weight:700}.hero-image{height:100%;-o-object-fit:contain;object-fit:contain;width:100%}.info-section{padding:24rpx}.info-row{-ms-flex-align:center;-ms-flex-pack:justify;-webkit-align-items:center;align-items:center;border-bottom:1rpx dashed rgba(0,0,0,.06);display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding:20rpx 0}.info-row:last-child{border-bottom:none}.info-label{color:var(--text-secondary);font-size:28rpx}.info-price{color:var(--accent-pink);font-size:40rpx;font-weight:800}.info-value{color:var(--text-primary);font-size:28rpx}.detail-section{padding:24rpx}.detail-text{color:var(--text-secondary);font-size:28rpx;line-height:1.8}.action-bar .price-summary{-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0}.summary-label{color:var(--text-secondary);display:block;font-size:22rpx}.summary-price{color:var(--accent-pink);font-size:36rpx;font-weight:700}.modal-overlay{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:rgba(0,0,0,.5);bottom:0;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;left:0;padding:48rpx;position:fixed;right:0;top:0;z-index:1000}.modal-card{max-width:600rpx;padding:40rpx;width:100%}.modal-title{color:var(--text-primary);display:block;font-size:36rpx;font-weight:700;margin-bottom:24rpx;text-align:center}.modal-product{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16rpx;-webkit-justify-content:center;justify-content:center;margin-bottom:32rpx}.modal-icon{font-size:48rpx}.modal-icon-img{height:48rpx;width:48rpx}.modal-name{color:var(--text-primary);font-size:32rpx;font-weight:600}.quantity-row{-ms-flex-align:center;-ms-flex-pack:justify;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin-bottom:32rpx}.qty-label{color:var(--text-secondary);font-size:28rpx}.qty-control{-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:24rpx}.qty-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--bg-input);border:var(--line-card);border-radius:12rpx;color:var(--text-primary);display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:32rpx;font-weight:600;height:60rpx;-webkit-justify-content:center;justify-content:center;width:60rpx}.qty-num{color:var(--text-primary);font-size:32rpx;font-weight:700;min-width:48rpx;text-align:center}.modal-total{-ms-flex-align:center;-ms-flex-pack:justify;-webkit-align-items:center;align-items:center;border-top:1rpx dashed rgba(0,0,0,.06);display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin-bottom:32rpx;padding-top:24rpx}.total-label{color:var(--text-secondary);font-size:28rpx}.total-price{color:var(--accent-pink);font-size:36rpx;font-weight:800}.modal-actions{display:-webkit-flex;display:-ms-flexbox;display:flex;gap:20rpx}.modal-actions .btn-gradient,.modal-actions .btn-outline{-webkit-flex:1;-ms-flex:1;flex:1;padding:20rpx 0}
|
||||
Reference in New Issue
Block a user