feat:nav_v4

src/App.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import Nav from "@/components/Nav_v3.vue";
+import Nav from "@/components/Nav_v4.vue";
 import PvxBacktop from "@/components/PvxBacktop.vue";
 export default {
     name: "App",

src/assets/css/nav_v4.less

@@ -0,0 +1,165 @@
+@nav_width: 70px;
+@home_height: 40px;
+.m-pvx-aside {
+    .size(@nav_width, calc(100% - @header-height));
+    background-color: #24292e;
+    overflow: visible;
+    z-index: 600;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    transition: width 0.3s;
+    left: 0;
+    top: @header-height;
+    box-sizing: border-box;
+    position: fixed;
+    .u-home-wrap {
+        .size(100%, @home_height);
+        margin: 15px 0;
+        .flex;
+        align-items: center;
+        justify-content: center;
+        gap: 7.5px;
+        span,
+        a {
+            .size(40px, 40px);
+            .flex;
+            align-items: center;
+            justify-content: center;
+            .r(5px);
+            &:hover {
+                background-color: rgba(#fff, 0.3);
+            }
+        }
+        svg {
+            .db;
+            .size(20px, 20px);
+            cursor: pointer;
+        }
+    }
+    .u-btn {
+        .pa;
+        top: 63.5px;
+        right: -26px;
+        .flex;
+        justify-content: center;
+        align-items: center;
+        .size(25px, 46px);
+        transition: all 0.3s;
+        background-color: #000;
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+        cursor: pointer;
+    }
+    &.is-closed {
+        .w(0);
+        .m-nav-item {
+            span {
+                .none;
+            }
+        }
+    }
+    &.is-opened {
+        .w(@openedWidth);
+    }
+    &.is-regular {
+        .m-nav-item {
+            span {
+                .w(0) !important;
+                opacity: 0;
+                transition-delay: 0s !important;
+            }
+            &.face:not(.is-active) {
+                .u-nav-icon {
+                    opacity: 0.58;
+                }
+            }
+        }
+    }
+}
+.m-pvx-nav {
+    .w(100%);
+    .h(calc(100% - @home_height));
+    box-sizing: border-box;
+    overflow: visible;
+    .scrollbar(1px);
+    @media screen and (max-width: @ipad) {
+        overflow-y: auto;
+    }
+    .m-nav-group {
+        &:not(:last-of-type) {
+            .mb(30px);
+        }
+        .m-nav-item {
+            .pr;
+            .u-nav-label {
+                .none;
+                .pa;
+                right: -90px;
+                top: 0;
+                justify-content: center;
+                align-items: center;
+                .size(100px, 40px);
+                .r(5px);
+                .fz(18px);
+                .bold;
+                color: #fff;
+                background-color: #24292f;
+            }
+            a {
+                .flex;
+                justify-content: center;
+                align-items: center;
+                .size(100%, 40px);
+                box-sizing: border-box;
+                span {
+                    .fz(16px);
+                    color: #ffffff94;
+                    .w(0);
+                }
+            }
+            &:hover {
+                .u-nav-label {
+                    .flex;
+                    color: #fff;
+                }
+            }
+            &:not(:last-of-type) {
+                .mb(15px);
+            }
+            .u-nav-icon {
+                .size(40px);
+            }
+            &.is-active {
+                a {
+                    span {
+                        color: #fff;
+                        .bold;
+                    }
+                }
+            }
+        }
+    }
+    &:hover {
+        & + .u-btn {
+            opacity: 0;
+        }
+    }
+}
+.is-opened {
+    .m-nav-item {
+        a {
+            .pl(12px);
+            justify-content: flex-start !important;
+            span {
+                .w(auto) !important;
+                opacity: 1 !important;
+                transition-delay: 0.15s !important;
+                .ml(10px);
+            }
+        }
+        &.face {
+            .u-nav-icon {
+                opacity: 1;
+            }
+        }
+    }
+}

src/assets/css/var.less

@@ -104,8 +104,8 @@
 @furnitureColor: #07ad36;
 @activeColor: #ff9a00;
 
-@openedWidth: 180px;
-@regularWidth: 60px;
+@openedWidth: 145px;
+@regularWidth: 70px;
 
 @default: #2682ea;
 @green: #62d3b0;