商城首页样式修改

zhc4dev
暖暖 2 years ago
parent ed32bbdeff
commit 26b4b1f040
  1. 135
      ant-design-vue-jeecg/src/views/shopping/shopHome.vue

@ -114,32 +114,7 @@
<div class="jz d-flex">
<div
class="item d-flex"
v-for="(item, index) in nanzhuang1"
:key="index"
>
<img :src="item.imgUrl" alt="" />
<p>
{{ item.title1 }}<span class="line">|</span>{{ item.title1 }}
</p>
<div>
<el-tag type="warning" size="small">{{ item.tag1 }}</el-tag
><el-tag type="warning" size="small">{{ item.tag2 }}</el-tag>
</div>
<p class="priceDiv d-flex">
<span class="f_18"
><span class="f_24">{{ item.price }}</span></span
><span class="f_12">已售{{ item.sold }}</span>
</p>
</div>
</div>
<div class="more d-flex">
<router-link to="/shopping/clothType">更多衬衫</router-link>
<img src="./assets/youjiantou.png" alt="" />
</div>
<div class="jz d-flex">
<div
class="item d-flex"
v-for="(item, index) in nanzhuang2"
v-for="(item, index) in nanzhuang"
:key="index"
>
<img :src="item.imgUrl" alt="" />
@ -166,32 +141,7 @@
<div class="jz d-flex">
<div
class="item d-flex"
v-for="(item, index) in nvzhuang1"
:key="index"
>
<img :src="item.imgUrl" alt="" />
<p>
{{ item.title1 }}<span class="line">|</span>{{ item.title1 }}
</p>
<div>
<el-tag type="warning" size="small">{{ item.tag1 }}</el-tag
><el-tag type="warning" size="small">{{ item.tag2 }}</el-tag>
</div>
<p class="priceDiv d-flex">
<span class="f_18"
><span class="f_24">{{ item.price }}</span></span
><span class="f_12">已售{{ item.sold }}</span>
</p>
</div>
</div>
<div class="more d-flex">
<router-link to="/shopping/clothType">更多衬衫</router-link>
<img src="./assets/youjiantou.png" alt="" />
</div>
<div class="jz d-flex">
<div
class="item d-flex"
v-for="(item, index) in nvzhuang1"
v-for="(item, index) in nvzhuang"
:key="index"
>
<img :src="item.imgUrl" alt="" />
@ -218,32 +168,7 @@
<div class="jz d-flex">
<div
class="item d-flex"
v-for="(item, index) in tongzhuang1"
:key="index"
>
<img :src="item.imgUrl" alt="" />
<p>
{{ item.title1 }}<span class="line">|</span>{{ item.title1 }}
</p>
<div>
<el-tag type="warning" size="small">{{ item.tag1 }}</el-tag
><el-tag type="warning" size="small">{{ item.tag2 }}</el-tag>
</div>
<p class="priceDiv d-flex">
<span class="f_18"
><span class="f_24">{{ item.price }}</span></span
><span class="f_12">已售{{ item.sold }}</span>
</p>
</div>
</div>
<div class="more d-flex">
<router-link to="/shopping/clothType">更多衬衫</router-link>
<img src="./assets/youjiantou.png" alt="" />
</div>
<div class="jz d-flex">
<div
class="item d-flex"
v-for="(item, index) in tongzhuang2"
v-for="(item, index) in tongzhuang"
:key="index"
>
<img :src="item.imgUrl" alt="" />
@ -373,7 +298,7 @@
time: 15,
},
],
nanzhuang1: [
nanzhuang: [
{
id: 1,
imgUrl: require("./assets/cloth002.png"),
@ -424,10 +349,8 @@
price: "1xx0.00",
sold: 200,
},
],
nanzhuang2: [
{
id: 1,
id: 6,
imgUrl: require("./assets/cloth002.png"),
title1: "男装",
title2: "衬衫",
@ -437,7 +360,7 @@
sold: 200,
},
{
id: 2,
id: 7,
imgUrl: require("./assets/cloth002.png"),
title1: "男装",
title2: "衬衫",
@ -447,7 +370,7 @@
sold: 200,
},
{
id: 3,
id: 8,
imgUrl: require("./assets/cloth002.png"),
title1: "男装",
title2: "衬衫",
@ -457,7 +380,7 @@
sold: 200,
},
{
id: 4,
id: 9,
imgUrl: require("./assets/cloth002.png"),
title1: "男装",
title2: "衬衫",
@ -467,7 +390,7 @@
sold: 200,
},
{
id: 5,
id: 10,
imgUrl: require("./assets/cloth002.png"),
title1: "男装",
title2: "衬衫",
@ -477,7 +400,7 @@
sold: 200,
},
],
nvzhuang1: [
nvzhuang: [
{
id: 1,
imgUrl: require("./assets/cloth002.png"),
@ -528,10 +451,8 @@
price: "1xx0.00",
sold: 200,
},
],
nvzhuang2: [
{
id: 1,
id: 6,
imgUrl: require("./assets/cloth002.png"),
title1: "女装",
title2: "衬衫",
@ -541,7 +462,7 @@
sold: 200,
},
{
id: 2,
id: 7,
imgUrl: require("./assets/cloth002.png"),
title1: "女装",
title2: "衬衫",
@ -551,7 +472,7 @@
sold: 200,
},
{
id: 3,
id: 8,
imgUrl: require("./assets/cloth002.png"),
title1: "女装",
title2: "衬衫",
@ -561,7 +482,7 @@
sold: 200,
},
{
id: 4,
id: 9,
imgUrl: require("./assets/cloth002.png"),
title1: "女装",
title2: "衬衫",
@ -571,7 +492,7 @@
sold: 200,
},
{
id: 5,
id: 10,
imgUrl: require("./assets/cloth002.png"),
title1: "女装",
title2: "衬衫",
@ -581,7 +502,7 @@
sold: 200,
},
],
tongzhuang1: [
tongzhuang: [
{
id: 1,
imgUrl: require("./assets/cloth002.png"),
@ -632,10 +553,8 @@
price: "1xx0.00",
sold: 200,
},
],
tongzhuang2: [
{
id: 1,
id: 6,
imgUrl: require("./assets/cloth002.png"),
title1: "童装",
title2: "衬衫",
@ -645,7 +564,7 @@
sold: 200,
},
{
id: 2,
id: 7,
imgUrl: require("./assets/cloth002.png"),
title1: "童装",
title2: "衬衫",
@ -655,7 +574,7 @@
sold: 200,
},
{
id: 3,
id: 8,
imgUrl: require("./assets/cloth002.png"),
title1: "童装",
title2: "衬衫",
@ -665,7 +584,7 @@
sold: 200,
},
{
id: 4,
id: 9,
imgUrl: require("./assets/cloth002.png"),
title1: "童装",
title2: "衬衫",
@ -675,7 +594,7 @@
sold: 200,
},
{
id: 5,
id: 10,
imgUrl: require("./assets/cloth002.png"),
title1: "童装",
title2: "衬衫",
@ -814,6 +733,14 @@
.section2 .itemDiv .item {
flex-direction: column;
align-items: center;
justify-content: center;
width: 336px;
height: 336px;
transition: all 0.2s;
}
.section2 .itemDiv .item:hover{
background: #EEE6D9;
border: 1px dashed #919190;
}
.section2 .itemDiv .item .title_3 {
margin: 20px 0;
@ -883,7 +810,7 @@
}
.section5 .more {
margin-bottom: 50px;
margin-top: 50px;
/*margin-top: 50px;*/
}
.section5 .tabs >>> .el-tabs__item.is-top {
font-size: 26px;
@ -893,6 +820,7 @@
}
.section5 .tabs .jz {
justify-content: space-between;
flex-wrap: wrap;
}
.section5 .tabs .jz .item {
background-color: #fff;
@ -900,6 +828,7 @@
flex-direction: column;
align-items: center;
padding-bottom: 30px;
margin-bottom: 30px;
}
.section5 .tabs .jz .item img {
width: 80%;

Loading…
Cancel
Save