mediaAll/src/view/allMedia/main.vue

<template>
  <el-scrollbar>
    <div class="main">
      <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>
  </el-scrollbar>
</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/hj.png'),
    path: '/main_home/convergence',
  },
  {
    title: 'H5商城',
    icon: require('../../assets/img/h5.png'),
    path: '/main_home/H5Mall',
  },
]);

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

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

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

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

.main .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);
}
.main .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);
}
.main .el-scrollbar {
  display: inline-block;
}
</style>