yu
/
CostumingPlatform
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商城首页样式修改

Browse Source
zhc4dev
暖暖 2 years ago
parent ed32bbdeff
commit 26b4b1f040
1 changed files with 32 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 135
      ant-design-vue-jeecg/src/views/shopping/shopHome.vue

135
ant-design-vue-jeecg/src/views/shopping/shopHome.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save