美化了样式
This commit is contained in:
@ -1,126 +1,205 @@
|
||||
.ml-11 {
|
||||
margin-left: 20.63rpx;
|
||||
}
|
||||
.mt-15 {
|
||||
margin-top: 28.13rpx;
|
||||
}
|
||||
.ml-1 {
|
||||
margin-left: 1.88rpx;
|
||||
}
|
||||
/* app.wxss 或 当前页面 .wxss */
|
||||
.page-mask {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 9999;
|
||||
}
|
||||
/* 页面与滚动容器 */
|
||||
.page {
|
||||
background-color: #f7f7f7;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.section {
|
||||
padding: 20.63rpx 22.5rpx 27.58rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 3.94rpx;
|
||||
}
|
||||
.image {
|
||||
border-radius: 9.38rpx;
|
||||
width: 208.13rpx;
|
||||
height: 133.13rpx;
|
||||
}
|
||||
.text {
|
||||
color: #000000;
|
||||
font-size: 30rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 35.63rpx;
|
||||
width: 429.38rpx;
|
||||
}
|
||||
.group {
|
||||
padding: 0 4.29rpx;
|
||||
}
|
||||
.text_2 {
|
||||
color: #f84947;
|
||||
font-size: 30rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 22.76rpx;
|
||||
}
|
||||
.text_3 {
|
||||
color: #8c8c8c;
|
||||
font-size: 26.25rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 19.93rpx;
|
||||
}
|
||||
.divider {
|
||||
background-color: #8c8c8c;
|
||||
width: 69.56rpx;
|
||||
height: 1.88rpx;
|
||||
}
|
||||
.pos {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.section_2 {
|
||||
padding: 48.69rpx 29.21rpx 43.35rpx 44.96rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.font {
|
||||
font-size: 30rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 27.96rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_4 {
|
||||
line-height: 22.91rpx;
|
||||
}
|
||||
.section_3 {
|
||||
padding: 39.38rpx 46.88rpx 897.38rpx 48.75rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.image_2 {
|
||||
width: 52.5rpx;
|
||||
height: 52.5rpx;
|
||||
}
|
||||
.image_3 {
|
||||
width: 41.25rpx;
|
||||
height: 41.25rpx;
|
||||
}
|
||||
.section_4 {
|
||||
padding: 16.88rpx 24.38rpx 16.88rpx 31.09rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.text_5 {
|
||||
color: #000000;
|
||||
line-height: 28.05rpx;
|
||||
}
|
||||
.text-wrapper {
|
||||
padding: 14.07rpx 0 19.07rpx;
|
||||
background-color: #ff8d1a;
|
||||
border-radius: 75rpx;
|
||||
width: 268.13rpx;
|
||||
height: 71.25rpx;
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
padding: 24rpx 24rpx 160rpx; /* bottom 预留给固定底部栏 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.text_6 {
|
||||
color: #ffffff;
|
||||
line-height: 28.11rpx;
|
||||
.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 {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
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; }
|
||||
|
||||
Reference in New Issue
Block a user