parent
b43a2bcf2d
commit
6ba103368b
2 changed files with 257 additions and 1 deletions
@ -0,0 +1,254 @@ |
|||||||
|
<template> |
||||||
|
<div class="collection"> |
||||||
|
<!-- 收藏列表--> |
||||||
|
<div class="d-flex collectList" v-if="collectList.length != 0"> |
||||||
|
<div class="item d-flex" v-for="(item,index) in collectList" :key="index" v-if="index<7"> |
||||||
|
<img :src="item.imgUrl"> |
||||||
|
<div class="title f_14">{{item.title}}</div> |
||||||
|
<div class="price f_14">￥{{item.price}}</div> |
||||||
|
<div class="c_75 f_12">{{item.size}}</div> |
||||||
|
<div class="c_75 f_12">{{item.zhuliao}}</div> |
||||||
|
<div class="c_75 f_12">{{item.fuliao}}</div> |
||||||
|
<a class="button1 f_12">删除</a> |
||||||
|
<div class="button2 f_12 c_fff">加入购物袋</div> |
||||||
|
</div> |
||||||
|
<div class="more d-flex"> |
||||||
|
<a class="c_1B f_20">点击进入衣橱<a-icon type="right" /></a> |
||||||
|
<a class="f_14">查看更多收藏</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- 收藏列表没有数据--> |
||||||
|
<div class="else" v-if="collectList.length == 0"> |
||||||
|
<p class="c_1B f_30">您的衣橱中没有收藏任何商品。</p> |
||||||
|
<div class="c_fff f_12">前往探索</div> |
||||||
|
</div> |
||||||
|
<div class="recommending d-flex" v-if="collectList.length == 0"> |
||||||
|
<div class="item title d-flex"> |
||||||
|
<p class="f_20">您可能喜欢</p> |
||||||
|
<p class="f_14">根据算法推荐</p> |
||||||
|
</div> |
||||||
|
<div class="item" v-for="(item,index) in recommendList" :key="index" v-if="index<4"> |
||||||
|
<img :src="item.imgUrl"> |
||||||
|
<span v-if="!item.flag" class="iconfont icon-weishoucang" @click="shouCang(item)"></span> |
||||||
|
<span v-if="item.flag" class="iconfont icon-yishoucang" @click="shouCang(item)"></span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "collection", |
||||||
|
components: { }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// collectList:[ |
||||||
|
// { |
||||||
|
// id:1, |
||||||
|
// imgUrl:require("../assets/cloth001.png"), |
||||||
|
// title:"商品名商品名商品名商品名商品名", |
||||||
|
// price:'23500', |
||||||
|
// size:"款式名", |
||||||
|
// zhuliao:"主料名", |
||||||
|
// fuliao:"辅料名", |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// id:2, |
||||||
|
// imgUrl:require("../assets/cloth002.png"), |
||||||
|
// title:"商品名商品名商品名商品名商品名", |
||||||
|
// price:'23500', |
||||||
|
// size:"款式名", |
||||||
|
// zhuliao:"主料名", |
||||||
|
// fuliao:"辅料名", |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// id:3, |
||||||
|
// imgUrl:require("../assets/cloth004.png"), |
||||||
|
// title:"商品名商品名商品名商品名商品名", |
||||||
|
// price:'23500', |
||||||
|
// size:"款式名", |
||||||
|
// zhuliao:"主料名", |
||||||
|
// fuliao:"辅料名", |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// id:4, |
||||||
|
// imgUrl:require("../assets/cloth003.png"), |
||||||
|
// title:"商品名商品名商品名商品名商品名", |
||||||
|
// price:'23500', |
||||||
|
// size:"款式名", |
||||||
|
// zhuliao:"主料名", |
||||||
|
// fuliao:"辅料名", |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// id:5, |
||||||
|
// imgUrl:require("../assets/cloth001.png"), |
||||||
|
// title:"商品名商品名商品名商品名商品名", |
||||||
|
// price:'23500', |
||||||
|
// size:"款式名", |
||||||
|
// zhuliao:"主料名", |
||||||
|
// fuliao:"辅料名", |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// id:6, |
||||||
|
// imgUrl:require("../assets/cloth002.png"), |
||||||
|
// title:"商品名商品名商品名商品名商品名", |
||||||
|
// price:'23500', |
||||||
|
// size:"款式名", |
||||||
|
// zhuliao:"主料名", |
||||||
|
// fuliao:"辅料名", |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// id:7, |
||||||
|
// imgUrl:require("../assets/cloth004.png"), |
||||||
|
// title:"商品名商品名商品名商品名商品名", |
||||||
|
// price:'23500', |
||||||
|
// size:"款式名", |
||||||
|
// zhuliao:"主料名", |
||||||
|
// fuliao:"辅料名", |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// id:8, |
||||||
|
// imgUrl:require("../assets/cloth003.png"), |
||||||
|
// title:"商品名商品名商品名商品名商品名", |
||||||
|
// price:'23500', |
||||||
|
// size:"款式名", |
||||||
|
// zhuliao:"主料名", |
||||||
|
// fuliao:"辅料名", |
||||||
|
// } |
||||||
|
// ], |
||||||
|
collectList:[], |
||||||
|
recommendList:[ |
||||||
|
{ |
||||||
|
id:1, |
||||||
|
imgUrl:require("../assets/cloth003.png"), |
||||||
|
flag:false//是否点赞 |
||||||
|
}, |
||||||
|
{ |
||||||
|
id:2, |
||||||
|
imgUrl:require("../assets/cloth002.png"), |
||||||
|
flag:false |
||||||
|
}, |
||||||
|
{ |
||||||
|
id:3, |
||||||
|
imgUrl:require("../assets/cloth002.png"), |
||||||
|
flag:false |
||||||
|
}, |
||||||
|
{ |
||||||
|
id:4, |
||||||
|
imgUrl:require("../assets/cloth003.png"), |
||||||
|
flag:false |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
shouCang(item){ |
||||||
|
console.log(item) |
||||||
|
item.flag = !item.flag |
||||||
|
} |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
@import '../assets/common.css'; |
||||||
|
.collection{ |
||||||
|
width: 1114px;margin:0 auto; |
||||||
|
.collectList{ |
||||||
|
justify-content: flex-start; |
||||||
|
flex-wrap: wrap; |
||||||
|
.more{ |
||||||
|
width: 240px; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
.c_1B{ |
||||||
|
margin-bottom: 12px; |
||||||
|
} |
||||||
|
.f_14{ |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
} |
||||||
|
.item{ |
||||||
|
width: 240px; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 100px; |
||||||
|
margin-right: 30px; |
||||||
|
img{ |
||||||
|
width: 220px; |
||||||
|
height: 220px; |
||||||
|
} |
||||||
|
.title{ |
||||||
|
color: #1A1919; |
||||||
|
} |
||||||
|
.price{ |
||||||
|
color: #1A1919; |
||||||
|
margin-top: 9px; |
||||||
|
margin-bottom: 12px; |
||||||
|
} |
||||||
|
.c_75{ |
||||||
|
color: #757575; |
||||||
|
} |
||||||
|
.button1{ |
||||||
|
margin-top: 10px; |
||||||
|
margin-bottom: 24px; |
||||||
|
color: #1A1919; |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
.button2{ |
||||||
|
background-color: #000; |
||||||
|
padding: 8px 16px; |
||||||
|
transition: all 0.3s; |
||||||
|
&:hover{ |
||||||
|
opacity: 0.6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.else{ |
||||||
|
text-align: center; |
||||||
|
padding-top: 60px; |
||||||
|
margin-bottom: 150px; |
||||||
|
.c_fff{ |
||||||
|
width: 196px; |
||||||
|
height: 42px; |
||||||
|
line-height: 42px; |
||||||
|
background-color: #000; |
||||||
|
margin: 0 auto; |
||||||
|
transition: all 0.3s; |
||||||
|
&:hover{ |
||||||
|
opacity: 0.8; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.recommending{ |
||||||
|
border: 1px solid #E7E7E7; |
||||||
|
.title{ |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
.f_20{ |
||||||
|
color: #313131; |
||||||
|
} |
||||||
|
.f_14{ |
||||||
|
color: #4B4E4B; |
||||||
|
} |
||||||
|
} |
||||||
|
.item{ |
||||||
|
position: relative; |
||||||
|
width: 300px; |
||||||
|
border-right: 1px solid #E7E7E7; |
||||||
|
.iconfont{ |
||||||
|
position: absolute; |
||||||
|
top: 5%; |
||||||
|
right: 5%; |
||||||
|
} |
||||||
|
img{ |
||||||
|
width: 200px; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
Loading…
Reference in new issue