Compare commits
No commits in common. "da72bacaafdde2c68e9069fe3d05fca50da5c931" and "f5924a204a7ad04e00f9ccb1f2cb134d684201ee" have entirely different histories.
da72bacaaf
...
f5924a204a
|
|
@ -2,7 +2,7 @@
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||||
<div class="slideshow">
|
<div class="slideshow">
|
||||||
<el-carousel trigger="click" height="36.2vw">
|
<el-carousel trigger="click" height="745px">
|
||||||
<el-carousel-item v-for="(item,index) in bannerDate" :key="index">
|
<el-carousel-item v-for="(item,index) in bannerDate" :key="index">
|
||||||
<div>
|
<div>
|
||||||
<img :src="item.imgurl" alt="">
|
<img :src="item.imgurl" alt="">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="fastFind">
|
<el-row type="flex" style="height: 122px">
|
||||||
<el-row type="flex">
|
|
||||||
<el-col :span="4">
|
<el-col :span="4">
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="16">
|
<el-col :span="16">
|
||||||
|
|
@ -13,279 +12,30 @@
|
||||||
可以快速地找到合适你的产品
|
可以快速地找到合适你的产品
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="fast_right">
|
|
||||||
<ul>
|
|
||||||
<li v-for="(moduleItem,moduleIndex) in moduleList" :key="moduleIndex" :id="'find_'+moduleIndex"
|
|
||||||
@mouseenter="changeFinds(moduleIndex)">
|
|
||||||
<a :href="moduleItem.href">
|
|
||||||
<span>
|
|
||||||
<img :src="moduleItem.src" alt=""/>
|
|
||||||
</span>
|
|
||||||
<span>{{ moduleItem.name }}</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
<div class="classify">
|
|
||||||
<el-row type="flex">
|
|
||||||
<el-col :span="4">
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="16">
|
|
||||||
<div :id="'bok_'+findIndex" v-for="(findItem,findIndex) in findList" :key="findIndex">
|
|
||||||
<ul>
|
|
||||||
<li v-for="(childrenItem,childrenIndex) in findItem.children" :key="childrenIndex">
|
|
||||||
<a :href="childrenItem.href" class="">
|
|
||||||
{{ childrenItem.title }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "FastFindProducts",
|
name: "FastFindProducts"
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
moduleList: [
|
|
||||||
{
|
|
||||||
href: '',
|
|
||||||
src: 'http://www.yipengtaoci.com/images/module2-1.png',
|
|
||||||
name: '分类'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: '',
|
|
||||||
src: 'http://www.yipengtaoci.com/images/module2-2.png',
|
|
||||||
name: '空间'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: '',
|
|
||||||
src: 'http://www.yipengtaoci.com/images/module2-3.png',
|
|
||||||
name: '风格'
|
|
||||||
},
|
|
||||||
],
|
|
||||||
findList: [
|
|
||||||
{
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
href: '',
|
|
||||||
title: '瓷抛大理石'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: '',
|
|
||||||
title: '通体大理石'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '中板通体大理石'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '大板通体大理石'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '银河系大板'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '仿古砖600x600'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '金刚大理石'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '岩板'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '微水泥'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
href: '',
|
|
||||||
title: '客厅瓷砖'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: '',
|
|
||||||
title: '厨房瓷砖'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '卫浴瓷砖'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '书房瓷砖'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '卧室瓷砖'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '餐厅瓷砖'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '走廊瓷砖'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '大厅瓷砖'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
href: '',
|
|
||||||
title: '简约风格'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: '',
|
|
||||||
title: '新中式风格'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '欧式风格'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '古典风格'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '田园风格'
|
|
||||||
}, {
|
|
||||||
href: '',
|
|
||||||
title: '工业风格'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeFinds(moduleIndex) {
|
|
||||||
let find0 = document.getElementById('find_0')
|
|
||||||
let find1 = document.getElementById('find_1')
|
|
||||||
let find2 = document.getElementById('find_2')
|
|
||||||
let bok0 = document.getElementById('bok_0')
|
|
||||||
let bok1 = document.getElementById('bok_1')
|
|
||||||
let bok2 = document.getElementById('bok_2')
|
|
||||||
if (moduleIndex === 0) {
|
|
||||||
find0.classList.add('current')
|
|
||||||
find1.classList.remove('current')
|
|
||||||
find2.classList.remove('current')
|
|
||||||
bok0.style.display = 'block'
|
|
||||||
bok1.style.display = 'none'
|
|
||||||
bok2.style.display = 'none'
|
|
||||||
} else if (moduleIndex === 1) {
|
|
||||||
find0.classList.remove('current')
|
|
||||||
find1.classList.add('current')
|
|
||||||
find2.classList.remove('current')
|
|
||||||
find1.addClass = 'current'
|
|
||||||
bok0.style.display = 'none'
|
|
||||||
bok1.style.display = 'block'
|
|
||||||
bok2.style.display = 'none'
|
|
||||||
} else if (moduleIndex === 2) {
|
|
||||||
find0.classList.remove('current')
|
|
||||||
find1.classList.remove('current')
|
|
||||||
find2.classList.add('current')
|
|
||||||
find2.addClass = 'current'
|
|
||||||
bok0.style.display = 'none'
|
|
||||||
bok1.style.display = 'none'
|
|
||||||
bok2.style.display = 'block'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.current {
|
|
||||||
background: #eeeeee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fastFind {
|
|
||||||
border-top: 1px solid #e9e9e9;
|
|
||||||
border-bottom: 1px solid #e9e9e9;
|
|
||||||
background-color: #ffffff;
|
|
||||||
|
|
||||||
.fast_left{
|
.fast_left{
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
float: left;
|
float: left;
|
||||||
|
|
||||||
p:first-child{
|
p:first-child{
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 43px;
|
line-height: 43px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p:last-child{
|
p:last-child{
|
||||||
color: #666;
|
color: #666;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fast_right {
|
|
||||||
float: right;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
li {
|
|
||||||
display: inline;
|
|
||||||
width: 120px;
|
|
||||||
float: left;
|
|
||||||
margin: 0 0 0 -1px;
|
|
||||||
border-left: 1px solid #e9e9e9;
|
|
||||||
border-right: 1px solid #e9e9e9;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
> a {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
height: 82px;
|
|
||||||
float: left;
|
|
||||||
padding: 20px 0;
|
|
||||||
|
|
||||||
span {
|
|
||||||
width: 100%;
|
|
||||||
float: left;
|
|
||||||
margin: 2px 0;
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.classify {
|
|
||||||
padding: 15px 0;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
|
|
||||||
#bok_1 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#bok_2 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
li {
|
|
||||||
display: inline;
|
|
||||||
|
|
||||||
> a {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #333;
|
|
||||||
margin-right: 25px;
|
|
||||||
}
|
|
||||||
> a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,159 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="grid">
|
|
||||||
<el-row type="flex">
|
|
||||||
<el-col :span="4">
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="16">
|
|
||||||
<el-col :span="8">
|
|
||||||
<div class="grid_left">
|
|
||||||
<a href="">
|
|
||||||
<span class="pic">
|
|
||||||
<img src="http://www.yipengtaoci.com/images/ibg0.jpg" alt=""/>
|
|
||||||
</span>
|
|
||||||
<span class="info">产品分类</span>
|
|
||||||
<span>了解更多</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="16">
|
|
||||||
<div class="grid_right">
|
|
||||||
<ul>
|
|
||||||
<li v-for="(picItem,picIndex) in pics" :key="picIndex" :class="'pic_'+picIndex">
|
|
||||||
<a :href="picItem.href">
|
|
||||||
<span >
|
|
||||||
<img :src="picItem.src" alt=""/>
|
|
||||||
</span>
|
|
||||||
<span class="info">{{picItem.name}}</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "ProductsClassify",
|
|
||||||
data(){
|
|
||||||
return{
|
|
||||||
pics:[
|
|
||||||
{
|
|
||||||
href:'',
|
|
||||||
src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949961573658658.png',
|
|
||||||
name:'瓷抛大理石'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href:'',
|
|
||||||
src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949961872720151.jpg',
|
|
||||||
name:'通体大理石'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href:'',
|
|
||||||
src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949962397730467.jpg',
|
|
||||||
name:'中板通体大理石'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href:'',
|
|
||||||
src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949963006120695.jpg',
|
|
||||||
name:'大板通体大理石'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.grid {
|
|
||||||
padding: 50px 0 60px 0;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
|
|
||||||
.grid_left:hover {
|
|
||||||
filter: brightness(85%);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
//.grid_left:hover span:nth-child(2) {
|
|
||||||
// //background-color: red;
|
|
||||||
//}
|
|
||||||
.grid_left {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
transition: all 0.6s;
|
|
||||||
|
|
||||||
a {
|
|
||||||
.pic {
|
|
||||||
img {
|
|
||||||
width: 440px;
|
|
||||||
z-index: 9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
span:last-child {
|
|
||||||
color: #fff;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 160px;
|
|
||||||
height: 36px;
|
|
||||||
line-height: 36px;
|
|
||||||
margin: 20px 0 0 -80px;
|
|
||||||
font-size: 16px;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #de832f;
|
|
||||||
border-radius: 100px 100px 100px 100px;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.info{
|
|
||||||
color: #fff;
|
|
||||||
position: absolute;
|
|
||||||
top: 42%;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 34px;
|
|
||||||
font-weight: bold;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid_right{
|
|
||||||
//float: right;
|
|
||||||
ul{
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
li{
|
|
||||||
margin-top: -5px;
|
|
||||||
padding: 5px;
|
|
||||||
span:first-child{
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
filter: alpha(opacity=94);
|
|
||||||
-moz-opacity: 0.94;
|
|
||||||
opacity: 0.94;
|
|
||||||
transition: all 0.6s;
|
|
||||||
|
|
||||||
}
|
|
||||||
a{
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
img{
|
|
||||||
width: 440px;
|
|
||||||
height: 296px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -2,18 +2,16 @@
|
||||||
<div>
|
<div>
|
||||||
<Carousel/>
|
<Carousel/>
|
||||||
<FastFindProducts/>
|
<FastFindProducts/>
|
||||||
<ProductsClassify/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Carousel from "@/components/Carousel";
|
import Carousel from "@/components/Carousel";
|
||||||
import FastFindProducts from "@/components/FastFindProducts";
|
import FastFindProducts from "@/components/FastFindProducts";
|
||||||
import ProductsClassify from "@/components/ProductsClassify";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "index",
|
name: "index",
|
||||||
components: {ProductsClassify, FastFindProducts, Carousel}
|
components: {FastFindProducts, Carousel}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue