|
|
|
@ -0,0 +1,256 @@ |
|
|
|
<template> |
|
|
|
<div class="container goods"> |
|
|
|
<div class="top f-bb-gray"> |
|
|
|
<img src="../assets/images/icon/arrow-left.png"/>商品分类 |
|
|
|
</div> |
|
|
|
<div class="content"> |
|
|
|
<div class="left"> |
|
|
|
<ul> |
|
|
|
<li class="on"> |
|
|
|
<span> |
|
|
|
深度保洁 |
|
|
|
<img src="../assets/images/icon/hot.png" class="i-hot" /> |
|
|
|
</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span> |
|
|
|
家电清洗 |
|
|
|
<img src="../assets/images/icon/hot.png" class="i-hot" /> |
|
|
|
</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span> |
|
|
|
日常保洁 |
|
|
|
<img src="../assets/images/icon/new.png" class="i-new" /> |
|
|
|
</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span> |
|
|
|
新居开荒 |
|
|
|
<img src="../assets/images/icon/hot.png" class="i-hot" /> |
|
|
|
</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span> |
|
|
|
精细擦窗 |
|
|
|
<img src="../assets/images/icon/hot.png" class="i-hot" /> |
|
|
|
</span> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<p class="title">深度清洁</p> |
|
|
|
<div class="f-relative f-all-1px"> |
|
|
|
<div class="item f-flex"> |
|
|
|
<img src="../assets/images/icon/wx-icon.png" class="thumb"/> |
|
|
|
<div class="info f-flex"> |
|
|
|
<div> |
|
|
|
<p class="title f-ellipsis-1">高端保洁铂金月卡</p> |
|
|
|
<p class="rule">4次×4小时全屋高端保洁</p> |
|
|
|
<span class="full">新用户立减300元</span> |
|
|
|
</div> |
|
|
|
<div class="f-flex"> |
|
|
|
<p class="price"> |
|
|
|
<span><span class="money">￥</span>799</span> |
|
|
|
</p> |
|
|
|
<p class="cost">￥999</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="f-relative f-all-1px"> |
|
|
|
<div class="item f-flex"> |
|
|
|
<img src="../assets/images/icon/wx-icon.png" class="thumb"/> |
|
|
|
<div class="info f-flex"> |
|
|
|
<div> |
|
|
|
<p class="title f-ellipsis-1">高端保洁铂金月卡</p> |
|
|
|
<p class="rule">4次×4小时全屋高端保洁</p> |
|
|
|
<span class="full">新用户立减300元</span> |
|
|
|
</div> |
|
|
|
<div class="f-flex"> |
|
|
|
<p class="price"> |
|
|
|
<span><span class="money">￥</span>799</span> |
|
|
|
</p> |
|
|
|
<p class="cost">￥999</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<p class="title">家电清洁</p> |
|
|
|
<div class="f-relative f-all-1px"> |
|
|
|
<div class="item f-flex"> |
|
|
|
<img src="../assets/images/icon/wx-icon.png" class="thumb"/> |
|
|
|
<div class="info f-flex"> |
|
|
|
<div> |
|
|
|
<p class="title f-ellipsis-1">高端保洁铂金月卡</p> |
|
|
|
<p class="rule">4次×4小时全屋高端保洁</p> |
|
|
|
<span class="full">新用户立减300元</span> |
|
|
|
</div> |
|
|
|
<div class="f-flex"> |
|
|
|
<p class="price"> |
|
|
|
<span><span class="money">￥</span>799</span> |
|
|
|
</p> |
|
|
|
<p class="cost">￥999</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="f-relative f-all-1px"> |
|
|
|
<div class="item f-flex"> |
|
|
|
<img src="../assets/images/icon/wx-icon.png" class="thumb"/> |
|
|
|
<div class="info f-flex"> |
|
|
|
<div> |
|
|
|
<p class="title f-ellipsis-1">高端保洁铂金月卡</p> |
|
|
|
<p class="rule">4次×4小时全屋高端保洁</p> |
|
|
|
<span class="full">新用户立减300元</span> |
|
|
|
</div> |
|
|
|
<div class="f-flex"> |
|
|
|
<p class="price"> |
|
|
|
<span><span class="money">￥</span>799</span> |
|
|
|
</p> |
|
|
|
<p class="cost">￥999</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
export default { |
|
|
|
name: 'goodsClassify', |
|
|
|
data() { |
|
|
|
return {} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.goods { |
|
|
|
background-color: #fff; |
|
|
|
.top { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: 0.9rem; |
|
|
|
line-height: 0.9rem; |
|
|
|
text-align: center; |
|
|
|
font-size: 0.36rem; |
|
|
|
color: #249e6c; |
|
|
|
img { |
|
|
|
position: absolute; |
|
|
|
width: 0.2rem; |
|
|
|
height: 0.35rem; |
|
|
|
top: 50%; |
|
|
|
left: 0.4rem; |
|
|
|
margin-top: -0.17rem; |
|
|
|
} |
|
|
|
} |
|
|
|
.content { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
height: calc(100vh - 0.9rem); |
|
|
|
.left { |
|
|
|
width: 1.74rem; |
|
|
|
background-color: #F3F3F3; |
|
|
|
overflow-y: auto; |
|
|
|
overflow-x: hidden; |
|
|
|
ul { |
|
|
|
li { |
|
|
|
width: 1.74rem; |
|
|
|
height: 1.1rem; |
|
|
|
line-height: 1.1rem; |
|
|
|
text-align: center; |
|
|
|
font-size: 0.28rem; |
|
|
|
color: #888; |
|
|
|
} |
|
|
|
.on { |
|
|
|
background-color: #fff; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
span { |
|
|
|
position: relative; |
|
|
|
img { |
|
|
|
position: absolute; |
|
|
|
font-size: 10px; |
|
|
|
top: -0.1rem; |
|
|
|
right: -0.2rem; |
|
|
|
} |
|
|
|
.i-hot { |
|
|
|
width: 0.24rem; |
|
|
|
height: 0.1rem; |
|
|
|
} |
|
|
|
.i-new { |
|
|
|
width: 0.24rem; |
|
|
|
height: 0.08rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.right { |
|
|
|
overflow-y: auto; |
|
|
|
overflow-x: hidden; |
|
|
|
padding: 0.2rem 0.22rem 0; |
|
|
|
width: calc(100% - 1.74rem); |
|
|
|
box-sizing: border-box; |
|
|
|
.title { |
|
|
|
padding: 0.12rem 0 0.12rem; |
|
|
|
font-size: 0.24rem; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
.item { |
|
|
|
position: relative; |
|
|
|
padding: 0.16rem; |
|
|
|
z-index: 1; |
|
|
|
height: 1.87rem; |
|
|
|
box-sizing: border-box; |
|
|
|
margin-bottom: 0.2rem; |
|
|
|
.thumb { |
|
|
|
width: 1.54rem; |
|
|
|
height: 1.54rem; |
|
|
|
} |
|
|
|
.info { |
|
|
|
margin-left: 0.15rem; |
|
|
|
flex: 1; |
|
|
|
height: 100%; |
|
|
|
font-size: 0; |
|
|
|
flex-direction: column; |
|
|
|
align-items: flex-start; |
|
|
|
justify-content: space-between; |
|
|
|
.title { |
|
|
|
font-size: 0.3rem; |
|
|
|
color: #333; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
.rule { |
|
|
|
font-size: 0.22rem; |
|
|
|
color: #999; |
|
|
|
padding: 0.1rem 0 0.16rem; |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
.full { |
|
|
|
font-size: 0.18rem; |
|
|
|
background-color: #FFF2E5; |
|
|
|
color: #F4A353; |
|
|
|
padding: 0 0.1rem; |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
.price { |
|
|
|
.money { |
|
|
|
font-size: 0.22rem; |
|
|
|
} |
|
|
|
color: #249E6C; |
|
|
|
font-size: 0.34rem; |
|
|
|
} |
|
|
|
.cost { |
|
|
|
color: #BBBBBB; |
|
|
|
font-size: 0.24rem; |
|
|
|
margin-left: 0.18rem; |
|
|
|
text-decoration: line-through; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
wenghaocan
7 years ago
