luohe_fronted/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: '/static_resource'},
        {name: '记录查询', url: '/record_query'},
        {name: '数据对接', url: '/data_docking'},
        {name: '停车运行监管', url: '/park_monitor'},
        {name: '停车行为监测', url: '/park_bahavior'},
        {name: '设备运行监测', url: '/equipment_running'},
        {name: '从业人员资质', url: '/employee_qualification'},
        {name: '客户投诉监管', url: '/customer_complaint'},
        {name: '收费价格监管', url: '/charge_price'},
        {name: '车主信用监管', url: '/car_owner_credit'},
        {name: '企业服务监管', url: '/enterprise_service'},
        {name: '泊位基础情况', url: '/berths_information'},
        {name: '泊位使用情况', url: '/berths_usage'},
        {name: '泊位营收情况', url: '/berths_revenue'},
        {name: '停车场情况', url: '/parking_lot_situation'},
        {name: '泊位运营分析', url: '/berth_peration_nalysis'},
        {name: '收费业务分析', url: '/charge_business_analysis'},
        {name: '接入数据分析', url: '/access_data_analysis'},
        {name: '道路(路内)泊位主题', url: '/berth_road'},
        {name: '经营性(路外)车场主题', url: '/berth_road_out'},
        {name: '停车收费取证主题', url: '/parking_fee'},
        {name: '车辆违规主题', url: '/vehicle_violations'},
        {name: '运营停车场主题', url: '/parking_operate'},
        {name: '区域停车主题', url: '/parking_area'},
        {name: '设备运营主题', url: '/service_operations'},
        {name: '停车饱和预警', url: '/saturation_warning'},
        {name: '车辆迁徒分析', url: '/track_map'},
        {name: '停车缺口分析', url: '/gap_analysis'},
        {name: '停车难易指数', url: '/park_easy'},
        {name: '全局停车诱导', url: '/park_guidance'},
        {name: '区域停车发展分析', url: '/park_development_analysis'},
        {name: '路内泊位设置推荐', url: '/berth_recommend'},
        {name: '停车盲点挖掘', url: '/blind_spot_digging'},
        {name: '其他分析', url: '/other_analyse'},
        {name: '服务发布功能', url: '/service_publish'},
        {name: '公告功能', url: '/announcement_function'},
        {name: '消息中心功能', url: '/message'},
        {name: '技术支持功能', url: '/support'},
        {name: '服务监控功能', url: '/service_monitor'},
        {name: '凭证管理功能', url: '/credential_management_function'},
        {name: '服务订阅功能', url: '/service_subscription_function'},
        {name: 'IP白名单功能', url: '/ip_white_list'},
        {name: '服务调用功能', url: '/service_call_function'},
        {name: '操作日志功能', url: '/operation_log'},
        {name: 'demo1', url: '/demo1'},
        {name: 'demo2', url: '/demo2'},
        {name: 'hot_map', url: '/hot_map'},
        {name: 'heat_map', url: '/heat_map'},
        {name: '泊位列表', url: '/berth_list'},
        {name: '业务概览', url: '/business_overview'},
        {name: '经营情况', url: '/business_conditions'},
      ]
    }
  },
  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 {
  background-color: #0c0c0c;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>