|
|
@@ -0,0 +1,118 @@
|
|
|
+<template>
|
|
|
+ <el-scrollbar>
|
|
|
+ <div class="main">
|
|
|
+ <el-scrollbar class="menu">
|
|
|
+ <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',
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+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;
|
|
|
+ vertical-align: middle;
|
|
|
+ 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>
|
liyongli
