feat: 新版设计框架结构 MainFrame

src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router';
 
 const routes: Array<RouteRecordRaw> = [
     {
@@ -55,7 +55,11 @@ const routes: Array<RouteRecordRaw> = [
             }
         ]
     },
-
+    {
+        path: '/oh',
+        name: 'MainFrame',
+        component: () => import(/* webpackChunkName: "main-frame" */ '@/views/main-frame/MainFrame.vue')
+    }
 ];
 
 const router = createRouter({

src/views/main-frame/MainFrame.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import {onMounted, ref} from "vue";
+</script>
+
+<template>
+  <article class="main-frame">
+    <header class="header">
+      <img src="@/assets/logo.png" class="logo" alt="logo">
+      <span class="refresh" title="刷新">
+        <iconfont class="icon dsk-undo"/>
+      </span>
+      <ul class="breadcrumb">
+        <li class="item">首页</li>
+        <li class="item">项目列表</li>
+        <li class="item">莲花路电力迁改项目</li>
+      </ul>
+      <span class="data-big-screen">
+        <iconfont class="icon dsk-workbench"/>
+      </span>
+      <span class="message">
+        <iconfont class="icon dsk-remind"/>
+      </span>
+      <span class="help">
+        <iconfont class="icon dsk-help"/>
+      </span>
+      <span class="avatar">
+        <el-avatar :size="30">张三</el-avatar>
+      </span>
+      <span class="fullscreen">
+        <iconfont class="icon dsk-full-screen-one"/>
+      </span>
+    </header>
+    <aside class="aside">
+      <ul class="menu">
+        <li class="item active">
+          <iconfont class="icon dsk-dashboard-one"/>
+        </li>
+        <li class="item">
+          <iconfont class="icon dsk-city-one"/>
+        </li>
+        <li class="item">
+          <iconfont class="icon dsk-data"/>
+        </li>
+        <li class="item">
+          <iconfont class="icon dsk-more-app"/>
+        </li>
+        <li class="item">
+          <iconfont class="icon dsk-tool"/>
+        </li>
+        <li class="item">
+          <iconfont class="icon dsk-doc-detail"/>
+        </li>
+        <li class="item">
+          <iconfont class="icon dsk-application-one"/>
+        </li>
+      </ul>
+    </aside>
+    <main class="main"></main>
+  </article>
+</template>
+
+<style lang="scss" src="./style.scss" scoped></style>

src/views/main-frame/style.scss

@@ -0,0 +1,116 @@
+.main-frame {
+  @apply w-full h-full;
+  min-width: $small-screen;
+
+  .header {
+    @apply flex items-center fixed top-0 right-0 w-full z-10;
+    height: 64px;
+    background: linear-gradient(90deg, #1d42ab, #2173dc, #1e93ff);
+    padding-left: 20px;
+
+    .logo {
+      width: 200px;
+    }
+
+    .icon {
+      font-size: 19px;
+      color: #fff;
+    }
+
+    .refresh {
+      @apply inline-flex justify-center items-center cursor-pointer;
+      width: 64px;
+      height: 64px;
+      margin-left: 20px;
+      transition: all .2s ease-in-out;
+
+      &:hover {
+        background: rgba(255, 255, 255, .07);
+      }
+    }
+
+    .breadcrumb {
+      @apply flex flex-1;
+      margin-left: 10px;
+      font-size: 15px;
+      color: rgba(255, 255, 255, .7);
+
+      .item {
+        &::after {
+          @apply inline-block;
+          content: '/';
+          margin: 0 8px;
+        }
+
+        &:last-child {
+          color: #fff;
+
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .data-big-screen, .fullscreen, .message, .help, .avatar {
+      @apply inline-flex justify-center items-center cursor-pointer;
+      width: 42px;
+      height: 64px;
+      transition: all .2s ease-in-out;
+      margin: 0 3px;
+
+      &:hover {
+        background: rgba(255, 255, 255, .07);
+      }
+    }
+
+    .avatar {
+      width: 50px;
+    }
+  }
+
+  .aside {
+    @apply fixed top-0 left-0 min-h-full;
+    width: 80px;
+    padding-top: 64px;
+    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+    background: #fff;
+
+    .menu {
+      .item {
+        @apply flex justify-center items-center relative cursor-pointer;
+        height: 52px;
+        color: #515a6e;
+        transition: color .1s;
+
+        &:hover {
+          color: #2d8cf0;
+        }
+
+        &.active {
+          background: #f0faff;
+          color: #2d8cf0;
+
+          &::after {
+            content: "";
+            display: block;
+            width: 2px;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            background: #2d8cf0;
+          }
+        }
+
+
+      }
+    }
+  }
+
+  .main {
+    @apply min-h-full;
+    background: #f5f7f9;
+    padding-left: 80px;
+  }
+}