133 lines
2.7 KiB
SCSS
133 lines
2.7 KiB
SCSS
page {
|
|
background: #F6F7FB;
|
|
// background: red;
|
|
}
|
|
.container {
|
|
margin: 0 20px;
|
|
.header {
|
|
margin-top: 20rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
.title {
|
|
padding-left: 20rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
height: 85rpx;
|
|
line-height: 85rpx;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
background: linear-gradient( 304deg, #FFFFFF 0%, #FEE7C3 100%);
|
|
}
|
|
.list {
|
|
padding: 20rpx;
|
|
.item {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
&:first-child{
|
|
margin-top: 0;
|
|
}
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
.desc {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
text-align: right;
|
|
.price {
|
|
font-size: 36rpx;
|
|
}
|
|
.time {
|
|
font-size: 24rpx;
|
|
margin-top: 10rpx;
|
|
color: #999999;
|
|
}
|
|
.payLogo {
|
|
width: 36rpx;
|
|
height: 31rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
.pay {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.line {
|
|
height: 0;
|
|
margin: 30rpx 0 10rpx;
|
|
border-bottom: 1px solid #EBEBEB;
|
|
}
|
|
}
|
|
}
|
|
.main {
|
|
margin-top: 20rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 58rpx 20rpx;
|
|
.title {
|
|
font-size: 32rpx;
|
|
color: #222222;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
.price {
|
|
text-align: center;
|
|
font-size: 60rpx;
|
|
color: #FF370B;
|
|
margin-top: 10rpx;
|
|
font-weight: 800;
|
|
}
|
|
.desc {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
text-align: center;
|
|
margin-top: 10rpx;
|
|
}
|
|
.remark {
|
|
margin-top: 58rpx;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
margin-bottom: 25rpx;
|
|
}
|
|
}
|
|
.btn {
|
|
margin: 60rpx auto 0;
|
|
width: 600rpx;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
background: linear-gradient( 91deg, #FF7658 0%, #FF370B 100%);
|
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
.popup_container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.popup_pic {
|
|
margin-top: 51rpx;
|
|
width: 169rpx;
|
|
height: 148rpx;
|
|
}
|
|
.title {
|
|
margin-top: 28rpx;
|
|
font-size: 36rpx;
|
|
color: #222222;
|
|
font-weight: 500;
|
|
margin-bottom: 56rpx;
|
|
}
|
|
.btn {
|
|
width: 170rpx;
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
background: #FF370B;
|
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
} |