邓洁 : 页面向下滚动, header改变效果
This commit is contained in:
邓洁
parent
47fb652b67
commit
d7bc641a0f
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<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>
|
||||
<script>
|
||||
fnResize();
|
||||
|
|
|
|||
|
|
@ -1,45 +1,61 @@
|
|||
<template>
|
||||
<div class="header_bg">
|
||||
<el-row type="flex" class="up_header">
|
||||
<el-col :span="4">
|
||||
</el-col>
|
||||
<el-col :span="16" style="z-index: 400;">
|
||||
<span class="up_left">
|
||||
艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
|
||||
</span>
|
||||
<span class="up_right">
|
||||
广东祥睿陶瓷有限公司
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="down_header">
|
||||
<el-col :span="4">
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="down_left">
|
||||
<a href="/">
|
||||
<el-image
|
||||
src="http://www.yipengtaoci.com/images/logo.png"></el-image>
|
||||
</a>
|
||||
<div>
|
||||
<div class="header_bg" id="header_bg">
|
||||
<el-row type="flex" class="up_header">
|
||||
<el-col :span="4">
|
||||
</el-col>
|
||||
<el-col :span="16" style="z-index: 400;">
|
||||
<span class="up_left">
|
||||
艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
|
||||
</span>
|
||||
<span class="up_right">
|
||||
广东祥睿陶瓷有限公司
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="down_header">
|
||||
<el-col :span="4">
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="down_left">
|
||||
<a href="/">
|
||||
<el-image
|
||||
src="http://www.yipengtaoci.com/images/logo.png"></el-image>
|
||||
</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 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -56,83 +72,83 @@ export default {
|
|||
{
|
||||
href: '',
|
||||
title: '关于我们',
|
||||
children:[
|
||||
children: [
|
||||
{
|
||||
href: '',
|
||||
title:'企业简介'
|
||||
title: '企业简介'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title:'品牌文化'
|
||||
},{
|
||||
title: '品牌文化'
|
||||
}, {
|
||||
href: '',
|
||||
title:'企业观点'
|
||||
},{
|
||||
title: '企业观点'
|
||||
}, {
|
||||
href: '',
|
||||
title:'企业文化'
|
||||
title: '企业文化'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
href: '',
|
||||
title: '产品中心',
|
||||
children:[
|
||||
children: [
|
||||
{
|
||||
href: '',
|
||||
title:'瓷抛大理石'
|
||||
title: '瓷抛大理石'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title:'通体大理石'
|
||||
},{
|
||||
title: '通体大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title:'中板通体大理石'
|
||||
},{
|
||||
title: '中板通体大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title:'大板通体大理石'
|
||||
},{
|
||||
title: '大板通体大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title:'银河系大板'
|
||||
},{
|
||||
title: '银河系大板'
|
||||
}, {
|
||||
href: '',
|
||||
title:'仿古砖600x600'
|
||||
},{
|
||||
title: '仿古砖600x600'
|
||||
}, {
|
||||
href: '',
|
||||
title:'金刚大理石'
|
||||
},{
|
||||
title: '金刚大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title:'岩板'
|
||||
},{
|
||||
title: '岩板'
|
||||
}, {
|
||||
href: '',
|
||||
title:'微水泥'
|
||||
title: '微水泥'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
href: '/news',
|
||||
title: '新闻资讯',
|
||||
children:[
|
||||
children: [
|
||||
{
|
||||
href: '/news',
|
||||
title:'公司新闻'
|
||||
title: '公司新闻'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title:'行业动态'
|
||||
},{
|
||||
title: '行业动态'
|
||||
}, {
|
||||
href: '',
|
||||
title:'瓷砖百科'
|
||||
title: '瓷砖百科'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
href: '',
|
||||
title: '形象展示',
|
||||
children:[
|
||||
children: [
|
||||
{
|
||||
href: '',
|
||||
title:'资质荣誉'
|
||||
title: '资质荣誉'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title:'工程案例'
|
||||
title: '工程案例'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
|
|
@ -141,11 +157,11 @@ export default {
|
|||
children: [
|
||||
{
|
||||
href: '',
|
||||
title:'支持策略'
|
||||
title: '支持策略'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title:'加盟条件'
|
||||
title: '加盟条件'
|
||||
},
|
||||
]
|
||||
}, {
|
||||
|
|
@ -154,12 +170,37 @@ 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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header_bg {
|
||||
transition: all 0.6s;
|
||||
height: 130px;
|
||||
width: 100%;
|
||||
background-color: #111;
|
||||
|
|
@ -208,11 +249,11 @@ export default {
|
|||
position: relative;
|
||||
float: right;
|
||||
|
||||
>ul {
|
||||
> ul {
|
||||
display: inline;
|
||||
float: left;
|
||||
|
||||
>.nav {
|
||||
> .nav {
|
||||
position: relative;
|
||||
display: inline;
|
||||
width: 100px;
|
||||
|
|
@ -226,11 +267,12 @@ export default {
|
|||
line-height: 85px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.nav_item:hover{
|
||||
|
||||
.nav_item:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.subNav{
|
||||
.subNav {
|
||||
display: none;
|
||||
clear: both;
|
||||
position: absolute;
|
||||
|
|
@ -239,24 +281,28 @@ export default {
|
|||
width: 100px;
|
||||
background-color: #000;
|
||||
padding: 12px 0;
|
||||
>li{
|
||||
|
||||
> li {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
>a{
|
||||
|
||||
> a {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
>a:hover{
|
||||
|
||||
> a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
>.nav:hover {
|
||||
.subNav{
|
||||
|
||||
> .nav:hover {
|
||||
.subNav {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -264,4 +310,65 @@ 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue