Browse Source

style: 调整菜单栏的样式

标题和二三级文件夹添加了图标,搜索输入框添加了边距
yinxianwei 7 years ago
parent
commit
8ec3a99cbd
1 changed files with 28 additions and 9 deletions
  1. 28 9
      web_src/src/components/item/show/show_regular_item/LeftMenu.vue

+ 28 - 9
web_src/src/components/item/show/show_regular_item/LeftMenu.vue

@@ -13,6 +13,7 @@
           <el-input 
             @keyup.enter.native="input_keyword"
             :placeholder="$t('input_keyword')"
+            class="search-box"
             v-model="keyword">
            
           </el-input>
@@ -29,7 +30,7 @@
 
       <!-- 一级页面 -->
         <el-menu-item  v-if="menu.pages.length " v-for="(page ,index) in menu.pages" :index="page.page_id" :key="page.page_id" >
-          <i style="margin-left:30px;"></i>
+          <i class="el-icon-document"></i>
           {{page.page_title}}
         </el-menu-item>
 
@@ -39,21 +40,21 @@
         <template slot="title"> <img src="static/images/folder.png"  class="icon-folder menu-icon-folder ">{{catalog2.cat_name}}</template>
 
         <!-- 二级目录的页面 -->
-        <el-menu-item-group v-if="catalog2.pages" v-for="(page2 ,page2_index) in catalog2.pages"  :key="page2.page_id">
-          <el-menu-item :index="page2.page_id">{{page2.page_title}}</el-menu-item>
-        </el-menu-item-group>
+        <el-menu-item  v-if="catalog2.pages" v-for="(page2 ,page2_index) in catalog2.pages" :key="page2.page_id" :index="page2.page_id">
+            <i class="el-icon-document"></i>{{page2.page_title}}
+        </el-menu-item>
 
         <!-- 二级目录下的三级目录 -->
         <el-submenu  v-if="catalog2.catalogs.length" v-for="(catalog3 ,catalog_index3) in catalog2.catalogs" :index="catalog3.cat_id" :key="catalog3.cat_id">
-          <template slot="title">{{catalog3.cat_name}}</template>
+          <template slot="title"><img src="static/images/folder.png">{{catalog3.cat_name}}</template>
           <!-- 三级目录的页面 -->
-          <el-menu-item  v-if="catalog3.pages" v-for="(page3 ,page3_index) in catalog3.pages"  :index="page3.page_id" :key="page3.page_id">{{page3.page_title}}</el-menu-item>
+          <el-menu-item  v-if="catalog3.pages" v-for="(page3 ,page3_index) in catalog3.pages"  :index="page3.page_id" :key="page3.page_id"><i class="el-icon-document"></i>{{page3.page_title}}</el-menu-item>
 
             <!-- 三级目录下的四级目录 -->
             <el-submenu  v-if="catalog3.catalogs.length" v-for="(catalog4 ,catalog_index4) in catalog3.catalogs" :index="catalog4.cat_id" :key="catalog4.cat_id">
-              <template slot="title">{{catalog4.cat_name}}</template>
+              <template slot="title"><img src="static/images/folder.png">{{catalog4.cat_name}}</template>
               <!-- 四级目录的页面 -->
-              <el-menu-item  v-if="catalog4.pages" v-for="(page4 ,page4_index) in catalog4.pages" :index="page4.page_id"  :key="page4.page_id">{{page4.page_title}}</el-menu-item>
+              <el-menu-item  v-if="catalog4.pages" v-for="(page4 ,page4_index) in catalog4.pages" :index="page4.page_id"  :key="page4.page_id"><i class="el-icon-document"></i>{{page4.page_title}}</el-menu-item>
             </el-submenu>
 
         </el-submenu>
@@ -192,5 +193,23 @@
     height: 40px;
     line-height: 40px;
 }
-
+.el-menu-item {
+  line-height: 40px;
+  height: 40px;
+}
+.el-menu-item [class^=el-icon-] {
+  font-size: 17px;
+  margin-bottom: 4px;
+}
+.el-submenu__title img {
+  width: 14px;
+  cursor: pointer;
+  margin-left: 5px;
+  margin-right: 10px;
+  margin-bottom: 4px;
+}
+.search-box {
+    padding: 20px 20px 0px 20px;
+    box-sizing: border-box;
+}
 </style>