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.
git/scr/food/pages/cart/cart.wxss

239 lines
3.9 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

/* pages/cart/cart.wxss */
/*list样式*/
.scrol_view_style {
background: #f5f5f5;
}
.carts_box {
display: flex;
align-items: center;
height: 100%;
}
/*item*/
.list_item_style {
height: 180rpx;
background: white;
padding-bottom: 20rpx;
padding-left: 20rpx;
padding-right: 20rpx;
}
/*商品主图*/
.good_main_image {
width: 180rpx;
height: 180rpx;
margin-left: 10rpx;
border: 1rpx solid #bbb;
}
/*商品名称*/
.item_good_title {
text-align: left;
font-size: 32rpx;
height: auto;
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
width: 90%;
}
.cart_content_right {
display: flex;
flex-direction: column;
height: 100%;
margin-left: 20rpx;
}
.btn_wrap {
display: flex;
flex-direction: row;
align-items: center;
width: 200rpx;
}
.btn_wrap input {
background: #f8f8f8;
color: #666;
font-size: 26rpx;
right: 10rpx;
width: 50rpx;
text-align: center;
}
.btn_wrap input:nth-child(2) {
margin: 0 10rpx;
}
/*+号按钮*/
.add_image_style {
width: 20rpx;
height: 20rpx;
position: relative;
top: 60rpx;
right: 10rpx;
float: right;
}
/*——号按钮*/
.reduce_image_style {
width: 20rpx;
height: 20rpx;
position: relative;
top: 60rpx;
right: 10rpx;
float: right;
}
/*购买数量*/
.good_buy_number {
height: 25rpx;
position: relative;
top: 57rpx;
background: #f8f8f8;
color: #666;
font-size: 22rpx;
right: 10rpx;
width: 50rpx;
text-align: center;
float: right;
margin-right: 5rpx;
margin-left: 5rpx;
border-radius: 5rpx;
}
/*价钱的背景试图*/
.price_back_view {
display: flex;
align-items: center;
justify-content: space-between;
width: 460rpx;
padding-top: 20rpx;
}
.cart_content_bottom {
display: flex;
align-items: center;
justify-content: space-between;
width: 460rpx;
padding-top: 25rpx;
}
.cart_content_bottom .delete {
font-size: 28rpx;
}
/*售价*/
.right_list_item_price {
color: #ff5d08;
font-size: 32rpx;
}
/* 没有商品时的购物车样式 */
.no_shop {
text-align: center;
font-size: 50rpx;
color: #bbb;
margin-top: 100px;
}
/*规格的样式*/
.guige {
font-size: 28rpx;
}
/* 未选中的 背景样式 */
checkbox .wx-checkbox-input {
border-radius: 50%; /* 圆角 */
width: 35rpx; /* 背景的宽 */
height: 35rpx; /* 背景的高 */
}
/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
border-color: red;
background: red;
}
/* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
border-radius: 50%; /* 圆角 */
width: 35rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
height: 35rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
line-height: 35rpx;
text-align: center;
font-size: 25rpx; /* 对勾大小 30rpx */
color: #fff; /* 对勾颜色 白色 */
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
/*合计样式*/
.heji {
/* margin-left: 140px; */
float: right;
margin-right: 75px;
}
/*合计价格的样式*/
.all_shop_price {
color: #ff6261;
}
/*结算的样式*/
.jiesuan {
position: absolute;
height: 100%;
border-radius: 5rpx;
line-height: 80rpx;
padding: 0 30rpx;
color: white;
font-size: 28rpx;
background: #ff5d08;
bottom: 0rpx;
right: 0rpx;
}
/*全选的样式*/
.buy_shop {
width: 100%;
height: 80rpx;
background-color: white;
line-height: 80rpx;
position: fixed;
bottom: 0;
font-size: 28rpx;
z-index: 999;
box-shadow: 0 0 10rpx rgba(155, 143, 143, 0.6);
display: flex;
align-items: center;
}
.select_allbox{
display: flex;
align-items: center;
width: 57%;
}
.select_allbox text{
padding-left: 10rpx;
}