font-size: 16px;
line-height: 21px;
color: #333333;
margin-bottom: 10px;
padding-right: 27px;
}
.goods .foods-wrapper .food-list .food-item .content .desc {
font-size: 10px;
line-height: 19px;
color: #bfbfbf;
margin-bottom: 8px;
/* 超出部分显示省略号*/
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.goods .foods-wrapper .food-list .food-item .content .extra {
font-size: 10px;
color: #bfbfbf;
margin-bottom: 7px;
}
.goods .foods-wrapper .food-list .food-item .content .extra .saled {
margin-right: 14px;
}
.goods .foods-wrapper .food-list .food-item .content .product {
height: 15px;
margin-bottom: 6px;
}
.goods .foods-wrapper .food-list .food-item .content .price {
font-size: 0;
}
.goods .foods-wrapper .food-list .food-item .content .price .text {
font-size: 14px;
color: #fb4e44;
}
.goods .foods-wrapper .food-list .food-item .content .price .unit {
font-size: 12px;
color: #bfbfbf;
}
</style>
商品数量控制组件
这里用了vue动画
cart-decrease类为商品数量减少结构。 使用指令
v-show控制其显隐。有商品数量的时候会按照规定动画进行显示，反之则隐藏。cart-count类为选中的商品数量。
cart-add类为商品数量增加结构。
通过vue全局api set进行第一次点击增加商品按钮时候的设置。
https://cn.vuejs.org/v2/api/#...<template>
<div class="cartcontrol">
<transition name="move">
<div class="cart-decrease" @click="decreaseCart" v-show="food.count">
<span class="inner icon-remove_circle_outline"></span>
</div>
</transition>
<div class="cart-count" v-show="food.count">{{food.count}}</div>
<div class="cart-add icon-add_circle" @click="increaseCart">
<i class="bg"></i>
</div>
</div>
</template>
<script>
import Vue from 'vue'
export default {
props:{
food:{
type:Object
}
},
methods:{
decreaseCart(){
this.food.count--;
},
increaseCart(){
if(!this.food.count){
Vue.set(this.food,'count',1);
}else{
this.food.count++;
}
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.cartcontrol {
font-size: 0;
}
.cartcontrol .cart-decrease {
display: inline-block;
width: 26px;
height: 26px;
font-size: 26px;
color: #b4b4b4;
