refine layout

package.json

@@ -19,9 +19,9 @@
     "wangeditor": "^4.7.4"
   },
   "devDependencies": {
-    "vite": "2.3.7",
     "@vitejs/plugin-vue": "^1.2.3",
-    "@vue/compiler-sfc": "^3.1.2"
+    "@vue/compiler-sfc": "^3.1.2",
+    "vite": "2.3.7"
   },
   "browserslist": [
     "> 1%",

src/assets/css/main.css

@@ -23,9 +23,9 @@ a {
 
 .content-box {
     position: absolute;
-    left: 250px;
+    left: 200px;
     right: 0;
-    top: 70px;
+    top: 50px;
     bottom: 0;
     padding-bottom: 30px;
     -webkit-transition: left .3s ease-in-out;
@@ -174,4 +174,4 @@ a {
 
 .v-note-wrapper .v-note-panel {
     min-height: 500px;
-}
+}

src/components/Header.vue

@@ -47,7 +47,8 @@ import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 export default {
     setup() {
-        const username = localStorage.getItem("ms_username");
+        //const username = localStorage.getItem("ms_username");
+        const username = "小红书"
         const message = 2;
 
         const store = useStore();
@@ -89,28 +90,28 @@ export default {
     position: relative;
     box-sizing: border-box;
     width: 100%;
-    height: 70px;
+    height: 50px;
     font-size: 22px;
     color: #fff;
 }
 .collapse-btn {
     float: left;
     padding: 0 21px;
     cursor: pointer;
-    line-height: 70px;
+    line-height: 50px;
 }
 .header .logo {
     float: left;
     width: 250px;
-    line-height: 70px;
+    line-height: 50px;
 }
 .header-right {
     float: right;
     padding-right: 50px;
 }
 .header-user-con {
     display: flex;
-    height: 70px;
+    height: 50px;
     align-items: center;
 }
 .btn-fullscreen {
@@ -141,7 +142,7 @@ export default {
     color: #fff;
 }
 .user-name {
-    margin-left: 10px;
+    padding-left: 20px;
 }
 .user-avator {
     margin-left: 20px;
@@ -155,6 +156,7 @@ export default {
 .el-dropdown-link {
     color: #fff;
     cursor: pointer;
+    margin-left: 5px;
 }
 .el-dropdown-menu__item {
     text-align: center;

src/components/Sidebar.vue

@@ -138,15 +138,15 @@ export default {
     display: block;
     position: absolute;
     left: 0;
-    top: 70px;
+    top: 50px;
     bottom: 0;
     overflow-y: scroll;
 }
 .sidebar::-webkit-scrollbar {
     width: 0;
 }
 .sidebar-el-menu:not(.el-menu--collapse) {
-    width: 250px;
+    width: 200px;
 }
 .sidebar > ul {
     height: 100%;

src/components/Tags.vue

@@ -113,7 +113,7 @@ export default {
 <style>
 .tags {
     position: relative;
-    height: 30px;
+    height: 40px;
     overflow: hidden;
     background: #fff;
     padding-right: 120px;
@@ -128,13 +128,13 @@ export default {
 
 .tags-li {
     float: left;
-    margin: 3px 5px 2px 3px;
+    margin: 5px 3px 5px 3px;
     border-radius: 3px;
     font-size: 12px;
     overflow: hidden;
     cursor: pointer;
-    height: 23px;
-    line-height: 23px;
+    height: 26px;
+    line-height: 26px;
     border: 1px solid #e9eaec;
     background: #fff;
     padding: 0 5px 0 12px;
@@ -169,15 +169,14 @@ export default {
 
 .tags-close-box {
     position: absolute;
-    right: 0;
-    top: 0;
+    right: 3px;
+    top: 5px;
     box-sizing: border-box;
     padding-top: 1px;
     text-align: center;
     width: 110px;
     height: 30px;
     background: #fff;
-    box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
     z-index: 10;
 }
 </style>