基础架构

src/App.vue

@@ -1,7 +1,7 @@
 <template>
-    <AppConfig>
+    <HcAppConfig>
         <router-view/>
-    </AppConfig>
+    </HcAppConfig>
 </template>
 
 <script setup>
@@ -27,20 +27,15 @@ watch(() => [
 
 nextTick(() => {
     setUserTheme(appStore.getThemeVal, appStore.getColor)
-    ulog('客户端 启动成功', '当前开发版本 v' + config?.version)
-    //当屏幕分辨率宽度低于1920时，自动折叠菜单
-    const width = document.body.clientWidth
-    if (width < 1920) {
-        appStore.setCollapse(true)
-    }
+    ulog('启动成功', '当前开发版本 v' + config?.version)
 })
 
-//设置主题
+//设置主题 #0081ff
 const setUserTheme = (theme, appColor) => {
     const colorVal = getObjValue(appColor)
     //设置主色调
     setElementMainColor(colorVal?.color)
-    const colorName = colorVal?.name || 'green'
+    const colorName = colorVal?.name || 'blue'
     //设置主题
     let val = UserTheme.value
     if (val === 'auto') {

src/components/gradient-card/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="hc-gradient-card-box">
+        <div class="flex radius hc-gradient-card" :class="'bg-' + bgColor + '-gradient'">
+            <div class="hc-card-dot hc-card-dot1" :class="'bg-' + bgColor + '-gradient'"/>
+            <div class="hc-card-dot hc-card-dot2" :class="'bg-' + bgColor + '-gradient'"/>
+            <div class="hc-card-dot hc-card-dot3" :class="'bg-' + bgColor + '-gradient'"/>
+            <div class="hc-card-main">
+                <slot></slot>
+            </div>
+        </div>
+        <div class="hc-gradient-card-bg" :class="'bg-' + bgColor"/>
+    </div>
+</template>
+
+<script setup>
+import {ref, watch} from "vue"
+
+//初始
+const props = defineProps({
+    color: {
+        type: String,
+        default: 'blue'
+    }
+})
+
+const bgColor = ref(props.color)
+
+//监听
+watch(() => [
+    props.color,
+], ([color]) => {
+    bgColor.value = color
+})
+</script>
+
+<style lang="scss" scoped>
+@import "./style.scss";
+</style>

src/components/gradient-card/style.scss

@@ -0,0 +1,78 @@
+.hc-gradient-card-box {
+    position: relative;
+    .hc-gradient-card {
+        position: relative;
+        z-index: 2;
+        border-radius: 6px;
+        overflow: hidden;
+        .hc-card-main {
+            position: relative;
+            z-index: 3;
+        }
+    }
+    .hc-gradient-card-bg {
+        position: relative;
+        z-index: 2;
+        text-shadow: 2px 3px 5px rgba(0,0,0,.1);
+    }
+    .hc-card-dot {
+        position: absolute;
+        z-index: 1;
+        border-radius: 50%;
+        transition: all 0.6s cubic-bezier(.08,.82,.17,1);
+        opacity: .3;
+        &.hc-card-dot1 {
+            width: 200px;
+            height: 200px;
+            left: 0;
+            top: auto;
+            right: auto;
+            bottom: -150px;
+            filter: hue-rotate(30deg)  brightness(160%);
+        }
+        &.hc-card-dot2 {
+            left: -40px;
+            top: auto;
+            right: auto;
+            bottom: -10px;
+            width: 150px;
+            height: 150px;
+            filter: brightness(80%);
+        }
+        &.hc-card-dot3 {
+            top: -60px;
+            right: -60px;
+            opacity: 0.6;
+            width: 120px;
+            height: 120px;
+            filter: brightness(120%);
+        }
+    }
+    .hc-gradient-card-bg {
+        position: absolute;
+        z-index: 0;
+        width: calc(100% - 20px);
+        height: 15px;
+        bottom: -7px;
+        left: 0;
+        right: 0;
+        margin: auto;
+        border-radius: 5px;
+        // filter: blur(10px);
+        opacity: 0.2;
+    }
+    &:hover {
+        .hc-card-dot1 {
+            transform: translateX(-50px) translatey(-180px);
+            filter:  hue-rotate(-30deg) brightness(80%);
+        }
+        .hc-card-dot2 {
+            transform: translateX(150px) translatey(0px);
+            filter: brightness(120%);
+        }
+        .hc-card-dot3 {
+            filter: brightness(80%);
+            transform: translateX(-150px) translatey(120px);
+        }
+    }
+}

src/components/index.js

@@ -1,6 +1,6 @@
-//import HcImg from './hc-img/index.vue'
+import HcGradientCard from './gradient-card/index.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
-    //App.component('HcImg', HcImg)
+    App.component('HcGradientCard', HcGradientCard)
 }

src/config/app.js

@@ -2,6 +2,8 @@ import color from './color';
 
 //默认配置
 export default {
-    theme: 'light', //用户可选择类型：auto,light, dark
-    color: color[0]
+    theme: 'light',     //用户可选择类型：auto,light, dark
+    color: color[0],    //默认主题色
+    //路由菜单排除缓存
+    exclude: 'home,home-index,home-config',
 }

src/config/color.js

@@ -1,6 +1,6 @@
 //主题配置
 export default [
-    {name: 'green', color: '#1ECC95', label: '森绿'}, {name: 'blue', color: '#0081ff', label: '海蓝'},
+    {name: 'blue', color: '#4980F7', label: '海蓝'}, {name: 'green', color: '#1ECC95', label: '森绿'},
     {name: 'cyan', color: '#37c0fe', label: '天青'}, {name: 'purple', color: '#8044de', label: '姹紫'},
     {name: 'mauve', color: '#b745cb', label: '木槿'}, {name: 'pink', color: '#e03997', label: '桃粉'},
     {name: 'red', color: '#e54d42', label: '嫣红'}, {name: 'orange', color: '#f37b1d', label: '橘橙'},

src/config/index.js

@@ -7,7 +7,7 @@ export default {
     clientId: 'hac',            // 客户端id
     clientSecret: 'hac_secret', // 客户端密钥
     tenantMode: true,           // 是否开启租户模式
-    tenantId: "003077",         // 管理组租户编号
+    tenantId: "000000",         // 管理组租户编号 003077
     captchaMode: false,         // 是否开启验证码模式
     switchMode: false,          // 是否开启部门切换模式
     tokenTime: 1740,

src/layout/index.vue

@@ -1,43 +1,39 @@
 <template>
     <el-container class="hc-layout-box">
-        <el-aside :class="[isCollapse?'is-collapse':'', MenuBarKey]" :width="isCollapse?'90px':'250px'"
+        <el-aside :class="[isCollapse?'is-collapse':'']" :width="isCollapse?'90px':'200px'"
                   class="hc-aside-box">
-            <div class="hc-aside-logo-box" @click="logoClick">
-                <img :src="logoIcon" alt="" id="logo-icon">
-                <img :src="logoName" alt="" id="logo-name" v-if="!isCollapse">
+            <div class="hc-aside-user-info">
+                <img :alt="userInfo['account']" :src="userInfo['avatar'] || avatarPng" class="user-avatar" @click="toUserInfo">
+                <div class="user-name" @click="toUserInfo">{{ userInfo['real_name'] }}</div>
             </div>
             <div class="hc-aside-menu-box">
                 <el-scrollbar>
                     <MenuBar :collapse="isCollapse" :cur="MenuBarKey" :datas="MenuBarData" @change="MenuBarChange"/>
                 </el-scrollbar>
             </div>
-            <div class="hc-aside-bar-box">
-                <div :class="isCollapse?'':'active'" @click="collapseChange(false)">
-                    <HcIcon name="menu-unfold"/>
-                </div>
-                <div v-show="!isCollapse" :class="isCollapse?'active':''" @click="collapseChange(true)">
-                    <HcIcon name="menu-fold"/>
-                </div>
-            </div>
         </el-aside>
-        <el-container :class="MenuBarKey === 'home-index'?'home':''" class="hc-container-view">
+        <el-container class="hc-container-view">
             <el-header class="hc-header-view">
                 <div id="hc-header-page-name" class="hc-header-page-name">
-                    {{ RoutesTitle }}
+                    <span class="collapse-menu-icon" @click="collapseChange(false)" v-if="isCollapse">
+                        <HcIcon name="menu-unfold"/>
+                    </span>
+                    <span class="collapse-menu-icon" @click="collapseChange(true)" v-else>
+                        <HcIcon name="menu-fold"/>
+                    </span>
+                    <span class="project-name">项目管控平台</span>
                 </div>
                 <div class="hc-header-top-menu-bar">
                     <TopMenuBar/>
                 </div>
                 <div class="hc-header-content">
-                    <HelpInfoBar></HelpInfoBar>
-                    <ConfigBar></ConfigBar>
-                    <UserInfoBar></UserInfoBar>
+                    <UserInfoBar/>
                 </div>
             </el-header>
             <el-main id="hc-main-box" class="hc-main-box">
                 <router-view v-if="reloadRouter" v-slot="{ Component }">
                     <transition name="fade-transform">
-                        <keep-alive :max="10" exclude="home,home-index,home-config">
+                        <keep-alive :max="10" :exclude="appConfig.exclude">
                             <component :is="Component"/>
                         </keep-alive>
                     </transition>
@@ -51,17 +47,14 @@
 import {onMounted, ref, watch} from "vue";
 import {useRouter, useRoute} from 'vue-router'
 import {useAppStore} from "~src/store";
+import avatarPng from '~src/assets/images/avatar.png';
 import MenuBar from "./modules/MenuBar.vue"
-import HelpInfoBar from "./modules/HelpInfoBar.vue"
 import UserInfoBar from "./modules/UserInfoBar.vue"
-import ConfigBar from "./modules/ConfigBar.vue"
 import TopMenuBar from "./modules/TopMenuBar.vue"
-import {initButtons} from "~sto/app";
-import website from '~src/config/index'
 import {setImageColorStyle} from "js-fast-way";
-
-import logoIcon from "~src/assets/logo/icon.png";
-import logoName from "~src/assets/logo/name.png";
+import {initButtons} from "~sto/app";
+import appConfig from '~src/config/app'
+import menus from '~src/router/menus'
 
 //初始组合式
 const router = useRouter()
@@ -71,23 +64,20 @@ const useAppState = useAppStore()
 //路由参数
 const reloadRouter = ref(true)
 const BarMenuKey = useRoutes?.name ?? 'home-index';
-const BarMenuTitle = useRoutes?.meta?.title ?? '';
 
 //主题和色调变量
 const AppColor = ref(useAppState.getColor);
 
 //顶部菜单数据和相关处理
 const MenuBarKey = ref(BarMenuKey);
-const RoutesName = ref(BarMenuKey);
-const RoutesTitle = ref(BarMenuTitle);
-const MenuBarData = ref(useAppState.getMenus)
+//const MenuBarData = ref(useAppState.getMenus)
+const MenuBarData = ref(menus)
 const isCollapse = ref(useAppState.getCollapse)
 const userInfo = ref(useAppState.getUserInfo);
 
 //渲染完成
 onMounted(() => {
     initButtons()
-    useAppState.barMenuName = BarMenuTitle
     setLogoImageColor()
 })
 
@@ -95,15 +85,11 @@ onMounted(() => {
 watch(() => [
     useAppState.getMenus,
     useRoutes?.name,
-    useRoutes?.meta?.title,
     useAppState.getCollapse,
-], ([userMenus, RouteName, RouteTitle, collapse]) => {
-    MenuBarData.value = userMenus
-    RoutesName.value = RouteName ?? 'home-index'
+], ([userMenus, RouteName, collapse]) => {
+    //MenuBarData.value = userMenus
     MenuBarKey.value = RouteName ?? 'home-index'
-    RoutesTitle.value = RouteTitle ?? ''
     isCollapse.value = collapse
-    useAppState.barMenuName = RouteTitle ?? ''
 })
 
 //监听
@@ -131,75 +117,12 @@ const MenuBarChange = (item) => {
     router.push({name: item?.code});
 }
 
-//首页
-const logoClick = () => {
-    router.push({name: 'home-index'});
+//跳转到个人中心
+const toUserInfo = () => {
+    router.push({name: 'user-index'});
 }
 </script>
 
 <style lang="scss" scoped>
 @import "./layout.scss";
 </style>
-
-<style lang="scss">
-.hc-layout-box .hc-container-view {
-    .hc-header-view .hc-header-content .hc-header-cascader-box {
-        .el-cascader {
-            width: 100%;
-            top: -10px;
-        }
-        .el-cascader .el-input .el-input__wrapper {
-            padding: 4px 15px;
-            border: 1px solid #00000000;
-            border-radius: 100px;
-            background: #f1f5f8;
-            color: #202532;
-            box-shadow: var(--hc-shadow);
-            .el-input__inner, .el-input__suffix {
-                color: #202532;
-            }
-        }
-        .el-cascader .el-input.is-focus .el-input__wrapper {
-            box-shadow: 4px 4px 8px 0 rgba(54, 92, 167, 0.15), -4px -4px 8px 0px #ffffff;
-        }
-        .el-cascader .el-input .icon-arrow-down {
-            font-size: 18px;
-            font-weight: bold;
-        }
-    }
-    &.home {
-        .hc-header-view .hc-header-content .hc-header-cascader-box {
-            .el-cascader .el-input .el-input__wrapper {
-                background-color: #00000000;
-                border: 1px solid white;
-                box-shadow: initial;
-                .el-input__inner, .el-input__suffix {
-                    color: white;
-                }
-            }
-            .el-cascader .el-input.is-focus .el-input__wrapper {
-                box-shadow: initial;
-            }
-        }
-        .hc-header-view .hc-header-top-menu-bar {
-            padding-left: 0;
-            .hc-top-menu-bar .bar-menu-content .bar-menu-btn {
-                background: rgba(255, 255, 255, .2);
-                border-color: rgba(255, 255, 255, .2);
-                color: rgba(255, 255, 255, .7);
-                backdrop-filter: blur(20px);
-                -webkit-backdrop-filter: blur(20px);
-                &:hover:not([class*='cur']) {
-                    background: var(--el-color-primary-light-9);
-                    color: #838791;
-                }
-                &:active:not([class*='cur']) {
-                    background: var(--el-color-primary-light-8);
-                    color: #838791;
-                }
-            }
-        }
-    }
-}
-
-</style>

src/layout/layout.scss

@@ -2,112 +2,64 @@
     position: relative;
     height: 100vh;
     width: 100%;
-    .hc-layout-bg-box {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        top: 0;
-        z-index: 0;
-        display: flex;
-        img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-    }
     .hc-aside-box {
         position: relative;
-        color: #838791;
-        background: #f1f5f8;
+        color: white;
+        background: var(--el-color-primary);
         transition: 0.2s;
-        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
-        border-radius: 0 60px 0 0;
         z-index: 1;
-        .hc-aside-logo-box {
+        .hc-aside-user-info {
             position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: opacity 0.3s;
-            cursor: pointer;
-            margin: 32px 0;
-            left: -10px;
-            #logo-icon {
-                height: 35px;
-                width: 35px;
-            }
-            #logo-name {
-                height: 40px;
-                margin-left: 5px;
+            text-align: center;
+            padding-top: 40px;
+            padding-bottom: 20px;
+            height: 175px;
+            transition: 0.2s;
+            .user-avatar {
+                width: 80px;
+                height: 80px;
+                object-fit: cover;
+                border-radius: 50%;
+                background: var(--el-color-primary);
+                transition: 0.2s;
+                cursor: pointer;
+                &:hover {
+                    opacity: 0.9;
+                    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
+                }
             }
-            &:hover {
-                opacity: .8;
+            .user-name {
+                margin-top: 10px;
+                font-size: 18px;
+                font-weight: bold;
+                transition: 0.2s;
+                cursor: pointer;
+                &:hover {
+                    opacity: 0.8;
+                }
             }
         }
         .hc-aside-menu-box {
             position: relative;
-            height: calc(100% - 216px);
+            height: calc(100% - 185px);
             width: 100%;
             overflow: hidden;
             user-select: none;
         }
-        .hc-aside-bar-box {
-            position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 24px 0;
-            margin-top: 24px;
-            transition: 0.2s;
-            &:before {
-                position: absolute;
-                content: '';
-                top: 0;
-                width: 100%;
-                height: 1px;
-                background-image: linear-gradient(90deg, rgba(102, 102, 102, 0.00) 11%, #dbe8f3 35%, #dbe8f3 64%, rgba(102, 102, 102, 0.00) 86%);
-            }
-            div {
-                position: relative;
-                width: 40px;
-                height: 40px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                font-size: 26px;
-                transition: 0.1s;
-                &.active {
-                    color: white;
-                    background: var(--el-color-primary);
-                    border-radius: 6px;
-                    box-shadow: 3px 2px 8px 0 var(--hc-shadow-color-5);
-                }
-                &:not(.active) {
-                    cursor: pointer;
-                    &:hover {
-                        color: var(--el-color-primary);
-                    }
+        &.is-collapse {
+            .hc-aside-user-info {
+                height: 113px;
+                padding-top: 12px;
+                .user-avatar {
+                    width: 50px;
+                    height: 50px;
                 }
-                & + div {
-                    margin-left: 26px;
+                .user-name {
+                    font-size: 14px;
                 }
             }
-        }
-        &.is-collapse {
-            border-radius: 0 50px 0 0;
-            .hc-aside-logo-box {
-                left: initial;
-            }
-        }
-        &.home-index {
-            color: white;
-            background: rgba(255, 255, 255, 0.35);
-            box-shadow: 0 2px 10px 0 rgba(32, 37, 50, 0.03);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-            .hc-aside-menu-box .hc-aside-menu.el-menu {
-                --el-menu-text-color: white;
+            .hc-aside-menu-box {
+                height: calc(100% - 120px);
             }
         }
     }
@@ -119,14 +71,27 @@
             display: flex;
             align-items: center;
             flex-direction: row;
+            background: white;
             --el-header-padding: 0 24px;
-            --el-header-height: 66px;
+            --el-header-height: 58px;
             .hc-header-page-name {
                 position: relative;
-                color: #cccccc;
-                font-size: 22px;
                 display: flex;
                 align-items: center;
+                .collapse-menu-icon {
+                    color: #101010;
+                    font-size: 20px;
+                    margin-right: 14px;
+                    transition: color 0.2s;
+                    cursor: pointer;
+                    &:hover {
+                        color: var(--el-color-primary);
+                    }
+                }
+                .project-name {
+                    color: #101010;
+                    font-size: 20px;
+                }
             }
             .hc-header-top-menu-bar {
                 flex: 1;
@@ -142,17 +107,6 @@
                 display: flex;
                 align-items: center;
                 justify-content: flex-end;
-                .hc-header-cascader-box {
-                    position: relative;
-                    margin-right: 30px;
-                    border-radius: 100px;
-                    .project-name-box {
-                        padding-right: 55px;
-                        position: relative;
-                        visibility: hidden;
-                        z-index: -1;
-                    }
-                }
             }
         }
         .hc-main-box {
@@ -160,14 +114,6 @@
             overflow: hidden;
             height: 100%;
             --el-main-padding: 24px;
-            margin-top: -18px;
-        }
-        &.home {
-            color: #ffffff;
-            .hc-header-view .hc-header-page-name {
-                display: none;
-            }
         }
     }
 }
-

src/layout/modules/ConfigBar.vue

@@ -1,43 +0,0 @@
-<template>
-    <div class="header-icon-bar" @click="toConfigClick">
-        <HcIcon name="settings" class="header-icon"/>
-    </div>
-</template>
-
-<script setup>
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-
-//跳转到系统设置页面
-const toConfigClick = () => {
-    router.push({
-        path: '/home/config'
-    });
-}
-</script>
-
-<style lang="scss" scoped>
-.header-icon-bar {
-    position: relative;
-    height: 40px;
-    width: 40px;
-    border-radius: 100px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    margin-right: 30px;
-    font-size: 26px;
-    border: 1px solid #00000000;
-    background: #f1f5f8;
-    color: #202532;
-    box-shadow: var(--hc-shadow);
-}
-.hc-layout-box .hc-container-view.home .hc-header-view .hc-header-content .header-icon-bar {
-    border: 1px solid white;
-    color: inherit;
-    box-shadow: initial;
-    background: initial;
-}
-</style>

src/layout/modules/HelpInfoBar.vue

@@ -1,173 +0,0 @@
-<template>
-    <el-popover :width="220" placement="bottom" trigger="hover">
-        <template #reference>
-            <div class="header-icon-bar">
-                <HcIcon class="header-icon" name="question"/>
-            </div>
-        </template>
-        <div class="header-pover-menu-list">
-            <div class="list-item">
-                <span class="text">开启功能气泡提示</span>
-                <el-switch v-model="bubbleVal" @change="bubbleUpdate"/>
-            </div>
-            <div v-if="excelUrl" class="list-item" @click="excelPreviewClick">
-                <span class="text">查看系统操作文档</span>
-                <img :src="getAssetsHomeFile('word.png')" alt="" class="icon"/>
-                <img :src="getAssetsHomeFile('word1.png')" alt="" class="icon1"/>
-            </div>
-            <div v-if="videoUrl" class="list-item" @click="videoPreviewModal = true">
-                <span class="text">当前页面功能讲解</span>
-                <img :src="getAssetsHomeFile('video.png')" alt="" class="icon"/>
-                <img :src="getAssetsHomeFile('video1.png')" alt="" class="icon1"/>
-            </div>
-            <div class="list-item" @click="toOrderService">
-                <span class="text">工单服务\需求反馈</span>
-            </div>
-        </div>
-    </el-popover>
-    <!--当前页面功能讲解-->
-    <el-dialog v-model="videoPreviewModal" :before-close="videoPreviewModalClose" destroy-on-close width="62rem">
-        <video :src="videoUrl" autoplay="autoplay" class="preview-video" controls="controls">
-            您的浏览器不支持 video
-        </video>
-    </el-dialog>
-</template>
-
-<script setup>
-import {ref, watch, nextTick} from "vue";
-import {useRouter, useRoute} from 'vue-router'
-import {useAppStore} from "~src/store";
-import {getStoreValue} from '~src/utils/storage'
-import {getObjValue, getToObjVal} from "js-fast-way"
-
-//初始变量
-const router = useRouter()
-const useRoutes = useRoute()
-const useAppState = useAppStore()
-
-//相关变量
-const route = getObjValue(getStoreValue('route'))
-const bubbleVal = ref(useAppState.getBubble);
-const videoUrl = ref('')
-const excelUrl = ref('')
-const videoPreviewModal = ref(false)
-
-//监听
-watch(() => [
-    useAppState.getBubble,
-    useRoutes.name,
-], ([Bubble, routeName]) => {
-    bubbleVal.value = Bubble
-    getVideoUrl(routeName)
-    getExcelUrl(routeName)
-})
-
-//渲染完成
-nextTick(() => {
-    getVideoUrl(useRoutes?.name)
-    getExcelUrl(useRoutes?.name)
-})
-
-//取文档地址
-const getExcelUrl = (name) => {
-    excelUrl.value = getToObjVal(route, name, 'excelUrl')
-}
-
-//取视频地址
-const getVideoUrl = (name) => {
-    videoUrl.value = getToObjVal(route, name, 'videoUrl')
-}
-
-//开关值改变
-const bubbleUpdate = (val) => {
-    bubbleVal.value = val;
-    useAppState.setBubble(val);
-}
-
-//工单服务\需求反馈
-const toOrderService = () => {
-    router.push({name: 'order-service'});
-}
-
-// 获取assets静态资源
-const getAssetsHomeFile = (url) => {
-    const path = `../../assets/images/${url}`;
-    const modules = import.meta.globEager("../../assets/images/*");
-    return modules[path].default;
-}
-
-//关闭视频弹窗
-const videoPreviewModalClose = () => {
-    videoPreviewModal.value = false
-}
-
-//查看系统操作文档
-const excelPreviewClick = () => {
-    if (excelUrl.value) {
-        window.open(excelUrl.value, '_blank')
-    } else {
-        window?.$message.warning('暂无文档')
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.header-icon-bar {
-    position: relative;
-    height: 40px;
-    width: 40px;
-    border-radius: 100px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 26px;
-    cursor: pointer;
-    margin-right: 30px;
-    border: 1px solid #00000000;
-    background: #f1f5f8;
-    color: #202532;
-    box-shadow: var(--hc-shadow);
-}
-.hc-layout-box .hc-container-view.home .hc-header-view .hc-header-content .header-icon-bar {
-    border: 1px solid white;
-    color: inherit;
-    box-shadow: initial;
-    background: initial;
-}
-
-.header-pover-menu-list {
-    position: relative;
-    margin: -5px -12px;
-    .list-item {
-        position: relative;
-        padding: 10px 24px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        transition: background-color 0.2s;
-        .text {
-            flex: auto;
-        }
-        .icon, .icon1 {
-            width: 24px;
-            height: 24px;
-        }
-        .icon1 {
-            display: none;
-        }
-        &:hover {
-            color: #ffffff;
-            background-color: var(--el-color-primary);
-            .icon {
-                display: none;
-            }
-            .icon1 {
-                display: block;
-            }
-        }
-    }
-}
-.preview-video {
-    width: 100%;
-}
-</style>

src/layout/modules/MenuBar.vue

@@ -1,21 +1,12 @@
 <template>
     <el-menu :collapse="isCollapse" :default-active="curKey" class="hc-aside-menu" unique-opened>
-        <el-menu-item index="home-index" @click="MenuClick({code: 'home-index'})">
-            <div class="hc-aside-menu-item">
-                <div class="menu---item">
-                    <HcIcon :fill="curKey === 'home-index'" class="hc-menu-icon" name="home-3"/>
-                    <div class="name">首页</div>
-                </div>
-            </div>
-        </el-menu-item>
-        <MenuItem :collapse="isCollapse" :cur="curKey" :datas="datas" :msgCount="msgCount" @change="MenuClick"/>
+        <MenuItem :collapse="isCollapse" :cur="curKey" :datas="datas" @change="MenuClick"/>
     </el-menu>
 </template>
 
 <script setup>
 import {ref, watch} from "vue";
 import MenuItem from "./MenuItem.vue"
-import {getToken} from "~src/api/util/auth";
 
 const props = defineProps({
     datas: {
@@ -30,10 +21,6 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
-    msgCount: {
-        type: Object,
-        default: () => ({})
-    },
 })
 
 //初始变量
@@ -49,33 +36,24 @@ watch(() => [
     isCollapse.value = collapse
 })
 
-
 //事件
 const emit = defineEmits(['change'])
 const MenuClick = (item) => {
-    if (item?.code === 'to-archives-url') {
-        const token = getToken()
-        //refreshToken, accessToken
-        window.open(item?.path + '/#/auth?token=' + token, '_blank')
-    } else {
-        curKey.value = item?.code || '';
-        emit('change', item)
-    }
+    curKey.value = item?.code || '';
+    emit('change', item)
 }
 </script>
 
 <style lang="scss">
 .hc-aside-menu.el-menu {
-    --el-menu-bg-color: initial;
-    --el-menu-text-color: #838791;
-    --el-menu-active-color: #ffffff;
-    --el-menu-hover-text-color: var(--el-color-primary);
-    --el-menu-hover-bg-color: initial;
+    --el-menu-bg-color: transparent;
+    --el-menu-text-color: #ffffff;
+    --el-menu-active-color: var(--el-menu-text-color);
+    --el-menu-hover-text-color: var(--el-menu-text-color);
+    --el-menu-hover-bg-color: var(--el-color-primary);
     --el-menu-item-font-size: 16px;
     --el-menu-item-height: 48px;
-    margin-left: -10px;
     border-right: 0;
-    padding: 8px 0;
     &.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item,
     &.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item-group__title,
     &.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
@@ -83,20 +61,19 @@ const MenuClick = (item) => {
         padding-left: 0;
     }
     &.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
-        padding-right: 10px;
+        padding-right: 1px;
+        border: 0;
     }
     .el-sub-menu__title {
         padding: 0;
     }
     .el-menu-item, .el-sub-menu {
-        padding: 15px 0 0 30px !important;
         min-width: initial;
         transition: 0.2s;
         .hc-aside-menu-item {
             flex: 1;
             position: relative;
-            border-radius: 50px 0 0 50px;
-            padding: 0 16px;
+            padding: 0 20px;
             display: flex;
             align-items: center;
             transition: 0.2s;
@@ -104,17 +81,26 @@ const MenuClick = (item) => {
                 display: contents;
             }
             .hc-menu-icon {
-                font-size: 22px;
-                margin-right: 10px;
+                position: relative;
+                font-size: 18px;
+                margin-right: 8px;
                 line-height: initial;
             }
             .name {
                 flex: 1;
                 width: 0;
             }
-            .el-badge, .el-badge .el-badge__content {
-                vertical-align: initial;
-            }
+        }
+    }
+    .el-sub-menu .el-menu .el-menu-item {
+        padding-left: 24px !important;
+        padding-right: 1px;
+        font-size: 14px;
+        height: 46px;
+        line-height: initial;
+        .hc-aside-menu-item .hc-menu-icon {
+            margin-right: 6px;
+            font-size: 14px;
         }
     }
     .el-sub-menu .el-icon {
@@ -131,45 +117,28 @@ const MenuClick = (item) => {
         margin-top: 0;
         vertical-align: initial;
     }
-    .el-sub-menu .el-sub-menu__title .hc-aside-menu-item:hover,
-    .el-menu-item:not(.is-active) .hc-aside-menu-item:hover {
-        color: var(--el-color-primary);
-    }
-    .el-sub-menu.is-active > .el-sub-menu__title > .hc-aside-menu-item {
-        color: var(--el-color-primary);
+    .el-sub-menu.is-active > .el-sub-menu__title {
+        background-color: var(--el-color-primary-light-3);
     }
     .el-menu-item.is-active {
-        .hc-aside-menu-item {
-            --radius-size: 20px;
-            background-color: var(--el-color-primary);
-            box-shadow: 0 2px 8px 0 var(--hc-shadow-color-5);
-            &::before, &::after {
-                content: '';
-                display: block;
-                height: var(--radius-size);
-                width: var(--radius-size);
-                position: absolute;
-                background: radial-gradient(
-                        var(--radius-size) at var(--radius-size) 0px,
-                        transparent var(--radius-size),
-                        var(--el-color-primary) var(--radius-size)
-                );
-            }
-            &::before {
-                right: 0;
-                transform: scaleX(-1);
-                top: calc(-1 * var(--radius-size));
-                z-index: 999;
-            }
-            &::after {
-                right: 0;
-                bottom: calc(-1 * var(--radius-size));
-                transform: scale(-1);
-                z-index: 999;
-            }
+        background-color: var(--el-color-primary-dark-2);
+        &::after {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 3px;
+            height: 100%;
+            background-color: white;
         }
     }
+    .el-sub-menu .el-sub-menu__title:hover,
+    .el-menu-item:not(.is-active):hover {
+        background-color: var(--el-color-primary-dark-2);
+    }
 }
+
+//折叠状态
 .hc-aside-menu.el-menu--collapse {
     margin-left: 0;
     width: 90px;
@@ -228,7 +197,17 @@ const MenuClick = (item) => {
     .el-menu-item + .el-sub-menu,
     .el-sub-menu + .el-menu-item,
     .el-sub-menu + .el-sub-menu {
-        margin-top: 24px;
+        margin-top: 12px;
+    }
+    .el-sub-menu.is-active > .el-sub-menu__title {
+        background-color: initial;
+    }
+    .el-menu-item.is-active {
+        background-color: initial;
+    }
+    .el-sub-menu .el-sub-menu__title:hover,
+    .el-menu-item:not(.is-active):hover {
+        background-color: initial;
     }
     .el-sub-menu:not(.is-active):hover,
     .el-menu-item:not(.is-active):hover {
@@ -240,12 +219,7 @@ const MenuClick = (item) => {
     .el-menu-item.is-active, .el-sub-menu.is-active {
         .hc-aside-menu-item {
             color: #ffffff !important;
-            background: linear-gradient(90deg, var(--el-color-primary-light-5), var(--el-color-primary) 100%);
-            box-shadow: 0 2px 8px 0 var(--hc-shadow-color-5);
-            &::before, &::after {
-                content: '';
-                display: none;
-            }
+            background: var(--el-color-primary-dark-2);
         }
     }
 }

src/layout/modules/MenuItem.vue

@@ -7,12 +7,11 @@
                         <HcIcon :name="item?.source" :fill="curKey === item?.code" class="hc-menu-icon" v-if="item?.source"/>
                         <div class="name truncate" v-if="isCollapse">{{ item?.name.substring(0,2) }}</div>
                         <div class="name truncate" v-else>{{ item?.name }}</div>
-                        <el-badge :value="msgCount.allCount" v-if="item?.code === 'tasks' && msgCount?.allCount > 0"/>
                     </div>
                 </div>
                 <HcIcon name="arrow-down-s" ui="el-icon el-sub-menu__icon-arrow"/>
             </template>
-            <MenuItem :datas="item?.children" :cur="curKey" :msgCount="msgCount" @change="MenuClick"/>
+            <MenuItem :datas="item?.children" :cur="curKey" @change="MenuClick"/>
         </el-sub-menu>
         <el-menu-item :index="item?.code" v-else @click="MenuClick(item)">
             <div class="hc-aside-menu-item">
@@ -20,8 +19,6 @@
                     <HcIcon :name="item?.source" :fill="curKey === item?.code" class="hc-menu-icon" v-if="item?.source"/>
                     <div class="name truncate" v-if="isCollapse">{{ item?.name.substring(0,2) }}</div>
                     <div class="name truncate" v-else>{{ item?.name }}</div>
-                    <el-badge :value="msgCount.taskCount" v-if="item?.code === 'tasks-data' && msgCount?.taskCount > 0"/>
-                    <el-badge :value="msgCount.messageCount" v-if="item?.code === 'message-data' && msgCount?.messageCount > 0"/>
                 </div>
             </div>
         </el-menu-item>
@@ -31,6 +28,7 @@
 <script setup>
 import {ref,watch} from "vue";
 import MenuItem from "./MenuItem.vue"
+
 const props = defineProps({
     datas: {
         type: Array,
@@ -44,19 +42,6 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
-    msgCount: {
-        type: Object,
-        default: () => ({
-            allCount: 0,
-            taskCount: 0,
-            messageCount: 0,
-            messageCount_1:0,
-            messageCount_2:0,
-            messageCount_3:0,
-            messageCount_4:0,
-            messageCount_5:0,
-        })
-    },
 })
 //初始变量
 const curKey = ref(props.cur);

src/layout/modules/TopMenuBar.vue

@@ -19,14 +19,12 @@
 
 <script setup>
 import {onMounted, ref, watch} from "vue";
-import {useAppStore} from "~src/store";
 import {useRouter, useRoute} from 'vue-router'
 import {getStoreValue, setStoreValue} from '~src/utils/storage'
 
 //初始组合式
 const router = useRouter()
 const useRoutes = useRoute()
-const useAppState = useAppStore()
 
 //初始变量
 const barMenuData = ref(getStoreValue('bar-menu-datas') || []);
@@ -52,7 +50,7 @@ watch(() => [
 //设置菜单数据
 const setBarMenuData = () => {
     const {key, path, title} = barRoutes.value
-    if (['home', 'home-index'].indexOf(key) === -1) {
+    if (['home'].indexOf(key) === -1) {
         const index = barMenuData.value.findIndex(item => item.key === key)
         if (index === -1) {
             barMenuData.value.push({path, key: key, title: title})
@@ -138,7 +136,7 @@ const barMenuCloseClick = (item, index) => {
         position: relative;
         .bar-menu-btn {
             position: relative;
-            color: #b3b3b3;
+            color: #9d9b9b;
             padding-left: 10px;
             padding-right: 6px;
             height: 32px;
@@ -146,19 +144,19 @@ const barMenuCloseClick = (item, index) => {
             display: flex;
             align-items: center;
             justify-content: center;
-            background: #ffffff;
-            border: 1px solid #ffffff;
+            background: var(--el-color-primary-light-9);
+            border: 1px solid var(--el-color-primary-light-9);
             border-radius: 4px;
             user-select: none;
             cursor: pointer;
             white-space: nowrap;
             transition: background 0.3s, color 0.3s;
             &:hover:not([class*='cur']) {
-                background: var(--el-color-primary-light-9);
+                background: var(--el-color-primary-light-8);
                 color: #838791;
             }
             &:active:not([class*='cur']) {
-                background: var(--el-color-primary-light-8);
+                background: var(--el-color-primary-light-7);
                 color: #838791;
             }
             &.cur {

src/layout/modules/UserInfoBar.vue

@@ -70,6 +70,11 @@ const options = [
         label: "个人中心",
         icon: 'user-3'
     },
+    {
+        key: "config",
+        label: "主题设置",
+        icon: 'palette'
+    },
     {
         key: "logout",
         label: "退出登录",
@@ -82,6 +87,10 @@ const emit = defineEmits(['change'])
 const handleSelect = (key) => {
     if (key === 'my') {
         router.push({name: 'user-index'});
+    } else if (key === 'config') {
+        router.push({
+            path: '/user/config'
+        });
     } else if (key === 'logout') {
         LogOut().then();
         window.$message?.info('退出成功');
@@ -100,8 +109,8 @@ const handleSelect = (key) => {
     padding-left: 24px;
     outline: none;
     .user-avatar {
-        width: 40px;
-        height: 40px;
+        width: 34px;
+        height: 34px;
         border-radius: 50%;
         background: white;
         object-fit: cover;
@@ -116,28 +125,7 @@ const handleSelect = (key) => {
         font-size: 20px;
         color: #202532;
     }
-    &::before {
-        position: absolute;
-        content: '';
-        left: 0;
-        width: 0;
-        height: 24px;
-        border-left: 1px solid #ccd0de;
-    }
-}
-.hc-layout-box .hc-container-view.home .hc-header-view .hc-header-content .user-info-bar {
-    color: inherit;
-    .user-name {
-        color: white;
-    }
-    .arrow-icon {
-        color: white;
-    }
-    &::before {
-        border-left: 1px solid white;
-    }
 }
-
 .hc-dropdown-item {
     display: flex;
     align-items: center;

src/main.js

@@ -12,17 +12,16 @@ import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import 'dayjs/locale/zh-cn'
 
+//hc-vue3-ui
+import HcVue3UI from 'hc-vue3-ui'
+import 'hc-vue3-ui/dist/index.css'
+
 //挂载全局
 import {setupComponents} from './components/index'
 
 //导入其它样式
-//import "./styles/font/index.scss"
 import 'remixicon/fonts/remixicon.css'
-//import "./styles/icon/index.scss"
-//import "./styles/index.scss"
-
-import HcVue3UI from 'hc-vue3-ui'
-import 'hc-vue3-ui/dist/index.css'
+import "./styles/index.scss"
 
 //创建实例
 async function bootstrap() {

src/router/menus.js

@@ -0,0 +1,46 @@
+export default [
+    {
+        source: 'home-3',
+        name: '门户',
+        code: 'home',
+        children: [
+            {
+                source: 'home-3',
+                name: '普通权限',
+                code: 'home-index',
+            },
+            {
+                source: 'home-3',
+                name: '领导权限',
+                code: 'home-admin',
+            },
+            {
+                source: 'home-3',
+                name: '任务管理',
+                code: 'home-task',
+            },
+            {
+                source: 'home-3',
+                name: '公司经营预算',
+                code: 'home-budget',
+            },
+        ]
+    },
+    {
+        source: 'home-3',
+        name: '个人中心',
+        code: 'user',
+        children: [
+            {
+                source: 'home-3',
+                name: '个人资料',
+                code: 'user-index',
+            },
+            {
+                source: 'home-3',
+                name: '主题设置',
+                code: 'user-config',
+            },
+        ]
+    },
+]

src/router/modules/base.js

@@ -16,20 +16,53 @@ export default [
         path: '/home',
         name: 'home',
         redirect: '/home/index',
-        meta: {title: '首页'},
+        meta: {title: '门户'},
         component: Layout,
         children: [
             {
                 path: '/home/index',
                 name: 'home-index',
-                meta: {title: '首页'},
+                meta: {title: '普通权限'},
                 component: () => import('~src/views/home/index.vue')
             },
             {
-                path: '/home/config',
-                name: 'home-config',
-                meta: {title: '系统设置'},
-                component: () => import('~src/views/home/config.vue')
+                path: '/home/admin',
+                name: 'home-admin',
+                meta: {title: '领导权限'},
+                component: () => import('~src/views/home/admin.vue')
+            },
+            {
+                path: '/home/task',
+                name: 'home-task',
+                meta: {title: '任务管理'},
+                component: () => import('~src/views/home/task.vue')
+            },
+            {
+                path: '/home/budget',
+                name: 'home-budget',
+                meta: {title: '公司经营预算'},
+                component: () => import('~src/views/home/budget.vue')
+            }
+        ],
+    },
+    {
+        path: '/user',
+        name: 'user',
+        redirect: '/user/index',
+        meta: {title: '个人中心'},
+        component: Layout,
+        children: [
+            {
+                path: '/user/index',
+                name: 'user-index',
+                meta: {title: '个人资料'},
+                component: () => import('~src/views/user/index.vue')
+            },
+            {
+                path: '/user/config',
+                name: 'user-config',
+                meta: {title: '主题设置'},
+                component: () => import('~src/views/user/config.vue')
             },
         ],
     },

src/router/modules/token.js

@@ -2,5 +2,9 @@
 export default [
     'home',
     'home-index',
-    'home-config',
+    'home-admin',
+    'home-task',
+    'home-budget',
+    'user-index',
+    'user-config',
 ]

src/store/modules/user.js

@@ -40,7 +40,7 @@ export const initUserConfigInfo = async () => {
     }
     const res = getObjValue(data)
     if (res?.theme) {
-        const {theme, color, shotWebRtc, fullScreen, opinionView} = res
+        const {theme, color} = res
         //设置主题
         store.setTheme(theme)
         //设置模式

src/styles/app/_color.scss

@@ -1,126 +0,0 @@
-.bg-main {
-    background-color: var(--el-color-primary) !important;
-    color: white !important;
-}
-.text-main {
-    color: var(--el-color-primary) !important;
-}
-
-@each $name, $value in $colors {
-    //主色
-    .color-#{$name} {
-        @for $i from 1 to 10 {
-            --hc-shadow-color-#{$i}: #{rgba($value, 0.1 * $i)};
-        }
-    }
-    //背景颜色
-    .bg-#{$name} {
-        background-color: $value !important;
-        @if $name == 'yellow'{
-            color: $dark-3 !important;
-        } @else if $name == 'white' {
-            color: $dark-3 !important;
-        } @else {
-            color: white !important;
-        }
-    }
-    //字体颜色
-    .text-#{$name} {
-        color: $value !important;
-    }
-    //渐变高亮色
-    .bg-#{$name}-light {
-        background-image: linear-gradient(45deg, white, mix(white, $value, 85%)) !important;
-        color: $value !important;
-    }
-    .text-#{$name}-light {
-        background: linear-gradient(45deg, white, mix(white, $value, 85%));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        color: transparent !important;
-    }
-
-    //透明度
-    @if $name != 'white' {
-        @for $i from 1 to 10 {
-            @if $i == 1 {
-                //浅色
-                .bg-#{$name}-thin, .bg-#{$name}-thin-1{
-                    background-color:rgba($value, 0.1) !important;
-                    color: $value !important;
-                }
-                .text-#{$name}-thin, .text-#{$name}-thin-1 {
-                    color: rgba($value, 0.1) !important;
-                }
-            } @else {
-                //浅色
-                .bg-#{$name}-thin-#{$i} {
-                    background-color: #{rgba($value, 0.1 * $i)} !important;
-                    @if $i > 4 {
-                        color: white !important;
-                    } @else {
-                        color: $value !important;
-                    }
-                }
-                .text-#{$name}-thin-#{$i} {
-                    color: #{rgba($value, 0.1 * $i)} !important;
-                }
-            }
-        }
-    }
-    //混合渐变色
-    @each $name_sub, $val_sub in $colors {
-        @if $name != $name_sub {
-            .bg-#{$name}-#{$name_sub} {
-                background-image: linear-gradient(130deg, $value, $val_sub) !important;
-                color: white !important;
-            }
-            .text-#{$name}-#{$name_sub} {
-                background: linear-gradient(130deg, $value, $val_sub);
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-                color: transparent;
-            }
-        }
-    }
-    //条纹背景
-    .bg-#{$name}-stripes {
-        background-color: #{mix(rgba(255, 255, 255, 0), desaturate($value, 45%), 93%)} !important;
-        background-image: linear-gradient(225deg,
-            #{mix(rgba(255, 255, 255, 0), $value, 50%)} 10%,
-            transparent 0, transparent 50%,
-            #{mix(rgba(255, 255, 255, 0), $value, 50%)} 0,
-            #{mix(rgba(255, 255, 255, 0), $value, 50%)} 60%,
-            transparent 0, transparent
-        ) !important;
-        background-size: 7.07px 7.07px !important;
-    }
-}
-
-@each $name, $value in $darks {
-    .bg-#{$name} {
-        background-color: $value !important;
-        color: white !important;
-    }
-    .text-#{$name} {
-        color: $value !important;
-    }
-}
-
-@each $name, $value in $grays {
-    .bg-#{$name} {
-        background-color: $value !important;
-        color: $dark-3 !important;
-    }
-    .text-#{$name} {
-        color: $value !important;
-    }
-}
-
-.bg-none {
-    background: transparent;
-    color: inherit !important;
-}
-.text-none {
-    color: inherit !important;
-}

src/styles/app/_text.scss

@@ -1,100 +0,0 @@
-.text {
-	&-cut {
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-	}
-	@at-root [class*='text-linecut'] {
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 2;
-		overflow: hidden;
-		word-break: break-all;
-	}
-	@for $i from 2 through 10 {
-		&-linecut-#{$i} {
-			-webkit-line-clamp: #{$i};
-		}
-	}
-	&-justify {
-		text-align: justify;
-	}
-	&-justify-line {
-		text-align: justify;
-		line-height: 0.5em;
-		margin-top: 0.5em;
-		&::after {
-			content: '.';
-			display: inline-block;
-			width: 100%;
-		}
-	}
-	&-Abc {
-		text-transform: Capitalize;
-	}
-	&-ABC {
-		text-transform: Uppercase;
-	}
-	&-abc {
-		text-transform: Lowercase;
-	}
-	&-del, &-line {
-		text-decoration: line-through;
-	}
-	&-bottomline {
-		text-decoration: underline;
-	}
-	&-italic {
-		font-style: italic;
-	}
-	&-style-none {
-		text-decoration: none;
-	}
-	&-break {
-		word-break: break-word;
-		overflow-wrap: break-word;
-	}
-	&-reset {
-		color: inherit;
-	}
-	&-price::before {
-		content: '¥';
-		font-size: 80%;
-		margin-right: 2px;
-	}
-	&-hide {
-		font: 0/0 a;
-		color: transparent;
-		text-shadow: none;
-		background-color: transparent;
-		border: 0;
-	}
-    &-hover {
-        cursor: pointer;
-        transition: color 0.2s ease-out;
-        &:hover {
-            color: var(--el-color-primary);
-        }
-    }
-    &-link {
-        cursor: pointer;
-        color: var(--el-color-primary);
-        transition: color 0.3s;
-        outline: none;
-        border: 0;
-        &:hover {
-            color: var(--el-color-primary-dark-2);
-        }
-    }
-    &-link-line {
-        cursor: pointer;
-        color: var(--el-color-primary);
-        text-decoration: underline;
-        transition: color 0.3s;
-        outline: none;
-        border: 0;
-        &:hover {
-            color: var(--el-color-primary-dark-2);
-        }
-    }
-}

src/styles/app/_var.scss

@@ -1,74 +0,0 @@
-$white:   	#ffffff;
-$blue:   	#0081ff;
-$cyan:   	#37c0fe;
-$green:   	#1ECC95;
-$purple:   	#8044de;
-$mauve:   	#b745cb;
-$pink:   	#e03997;
-$red:   	#e54d42;
-$orange:   	#f37b1d;
-$yellow:   	#fbbd08;
-$brown:   	#a5673f;
-$grey:   	#8799a3;
-
-//基础颜色数组
-$colors: (
-    'white':    $white,
-    'blue':  	$blue,
-    'cyan':  	$cyan,
-    'green':  	$green,
-    'purple':  	$purple,
-    'mauve':  	$mauve,
-    'pink':  	$pink,
-    'red':  	$red,
-    'orange':  	$orange,
-    'yellow':  	$yellow,
-    'brown':  	$brown,
-    'grey':  	$grey
-);
-
-$gray-a:	#aaaaaa;
-$gray-b:    #bbbbbb;
-$gray-c:    #cccccc;
-$gray-d:    #dddddd;
-$gray-e:    #eeeeee;
-$gray-f: 	#f8f9fa;
-$gray-g: 	#f8fafc;
-
-$grays: (
-    'gray':  	$gray-a,
-    'gray-a':  	$gray-a,
-    'gray-b':  	$gray-b,
-    'gray-c':  	$gray-c,
-    'gray-d':  	$gray-d,
-    'gray-e':  	$gray-e,
-    'gray-f':  	$gray-f,
-    'gray-g':  	$gray-g
-);
-
-//灰度
-$dark-1:    #111111;
-$dark-2:    #222222;
-$dark-3:    #333333;
-$dark-4:    #444444;
-$dark-5:    #555555;
-$dark-6:    #666666;
-$dark-7:    #777777;
-$dark-8:    #888888;
-$dark-9:    #999999;
-
-$darks: (
-    'dark':  	$dark-1,
-    'dark-1':  	$dark-1,
-    'dark-2':  	$dark-2,
-    'dark-3':  	$dark-3,
-    'dark-4':  	$dark-4,
-    'dark-5':  	$dark-5,
-    'dark-6':  	$dark-6,
-    'dark-7':  	$dark-7,
-    'dark-8':  	$dark-8,
-    'dark-9':  	$dark-9
-);
-
-$inherits: inherit !important;
-$initials: initial !important;

src/styles/app/element.scss

@@ -1,707 +0,0 @@
-//饿了么UI组件的样式重绘
-.el-button[block] {
-    width: 100%;
-}
-.el-button .hc-icon-i {
-    margin-right: 4px;
-}
-.el-button.is-loading .hc-icon-i {
-    display: none;
-}
-//主色
-.el-button--primary.is-link,
-.el-button--primary.is-plain,
-.el-button--primary.is-text {
-    --el-button-border-color: transparent;
-    --el-button-hover-text-color: var(--el-color-primary);
-    --el-button-hover-bg-color: var(--el-color-primary-light-8);
-    --el-button-hover-border-color: transparent;
-}
-//红色
-.el-button--danger.is-link,
-.el-button--danger.is-plain,
-.el-button--danger.is-text {
-    --el-button-border-color: transparent;
-    --el-button-hover-text-color: var(--el-color-danger);
-    --el-button-hover-bg-color: var(--el-color-danger-light-8);
-    --el-button-hover-border-color: transparent;
-}
-//绿色
-.el-button--success.is-link,
-.el-button--success.is-plain,
-.el-button--success.is-text {
-    --el-button-border-color: transparent;
-    --el-button-hover-text-color: var(--el-color-success);
-    --el-button-hover-bg-color: var(--el-color-success-light-8);
-    --el-button-hover-border-color: transparent;
-}
-.el-button + .el-button {
-    margin-left: 20px;
-}
-.el-button--small + .el-button--small {
-    margin-left: 5px;
-}
-
-//单选框、多选框
-.el-checkbox.size-xl .el-checkbox__inner,
-.el-radio.size-xl .el-radio__inner {
-    width: 18px;
-    height: 18px;
-}
-.el-checkbox.size-xl .el-checkbox__label,
-.el-radio.size-xl .el-radio__label {
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.el-checkbox.size-xl .el-checkbox__inner::after {
-    height: 10px;
-    left: 6px;
-    top: 1px;
-}
-.el-radio.size-xl .el-radio__inner::after {
-    width: 8px;
-    height: 8px;
-}
-
-//消息提示
-.el-message {
-    --el-message-padding: 10px 20px;
-    border: 0;
-    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.012), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-}
-
-//按钮重绘
-.el-button[hc-btn] {
-    border-radius: 6px;
-    padding: 8px 20px;
-    font-weight: 400;
-    height: 40px;
-    border: 1px solid #f1f5f8;
-    box-shadow: var(--hc-shadow);
-    &.el-button--small {
-        height: 26px;
-        padding: 5px 11px;
-        font-size: 12px;
-    }
-    &[_icon] .hc-icon-i {
-        margin-right: 0;
-    }
-    &[_icon].el-button--small {
-        height: 26px;
-        width: 26px;
-        padding: 3px;
-        font-size: 18px;
-        border-radius: 3px;
-    }
-    &[text-white] {
-        --el-button-text-color: white !important;
-        --el-button-hover-text-color: white !important;
-    }
-    &.el-button--primary {
-        background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
-        background-size: 200%;
-        transition: background-position .5s;
-        &:hover {
-            background-position: 100% 0;
-        }
-    }
-    &.is-loading:not([class*='el-button--']) {
-        --el-button-bg-color: #f3f3f3;
-        --el-button-text-color: #8c9099;
-    }
-    &.is-disabled:not([class*='el-button--']) {
-        --el-button-disabled-text-color: #bfbfbf;
-        --el-button-disabled-bg-color: #f3f3f3;
-    }
-    &:not([class*='el-button--']) {
-        --el-button-bg-color: #f1f5f8;
-        --el-button-text-color: #838791;
-        --el-button-hover-text-color: #838791;
-        --el-button-active-text-color: #838791;
-        --el-button-hover-bg-color: var(--el-color-primary-light-9);
-        --el-button-active-bg-color: var(--el-color-primary-light-8);
-    }
-    &.el-button--primary.is-plain {
-        --el-button-text-color: var(--el-color-primary);
-        --el-button-bg-color: var(--el-color-primary-light-9);
-        --el-button-hover-text-color: var(--el-color-primary);
-        --el-button-hover-bg-color: var(--el-color-primary-light-8);
-        --el-button-active-text-color: var(--el-color-primary);
-        --el-button-active-bg-color: var(--el-color-primary-light-7);
-    }
-    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
-        color: var(--el-button-disabled-text-color);
-        cursor: not-allowed;
-        background-image: none;
-        background-color: var(--el-button-disabled-bg-color);
-        border-color: var(--el-button-disabled-border-color);
-    }
-}
-
-//表单
-.el-form {
-    position: relative;
-    overflow: hidden;
-    .hc-form-item {
-        position: relative;
-        display: flex;
-        .el-form-item {
-            flex: 1;
-            margin-right: 24px;
-        }
-        .el-form-item + .el-form-item {
-            margin-left: 24px;
-        }
-        .el-form-item:last-child {
-            margin-right: 0;
-        }
-    }
-    &.el-form--label-top .hc-form-item .el-form-item .el-form-item__label {
-        position: relative;
-        .solt-label {
-            position: relative;
-            width: calc(100% - 50px);
-        }
-        .solt-extra {
-            position: absolute;
-            right: 0;
-            top: 0;
-        }
-    }
-}
-
-//滚动条
-.el-scrollbar {
-    overflow: initial;
-    .el-scrollbar__bar.is-vertical {
-        //right: -16px;
-    }
-    .el-scrollbar__bar.is-horizontal {
-        //bottom: -20px;
-    }
-}
-
-.el-date-editor.el-input.block,
-.el-date-editor.block .el-input__wrapper {
-    width: 100%;
-}
-
-.el-autocomplete.block {
-    width: 100%;
-}
-
-//个人中心项目列表
-.hc-project-menu.el-menu {
-    --el-menu-level: 0;
-    background-color: initial;
-    border: initial;
-    .el-sub-menu {
-        border: 1px solid #e9e9e9;
-        border-radius: 3px;
-        margin-bottom: 20px;
-        .el-sub-menu__title .hc-menu-icon {
-            font-size: 20px;
-            margin-right: 10px;
-        }
-        &.is-opened .el-sub-menu__title {
-            color: var(--el-color-primary);
-            background-color: var(--el-color-primary-light-8);
-        }
-        .el-menu {
-            background-color: initial;
-        }
-        .el-menu-item {
-            padding-left: 50px;
-        }
-    }
-    .el-menu-item.is-active {
-        color: var(--el-menu-active-color);
-        background-color: var(--el-color-primary-light-9);
-        .hc-menu-icon {
-            position: absolute;
-            font-size: 16px;
-            left: 22px;
-        }
-    }
-}
-
-//表格
-.el-table[hc] {
-    --el-table-bg-color: initial;
-    --el-table-header-bg-color: #DAE8F3;
-    --el-table-header-text-color: #50545E;
-    --el-table-tr-bg-color: #F1F5F8;
-    --el-fill-color-lighter: #E7EEF4;
-    --el-table-text-color: #666666;
-    --el-table-row-hover-bg-color: var(--el-color-primary-light-9);
-    th.el-table__cell > .cell {
-        font-weight: 400;
-    }
-    .el-table__cell {
-        padding: 12px 0;
-        .el-checkbox {
-            --el-checkbox-input-height: 18px;
-            --el-checkbox-input-width: 18px;
-            --el-checkbox-font-size: 16px;
-            --el-checkbox-border-radius: 3px;
-            .el-checkbox__inner::after {
-                top: 3px;
-                left: 6px;
-            }
-        }
-        .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
-            top: 7px;
-        }
-    }
-    &.el-table--border {
-        --el-table-border-color: #e9e9e9;
-    }
-}
-.el-table[hc]:not([class*='el-table--border']) {
-    .el-table__inner-wrapper::before {
-        background-color: transparent;
-    }
-}
-
-//下拉框
-.el-select[block] {
-    width: 100%;
-}
-
-//工单服务的时间轴
-.time-line-box .el-timeline.hc-time-line {
-    padding-left: 5px;
-    padding-top: 5px;
-    .el-timeline-item {
-        padding-bottom: 24px;
-        .el-timeline-item__tail {
-            top: 28px;
-            left: 6px;
-            height: calc(100% - 36px);
-            border-width: 1px;
-            border-color: #838791;
-        }
-        .el-timeline-item__node {
-            display: none;
-        }
-        .el-timeline-item__wrapper {
-            padding-left: 38px;
-            .el-timeline-item__content {
-                .timeline-item-icon {
-                    position: absolute;
-                    width: 24px;
-                    height: 24px;
-                    left: -5px;
-                    border: 1px solid #838791;
-                    border-radius: 50px;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    color: #838791;
-                    .check-icon {
-                        font-size: 18px;
-                    }
-                }
-                .reply-name {
-                    color: #838791;
-                    font-size: 18px;
-                }
-                .reply-content {
-                    color: #838791;
-                    margin-top: 5px;
-                }
-            }
-        }
-        &.success {
-            .el-timeline-item__tail {
-                border-color: var(--el-color-primary);
-            }
-            .el-timeline-item__wrapper .el-timeline-item__content .timeline-item-icon {
-                color: var(--el-color-primary);
-                border: 1px solid var(--el-color-primary);
-            }
-        }
-        &.primary {
-            .el-timeline-item__wrapper .el-timeline-item__content {
-                .reply-name {
-                    color: #1A1A1A;
-                }
-                .timeline-item-icon {
-                    background-color: var(--el-color-primary);
-                    border: 1px solid var(--el-color-primary);
-                    color: #ffffff;
-                }
-            }
-        }
-    }
-}
-
-//滚动条
-/*.el-scrollbar {
-    scroll-behavior: smooth;
-    .el-scrollbar__wrap--hidden-default {
-        scroll-behavior: smooth;
-    }
-}*/
-
-//弹窗
-.el-overlay-dialog {
-    .el-dialog.hc-modal-border {
-        .el-dialog__header {
-            padding-bottom: var(--el-dialog-padding-primary);
-            border-bottom: 1px solid #EEEEEE;
-            margin-right: 0;
-        }
-        .el-dialog__footer {
-            border-top: 1px solid #EEEEEE;
-            padding-top: var(--el-dialog-padding-primary);
-        }
-    }
-    .el-dialog.hc-modal-nop {
-        .el-dialog__body {
-            padding: 0;
-        }
-    }
-}
-
-//上传
-.el-upload-list.el-upload-list--picture-card {
-    --el-upload-list-picture-card-size: 88px;
-    .el-upload--picture-card {
-        --el-upload-picture-card-size: 88px;
-        .hc-upload-icon {
-            font-size: 39px;
-        }
-    }
-}
-
-//头像
-.el-avatar {
-    color: initial !important;
-    background: initial !important;
-}
-
-//表格
-.hc-table-ref-box {
-    position: relative;
-    display: inline-grid;
-    border: 1px solid #e9e9e9;
-    width: 100%;
-}
-
-//naiveui 鼠标右键菜单的图标
-.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix.n-dropdown-option-body__prefix--show-icon {
-    font-size: 22px;
-}
-
-//树
-.el-tree.hc-tree-node, .el-tree.hc-tree-node-v2 {
-    --el-fill-color-blank: transparent;
-    --el-tree-node-hover-bg-color: var(--el-color-primary-light-9);
-    --el-tree-text-color: #50545E;
-    --el-tree-expand-icon-color: #838791;
-    background: var(--el-fill-color-blank);
-    color: var(--el-tree-text-color);
-    .el-tree-node__content {
-        border-radius: 2px;
-    }
-    &.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-        background-color: var(--el-color-primary-light-7);
-    }
-    .el-tree-node__expand-icon {
-        font-size: 16px;
-    }
-    .el-tree-node__children {
-        overflow: visible !important;
-    }
-}
-.el-alert .el-alert__icon {
-    vertical-align: middle;
-}
-//弹窗提示
-.el-dialog .el-dialog__body {
-    position: relative;
-    max-height: 60vh;
-    overflow: auto;
-    .el-alert {
-        margin-top: -10px;
-        margin-bottom: 20px;
-    }
-
-}
-.el-dialog.hc-modal-table .el-dialog__body {
-    height: 60vh;
-}
-
-//上传文件列表
-.hc-upload-border {
-    .hc-upload-loading {
-        position: relative;
-    }
-    .el-upload-list {
-        border-top: 1px solid #f1f1f1;
-        margin-top: 24px;
-        padding-top: 24px;
-    }
-}
-
-//伪表单
-.el-form-item--large .el-form-item__content {
-    .form-item-div, .form-item-dashed {
-        position: relative;
-        color: #606266;
-        font-size: 14px;
-        padding: 0 12px;
-        height: 40px;
-        width: 100%;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        &.hover {
-            cursor: pointer;
-            transition: border 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
-        }
-    }
-    .form-item-div {
-        border: 1px solid #dddfe6;
-    }
-    .form-item-dashed {
-        border: 1px dashed #dddfe6;
-    }
-    .form-item-div.hover, .form-item-dashed.hover {
-        &:hover {
-            border-color: var(--el-color-primary);
-        }
-    }
-}
-
-//无名称
-.el-form-item[no-label] .el-form-item__label-wrap {
-    margin-left: 0 !important;
-}
-
-.el-form--large.el-form--label-top .el-form-item .el-form-item__label {
-    min-height: 22px;
-}
-
-.el-form-item--large.mb-0 {
-    margin-bottom: 0;
-}
-
-//输入框验证问题
-.el-input.is-error .el-input__wrapper {
-    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
-}
-
-//表单输入框和按钮组合
-.el-form-item.hc-input-button-group .el-form-item__content {
-    .el-input {
-        flex: 1;
-        .el-input__wrapper {
-            border-radius: 4px 0 0 4px;
-        }
-    }
-    .el-button {
-        border-radius: 0 4px 4px 0;
-    }
-}
-
-//设置表单的上传
-.hc-upload-table-form {
-    position: relative;
-    height: inherit;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .el-upload {
-        position: relative;
-        flex: 1;
-        height: inherit;
-        color: #ccc;
-        .hc-table-form-icon {
-            font-size: 24px;
-            font-weight: 100;
-        }
-        .hc-table-form-img {
-            width: 100%;
-            height: inherit;
-        }
-        .hc-table-form-del {
-            position: absolute;
-            right: 0;
-            top: 0;
-        }
-    }
-}
-
-//表单提示样式
-.el-popper.is-customized {
-    padding: 6px 12px;
-    background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
-}
-
-.el-popper.is-customized .el-popper__arrow::before {
-    background: linear-gradient(45deg, #b2e68d, #bce689);
-    right: 0;
-}
-
-// 树样式
-.hc-tree-node, .el-tree.hc-tree-node-v2 {
-    .data-custom-tree-node {
-        position: relative;
-        display: flex;
-        align-items: center;
-        width: 100%;
-        color: var(--el-text-color-primary);
-        .label {
-            flex: auto;
-            font-size: 16px;
-            .hc-tree-node-type {
-                display: inline-block;
-                background: #7729F5;
-                font-size: 14px;
-                color: white;
-                width: 20px;
-                height: 20px;
-                border-radius: 5px;
-                text-align: center;
-                line-height: 20px;
-                margin-right: 8px;
-            }
-        }
-        .label.level-name {
-            font-size: 18px;
-            font-weight: bold;
-        }
-    }
-    .el-tree-node__content {
-        height: 28px;
-    }
-    .el-tree-node__label {
-        flex: 1;
-        user-select: none;
-    }
-    &.tree-line .el-tree-node.is-expanded.is-current.is-focusable {
-        background: #cacaca;
-        border-radius: 4px;
-    }
-}
-
-.ui-drag-modal-box .hc-image-preview-box.ui-drag-modal-dialog .ui-drag-modal-dialog-body {
-    .hc-image-preview-view {
-        position: relative;
-        overflow: hidden;
-        height: 100%;
-        width: 100%;
-        .el-image-viewer__wrapper {
-            position: relative;
-            width: 100%;
-            height: 100%;
-            .el-image-viewer__mask {
-                border-radius: 3px;
-                box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.10);
-            }
-            .el-image-viewer__close {
-                display: none;
-            }
-            .el-image-viewer__actions {
-                bottom: 10px;
-            }
-        }
-    }
-}
-
-//下拉框的滚动条
-.el-select__popper.el-popper .el-select-dropdown .el-scrollbar .el-scrollbar__bar.is-vertical {
-    right: 1px;
-}
-
-.el-loading-mask {
-    z-index: 99999;
-}
-
-.scroll-bar-right-16.el-scrollbar {
-    .el-scrollbar__bar {
-        right: -16px;
-    }
-}
-
-//设置表单样式
-.hc-excel-table-form-view {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    table {
-        // width: 100%;
-    }
-    td {
-        padding: 6px;
-        font-family: "EUDC", 宋体, v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
-        .el-input {
-            background-color: #ffffff !important;
-            border-radius: 3px;
-            color: #606266;
-            .el-input__wrapper {
-                background-color: inherit;
-                caret-color: var(--el-color-primary);
-            }
-            .el-input__suffix-inner {
-                width: 18px;
-            }
-        }
-        .el-textarea {
-            width: 100%;
-            height: 100%;
-            .el-textarea__inner {
-                min-height: initial !important;
-                background-color: #ffffff;
-                border-radius: 3px;
-                color: #606266;
-                height: 100%;
-                caret-color: var(--el-color-primary);
-            }
-        }
-        //日期选择框
-        .el-date-editor.el-input .el-input__wrapper,
-        .el-date-editor.el-date-editor--datetimerange.el-input__wrapper {
-            height: 100%;
-            width: 100%;
-        }
-        //焦点
-        .el-input .el-input__wrapper.is-focus, .el-input .el-input__wrapper:hover,
-        .el-textarea .el-textarea__inner:hover {
-            box-shadow: 0 0 0 1.5px var(--el-input-focus-border-color) inset;
-            background-color: #eddac4;
-        }
-        //公式
-        &[gscolor] {
-            .el-input, .el-textarea .el-textarea__inner {
-                background-color: #dcdcdc !important;
-            }
-        }
-        //文本选中颜色
-        .el-input .el-input__wrapper input,
-        .el-textarea textarea {
-            &::selection {
-                background: var(--el-color-primary-light-9);
-                color: var(--el-color-primary);
-            }
-            &::-moz-selection {
-                background: var(--el-color-primary-light-9);
-                color: var(--el-color-primary);
-            }
-        }
-        //下拉框
-        .el-select {
-            width: 100%;
-            height: 100%;
-        }
-    }
-    //非输入框颜色
-    td:not([titlexx]), td[titlexx*=''],
-    td:not([title]), td[title*=''] {
-        background-color: #f1f5f8 !important;
-    }
-}
-

src/styles/app/main.scss

@@ -1,253 +0,0 @@
-html, body, #app {
-    height: 100%;
-    background-color: #F1F5F8;
-}
-* {
-    padding: 0;
-    margin: 0;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    /* 滚动条凹槽的颜色，还可以设置边框属性 */
-    &::-webkit-scrollbar-track-piece {
-        background-color: #f8f8f8;
-        -webkit-border-radius: 2em;
-        -moz-border-radius: 2em;
-        border-radius: 2em;
-    }
-    /* 滚动条的宽度 */
-    &::-webkit-scrollbar {
-        width: 9px;
-        height: 9px;
-    }
-    /* 滚动条的设置 */
-    &::-webkit-scrollbar-thumb {
-        background-color: #ddd;
-        background-clip: padding-box;
-        -webkit-border-radius: 2em;
-        -moz-border-radius: 2em;
-        border-radius: 2em;
-    }
-    /* 滚动条鼠标移上去 */
-    &::-webkit-scrollbar-thumb:hover {
-        background-color: #bbb;
-    }
-}
-
-.us-se-no {
-    user-select: none;
-}
-
-.lr-dialog-footer {
-    position: relative;
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    .left {
-        .el-button + .el-button {
-            margin-left: 10px;
-        }
-    }
-}
-
-.hc-flex-column {
-    display: flex;
-    flex-direction: column;
-}
-
-.hc-sticky-box {
-    position: sticky;
-    z-index: 99;
-    top: 0;
-}
-
-.pover-menu-list {
-    position: relative;
-    .list-item {
-        position: relative;
-        border-radius: 5px;
-        padding: 10px 14px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        transition: color 0.3s, background-color 0.3s;
-        .text {
-            flex: auto;
-            margin-left: 0;
-            margin-right: 20px;
-        }
-        i {
-            font-size: 22px;
-        }
-        &:hover {
-            color: var(--el-color-primary);
-            background-color: var(--el-color-primary-light-7);
-        }
-    }
-}
-
-#toolPanel, #optionPanel {
-    border-radius: 5px;
-    box-shadow: 0 .5em 1em rgba(0, 0, 0, 0.15);
-}
-
-.el-radio-group .el-radio {
-    margin-right: 10px;
-}
-
-.bg-card-main {
-    background-color: var(--hc-bg-color);
-}
-
-.hc-list-box {
-    position: relative;
-    .item {
-        position: relative;
-        display: flex;
-        align-items: center;
-        .label {
-            flex: 1;
-        }
-        &.item {
-            margin-top: 15px;
-        }
-    }
-}
-
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.5s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-
-/* fade-transform */
-.fade-transform-leave-active,
-.fade-transform-enter-active {
-    transition: all 0.5s;
-}
-
-.fade-transform-enter-from {
-    opacity: 0;
-    transform: translateX(-30px);
-}
-
-.fade-transform-leave-to {
-    opacity: 0;
-    transform: translateX(30px);
-}
-
-.hc-page-layout-box {
-    display: flex;
-    position: relative;
-    height: 100%;
-    .hc-layout-left-box {
-        width: 382px;
-        position: relative;
-        background: #f1f5f8;
-        border-radius: 10px;
-        margin-right: 24px;
-        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
-        .horizontal-drag-line {
-            position: absolute;
-            right: 0;
-            top: 0;
-            width: 4px;
-            height: 100%;
-            user-select: none;
-            cursor: col-resize;
-            background-color: #00000000;
-        }
-        .hc-project-box {
-            position: relative;
-            padding: 15px 24px;
-            display: flex;
-            align-items: flex-start;
-            border-bottom: 1px solid #E9E9E9;
-            .hc-project-icon-box {
-                font-size: 30px;
-                color: var(--el-color-primary);
-            }
-            .project-name-box {
-                flex: auto;
-                position: relative;
-                overflow: hidden;
-                .project-alias {
-                    color: var(--el-color-primary);
-                }
-                .project-name {
-                    margin-top: 6px;
-                    color: #838791;
-                }
-            }
-        }
-        .hc-tree-box {
-            position: relative;
-            padding: 15px 20px;
-            height: calc(100% - 80px);
-        }
-        .hc-tree-search-box {
-            position: relative;
-            padding: 15px 20px;
-            height: calc(100% - 187px);
-            .hc-search-tree-val {
-                position: relative;
-                margin-bottom: 24px;
-            }
-            .hc-tree-scrollbar {
-                position: relative;
-                height: calc(100% - 68px);
-            }
-        }
-        &.menu {
-            width: 240px;
-            .hc-menu-header-box {
-                position: relative;
-                padding: 15px 18px;
-                display: flex;
-                align-items: center;
-                border-bottom: 1px solid #E9E9E9;
-                .name {
-                    flex: auto;
-                    position: relative;
-                }
-            }
-            .hc-menu-contents-box {
-                position: relative;
-                //padding: 15px 18px;
-                height: calc(100% - 60px);
-            }
-        }
-    }
-    .hc-page-content-box {
-        flex: 1;
-        position: relative;
-    }
-}
-
-.hc-page-box {
-    position: relative;
-    height: 100%;
-}
-.z-9999 {
-    z-index: 9999 !important;
-}
-
-//分割的样式
-.gutter {
-    background-color: #f1f5f8;
-    background-repeat: no-repeat;
-    background-position: 50%;
-}
-
-.gutter.gutter-vertical {
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
-    cursor: row-resize;
-}
-
-.gutter.gutter-horizontal {
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
-    cursor: col-resize;
-}

src/styles/app/theme.scss

@@ -1,593 +0,0 @@
-//通用样式
-html {
-    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;
-    --hc-body-bg-color: #F5F5F5;
-    --hc-bg-color: #ffffff;
-    --hc-text-color: #333333;
-    --hc-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
-    //左侧菜单
-    .hc-layout-box .hc-aside-box .hc-aside-logo-box .logo-img-1 {
-        &.white {
-            display: block;
-        }
-        &.dark {
-            display: none;
-        }
-    }
-}
-
-//深色主题设置
-html.dark {
-    --hc-body-bg-color: #101014;
-    --hc-bg-color: #292929;
-    --hc-text-color: rgba(255, 255, 255, 0.82);
-    --hc-shadow: 4px 4px 8px 0 rgba(0,0,0,0.15), -4px -4px 8px 0 #3d3d3d;
-    --el-bg-color-overlay: #393939;
-    --hc-border-color: #474646;
-    --hc-label-color: #8f9eb2;
-    html, body, #app {
-        background: var(--el-bg-color-overlay);
-    }
-    //首页背景
-    .hc-layout-box .hc-layout-bg-box {
-        opacity: .1;
-    }
-    //左侧菜单
-    .hc-layout-box .hc-aside-box {
-        color: var(--el-text-color-primary);
-        background: var(--el-bg-color-overlay);
-        box-shadow: initial;
-        border: 1px solid var(--hc-border-color);
-        border-left: 0;
-        border-bottom: 0;
-        &.home-index {
-            color: var(--el-text-color-primary);
-            background: var(--el-bg-color-overlay);
-            backdrop-filter: initial;
-            -webkit-backdrop-filter: initial;
-        }
-        .hc-aside-logo-box .logo-img-1 {
-            &.white {
-                display: none;
-            }
-            &.dark {
-                display: block;
-            }
-        }
-        //菜单
-        .el-menu-item, .el-sub-menu__title {
-            color: var(--hc-label-color);
-        }
-        .el-menu-item.is-active {
-            color: inherit;
-        }
-        .hc-aside-bar-box:before {
-            background-image: linear-gradient(90deg, rgba(102, 102, 102, 0) 11%, #474646 35%, #474646 64%, rgba(102, 102, 102, 0) 86%);
-        }
-    }
-    //左栏
-    .hc-layout-box .hc-layout-left-box {
-        color: var(--el-text-color-primary);
-        background: var(--el-bg-color-overlay);
-        box-shadow: initial;
-        border: 1px solid var(--hc-border-color);
-    }
-    .hc-layout-box .hc-layout-left {
-        background: var(--el-bg-color-overlay);
-        border: 1px solid var(--hc-border-color);
-        color: var(--hc-label-color);
-        box-shadow: initial;
-    }
-    .hc-table-form-content .hc-table-forem-box,
-    .hc-table-form-content .hc-fixed-page,
-    .hc-table-form-content .hc-right-pian-box,
-    .hc-table-form-content .hc-footer-box {
-        background: var(--el-bg-color-overlay);
-        border: 1px solid var(--hc-border-color);
-        color: var(--hc-label-color);
-        box-shadow: initial;
-    }
-    //小图标时的菜单
-    .aside-menu-popper.el-popper .el-menu--vertical .el-menu {
-        background-color: #393939;
-        color: #8f9eb2;
-    }
-    //卡片
-    .hc-card-box.el-card {
-        box-shadow: initial;
-        color: var(--hc-text-color);
-        border: 1px solid var(--hc-border-color);
-        .el-card__header {
-            border-bottom: 1px solid var(--hc-border-color);
-        }
-        .el-card__body .hc-card-action-box {
-            border-top: 1px solid var(--hc-border-color);
-            background-color: var(--el-bg-color-overlay);
-        }
-    }
-    //设置里的副标题
-    .hc-screenshot-box .item .label {
-        color: var(--hc-label-color);
-    }
-    //设置里的选择卡片
-    .hc-theme-box .item {
-        border: 1px solid var(--hc-border-color);
-        background-color: var(--el-bg-color-overlay);
-        &.active {
-            box-shadow: 4px 4px 8px 0 rgba(61,60,60,0.15), 0 0 8px 0 #1d1d1d;
-        }
-        .action {
-            background-color: var(--hc-bg-color);
-            border-top: 1px solid var(--hc-border-color);
-        }
-    }
-
-    //顶部项目合同下拉框
-    .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input .el-input__wrapper {
-        background: #696969;
-    }
-    .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input.is-focus .el-input__wrapper {
-        box-shadow: var(--hc-shadow);
-    }
-    .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input .el-input__wrapper .el-input__inner,
-    .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input .el-input__wrapper .el-input__suffix {
-        color: var(--hc-text-color);
-    }
-    //顶部图标按钮
-    .header-icon-bar {
-        background: #696969;
-        color: var(--hc-text-color);
-    }
-    //顶部用户信息
-    .user-info-bar {
-        .user-name, .arrow-icon {
-            color: var(--hc-text-color);
-        }
-        &:before {
-            border-color: var(--hc-border-color);
-        }
-    }
-
-    //按钮
-    .el-button[hc-btn] {
-        border-color: var(--hc-border-color);
-    }
-    .el-button[hc-btn].is-disabled:not([class*=el-button--]) {
-        --el-button-disabled-text-color: var(--el-color-info-light-5);
-        --el-button-disabled-bg-color: var(--el-color-info-light-9);
-    }
-
-    //日期范围
-    .el-date-editor .el-range-separator {
-        color: #89898a;
-    }
-
-    //切换卡片
-    .hc-sb-table .el-tabs .el-tabs__header .el-tabs__nav .el-tabs__item {
-        background: var(--hc-bg-color);
-        --el-text-color-primary: var(--hc-label-color);
-        &:after {
-            background-color: var(--hc-border-color);
-        }
-    }
-    .hc-sb-table .el-tabs .el-tabs__active-bar {
-        background: var(--el-bg-color-overlay);
-        &:after, &:before {
-            background: var(--el-bg-color-overlay);
-        }
-    }
-
-    //表格
-    .hc-table-ref-box {
-        border-color: var(--hc-border-color);
-        .el-table[hc] {
-            --el-table-bg-color: initial;
-            --el-table-header-bg-color: var(--hc-bg-color);
-            --el-table-header-text-color: var(--hc-label-color);
-            --el-table-tr-bg-color: var(--el-bg-color-overlay);
-            --el-fill-color-lighter: #363535;
-            --el-table-text-color: var(--hc-text-color);
-            --el-table-row-hover-bg-color: #454545;
-        }
-        .el-table[hc].el-table--border {
-            --el-table-border-color: var(--hc-border-color);
-        }
-        .el-table__body-wrapper tr td.el-table-fixed-column--left,
-        .el-table__body-wrapper tr td.el-table-fixed-column--right,
-        .el-table__body-wrapper tr th.el-table-fixed-column--left,
-        .el-table__body-wrapper tr th.el-table-fixed-column--right,
-        .el-table__footer-wrapper tr td.el-table-fixed-column--left,
-        .el-table__footer-wrapper tr td.el-table-fixed-column--right,
-        .el-table__footer-wrapper tr th.el-table-fixed-column--left,
-        .el-table__footer-wrapper tr th.el-table-fixed-column--right,
-        .el-table__header-wrapper tr td.el-table-fixed-column--left,
-        .el-table__header-wrapper tr td.el-table-fixed-column--right,
-        .el-table__header-wrapper tr th.el-table-fixed-column--left,
-        .el-table__header-wrapper tr th.el-table-fixed-column--right {
-            --el-bg-color: #444444;
-        }
-    }
-
-    //分页
-    .card-page-box .el-pagination.is-background .btn-next, .card-page-box .el-pagination.is-background .btn-prev, .card-page-box .el-pagination.is-background .el-pager li {
-        border-color: var(--hc-border-color);
-    }
-    //弹窗
-    .el-overlay-dialog .el-dialog {
-        background: var(--el-bg-color-overlay);
-        &.hc-modal-border {
-            .el-dialog__header {
-                border-color: var(--hc-border-color);
-            }
-            .el-dialog__footer {
-                border-color: var(--hc-border-color);
-            }
-        }
-    }
-    .el-message-box {
-        background: var(--el-bg-color-overlay);
-    }
-
-    //表单
-    .el-form-item--large .el-form-item__content .form-item-dashed {
-        border-color: #4c4d4f;
-    }
-
-    //步进器
-    .hc-counter-box .counter-box {
-        color: var(--hc-text-color);
-        .counter-btn {
-            border-color: var(--hc-border-color);
-            color: var(--hc-text-color);
-            background-color: var(--el-bg-color-overlay);
-        }
-        .counter-btn[disabled=true] {
-            color: var(--hc-label-color);
-            background-color: var(--hc-bg-color);
-        }
-        .counter-val {
-            border-color: var(--hc-border-color);
-        }
-    }
-    //工单服务
-    .hc-order-service .order-service-content .content-box .comment-card-box {
-        border: 1px solid var(--hc-border-color);
-        background: var(--el-bg-color-overlay);
-        .card-content-box .user-info-box .text-lg {
-            color: var(--hc-text-color);
-        }
-        .card-content-box .desc_para {
-            color: var(--hc-text-color);
-        }
-        .collapse-comment-box .user-comment-info-box .user-comment-box .user-comment-content-box {
-            color: var(--hc-text-color);
-        }
-    }
-
-    //选择任务人
-    .hc-tasks-user .tasks-user-box {
-        border-color: var(--hc-border-color);
-    }
-    .hc-tasks-user-modal-content-box .user-box .y-user-list-box .title-box,
-    .hc-tasks-user-modal-content-box .user-box .s-user-list-box .title-box {
-        border-color: var(--hc-border-color);
-        background-color: var(--hc-bg-color);
-        color: var(--hc-label-color);
-    }
-    .hc-tasks-user-modal-content-box .user-box .s-user-list-box {
-        border-color: var(--hc-border-color);
-    }
-    .hc-tasks-user-modal-content-box .user-box .y-user-list-box .user-list .user-item + .user-item,
-    .hc-tasks-user-modal-content-box .user-box .s-user-list-box .user-list .user-item + .user-item {
-        border-color: var(--hc-border-color);
-    }
-    .hc-tasks-user-modal-content-box .tree-box {
-        border-color: var(--hc-border-color);
-        .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
-            background-color: #454545;
-            color: #ffffff;
-        }
-    }
-    .sort-node-body-box.list-group {
-        border-color: var(--hc-border-color);
-        .list-group-item + .list-group-item{
-            border-color: var(--hc-border-color);
-        }
-    }
-    .sort-node-body-box.list-group.header .list-group-item {
-        background-color: var(--hc-bg-color);
-        color: var(--hc-label-color);
-    }
-    //左侧小菜单栏
-    .hc-menu-simple-box .item-box {
-        border: 1px solid var(--hc-border-color);
-        background: var(--el-bg-color-overlay);
-        .icon-box {
-            background-color: var(--hc-bg-color);
-            color: var(--hc-label-color);
-        }
-        .label-box {
-            color: var(--hc-label-color);
-        }
-        &.active {
-            .label-box {
-                color: var(--hc-text-color);
-            }
-        }
-        &:hover:not(.active) {
-            .icon-box {
-                color: var(--hc-text-color);
-                background-color: var(--hc-bg-color);
-            }
-            .label-box {
-                color: var(--hc-text-color);
-                font-weight: 500;
-            }
-        }
-    }
-    //树
-    .el-tree.hc-tree-node {
-        --el-tree-node-hover-bg-color: var(--hc-bg-color);
-    }
-    .hc-tree-node.tree-line .el-tree-node.is-expanded.is-current.is-focusable {
-        background: var(--hc-bg-color);
-    }
-    .data-custom-tree-node .menu-icon {
-        background: initial;
-        color: var(--el-bg-color-overlay);
-    }
-    .hc-tree-node .data-custom-tree-node {
-        color: var(--hc-label-color);
-    }
-    .el-tree.hc-tree-node.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-        background-color: var(--hc-bg-color);
-        .data-custom-tree-node {
-            color: var(--hc-text-color);
-        }
-    }
-    //工程划分树
-    .hc-page-layout-box .hc-layout-left-box .hc-project-box {
-        border-color: var(--hc-border-color);
-    }
-    .hc-page-content-box.hc-division-page .project-info {
-        height: calc(100% - 346px);
-    }
-    .hc-page-content-box.hc-division-page .footer-box {
-        color: var(--el-text-color-primary);
-        background: var(--el-bg-color-overlay);
-        border: 1px solid var(--hc-border-color);
-        box-shadow: initial;
-    }
-    .hc-import-temp-box .hc-import-node-tree-box .import-node-tree-box,
-    .hc-import-temp-box .hc-import-node-tree-box .import-node-tree-box .hc-tree-title-box {
-        border-color: var(--hc-border-color);
-    }
-    .hc-layout-box .hc-layout-left-box .hc-project-box,
-    .hc-layout-box .hc-layout-left-box .hc-tree-foot-tip-box {
-        border-color: var(--hc-border-color);
-    }
-
-    .copy-node-many-box, .copy-node-many-box .copy-node-many-tree {
-        border-color: var(--hc-border-color);
-    }
-
-    .data-fill-list-box .el-collapse .el-collapse-item {
-        background-color: var(--el-bg-color-overlay);
-        border-color: var(--hc-border-color);
-        .hc-collapse-item-header .item-title {
-            color: var(--hc-label-color);
-        }
-        .el-collapse-item__header .el-collapse-item__arrow {
-            color: var(--hc-label-color);
-        }
-    }
-    .data-fill-list-box .el-collapse .el-collapse-item.is-active .el-collapse-item__header.is-active {
-        background: var(--hc-bg-color);
-        .item-title, .el-collapse-item__arrow {
-            color: var(--hc-text-color);
-        }
-    }
-    .data-fill-list-box .data-fill-list-item-content .data-fill-table-tip-box {
-        border-color: var(--hc-border-color);
-    }
-
-    //切换按钮
-    .hc-new-switch {
-        background: var(--hc-bg-color);
-        box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.15) inset, -4px -4px 8px 0 var(--hc-bg-color) inset;
-        .switch-bg {
-            color: var(--hc-label-color);
-        }
-        .switch-bg.dots {
-            color: var(--hc-text-color);
-            box-shadow: 4px 4px 8px 0 rgba(54, 92, 167, 0.15), -3px -2px 8px 0 var(--hc-bg-color);
-        }
-    }
-    //多级菜单
-    .hc-ledger-query-menu.el-menu {
-        --el-menu-text-color: var(--hc-label-color);
-        .el-sub-menu .el-menu-item.is-active {
-            background: var(--hc-bg-color);
-            border: 1px solid var(--hc-border-color);
-            color: var(--hc-text-color);
-            box-shadow: initial;
-        }
-        .el-sub-menu__title, .el-menu-item {
-            border-radius: 6px;
-            &:hover {
-                background: var(--hc-bg-color);
-                color: var(--hc-text-color);
-            }
-        }
-    }
-
-    //日历
-    .hc-date-calendar-box {
-        .hc-date-picker-box {
-            border-color: var(--hc-border-color);
-            .hc-date-btn-box .hc-div-btn {
-                box-shadow: initial;
-                border: 1px solid var(--hc-border-color);
-                background-color: var(--el-bg-color-overlay);
-                &:hover {
-                    background: var(--hc-bg-color);
-                }
-            }
-        }
-        .hc-date-dates {
-            .hc-date-dates-day {
-                color: var(--hc-label-color);
-                &:hover:not([class*='choice']):not([class*='excluded']):not([class*='selected']):not([class*='cur']) {
-                    background-color: var(--hc-bg-color);
-                    border: 2px solid var(--hc-border-color);
-                }
-            }
-            .hc-date-dates-day.selected {
-                border-color: var(--hc-border-color);
-            }
-            .hc-date-dates-day.choice {
-                box-shadow: initial;
-                border-color: var(--hc-border-color);
-            }
-            .hc-date-dates-day.excluded {
-                color: #5a5a5a;
-            }
-        }
-    }
-    .hc-user-time-box .tree-box {
-        border-color: var(--hc-border-color);
-    }
-    //进度统计
-    .hc-layout-box .hc-chart-content-box {
-        background: var(--el-bg-color-overlay);
-        border: 1px solid var(--hc-border-color);
-        color: var(--hc-label-color);
-        box-shadow: initial;
-    }
-    .hc-layout-box .hc-round-chart-card-box,
-    .hc-layout-box .hc-report-chart-card-box,
-    .hc-layout-box .hc-media-chart-card-box {
-        background: var(--el-bg-color-overlay);
-        border: 1px solid var(--hc-border-color);
-        color: var(--hc-label-color);
-        box-shadow: initial;
-    }
-    .hc-layout-box .hc-chart-flex .hc-report-chart-card-box .hc-report-chart-box,
-    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-report-chart-box {
-        background: var(--el-bg-color-overlay);
-        border: 1px solid var(--hc-border-color);
-    }
-    .hc-layout-box .hc-chart-flex .hc-report-chart-card-box .hc-media-chart-box,
-    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-media-chart-box {
-        background: var(--el-bg-color-overlay);
-        border: 1px solid var(--hc-border-color);
-    }
-    .hc-layout-box .hc-round-chart .hc-round-chart-card-box .hc-card-content-box .card-title {
-        color: var(--hc-label-color);
-    }
-    .hc-layout-box .hc-round-chart .hc-round-chart-card-box .hc-card-content-box .card-ratio-box .ratio-num,
-    .hc-layout-box .hc-round-chart .hc-round-chart-card-box .hc-card-content-box .card-ratio-box .ratio-text .unit{
-        color: var(--hc-text-color);
-    }
-    .hc-layout-box .hc-round-chart .hc-round-chart-card-box .hc-card-content-box .card-amount-box .amount-item .num {
-        color: var(--hc-label-color);
-    }
-    .hc-layout-box .hc-chart-flex .hc-report-chart-card-box .hc-chart-title .title,
-    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-chart-title .title {
-        color: var(--hc-text-color);
-    }
-    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-media-chart-box .hc-media-pian-box {
-        background: var(--hc-bg-color);
-        border-color: var(--hc-border-color);
-    }
-    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-media-chart-box .hc-media-pian-box .item .num {
-        color: var(--hc-label-color);
-    }
-    //影像资料
-    .hc-layout-box .hc-layout-content-box .hc-table-col-item .content-box .title {
-        color: var(--hc-text-color);
-    }
-    //平曲线右上角图标按钮
-    .hc-layout-box .hc-extra-icon-btn {
-        color: var(--hc-label-color);
-    }
-
-    //首件工程
-    .hc-first-item-node-layout .node-action,
-    .hc-first-item-node-layout .node-content .node-form,
-    .hc-first-item-node-layout .node-content .node-file {
-        background: var(--el-bg-color-overlay);
-        border: 1px solid var(--hc-border-color);
-        color: var(--hc-label-color);
-        box-shadow: initial;
-    }
-
-    //个人中心
-    .hc-layout-box .hc-layout-left-box .user-avatar-box .user-avatar {
-        border: 1px solid var(--hc-border-color);
-        box-shadow: initial;
-    }
-    .hc-layout-box .hc-layout-left-box .user-avatar-box .user-name {
-        color: var(--hc-text-color);
-    }
-    .hc-layout-box .hc-layout-content-box .hc-card-foot-box {
-        background: var(--el-bg-color-overlay);
-        border: 1px solid var(--hc-border-color);
-        color: var(--hc-label-color);
-        box-shadow: initial;
-        border-bottom: 0;
-    }
-    .hc-project-menu.el-menu .el-sub-menu {
-        border-color: var(--hc-border-color);
-        .el-sub-menu__title {
-            color: var(--hc-label-color);
-        }
-    }
-    .hc-project-menu.el-menu .el-sub-menu.is-opened .el-sub-menu__title {
-        background: var(--hc-bg-color);
-        color: var(--hc-text-color);
-    }
-    .hc-project-menu.el-menu .el-menu-item.is-active {
-        background: #4e4e4e;
-        color: var(--hc-text-color);
-    }
-    .hc-project-menu.el-menu .el-sub-menu .el-sub-menu__title,
-    .hc-project-menu.el-menu .el-sub-menu .el-menu-item {
-        &:hover {
-            background: var(--hc-bg-color);
-            color: var(--hc-text-color);
-        }
-    }
-
-    //材料进场
-    .hc-switch-tab-content {
-        border-color: var(--hc-border-color);
-    }
-    .hc-links-sample-modal-box .hc-links-sample-tree-box {
-        border-color: var(--hc-border-color);
-    }
-
-    //月报汇总表格
-    .hc-table-ref-box .el-table.hc-table-diy-box {
-        --el-table-bg-color: initial;
-        --el-table-header-bg-color: var(--hc-bg-color);
-        --el-table-header-text-color: var(--hc-label-color);
-        --el-table-tr-bg-color: var(--el-bg-color-overlay);
-        --el-fill-color-light: #363535;
-        --el-table-text-color: var(--hc-text-color);
-        --el-table-row-hover-bg-color: #454545;
-    }
-    .hc-table-ref-box .el-table.hc-table-diy-box.el-table--border {
-        --el-table-border-color: var(--hc-border-color);
-    }
-    .hc-table-ref-box .el-table.hc-table-diy-box thead.is-group tr:last-of-type th:nth-of-type(2)::before {
-        background-color: var(--hc-border-color);
-    }
-
-    .hc-page-layout-box .hc-layout-left-box.menu .hc-menu-header-box {
-        border-color: var(--hc-border-color);
-    }
-    .hc-menu-simple-box .item-box .menu-icon {
-        background: initial;
-    }
-}

src/styles/app/tools.scss

@@ -1,12 +0,0 @@
-//树的虚线
-@mixin elTreeNodeChildren() {
-    $name: '.el-tree-node__children';
-    @for $i from 1 to 20 {
-        #{$name} {
-            &:before {
-                left: calc(11.5px + (#{$i - 1} * 18px));
-            }
-        }
-        $name: '#{$name} .el-tree-node__children';
-    }
-}

src/styles/app/tree.scss

@@ -1,190 +0,0 @@
-// 树的线样式
-.tree-line {
-    :deep(.el-tree-node) {
-        position: relative;
-        padding-left: 12px; // 缩进量
-    }
-    :deep(.el-tree-node__children) {
-        padding-left: 12px; // 缩进量
-    }
-    // 竖线
-    :deep(.el-tree-node::before) {
-        content:"";
-        height: 100%;
-        width: 1px;
-        position: absolute;
-        left: 1px;
-        top: 0;
-        border-width: 1px;
-        border-left: 2px dashed var(--el-color-primary);
-    }
-    // 当前层最后⼀个节点的竖线⾼度固定
-    :deep(.el-tree-node:last-child::before) {
-        height: 15px; // 可以⾃⼰调节到合适数值
-    }
-    // 横线
-    :deep(.el-tree-node::after) {
-        content:"";
-        width: 16px;
-        height: 20px;
-        position: absolute;
-        left: 2px;
-        top: 12px;
-        border-width: 1px;
-        border-top: 2px dashed var(--el-color-primary);
-    }
-    // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
-    & > :deep(.el-tree-node::after) {
-        border-top: none !important;
-        border-top: 0 !important;
-    }
-    & > :deep(.el-tree-node::before) {
-        border-left: none;
-    }
-    // 展开关闭的icon
-    :deep(.el-tree-node__expand-icon) {
-        font-size: 16px;
-        &.is-leaf {
-            color: transparent;
-            font-size: 0px;
-        }
-    }
-    :deep(.el-tree__empty-block) {
-      min-width: 300px;
-
-    }
-}
-
-.tree-line1 {
-    :deep(.el-tree-node) {
-        position: relative;
-        padding-left: 12px; // 缩进量
-        width: 100%;
-    }
-    :deep(.el-tree-node__children) {
-        padding-left: 12px; // 缩进量
-    }
-    // 竖线
-    :deep(.el-tree-node::before) {
-        content:"";
-        height: 100%;
-        width: 1px;
-        position: absolute;
-        left: 1px;
-        top: 0px;
-        border-width: 1px;
-        border-left: 2px dashed var(--el-color-primary);
-    }
-    // 当前层最后⼀个节点的竖线⾼度固定
-    :deep(.el-tree-node:last-child::before){
-        height: 15px; // 可以⾃⼰调节到合适数值
-    }
-    // 横线
-    :deep(.el-tree-node::after) {
-        content:"";
-        width: 16px;
-        height: 20px;
-        position: absolute;
-        left: 2px;
-        top: 12px;
-        border-width: 1px;
-        border-top: 2px dashed var(--el-color-primary);
-    }
-    // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
-    & > :deep(.el-tree-node::after) {
-        border-top: none !important;
-        border-top: 0 !important;
-    }
-    & > :deep(.el-tree-node::before) {
-        border-left: none;
-    }
-    // 展开关闭的icon
-    :deep(.el-tree-node__expand-icon) {
-        font-size: 16px;
-        &.is-leaf {
-            color: transparent;
-            font-size: 0;
-        }
-    }
-    :deep(.el-tree__empty-block) {
-      min-width: 300px;
-    }
-}
-
-//虚拟树
-.hc-tree-node-v2.tree-line1 {
-    :deep(.el-virtual-scrollbar) {
-        right: -12px !important;
-    }
-    :deep(.el-tree-node) {
-        padding-left: 0;
-    }
-    :deep(.el-tree-node:first-child::before) {
-        border-left: none;
-    }
-    :deep(.el-tree-node:first-child::after) {
-        border-top: none !important;
-        border-top: 0 !important;
-    }
-    // 竖线
-    :deep(.el-tree-node::before) {
-        left: 12px;
-    }
-    // 横线
-    :deep(.el-tree-node::after) {
-        left: 14px;
-    }
-    :deep([class*='line-i-']) {
-        position: relative;
-        //竖线
-        &::before {
-            content:"";
-            height: 26px;
-            width: 1px;
-            position: absolute;
-            left: 12px;
-            top: 0;
-            border-width: 1px;
-            border-left: 2px dashed var(--el-color-primary);
-        }
-        //横线
-        &::after {
-            content:"";
-            width: 16px;
-            height: 20px;
-            position: absolute;
-            left: 14px;
-            top: 12px;
-            border-width: 1px;
-            border-top: 2px dashed var(--el-color-primary);
-        }
-    }
-    //自动生成子级线条
-    @for $i from 1 through 20 {
-        //竖线
-        :deep(.line-i-#{$i}::before) {
-            left: #{(($i + 1) * 24) - 11}px;
-        }
-        //横线
-        :deep(.line-i-#{$i}::after) {
-            left: #{(($i + 1) * 24) - 9}px;
-        }
-
-        //消除非主要线条
-        @if $i >= 3 {
-            :deep(.el-tree-node[level="#{$i}"]) {
-                &::after {
-                    display: none;
-                }
-                @if $i >= 4 {
-                    @for $x from 1 through ($i - 3) {
-                        .line-i-#{$x}::after {
-                            display: none;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-}

src/styles/font/index.scss

@@ -1,20 +0,0 @@
-// 通用字体
-@import 'z-vfonts/Lato.css';
-// 等宽字体
-@import 'z-vfonts/FiraCode.css';
-
-html, body, * {
-    font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-//特殊符号
-@font-face {
-    font-family: "EUDC";
-    src: url('./EUDC.ttf') format('truetype');
-    font-display: swap;
-}
-
-//特殊字符代码的字体
-.font-EUDC {
-    font-family: 'EUDC', serif;
-}

src/styles/index.scss

@@ -1,5 +1,69 @@
-@import './app/color';
-@import './app/text';
-@import './app/main';
-@import './app/element';
-@import './app/theme';
+html, body, #app {
+    height: 100%;
+    background-color: #EBF4F6;
+}
+
+.bg-orange-gradient {
+    background-image: linear-gradient(45deg, #ff9700, #ed1c24);
+    color: white;
+}
+.bg-red-gradient {
+    background-image: linear-gradient(45deg, #f33a41, #ed0586);
+    color: white;
+}
+.bg-pink-gradient {
+    background-image: linear-gradient(45deg, #fea894, #ff1047);
+    color: white;
+}
+.bg-mauve-gradient {
+    background-image: linear-gradient(45deg, #c01f95, #7115cc);
+    color: white;
+}
+.bg-purple-gradient {
+    background-image: linear-gradient(45deg, #9829ea, #5908fb);
+    color: white;
+}
+.bg-blue-gradient {
+    background-image: linear-gradient(45deg, #00b8f9, #0166eb);
+    color: white;
+}
+.bg-cyan-gradient {
+    background-image: linear-gradient(45deg, #06edfe, #48b2fe);
+    color: white;
+}
+.bg-green-gradient {
+    background-image: linear-gradient(45deg, #3ab54a, #8cc63f);
+    color: white;
+}
+.bg-olive-gradient {
+    background-image: linear-gradient(45deg, #90e630, #39d266);
+    color: white;
+}
+.bg-grey-gradient {
+    background-image: linear-gradient(45deg, #9aadb9, #354855);
+    color: white;
+}
+.bg-brown-gradient {
+    background-image: linear-gradient(45deg, #ca6f2e, #cb1413);
+    color: white;
+}
+
+
+.hc-card-box.el-card {
+    --el-card-bg-color: white;
+}
+.hc-card-box.el-card .el-card__body .hc-card-action-box {
+    background-color: white;
+}
+
+.hac-card-item.hc-card-item-box {
+    background: white;
+    .hc-card-item-header {
+        .item-header, .item-extra {
+            height: 100%;
+        }
+        .item-extra {
+            margin-left: 14px;
+        }
+    }
+}

src/styles/user/index.scss

@@ -1,91 +0,0 @@
-.hc-layout-box {
-    position: relative;
-    height: 100%;
-    display: flex;
-    .hc-layout-left-box {
-        position: relative;
-        width: 260px;
-        height: 100%;
-        color: #1A1A1A;
-        border-radius: 10px;
-        background-color: #f1f5f8;
-        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
-        .user-avatar-box {
-            position: relative;
-            text-align: center;
-            padding: 24px;
-            .user-avatar {
-                position: relative;
-                height: 100px;
-                width: 100px;
-                border-radius: 50%;
-                background: #d8d8d8;
-                margin: 24px auto auto;
-                border: 2px solid #ffffff;
-                box-shadow: 7px 7px 8px 0 rgba(54,92,167,0.15), -7px -7px 8px 0 #ffffff, 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
-                img {
-                    display: block;
-                    object-fit: cover;
-                    height: 100%;
-                    width: 100%;
-                    border-radius: 50%;
-                }
-                .user-avatar-upload {
-                    position: absolute;
-                    right: 0;
-                    bottom: 0;
-                    width: 24px;
-                    height: 24px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    background: #f1f5f8;
-                    border-radius: 50%;
-                    color: #838791;
-                    cursor: pointer;
-                    box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15);
-                    transition: color 0.2s;
-                    &:hover {
-                        color: var(--el-color-primary);
-                    }
-                }
-            }
-            .user-name {
-                position: relative;
-                margin-top: 18px;
-                font-weight: bold;
-                color: #1a1a1a;
-                font-size: 16px;
-            }
-        }
-        .user-menu-box {
-            position: relative;
-            height: calc(100% - 230px);
-        }
-    }
-    .hc-layout-content-box {
-        flex: 1;
-        display: inline-grid;
-        position: relative;
-        margin-left: 24px;
-        .basic-hight {
-            height: calc(100% - 75px);
-        }
-        .hc-card-foot-box {
-            position: absolute;
-            height: 80px;
-            width: 100%;
-            bottom: -24px;
-            background: #f1f5f8;
-            border-radius: 8px 8px 0 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 -10px 21px 3px rgba(32,37,50,0.03);
-        }
-        .foot-recycle {
-            position: relative;
-            display: flex;
-        }
-    }
-}

src/styles/view/home.scss

@@ -1,49 +0,0 @@
-.home-styles-box {
-    position: relative;
-    height: 100%;
-    overflow: hidden;
-    .hc-home-input-box {
-        position: relative;
-        height: 100%;
-        z-index: 2;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        .hc-home-content {
-            position: relative;
-            margin-top: -20rem;
-            width: 45rem;
-            .hc-slogan-icon {
-                position: relative;
-                text-align: center;
-                font-size: 3.5rem;
-                color: white;
-                img {
-                    height: 60px;
-                }
-            }
-            .home-link-box {
-                position: relative;
-                margin-top: 1.5rem;
-                padding: 0 4rem;
-                display: flex;
-                align-items: center;
-                font-size: 14px;
-                color: white;
-                .home-link {
-                    cursor: pointer;
-                    border: 1px solid white;
-                    border-radius: 50px;
-                    padding: 2px 10px;
-                    margin-left: 15px;
-                    transition: 0.2s;
-                    &:hover {
-                        color: var(--el-color-primary);
-                        border-color: var(--el-color-primary);
-                        background-color: var(--el-color-primary-light-9);
-                    }
-                }
-            }
-        }
-    }
-}

src/styles/view/login.scss

@@ -1,130 +0,0 @@
-.login-body {
-    position: relative;
-    background-color: #F0FBFF;
-    width: 100%;
-    height: 100vh;
-    padding: 50px 0;
-    min-height: 730px;
-    .left-logo {
-        position: absolute;
-        left: 30px;
-        top: 30px;
-        user-select: none;
-        img {
-            height: 40px;
-        }
-        #logo-icon {
-            height: 36px;
-        }
-        #logo-name {
-            margin-left: 6px;
-        }
-    }
-    .left-pic-container {
-        position: absolute;
-        width: 750px;
-        left: 10%;
-        top: 50%;
-        height: 630px;
-        margin-top: -315px;
-
-    }
-    .right-container {
-        right: 18.667%;
-        position: absolute;
-        background: #ffffff;
-        border-radius: 16px;
-        transform: translateY(-50%);
-        padding: 50px;
-        width: 92%;
-        top: 54%;
-        max-width: 470px;
-        margin: 0 auto;
-        box-shadow: 0 21.2px 31.8px 0 rgba(26,26,26,0.12);
-        .right-app-title {
-            position: absolute;
-            top: -80px;
-            left: 18px;
-            font-size: 43px;
-            font-weight: 400;
-            color: $green;
-        }
-        .sign-list {
-            position: relative;
-            h1 {
-                font-size: 40px;
-                line-height: 48px;
-                margin-bottom: 32px;
-            }
-            .title-tab {
-                overflow: hidden;
-                padding-bottom: 16px;
-                div {
-                    float: left;
-                    line-height: 32px;
-                    font-size: 20px;
-                    color: #8C8889;
-                    transition: 0.3s;
-                    position: relative;
-                    padding-top: 16px;
-                    margin-left: 32px;
-                    user-select: none;
-                    &::before {
-                        content: '';
-                        width: 0;
-                        height: 2px;
-                        position: absolute;
-                        left: 50%;
-                        transform: translateX(-50%);
-                        bottom: 0;
-                        background: #1ECC95;
-                        border-radius: 3px;
-                        transition: 0.3s;
-                    }
-                    &:first-child {
-                        margin-left: 0;
-                    }
-                    &:not(.active) {
-                        cursor: pointer;
-                    }
-                    &.active {
-                        color: #353030;
-                        font-weight: bold;
-                        &::before {
-                            width: 100%;
-                        }
-                    }
-                }
-            }
-            .form-box {
-                position: relative;
-                .el-input--large {
-                    --el-input-height: 48px;
-                    --el-input-border-radius: 8px;
-                    font-size: 16px;
-                    .el-input__wrapper {
-                        padding: 1px 16px;
-                    }
-                }
-                .clickable-text {
-                    color: #686565;
-                    cursor: pointer;
-                    transition: 0.2s;
-                    font-size: 14px;
-                    &:hover {
-                        color: #1ECC95
-                    }
-                }
-                .el-button--large {
-                    --el-button-size: 48px;
-                    height: 48px;
-                    padding: 12px 19px;
-                    font-size: 16px;
-                    border: 0;
-                    border-radius: 6px;
-                    background: linear-gradient(90deg,#1fd4af, #1ecc95 100%);
-                }
-            }
-        }
-    }
-}

src/views/error/403.vue

@@ -21,5 +21,5 @@ const goToHome = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/error/style.scss";
+@import "~src/styles/error/style.scss";
 </style>

src/views/home/admin.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="home-styles-box">
+        111111
+    </div>
+</template>
+
+<script setup>
+import {ref, watch} from "vue";
+import {useAppStore} from "~src/store";
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+
+<style lang="scss">
+
+</style>

src/views/home/budget.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="home-styles-box">
+        111111
+    </div>
+</template>
+
+<script setup>
+import {ref, watch} from "vue";
+import {useAppStore} from "~src/store";
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+
+<style lang="scss">
+
+</style>

src/views/home/index.vue

@@ -1,7 +1,71 @@
 <template>
-    <div class="home-styles-box">
-        111111
-    </div>
+    <el-scrollbar>
+        <div class="hc-main-row">
+            <el-row :gutter="14">
+                <el-col :span="6">
+                    <HcGradientCard color="green">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-icon">
+                                <HcIcon name="calendar-todo"/>
+                            </div>
+                            <div class="item-sub-content">
+                                <div class="num">36条</div>
+                                <div class="title">您的任务总计划</div>
+                            </div>
+                        </div>
+                    </HcGradientCard>
+                </el-col>
+                <el-col :span="6">
+                    <HcGradientCard color="blue">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-icon">
+                                <HcIcon name="calendar-check"/>
+                            </div>
+                            <div class="item-sub-content">
+                                <div class="num">53条</div>
+                                <div class="title">已完成计划</div>
+                            </div>
+                        </div>
+                    </HcGradientCard>
+                </el-col>
+                <el-col :span="6">
+                    <HcGradientCard color="pink">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-icon">
+                                <HcIcon name="alert" fill/>
+                            </div>
+                            <div class="item-sub-content">
+                                <div class="num">14条</div>
+                                <div class="title">风险计划</div>
+                            </div>
+                        </div>
+                    </HcGradientCard>
+                </el-col>
+                <el-col :span="6">
+                    <HcGradientCard color="purple">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-icon">
+                                <HcIcon name="time"/>
+                            </div>
+                            <div class="item-sub-content">
+                                <div class="num">22条</div>
+                                <div class="title">延期计划</div>
+                            </div>
+                        </div>
+                    </HcGradientCard>
+                </el-col>
+            </el-row>
+
+            <el-row :gutter="14" class="mt-8">
+                <el-col :span="12">
+                    22
+                </el-col>
+                <el-col :span="12">
+                    333
+                </el-col>
+            </el-row>
+        </div>
+    </el-scrollbar>
 </template>
 
 <script setup>
@@ -11,7 +75,33 @@ import {useAppStore} from "~src/store";
 </script>
 
 <style lang="scss" scoped>
-
+.hc-main-row {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+}
+.hc-card-item-sub {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    .item-sub-icon {
+        position: relative;
+        font-size: 50px;
+        margin-right: 18px;
+    }
+    .item-sub-content {
+        position: relative;
+        .num {
+            font-size: 22px;
+            font-weight: 500;
+        }
+        .title {
+            margin-top: 8px;
+            font-size: 14px;
+        }
+    }
+}
 </style>
 
 <style lang="scss">

src/views/home/task.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="home-styles-box">
+        111111
+    </div>
+</template>
+
+<script setup>
+import {ref, watch} from "vue";
+import {useAppStore} from "~src/store";
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+
+<style lang="scss">
+
+</style>

src/views/login/_style.scss

@@ -0,0 +1,72 @@
+.login-body {
+    position: relative;
+    background-color: #F0FBFF;
+    width: 100%;
+    height: 100vh;
+    .login-body-bg-box {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        top: 0;
+        z-index: 0;
+        display: flex;
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+    .login-container {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        .sign-list {
+            position: relative;
+            background: rgba(255,255,255,0.62);
+            padding: 50px;
+            width: 470px;
+            border-radius: 16px;
+            box-shadow: 0 21.2px 31.8px 0 rgba(26,26,26,0.12);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            .logo-img {
+                position: absolute;
+                height: 25px;
+                top: 14px;
+                left: 14px;
+                img {
+                    height: 100%;
+                }
+            }
+            .login-title {
+                font-size: 30px;
+                text-align: center;
+                margin-top: 20px;
+                margin-bottom: 38px;
+            }
+            .form-box {
+                position: relative;
+                .el-input--large {
+                    --el-input-height: 48px;
+                    --el-input-border-radius: 8px;
+                    font-size: 16px;
+                    .el-input__wrapper {
+                        padding: 1px 16px;
+                    }
+                }
+                .el-button--large {
+                    --el-button-size: 48px;
+                    height: 48px;
+                    padding: 12px 19px;
+                    font-size: 18px;
+                    border: 0;
+                    border-radius: 6px;
+                    //background: linear-gradient(90deg, #4fa8ff, #0081ff 100%);
+                }
+            }
+        }
+    }
+}

src/views/login/index.vue

@@ -1,14 +1,15 @@
 <template>
     <div class="login-body">
-        <div class="right-container">
-            <div class="right-app-title">工程数字档案管理平台</div>
+        <div class="login-body-bg-box">
+            <img :src="loginBg" alt="">
+        </div>
+        <div class="login-container">
             <div class="sign-list">
-                <h1 class="font-lg">登录</h1>
-                <div class="title-tab">
-                    <div :class="account?'active':''" @click="accountClick">密码登录</div>
-                    <div :class="account?'':'active'" @click="accountClick">游客登录</div>
+                <div class="logo-img">
+                    <img :src="logo" alt="">
                 </div>
-                <div v-if="account" class="form-box mt-4">
+                <div class="login-title">项目管理系统</div>
+                <div class="form-box mt-4">
                     <el-form ref="formRef" :model="formValue" :rules="formRules" label-position="left" label-width="0px"
                              size="large">
                         <el-form-item prop="username">
@@ -16,34 +17,13 @@
                         </el-form-item>
                         <el-form-item class="mt-8" prop="password">
                             <el-input v-model="formValue.password" clearable placeholder="密码" show-password
-                                      type="password" @keyup="passwordKeyUp">
-                                <template #suffix>
-                                    <span class="clickable-text" @click="clickableClick">忘记密码</span>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item prop="tenantId" v-if="tenantMode">
-                            <el-input v-model="formValue.tenantId" clearable placeholder="租户ID"/>
+                                      type="password" @keyup="passwordKeyUp"/>
                         </el-form-item>
                         <el-form-item>
-                            <el-checkbox v-model="checkbox" label="记住密码"/>
+                            <el-checkbox v-model="checkbox" label="记住我"/>
                         </el-form-item>
-                        <el-form-item class="mt-8">
-                            <el-button :loading="loading" block type="primary" @click="formValidateClick">登 录
-                            </el-button>
-                        </el-form-item>
-                    </el-form>
-                </div>
-
-                <div v-else class="form-box mt-4">
-                    <el-form ref="touristsRef" :model="touristsForm" :rules="touristsRules" label-position="left"
-                             label-width="auto" size="large">
-                        <el-form-item prop="phone">
-                            <el-input v-model="touristsForm.phone" clearable placeholder="请输入手机号"/>
-                        </el-form-item>
-                        <el-form-item class="mt-8">
-                            <el-button :loading="loading" block type="primary" @click="touristsValidateClick">登 录
-                            </el-button>
+                        <el-form-item class="mt-9 mb-0">
+                            <el-button :loading="loading" block type="primary" @click="formValidateClick">登 录</el-button>
                         </el-form-item>
                     </el-form>
                 </div>
@@ -53,27 +33,22 @@
 </template>
 
 <script setup>
-import {ref, onMounted} from "vue";
+import {ref} from "vue";
+import loginBg from "~src/assets/login/bg.png";
+import logo from "~src/assets/logo/logo.png";
 import router from '~src/router/index';
 import {useAppStore} from "~src/store";
 import {useAppLogin} from "~sto/user";
 import {formValidate} from "js-fast-way"
+import website from '~src/config/index'
 
 const userStore = useAppStore()
 userStore.clearStoreData() //先清理下缓存
 
-//切换登录类型
-const account = ref(true)
-const tenantMode = ref(true)
-
-const accountClick = () => {
-    account.value = !account.value;
-}
-
 //表单
 const formRef = ref(null);
 const checkbox = ref(false)
-const formValue = ref({username: '', password: '', type: "account"})
+const formValue = ref({username: '', password: '', type: "account", tenantId: website.tenantId})
 const formRules = {
     username: {
         required: true,
@@ -92,7 +67,6 @@ const passwordKeyUp = (e) => {
     }
 }
 
-
 //登录
 const loading = ref(false)
 const formValidateClick = async () => {
@@ -108,36 +82,10 @@ const formValidateClick = async () => {
         })
     }
 }
-
-//游客登录
-const touristsRef = ref(null);
-const touristsForm = ref({phone: ''});
-const touristsRules = {
-    phone: {
-        required: true,
-        message: "请输入手机号",
-        trigger: "blur"
-    }
-}
-const touristsValidateClick = async () => {
-    const formRes = await formValidate(touristsRef.value)
-    if (formRes) {
-        console.log(touristsForm.value)
-    }
-}
-
-//忘记密码
-const clickableClick = () => {
-    const val = '<div style="font-size: 16px;">忘记密码请不要紧张，联系您项目上的专属客服人员电话 <span style="color:#1ECC95;">18423665354</span> ，提供身份证明信息即可初始化密码，建议初始化之后由您单独去更改密码</div>'
-    window?.$messageBox?.alert(val, '联系项目客服', {
-        confirmButtonText: '确定',
-        dangerouslyUseHTMLString: true
-    })
-}
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/view/login.scss";
+@import "./style.scss";
 </style>
 
 <style lang="scss">

src/views/home/config.vue → src/views/user/config.vue

@@ -151,6 +151,6 @@ const SaveConfigClick = async () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/view/config.scss";
+@import "~src/styles/user/config.scss";
 </style>
 

vite.config.js

@@ -9,13 +9,6 @@ import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    css: {
-        preprocessorOptions: {
-            scss: {
-                additionalData: `@import "./src/styles/app/_var.scss";`
-            }
-        }
-    },
     resolve: {
         alias: {
             '~src': `${resolve(__dirname, './src')}`,