Home页重构

src/main/resources/modules/SpringBoot/resources/static/js/ajax.ftl

@@ -64,7 +64,7 @@ jsonRequest = function (config) {
         params: {
             method: config.method
         },
-        url: "'${contextPath?default("")}'/ajax",
+        url: "${contextPath?default("")}/ajax",
         headers: {'Content-Type': 'text/plain'},
         data: config.data
     }).then(function (response) {
@@ -75,7 +75,7 @@ jsonRequest = function (config) {
 };
 fileRequest = function (config) {
     return instance.request({
-        url: "'${contextPath?default("")}'/upload",
+        url: "${contextPath?default("")}/upload",
         data: config.data,
         headers: {'Content-Type': 'multipart/form-data'},
         onUploadProgress: function (progressEvent) {

src/main/resources/modules/SpringBoot/resources/templates/screen/index.ftl

@@ -1,15 +1,15 @@
 <div id="app" v-cloak>
-    <div id="aside" :style="{width:(isCollapse?'64px':'200px')}">
+    <div id="aside">
         <el-menu
+                :style="{width:(isCollapse?'64px':'200px')}"
                 default-active="1-1"
-                class="el-menu-vertical-demo"
                 @open="handleOpen"
                 @close="handleClose"
                 @select="handleSelect"
                 :unique-opened="true"
                 :collapse="isCollapse"
-                background-color="#545c64"
-                text-color="#fff"
+                background-color="#252a2f"
+                text-color="#d6d6d6"
                 active-text-color="#ffd04b">
             <el-submenu index="1">
                 <template slot="title">
@@ -34,24 +34,20 @@
         <div id="head">
             <div id="header">
                 <div class="collapseSwitch" @click="collapseSwitch">
-                    <a v-if="isCollapse"><i class="el-icon-menu"></i></a>
-                    <a v-if="!isCollapse"><i class="el-icon-menu"></i></a>
+                    <a :class="isCollapse?'reversal':''"><i class="el-icon-s-grid"></i></a>
                 </div>
 
-                <a class="home" @click="onHome">首页</a>
+                <el-link :underline="false" @click="onHome" icon="el-icon-s-home">首页</el-link>
 
                 <div class="menu">
                     <ul>
                         <li>
-                            <a>
-                                <span style="line-height: 20px;"><el-badge is-dot class="item">消息</el-badge></span>
-                            </a>
+                            <el-link :underline="false" @click="onHome" icon="el-icon-message-solid"><span style="line-height: 20px;"><el-badge is-dot class="item">消息</el-badge></span></el-link>
                         </li>
                         <li>
                             <el-dropdown>
-                                <a class="el-dropdown-link">
-                                    个人信息<i class="el-icon-arrow-down el-icon--right"></i>
-                                </a>
+                                <el-link :underline="false" @click="onHome" icon="el-icon-user-solid">我的</el-link>
+
                                 <el-dropdown-menu slot="dropdown">
                                     <el-dropdown-item>修改信息</el-dropdown-item>
                                     <el-dropdown-item>修改密码</el-dropdown-item>
@@ -59,12 +55,16 @@
                                 </el-dropdown-menu>
                             </el-dropdown>
                         </li>
+
+                        <li>
+                            <el-link :underline="false" @click="onHome" icon="el-icon-warning">关于</el-link>
+                        </li>
                     </ul>
                 </div>
             </div>
         </div>
         <div id="content">
-            <el-tabs v-model="activeTabName" type="card" closable @tab-remove="removeTab">
+            <el-tabs v-model="activeTabName" type="border-card" closable @tab-remove="removeTab">
                 <el-tab-pane
                         v-for="(item, index) in tabs"
                         :key="item.name"
@@ -85,6 +85,7 @@
         padding: 0;
         font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
     }
+
     html, body, #app, #main, #content {
         width: 100%;
         height: 100%;
@@ -133,75 +134,88 @@
 
     #aside {
         transition: all 0.4s;
-        background: #545c64;
+        background: #252a2f;
     }
 
     #aside .el-menu {
         border-right: 0px
     }
+    #aside .el-menu-item, .el-submenu__title{
+        height: 40px;
+        line-height: 40px;
+    }
 
     #main {
         flex-grow: 1;
     }
 
-    #header {
+    #head {
         width: 100%;
-        height: 50px;
-        line-height: 50px;
+        height: 40px;
+        line-height: 40px;
         overflow: hidden;
-        border-bottom: 1px solid #d6d6d6;
+        background: #252a2f;
     }
 
-    #header .collapseSwitch {
+    #head .collapseSwitch {
         display: inline-block;
-        height: 50px;
-        width: 50px;
+        height: 40px;
+        width: 40px;
         text-align: center;
-        font-size: 20px;
-        border-right: 1px solid #d6d6d6;
+        font-size: 24px;
+        border-left: 1px solid #424242;
+        border-right: 1px solid #424242;
     }
-
-    #header .collapseSwitch:hover {
-        background: #f5f5f5;
+    #head .collapseSwitch a {
+        display: inline-block;
+        transition: all 1s;
+    }
+    #head .collapseSwitch a.reversal {
+        transform: rotate(90deg);
     }
 
-    #header .home {
-        display: inline-block;
-        color: #909399;
-        transition: all 0.3s;
+    #head a{
+        color: #d6d6d6;
         vertical-align: top;
-        padding-left: 12px;
     }
 
-    #header .menu {
+    #head a:hover{
+        color: #409EFF;
+        opacity: 1;
+    }
+
+    #head .collapseSwitch:hover {
+        background: #3b4146;
+    }
+
+    #head .menu {
         display: inline-block;
         float: right;
     }
 
-    #header .menu ul {
+    #head .menu ul {
         display: inline-block;
     }
 
-    #header .menu ul li {
+    #head .menu ul li {
         display: inline-block;
         vertical-align: top;
     }
 
-    #header .menu ul li a {
-        color: #909399;
+    #head .menu ul li a {
         display: inline-block;
         text-align: center;
         position: relative;
-        margin: 0px 15px;
-        height: 50px;
+        margin: 0 10px;
+        height: 40px;
         vertical-align: top;
     }
 
-    #header .menu ul li a:after {
+    #head .menu ul li a:after {
         content: "";
         display: inline-block;
         background: #409EFF;
-        width: 0%;
+        width: 0;
         height: 2px;
         position: absolute;
         bottom: 2px;
@@ -209,21 +223,13 @@
         transition: all 0.3s;
     }
 
-    #header .menu ul li a:hover {
-        color: #409EFF;
-    }
-
-    #header .menu ul li a:hover:after {
+    #head .menu ul li a:hover:after {
         width: 100%;
         left: 0%;
     }
 
     #content {
-        height: calc(100% - 52px);
-    }
-
-    #content .el-tabs__header {
-        margin: 2px 0 2px;
+        height: calc(100% - 35px);
     }
 
     #content > div {
@@ -235,6 +241,10 @@
         height: calc(100% - 43px);
     }
 
+    #content .el-tabs__item {
+        padding: 0 10px;
+    }
+
     #content .el-tabs__nav {
         white-space: normal !important;
     }