|
|
|
|
@ -1,5 +1,5 @@ |
|
|
|
|
<template> |
|
|
|
|
<!-- 首页--> |
|
|
|
|
<!-- 首页--> |
|
|
|
|
<div> |
|
|
|
|
<Header/> |
|
|
|
|
<div class="lunbotu"> |
|
|
|
|
@ -26,13 +26,18 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="itemDiv d-flex"> |
|
|
|
|
<div |
|
|
|
|
class="item d-flex" |
|
|
|
|
class="item" |
|
|
|
|
v-for="(item, index) in orderList" |
|
|
|
|
:key="index" |
|
|
|
|
|
|
|
|
|
> |
|
|
|
|
<img :src="item.imgUrl" alt="" /> |
|
|
|
|
<span class="title_3">{{ item.title }}</span> |
|
|
|
|
<span class="title_4">{{ item.desc }}</span> |
|
|
|
|
<router-link :to="item.url" class="d-flex"> |
|
|
|
|
<!-- <img :src="item.imgUrl" alt="" />--> |
|
|
|
|
<i :class="item.iconClass"></i> |
|
|
|
|
<span class="title_3">{{ item.title }}</span> |
|
|
|
|
<span class="title_4">{{ item.desc }}</span> |
|
|
|
|
</router-link> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -81,25 +86,25 @@ |
|
|
|
|
<div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px"> |
|
|
|
|
<a-icon type="right-circle" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="box" v-for="(item, index) in clothList2" :key="index"> |
|
|
|
|
<img :src="item.imgUrl" alt="" /> |
|
|
|
|
<p class="box1">CLOTHING NAM</p> |
|
|
|
|
<p class="box2">15分钟前定制</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="box" v-for="(item, index) in clothList2" :key="index"> |
|
|
|
|
<img :src="item.imgUrl" alt="" /> |
|
|
|
|
<p class="box1">CLOTHING NAM</p> |
|
|
|
|
<p class="box2">15分钟前定制</p> |
|
|
|
|
</div> |
|
|
|
|
</a-carousel> |
|
|
|
|
<div class="more d-flex" style="padding-top: 20px"> |
|
|
|
|
<a href="#">更多西装</a> |
|
|
|
|
<a href="/#/shopping/chengyi">更多推荐</a> |
|
|
|
|
<img src="./assets/youjiantou.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
<!-- <el-carousel type="card" arrow="always">--> |
|
|
|
|
<!-- <el-carousel-item v-for="(item, index) in clothList2" :key="index">--> |
|
|
|
|
<!-- <div class="box">--> |
|
|
|
|
<!-- <img :src="item.imgUrl" alt="" />--> |
|
|
|
|
<!-- <p class="box1">CLOTHING NAM</p>--> |
|
|
|
|
<!-- <p class="box2">15分钟前定制</p>--> |
|
|
|
|
<!-- </div>--> |
|
|
|
|
<!-- </el-carousel-item>--> |
|
|
|
|
<!-- </el-carousel>--> |
|
|
|
|
<!-- <el-carousel type="card" arrow="always">--> |
|
|
|
|
<!-- <el-carousel-item v-for="(item, index) in clothList2" :key="index">--> |
|
|
|
|
<!-- <div class="box">--> |
|
|
|
|
<!-- <img :src="item.imgUrl" alt="" />--> |
|
|
|
|
<!-- <p class="box1">CLOTHING NAM</p>--> |
|
|
|
|
<!-- <p class="box2">15分钟前定制</p>--> |
|
|
|
|
<!-- </div>--> |
|
|
|
|
<!-- </el-carousel-item>--> |
|
|
|
|
<!-- </el-carousel>--> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="section5"> |
|
|
|
|
@ -118,7 +123,7 @@ |
|
|
|
|
:key="index" |
|
|
|
|
> |
|
|
|
|
<img :src="item.imgUrl" alt="" /> |
|
|
|
|
<p> |
|
|
|
|
<p class="title_6"> |
|
|
|
|
{{ item.title1 }}<span class="line">|</span>{{ item.title1 }} |
|
|
|
|
</p> |
|
|
|
|
<div> |
|
|
|
|
@ -133,7 +138,7 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="more d-flex"> |
|
|
|
|
<router-link to="/shopping/clothType">更多西装</router-link> |
|
|
|
|
<router-link to="/shopping/clothType">更多男装</router-link> |
|
|
|
|
<img src="./assets/youjiantou.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
@ -160,7 +165,7 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="more d-flex"> |
|
|
|
|
<router-link to="/shopping/clothType">更多西装</router-link> |
|
|
|
|
<router-link to="/shopping/clothType">更多女装</router-link> |
|
|
|
|
<img src="./assets/youjiantou.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
@ -187,7 +192,7 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="more d-flex"> |
|
|
|
|
<router-link to="/shopping/clothType">更多西装</router-link> |
|
|
|
|
<router-link to="/shopping/clothType">更多童装</router-link> |
|
|
|
|
<img src="./assets/youjiantou.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
@ -200,6 +205,7 @@ |
|
|
|
|
<script> |
|
|
|
|
import Header from './components/Header/HeaderView' |
|
|
|
|
import Footer from './components/Footer/FooterView' |
|
|
|
|
import { httpAction, getAction } from '@/api/manage' |
|
|
|
|
export default { |
|
|
|
|
name: "shopHome", |
|
|
|
|
components: { Header ,Footer}, |
|
|
|
|
@ -207,6 +213,9 @@ |
|
|
|
|
return { |
|
|
|
|
vh: 0, |
|
|
|
|
activeName: "first", |
|
|
|
|
url: { |
|
|
|
|
zxdz: "/zygoods/zyGoods/zxdz", |
|
|
|
|
}, |
|
|
|
|
// 轮播图数据 |
|
|
|
|
imgList: [ |
|
|
|
|
require("./assets/bg.png"), |
|
|
|
|
@ -216,25 +225,36 @@ |
|
|
|
|
orderList: [ |
|
|
|
|
{ |
|
|
|
|
id: 1, |
|
|
|
|
imgUrl: require("./assets/order01.png"), |
|
|
|
|
url:'/shopping/clothType', |
|
|
|
|
// imgUrl: require("./assets/order01.png"), |
|
|
|
|
iconClass:'iconfont icon-biaoqian1', |
|
|
|
|
title: "服装类型", |
|
|
|
|
desc: "丰富款式 多样呈现", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 2, |
|
|
|
|
imgUrl: require("./assets/order02.png"), |
|
|
|
|
url:'/shopping/sirendingzhi', |
|
|
|
|
// imgUrl: require("./assets/order02.png"), |
|
|
|
|
iconClass:'iconfont icon-dingzhi', |
|
|
|
|
|
|
|
|
|
title: "私人订制", |
|
|
|
|
desc: "丰富款式 多样呈现", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 3, |
|
|
|
|
imgUrl: require("./assets/order03.png"), |
|
|
|
|
url:'/shopping/chengyi', |
|
|
|
|
// imgUrl: require("./assets/order03.png"), |
|
|
|
|
iconClass:'iconfont icon-xizhuang1', |
|
|
|
|
|
|
|
|
|
title: "成衣推荐", |
|
|
|
|
desc: "丰富款式 多样呈现", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 4, |
|
|
|
|
imgUrl: require("./assets/order04.png"), |
|
|
|
|
url:'/shopping/news', |
|
|
|
|
// imgUrl: require("./assets/order04.png"), |
|
|
|
|
iconClass:'iconfont icon-bijijilu', |
|
|
|
|
|
|
|
|
|
title: "关于我们", |
|
|
|
|
desc: "丰富款式 多样呈现", |
|
|
|
|
}, |
|
|
|
|
@ -245,7 +265,7 @@ |
|
|
|
|
id: 1, |
|
|
|
|
imgUrl: require("./assets/cloth01.png"), |
|
|
|
|
title1: "西装定制", |
|
|
|
|
title2: "立领高端西装", |
|
|
|
|
title2: "立领高端西装立领高端西装立领高端西装", |
|
|
|
|
price: "1xx0.00", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
@ -608,6 +628,14 @@ |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.vh = window.screen.availHeight - 100; |
|
|
|
|
getAction(this.url.zxdz).then((res) => { |
|
|
|
|
if (res.success) { |
|
|
|
|
console.log(res.result); |
|
|
|
|
this.clothList = res.result; |
|
|
|
|
}else{ |
|
|
|
|
this.$message.error(res.message); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
@ -730,15 +758,28 @@ |
|
|
|
|
.section2 .itemDiv { |
|
|
|
|
justify-content: space-around; |
|
|
|
|
} |
|
|
|
|
.section2 .itemDiv .item { |
|
|
|
|
.section2 .itemDiv .item a{ |
|
|
|
|
flex-direction: column; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
width: 336px; |
|
|
|
|
height: 336px; |
|
|
|
|
color: #333; |
|
|
|
|
transition: all 0.2s; |
|
|
|
|
} |
|
|
|
|
.section2 .itemDiv .item:hover{ |
|
|
|
|
.section2 .itemDiv .item a i{ |
|
|
|
|
font-size: 100px; |
|
|
|
|
color: #746957; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
.section2 .itemDiv .item a:hover i{ |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
.section2 .itemDiv .item a:hover .title_3,.section2 .itemDiv .item a:hover .title_4{ |
|
|
|
|
color: #746957; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
.section2 .itemDiv .item a:hover{ |
|
|
|
|
background: #EEE6D9; |
|
|
|
|
border: 1px dashed #919190; |
|
|
|
|
} |
|
|
|
|
@ -776,6 +817,9 @@ |
|
|
|
|
} |
|
|
|
|
.section3 .itemDiv .item .titleDiv { |
|
|
|
|
font-size: 30px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
.section3 .itemDiv .item .titleDiv span { |
|
|
|
|
margin-left: 10px; |
|
|
|
|
@ -835,9 +879,13 @@ |
|
|
|
|
} |
|
|
|
|
.section5 .tabs .jz .item p { |
|
|
|
|
width: 100%; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
padding-left: 28px; |
|
|
|
|
padding-right: 28px; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-align: left; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
.section5 .tabs .jz .item p .line { |
|
|
|
|
margin-left: 8px; |
|
|
|
|
@ -862,4 +910,4 @@ |
|
|
|
|
color: rgba(116, 105, 87, 0.6); |
|
|
|
|
} |
|
|
|
|
/* -----------------------第五部分完成----------------------------------------------------------------------------------------- */ |
|
|
|
|
</style> |
|
|
|
|
</style> |
|
|
|
|
|
