服装智能制造软件平台V3.0
http://182.92.169.222/hhxy/#/user/login
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
965 lines
27 KiB
965 lines
27 KiB
<template> |
|
<!-- 首页--> |
|
<div> |
|
<Header/> |
|
<div class="lunbotu"> |
|
<el-carousel :height="vh + 'px'" arrow="always"> |
|
<el-carousel-item v-for="(item, index) in imgList" :key="index"> |
|
<div> |
|
<img :src="item" alt="" /> |
|
<p class="total"> |
|
0{{ index + 1 }}<span>/0{{ imgList.length }}</span> |
|
</p> |
|
</div> |
|
</el-carousel-item> |
|
</el-carousel> |
|
<div class="title"> |
|
<p>工艺用料</p> |
|
<p>品质甄选</p> |
|
</div> |
|
</div> |
|
<div class="section2"> |
|
<div class="jz"> |
|
<div class="title"> |
|
<p class="title_1">一人一版 量体定制</p> |
|
<p class="title_2">made-to-measure</p> |
|
</div> |
|
<div class="itemDiv d-flex"> |
|
<div |
|
class="item" |
|
v-for="(item, index) in orderList" |
|
:key="index" |
|
|
|
> |
|
<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> |
|
</div> |
|
<div class="section3"> |
|
<div class="jz"> |
|
<div class="titleCont"> |
|
<p class="title">最新定制</p> |
|
<div class="orange"></div> |
|
<p class="desc">Latest customization</p> |
|
</div> |
|
<div class="itemDiv d-flex"> |
|
<div class="item" v-for="(item, index) in clothList" :key="index"> |
|
<img :src="item.imgUrl" alt="" /> |
|
<p class="titleDiv"> |
|
{{ item.title1 }}<span>|</span>{{ item.title2 }} |
|
</p> |
|
<p class="price"> |
|
价格：¥<span>{{ item.price }}</span |
|
>元 |
|
</p> |
|
</div> |
|
</div> |
|
<div class="more d-flex"> |
|
<a href="#">了解更多</a> |
|
<img src="./assets/youjiantou.png" alt="" /> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="section4"> |
|
<div class="jz"> |
|
<div class="titleCont d-flex"> |
|
<p class="title">推荐商品</p> |
|
<div class="orange"></div> |
|
<p class="desc">Recommending Commodities</p> |
|
</div> |
|
<a-carousel arrows :slides-to-show="3" :slides-to-scroll="1"> |
|
<div |
|
slot="prevArrow" |
|
slot-scope="props" |
|
class="custom-slick-arrow" |
|
style="left: 10px;zIndex: 1" |
|
> |
|
<a-icon type="left-circle" /> |
|
</div> |
|
<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" @click="tjspxq1(item.id,item.title)"> |
|
<img :src="item.imgUrl" alt="" /> |
|
<p class="box1">{{item.title}}</p> |
|
<p class="box2">{{item.time}}</p> |
|
</div> |
|
</a-carousel> |
|
<div class="more d-flex" style="padding-top: 20px"> |
|
<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>--> |
|
</div> |
|
</div> |
|
<div class="section5"> |
|
<div class="jz"> |
|
<div class="titleCont d-flex"> |
|
<p class="title">服装类型</p> |
|
<div class="orange"></div> |
|
<p class="desc">Clothing type</p> |
|
</div> |
|
<el-tabs v-model="activeName" class="tabs"> |
|
<el-tab-pane label="男装" name="first"> |
|
<div class="jz d-flex"> |
|
<div |
|
class="item d-flex" |
|
v-for="(item, index) in nanzhuang" |
|
:key="index" |
|
@click="tjspxq(item.id,item.title2)" |
|
> |
|
<img :src="item.imgUrl" alt="" /> |
|
<p class="title_6"> |
|
{{ item.title1 }}<span class="line">|</span>{{ item.title2 }} |
|
</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> |
|
</el-tab-pane> |
|
<el-tab-pane label="女装" name="second"> |
|
<div class="jz d-flex"> |
|
<div |
|
class="item d-flex" |
|
v-for="(item, index) in nvzhuang" |
|
:key="index" |
|
@click="tjspxq(item.id,item.title2)" |
|
> |
|
<img :src="item.imgUrl" alt="" /> |
|
<p> |
|
{{ item.title1 }}<span class="line">|</span>{{ item.title2 }} |
|
</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> |
|
</el-tab-pane> |
|
<el-tab-pane label="童装" name="third"> |
|
<div class="jz d-flex"> |
|
<div |
|
class="item d-flex" |
|
v-for="(item, index) in tongzhuang" |
|
:key="index" |
|
@click="tjspxq(item.id,item.title2)" |
|
> |
|
<img :src="item.imgUrl" alt="" /> |
|
<p> |
|
{{ item.title1 }}<span class="line">|</span>{{ item.title2 }} |
|
</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> |
|
</el-tab-pane> |
|
</el-tabs> |
|
</div> |
|
</div> |
|
<Footer></Footer> |
|
</div> |
|
</template> |
|
<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}, |
|
data() { |
|
return { |
|
vh: 0, |
|
activeName: "first", |
|
url: { |
|
zxdz: "/zygoods/zyGoods/zxdz", |
|
tjsp: "/zygoods/zyGoods/tjsp", |
|
fzlx: "/zygoods/zyGoods/fzlx", |
|
tjspxq: "/zygoods/zyGoods/tjspxq", |
|
}, |
|
// 轮播图数据 |
|
imgList: [ |
|
require("./assets/bg.png"), |
|
require("./assets/bg02.png"), |
|
require("./assets/bg03.png"), |
|
], |
|
orderList: [ |
|
{ |
|
id: 1, |
|
url:'/shopping/clothType', |
|
// imgUrl: require("./assets/order01.png"), |
|
iconClass:'iconfont icon-biaoqian1', |
|
title: "服装类型", |
|
desc: "丰富款式 多样呈现", |
|
}, |
|
{ |
|
id: 2, |
|
url:'/shopping/sirendingzhi', |
|
// imgUrl: require("./assets/order02.png"), |
|
iconClass:'iconfont icon-dingzhi', |
|
|
|
title: "私人订制", |
|
desc: "丰富款式 多样呈现", |
|
}, |
|
{ |
|
id: 3, |
|
url:'/shopping/chengyi', |
|
// imgUrl: require("./assets/order03.png"), |
|
iconClass:'iconfont icon-xizhuang1', |
|
|
|
title: "成衣推荐", |
|
desc: "丰富款式 多样呈现", |
|
}, |
|
{ |
|
id: 4, |
|
url:'/shopping/news', |
|
// imgUrl: require("./assets/order04.png"), |
|
iconClass:'iconfont icon-bijijilu', |
|
|
|
title: "关于我们", |
|
desc: "丰富款式 多样呈现", |
|
}, |
|
], |
|
// 最新定制数据 |
|
clothList: [ |
|
{ |
|
id: 1, |
|
imgUrl: require("./assets/cloth01.png"), |
|
title1: "西装定制", |
|
title2: "立领高端西装立领高端西装立领高端西装", |
|
price: "1xx0.00", |
|
}, |
|
{ |
|
id: 2, |
|
imgUrl: require("./assets/cloth02.png"), |
|
title1: "西装定制", |
|
title2: "立领高端西装", |
|
price: "1xx0.00", |
|
}, |
|
{ |
|
id: 3, |
|
imgUrl: require("./assets/cloth01.png"), |
|
title1: "西装定制", |
|
title2: "立领高端西装", |
|
price: "1xx0.00", |
|
}, |
|
// }, |
|
// { |
|
// id: 4, |
|
// imgUrl: require("./assets/cloth02.png"), |
|
// title1: "西装定制", |
|
// title2: "立领高端西装", |
|
// price: "1xx0.00", |
|
// } |
|
], |
|
// 推荐商品数据 |
|
clothList2: [ |
|
{ |
|
id: 1, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title: "CLOTHING NAM", |
|
time: 15, |
|
}, |
|
{ |
|
id: 2, |
|
imgUrl: require("./assets/cloth003.png"), |
|
title: "CLOTHING NAM", |
|
time: 15, |
|
}, |
|
{ |
|
id: 3, |
|
imgUrl: require("./assets/cloth004.png"), |
|
title: "CLOTHING NAM", |
|
time: 15, |
|
}, |
|
{ |
|
id: 4, |
|
imgUrl: require("./assets/cloth005.png"), |
|
title: "CLOTHING NAM", |
|
time: 15, |
|
}, |
|
], |
|
nanzhuang: [ |
|
{ |
|
id: 1, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "男装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 2, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "男装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 3, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "男装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 4, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "男装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 5, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "男装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 6, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "男装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 7, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "男装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 8, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "男装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 9, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "男装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 10, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "男装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
], |
|
nvzhuang: [ |
|
{ |
|
id: 1, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "女装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 2, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "女装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 3, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "女装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 4, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "女装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 5, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "女装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 6, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "女装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 7, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "女装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 8, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "女装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 9, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "女装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 10, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "女装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
], |
|
tongzhuang: [ |
|
{ |
|
id: 1, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "童装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 2, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "童装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 3, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "童装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 4, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "童装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 5, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "童装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 6, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "童装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 7, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "童装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 8, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "童装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 9, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "童装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
{ |
|
id: 10, |
|
imgUrl: require("./assets/cloth002.png"), |
|
title1: "童装", |
|
title2: "衬衫", |
|
tag1: "标签一", |
|
tag2: "标签二", |
|
price: "1xx0.00", |
|
sold: 200, |
|
}, |
|
], |
|
}; |
|
}, |
|
mounted() { |
|
this.vh = window.screen.availHeight - 100; |
|
getAction(this.url.zxdz).then((res) => { |
|
if (res.success) { |
|
this.clothList = res.result; |
|
}else{ |
|
this.$message.error(res.message); |
|
} |
|
}); |
|
getAction(this.url.tjsp).then((res) => { |
|
if (res.success) { |
|
this.clothList2 = res.result; |
|
}else{ |
|
this.$message.error(res.message); |
|
} |
|
}); |
|
getAction(this.url.fzlx).then((res) => { |
|
if (res.success) { |
|
console.log(res.result) |
|
this.nanzhuang = res.result.nz; |
|
this.nvzhuang = res.result.nvz; |
|
this.tongzhuang = res.result.tz; |
|
}else{ |
|
this.$message.error(res.message); |
|
} |
|
}) |
|
}, |
|
methods:{ |
|
tjspxq(id,title){ |
|
getAction(this.url.tjspxq,{id:id}).then((res) => { |
|
if (res.success) { |
|
console.log(res.result) |
|
this.$router.push({ |
|
path: "/shopping/ClothDetail", |
|
query: { id: id, title: title ,name:res.result.name,parentName:res.result.parentName}, |
|
}); |
|
}else{ |
|
this.$message.error(res.message); |
|
} |
|
}) |
|
}, |
|
tjspxq1(id,title){ |
|
getAction(this.url.tjspxq,{id:id}).then((res) => { |
|
if (res.success) { |
|
console.log(res.result) |
|
this.$router.push({ |
|
path: "/shopping/ClothDetail1", |
|
query: { id: id, title: title ,name:res.result.name,parentName:res.result.parentName}, |
|
}); |
|
}else{ |
|
this.$message.error(res.message); |
|
} |
|
}) |
|
}, |
|
}, |
|
} |
|
</script> |
|
<style scoped> |
|
@import './assets/common.css'; |
|
</style> |
|
<style scoped> |
|
.box { |
|
position: relative; |
|
} |
|
.img { |
|
position: absolute; |
|
top: 0; |
|
} |
|
.box1 { |
|
position: absolute; |
|
bottom: 20%; |
|
} |
|
.box2 { |
|
position: absolute; |
|
bottom: 5%; |
|
} |
|
.more { |
|
align-items: center; |
|
justify-content: right; |
|
} |
|
.more a { |
|
color: #333; |
|
} |
|
.more img { |
|
width: 20px; |
|
height: 20px; |
|
margin-left: 5px; |
|
} |
|
|
|
/* -------------------第一部分开始------------------------------------------------------------------------------------------------ */ |
|
.home { |
|
width: 100%; |
|
/* height: 2000px; */ |
|
} |
|
.titleCont { |
|
padding-top: 200px; |
|
padding-bottom: 100px; |
|
} |
|
.titleCont .title { |
|
font-size: 48px; |
|
} |
|
.titleCont .orange { |
|
background-color: rgba(255, 206, 149, 1); |
|
width: 40px; |
|
height: 6px; |
|
margin: 24px 0; |
|
} |
|
.titleCont .desc { |
|
font-size: 32px; |
|
} |
|
.lunbotu { |
|
position: relative; |
|
} |
|
.lunbotu .title { |
|
position: absolute; |
|
top: 30%; |
|
left: 20%; |
|
color: #fff; |
|
font-size: 100px; |
|
z-index: 99; |
|
} |
|
.lunbotu .title p{ |
|
margin-bottom: 0; |
|
} |
|
.el-carousel__item > div { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.el-carousel__item > div > img { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.lunbotu .el-carousel >>> .el-carousel__arrow { |
|
border: 1px solid #fff; |
|
} |
|
.lunbotu .total { |
|
position: absolute; |
|
bottom: 10%; |
|
left: 10%; |
|
z-index: 99; |
|
color: #fff; |
|
font-size: 48px; |
|
} |
|
.lunbotu .total span { |
|
font-size: 16px; |
|
} |
|
/* .lunbotu .el-carousel >>> .el-carousel__arrow{border: 1px solid #fff;position: absolute;right: 20%!important;} */ |
|
/* .lunbotu .el-carousel >>> .el-carousel__arrow--left{top: 40%;} |
|
.lunbotu .el-carousel >>> .el-carousel__arrow--right{top: 50%;} */ |
|
/* .el-carousel__indicators.el-carousel__indicators--horizontal{ |
|
position: absolute; |
|
bottom: 10%; |
|
right: 10%; |
|
} */ |
|
/* -----------------------第一部分完成----------------------------------------------------------------------------------------- */ |
|
/* -----------------------第二部分开始----------------------------------------------------------------------------------------- */ |
|
.section2 { |
|
color: #333; |
|
} |
|
.section2 .jz { |
|
padding-top: 200px; |
|
padding-bottom: 250px; |
|
} |
|
.section2 .title { |
|
text-align: center; |
|
padding-bottom: 200px; |
|
} |
|
.section2 .title .title_1 { |
|
font-size: 42px; |
|
} |
|
.section2 .title .title_2 { |
|
font-size: 32px; |
|
} |
|
.section2 .itemDiv { |
|
justify-content: space-around; |
|
} |
|
.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 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; |
|
} |
|
.section2 .itemDiv .item .title_3 { |
|
margin: 20px 0; |
|
font-size: 24px; |
|
} |
|
.section2 .itemDiv .item .title_4 { |
|
font-size: 18px; |
|
} |
|
/* -----------------------第二部分完成----------------------------------------------------------------------------------------- */ |
|
/* -----------------------第三部分开始----------------------------------------------------------------------------------------- */ |
|
.section3 { |
|
color: #333; |
|
background-color: rgba(246, 246, 246, 1); |
|
padding-bottom: 100px; |
|
} |
|
.section3 .itemDiv { |
|
padding-bottom: 100px; |
|
justify-content: space-between; |
|
} |
|
.section3 .itemDiv .item { |
|
background-color: rgba(255, 255, 255, 1); |
|
width: 450px; |
|
height: 610px; |
|
} |
|
.section3 .itemDiv .item img { |
|
width: 380px; |
|
height: 380px; |
|
margin: 35px 0 0 35px; |
|
} |
|
.section3 .itemDiv .item .titleDiv, |
|
.section3 .itemDiv .item .price { |
|
padding: 38px 50px 0 50px; |
|
} |
|
.section3 .itemDiv .item .titleDiv { |
|
font-size: 30px; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
} |
|
.section3 .itemDiv .item .titleDiv span { |
|
margin-left: 10px; |
|
margin-right: 10px; |
|
} |
|
.section3 .itemDiv .item .price span { |
|
font-size: 32px; |
|
color: #746957; |
|
margin-left: 10px; |
|
margin-right: 10px; |
|
} |
|
|
|
/* -----------------------第三部分完成----------------------------------------------------------------------------------------- */ |
|
/* -----------------------第四部分开始----------------------------------------------------------------------------------------- */ |
|
.section4 { |
|
padding-bottom: 200px; |
|
} |
|
.section4 .titleCont { |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
|
|
/* -----------------------第四部分完成----------------------------------------------------------------------------------------- */ |
|
/* -----------------------第五部分开始----------------------------------------------------------------------------------------- */ |
|
.section5 { |
|
padding-bottom: 200px; |
|
background-color: rgba(246, 246, 246, 1); |
|
} |
|
.section5 .titleCont { |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
.section5 .more { |
|
margin-bottom: 50px; |
|
/*margin-top: 50px;*/ |
|
} |
|
.section5 .tabs >>> .el-tabs__item.is-top { |
|
font-size: 26px; |
|
} |
|
.section5 .tabs >>> .el-tabs__nav.is-top { |
|
padding-bottom: 10px; |
|
} |
|
.section5 .tabs .jz { |
|
justify-content: flex-start; |
|
flex-wrap: wrap; |
|
} |
|
.section5 .tabs .jz .item { |
|
background-color: #fff; |
|
width: 19%; |
|
min-width: 270px; |
|
flex-direction: column; |
|
align-items: center; |
|
padding-bottom: 30px; |
|
margin-bottom: 30px; |
|
margin-right: 11px; |
|
} |
|
.section5 .tabs .jz .item img { |
|
width: 80%; |
|
} |
|
.section5 .tabs .jz .item p { |
|
width: 100%; |
|
box-sizing: border-box; |
|
text-overflow: ellipsis; |
|
padding-left: 28px; |
|
padding-right: 28px; |
|
overflow: hidden; |
|
text-align: left; |
|
white-space: nowrap; |
|
} |
|
.section5 .tabs .jz .item p .line { |
|
margin-left: 8px; |
|
margin-right: 8px; |
|
} |
|
.section5 .tabs .jz .item div { |
|
width: 100%; |
|
padding-left: 28px; |
|
box-sizing: border-box; |
|
margin-top: 30px; |
|
margin-bottom: 20px; |
|
} |
|
.section5 .tabs .jz .item div .el-tag { |
|
margin-right: 10px; |
|
} |
|
.section5 .priceDiv { |
|
justify-content: space-between; |
|
align-items: center; |
|
color: #746957; |
|
} |
|
.section5 .priceDiv .f_12 { |
|
color: rgba(116, 105, 87, 0.6); |
|
} |
|
/* -----------------------第五部分完成----------------------------------------------------------------------------------------- */ |
|
</style>
|
|
|