Commit 53285eb5f5a68ab718bf3e68c2b025b96336705d
1 parent
1f63183c
回到顶部
Showing
3 changed files
with
47 additions
and
21 deletions
webintroduce/src/assets/css/reset.css
| @@ -126,10 +126,20 @@ table { | @@ -126,10 +126,20 @@ table { | ||
| 126 | } | 126 | } |
| 127 | 127 | ||
| 128 | 128 | ||
| 129 | - | 129 | +.fl{ |
| 130 | + float: left; | ||
| 131 | +} | ||
| 132 | +.fr{ | ||
| 133 | + float: right; | ||
| 134 | +} | ||
| 135 | +.contentWidth{ | ||
| 136 | + width: 1200px; | ||
| 137 | + margin: 0 auto; | ||
| 138 | +} | ||
| 130 | 139 | ||
| 131 | 140 | ||
| 132 | /*自定义导航选中样式*/ | 141 | /*自定义导航选中样式*/ |
| 133 | .navActive{ | 142 | .navActive{ |
| 134 | - background-color: #f00; | 143 | + color: #f00; |
| 144 | + border-bottom: 2px solid #f00!important; | ||
| 135 | } | 145 | } |
webintroduce/src/assets/css/variables.scss
webintroduce/src/components/VHeader.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="header-wrap"> | ||
| 3 | - <ul> | ||
| 4 | - <router-link | ||
| 5 | - :to="{path:link.linkPath}" | ||
| 6 | - tag="li" v-for="(link,index) in navLinks" | ||
| 7 | - :key="index" | ||
| 8 | - exact=""> | ||
| 9 | - {{link.name}} | ||
| 10 | - </router-link> | 2 | + <div class="header-wrap"> |
| 3 | + <div class="contentWidth"> | ||
| 4 | + <div class="header-logo fl">logo</div> | ||
| 5 | + <ul class="bar-wrap fr"> | ||
| 6 | + <router-link | ||
| 7 | + :to="{path:link.linkPath}" | ||
| 8 | + tag="li" v-for="(link,index) in navLinks" | ||
| 9 | + :key="index" | ||
| 10 | + exact=""> | ||
| 11 | + {{link.name}} | ||
| 12 | + </router-link> | ||
| 11 | </ul> | 13 | </ul> |
| 12 | </div> | 14 | </div> |
| 15 | + </div> | ||
| 13 | </template> | 16 | </template> |
| 14 | 17 | ||
| 15 | <script> | 18 | <script> |
| @@ -18,22 +21,29 @@ export default { | @@ -18,22 +21,29 @@ export default { | ||
| 18 | data() { | 21 | data() { |
| 19 | return { | 22 | return { |
| 20 | navLinks: [ | 23 | navLinks: [ |
| 21 | - {name:'首页',linkPath:'/home'}, | ||
| 22 | - {name:'解决方案',linkPath:'/solution'}, | ||
| 23 | - {name:'登录',linkPath:'/login'}, | ||
| 24 | - {name:'企业介绍',linkPath:'/enterprise'} | 24 | + { name: '首页', linkPath: '/home' }, |
| 25 | + { name: '解决方案', linkPath: '/solution' }, | ||
| 26 | + { name: '企业介绍', linkPath: '/enterprise' } | ||
| 25 | ] | 27 | ] |
| 26 | } | 28 | } |
| 27 | }, | 29 | }, |
| 28 | - methods:{ | ||
| 29 | - }, | 30 | + methods: {}, |
| 30 | 31 | ||
| 31 | } | 32 | } |
| 32 | </script> | 33 | </script> |
| 33 | 34 | ||
| 34 | <style scoped lang="scss"> | 35 | <style scoped lang="scss"> |
| 35 | -.header-wrap{ | ||
| 36 | - height: 100px; | ||
| 37 | - background-color: burlywood; | ||
| 38 | -} | 36 | + .header-wrap { |
| 37 | + height: 70px; | ||
| 38 | + line-height: 70px; | ||
| 39 | + background-color: $baseWhiteBg; | ||
| 40 | + } | ||
| 41 | + | ||
| 42 | + .bar-wrap { | ||
| 43 | + >li{ | ||
| 44 | + float: left; | ||
| 45 | + margin-left: 30px; | ||
| 46 | + border-bottom: 2px solid #fff; | ||
| 47 | + } | ||
| 48 | + } | ||
| 39 | </style> | 49 | </style> |