商城首页

master
暖暖 1 year ago
parent 5010af7261
commit a2d473190f
  1. 75
      ant-design-vue-jeecg/src/views/shopping/shopHome.vue

@ -42,31 +42,32 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section3"> <!-- 最新定制-->
<div class="jz"> <!-- <div class="section3">-->
<div class="titleCont"> <!-- <div class="jz">-->
<p class="title">最新定制</p> <!-- <div class="titleCont">-->
<div class="orange"></div> <!-- <p class="title">最新定制</p>-->
<p class="desc">Latest customization</p> <!-- <div class="orange"></div>-->
</div> <!-- <p class="desc">Latest customization</p>-->
<div class="itemDiv d-flex"> <!-- </div>-->
<div class="item" v-for="(item, index) in clothList" :key="index"> <!-- <div class="itemDiv d-flex">-->
<img :src="item.imgUrl" alt="" /> <!-- <div class="item" v-for="(item, index) in clothList" :key="index">-->
<p class="titleDiv"> <!-- <img :src="item.imgUrl" alt="" />-->
{{ item.title1 }}<span>|</span>{{ item.title2 }} <!-- <p class="titleDiv">-->
</p> <!-- {{ item.title1 }}<span>|</span>{{ item.title2 }}-->
<p class="price"> <!-- </p>-->
价格¥<span>{{ item.price }}</span <!-- <p class="price">-->
> <!-- 价格¥<span>{{ item.price }}</span-->
</p> <!-- >-->
</div> <!-- </p>-->
</div> <!-- </div>-->
<div class="more d-flex"> <!-- </div>-->
<a href="#">了解更多</a> <!-- <div class="more d-flex">-->
<img src="./assets/youjiantou.png" alt="" /> <!-- <a href="#">了解更多</a>-->
</div> <!-- <img src="./assets/youjiantou.png" alt="" />-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<!-- </div>-->
<div class="section4"> <div class="section4">
<div class="jz"> <div class="jz">
<div class="titleCont d-flex"> <div class="titleCont d-flex">
@ -161,7 +162,7 @@
@click="tjspxq(item.id,item.title2)" @click="tjspxq(item.id,item.title2)"
> >
<img :src="item.imgUrl" alt="" /> <img :src="item.imgUrl" alt="" />
<p> <p class="title_6">
{{ item.title1 }}<span class="line">|</span>{{ item.title2 }} {{ item.title1 }}<span class="line">|</span>{{ item.title2 }}
</p> </p>
<div> <div>
@ -189,7 +190,7 @@
@click="tjspxq(item.id,item.title2)" @click="tjspxq(item.id,item.title2)"
> >
<img :src="item.imgUrl" alt="" /> <img :src="item.imgUrl" alt="" />
<p> <p class="title_6">
{{ item.title1 }}<span class="line">|</span>{{ item.title2 }} {{ item.title1 }}<span class="line">|</span>{{ item.title2 }}
</p> </p>
<div> <div>
@ -948,23 +949,31 @@
min-width: 270px; min-width: 270px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-bottom: 30px; padding-bottom: 10px;
padding-top: 10px;
margin-bottom: 30px; margin-bottom: 30px;
margin-right: 11px; margin-right: 11px;
} }
.section5 .tabs .jz .item img { .section5 .tabs .jz .item img {
width: 80%; width: 90%;
height: 309px;
object-fit: cover;
} }
.section5 .tabs .jz .item p { .section5 .tabs .jz .item p {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-left: 28px; padding: 15px;
padding-right: 28px;
overflow: hidden; overflow: hidden;
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
} }
.section5 .tabs .jz .item p.title_6{
border-bottom: 1px dashed rgba(116,105,87,0.3) ;
color: #333;
font-size: 20px;
padding: 20px;
}
.section5 .tabs .jz .item p .line { .section5 .tabs .jz .item p .line {
margin-left: 8px; margin-left: 8px;
margin-right: 8px; margin-right: 8px;
@ -973,8 +982,8 @@
width: 100%; width: 100%;
padding-left: 28px; padding-left: 28px;
box-sizing: border-box; box-sizing: border-box;
margin-top: 30px; /*margin-top: 30px;*/
margin-bottom: 20px; /*margin-bottom: 20px;*/
} }
.section5 .tabs .jz .item div .el-tag { .section5 .tabs .jz .item div .el-tag {
margin-right: 10px; margin-right: 10px;

Loading…
Cancel
Save