add header

add footer

add header
add footer
Andy
1 parent 77277983
Showing 6 changed files with 199 additions and 9 deletions
src/App.vue
src/assets/logo.png
src/components/VFooter.vue
src/components/VHeader.vue
src/styles/sidebar.scss
src/views/login/index.vue
 <template>
   <div id="app">
-    <router-view />
+    <VHeader></VHeader>
+    <router-view class="wrap"/>
+    <VFooter></VFooter>
+
   </div>
 </template>
 <script>
-export default {
-  name: 'App'
-}
+  import VHeader from './components/VHeader'
+  import VFooter from './components/VFooter'
+
+  export default {
+    name: 'App',
+    components: { VHeader, VFooter },
+  }
 </script>
+
+<style>
+
+  #app {
+    display: flex;
+    flex-flow: column;
+    min-height: 100vh;
+    position: relative;
+    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  .wrap {
+    flex: 1;
+  }
+</style>
+<template>
+    <div class="footer">
+      <span>《隐私权政策》    《权益保障承诺书》     鄂ICP备19013449号</span>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'VFooter'
+}
+</script>
+
+<style scoped lang="scss">
+.footer{
+  height:64px;
+  line-height: 64px;
+  background:rgba(6,8,10,1);
+  color:rgba(255,255,255,0.65);
+}
+</style>
+<template>
+    <div class="header-wrap">
+      <div class="header">
+        <div class="fl logo-bg" @click="$router.push({name:'home'})"></div>
+        <ul class="fr nav">
+          <!--<li>首页</li>-->
+          <!--<li>停车服务</li>-->
+          <!--<li>官网中心</li>-->
+          <!--<li>黄石停车</li>-->
+          <!--<li>联系我们</li>-->
+          <router-link
+            tag="li"
+            :to="{path:list.routerLink}"
+            v-for="(list, index) in navList"
+            :key="index"
+            exact="">
+            {{list.name}}
+          </router-link>
+        </ul>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'VHeader',
+  data(){
+    return {
+      navList:[
+        {name:'首页',routerLink:'/home'},
+        {name:'停车服务',routerLink:'/service'},
+        {name:'官网中心',routerLink:'/center'},
+        {name:'黄石停车',routerLink:'/park'},
+        {name:'联系我们',routerLink:'/about'},
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  /* http://meyerweb.com/eric/tools/css/reset/
+   v4.0 | 20180602
+   License: none (public domain)
+*/
+
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed,
+  figure, figcaption, footer, header, hgroup,
+  main, menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+
+  /* HTML5 hidden-attribute fix for newer browsers */
+  *[hidden] {
+    display: none;
+  }
+
+  body {
+    line-height: 1;
+  }
+  html, body {
+    width: 100%;
+    font-family: "Microsoft YaHei";
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    -moz-user-select: none;
+  }
+
+  body {
+    font-size: 14px;
+    /*默认颜色*/
+  }
+
+  html {
+    box-sizing: border-box;
+  }
+
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+  ol, ul {
+    list-style: none;
+  }
+  .fl {
+    float: left;
+  }
+
+  .fr {
+    float: right;
+  }
+
+
+  /*自定义导航选中样式*/
+  .navActive {
+    border-bottom: 2px solid #fff !important;
+  }
+
+  .anchorBL{display:none;}  /*去掉百度地图logo*/
+
+  .header-wrap{
+    height: 80px;
+    line-height: 80px;
+    background:rgba(218,36,49,1);
+  }
+  .header{
+    width: 1200px;
+    height: 80px;
+    margin: 0 auto;
+  }
+  .logo-bg{
+    width: 163px;
+    height: 80px;
+    background: url("../assets/logo.png") no-repeat 0 center;
+    cursor: pointer;
+    float: left;
+  }
+  .nav li{
+    color: #fff;
+    height: 80px;
+    float: left;
+    margin-left: 50px;
+    font-size: 16px;
+    cursor: pointer;
+    border-bottom: 2px solid rgba(218,36,49,1);
+  }
+</style>
@@ -12,11 +12,12 @@
     width: $sideBarWidth !important;
     background-color: $menuBg;
     height: 100%;
-    position: fixed;
+    position: relative;
     font-size: 0px;
-    top: 0;
-    bottom: 0;
-    left: 0;
+    /* top: 80px; */
+    /* left: 0; */
+    float: left;
+    /* bottom: 64px; */
     z-index: 1001;
     overflow: hidden;
@@ -209,7 +209,7 @@ export default {
   $light_gray: #eee;
   .login-container {
-    min-height: 100%;
+    /*min-height: 100%;*/
     width: 100%;
     background: url("../../assets/login_images/login-bg.jpg") no-repeat;
     background-size: 100% 100%;