大作业制作

初步完成导航栏和轮播图

<template>
    <!--导航栏NavigationBar.vue-->
    <div class="NavigationBar">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#323232" text-color="#fff" active-text-color="#10b041"  router>
        <el-menu-item text-color="#fff">网上书店系统</el-menu-item>
           <el-menu-item index="/">书城</el-menu-item>
          <el-menu-item index="/shopping">购物车</el-menu-item>
          <el-menu-item index="/login">登录名</el-menu-item>
      </el-menu>
    </div>
      
</template>

<script>
export default {
  data() {
      return {
        activeIndex: '/'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style >

  .NavigationBar{
    display:flex;
    background: #333;
    color:#fff;
    
  }
  .el-menu-demo{
    float:right;
  }


  /*.logo,.NavigationBar-right{
      padding:0 10%;
      line-height: 30px;
  }

  .el-menu-demo{
        flex:1;
        font-size:16px;
        font-weight:700;
  }
  .NavigationBar.el-menu-demo.el-menu-item{
        height:40px;
        line-height:40px;
  }*/
    
  

</style>