公共底部

liuqimichale
1 parent ee2ce493
Showing 6 changed files with 63 additions and 7 deletions
src/App.vue
src/assets/css/commonCss/reset.css
src/assets/images/header/iphone-bg.png
src/assets/images/header/nav-bg.png
src/components/commonHeaderFooter/VFooter.vue
src/components/commonHeaderFooter/VHeader.vue
@@ -25,23 +25,28 @@ export default {
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
   }
  
   .header {
-    height: 100px;
+    height: 145px;
   }
  
   .main {
-    padding-bottom: 100px;
+    padding-bottom: 50px;
   }
  
   .footer {
     width: 100%;
-    height: 100px;
+    height: 50px;
+    line-height: 50px;
     position: absolute;
     bottom: 0;
+    border-top: 1px solid rgba(188,188,188,1);
+    font-size:14px;
+    text-align: center;
+    font-family:Microsoft YaHei;
+    font-weight:400;
+    color:rgba(51,51,51,1);
   }
  
 </style>
@@ -101,6 +101,17 @@ table {
 .clearfix {
   *zoom: 1;
 }
+.fl{
+  float: left;
+}
+.fr{
+  float: right;
+}
+/*公共宽度*/
+.widthCommon{
+  width: 1440px;
+  margin: 0 auto;
+}
  
 /*隐藏*/
 .dn {
 <template>
-    <div>2</div>
+    <div>Copyright © 2008-2014. ZTE ITS LIMITED.     苏ICP备17052208号-1 </div>
 </template>
  
 <script>
 <template>
-    <div>1</div>
+    <div>
+      <div class="iphone-bg">
+        <div class="widthCommon iphone">全国客服热线：400 690 0889</div>
+      </div>
+
+      <div class="nav-wrapper widthCommon">
+        <ul class="fr nav-main">
+          <li>首页</li>
+          <li>关于我们</li>
+          <li>联系我们</li>
+        </ul>
+      </div>
+    </div>
 </template>
  
 <script>
@@ -9,5 +21,33 @@ export default {
 </script>
  
 <style scoped lang="">
+  .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;
+      float: left;
+    font-size: 20px;
+    }
+
  
 </style>