Browse Source

adm:feat> 修改导航栏

onlyh 3 years ago
parent
commit
6d647ffbc4

+ 1 - 1
src/components/Hamburger/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="[{ 'is-active': isActive }]" @click="toggleClick">
+    <div :class="[{ 'is-active': isActive }]" @click="toggleClick" >
         <svg-icon name="hamburger" width="20" height="20" />
     </div>
 </template>

+ 2 - 1
src/layout/components/Navbar/index.vue

@@ -3,7 +3,7 @@
         <span class="title" v-show="sidebar.opened">
             <i class="iconfont icon-wandajituan"></i>
         </span>
-        <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggle-click="toggleSideBar" />
+        <hamburger id="hamburger-container" :is-active="sidebar.opened"  class="hamburger-container" @toggle-click="toggleSideBar" />
         <div class="right-menu">
             <ul class="header-nav">
                 <li class="header-nav-notification">
@@ -98,6 +98,7 @@ export default class extends Vue {
         height: 100%;
         float: left;
         width: 60px;
+        cursor: pointer;
         //padding: 0 15px;
         cursor: pointer;
         transition: background 0.3s;

+ 2 - 2
src/layout/components/Sidebar/index.vue

@@ -68,7 +68,8 @@ export default class extends Vue {
     }
 
     .el-scrollbar__view {
-        height: calc(100% - 50px);
+        height: 100%;
+        //height: calc(100% - 50px);
         background: #2b3643;
     }
 
@@ -90,7 +91,6 @@ export default class extends Vue {
 }
 
 .el-menu {
-    margin-top: 50px;
     border: none;
     height: 100%;
     width: 100% !important;

+ 10 - 8
src/layout/index.vue

@@ -7,16 +7,16 @@
             <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
             <hr/>
             <app-main/>
-        <div class="copy-right">当前版本:V 0.0.1</div>
+            <div class="copy-right">当前版本:V 0.0.1</div>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { Component } from "vue-property-decorator";
-import { mixins } from "vue-class-component";
-import { DeviceType, AppModule } from "@/store/modules/app";
-import { AppMain, Navbar, Sidebar, Breadcrumb } from "./components";
+import {Component} from "vue-property-decorator";
+import {mixins} from "vue-class-component";
+import {DeviceType, AppModule} from "@/store/modules/app";
+import {AppMain, Navbar, Sidebar, Breadcrumb} from "./components";
 import ResizeMixin from "./mixin/resize";
 
 @Component({
@@ -48,9 +48,10 @@ export default class extends mixins(ResizeMixin) {
 .app-wrapper {
     @include clearfix;
     position: relative;
-    height: 100%;
+    height: 100% ;
     width: 100%;
-    .copy-right{
+
+    .copy-right {
         display: flex;
         justify-content: center;
         font-size: 12px;
@@ -80,12 +81,13 @@ export default class extends mixins(ResizeMixin) {
 }
 
 .sidebar-container {
+    background: rebeccapurple;
     transition: width 0.28s;
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
     font-size: 0px;
-    top: 0;
+    top: 50px;
     bottom: 0;
     left: 0;
     z-index: 1001;

+ 32 - 32
vue.config.js

@@ -9,25 +9,25 @@ module.exports = {
     outputDir: "wanda-adm",
 
     configureWebpack: {
-        module: {
-            rules: [{
-                test: /\.(ttf|otf|eot|woff|woff2)$/,
-                use: {
-                    loader: "file-loader",
-                    options: {
-                        name: "fonts/[name].[ext]",
-                    },
-                },
-            },
-                {
-                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-                    loader: 'url-loader',
-                    options: {
-                        limit: 10000,
-                        name: ('fonts/[name].[ext]')
-                    }
-                }]
-        }
+        // module: {
+        //     rules: [{
+        //         test: /\.(ttf|otf|eot|woff|woff2)$/,
+        //         use: {
+        //             loader: "file-loader",
+        //             options: {
+        //                 name: "fonts/[name].[ext]",
+        //             },
+        //         },
+        //     },
+        //         {
+        //             test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        //             loader: 'url-loader',
+        //             options: {
+        //                 limit: 10000,
+        //                 name: ('fonts/[name].[ext]')
+        //             }
+        //         }]
+        // }
     },
     //TODO: eslint 是否在保存时检查
     // assetsDir:'/',
@@ -111,19 +111,19 @@ module.exports = {
     },
     // 高级配置
     chainWebpack(config) {
-        config.module
-            .rule("fonts")
-            .test(/\.(ttf|otf|eot|woff|woff2)$/)
-            .use("file-loader")
-            .loader("file-loader")
-            .tap(options => {
-                options = {
-                    // limit: 10000,
-                    name: 'fonts/[name].[ext]',
-                }
-                return options
-            })
-            .end()
+        // config.module
+        //     .rule("fonts")
+        //     .test(/\.(ttf|otf|eot|woff|woff2)$/)
+        //     .use("file-loader")
+        //     .loader("file-loader")
+        //     .tap(options => {
+        //         options = {
+        //             // limit: 10000,
+        //             name: 'fonts/[name].[ext]',
+        //         }
+        //         return options
+        //     })
+        //     .end()
         //在html网页包插件的选项列表中提供应用程序的标题,以便
         //可以在中访问索引.html插入正确的标题。
         // https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin