vertical-align: middle;
}
.shopcart-wrapper .shopcart-list .list-header .empty span {
font-size: 12px;
vertical-align: middle;
}
.shopcart-wrapper .shopcart-list .list-content {
max-height: 360px;
overflow: hidden;
background: white;
}
.shopcart-wrapper .shopcart-list .list-content .food-item {
height: 38px;
padding: 12px 12px 10px 12px;
border-bottom: 1px solid #f4f4f4;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper {
float: left;
width: 240px;
}
.shopcart-wrapper
.shopcart-list
.list-content
.food-item
.desc-wrapper
.desc-left {
float: left;
width: 170px;
}
.shopcart-wrapper
.shopcart-list
.list-content
.food-item
.desc-wrapper
.desc-left
.name {
font-size: 16px;
margin-bottom: 8px;
/* 超出部分隐藏*/
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
height: 16px;
}
.shopcart-wrapper
.shopcart-list
.list-content
.food-item
.desc-wrapper
.desc-left
.unit {
font-size: 12px;
color: #b4b4b4;
}
.shopcart-wrapper
.shopcart-list
.list-content
.food-item
.desc-wrapper
.desc-left
.description {
font-size: 12px;
color: #b4b4b4;
/* 超出部分隐藏*/
overflow: hidden;
height: 12px;
}
.shopcart-wrapper
.shopcart-list
.list-content
.food-item
.desc-wrapper
.desc-right {
float: right;
width: 70px;
text-align: right;
}
.shopcart-wrapper
.shopcart-list
.list-content
.food-item
.desc-wrapper
.desc-right
.price {
font-size: 12px;
line-height: 38px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .cartcontrol-wrapper {
float: right;
margin-top: 6px;
}
.shopcart .shopcart-mask {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 98px;
background: rgba(7, 17, 27, 0.6);
}
</style>
到此购物车与组件联动就结束了。下篇我们讲如何进行商品分类菜单数量提示。
总结
以上所述是小编给大家介绍的Vue商品控件与购物车联动效果的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
