products__item__detail部分显示不完全，请老师帮忙查看，谢谢
来源：1-5 项目作业
叫我丽红
2022-06-30 11:45:16
显示截图：
代码：
<template>
<div class="wrapper">
<div class="title">我的全部购物车(2)</div>
<div class="shops">
<div
class="empty"
>购物车当前为空</div>
<div
class="shop"
>
<div class="shop__title">
沃尔玛
</div>
<div class="products">
<div class="products__list">
<template>
<div
class="products__item"
>
<img class="products__item__img" src="http://www.dell-lee.com/imgs/vue3/tomato.png" />
<div class="products__item__detail">
<h4 class="products__item__title">番茄250g/份</h4>
<p class="products__item__price">
<span>
<span class="products__item__yen">¥ </span>
33.6 x 3
</span>
<span class="products__item__total">
<span class="products__item__yen">¥ </span>
99.9
</span>
</p>
</div>
</div>
</template>
<div class="total" >共计3件/1.4kg
<div class="total__arrow iconfont"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<Docker :currentIndex="1"/>
</template>
<script>
import Docker from '../../components/Docker'
export default {
name: 'CartList',
components: { Docker },
setup(){
// const cartListWithProducts = [
// {
// "shopName" :"沃尔玛",
// "productList" : [
// {
// "imgUrl": "http://www.dell-lee.com/imgs/vue3/tomato.png",
// "name":"番茄250g/份",
// "count":"3",
// "price": "33.6 "
// },
// {
// "imgUrl": "http://www.dell-lee.com/imgs/vue3/cherry.png",
// "name":"提子250g/份",
// "count":"3",
// "price": "33.6 "
// },
// {
// "imgUrl": "http://www.dell-lee.com/imgs/vue3/cherry.png",
// "name":"提子250g/份",
// "count":"3",
// "price": "33.6 "
// }
// ]
// },
// {
// "shopName" :"京东7FRESH七鲜",
// "productList" : [
// {
// "imgUrl": "http://www.dell-lee.com/imgs/vue3/orange.png",
// "name":"橙子 250g/份",
// "count":"3",
// "price": "33.6 "
// },
// {
// "imgUrl": "http://www.dell-lee.com/imgs/vue3/cherry.png",
// "name":"提子250g/份",
// "count":"3",
// "price": "33.6 "
// }
// ]
// },
// {
// "shopName" :"百果园",
// "productList" : [
// {
// "imgUrl": "http://www.dell-lee.com/imgs/vue3/tomato.png",
// "name":"番茄250g/份",
// "count":"3",
// "price": "33.6 "
// },
// {
// "imgUrl": "http://www.dell-lee.com/imgs/vue3/cherry.png",
// "name":"提子250g/份",
// "count":"3",
// "price": "33.6 "
// }
// ]
// }
// ]
// return { cartListWithProducts }
}
}
</script>
<style lang="scss" scoped>
.wrapper{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: .5rem;
background: #F8F8F8;
}
.title{
position: fixed;
left: 0;
right: 0;
top:0;
// z-index: 1;
font-size: .16rem;
color: #333333;
line-height: .44rem;
text-align: center;
background: #FFFFFF;
}
.empty {
line-height: .44rem;
color: #999;
font-size: .16rem;
text-align: center;
}
.shops{
overflow-y: scroll;
position: absolute;
top: .6rem;
right: .18rem;
left: .18rem;
bottom: .1rem;
}
.shop{
background: #FFFFFF;
border-radius: .04rem;
margin-bottom: .16rem;
overflow: hidden;
&__title{
padding: .16rem;
font-size: .16rem;
color: #333333;
}
}
.products{
&____list{
background: #fff;
}
&__item{
position: relative;
display: flex;
padding: 0 .16rem .16rem .16rem;
&__img{
width: .46rem;
height: .46rem;
margin-right: .16rem;
}
}
}
</style>
1回答
-
好帮手慕久久
2022-06-30
同学你好，vue3中，template作为特殊标签使用时，必须与v-for结合一起用：
否则template内部的代码无法解析出来。
同学改一下，可以把template换成普通div标签。
祝学习愉快！
0
相似问题