Merge pull request '邓洁 : header和footer编写完成' (#2) from dj into master
Reviewed-on: #2
This commit is contained in:
odjbin
commit
4e1e99fd69
15
src/App.vue
15
src/App.vue
|
|
@ -3,7 +3,7 @@
|
|||
<div>
|
||||
<Header></Header>
|
||||
</div>
|
||||
<div>
|
||||
<div style="flex: 1;">
|
||||
<router-view/>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -29,6 +29,16 @@ export default {
|
|||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
#app{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -39,4 +49,7 @@ a{
|
|||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
li{
|
||||
list-style: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
|
|
@ -1,15 +1,197 @@
|
|||
<template>
|
||||
<div>
|
||||
脚
|
||||
<div class="footer_bg">
|
||||
<el-row type="flex" class="up_footer">
|
||||
<el-col :span="4">
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="up_left">
|
||||
<el-image
|
||||
style="margin-bottom: 15px"
|
||||
:src="require('@/assets/footer/elogo.png')"></el-image>
|
||||
<div>
|
||||
广东祥睿陶瓷有限公司
|
||||
</div>
|
||||
</div>
|
||||
<div class="up_middle">
|
||||
<ul>
|
||||
<li v-for="(footerItem,footerIndex) in footerList" :key="footerIndex">
|
||||
<a>{{ footerItem.title }}</a>
|
||||
<div class="item" v-for="(footerItems,footerItemsIndex) in footerItem.items" :key="footerItemsIndex">
|
||||
<a>{{ footerItems.name }}</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="up_right">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px"
|
||||
:src="require('@/assets/footer/qr.jpg')"></el-image>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="down_footer">
|
||||
<el-col :span="3">
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div>
|
||||
版权所有©广东祥睿陶瓷有限公司 2018-2019 未经本网书面授权，请勿转载、摘编或建立镜像，否则视为侵权。
|
||||
</div>
|
||||
<div>
|
||||
地址：佛山市禅城区华夏陶瓷博览城陶博会展三环路5座B3 技术支持：弈天网络
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index"
|
||||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
footerList: [
|
||||
{
|
||||
title: '关于我们',
|
||||
items: [
|
||||
{
|
||||
name: '企业简介'
|
||||
},
|
||||
{
|
||||
name: '品牌文化'
|
||||
},
|
||||
{
|
||||
name: '企业观点'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '新闻资讯',
|
||||
items: [
|
||||
{
|
||||
name: '公司新闻'
|
||||
},
|
||||
{
|
||||
name: '行业动态'
|
||||
},
|
||||
{
|
||||
name: '瓷砖百科'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '形象展示',
|
||||
items: [
|
||||
{
|
||||
name: '资质荣誉'
|
||||
},
|
||||
{
|
||||
name: '工程案例'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '招商加盟',
|
||||
items: [
|
||||
{
|
||||
name: '支持策略'
|
||||
},
|
||||
{
|
||||
name: '加盟条件'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '联系我们',
|
||||
items: [
|
||||
{
|
||||
name: '联系方式'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.footer_bg {
|
||||
height: 276px;
|
||||
width: 100%;
|
||||
background-color: #111;
|
||||
color: #fff;
|
||||
|
||||
.up_footer {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
float: left;
|
||||
padding: 50px 0 50px;
|
||||
font-size: 12px;
|
||||
|
||||
.up_left {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
|
||||
> div {
|
||||
font-size: 14px;
|
||||
clear: both;
|
||||
width: 251px;
|
||||
line-height: 36px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
background-color: #111;
|
||||
}
|
||||
}
|
||||
|
||||
.up_middle {
|
||||
ul {
|
||||
float: left;
|
||||
|
||||
li {
|
||||
color: #eee;
|
||||
display: inline;
|
||||
float: left;
|
||||
padding: 0 40px 0 40px;
|
||||
border-right: 1px solid #444;
|
||||
font-size: 14px;
|
||||
|
||||
> a {
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
> a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.item {
|
||||
color: #aaa;
|
||||
font-size: 13px;
|
||||
> a {
|
||||
line-height: 24px;
|
||||
}
|
||||
> a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.up_right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.down_footer {
|
||||
color: #aaa;
|
||||
width: 100%;
|
||||
float: left;
|
||||
padding: 12px 0;
|
||||
font-size: 12px;
|
||||
border-top: 1px solid #333;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="header_bg">
|
||||
<el-row type="flex" class="up_header">
|
||||
<el-col :span="3">
|
||||
<el-col :span="4">
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-col :span="16" style="z-index: 400;">
|
||||
<span class="up_left">
|
||||
艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
|
||||
</span>
|
||||
|
|
@ -13,9 +13,9 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="down_header">
|
||||
<el-col :span="3">
|
||||
<el-col :span="4">
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-col :span="16">
|
||||
<div class="down_left">
|
||||
<a href="/">
|
||||
<el-image
|
||||
|
|
@ -24,11 +24,11 @@
|
|||
</div>
|
||||
<div class="down_right">
|
||||
<ul>
|
||||
<li v-for="(item,index) in navList" :key="index">
|
||||
<a :href="item.href">
|
||||
<li v-for="(item,index) in navList" :key="index" class="nav">
|
||||
<a :href="item.href" class="nav_item">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
<ul class="subNav">
|
||||
<ul class="subNav" v-if="item.children">
|
||||
<li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
|
||||
<a :href="childrenItem.href">
|
||||
{{ childrenItem.title }}
|
||||
|
|
@ -52,9 +52,6 @@ export default {
|
|||
{
|
||||
href: '',
|
||||
title: '网站首页',
|
||||
children:[
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
|
|
@ -77,16 +74,80 @@ export default {
|
|||
]
|
||||
}, {
|
||||
href: '',
|
||||
title: '产品中心'
|
||||
title: '产品中心',
|
||||
children:[
|
||||
{
|
||||
href: '',
|
||||
title:'瓷抛大理石'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title:'通体大理石'
|
||||
},{
|
||||
href: '',
|
||||
title:'中板通体大理石'
|
||||
},{
|
||||
href: '',
|
||||
title:'大板通体大理石'
|
||||
},{
|
||||
href: '',
|
||||
title:'银河系大板'
|
||||
},{
|
||||
href: '',
|
||||
title:'仿古砖600x600'
|
||||
},{
|
||||
href: '',
|
||||
title:'金刚大理石'
|
||||
},{
|
||||
href: '',
|
||||
title:'岩板'
|
||||
},{
|
||||
href: '',
|
||||
title:'微水泥'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
href: '',
|
||||
title: '新闻资讯'
|
||||
title: '新闻资讯',
|
||||
children:[
|
||||
{
|
||||
href: '',
|
||||
title:'公司新闻'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title:'行业动态'
|
||||
},{
|
||||
href: '',
|
||||
title:'瓷砖百科'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
href: '',
|
||||
title: '形象展示'
|
||||
title: '形象展示',
|
||||
children:[
|
||||
{
|
||||
href: '',
|
||||
title:'资质荣誉'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title:'工程案例'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
href: '',
|
||||
title: '招商加盟'
|
||||
title: '招商加盟',
|
||||
children: [
|
||||
{
|
||||
href: '',
|
||||
title:'支持策略'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title:'加盟条件'
|
||||
},
|
||||
]
|
||||
}, {
|
||||
href: '',
|
||||
title: '联系我们'
|
||||
|
|
@ -98,6 +159,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.header_bg {
|
||||
height: 130px;
|
||||
width: 100%;
|
||||
|
|
@ -151,13 +213,13 @@ export default {
|
|||
display: inline;
|
||||
float: left;
|
||||
|
||||
>li {
|
||||
>.nav {
|
||||
position: relative;
|
||||
display: inline;
|
||||
width: 100px;
|
||||
float: left;
|
||||
|
||||
> a {
|
||||
> .nav_item {
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -165,17 +227,38 @@ export default {
|
|||
line-height: 85px;
|
||||
font-size: 14px;
|
||||
}
|
||||
a:hover{
|
||||
.nav_item:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.subNav{
|
||||
display: none;
|
||||
width: 100px;
|
||||
background-color: red;
|
||||
background-color: #000;
|
||||
padding: 12px 0;
|
||||
>li{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
>a{
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
>a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
>.nav:hover {
|
||||
.subNav{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div>首页</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue