You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
378 lines
8.2 KiB
378 lines
8.2 KiB
.header-box {
|
|
padding-left: 33rpx;
|
|
font-size: $text-3xl;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.address {
|
|
padding: 17rpx 0 0rpx 0;
|
|
margin: 0 29rpx 0 33rpx;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
margin-right: 15rpx;
|
|
.name {
|
|
margin-left: 15rpx;
|
|
font-weight: bold;
|
|
font-size: $text-lg;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
.third {
|
|
margin: 20rpx 0rpx 0rpx 0;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 3rpx 14rpx 0rpx rgba(54, 77, 65, 0.1);
|
|
border-radius: 14rpx;
|
|
padding: 35rpx 22rpx 0rpx 22rpx;
|
|
box-sizing: border-box;
|
|
.top-box {
|
|
padding-bottom: 150rpx;
|
|
overflow: hidden;
|
|
.cart-list-touch-move-active {
|
|
-webkit-transform: translateX(-120rpx);
|
|
transform: translateX(-120rpx);
|
|
}
|
|
.cart-list {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1px solid #E4E6E3;
|
|
margin-bottom: 20rpx;
|
|
transition: .3s all;
|
|
position: relative;
|
|
.cart-list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
flex: 1;
|
|
.of-stock {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #FFFFFF;
|
|
opacity: 0.6;
|
|
z-index: 999;
|
|
}
|
|
.image-box {
|
|
width: 174rpx;
|
|
height: 174rpx;
|
|
margin-left: 20rpx;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.of-stock-text {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
top: 50%;
|
|
font-weight: 400;
|
|
font-size: $text-lg;
|
|
color: #FFFFFF;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
border-radius: 60rpx;
|
|
padding: 16rpx 24rpx;
|
|
width: 40%;
|
|
text-align: center;
|
|
z-index: 999;
|
|
}
|
|
.info {
|
|
height: 100%;
|
|
margin-left: 22rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
.name {
|
|
font-weight: bold;
|
|
font-size: 29rpx;
|
|
color: #333333;
|
|
}
|
|
.under {
|
|
margin-top: 42rpx;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
.price-box {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
line-height: 1;
|
|
flex: 1;
|
|
flex-wrap: wrap;
|
|
.price {
|
|
font-weight: bold;
|
|
font-size: 26rpx;
|
|
color: #FF261F;
|
|
text {
|
|
font-size: $text-5xl;
|
|
}
|
|
}
|
|
.no-original {
|
|
font-size: 22rpx;
|
|
color: #959595;
|
|
margin-left: 9rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.choose-box {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 9;
|
|
.line-one {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 88%;
|
|
height: 1px;
|
|
background-color: #D6D6D6;
|
|
z-index: -1;
|
|
}
|
|
.line-two {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 88%;
|
|
height: 1px;
|
|
background-color: #D6D6D6;
|
|
z-index: -1;
|
|
}
|
|
|
|
.minus {
|
|
width: 58rpx;
|
|
height: 58rpx;
|
|
background: #06CA64;
|
|
border-radius: 21rpx 0rpx 21rpx 0rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.icon {
|
|
width: 28rpx;
|
|
height: 4rpx;
|
|
}
|
|
}
|
|
.input {
|
|
width: 67rpx;
|
|
height: 58rpx;
|
|
line-height: 58rpx;
|
|
text-align: center;
|
|
font-size: $text-xl;
|
|
color: #333333;
|
|
margin: 0 10rpx;
|
|
}
|
|
.add {
|
|
width: 58rpx;
|
|
height: 58rpx;
|
|
background: #06CA64;
|
|
border-radius: 21rpx 0rpx 21rpx 0rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.total {
|
|
font-weight: 400;
|
|
font-size: $text-sm;
|
|
color: #959595;
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: flex-end;
|
|
.text {
|
|
font-size: $text-lg;
|
|
color: #FF261F;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
.delete {
|
|
position: absolute;
|
|
right: -130rpx;
|
|
top: 0;
|
|
width: 120rpx;
|
|
height: 100%;
|
|
background-color: #FF261F;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: $text-4xl;
|
|
}
|
|
}
|
|
}
|
|
.under-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-top: 26rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
width: 100%;
|
|
// bottom: 90rpx;
|
|
background: #fff;
|
|
z-index: 999;
|
|
/* padding-bottom: 20rpx; */
|
|
padding: 0 14rpx 10rpx;
|
|
box-sizing: border-box;
|
|
.under-box-left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.radio-right {
|
|
margin-left: 15rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 15rpx;
|
|
|
|
.text {
|
|
font-weight: bold;
|
|
font-size: $text-lg;
|
|
color: #545454;
|
|
}
|
|
|
|
.total-goods {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.num {
|
|
font-weight: 500;
|
|
font-size: $text-sm;
|
|
color: #FF261F;
|
|
}
|
|
|
|
.name {
|
|
font-weight: 500;
|
|
font-size: $text-sm;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.under-box-right {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.one {
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 1;
|
|
align-items: flex-end;
|
|
|
|
.price-box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.text {
|
|
font-weight: bold;
|
|
font-size: $text-lg;
|
|
color: #333333;
|
|
}
|
|
|
|
.price {
|
|
font-weight: bold;
|
|
font-size: $text-lg;
|
|
color: #F23A3A;
|
|
|
|
text {
|
|
font-size: $text-5xl;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tips {
|
|
font-weight: bold;
|
|
font-size: $text-sm;
|
|
color: #999999;
|
|
margin-top: 15rpx;
|
|
}
|
|
}
|
|
|
|
.two {
|
|
margin-left: 27rpx;
|
|
background: #06CA64;
|
|
border-radius: 60rpx;
|
|
font-weight: bold;
|
|
font-size: $text-2xl;
|
|
color: #FFFFFF;
|
|
padding: 20rpx 32rpx;
|
|
text-align: center;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.edit-box {
|
|
.btn {
|
|
margin-left: 27rpx;
|
|
border: 1px solid #06CA64;
|
|
border-radius: 60rpx;
|
|
font-weight: bold;
|
|
font-size: $text-2xl;
|
|
color: #06CA64;
|
|
padding: 20rpx 32rpx;
|
|
text-align: center;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 119rpx;
|
|
}
|
|
|
|
.empty-box .icon {
|
|
width: 430rpx;
|
|
height: 327rpx;
|
|
}
|
|
|
|
.empty-box .tips {
|
|
font-weight: bold;
|
|
font-size: 29rpx;
|
|
color: #666666;
|
|
margin-top: 81rpx;
|
|
}
|
|
|
|
.empty-box .btn {
|
|
font-weight: bold;
|
|
font-size: 33rpx;
|
|
color: #06CA64;
|
|
margin-top: 78rpx;
|
|
border-radius: 60rpx;
|
|
border: 1px solid #05B359;
|
|
padding: 18rpx 48rpx;
|
|
}
|
|
|
|
.Arrow,
|
|
.round {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
background: red;
|
|
border-radius: 30rpx;
|
|
}
|
|
|
|
.round {
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
}
|