Commit f63aa685ee4f4691802a02661847c3894544e039
1 parent
ee2ce493
公共底部
Showing
6 changed files
with
63 additions
and
7 deletions
src/App.vue
| @@ -25,23 +25,28 @@ export default { | @@ -25,23 +25,28 @@ export default { | ||
| 25 | font-family: 'Avenir', Helvetica, Arial, sans-serif; | 25 | font-family: 'Avenir', Helvetica, Arial, sans-serif; |
| 26 | -webkit-font-smoothing: antialiased; | 26 | -webkit-font-smoothing: antialiased; |
| 27 | -moz-osx-font-smoothing: grayscale; | 27 | -moz-osx-font-smoothing: grayscale; |
| 28 | - text-align: center; | ||
| 29 | - color: #2c3e50; | ||
| 30 | } | 28 | } |
| 31 | 29 | ||
| 32 | .header { | 30 | .header { |
| 33 | - height: 100px; | 31 | + height: 145px; |
| 34 | } | 32 | } |
| 35 | 33 | ||
| 36 | .main { | 34 | .main { |
| 37 | - padding-bottom: 100px; | 35 | + padding-bottom: 50px; |
| 38 | } | 36 | } |
| 39 | 37 | ||
| 40 | .footer { | 38 | .footer { |
| 41 | width: 100%; | 39 | width: 100%; |
| 42 | - height: 100px; | 40 | + height: 50px; |
| 41 | + line-height: 50px; | ||
| 43 | position: absolute; | 42 | position: absolute; |
| 44 | bottom: 0; | 43 | bottom: 0; |
| 44 | + border-top: 1px solid rgba(188,188,188,1); | ||
| 45 | + font-size:14px; | ||
| 46 | + text-align: center; | ||
| 47 | + font-family:Microsoft YaHei; | ||
| 48 | + font-weight:400; | ||
| 49 | + color:rgba(51,51,51,1); | ||
| 45 | } | 50 | } |
| 46 | 51 | ||
| 47 | </style> | 52 | </style> |
src/assets/css/commonCss/reset.css
| @@ -101,6 +101,17 @@ table { | @@ -101,6 +101,17 @@ table { | ||
| 101 | .clearfix { | 101 | .clearfix { |
| 102 | *zoom: 1; | 102 | *zoom: 1; |
| 103 | } | 103 | } |
| 104 | +.fl{ | ||
| 105 | + float: left; | ||
| 106 | +} | ||
| 107 | +.fr{ | ||
| 108 | + float: right; | ||
| 109 | +} | ||
| 110 | +/*公共宽度*/ | ||
| 111 | +.widthCommon{ | ||
| 112 | + width: 1440px; | ||
| 113 | + margin: 0 auto; | ||
| 114 | +} | ||
| 104 | 115 | ||
| 105 | /*隐藏*/ | 116 | /*隐藏*/ |
| 106 | .dn { | 117 | .dn { |
src/assets/images/header/iphone-bg.png
0 → 100644
3.79 KB
src/assets/images/header/nav-bg.png
0 → 100644
32.1 KB
src/components/commonHeaderFooter/VFooter.vue
src/components/commonHeaderFooter/VHeader.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div>1</div> | 2 | + <div> |
| 3 | + <div class="iphone-bg"> | ||
| 4 | + <div class="widthCommon iphone">全国客服热线：400 690 0889</div> | ||
| 5 | + </div> | ||
| 6 | + | ||
| 7 | + <div class="nav-wrapper widthCommon"> | ||
| 8 | + <ul class="fr nav-main"> | ||
| 9 | + <li>首页</li> | ||
| 10 | + <li>关于我们</li> | ||
| 11 | + <li>联系我们</li> | ||
| 12 | + </ul> | ||
| 13 | + </div> | ||
| 14 | + </div> | ||
| 3 | </template> | 15 | </template> |
| 4 | 16 | ||
| 5 | <script> | 17 | <script> |
| @@ -9,5 +21,33 @@ export default { | @@ -9,5 +21,33 @@ export default { | ||
| 9 | </script> | 21 | </script> |
| 10 | 22 | ||
| 11 | <style scoped lang=""> | 23 | <style scoped lang=""> |
| 24 | + .iphone-bg{ | ||
| 25 | + height:37px; | ||
| 26 | + line-height: 37px; | ||
| 27 | + background:rgba(234,234,234,1); | ||
| 28 | + } | ||
| 29 | + .iphone{ | ||
| 30 | + padding-left: 30px; | ||
| 31 | + background: url("../../assets/images/header/iphone-bg.png") no-repeat 0 7px; | ||
| 32 | + background-size: 22px 22px; | ||
| 33 | + } | ||
| 34 | + .nav-wrapper{ | ||
| 35 | + height: 108px; | ||
| 36 | + line-height: 108px; | ||
| 37 | + background: url("../../assets/images/header/nav-bg.png") no-repeat 0 center; | ||
| 38 | + background-size: 183px 66px; | ||
| 39 | + color: #333333; | ||
| 40 | + } | ||
| 41 | + .nav-main{ | ||
| 42 | + | ||
| 43 | + } | ||
| 44 | + .nav-main | ||
| 45 | + li{ | ||
| 46 | + height: 108px; | ||
| 47 | + height: 108px; | ||
| 48 | + float: left; | ||
| 49 | + font-size: 20px; | ||
| 50 | + } | ||
| 51 | + | ||
| 12 | 52 | ||
| 13 | </style> | 53 | </style> |