/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** 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/orderDetail/index.scss ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; .order-detail-page { padding: 0 24rpx 24rpx; min-height: 100vh; } /* 返回按钮 */ .back-btn { font-size: 40rpx; padding: 10rpx; } /* 状态卡片 */ .status-card { padding: 32rpx; } .status-top { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 16rpx; margin-bottom: 32rpx; } .status-badge { font-size: 26rpx; } .status-desc { font-size: 26rpx; color: var(--text-secondary); } /* 物流时间轴 */ .logistics-timeline { position: relative; padding-left: 20rpx; } .logistics-timeline::before { content: ""; position: absolute; left: 8rpx; top: 8rpx; bottom: 8rpx; width: 2rpx; background: var(--line-star); opacity: 0.3; } .timeline-item { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 24rpx; position: relative; } .timeline-item:last-child { margin-bottom: 0; } .timeline-dot { width: 18rpx; height: 18rpx; border-radius: 50%; background: var(--bg-card); border: 3rpx solid var(--line-star); margin-right: 20rpx; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin-left: -20rpx; z-index: 2; } .timeline-item.active .timeline-dot { background: var(--accent-pink); border-color: var(--accent-pink); } .timeline-content { -webkit-flex: 1; -ms-flex: 1; flex: 1; } .timeline-title { font-size: 28rpx; color: var(--text-primary); display: block; margin-bottom: 6rpx; } .timeline-time { font-size: 24rpx; color: var(--text-secondary); } /* 地址卡片 */ .address-card { padding: 32rpx; } .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-title { font-size: 30rpx; font-weight: 700; color: var(--text-primary); } .address-change { padding: 6rpx 16rpx; border-radius: 8rpx; background: rgba(91, 140, 255, 0.08); } .change-text { font-size: 24rpx; color: var(--accent-blue); } .address-body { padding-top: 8rpx; } .address-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; } .address-name { font-size: 28rpx; font-weight: 700; color: var(--text-primary); } .address-phone { font-size: 26rpx; color: var(--text-secondary); } .address-detail { font-size: 26rpx; color: var(--text-secondary); line-height: 1.5; } .address-empty { padding: 32rpx 0; text-align: center; } /* 底部弹窗 — 地址选择(样式复用 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); } /* 卡片标题 icon(物流/地址) */ .card-icon-img { width: 32rpx; height: 32rpx; margin-right: 10rpx; } /* 商品卡片 */ .product-card { padding: 32rpx; } .product-row { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 24rpx; } .product-icon-wrapper { width: 100rpx; height: 100rpx; background: var(--bg-input); border-radius: 16rpx; 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; margin-right: 20rpx; overflow: hidden; padding: 8rpx; -webkit-box-sizing: border-box; box-sizing: border-box; } .product-icon-img { width: 64rpx; height: 64rpx; } .product-info { -webkit-flex: 1; -ms-flex: 1; flex: 1; } .product-name { font-size: 30rpx; font-weight: 700; color: var(--text-primary); display: block; margin-bottom: 8rpx; } .product-sku { font-size: 24rpx; color: var(--text-secondary); } .price-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: 16rpx 0; border-top: 1rpx dashed rgba(0, 0, 0, 0.06); } .price-label { font-size: 26rpx; color: var(--text-secondary); } .price-value { font-size: 28rpx; color: var(--text-primary); } .price-row.total { padding-top: 20rpx; } .total-label { font-size: 28rpx; font-weight: 700; } .total-value { font-size: 36rpx; font-weight: 800; color: var(--accent-pink); } /* 信息卡片 */ .info-card { padding: 32rpx; } .info-card .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: 16rpx 0; } .info-card .info-label { font-size: 26rpx; color: var(--text-secondary); } .info-card .info-value { font-size: 26rpx; color: var(--text-primary); } /* 状态横幅 */ .status-text { font-size: 48rpx; font-weight: 800; color: var(--text-primary); display: block; margin-bottom: 10rpx; } /* 物流信息 */ .logistics-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: 24rpx; padding-bottom: 16rpx; border-bottom: 1rpx dashed rgba(0, 0, 0, 0.06); } .logistics-title { font-size: 30rpx; font-weight: 700; color: var(--text-primary); } .logistics-num { font-size: 24rpx; color: var(--text-secondary); } .timeline { position: relative; padding-left: 20rpx; } .timeline::before { content: ""; position: absolute; left: 8rpx; top: 8rpx; bottom: 8rpx; width: 2rpx; background: var(--line-star); opacity: 0.3; } .timeline-item { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 24rpx; position: relative; } .timeline-item:last-child { margin-bottom: 0; } .timeline-dot { width: 18rpx; height: 18rpx; border-radius: 50%; background: var(--bg-card); border: 3rpx solid var(--line-star); margin-right: 20rpx; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin-left: -20rpx; z-index: 2; } .timeline-item.active .timeline-dot { background: var(--accent-pink); border-color: var(--accent-pink); } .timeline-content { -webkit-flex: 1; -ms-flex: 1; flex: 1; } .timeline-status { font-size: 28rpx; font-weight: 700; color: var(--text-primary); display: block; margin-bottom: 6rpx; } .timeline-time { font-size: 24rpx; color: var(--text-secondary); display: block; margin-bottom: 4rpx; } .timeline-desc { font-size: 26rpx; color: var(--text-secondary); line-height: 1.4; } /* 订单信息 */ .meta-title { font-size: 30rpx; font-weight: 700; color: var(--text-primary); display: block; margin-bottom: 16rpx; } .meta-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: 16rpx 0; } .meta-label { font-size: 26rpx; color: var(--text-secondary); } .meta-value { font-size: 26rpx; color: var(--text-primary); } .preview-card { padding: 32rpx; } .design-preview { position: relative; background: -webkit-linear-gradient(315deg, rgba(255, 154, 158, 0.08) 0%, rgba(160, 196, 255, 0.08) 100%); background: linear-gradient(135deg, rgba(255, 154, 158, 0.08) 0%, rgba(160, 196, 255, 0.08) 100%); border-radius: 16rpx; overflow: hidden; border: 3rpx dashed var(--accent-blue); margin: 0 auto; } .preview-sticker { position: absolute; max-width: 100%; max-height: 100%; }