luohe_operation/src/pages/index/layouts/indexLayout.vue

<template>
  <div :class="['home-wrapper']">
<!--    <div class="maintitle">漯河管理系统</div>-->
    <el-container style="height: 100%;">
      <!-- default-active设置进入页面时默认打开的菜单条目路由（这里的/indexpage是首页菜单条目的路由）；:router设置为真，打开路由；:collapse这里联合折叠图标实现菜单折叠与展开 -->
      <el-menu v-if="showMenu" default-active="/redirectMaintain" :router="true" background-color="#001529"
               text-color="#fff" style="overflow-y: scroll; width: 200px; border: none;">
<!--        <div class="fold">-->
          <!--折叠菜单的图标 -->
<!--          <i class="icon" :class="foldphoto"></i>-->
<!--        </div>-->
        <div class="luohetitle">漯河管理系统</div>
        <el-submenu index="1" style="">
          <template slot="title">
            <!-- i标签的class值为element-UI官网icon图标值，可直接引用 -->
            <i class="el-icon-s-home icon"></i>
            <span>监管平台</span>
          </template>
          <!-- index为对应菜单条目的路由，在router文件夹的index.js中设置 -->
          <el-menu-item v-for="(item, index) in menu" :key="index" :index="item.url">{{item.name}}</el-menu-item>
        </el-submenu>
      </el-menu>
      <el-main class="main">
        <!--引入跳转路由-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMenu: process.env.NODE_ENV === 'development',
      isCollapse: false,//默认为不折叠菜单
      foldphoto: "el-icon-s-unfold",//菜单展开图标
      menu: [
        {name: '概览系统', url: '/parking_index'},
        {name: '泊位列表', url: '/berth_list'},
        {name: '稽查管理', url: '/inspection_management'},
        {name: '绩效考核', url: '/performance_assess'},
        {name: '停车场管理', url: '/pakking_lot'},
        {name: '人员管理', url: '/personnel_management'},
        {name: '业务记录', url: '/business_record'},
        {name: '异常管理', url: '/exception_handing'},
        {name: '基础配置', url: '/basic_configuration'},
        {name: '岗亭操作', url: '/parking_outside_operation'},
        {name: '订单修改查询', url: '/product_order_search'},
        {name: '停车订单查询', url: '/parking_order'},
        {name: '商品订单查询', url: '/product_order'},
        {name: '应用配置', url: '/pay_configuration'},
        {name: '支付商户配置', url: '/payment_merchant'},
        {name: '平台商户配置', url: '/platform_merchant'},
        {name: '领导数字驾驶舱系统', url: '/lead_system'},
        {name: '消息管理', url: '/message_management'},
        {name: '业务配置', url: '/service_configuration'},
        {name: '欠费用户', url: '/defaulting_subscrlber'},
        {name: '任务追缴', url: '/task_recovery'},
        {name: '任务审核', url: '/task_audit'},
        {name: '任务报表', url: '/task_report'},
        {name: '电话管理', url: '/telephone_management'},
        {name: '停车卡', url: '/parking_card'},
        {name: '错峰停车', url: '/parking_unpeak'},
        {name: '预约停车', url: '/appointment_rules'},
        {name: '车场纠错', url: '/parking_correction'},
        {name: 'demo1', url: '/demo1'},
        {name: 'demo2', url: '/demo2'},
      ]
    }
  },
  mounted() {

  },
  methods: {
    // isfold() {
    //   //每次点击折叠图标值取反
    //   this.isCollapse = !this.isCollapse
    //   if (this.isCollapse) {
    //     //折叠图标
    //     this.foldphoto = "el-icon-s-fold"
    //   } else {
    //     //展开图标
    //     this.foldphoto = "el-icon-s-unfold"
    //   }
    // }
  }
}
</script>

<style scoped>
.home-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  box-sizing: border-box;
}
.maintitle {
  height: 6%;
  /* border: 1px solid green; */
  padding-left: 1.2rem;
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  letter-spacing: 0.2rem;
  /* font-weight: bold; */
  background-color: #545c64;
  color: white;
}
.luohetitle {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  color: white;
  font-weight: bold;
  font-size: 20px;
}

/* 图标样式 */
.icon {
  color: white;
}

/* 折叠图标 */
.fold {
  height: 3rem;
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.3); */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.3rem;
  margin-bottom: 0.6rem;
  background-color: rgba(0, 0, 0, 0.5);
}
.main {
  overflow-y: auto;
  overflow-x: hidden;
}
</style>