clay
/
ceramic
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

邓洁 : 快速查找区和产品分类区样式初步完成

This commit is contained in:
邓洁 2023-05-04 18:17:57 +08:00
parent d433675cff
commit 1049c92106
4 changed files with 441 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Carousel.vue
View File

@ -2,7 +2,7 @@
<el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<div class="slideshow">
<el-carousel trigger="click" height="745px">
<el-carousel trigger="click" height="36.2vw">
<el-carousel-item v-for="(item,index) in bannerDate" :key="index">
<div>
<img :src="item.imgurl" alt="">

302
src/components/FastFindProducts.vue
View File

@ -1,41 +1,291 @@
<template>
<div>
<el-row type="flex" style="height: 122px">
<el-col :span="4">
</el-col>
<el-col :span="16">
<div class="fast_left">
<p>
快速查找产品
</p>
<p>
可以快速地找到合适你的产品
</p>
</div>
</el-col>
</el-row>
<div class="fastFind">
<el-row type="flex">
<el-col :span="4">
</el-col>
<el-col :span="16">
<div class="fast_left">
<p>
快速查找产品
</p>
<p>
可以快速地找到合适你的产品
</p>
</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-row>
</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>
<script>
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>
<style scoped lang="scss">
.fast_left{
margin-top: 24px;
float: left;
p:first-child{
color: #333;
font-size: 24px;
line-height: 43px;
.current {
background: #eeeeee;
}
.fastFind {
border-top: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
background-color: #ffffff;
.fast_left {
margin-top: 24px;
float: left;
p:first-child {
color: #333;
font-size: 24px;
line-height: 43px;
}
p:last-child {
color: #666;
font-size: 14px;
line-height: 25px;
}
}
p:last-child{
color: #666;
font-size: 14px;
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>

159
src/components/ProductsClassify.vue Normal file
View File

@ -0,0 +1,159 @@
<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>

8
src/views/index/index.vue
View File

@ -1,17 +1,19 @@
<template>
<div>
<Carousel/>
<FastFindProducts/>
<Carousel/>
<FastFindProducts/>
<ProductsClassify/>
</div>
</template>
<script>
import Carousel from "@/components/Carousel";
import FastFindProducts from "@/components/FastFindProducts";
import ProductsClassify from "@/components/ProductsClassify";
export default {
name: "index",
components: {FastFindProducts, Carousel}
components: {ProductsClassify, FastFindProducts, Carousel}
}
</script>