import Vue from 'vue'
import app from 'App.vue'
import Index from './page/index.vue'
import BuyList from './page/BuyList.vue'

import Vrouter from 'vue-router'

Vue.config.productionTip = false
Vue.use(Vrouter)
let router = new Vrouter({
 mode:'history',
 routes:[
   {
     path:'/',
     component: Index
   },
   {
     path:'/BuyList',
     component: BuyList
   }
 ]
})

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<app/>',
 components: { app }
})

<template>
 <div class="webheader">
   <div class="h-left" >
     <img src="./assets/logo.png" alt="">
   </div>
   <div class="h-right">
     <ul>
       <li @click="logclick"><a href="#">登录</a></li>
       <li @click="resclick"><a href="#">注册</a></li>
       <li @click="aboutclick"><a href="#">关于</a></li>
     </ul>
   </div>
 </div>
 <div class="center">
   <keep-alive>
     <router-view></router-view>
   </keep-alive>
 </div>

 <mydialog :isShow="isShowdialog" @onclose="closedialog">

 </mydialog>
 <mydialog :isShow="isShowlog" @onclose="closedialog">

 </mydialog>
 <mydialog :isShow="isShowres" @onclose="closedialog">

 </mydialog>

</template>

<script>

 import mydialog from './components/dialog.vue'

 export default {
   components:{

     mydialog

   },

   data(){
     return {
       isShowdialog: false,
       isShowlog: false,
       isShowres: false,
     }
   },
   methods:{
     aboutclick () {
       this.isShowlog = true
     },
     resclick () {
       this.isShowres = true
     },
     logclick () {
       this.isShowlog = true
     },
     closedialog(){
       this.isShowdialog =false
       this.isShowres =false
       this.isShowlog =false
     }
   }
 }

</script>

<style>
 /* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
 */
 html{color:#000;background:#FFF}
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
 table{border-collapse:collapse;border-spacing:0}
 fieldset,img{border:0}
 address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
 ol,ul{list-style:none;

 }
 a{
   color: #444444;
   text-decoration:none;
 }
 caption,th{text-align:left}
 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
 q:before,q:after{content:''}
 abbr,acronym{border:0;font-variant:normal}
 sup{vertical-align:text-top}
 sub{vertical-align:text-bottom}
 input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
 legend{color:#000}
 #yui3-css-stamp.cssr

 body {
   background: #f0f2f5;
   font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
   font-size: 14px;
   color: #444;
 }
 .webheader{
   width: 1300px;
   height: 60px;
   background-color: darkgray;

 }
 .h-left{
   width: 300px;
   height: 60px;
   float: left;
 }
 .h-left img{
   margin-left: 150px;
   margin-top: 5px;
 }


 .h-right{
   width: 300px;
   height: 60px;
   float: left;
   margin-left: 700px;
 }
 .h-right li{
   float: left;
   line-height: 60px;
   padding-left: 20px;
 }
 .center{
   width: 1300px;
   height: 600px;

 }
</style>