回到顶部

liuqimichale
1 parent 1f63183c
Showing 3 changed files with 47 additions and 21 deletions
webintroduce/src/assets/css/reset.css
webintroduce/src/assets/css/variables.scss
webintroduce/src/components/VHeader.vue
@@ -126,10 +126,20 @@ table {
 }
  
  
-
+.fl{
+  float: left;
+}
+.fr{
+  float: right;
+}
+.contentWidth{
+  width: 1200px;
+  margin: 0 auto;
+}
  
  
 /*自定义导航选中样式*/
 .navActive{
-  background-color: #f00;
+  color: #f00;
+  border-bottom: 2px solid #f00!important;
 }
 $baseColor:#000;
  
 $baseBgColor:#000;
+
+$contentWidth: 1200;
+
+$baseWhiteBg: #fff;
+
+$baseGrayBg: #f5f5f5;
 <template>
-    <div class="header-wrap">
-      <ul>
-       <router-link
-         :to="{path:link.linkPath}"
-         tag="li" v-for="(link,index) in navLinks"
-         :key="index"
-         exact="">
-         {{link.name}}
-       </router-link>
+  <div class="header-wrap">
+    <div class="contentWidth">
+      <div class="header-logo fl">logo</div>
+      <ul class="bar-wrap fr">
+        <router-link
+          :to="{path:link.linkPath}"
+          tag="li" v-for="(link,index) in navLinks"
+          :key="index"
+          exact="">
+          {{link.name}}
+        </router-link>
       </ul>
     </div>
+  </div>
 </template>
  
 <script>
@@ -18,22 +21,29 @@ export default {
   data() {
     return {
       navLinks: [
-        {name:'首页',linkPath:'/home'},
-        {name:'解决方案',linkPath:'/solution'},
-        {name:'登录',linkPath:'/login'},
-        {name:'企业介绍',linkPath:'/enterprise'}
+        { name: '首页', linkPath: '/home' },
+        { name: '解决方案', linkPath: '/solution' },
+        { name: '企业介绍', linkPath: '/enterprise' }
       ]
     }
   },
-  methods:{
-  },
+  methods: {},
  
 }
 </script>
  
 <style scoped lang="scss">
-.header-wrap{
-  height: 100px;
-  background-color: burlywood;
-}
+  .header-wrap {
+    height: 70px;
+    line-height: 70px;
+    background-color: $baseWhiteBg;
+  }
+
+  .bar-wrap {
+    >li{
+      float: left;
+      margin-left: 30px;
+      border-bottom: 2px solid #fff;
+    }
+  }
 </style>