商品浏览页构建上传1.1.0版本
This commit is contained in:
Vendored
+1
-279
@@ -1,279 +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/checkout/index.scss ***!
|
||||
\*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
@charset "UTF-8";
|
||||
.checkout-page {
|
||||
padding: 0 24rpx 24rpx;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
font-size: 40rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
/* 画布展示区 */
|
||||
.checkout-canvas {
|
||||
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;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.canvas-area {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border: 2rpx dashed var(--line-star);
|
||||
}
|
||||
|
||||
.checkout-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 商品信息 */
|
||||
.checkout-info {
|
||||
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-value {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.total-row {
|
||||
padding-top: 24rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.info-total {
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
color: var(--accent-pink);
|
||||
}
|
||||
|
||||
/* 地址卡片 */
|
||||
.checkout-address-card {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.checkout-address-header {
|
||||
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: 16rpx;
|
||||
}
|
||||
|
||||
.address-change {
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
background: rgba(91, 140, 255, 0.08);
|
||||
}
|
||||
|
||||
.change-text {
|
||||
font-size: 24rpx;
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.checkout-address-body {
|
||||
padding-top: 8rpx;
|
||||
}
|
||||
|
||||
.addr-row {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.addr-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.addr-phone {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.addr-detail {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.checkout-address-empty {
|
||||
padding: 32rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 底部弹窗 — 地址选择（样式复用 app.scss 全局定义，移除非必要覆写） */
|
||||
.addr-picker-header {
|
||||
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: 20rpx;
|
||||
}
|
||||
|
||||
.addr-picker-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.addr-picker-close {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.addr-picker-list {
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.addr-picker-item {
|
||||
padding: 20rpx 16rpx;
|
||||
border-bottom: 1rpx dashed rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.addr-picker-item.active {
|
||||
background: rgba(91, 140, 255, 0.06);
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.addr-picker-row {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.addr-picker-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.addr-picker-phone {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.addr-picker-default {
|
||||
font-size: 22rpx;
|
||||
color: var(--accent-pink);
|
||||
border: 1rpx solid var(--accent-pink);
|
||||
padding: 2rpx 8rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.addr-picker-detail {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.addr-picker-empty {
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.addr-picker-add {
|
||||
margin-top: 16rpx;
|
||||
padding: 20rpx;
|
||||
text-align: center;
|
||||
border: 2rpx dashed var(--accent-blue);
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.addr-picker-add-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
|
||||
/* 底部操作 */
|
||||
.checkout-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--bg-card);
|
||||
border-top: var(--line-card);
|
||||
padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.checkout-actions .btn-outline,
|
||||
.checkout-actions .btn-gradient {
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.checkout-page{padding:0 24rpx 24rpx}.back-btn{font-size:40rpx;padding:10rpx}.checkout-canvas{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;padding:40rpx}.canvas-area{background:rgba(0,0,0,.03);border:2rpx dashed var(--line-star);overflow:hidden;position:relative}.checkout-image{height:100%;left:0;position:absolute;top:0;width:100%}.checkout-info{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-value{color:var(--text-primary);font-size:28rpx;font-weight:500}.total-row{margin-top:8rpx;padding-top:24rpx}.info-total{color:var(--accent-pink);font-size:40rpx;font-weight:800}.checkout-address-card{padding:24rpx}.checkout-address-header{-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:16rpx}.address-change{background:rgba(91,140,255,.08);border-radius:8rpx;padding:6rpx 16rpx}.change-text{color:var(--accent-blue);font-size:24rpx}.checkout-address-body{padding-top:8rpx}.addr-row{-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16rpx;margin-bottom:8rpx}.addr-name{color:var(--text-primary);font-size:28rpx;font-weight:700}.addr-phone{color:var(--text-secondary);font-size:26rpx}.addr-detail{color:var(--text-secondary);font-size:26rpx;line-height:1.5}.checkout-address-empty{padding:32rpx 0;text-align:center}.empty-text{color:var(--text-secondary);font-size:26rpx}.addr-picker-header{-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:20rpx}.addr-picker-title{color:var(--text-primary);font-size:32rpx;font-weight:700}.addr-picker-close{color:var(--text-secondary);font-size:28rpx;padding:8rpx}.addr-picker-list{-webkit-flex:1;-ms-flex:1;flex:1;overflow-y:auto}.addr-picker-item{border-bottom:1rpx dashed rgba(0,0,0,.05);padding:20rpx 16rpx}.addr-picker-item.active{background:rgba(91,140,255,.06);border-radius:12rpx}.addr-picker-row{-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16rpx;margin-bottom:8rpx}.addr-picker-name{color:var(--text-primary);font-size:28rpx;font-weight:700}.addr-picker-phone{color:var(--text-secondary);font-size:26rpx}.addr-picker-default{border:1rpx solid var(--accent-pink);border-radius:6rpx;color:var(--accent-pink);font-size:22rpx;padding:2rpx 8rpx}.addr-picker-detail{color:var(--text-secondary);font-size:26rpx}.addr-picker-empty{color:var(--text-secondary);font-size:28rpx;padding:40rpx;text-align:center}.addr-picker-add{border:2rpx dashed var(--accent-blue);border-radius:12rpx;margin-top:16rpx;padding:20rpx;text-align:center}.addr-picker-add-text{color:var(--accent-blue);font-size:28rpx}.checkout-actions{background:var(--bg-card);border-top:var(--line-card);bottom:0;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:24rpx;left:0;padding:20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));position:fixed;right:0;z-index:500}.checkout-actions .btn-gradient,.checkout-actions .btn-outline{-webkit-flex:1;-ms-flex:1;flex:1;text-align:center}
|
||||
Reference in New Issue
Block a user