左侧容器更新

dist/css/app.a2ee2238.css → dist/css/app.df214d3e.css

-.login-container[data-v-1be4e8ce]{background-color:#35495e;height:100%}.login-container .login-box[data-v-1be4e8ce]{width:400px;height:250px;background-color:#fff;border-radius:3px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 6px hsla(0,0%,100%,.5)}.login-container .login-box .form-login[data-v-1be4e8ce]{position:absolute;bottom:0;left:0;width:100%;box-sizing:border-box}.form-control[data-v-1be4e8ce]{flex:1}.avatar-box[data-v-1be4e8ce]{position:absolute;width:100%;top:-65px;left:0}.avatar-box .avatar[data-v-1be4e8ce]{width:120px;height:120px;border-radius:50%!important;box-shadow:0 0 6px #efefef}.layout-header-left-img[data-v-747b32ea]{height:50px}.layout-aside-container[data-v-605e601d]{width:200px;height:100%;border-right:1px solid #eaeaea}.left-aside-item[data-v-605e601d]{font-size:20px}.el-main{padding:20px 3px!important}.el-header[data-v-15b8f4b2]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-15b8f4b2]{color:#333}.pagination[data-v-15b8f4b2]{margin-top:16px;text-align:right}.arrow-button[data-v-15b8f4b2]{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;cursor:pointer}.custom-icon[data-v-15b8f4b2]{font-size:24px;color:#f90;margin-right:6px}.arrow-button.disabled[data-v-15b8f4b2]{pointer-events:none;opacity:.1}.el-header[data-v-0be38d50]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-0be38d50]{color:#333}.pagination[data-v-0be38d50]{margin-top:16px;text-align:right}.header-button-item[data-v-0be38d50]{margin-right:15px;font-size:20px}.backtop[data-v-0be38d50]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.backtop[data-v-0be38d50]:hover{background-color:#0050a0}.el-header[data-v-8d787e5a]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-8d787e5a]{color:#333}.pagination[data-v-8d787e5a]{margin-top:16px;text-align:right}.header-button-item[data-v-8d787e5a]{margin-right:15px;font-size:20px}.red-title[data-v-8d787e5a]{line-height:24px;font-size:18px;color:red}.backtop[data-v-8d787e5a]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-8d787e5a]{width:100%;text-align:left}.backtop[data-v-8d787e5a]:hover{background-color:#0050a0}.el-header[data-v-1320254c]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-1320254c]{color:#333}.pagination[data-v-1320254c]{margin-top:16px;text-align:right}.header-button-item[data-v-1320254c]{margin-right:15px;font-size:20px}.red-title[data-v-1320254c]{line-height:24px;font-size:18px;color:red}.backtop[data-v-1320254c]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-1320254c]{width:100%;text-align:left}.backtop[data-v-1320254c]:hover{background-color:#0050a0}.el-header[data-v-834ece92]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-834ece92]{color:#333}.pagination[data-v-834ece92]{margin-top:16px;text-align:right}.header-button-item[data-v-834ece92]{margin-right:15px;font-size:20px}.red-title[data-v-834ece92]{line-height:24px;font-size:18px;color:red}.backtop[data-v-834ece92]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-834ece92]{width:100%;text-align:left}.backtop[data-v-834ece92]:hover{background-color:#0050a0}.el-header[data-v-33806974]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-33806974]{color:#333}.pagination[data-v-33806974]{margin-top:16px;text-align:right}.header-button-item[data-v-33806974]{margin-right:15px;font-size:20px}.red-title[data-v-33806974]{line-height:24px;font-size:18px;color:red}.backtop[data-v-33806974]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-33806974]{width:100%;text-align:left}.backtop[data-v-33806974]:hover{background-color:#0050a0}.el-header[data-v-283010e9]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-283010e9]{color:#333}.pagination[data-v-283010e9]{margin-top:16px;text-align:right}.header-button-item[data-v-283010e9]{margin-right:15px;font-size:20px}.red-title[data-v-283010e9]{line-height:24px;font-size:18px;color:red}.backtop[data-v-283010e9]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-283010e9]{width:100%;text-align:left}.backtop[data-v-283010e9]:hover{background-color:#0050a0}.el-header[data-v-6e6ab333]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-6e6ab333]{color:#333}.pagination[data-v-6e6ab333]{margin-top:16px;text-align:right}.header-button-item[data-v-6e6ab333]{margin-right:15px;font-size:20px}.red-title[data-v-6e6ab333]{line-height:24px;font-size:18px;color:red}.backtop[data-v-6e6ab333]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-6e6ab333]{width:100%;text-align:left}.backtop[data-v-6e6ab333]:hover{background-color:#0050a0}.button-container[data-v-9d5d30a4]{position:fixed;bottom:0;right:0;margin:16px}.container[data-v-ddc6c3e0]{display:flex;justify-content:center;align-items:center;height:30vh}
+.login-container[data-v-1be4e8ce]{background-color:#35495e;height:100%}.login-container .login-box[data-v-1be4e8ce]{width:400px;height:250px;background-color:#fff;border-radius:3px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 6px hsla(0,0%,100%,.5)}.login-container .login-box .form-login[data-v-1be4e8ce]{position:absolute;bottom:0;left:0;width:100%;box-sizing:border-box}.form-control[data-v-1be4e8ce]{flex:1}.avatar-box[data-v-1be4e8ce]{position:absolute;width:100%;top:-65px;left:0}.avatar-box .avatar[data-v-1be4e8ce]{width:120px;height:120px;border-radius:50%!important;box-shadow:0 0 6px #efefef}.layout-header-left-img[data-v-747b32ea]{height:50px}.layout-aside-container[data-v-08a8fba8]{width:200px;height:100%;border-right:1px solid #eaeaea}.left-aside-item[data-v-08a8fba8]{font-size:20px}.el-main{padding:20px 3px!important}.el-header[data-v-15b8f4b2]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-15b8f4b2]{color:#333}.pagination[data-v-15b8f4b2]{margin-top:16px;text-align:right}.arrow-button[data-v-15b8f4b2]{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;cursor:pointer}.custom-icon[data-v-15b8f4b2]{font-size:24px;color:#f90;margin-right:6px}.arrow-button.disabled[data-v-15b8f4b2]{pointer-events:none;opacity:.1}.el-header[data-v-0be38d50]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-0be38d50]{color:#333}.pagination[data-v-0be38d50]{margin-top:16px;text-align:right}.header-button-item[data-v-0be38d50]{margin-right:15px;font-size:20px}.backtop[data-v-0be38d50]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.backtop[data-v-0be38d50]:hover{background-color:#0050a0}.el-header[data-v-8d787e5a]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-8d787e5a]{color:#333}.pagination[data-v-8d787e5a]{margin-top:16px;text-align:right}.header-button-item[data-v-8d787e5a]{margin-right:15px;font-size:20px}.red-title[data-v-8d787e5a]{line-height:24px;font-size:18px;color:red}.backtop[data-v-8d787e5a]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-8d787e5a]{width:100%;text-align:left}.backtop[data-v-8d787e5a]:hover{background-color:#0050a0}.el-header[data-v-1320254c]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-1320254c]{color:#333}.pagination[data-v-1320254c]{margin-top:16px;text-align:right}.header-button-item[data-v-1320254c]{margin-right:15px;font-size:20px}.red-title[data-v-1320254c]{line-height:24px;font-size:18px;color:red}.backtop[data-v-1320254c]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-1320254c]{width:100%;text-align:left}.backtop[data-v-1320254c]:hover{background-color:#0050a0}.el-header[data-v-834ece92]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-834ece92]{color:#333}.pagination[data-v-834ece92]{margin-top:16px;text-align:right}.header-button-item[data-v-834ece92]{margin-right:15px;font-size:20px}.red-title[data-v-834ece92]{line-height:24px;font-size:18px;color:red}.backtop[data-v-834ece92]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-834ece92]{width:100%;text-align:left}.backtop[data-v-834ece92]:hover{background-color:#0050a0}.el-header[data-v-33806974]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-33806974]{color:#333}.pagination[data-v-33806974]{margin-top:16px;text-align:right}.header-button-item[data-v-33806974]{margin-right:15px;font-size:20px}.red-title[data-v-33806974]{line-height:24px;font-size:18px;color:red}.backtop[data-v-33806974]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-33806974]{width:100%;text-align:left}.backtop[data-v-33806974]:hover{background-color:#0050a0}.el-header[data-v-283010e9]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-283010e9]{color:#333}.pagination[data-v-283010e9]{margin-top:16px;text-align:right}.header-button-item[data-v-283010e9]{margin-right:15px;font-size:20px}.red-title[data-v-283010e9]{line-height:24px;font-size:18px;color:red}.backtop[data-v-283010e9]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-283010e9]{width:100%;text-align:left}.backtop[data-v-283010e9]:hover{background-color:#0050a0}.el-header[data-v-6e6ab333]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-6e6ab333]{color:#333}.pagination[data-v-6e6ab333]{margin-top:16px;text-align:right}.header-button-item[data-v-6e6ab333]{margin-right:15px;font-size:20px}.red-title[data-v-6e6ab333]{line-height:24px;font-size:18px;color:red}.backtop[data-v-6e6ab333]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-6e6ab333]{width:100%;text-align:left}.backtop[data-v-6e6ab333]:hover{background-color:#0050a0}.button-container[data-v-9d5d30a4]{position:fixed;bottom:0;right:0;margin:16px}.container[data-v-ddc6c3e0]{display:flex;justify-content:center;align-items:center;height:30vh}
 
 /*!
  * Bootstrap v4.5.0 (https://getbootstrap.com/)

dist/index.html

-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/kwan.png"><title>kwan</title><link href="/css/app.a2ee2238.css" rel="preload" as="style"><link href="/css/chunk-vendors.bedbfba9.css" rel="preload" as="style"><link href="/js/app.956e9ac8.js" rel="preload" as="script"><link href="/js/chunk-vendors.533b9d47.js" rel="preload" as="script"><link href="/css/chunk-vendors.bedbfba9.css" rel="stylesheet"><link href="/css/app.a2ee2238.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but kwan doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.533b9d47.js"></script><script src="/js/app.956e9ac8.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/kwan.png"><title>kwan</title><link href="/css/app.df214d3e.css" rel="preload" as="style"><link href="/css/chunk-vendors.bedbfba9.css" rel="preload" as="style"><link href="/js/app.eff881db.js" rel="preload" as="script"><link href="/js/chunk-vendors.533b9d47.js" rel="preload" as="script"><link href="/css/chunk-vendors.bedbfba9.css" rel="stylesheet"><link href="/css/app.df214d3e.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but kwan doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.533b9d47.js"></script><script src="/js/app.eff881db.js"></script></body></html>
\ No newline at end of file

src/components/subcomponents/MyAside.vue

 <template>
 	<el-menu default-active="$route.path" class="layout-aside-container" background-color="#fff" text-color="#000" active-text-color="#42b983">
-		<router-link to="/home/interview">
-			<el-menu-item index="/interview" class="left-aside-item">
+		<el-submenu index="1">
+			<template slot="title">
+				<i class="el-icon-thumb"></i>
+				CSDN管理
+			</template>
+			<el-menu-item-group>
+				<router-link :to="{ path: '/home/tripletDayInfo' }">
+					<el-menu-item index="/home/tripletDayInfo">三连管理</el-menu-item>
+				</router-link>
+				<router-link :to="{ path: '/home/csdnUser' }">
+					<el-menu-item index="/home/csdnUser">用户管理</el-menu-item>
+				</router-link>
+				<router-link :to="{ path: '/home/articleInfo' }">
+					<el-menu-item index="/home/articleInfo">文章管理</el-menu-item>
+				</router-link>
+			</el-menu-item-group>
+		</el-submenu>
+		<el-submenu index="2">
+			<template slot="title">
 				<i class="el-icon-question"></i>
-				<span slot="title">面试题管理</span>
-			</el-menu-item>
-		</router-link>
-		<router-link to="/home/algorithmic">
-			<el-menu-item index="/algorithmic" class="left-aside-item">
-				<i class="el-icon-info"></i>
-				<span slot="title">算法题管理</span>
-			</el-menu-item>
-		</router-link>
-		<router-link to="/home/aphorismPoetry">
-			<el-menu-item index="/aphorismPoetry" class="left-aside-item">
-				<i class="el-icon-document"></i>
-				<span slot="title">诗词管理</span>
-			</el-menu-item>
-		</router-link>
-		<router-link to="/home/chat">
-			<el-menu-item index="/chat" class="left-aside-item">
-				<i class="el-icon-chat-line-square"></i>
-				<span slot="title">CHAT管理</span>
-			</el-menu-item>
-		</router-link>
-		<router-link to="/home/pic">
-			<el-menu-item index="/pic" class="left-aside-item">
-				<i class="el-icon-setting"></i>
-				<span slot="title">图片管理</span>
-			</el-menu-item>
-		</router-link>
-		<router-link to="/home/csdnUser">
-			<el-menu-item index="/csdnUser" class="left-aside-item">
-				<i class="el-icon-s-custom"></i>
-				<span slot="title">用户管理</span>
-			</el-menu-item>
-		</router-link>
-		<router-link to="/home/articleInfo">
-			<el-menu-item index="/articleInfo" class="left-aside-item">
+				面试题
+			</template>
+			<el-menu-item-group>
+				<router-link :to="{ path: '/home/interview' }">
+					<el-menu-item index="/home/interview">面试题管理</el-menu-item>
+				</router-link>
+				<router-link :to="{ path: '/home/algorithmic' }">
+					<el-menu-item index="/home/algorithmic">算法题管理</el-menu-item>
+				</router-link>
+			</el-menu-item-group>
+		</el-submenu>
+		<el-submenu index="3">
+			<template slot="title">
 				<i class="el-icon-document"></i>
-				<span slot="title">文章管理</span>
-			</el-menu-item>
-		</router-link>
-		<router-link to="/home/tripletDayInfo">
-			<el-menu-item index="/tripletDayInfo" class="left-aside-item">
-				<i class="el-icon-thumb"></i>
-				<span slot="title">三连管理</span>
-			</el-menu-item>
-		</router-link>
+				文档管理
+			</template>
+			<el-menu-item-group>
+				<router-link :to="{ path: '/home/aphorismPoetry' }">
+					<el-menu-item index="/home/aphorismPoetry">诗词管理</el-menu-item>
+				</router-link>
+				<router-link :to="{ path: '/home/chat' }">
+					<el-menu-item index="/home/chat">CHAT管理</el-menu-item>
+				</router-link>
+				<router-link :to="{ path: '/home/pic' }">
+					<el-menu-item index="/home/pic">图片管理</el-menu-item>
+				</router-link>
+			</el-menu-item-group>
+		</el-submenu>
+		<!-- The rest of your code for other menu items and submenus -->
 	</el-menu>
 </template>
 <script>