4d0a73c0
liuqimichale
项目初始化
|
1
|
<template>
|
f63aa685
liuqimichale
公共底部
|
2
3
4
5
6
7
8
|
<div>
<div class="iphone-bg">
<div class="widthCommon iphone">全国客服热线:400 690 0889</div>
</div>
<div class="nav-wrapper widthCommon">
<ul class="fr nav-main">
|
643de4c7
liuqimichale
公共底部
|
9
10
11
|
<router-link v-for="(i, index) in routerData" :key="index" :to="i.pathLink" tag="li">
{{i.name}}
</router-link>
|
f63aa685
liuqimichale
公共底部
|
12
13
14
|
</ul>
</div>
</div>
|
4d0a73c0
liuqimichale
项目初始化
|
15
16
17
18
|
</template>
<script>
export default {
|
643de4c7
liuqimichale
公共底部
|
19
20
21
22
23
24
|
name: 'VHeader',
data () {
return {
routerData:[
{name:'首页',pathLink:'/home'},
{name:'关于我们',pathLink:'/about'},
|
9cb902b2
liuqimichale
解决方案
|
25
|
{name:'解决方案',pathLink:'/solution'},
|
cadfb1c2
liuqimichale
产品中心 建立目录
|
26
|
{name:'产品中心',pathLink:'/product'},
|
9a543af7
liuqimichale
经典案例 目录建立
|
27
|
{name:'经典案例',pathLink:'/case'},
|
b608a198
liuqimichale
新闻中心
|
28
|
{name:'新闻中心',pathLink:'/news'},
|
643de4c7
liuqimichale
公共底部
|
29
30
31
32
|
{name:'联系我们',pathLink:'/contact'},
]
}
}
|
4d0a73c0
liuqimichale
项目初始化
|
33
34
35
|
}
</script>
|
ee2ce493
liuqimichale
项目初始化
|
36
|
<style scoped lang="">
|
f63aa685
liuqimichale
公共底部
|
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
.iphone-bg{
height:37px;
line-height: 37px;
background:rgba(234,234,234,1);
}
.iphone{
padding-left: 30px;
background: url("../../assets/images/header/iphone-bg.png") no-repeat 0 7px;
background-size: 22px 22px;
}
.nav-wrapper{
height: 108px;
line-height: 108px;
background: url("../../assets/images/header/nav-bg.png") no-repeat 0 center;
background-size: 183px 66px;
color: #333333;
}
.nav-main{
}
.nav-main
li{
height: 108px;
height: 108px;
|
643de4c7
liuqimichale
公共底部
|
61
62
|
float: left;
margin-left: 30px;
|
f63aa685
liuqimichale
公共底部
|
63
|
font-size: 20px;
|
643de4c7
liuqimichale
公共底部
|
64
|
cursor: pointer;
|
f63aa685
liuqimichale
公共底部
|
65
66
|
}
|
4d0a73c0
liuqimichale
项目初始化
|
67
68
|
</style>
|