新增电梯导航菜单页

Author: hepengwei

src/global.scss

@@ -4,5 +4,14 @@ $buttonColor: #35a2fd;
 $buttonColor2: #35a2fd44;
 $headHeight: 60px;
 $globalBackgroundImage: linear-gradient(135deg, #224141, #162a2a);
+$globalBackground: linear-gradient(
+  135deg,
+  #112437,
+  #1d3450,
+  #29588a,
+  #116d6e,
+  #5c8984,
+  #47a992
+);
 $dynamicButtonsWidth: 160px;
 $dynamicButtonsHeight: 48px;

src/layout/Menus.vue

@@ -68,6 +68,10 @@ const items: Ref<ItemType[]> = computed(() => [
     ),
     getItem(t("menu.cssDynamicEffect.generateShadow"), "generateShadow"),
     // getItem(t("menu.cssDynamicEffect.generateScrollBar"), "generateScrollBar"),
+    getItem(
+      t("menu.cssDynamicEffect.elevatorNavigation"),
+      "elevatorNavigation"
+    ),
   ]),
   getItem(
     t("menu.canvasDynamicEffect"),

src/locale/en-US.ts

@@ -102,6 +102,7 @@ const en_US = {
   "menu.cssDynamicEffect.generateRegularPolygon": "Generate Regular Polygon",
   "menu.cssDynamicEffect.generateShadow": "Generate Shadow",
   "menu.cssDynamicEffect.generateScrollBar": "Generate Scroll Bar",
+  "menu.cssDynamicEffect.elevatorNavigation": "Elevator Navigation",
   "menu.cssDynamicEffect.musicVisualization": "Music Visualization",
   "menu.canvasDynamicEffect": "Canvas Dynamic Effect",
   "menu.canvasDynamicEffect.sphereCollisionExample": "sphere-collision Example",

src/locale/zh-CN.ts

@@ -95,6 +95,7 @@ const zh_CN = {
   "menu.cssDynamicEffect.generateRegularPolygon": "生成正多边形",
   "menu.cssDynamicEffect.generateShadow": "生成阴影",
   "menu.cssDynamicEffect.generateScrollBar": "生成滚动条",
+  "menu.cssDynamicEffect.elevatorNavigation": "电梯导航",
   "menu.cssDynamicEffect.musicVisualization": "音乐可视化",
   "menu.canvasDynamicEffect": "Canvas动效",
   "menu.canvasDynamicEffect.sphereCollisionExample": "sphere-collision库示例",

src/router/index.ts

@@ -12,6 +12,7 @@ import RichDynamicEffect from "pages/css/RichDynamicEffect/index.vue";
 import GenerateRegularPolygon from "pages/css/GenerateRegularPolygon/index.vue";
 import GenerateShadow from "pages/css/GenerateShadow/index.vue";
 // import GenerateScrollBar from "pages/css/GenerateScrollBar/index.vue";
+import ElevatorNavigation from "pages/css/ElevatorNavigation/index.vue";
 import SphereCollisionExample from "pages/canvas/SphereCollisionExample.vue";
 import DynamicClock from "pages/canvas/DynamicClock.vue";
 import Searchlight from "pages/canvas/Searchlight.vue";
@@ -91,6 +92,10 @@ const contentRoutes = [
       //   path: "/css/generateScrollBar",
       //   component: GenerateScrollBar,
       // },
+      {
+        path: "/css/elevatorNavigation",
+        component: ElevatorNavigation,
+      },
     ],
   },
   {