mediaAll/src/view/allMedia/main.vue

<template>
  <div class="mainMaster">
    <el-scrollbar class="menu">
      <img src="../../assets/img/logo.png" style="width: 100%" alt="" />
      <div
        @click="() => selectMenuFunc(item)"
        v-for="(item, index) in menu"
        :key="index"
        :class="{
          'menu-item': true,
          active: selectMenu == item.path,
        }"
      >
        <img :src="item.icon" class="icon" />
        <span v-text="item.title"></span>
      </div>
    </el-scrollbar>
    <router-view class="rightMain" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const Router = useRouter();
const Route = useRoute();
const selectMenu = ref(Route.fullPath);
const menu = ref([
  {
    title: '智能校对',
    icon: require('../../assets/img/jd.png'),
    path: '/main_home/proofread',
  },
  {
    title: '数据分析',
    icon: require('../../assets/img/sj.png'),
    path: '/main_home/analysis',
  },
  {
    title: '地域热点',
    icon: require('../../assets/img/sj.png'),
    path: '/main_home/analysis_map',
  },
  {
    title: '报料中心',
    icon: require('../../assets/img/bl.png'),
    path: '/main_home/reporting',
  },
  {
    title: '数据汇聚',
    icon: require('../../assets/img/hj.png'),
    path: '/main_home/convergence',
  },
  {
    title: 'H5商城',
    icon: require('../../assets/img/h5.png'),
    path: '/main_home/H5Mall',
  },
]);

for (let i = 0; i < menu.value.length; i++) {
  const v = menu.value[i];
  if (v.path === Route.fullPath) {
    document.title = v.title;
    break;
  }
}

const selectMenuFunc = item => {
  if (!item.path || Route.fullPath == item.path) return;
  selectMenu.value = item.path;
  document.title = item.title;
  Router.push({
    path: item.path,
    query: {},
  });
};
</script>

<style scoped>
.mainMaster {
  width: 100vw;
  height: 100vh;
  min-width: 960px;
  overflow: auto;
  display: flex;
}

.mainMaster .menu {
  position: relative;
  display: inline-block;
  width: 35%;
  max-width: 300px;
  min-width: 200px;
  padding: 48px 32px 0;
  height: 99.7%;
  flex: 1;
}

.mainMaster .icon {
  width: 1.8em;
  margin-right: 6px;
}

.mainMaster .rightMain {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  flex: 1;
}

.menu-item {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 16px;
  color: rgb(96, 98, 102);
}
.mainMaster .min-item {
  padding-left: 5px;
  text-align: center;
  padding-right: 5px;
  width: 60px;
  background-color: #ddd;
}

.min-item .menu-item {
  padding: 10px 0px;
}
.min-item .icon {
  margin: 0;
}
.menu-item:hover {
  color: rgb(64, 158, 255);
}
.active {
  font-weight: 600;
  border-radius: 8px;
  color: rgb(64, 158, 255);
  background-color: rgba(64, 158, 255, 0.1);
}
.mainMaster .el-scrollbar {
  display: inline-block;
}
</style>