cat.vue
<template>
<div class="cart container">
<header>
<ul>
<li @click="goBack"><i class="iconfont icon-fanhui"></i></li>
<li><span>购物车</span></li>
<li><span>编辑</span></li>
</ul>
</header>
<section>
<div class="cart-title">
<van-checkbox v-model="checked"></van-checkbox>
<span>商品</span>
</div>
<ul>
<li>
<div class="check">
<van-checkbox v-model="checked"></van-checkbox>
</div>
<h2><img src="../assets/images/0013995_0.jpeg" alt="" /></h2>
<div class="goods">
<div class="goods-title">
<span>盒装,武夷山原产地全茉莉花格很好喝</span>
<i class="iconfont icon-fanhui"></i>
</div>
<div class="goods-price">$ 128</div>
<van-stepper v-model="value" />
</div>
</li>
</ul>
</section>
<footer>
<div class="radio">
<van-checkbox v-model="checked"></van-checkbox>
</div>
<div class="total">
<div>
共有
<span class="total-active">xx</span>
件商品
</div>
<div>
<span>总计:</span><span class="total-active">$1280+0茶币</span>
</div>
</div>
<div class="order">去结算</div>
</footer>
</div>
</template>
<script>
export default {
name: "Cart",
data() {
return {
checked: true,
value: 222,
};
},
methods: {
//返回上一页
goBack() {
this.$router.back();
},
},
};
</script>
<style scoped lang="less">
header ul {
display: flex;
width: 100%;
height: 1.2867rem;
justify-content: space-between;
background-color: green;
li i {
padding: 0 0.4rem;
font-size: 0.5333rem;
color: #f5f5f5;
}
span {
padding: 0 0.4rem;
font-size: 0.4867rem;
color: #ffff;
}
}
section {
background-color: #f5f5f5;
.cart-title {
display: flex;
padding: 0.5333rem;
span {
padding: 0 0.5333rem;
font-weight: 400;
font-size: 0.5867rem;
}
}
ul {
display: flex;
flex-direction: column;
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.1333rem 0.2667rem;
background-color: #ccc;
.check {
padding-right: 0.43rem;
}
.goods {
font-size: 0.48rem;
display: flex;
flex-direction: column;
padding-left: 0.42rem;
font-size: 0.32rem;
.goods-title {
display: flex;
i {
font-size: 0.58666rem;
}
}
.goods-price {
padding: 0.08rem 0;
color: rgb(11, 12, 9);
}
::v-deep .van-stepper {
text-align: right;
}
}
img {
width: 1.97333rem;
height: 1.97333rem;
}
}
}
}
footer {
display: flex;
justify-content: space-between;
height: 1.3333rem;
border-top: 0.0267rem solid #ccc;
.radio {
padding: 0.4rem;
}
.total {
font-size: 0.5rem;
.total-active {
color: red;
}
}
.order {
width: 3.2rem;
height: 1.3333rem;
color: #ccc;
text-align: center;
padding: 0.4rem;
font-size: 0.48rem;
background-color: forestgreen;
}
}
</style>