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

Compare commits

base: clay:3d08b47ed1efcd452f2d61d6e2f30ea6d5c090ae
Branches Tags
clay:master
clay:dj
..
compare: clay:d63f0c2381646aff26043faaa7b1c3f5e3868979
Branches Tags
clay:dj
clay:master

No commits in common. "3d08b47ed1efcd452f2d61d6e2f30ea6d5c090ae" and "d63f0c2381646aff26043faaa7b1c3f5e3868979" have entirely different histories.
3d08b47ed1 ... d63f0c2381

3 changed files with 85 additions and 192 deletions
Show Stats Expand all files Collapse all files

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

2
public/index.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico">--> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>艺鹏瓷砖|广东祥睿陶瓷有限公司</title> <title>艺鹏瓷砖|广东祥睿陶瓷有限公司</title>
<script> <script>
fnResize(); fnResize();

275
src/views/header/index.vue
View File

@ -1,61 +1,45 @@
<template> <template>
<div> <div class="header_bg">
<div class="header_bg" id="header_bg"> <el-row type="flex" class="up_header">
<el-row type="flex" class="up_header"> <el-col :span="4">
<el-col :span="4"> </el-col>
</el-col> <el-col :span="16" style="z-index: 400;">
<el-col :span="16" style="z-index: 400;"> <span class="up_left">
<span class="up_left"> 艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在 </span>
</span> <span class="up_right">
<span class="up_right"> 广东祥睿陶瓷有限公司
广东祥睿陶瓷有限公司 </span>
</span> </el-col>
</el-col> </el-row>
</el-row> <el-row type="flex" class="down_header">
<el-row type="flex" class="down_header"> <el-col :span="4">
<el-col :span="4"> </el-col>
</el-col> <el-col :span="16">
<el-col :span="16"> <div class="down_left">
<div class="down_left"> <a href="/">
<a href="/"> <el-image
<el-image src="http://www.yipengtaoci.com/images/logo.png"></el-image>
src="http://www.yipengtaoci.com/images/logo.png"></el-image> </a>
</a>
</div>
<div class="down_right">
<ul>
<li v-for="(item,index) in navList" :key="index" class="nav">
<a :href="item.href" class="nav_item">
{{ item.title }}
</a>
<ul class="subNav" v-if="item.children">
<li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
<a :href="childrenItem.href">
{{ childrenItem.title }}
</a>
</li>
</ul>
</li>
</ul>
</div>
</el-col>
</el-row>
</div>
<div class="search_header" id="search_header">
<div class="headerItems">
<ul>
<li v-for="(item,index) in navList" :key="index" class="nav">
<a :href="item.href">
{{ item.title }}
</a>
</li>
</ul>
<div class="search">
<i class="el-icon-search"></i>
</div> </div>
</div> <div class="down_right">
</div> <ul >
<li v-for="(item,index) in navList" :key="index" class="nav">
<a :href="item.href" class="nav_item">
{{ item.title }}
</a>
<ul class="subNav" v-if="item.children">
<li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
<a :href="childrenItem.href">
{{ childrenItem.title }}
</a>
</li>
</ul>
</li>
</ul>
</div>
</el-col>
</el-row>
</div> </div>
</template> </template>
@ -72,83 +56,83 @@ export default {
{ {
href: '', href: '',
title: '关于我们', title: '关于我们',
children: [ children:[
{ {
href: '', href: '',
title: '企业简介' title:'企业简介'
}, },
{ {
href: '', href: '',
title: '品牌文化' title:'品牌文化'
}, { },{
href: '', href: '',
title: '企业观点' title:'企业观点'
}, { },{
href: '', href: '',
title: '企业文化' title:'企业文化'
} }
] ]
}, { }, {
href: '', href: '',
title: '产品中心', title: '产品中心',
children: [ children:[
{ {
href: '', href: '',
title: '瓷抛大理石' title:'瓷抛大理石'
}, },
{ {
href: '', href: '',
title: '通体大理石' title:'通体大理石'
}, { },{
href: '', href: '',
title: '中板通体大理石' title:'中板通体大理石'
}, { },{
href: '', href: '',
title: '大板通体大理石' title:'大板通体大理石'
}, { },{
href: '', href: '',
title: '银河系大板' title:'银河系大板'
}, { },{
href: '', href: '',
title: '仿古砖600x600' title:'仿古砖600x600'
}, { },{
href: '', href: '',
title: '金刚大理石' title:'金刚大理石'
}, { },{
href: '', href: '',
title: '岩板' title:'岩板'
}, { },{
href: '', href: '',
title: '微水泥' title:'微水泥'
} }
] ]
}, { }, {
href: '/news', href: '/news',
title: '新闻资讯', title: '新闻资讯',
children: [ children:[
{ {
href: '/news', href: '/news',
title: '公司新闻' title:'公司新闻'
}, },
{ {
href: '', href: '',
title: '行业动态' title:'行业动态'
}, { },{
href: '', href: '',
title: '瓷砖百科' title:'瓷砖百科'
} }
] ]
}, { }, {
href: '', href: '',
title: '形象展示', title: '形象展示',
children: [ children:[
{ {
href: '', href: '',
title: '资质荣誉' title:'资质荣誉'
}, },
{ {
href: '', href: '',
title: '工程案例' title:'工程案例'
} }
] ]
}, { }, {
@ -157,11 +141,11 @@ export default {
children: [ children: [
{ {
href: '', href: '',
title: '支持策略' title:'支持策略'
}, },
{ {
href: '', href: '',
title: '加盟条件' title:'加盟条件'
}, },
] ]
}, { }, {
@ -170,37 +154,12 @@ export default {
} }
] ]
} }
}, }
mounted() {
let header_bg = document.getElementById('header_bg')
let search_header = document.getElementById('search_header')
window.onscroll = () => {
// 获取滚动距离
let top = document.documentElement.scrollTop || document.body.scrollTop;
if (top >= 140) {
header_bg.style = 'display:none;transition: all 0.6s;'
search_header.style = 'position: fixed;top: 0;;display:block;transition: all 0.6s;'
} else if (top === 0) {
header_bg.style = 'position: static;'
search_header.style = 'display:none'
}
}
const that = this
window.onresize = () => {
return (() => {
//这里写要操作的函数
window.screenWidth = document.body.clientWidth
that.width = window.screenWidth >= 1200
})()
}
},
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.header_bg { .header_bg {
transition: all 0.6s;
height: 130px; height: 130px;
width: 100%; width: 100%;
background-color: #111; background-color: #111;
@ -249,11 +208,11 @@ export default {
position: relative; position: relative;
float: right; float: right;
> ul { >ul {
display: inline; display: inline;
float: left; float: left;
> .nav { >.nav {
position: relative; position: relative;
display: inline; display: inline;
width: 100px; width: 100px;
@ -267,12 +226,11 @@ export default {
line-height: 85px; line-height: 85px;
font-size: 14px; font-size: 14px;
} }
.nav_item:hover{
.nav_item:hover {
text-decoration: underline; text-decoration: underline;
} }
.subNav { .subNav{
display: none; display: none;
clear: both; clear: both;
position: absolute; position: absolute;
@ -281,28 +239,24 @@ export default {
width: 100px; width: 100px;
background-color: #000; background-color: #000;
padding: 12px 0; padding: 12px 0;
>li{
> li {
width: 100%; width: 100%;
text-align: center; text-align: center;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
>a{
> a {
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
} }
>a:hover{
> a:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
} }
} }
>.nav:hover {
> .nav:hover { .subNav{
.subNav {
display: block; display: block;
} }
} }
@ -310,65 +264,4 @@ export default {
} }
} }
} }
.search_header {
width: 100%;
display: none;
background-color: #000;
min-width: 1290px;
z-index: 99999;
.headerItems {
position: relative;
padding: 8px 0;
width: 66%;
margin: 0 auto;
ul {
display: flex;
width: 100%;
padding-left: 100px;
li {
position: relative;
display: inline-block;
width: 12%;
z-index: 300;
a:hover {
text-decoration: underline;
}
a {
color: #fff;
display: inline-block;
position: relative;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 14px;
text-align: center;
text-decoration: none;
cursor: pointer;
z-index: 200;
}
}
}
.search {
cursor: pointer;
position: absolute;
right: 10px;
top: 0;
line-height: 62px;
i {
font-size: 20px;
color: #fff;
}
}
}
}
</style> </style>