Blame view

src/components/commonHeaderFooter/VHeader.vue 1.48 KB
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>