206 lines
3.3 KiB
Plaintext
206 lines
3.3 KiB
Plaintext
/* 页面与滚动容器 */
|
||
.page {
|
||
background-color: #f7f7f7;
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
padding: 24rpx 24rpx 160rpx; /* bottom 预留给固定底部栏 */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.no-scrollbar::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
display: none;
|
||
}
|
||
|
||
/* 通用卡片 */
|
||
.card {
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.04);
|
||
}
|
||
|
||
.card + .card {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
/* 商品信息卡片 */
|
||
.product {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: stretch;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.cover {
|
||
width: 260rpx;
|
||
height: 180rpx;
|
||
border-radius: 12rpx;
|
||
flex-shrink: 0;
|
||
background: #f2f2f2;
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
min-width: 0; /* 使多行省略生效 */
|
||
}
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #1f1f1f;
|
||
line-height: 48rpx;
|
||
}
|
||
|
||
.ellipsis-2 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.price-line {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 12rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.price-now {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #ff5a1a; /* 与主题橙统一 */
|
||
line-height: 1;
|
||
}
|
||
|
||
.price-origin {
|
||
font-size: 26rpx;
|
||
color: #9f9f9f;
|
||
text-decoration: line-through; /* 用样式处理中划线 */
|
||
}
|
||
|
||
/* 通用行（键值对） */
|
||
.row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.row-left {
|
||
font-size: 30rpx;
|
||
color: #4a4a4a;
|
||
}
|
||
|
||
.row-right {
|
||
font-size: 30rpx;
|
||
color: #1f1f1f;
|
||
}
|
||
|
||
.accent {
|
||
color: #ff5a1a;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 支付方式 */
|
||
.pay {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.pay-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.pay-icon {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.pay-text {
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.pay-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 固定底部 */
|
||
.footer {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: #ffffff;
|
||
box-shadow: 0 -6rpx 20rpx rgba(0,0,0,0.06);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
/* 兼容旧版 iOS */
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
}
|
||
|
||
.footer-inner {
|
||
height: 120rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 24rpx;
|
||
padding: 0 24rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.to-pay {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.to-pay-amount {
|
||
font-size: 36rpx;
|
||
color: #ff5a1a;
|
||
font-weight: 700;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
/* 支付按钮：使用 view，自定义橙色主题 */
|
||
.btn-pay {
|
||
min-width: 260rpx;
|
||
height: 88rpx;
|
||
border-radius: 999rpx;
|
||
background: linear-gradient(180deg, #ffa64a 0%, #ff8d1a 100%);
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 6rpx 14rpx rgba(255, 141, 26, 0.35);
|
||
active-opacity: 0.85;
|
||
}
|
||
|
||
/* 遮罩层 */
|
||
.page-mask {
|
||
position: fixed;
|
||
inset: 0;
|
||
background-color: rgba(0, 0, 0, 0.35);
|
||
z-index: 9999;
|
||
}
|
||
|
||
/* 旧样式中可能用到的零散类，若无依赖可移除 */
|
||
.ml-11 { margin-left: 20rpx; }
|
||
.mt-15 { margin-top: 28rpx; }
|
||
.ml-1 { margin-left: 2rpx; }
|