初始化
This commit is contained in:
魏啾
831
pages/shopcart/index.vue
Normal file
831
pages/shopcart/index.vue
Normal file
@@ -0,0 +1,831 @@
|
||||
<template>
|
||||
<view class="car" :style="[theme]">
|
||||
<view class="car_one flex-between">
|
||||
<view class="car_footer_l flex-start" @click="checkedAll">
|
||||
<u-icon v-if="allchecked" name="checkmark-circle-fill" :color="theme.cartbutton" size="24"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#f9f9f9" size="24"></u-icon>
|
||||
<view class="car_footer_licontexte" style="margin-left: 20rpx;">全选</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="car_list_box">
|
||||
<!-- 商品列表 -->
|
||||
<view class="car_list_box_item" v-for="(item,index) in list" :key="index"
|
||||
@click.stop="checkboxGroupChange(item,index)">
|
||||
<view class="list flex-start">
|
||||
<view class="right flex-start">
|
||||
<view class="rightborder flex-center">
|
||||
<u-icon v-if="item.checked" name="checkmark-circle-fill" :color="theme.cartbutton"
|
||||
size="24"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#f9f9f9" size="24"></u-icon>
|
||||
</view>
|
||||
<view class="img_box">
|
||||
<image :src="item.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="des flex-colum-start">
|
||||
<view class="des_x" @click.stop="delGoods(item.id)">
|
||||
×
|
||||
</view>
|
||||
<view class="flex-colum-start top">
|
||||
<view class="title_box title">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="title_boxtitles flex-start"
|
||||
@click.stop="shoppingindexgoodsgoodsdetail(item)">
|
||||
<view class="title_boxtitles_text">{{item.spec_str}}</view>
|
||||
<u-icon class="title_boxtitles_icon" name="arrow-down" color="#000"
|
||||
size="16"></u-icon>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="btn_box flex-between">
|
||||
<view class="price">
|
||||
¥{{item.price}}
|
||||
</view>
|
||||
<u-number-box v-model="item.number" :min="1" button-size="24" color="#ffffff"
|
||||
:bgColor="theme.cartpieces" :max="item.stock" iconStyle="color: #fff"
|
||||
@change="valChange($event,item)">
|
||||
</u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="car_footer" :class="style_type == 2 ? 'car_footers':''">
|
||||
<view class="car_footer_r flex-end flex-between">
|
||||
<view>
|
||||
<view class="flex-end">
|
||||
<view class="f_word1">合计：</view>
|
||||
<view class="f_money">
|
||||
<text>¥</text>
|
||||
<text
|
||||
v-if="allchecked == true || somechecked == true ">{{cartprice.price.total_price}}</text>
|
||||
<text v-else>0.00</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="f_btn" v-if="allchecked == true || somechecked == true " @click="goSettle">
|
||||
提交订单({{cartprice.price.number}})
|
||||
</view>
|
||||
<view class="f_btn" style="background:#f9f9f9; color: #666;" v-else>提交订单</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="car_footer flex-between">
|
||||
<view class="car_footer_l flex-start" @click="checkedAll">
|
||||
<u-icon v-if="allchecked" name="checkmark-circle-fill" color="#9397c1" size="24"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#f9f9f9" size="24"></u-icon>
|
||||
<view style="margin-left: 20rpx;">全选</view>
|
||||
</view>
|
||||
<view class="car_footer_r flex-end">
|
||||
<view>
|
||||
<view class="f_word">共{{cartprice.price.number}}件</view>
|
||||
<view class="flex-end">
|
||||
<view class="f_word1">合计：</view>
|
||||
<view class="f_money">
|
||||
<text>¥</text>
|
||||
<text>{{cartprice.price.total_price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="f_btn" @click="goSettle">结算</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view v-if="list.length==0 && is_end == true" style="margin-top: 20rpx;" class="flex-colum">
|
||||
<image :src="bgnothave" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />
|
||||
<view :style="{height:height}"></view>
|
||||
<u-overlay :show="overlayshow">
|
||||
<view class="warp">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-start">
|
||||
<image class="onecontentone_image" :src="lsitform.img" mode="aspectFill"></image>
|
||||
<view class="nonecontentone_view flex-colum-start">
|
||||
<text class="nonecontentone_view_one">{{lsitform.title}}</text>
|
||||
<text class="nonecontentone_view_otow">¥{{lsitform.price}}</text>
|
||||
</view>
|
||||
<view class="onerecticon">
|
||||
<u-icon @click="overlayshow = false" name="backspace" color="#000000" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towrect">
|
||||
<view class="towrect_one">
|
||||
规格
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<view class="towrect_tow" v-for="(item,index) in lsitforms" :key="item.id"
|
||||
@click="overlayshowsbox(item,index)">
|
||||
<view :class="towrecttowclass==item.id?'towrect_towtext':'towrect_towtexts'">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="fvirect flex-center" @click="shoppingindexgoodindexcareditcar">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
<bottombbar v-if="style_type == 2" :valuebbar='3'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
style_type: uni.cache.get('loginuser').style_type,
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
show: false,
|
||||
listcar_id: [], //购物车id 全选时候
|
||||
overlayshow: false,
|
||||
somechecked: false,
|
||||
towrecttowclass: 0,
|
||||
height: '',
|
||||
lsitcart_id: {},
|
||||
allchecked: false,
|
||||
shownumber: '',
|
||||
lsitform: {},
|
||||
lsitforms: [],
|
||||
list: [],
|
||||
cartprice: {
|
||||
price: {
|
||||
total_price: '0',
|
||||
number: '0'
|
||||
}
|
||||
},
|
||||
is_end: false,
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//#ifdef MP-WEIXIN || H5
|
||||
var query = uni.createSelectorQuery().in(this).select('.car_footer')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) - (uni.cache.get('loginuser').style_type == 2 ? 50 :
|
||||
0) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
//#endif
|
||||
//#ifdef MP-ALIPAY
|
||||
my.createSelectorQuery().selectAll('.car_footer').boundingClientRect().exec(ele => {
|
||||
var nodeData = ele[0]
|
||||
var that = this;
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (nodeData.height) - (uni.cache.get('loginuser').style_type == 2 ? 50 :
|
||||
0) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
//计算选中商品的总价
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.allchecked = false;
|
||||
this.somechecked = false;
|
||||
this.init_fn();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.shoppingindexgoodindexcarlistr()
|
||||
},
|
||||
methods: {
|
||||
init_fn() { //初始数据
|
||||
this.list = []
|
||||
this.is_end = false
|
||||
this.form.page = 1
|
||||
this.form.status = 'loadmore'
|
||||
this.shoppingindexgoodindexcarlistr()
|
||||
},
|
||||
async shoppingindexgoodindexcarlistr() {
|
||||
let res = await this.api.shoppingindexgoodindexcarlistr({
|
||||
page: this.form.page
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (this.list.checked == true || this.list.checked == false) {
|
||||
return
|
||||
} else {
|
||||
this.list.forEach(ele => {
|
||||
ele.checked = false;
|
||||
})
|
||||
}
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
overlayshowsbox(e, s) { //sku切换数据
|
||||
this.lsitform = e //显示的数据
|
||||
this.towrecttowclass = e.id
|
||||
},
|
||||
async shoppingindexgoodsgoodsdetail(e) { //查看sku 详情
|
||||
if (e.spec_type == 1) {
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.goods_id,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('mall/mallInfos', {
|
||||
id: e.goods_id,
|
||||
})
|
||||
}
|
||||
// this.lsitcart_id = e
|
||||
// let res = await this.api.shoppingindexgoodsgoodsdetail({
|
||||
// goods_id: e.goods_id
|
||||
// })
|
||||
// if (res) {
|
||||
// this.lsitform = e //显示的数据
|
||||
// this.lsitforms = res.spec
|
||||
// this.towrecttowclass = e.spec_id
|
||||
// this.overlayshow = true
|
||||
// }
|
||||
},
|
||||
async valChange(e, s) { //数量变换
|
||||
this.lsitcart_id = s
|
||||
let res = await this.api.shoppingindexgoodsgoodsdetail({
|
||||
goods_id: s.goods_id
|
||||
})
|
||||
if (res) {
|
||||
this.lsitform = s
|
||||
this.lsitforms = res.spec
|
||||
this.shownumber = e.value
|
||||
this.shoppingindexgoodindexcareditcar(1) //数量
|
||||
}
|
||||
},
|
||||
//购物车 编辑 数量
|
||||
async shoppingindexgoodindexcareditcar(e) {
|
||||
console.log(this.lsitcart_id, this.lsitform)
|
||||
let res = await this.api.shoppingindexgoodindexcareditcar({
|
||||
id: this.lsitcart_id.id,
|
||||
spec_id: this.lsitform.spec_id,
|
||||
number: this.shownumber ? this.shownumber : this.lsitcart_id.number
|
||||
})
|
||||
if (res == 1) {
|
||||
this.overlayshow = false
|
||||
if (this.lsitcart_id.checked) {
|
||||
this.shoppingindexgoodindexoforders() //切蒜钱
|
||||
}
|
||||
if (e != 1) {
|
||||
this.init_fn();
|
||||
}
|
||||
}
|
||||
},
|
||||
//结算总价
|
||||
async shoppingindexgoodindexoforders() {
|
||||
let res = await this.api.shoppingindexgoodindexoforders({
|
||||
type: 1, // 1购物车 2商品详情页
|
||||
goods_id: '', //商品ID 商品详情页来源时必填
|
||||
car_id: this.listcar_id.toString(), //购物车ID 1,2 购物车来源时必填
|
||||
number: this.shownumber ? this.shownumber : this.lsitcart_id.number, //数量 商品详情页来源时必填
|
||||
spec: '', //规格 商品详情页来源时必填
|
||||
address_id: '', //地址ID 可以为空（为空时返回默认地址）
|
||||
})
|
||||
if (res) {
|
||||
this.cartprice = res
|
||||
this.$forceUpdate();
|
||||
}
|
||||
console.log(res)
|
||||
},
|
||||
//删除商品
|
||||
async delGoods(e) {
|
||||
var e_ = e
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: '确定删除吗？',
|
||||
success: async (data) => {
|
||||
if (data.confirm) {
|
||||
try {
|
||||
let res = await this.api.shoppingindexgoodindexcardelcarr({
|
||||
id: e_
|
||||
})
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'none'
|
||||
})
|
||||
this.init_fn();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '删除失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
// 选中任一checkbox时，由checkbox-group触发
|
||||
checkboxGroupChange(e, s) {
|
||||
this.listcar_id = []
|
||||
this.cartprice = {
|
||||
price: {
|
||||
total_price: '0',
|
||||
number: '0'
|
||||
}
|
||||
},
|
||||
this.list[s].checked = !this.list[s].checked
|
||||
this.list.forEach(item => {
|
||||
if (item.checked == true) {
|
||||
this.listcar_id.push(item.id);
|
||||
}
|
||||
})
|
||||
let result = this.list.some(item => {
|
||||
return item.checked == true
|
||||
})
|
||||
if (result) {
|
||||
this.somechecked = true
|
||||
this.shoppingindexgoodindexoforders() //切蒜钱
|
||||
} else {
|
||||
console.log(1)
|
||||
this.somechecked = false
|
||||
}
|
||||
this.$forceUpdate();
|
||||
this.changeSelectAllBtn(); //监听全选按钮状态
|
||||
},
|
||||
// 全选
|
||||
checkedAll() {
|
||||
if (this.list[0].checked == false) { //全选
|
||||
this.list.forEach(item => {
|
||||
item.checked = true;
|
||||
})
|
||||
} else { //反选
|
||||
this.listcar_id = []
|
||||
this.cartprice = {
|
||||
price: {
|
||||
total_price: '0',
|
||||
number: '0'
|
||||
}
|
||||
},
|
||||
this.list.forEach(item => {
|
||||
item.checked = false;
|
||||
})
|
||||
}
|
||||
this.$forceUpdate();
|
||||
this.changeSelectAllBtn(); //监听全选按钮状态
|
||||
},
|
||||
/* 选择店铺或者商品 监听全选按钮状态 */
|
||||
changeSelectAllBtn() {
|
||||
const selectAll = this.list.every(shopItem => {
|
||||
return shopItem.checked == true;
|
||||
});
|
||||
if (selectAll) {
|
||||
this.listcar_id = []
|
||||
this.allchecked = true;
|
||||
this.list.forEach(item => {
|
||||
this.listcar_id.push(item.id);
|
||||
})
|
||||
} else {
|
||||
this.allchecked = false
|
||||
}
|
||||
if (this.allchecked) {
|
||||
this.shoppingindexgoodindexoforders(); //监听全选按钮状态
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
goSettle() {
|
||||
console.log(this.listcar_id.toString())
|
||||
uni.pro.navigateTo('mall/confirm', {
|
||||
type: 1, // 1购物车 2商品详情页
|
||||
goods_id: '', //商品ID 商品详情页来源时必填
|
||||
car_id: this.listcar_id.toString(), //购物车ID 1,2 购物车来源时必填
|
||||
number: '', //数量 商品详情页来源时必填
|
||||
spec: '', //规格 商品详情页来源时必填
|
||||
address_id: '', //地址ID 可以为空（为空时返回默认地址）
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
|
||||
/deep/ .u-checkbox {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/deep/ .u-checkbox__label {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
width: 100% !important;
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.slot-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
|
||||
}
|
||||
|
||||
.car {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.car_one {
|
||||
border-top: 1rpx solid #F9F9F9;
|
||||
padding: 16rpx 30rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.car_footer_l {
|
||||
.car_footer_licontexte {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand_box {
|
||||
height: 100rpx;
|
||||
margin-left: 20rpx;
|
||||
display: inline-block;
|
||||
padding-right: 20rpx;
|
||||
|
||||
image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 16rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333 !important;
|
||||
padding-left: 15rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.car_list_box {
|
||||
padding: 0rpx 30rpx 20rpx 30rpx;
|
||||
|
||||
.car_list_box_item {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.list {
|
||||
padding: 30rpx 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
width: 100%;
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
|
||||
.rightborder {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.img_box {
|
||||
image {
|
||||
width: 156rpx;
|
||||
height: 156rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.des {
|
||||
position: relative;
|
||||
flex: auto;
|
||||
padding-left: 24rpx;
|
||||
height: 100%;
|
||||
|
||||
.des_x {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
|
||||
.title_box {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.title_boxtitles {
|
||||
margin-top: 16rpx;
|
||||
padding: 8rpx 32rpx;
|
||||
background: #F9F9F9;
|
||||
border-radius: 8rpx;
|
||||
|
||||
.title_boxtitles_text {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.title_boxtitles_icon {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn_box {
|
||||
margin-top: 30rpx;
|
||||
width: 100%;
|
||||
|
||||
.price {
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 50rpx;
|
||||
background: #FF3300;
|
||||
border-radius: 25rpx;
|
||||
width: 110rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 26rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
.nonecontentone_view {
|
||||
|
||||
margin-left: 16rpx;
|
||||
|
||||
.nonecontentone_view_one {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.nonecontentone_view_otow {
|
||||
margin-top: 10rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towrect {
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
padding-top: 34rpx;
|
||||
|
||||
.towrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.towrect_tow {
|
||||
margin-top: 16rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.towrect_towtext {
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid var(--bg-color-button);
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: var(--bg-color-button);
|
||||
}
|
||||
|
||||
.towrect_towtexts {
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: var(--bg-color-button);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.thererect {
|
||||
padding: 34rpx 0;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
border-top: 1rpx solid #F7F7F7;
|
||||
|
||||
.thererect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.thererect_tow {}
|
||||
}
|
||||
|
||||
.fuorrect {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fuorrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.fuorrect_tow {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fvirect {
|
||||
margin-top: 200rpx;
|
||||
padding: 16rpx;
|
||||
text-align: center;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 40rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.car_footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-top: 1rpx solid #EEEEEE;
|
||||
z-index: 111;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #fff;
|
||||
|
||||
.car_footer_r {
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
|
||||
.f_word {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.f_word1 {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.f_money {
|
||||
color: #FF3300;
|
||||
|
||||
text {
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
font-size: 26rpx;
|
||||
letter-spacing: 10rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.f_btn {
|
||||
padding: 16rpx 70rpx;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 46rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.del_btn {
|
||||
width: 180rpx;
|
||||
height: 78rpx;
|
||||
line-height: 78rpx;
|
||||
border-radius: 38rpx;
|
||||
border: 1rpx solid #999999;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.car_footers {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-top: 1rpx solid #EEEEEE;
|
||||
z-index: 111;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
padding-bottom: 124rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/deep/.u-checkbox-group {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user