样式调整

src/page/index/sidebar/leftMenu.vue

@@ -3,12 +3,12 @@
         <div class="first_menu">
             <div class="first_menu_bg">
                 <div class="menu_item" v-for="(item, index) in newMneu" :class="item.activeMenu == true ? 'xz_bg' : ''"
-                @click="slectMenu(item, index)" :title="item.name">
-                <span><i :class="item.source"></i></span>
-                <span>{{ item.name }}</span>
-            </div>
+                    @click="slectMenu(item, index)" :title="item.name">
+                    <span><i :class="item.source"></i></span>
+                    <span>{{ item.name }}</span>
+                </div>
             </div>
-            
+
         </div>
         <div class="second_menu">
             <transition name="fade">
@@ -46,7 +46,8 @@
                         <template #default v-if="v.children && v.children.length != 0">
                             <div class="third_box" v-if="v.children && v.children.length != 0">
                                 <div class="third_box_item second_title" v-for="third in v.children" :key="third.id"
-                                    style="display:block;height: 40px;line-height: 40px;padding-left: 12px;" @click='open(third)'>
+                                    style="display:block;height: 40px;line-height: 40px;padding-left: 12px;"
+                                    @click='open(third)'>
                                     {{ third.name }}
                                 </div>
                             </div>
@@ -70,8 +71,8 @@ const router = useRouter()
 const route = useRoute()
 const myProps = defineProps({
     menulist: {
-        type: Boolean,
-        default: false
+        type: Array,
+        default: []
     },
 })
 const newMneu = ref([])
@@ -127,7 +128,6 @@ const getPath = (item) => {
 // 打开页面
 const queryKey = ref({})
 const open = (item) => {
-    console.log(99999, item)
     router.push({
         path: item.path,
     });
@@ -144,23 +144,25 @@ onMounted(() => {
     overflow: hidden;
 
     .first_menu {
-        width: 75px;
+        width: 60px;
         background: url(@/assets/menu_bg.jpg) no-repeat center;
         background-size: auto 100%;
         min-height: 100%;
         overflow: auto;
-       
+
         box-shadow: none;
         border-radius: 0px 60px 0px 0px;
         color: rgb(190, 194, 201);
-        .first_menu_bg{
-             padding-top: 60px;
+
+        .first_menu_bg {
+            padding-top: 60px;
             background: url(@/assets/menu_bg.svg) no-repeat center;
             background-size: 100% 100%;
         }
+
         .menu_item {
             width: 100%;
-            height: 68px;
+            height: 65px;
             display: flex;
             flex-direction: column;
             cursor: pointer;
@@ -180,7 +182,7 @@ onMounted(() => {
                 }
 
                 &:nth-child(2) {
-                    font-size: 14px;
+                    font-size: 12px;
                     text-align: center;
                     padding-top: 12px;
                 }
@@ -209,8 +211,8 @@ onMounted(() => {
 
         .logo-name {
             color: rgb(102, 102, 102);
-            font-size: 18px;
-            font-weight: 400;
+            font-size: 14px;
+            font-weight: 550;
             line-height: 27px;
             text-align: center;
             display: block;
@@ -240,8 +242,8 @@ onMounted(() => {
 
             &::after {
                 content: '';
-                width: 25px;
-                height: 1px;
+                width: 12px;
+                height: 2px;
                 background: rgba(187, 187, 187, 1);
                 position: absolute;
                 left: 10px;
@@ -250,8 +252,8 @@ onMounted(() => {
 
             &::before {
                 content: '';
-                width: 25px;
-                height: 1px;
+                width: 12px;
+                height: 2px;
                 background: rgba(187, 187, 187, 1);
                 position: absolute;
                 right: 10px;
@@ -324,12 +326,13 @@ onMounted(() => {
         }
     }
 
-    .third_box{
+    .third_box {
         background: #000;
     }
 
 }
-:deep(.iconfont ){
-    font-size: 20px;
+
+:deep(.iconfont) {
+    font-size: 16px;
 }
 </style>

src/styles/top.scss

@@ -49,7 +49,7 @@
   position: absolute !important;
   right: 160px;
   top: 0;
-  width: 300px;
+  width: 150px;
 
   .el-input__wrapper {
     font-size: 13px;
@@ -107,7 +107,7 @@
 
 .top-bar__title {
   height: 100%;
-  padding-left: 50px;
+  // padding-left: 50px;
   box-sizing: border-box;
   overflow: hidden;
   text-overflow: ellipsis;