若依-vue3 把深色版本改成天蓝色-含登录页

一、将菜单配置换成天蓝色

1 现在原版的vue2 版本换成vue3-js版本

1、将配置面板改成蓝色

修改 vue3/src/assets/images/dark.svg

复制代码

# 将 下面的颜色从深色 #303648 改为天蓝色 #1E90FF
<rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>

<!-- 左侧菜单改为天蓝色 -->
<rect id="Rectangle-18" fill="#1E90FF" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>

2 修改 variables.module.scss配色

1、修改深色配色方案：修改 2 处，新增 4 处

复制代码

// base color
...

// 默认主题变量：修改 1
$menuText: #303133;            // 菜单文字颜色
$menuActiveText: #ffffff;      // 选中菜单文字颜色
$menuBg: #ffffff;              // 菜单背景
$menuHover: #f0f1f5;           // 菜单 hover 背景
# 新增 1
$menuActiveBg: rgba(40, 83, 254, 0.72);// 选中菜单背景（天蓝色）

// 浅色主题theme-light
...

// 基础变量
...

// 菜单暗色变量：修改 2
$base-menu-color: #000000;
$base-menu-color-active: #ffffff;
$base-menu-background: #9eb1ff;
$base-sub-menu-background: #f6fdf7;
$base-sub-menu-hover: #cfdcff;

// 组件变量
....

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  # 新增 2
  menuActiveBg: $menuActiveBg;
  ...
}

// CSS变量定义
:root {
  ....
  /* splitpanes default-theme 变量 */
  --splitpanes-default-bg: #ffffff;

  # 新增 3
  --el-menu-item-height: 45px
}

// 暗黑模式变量
html.dark {
  ...
  /* 侧边栏 */
  --sidebar-bg: #141414;
  --sidebar-text: #ffffff;
  --menu-hover: #2d2d2d;
  --menu-active-text: #{$menuActiveText};
  --menu-active-bg: #{$menuActiveBg};
  # 新增 4
  --menu-active-bg: #{$menuActiveBg};
  ...
}
....

3 微调菜单显示

3.1 左侧菜单微调

vue3/src/layout/components/Sidebar/index.vue

1）el-menu 添加style

2）删掉所有style 加载

复制代码

<template>
  <div :class="['sidebar-theme-wrapper', {'has-logo':showLogo}, sideTheme]" class="sidebar-container">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="getMenuBackground"
        :text-color="getMenuTextColor"
        :unique-opened="true"
        :active-text-color="theme"
        :collapse-transition="false"
        mode="vertical"
        :class="sideTheme"
        style="margin: 0 15px 0 15px;"
      >
        <sidebar-item
          v-for="(route, index) in sidebarRouters"
          :key="route.path + index"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
...
</script>

<style lang="scss" scoped>
/** 删掉所有**/
</style>

3.1.2 修改菜单的样式

1、修改深色配色方案：修改 1 处，删除3处

复制代码

@use './variables.module.scss' as vars;

#app {
	...
	
    .el-menu {
      border: none;
      height: 100%;
	  # 删掉 1
	  width: 100% !important;
    }

    ...

    // menu hover
    .sub-menu-title-noDropdown,
    .el-sub-menu__title {
      &:hover {
        background-color: rgba(0, 0, 0, 0.06) !important;
      }
    }

    # 修改 1 start
    & .theme-dark .el-menu-item {
      &.is-active {
        color: vars.$menuActiveText !important;
        background-color: vars.$menuActiveBg !important;
        border-radius: 5px;
      }
    }

    & .theme-dark .is-active > .el-sub-menu__title {
      color: vars.$base-menu-color-active !important;
      background-color: vars.$base-menu-background !important;
      border-radius: 5px;
    }

    & .nest-menu .el-sub-menu > .el-sub-menu__title,
    & .el-sub-menu .el-menu-item {
      &:hover {
        background-color: rgba(0, 0, 0, 0.06) !important;
      }
    }
     
	# 修改 1 end
    & .nest-menu .el-sub-menu>.el-sub-menu__title,
    & .el-sub-menu .el-menu-item {
      &:hover {
        background-color: rgba(0, 0, 0, 0.06) !important;
      }
    }

    ...
  }
  
  // theme-dark 深色主题
    &.theme-dark {
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
      border-right: none;

      .el-menu-item.is-active {
       
	  ...
	  /**
		删掉 2
      .el-sub-menu.is-active > .el-sub-menu__title {
        color: var(--current-color, #409eff) !important;
      }
	  **/

  ....
  
  /**
   删掉 3
  .el-menu--collapse .el-menu .el-sub-menu {
    min-width: vars.$base-sidebar-width !important;
  } **/
}

3.2 左侧log微调

vue3/src/layout/components/Sidebar/Logo.vue

1）修改获取深色log颜色为 #333333

复制代码

<template>
  ....
</template>

<script setup>
...
// 获取Logo文字颜色
const getLogoTextColor = computed(() => {
  if (settingsStore.isDark) {
    return 'var(--sidebar-text)'
  }
  return sideTheme.value === 'theme-dark' ? '#333333' : variables.menuLightText
})
</script>
<style lang="scss" scoped>
...
</style>

4、其他可选

4.1 默认弹窗样式不调整

vue3/src/assets/styles/ruoyi.scss

vue3/src/assets/styles/element-ui.scss

1）删掉 el-message-box 和 el-dialog 的样式调整

4.2 修复 pnpm 启动保存

复制代码

pnpm install sortablejs

5 修改效果

改动文件：

二首页和登陆页调整

2.1 安装

复制代码

pnpm install dayjs
pnpm install lodash
pnpm install decimal.js

2.2 新增工具类

vue3/src/utils/common.js

复制代码

import dayjs from "dayjs";
import lodash from 'lodash';
import Decimal from "decimal.js";
import router from "@/router/index.js";

const toString = Object.prototype.toString

// 下载文件
const common = {
    // 文件下载
    downloadFile: function (url, fileName) {
        const link = document.createElement('a'); // 创建一个链接元素
        link.style.display = 'none'
        link.href = url; // 设置链接的 URL
        link.download = fileName; // 设置下载文件的名称
        document.body.appendChild(link); // 将链接添加到 DOM
        link.click(); // 程序性点击链接
        document.body.removeChild(link); // 下载后移除链接
    },
    containsAny: function (sourceArray, targetArray) {// sourceArray里是否包含targetArray的元素
        return targetArray.some(item => sourceArray.includes(item));
    },
    is: (val, type) => {
        return toString.call(val) === `[object ${type}]`
    },
    isString: (val) => {
        return common.is(val, 'String')
    },
    isArray: (val) => {
        return val && Array.isArray(val)
    },
    isObject: (val) => {
        return val !== null && common.is(val, 'Object')
    },
    /**
     * 判断对象是否存在
     * @param data
     * @returns {boolean}
     */
    isNotExists: function (data) {
        return !common.isExists(data)
    },
    /**
     * 判断对象存在
     * @param data
     * @returns {boolean}
     */
    isExists: function (data) {
        return data !== null && data !== undefined && data !== '' && data !== 'undefined'
    },
    isEmpty: (val) => {
        if (val === null || val === undefined) {
            return true
        }
        if (common.isArray(val) || common.isString(val)) {
            return val.length === 0
        }

        if (val instanceof Map || val instanceof Set) {
            return val.size === 0
        }

        if (common.isObject(val)) {
            return Object.keys(val).length === 0
        }

        return false
    },
    /**
     * 将毫秒，转换成时间字符串。例如说，xx 分钟
     *
     * @param ms 毫秒
     * @returns {string} 字符串
     */
    formatMillisToStr: (ms) => {
        const day = Math.floor(ms / (24 * 60 * 60 * 1000))
        const hour = Math.floor(ms / (60 * 60 * 1000) - day * 24)
        const minute = Math.floor(ms / (60 * 1000) - day * 24 * 60 - hour * 60)
        const second = Math.floor(ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60)
        if (day > 0) {
            return day + ' 天' + hour + ' 小时 ' + minute + ' 分钟'
        }
        if (hour > 0) {
            return hour + ' 小时 ' + minute + ' 分钟'
        }
        if (minute > 0) {
            return minute + ' 分钟'
        }
        if (second > 0) {
            return second + ' 秒'
        } else {
            return 0 + ' 秒'
        }
    },
    // 计算某个时间字符串与当前的时间差，返回中文
    calcNowTimeDifferenceToStr: (timeStr) => {
        // 获取当前时间
        const currentTime = new Date();
        // 将时间字符串转为 Date 对象
        const targetTime = new Date(timeStr);
        try {
            return common.formatMillisToStr(currentTime - targetTime);
        } catch (e) {
            return '';
        }
    },
    // 格式化时间字符串
    parseTime(date, format = 'YYYY-MM-DD HH:mm:ss') {
        return dayjs(date).format(format)
    },
    // 格式化时间字符串
    formatToDate(date, format = 'YYYY-MM-DD') {
        return dayjs(date).format(format)
    },
    // 格式化时间字符串
    dateDayAdd(date, addDay) {
        return dayjs(date).add(addDay);
    },
    // 处理 modelValue 转换逻辑
    normalizeToNumber(input) {
        if (common.isEmpty(input)) {
            return input;
        }
        if (typeof input === 'string') {
            // 如果是单个字符字符串，转为数字
            const num = Number(input);
            return isNaN(num) ? null : num; // 如果无法转换为数字，返回空数组
        } else if (Array.isArray(input)) {
            // 如果是字符串数组，将每个字符串转为数字，不能转换的则移除
            if (input.every(item => typeof item === 'string')) {
                return input.map(item => {
                    const num = Number(item);
                    return isNaN(num) ? null : num;
                }).filter(item => item !== null);
            }
        }
        return input; // 默认返回空数组
    },
    // 排序倒序
    sortDesc(list, column) {
        if (common.isEmpty(list)) {
            return list
        }
        return lodash.cloneDeep(list)
            .slice() // 创建原数组的浅拷贝
            .sort((a, b) => {
                const aSortIndex = a[column] || null;
                const bSortIndex = b[column] || null;

                // 处理 null 值，将 null 视为最小值，放在后面
                if (aSortIndex === null && bSortIndex === null) return 0;
                if (aSortIndex === null) return 1;
                if (bSortIndex === null) return -1;

                // 如果都是数字
                if (typeof aSortIndex === 'number' && typeof bSortIndex === 'number') {
                    return bSortIndex - aSortIndex; // 从大到小排序
                }

                // 如果都是字符串
                if (typeof aSortIndex === 'string' && typeof bSortIndex === 'string') {
                    return bSortIndex.localeCompare(aSortIndex); // 从大到小排序
                }

                // 数字排后面
                return typeof aSortIndex === 'number' ? 1 : -1;
            });
    },
    // 排序正序
    sortAsc(list, column) {
        if (common.isEmpty(list)) {
            return list
        }
        return lodash.cloneDeep(list)
            .slice() // 创建原数组的浅拷贝
            .sort((a, b) => {
                const aSortIndex = a[column] || null;
                const bSortIndex = b[column] || null;

                // 处理 null 值，将 null 视为最小值
                if (aSortIndex === null && bSortIndex === null) return 0;
                if (aSortIndex === null) return -1;
                if (bSortIndex === null) return 1;

                // 如果都是数字
                if (typeof aSortIndex === 'number' && typeof bSortIndex === 'number') {
                    return aSortIndex - bSortIndex;
                }

                // 如果都是字符串
                if (typeof aSortIndex === 'string' && typeof bSortIndex === 'string') {
                    return aSortIndex.localeCompare(bSortIndex);
                }

                // 数字优先
                return typeof aSortIndex === 'number' ? -1 : 1;
            });
    },
    // 检测是否是手机
    isMobile() {
        if (typeof window === 'undefined' || window === null) {
            // 服务器端渲染（SSR）环境下，window 不存在，返回默认值
            return false;
        }
        // 根据屏幕宽度判断是否为手机
        const mobileWidth = 768; // 定义一个手机屏幕的最大宽度
        let userAgent = navigator.userAgent || navigator.vendor || window.opera;
        return window.innerWidth <= mobileWidth || (window.navigator && /Mobi|Android|iPhone|iPad|iPod/i.test(userAgent));
    },
    // 手机号脱敏
    maskPhoneNumber(phone) {
        if (common.isNotExists(phone)) {
            return "";
        }
        return phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
    },
    // 滚动到当前的错误提示
    scrollToError() {
        const firstErrorItem = document.querySelector('.el-form-item.is-error');
        if (firstErrorItem) {
            firstErrorItem.scrollIntoView({behavior: 'smooth', block: 'center'});
        }
    },
    // 按照 key 进行分组
    groupBy(list, keyGetter) {
        if (common.isEmpty(list)) {
            return new Map();
        }

        return list.reduce((map, item) => {
            const key = typeof keyGetter === 'function' ? keyGetter(item) : item[keyGetter];
            if (!map.has(key)) {
                map.set(key, []);
            }
            map.get(key).push(item);
            return map;
        }, new Map());
    },
    list_sum(list, key) {
        return list.reduce((acc, cur) => {
            const val = cur[key] ?? 0
            return acc.plus(val)
        }, new Decimal(0)).toNumber()  // ✅ 最终转成 JS 的 number
    },
    // 数组变成，财务的标准格式
    numberToLocale(val, zeroToDash = false,
                   format = {minimumFractionDigits: 2, maximumFractionDigits: 2}) {
        if (!val && val !== 0) return ''
        const num = Number(val)
        if (zeroToDash && num === 0) return '-'
        return num.toLocaleString(undefined, format)
    },
    // 过滤树结构中Id 为N的
    filterTreeAndSubByKey(data, key, val) {
        // 1 只要参数缺失1个，则直接返回
        if (common.isEmpty(data) || common.isNotExists(n)) {
            return data;
        }
        // 2 过滤掉它自己和它的下级
        return data
            .filter(item => item[key] !== val)
            .map(item => {
                // 如果有 children，则递归过滤
                if (item.children) {
                    const filteredChildren = common.filterTreeAndSubByKey(item.children, key, val);
                    return {
                        ...item,
                        children: filteredChildren.length > 0 ? filteredChildren : undefined,
                    };
                }
                return item;
            });
    },
    // 过滤树结构中Id 为N的
    filterTreeNodeByColumnText(nodes, column, columnText) {
        const result = []

        for (const node of nodes) {
            const match = node[column]?.toLowerCase().includes(columnText?.toLowerCase())
            let children = []

            if (node.children && node.children.length > 0) {
                children = common.filterTreeNodeByColumnText(node.children, column, columnText)
            }

            // 如果当前节点匹配，或子节点中有匹配的，就保留这个节点
            if (match || children.length > 0) {
                result.push({
                    ...node,
                    // 只保留匹配的子节点
                    children: children.length > 0 ? children : undefined
                })
            }
        }
        return result
    },
    // 获取tree所有下级值
    getTreeSelfAndAllChildrenValues(node, idColumn = 'id') {
        const result = [node[idColumn]]
        const dfs = (nodes) => {
            nodes.forEach(child => {
                result.push(child[idColumn])
                if (child.children) {
                    dfs(child.children)
                }
            })
        }
        if (node.children) {
            dfs(node.children)
        }
        return result
    },
    // 获取需要树展开的keys
    getTreeExpandKeys(deptTrees, keyStr = 'id', maxDepth = 6) {
        const result = []; // 用于存储所有节点的 id

        // 递归遍历树结构
        const traverse = (nodes, depth) => {
            if (!nodes || nodes.length === 0 || depth > maxDepth) return; // 如果节点为空或超过最大深度，直接返回

            for (const node of nodes) {
                result.push(node[keyStr]); // 将当前节点的 id 加入结果数组
                if (node.children && node.children.length > 0) {
                    traverse(node.children, depth + 1); // 递归遍历子节点，深度加 1
                }
            }
        };

        traverse(deptTrees, 1); // 从根节点开始遍历，初始深度为 1
        return result; // 返回所有节点的 id 数组
    },
    goToMenu(menuName) {
        router.push({name: menuName})
    }
};

export default common

2.3 新增 idea @识别路径

vue3/jsconfig.json

复制代码

{
	"compilerOptions": {
		"baseUrl": "./",
		"paths": {
			"@/*": [
				"src/*"
			]
		}
	},
	"exclude": [
		"node_modules",
		"dist"
	]
}

2.4 新增登陆背景图

vue3/src/assets/images/login-box-bg.svg

复制代码

<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 700 700" xml:space="preserve" enable-background="new 0 0 700 700"><style>.st0{fill:#e5e6eb}.st1{fill:#fff}.st2{fill:#84a9ff}.st3{fill:#050f64}.st4{fill:#155bcd}.st5{fill:#ffbd00}.st6{fill:#ff654f}.st9{fill:#f5bdc8}.st10{fill:#ea8096}.st11{opacity:0}.st13{fill:#dca000}</style><path class="st0" d="M101.8 176.7c21.4-19.8 48.8-33.2 77.8-37.2 92.4-12.6 158.2 78.1 240.3 104.9 40.8 13.3 85.4 12.6 125.4 28 68.5 26.2 131.4 117.8 101 191.6-23.7 57.5-79.6 71.8-134.6 54-33.5-10.9-64.1-29.4-97.6-40.5-38.1-12.6-78.7-15.1-118.9-16.7s-80.6-2.4-119.6-12-77-28.9-101.2-60.9C40.8 343.4 48 260.8 73.1 213.7c7.4-13.9 17.2-26.3 28.7-37z"/><path class="st1" d="M82 257.1c5.7-23.2 18.9-44.7 37.3-60.4l1.7-1.5 1.8-1.4 1.8-1.4 1.8-1.3c.6-.4 1.2-.9 1.8-1.3l1.9-1.3c.6-.4 1.2-.9 1.9-1.3l1.9-1.2c5.1-3.2 10.5-6 16.1-8.4 11.1-4.7 23-7.8 35.1-9 12.1-1.1 24.3-.5 36.1 1.5 5.9 1 11.8 2.4 17.6 4 .7.2 1.5.4 2.2.6l2.2.7 2.2.7 2.1.7 2.1.7 2.1.8 2.1.8 2.1.8c5.6 2.2 11.1 4.6 16.5 7.2 5.4 2.6 10.7 5.4 15.9 8.3 10.4 5.9 20.6 12.2 30.5 18.8-10.4-5.9-20.7-11.8-31.4-17.2-5.3-2.7-10.7-5.3-16.1-7.7-5.4-2.4-10.9-4.7-16.5-6.7l-2.1-.8-2.1-.7-2.1-.7-2.1-.7-2.1-.7-2.1-.6-2.1-.6-2.1-.6c-5.7-1.5-11.5-2.8-17.3-3.7-11.6-1.9-23.5-2.5-35.2-1.3-11.7 1.1-23.2 4-34.1 8.5-5.4 2.2-10.7 4.9-15.8 7.9l-1.9 1.1c-.6.4-1.2.8-1.9 1.2l-1.8 1.2c-.6.4-1.2.8-1.8 1.3l-1.8 1.3-1.8 1.3-1.8 1.3-1.7 1.4c-18.2 15.2-32 35.7-39.1 58.4z"/><path class="st2" d="M183.1 543.2c-.3 1.2-.5 1.8-.5 1.8-.7-.5-1.4-.9-2.1-1.4-120.8-82.8-72.6-232.2-72.6-232.2 115.7 67.3 80.1 213.8 75.2 231.8z"/><path class="st3" d="M183.1 543.2c-.3 1.2-.5 1.8-.5 1.8-.7-.5-1.4-.9-2.1-1.4-10.1-29.9-20.1-59.8-29.8-89.8-5-15.5-10-31.1-14.8-46.7l-3.6-11.7-3.5-11.7c-1.2-3.9-2.2-7.8-3.4-11.8-.6-2-1.1-3.9-1.6-5.9l-1.6-5.9 1.6 5.9c.5 2 1.1 3.9 1.7 5.9 1.2 3.9 2.3 7.8 3.5 11.7l3.6 11.7 3.7 11.7c5 15.5 10.2 31 15.4 46.5 10.4 30 20.8 59.9 31.4 89.7zM137.9 384.9c-.1 0-.2 0-.4-.1-.3-.1-.4-.5-.2-.8 3.7-7.2 6-15.3 6.7-23.4 0-.3.3-.5.6-.5s.5.3.5.6c-.7 8.2-3.1 16.5-6.9 23.8 0 .3-.2.4-.3.4zM154 430.5h-.3c-.3-.1-.4-.5-.3-.7 3.4-8.3 7.6-16.4 12.3-24.1.2-.3.5-.3.8-.2.3.2.3.5.2.8-4.7 7.6-8.8 15.6-12.2 23.9-.1.1-.3.3-.5.3zM137.4 440.3h-.3c-9.5-3.9-18.3-9.3-26.1-16.1-.2-.2-.3-.6-.1-.8.2-.2.6-.3.8-.1 7.7 6.7 16.3 12 25.7 15.9.3.1.4.5.3.7 0 .2-.1.3-.3.4zM125.9 390.5c-.2.1-.4.1-.6-.1l-19.2-15c-.2-.2-.3-.6-.1-.8.2-.2.6-.3.8-.1l19.2 15c.2.2.3.6.1.8 0 .1-.1.2-.2.2zM170.7 478.4h-.3c-.3-.1-.4-.5-.3-.7l10.1-23.5c.1-.3.5-.4.7-.3.3.1.4.5.3.7l-10.1 23.5c0 .1-.2.3-.4.3zM151.6 481.6h-.3l-24.3-10c-.3-.1-.4-.5-.3-.7.1-.3.5-.4.7-.3l24.3 10c.3.1.4.5.3.7-.1.1-.3.3-.4.3z"/><path class="st4" d="M182.3 543.2c.3 1.2.4 1.9.4 1.9-.8-.1-1.7-.2-2.5-.3C35 525 11 369.8 11 369.8c133.5 8.2 167.5 155.1 171.3 173.4z"/><path class="st1" d="M182.3 543.2c.3 1.2.4 1.9.4 1.9-.8-.1-1.7-.2-2.5-.3-22.5-22.1-44.8-44.4-66.9-66.8-11.5-11.6-22.9-23.3-34.2-35.1l-8.5-8.8-8.4-8.9c-2.8-3-5.5-6-8.3-9-1.4-1.5-2.7-3-4.1-4.6l-4-4.6 4.1 4.5c1.4 1.5 2.7 3 4.1 4.5 2.8 3 5.6 6 8.4 8.9l8.5 8.8 8.6 8.7c11.5 11.6 23 23.1 34.7 34.6 22.5 22.2 45.2 44.3 68.1 66.2zM70.7 422.1c-.1.1-.2.1-.3.1-.3 0-.6-.3-.6-.6.1-8.1-1.5-16.4-4.5-23.9-.1-.3 0-.6.3-.7.3-.1.6 0 .7.3 3 7.7 4.6 16.1 4.6 24.4 0 .1-.1.3-.2.4zM105.6 455.5c-.1.1-.2.1-.3.1-.3 0-.6-.2-.6-.5-.7-9-.6-18.1.2-27 0-.3.3-.5.6-.5s.5.3.5.6c-.8 8.9-.9 17.9-.2 26.8.1.2 0 .4-.2.5zM95.2 471.7c-.1.1-.2.1-.3.1-10.3.8-20.5-.1-30.5-2.7-.3-.1-.5-.4-.4-.7.1-.3.4-.5.7-.4 9.9 2.5 20 3.4 30.1 2.6.3 0 .6.2.6.5 0 .4-.1.5-.2.6zM62.6 432.4c-.1.1-.3.2-.5.2l-23.9-4.8c-.3-.1-.5-.4-.4-.7.1-.3.4-.5.7-.4l23.9 4.8c.3.1.5.4.4.7-.1.1-.1.2-.2.2zM142.1 490.8c-.1.1-.2.1-.3.1-.3 0-.6-.2-.6-.5l-1.5-25.5c0-.3.2-.6.5-.6s.6.2.6.5l1.5 25.5c0 .2-.1.4-.2.5zM126.4 502.3c-.1.1-.2.1-.3.1l-26.2 2c-.3 0-.6-.2-.6-.5s.2-.6.5-.6l26.2-2c.3 0 .6.2.6.5 0 .2-.1.4-.2.5z"/><g><path class="st5" d="M259.6 503.3c1.2.5 1.8.7 1.8.7-.5.7-1.1 1.3-1.7 1.9C164 616.8 20.9 552.3 20.9 552.3c79.7-107.4 221.4-55.9 238.7-49z"/><path class="st1" d="M259.6 503.3c1.2.5 1.8.7 1.8.7-.5.7-1.1 1.3-1.7 1.9-30.8 6.8-61.6 13.3-92.5 19.7-16 3.3-32 6.5-48 9.6l-12 2.3-12 2.2c-4 .7-8 1.4-12.1 2-2 .4-4 .6-6 .9l-6.1.9 6-1c2-.3 4-.6 6-1 4-.7 8-1.4 12-2.2l12-2.3 12-2.4c16-3.3 31.9-6.7 47.9-10.2 31-6.9 61.9-13.9 92.7-21.1zM97.3 530.8c0 .1 0 .2-.1.3-.2.3-.5.3-.8.2-6.8-4.5-14.6-7.7-22.5-9.3-.3-.1-.5-.4-.4-.7.1-.3.4-.5.7-.4 8.1 1.6 16 4.9 22.9 9.5.1 0 .1.2.2.4zM144.3 519.7c0 .1 0 .2-.1.3-.2.3-.5.4-.8.2-7.9-4.3-15.5-9.4-22.5-14.9-.2-.2-.3-.6-.1-.8.2-.2.6-.3.8-.1 7 5.5 14.6 10.5 22.4 14.8.2.1.3.3.3.5zM152.2 537.3c0 .1 0 .2-.1.3-4.9 9-11.3 17.2-18.8 24.1-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8 7.5-6.9 13.7-14.9 18.6-23.8.2-.3.5-.4.8-.2.2.1.3.3.3.4zM101.5 543.2c.1.2 0 .4-.1.6l-17 17.5c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8l17-17.5c.2-.2.6-.2.8 0 .1 0 .1.1.1.2zM193.8 508.4c0 .1 0 .2-.1.3-.2.3-.5.4-.8.2l-22.2-12.7c-.3-.2-.4-.5-.2-.8.2-.3.5-.4.8-.2l22.2 12.7c.2.2.3.3.3.5zM194.9 527.8c0 .1 0 .2-.1.3l-12.7 23.1c-.2.3-.5.4-.8.2-.3-.2-.4-.5-.2-.8l12.7-23.1c.2-.3.5-.4.8-.2.1.2.3.3.3.5z"/></g><g><path class="st2" d="M608.8 430.3c-1 .2-2.4-.3-4.4-1.4-3.2-1.9-8.3-4.9-10.2-6.1 3 6.3 5.8 12.7 8.3 19.2 4.5-1 7.9-.1 10.1 1.4 2.2 1.5 3.3 3.6 3.3 4.6-.1 2-1.8 2.4-4.9.3-1.6-1.1-3.7-2.6-5.5-3.9-1.3-.9-2.3-1.7-2.8-2 .8 2 1.5 4 2.2 6h.2c1.3.2 3.1 3.1 3.9 4.1 1.7 2.3 3 4.9 3.2 7.8.1 1.2-.1 2.6-1.2 3.2-1.2.6-2.6-.3-3.5-1.3-2.5-2.8-4-6.5-4.1-10.2 0-1-.1-3.3 1.2-3.5-.8-2-1.5-3.9-2.3-5.9-.1.6-.4 1.9-.7 3.4-.5 2.1-1.1 4.7-1.7 6.4-1.1 3.5-2.7 4.1-4 2.8-.7-.7-1.1-2.7-.3-5.2.8-2.4 2.6-5.3 6.6-7.7-2.7-6.4-5.6-12.7-8.8-18.9-.1.8-.3 2.2-.5 3.7-.3 2.6-.9 5.7-1.4 7.8-.5 2.1-1.2 3.4-2 4-.8.6-1.7.4-2.5-.3-.9-.7-1.6-3.1-.9-6.2.6-2.9 2.6-6.5 7-9.6-3.5-6.6-7.2-13.1-11.2-19.4v.3c0 1 0 2.5-.1 4.1-.1 1.6-.2 3.4-.3 5-.1 1.7-.4 3.3-.5 4.6-.8 5.3-3 6.6-5.2 5-1.2-.8-2.1-3.7-1.7-7.4.2-1.9.9-4 2.2-6.2 1.1-2 2.8-4.2 5.2-6.3-3.8-5.8-7.8-11.5-12-17 .1 1.2.2 2.8.2 4.6.1 1.8.1 3.9.1 5.8v2.8c0 .9-.1 1.8-.1 2.5-.4 6.1-2.8 7.8-5.5 6.2-.7-.4-1.4-1.4-1.9-2.8s-.8-3.3-.7-5.4c.1-2.2.7-4.6 1.9-7.3 1.1-2.4 2.8-5 5.2-7.6-4.2-5.4-8.5-10.5-13.1-15.5l2-1.8c4.5 5.2 8.8 10.5 12.9 16 3.1-1.6 6.1-2.5 8.8-2.7 3-.3 5.6.1 7.8.9s4 1.9 5.3 3.1c1.2 1.2 2 2.4 2.2 3.3.7 3.5-2 4.7-8 2.5-3.1-1.2-7.3-2.8-10.7-4.2-1.7-.6-3.3-1.2-4.4-1.6 4.1 5.6 8 11.5 11.6 17.4 2.9-1.2 5.6-1.7 8-1.8 2.6 0 4.8.5 6.7 1.4 3.8 1.7 5.8 4.5 6 6 .3 3.1-2 4-7.1 1.6-2.6-1.3-6.1-3-9-4.4-1.4-.7-2.8-1.3-3.7-1.8-.1 0-.1-.1-.2-.1 3.9 6.4 7.5 13 10.8 19.8 5.1-1.6 9.2-.9 12 .7 2.8 1.6 4.3 4 4.4 5.2-.7 1.1-1.2 1.8-2.2 2z"/></g><g><path class="st2" d="M552.1 373.7c-.5 1.1-.8 1.7-.8 1.7l-1.8-1.8c-105.3-101.8-32.8-241.1-32.8-241.1 102.7 85.7 43.2 224.2 35.4 241.2z"/><path class="st1" d="M552.1 373.7c-.5 1.1-.8 1.7-.8 1.7l-1.8-1.8c-5-31.1-9.8-62.3-14.4-93.5-2.4-16.1-4.7-32.3-6.8-48.5l-1.6-12.1-1.5-12.2c-.5-4.1-.9-8.1-1.4-12.2-.2-2-.4-4.1-.6-6.1l-.5-6.1.6 6.1c.2 2 .4 4.1.7 6.1.5 4 1 8.1 1.5 12.1l1.6 12.1 1.7 12.1c2.4 16.1 4.9 32.3 7.5 48.4 5.1 31.4 10.3 62.7 15.8 93.9zM533.9 210c-.1 0-.2 0-.3-.1-.3-.2-.3-.5-.1-.8 4.9-6.5 8.5-14.1 10.6-21.9.1-.3.4-.5.7-.4.3.1.5.4.4.7-2.1 8-5.8 15.7-10.7 22.3-.3.1-.5.2-.6.2zM542.2 257.6c-.1 0-.2 0-.3-.1-.3-.2-.3-.5-.2-.8 4.8-7.6 10.2-14.9 16.2-21.7.2-.2.6-.3.8-.1.2.2.3.6.1.8-5.9 6.7-11.3 13.9-16.1 21.5-.1.3-.3.4-.5.4zM524.2 264.5c-.1 0-.2 0-.3-.1-8.7-5.4-16.5-12.2-23-20.2-.2-.2-.2-.6.1-.8.2-.2.6-.2.8.1 6.4 7.9 14.1 14.6 22.7 19.9.3.2.3.5.2.8-.2.2-.4.3-.5.3zM521.2 213.5c-.2 0-.4 0-.5-.2l-16.5-18c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l16.5 18c.2.2.2.6 0 .8-.1.2-.2.2-.3.2zM550.7 307.7c-.1 0-.2 0-.3-.1-.3-.2-.3-.5-.2-.8l13.9-21.5c.2-.3.5-.3.8-.2.3.2.3.5.2.8l-13.9 21.5c-.1.2-.3.3-.5.3zM531.2 307.6c-.1 0-.2 0-.3-.1l-22.3-13.9c-.3-.2-.3-.5-.2-.8.2-.3.5-.3.8-.2l22.3 13.9c.3.2.3.5.2.8-.1.2-.3.3-.5.3z"/><g><path class="st4" d="M526.6 382.8c-1 .7-1.6 1-1.6 1-.2-.8-.4-1.6-.6-2.5-35-142.2 100.5-221.5 100.5-221.5 41.5 127.2-82.7 212.8-98.3 223z"/><path class="st3" d="M526.6 382.8c-1 .7-1.6 1-1.6 1-.2-.8-.4-1.6-.6-2.5 12.3-29 24.8-58 37.5-86.8 6.6-14.9 13.3-29.8 20-44.7l5.1-11.1 5.2-11.1c1.7-3.7 3.6-7.3 5.3-11 .9-1.8 1.8-3.6 2.7-5.5l2.8-5.4-2.7 5.5c-.9 1.8-1.8 3.6-2.7 5.5-1.7 3.7-3.5 7.4-5.2 11.1l-5.1 11.1-5 11.2c-6.6 14.9-13 29.9-19.4 44.9-12.2 29.2-24.3 58.5-36.3 87.8zM598.2 234.5c-.1-.1-.2-.2-.2-.3-.1-.3 0-.6.3-.7 7.6-2.9 14.7-7.4 20.6-13 .2-.2.6-.2.8 0 .2.2.2.6 0 .8-6 5.7-13.3 10.2-21 13.2-.1.1-.3.1-.5 0zM580 279.3c-.1-.1-.2-.1-.2-.2-.1-.3 0-.6.3-.8 8.1-3.9 16.6-7.2 25.2-9.7.3-.1.6.1.7.4.1.3-.1.6-.4.7-8.6 2.5-17 5.8-25 9.7-.3 0-.5 0-.6-.1zM561 275.5c-.1-.1-.2-.1-.2-.3-4.5-9.3-7.4-19.1-8.7-29.3 0-.3.2-.6.5-.6s.6.2.6.5c1.3 10.1 4.2 19.8 8.6 29 .1.3 0 .6-.3.8-.1 0-.3 0-.5-.1zM585.6 230.8c-.2-.1-.3-.2-.4-.4l-4.4-24c-.1-.3.1-.6.5-.7.3-.1.6.1.7.5l4.4 24c.1.3-.1.6-.5.7-.1-.1-.2-.1-.3-.1zM560.5 326.2c-.1-.1-.2-.1-.2-.2-.1-.3 0-.6.3-.8l23.2-10.8c.3-.1.6 0 .8.3.1.3 0 .6-.3.8l-23.2 10.8c-.2 0-.4 0-.6-.1zM544.1 315.8c-.1-.1-.2-.1-.2-.2l-11.5-23.7c-.1-.3 0-.6.3-.8.3-.1.6 0 .8.3l11.5 23.7c.1.3 0 .6-.3.8-.2 0-.5 0-.6-.1z"/></g><g><path class="st5" d="M482.2 415.1c-1.2 0-1.9-.1-1.9-.1l.9-2.4C532.4 275.4 689 286.2 689 286.2c-37.4 128.5-188.2 129.3-206.8 128.9z"/><path class="st1" d="M482.2 415.1c-1.2 0-1.9-.1-1.9-.1l.9-2.4c26.5-17 53.2-33.9 79.9-50.6 13.9-8.6 27.8-17.2 41.7-25.6l10.5-6.3 10.5-6.2c3.5-2.1 7.1-4.1 10.6-6.1 1.8-1 3.6-2 5.3-3l5.4-2.9-5.3 3c-1.8 1-3.6 2-5.3 3-3.5 2.1-7 4.1-10.5 6.2l-10.5 6.4-10.4 6.4c-13.8 8.6-27.6 17.4-41.4 26.2-26.6 17.2-53.1 34.5-79.5 52zM624.9 333c0-.1-.1-.2 0-.4.1-.3.4-.5.7-.4 7.9 1.8 16.3 2.2 24.3.9.3 0 .6.2.7.5 0 .3-.2.6-.5.7-8.2 1.3-16.7 1-24.8-.9l-.4-.4zM584.6 359.7c0-.1-.1-.2 0-.3 0-.3.3-.5.6-.5 8.9 1.3 17.8 3.4 26.3 6.2.3.1.5.4.4.7-.1.3-.4.5-.7.4-8.5-2.7-17.3-4.8-26.1-6.1-.3-.1-.4-.3-.5-.4zM571.1 345.9c-.1-.1-.1-.2-.1-.3 1.5-10.2 4.6-20 9.3-29.2.1-.3.5-.4.8-.2.3.1.4.5.2.8-4.6 9.1-7.7 18.7-9.2 28.8 0 .3-.3.5-.6.5-.2-.2-.4-.3-.4-.4zM616.6 322.8c-.1-.2-.1-.4-.1-.6l9.9-22.3c.1-.3.5-.4.8-.3.3.1.4.5.3.8l-9.9 22.3c-.1.3-.5.4-.8.3l-.2-.2zM542.1 387.4c0-.1-.1-.2 0-.3.1-.3.3-.5.7-.5l25.2 4.2c.3.1.5.3.5.7-.1.3-.3.5-.7.5l-25.2-4.2c-.3-.1-.4-.2-.5-.4zM534.4 369.6c0-.1-.1-.2 0-.3l3.9-26c0-.3.3-.5.6-.5s.5.3.5.6l-3.9 26c0 .3-.3.5-.6.5s-.4-.2-.5-.3z"/></g></g><g><path class="st2" d="M445 229c-.1 1 .4 2.4 1.6 4.3 2.1 3.1 5.4 8 6.6 9.9-6.4-2.7-13-5.1-19.6-7.3.8-4.5-.3-7.9-1.9-10-1.6-2.2-3.7-3.1-4.8-3-2 .2-2.3 1.9 0 4.9 1.1 1.5 2.8 3.5 4.2 5.3 1 1.2 1.8 2.2 2.2 2.7-2-.7-4.1-1.3-6.1-1.9v-.2c-.3-1.3-3.3-3-4.3-3.7-2.4-1.6-5.1-2.7-7.9-2.8-1.2 0-2.6.3-3.1 1.4-.5 1.2.5 2.6 1.5 3.4 2.9 2.4 6.7 3.6 10.4 3.5 1 0 3.3 0 3.5-1.4 2 .7 4 1.3 6 2-.6.2-1.9.5-3.4.9-2.1.6-4.6 1.4-6.3 2-3.4 1.3-4 2.9-2.6 4.2.7.6 2.8 1 5.2 0 2.4-.9 5.2-2.9 7.3-7 6.6 2.3 13 4.9 19.3 7.7-.8.1-2.2.4-3.7.7-2.5.5-5.6 1.2-7.7 1.8-2.1.6-3.3 1.4-3.9 2.2-.5.8-.4 1.7.4 2.5s3.2 1.4 6.2.5c2.9-.8 6.3-2.9 9.3-7.5 6.8 3.1 13.5 6.5 20 10.2h-.3c-1 .1-2.5.2-4.1.4-1.6.2-3.3.4-5 .6-1.7.2-3.3.5-4.6.8-5.2 1.1-6.4 3.3-4.7 5.5.9 1.1 3.8 1.9 7.5 1.3 1.9-.3 4-1.1 6.1-2.5 2-1.3 4-3 6-5.5 6 3.4 11.9 7.1 17.7 11.1h-4.6c-1.8 0-3.9.1-5.8.2-1 .1-1.9.1-2.8.2-.9.1-1.7.2-2.5.3-6.1.8-7.6 3.2-5.9 5.8.4.7 1.5 1.3 2.9 1.7 1.5.4 3.3.7 5.5.4 2.2-.3 4.6-.9 7.2-2.3 2.3-1.2 4.8-3 7.3-5.6 5.6 3.9 11 8 16.2 12.3l1.7-2.1c-5.4-4.2-11-8.2-16.7-12 1.4-3.2 2.1-6.2 2.2-8.9.1-3-.4-5.6-1.3-7.7-.9-2.1-2.1-3.9-3.4-5.1-1.3-1.2-2.5-1.9-3.4-2-3.5-.5-4.6 2.2-2 8.1 1.4 3 3.2 7.1 4.8 10.5.7 1.7 1.4 3.2 1.9 4.3-5.9-3.8-11.9-7.4-18-10.7 1-3 1.4-5.7 1.3-8.1-.1-2.6-.8-4.8-1.7-6.6-1.9-3.7-4.8-5.5-6.3-5.6-3.1-.2-3.9 2.3-1.2 7.2 1.4 2.5 3.3 5.9 4.9 8.8.8 1.4 1.5 2.7 2 3.6 0 .1.1.1.1.2-6.6-3.5-13.4-6.8-20.3-9.7 1.3-5.2.4-9.2-1.3-11.9-1.8-2.8-4.2-4.1-5.4-4.1-1.6.3-2.3.8-2.4 1.8z"/></g><g><path class="st2" d="M100.2 255.8c1-.1 2.4.5 4.3 1.8 3 2.2 7.8 5.7 9.6 7-2.4-6.5-4.6-13.2-6.4-19.9-4.6.6-7.9-.6-9.9-2.3-2.1-1.7-3-3.9-2.8-4.9.3-2 2-2.2 4.9.2 1.5 1.2 3.4 3 5.1 4.4 1.2 1 2.2 1.9 2.6 2.3-.6-2.1-1.1-4.1-1.6-6.2h-.2c-1.3-.3-2.8-3.4-3.5-4.5-1.5-2.4-2.5-5.2-2.5-8 0-1.2.4-2.6 1.5-3 1.3-.5 2.6.6 3.4 1.6 2.3 3 3.3 6.8 3.1 10.5-.1 1-.2 3.3-1.5 3.4.6 2 1.2 4.1 1.8 6.1.2-.6.6-1.9 1-3.4.7-2.1 1.6-4.5 2.3-6.2 1.4-3.4 3.1-3.9 4.3-2.4.6.7.8 2.8-.2 5.2-1 2.4-3.1 5-7.3 7 2 6.6 4.4 13.2 6.9 19.6.2-.8.5-2.2.8-3.7.6-2.5 1.4-5.6 2.1-7.6.7-2.1 1.5-3.3 2.4-3.8.9-.5 1.7-.3 2.5.5s1.2 3.3.3 6.2c-.9 2.8-3.2 6.2-7.8 8.9 2.8 6.9 5.9 13.8 9.3 20.4v-.3c.1-1 .3-2.4.5-4s.5-3.3.8-5c.3-1.7.7-3.3 1-4.6 1.3-5.2 3.6-6.3 5.7-4.5 1.1.9 1.8 3.9 1 7.5-.4 1.8-1.3 3.9-2.8 6-1.3 1.9-3.2 3.9-5.8 5.8 3.2 6.2 6.6 12.2 10.3 18.1 0-1.2.1-2.8.2-4.6.1-1.8.3-3.9.5-5.8.1-1 .2-1.9.3-2.8.1-.9.3-1.7.4-2.5 1-6 3.5-7.5 6.1-5.6.6.5 1.2 1.5 1.6 3 .3 1.5.5 3.3.2 5.5s-1.1 4.5-2.6 7.1c-1.3 2.3-3.2 4.7-5.9 7 3.6 5.7 7.5 11.3 11.6 16.7l-2.2 1.6c-4-5.6-7.8-11.3-11.3-17.2-3.3 1.3-6.3 1.9-9 1.9-3 0-5.6-.6-7.7-1.6-2.1-1-3.8-2.3-4.9-3.6-1.1-1.3-1.8-2.6-1.8-3.4-.3-3.5 2.4-4.5 8.2-1.7 2.9 1.5 7 3.5 10.3 5.2 1.7.8 3.1 1.5 4.2 2-3.6-6-6.9-12.2-9.9-18.5-3 .9-5.7 1.2-8.1 1-2.6-.2-4.7-1-6.5-2-3.6-2-5.3-5-5.4-6.6 0-3.1 2.4-3.8 7.2-.9 2.4 1.5 5.8 3.5 8.6 5.2 1.4.9 2.6 1.6 3.5 2.1.1 0 .1.1.2.1-3.3-6.8-6.2-13.7-8.8-20.7-5.3 1.1-9.2 0-11.9-1.8-2.7-1.9-3.9-4.4-3.8-5.6-.1-.9.5-1.6 1.5-1.7z"/></g><g><path class="st4" d="M106.8 558.3c0 13.1 8.1 23.7 18.2 23.7h455c10.1 0 18.2-10.6 18.2-23.7H106.8z"/><path class="st2" d="M155.4 290.9H549.6V538.5H155.4z"/><path class="st3" d="M556.6 264.8h-408c-7.6 0-13.8 6.2-13.8 13.8V540c0 7.6 6.2 13.8 13.8 13.8h408c7.6 0 13.8-6.2 13.8-13.8V278.6c0-7.7-6.2-13.8-13.8-13.8z"/><path class="st1" d="M155.4 285.5H549.6V533.1H155.4z"/><path class="st0" d="M295.7 558.3L196.6 558.3 196.9 553.9 197.3 548.4 294.9 548.4zM508.6 558.3L409.4 558.3 409.8 553.9 410.2 548.4 507.8 548.4z"/></g><g><path class="st0" d="M188 451.7H222.4V455.59999999999997H188zM235 451.7H269.4V455.59999999999997H235zM328.6 451.7H353.5V455.59999999999997H328.6zM374.8 451.7H413.5V455.59999999999997H374.8zM342.3 465.1H359.90000000000003V469H342.3zM342.3 475.3H359.90000000000003V479.2H342.3zM342.3 485.6H359.90000000000003V489.5H342.3zM342.3 495.8H359.90000000000003V499.7H342.3z"/><path class="st6" d="M209.7 465.1H222.39999999999998V469H209.7z"/><path class="st2" d="M209.7 475.3H222.39999999999998V479.2H209.7z"/><path class="st4" d="M209.7 485.6H222.39999999999998V489.5H209.7z"/><path class="st5" d="M209.7 495.8H222.39999999999998V499.7H209.7z"/><path class="st0" d="M399.7 465.1H417.3V469H399.7zM399.7 475.3H417.3V479.2H399.7zM399.7 485.6H417.3V489.5H399.7zM399.7 495.8H417.3V499.7H399.7zM234.6 465.1H252.2V469H234.6zM234.6 475.3H260.7V479.2H234.6zM234.6 485.6H267.5V489.5H234.6zM234.6 495.8H249.7V499.7H234.6zM180.4 314.6H306V321.5H180.4z"/><path class="st4" d="M180.4 340.4H198.20000000000002V347.9H180.4zM216.1 340.4H233.9V347.9H216.1zM251.8 340.4H269.6V347.9H251.8zM287.5 340.4H305.3V347.9H287.5zM323.3 340.4H341.1V347.9H323.3zM359 340.4H376.8V347.9H359zM394.7 340.4H412.5V347.9H394.7z"/><g><path class="st0" d="M180.4 355.7H430.20000000000005V358H180.4z"/></g><g><path class="st0" d="M427.7 446.2H181v-90.4h-2v92.5h250.7v-92.5h-2v90.4z"/><path class="st0" d="M405.1 355.7H407.1V447.2H405.1zM382.4 355.7H384.5V447.2H382.4zM359.8 355.7H361.8V447.2H359.8zM337.2 355.7H339.2V447.2H337.2zM314.6 355.7H316.6V447.2H314.6zM292 355.7H294V447.2H292zM269.4 355.7H271.4V447.2H269.4zM246.8 355.7H248.8V447.2H246.8zM224.2 355.7H226.2V447.2H224.2zM201.6 355.7H203.7V447.2H201.6z"/><path class="st0" d="M179 355.7H429.7V357.7H179zM180 378.4H428.7V380.4H180zM180 401H428.7V403H180zM180 423.6H428.7V425.6H180z"/><g><path class="st2" d="M203.6 396.2H219.79999999999998V446.3H203.6zM248.8 385.8H265V446.3H248.8zM294.1 410.5H310.3V446.3H294.1zM339.3 373.7H355.5V446.29999999999995H339.3zM384.5 393.3H400.7V446.3H384.5z"/></g><g><path class="st6" d="M201.6 396.2H217.79999999999998V446.3H201.6zM246.8 385.8H263V446.3H246.8zM292 410.5H308.2V446.3H292zM337.2 373.7H353.4V446.29999999999995H337.2zM382.5 393.3H398.7V446.3H382.5z"/></g></g><g><path class="st0" d="M179 471.1H429.7V473.20000000000005H179z"/></g><g><path class="st0" d="M179 481.3H429.7V483.40000000000003H179z"/></g><g><path class="st0" d="M179 491.6H429.7V493.70000000000005H179z"/></g><g><path class="st0" d="M179 501.8H429.7V503.90000000000003H179z"/></g><g><path class="st6" d="M473.5 352.4c.9-5.5 5.4-9.8 10.9-10.6l-.2-5.1-.5-12.6c-14.7 1.2-26.4 12.7-27.9 27.2l12.6.8 5.1.3z"/><path class="st5" d="M491.1 366.7c-1.5.6-3.1.9-4.8.9-2.9 0-5.6-.9-7.7-2.5l-3.5 3.8-8.5 9.2c5.3 4.5 12.2 7.2 19.7 7.2 4.7 0 9.1-1 13-2.9l-5.9-11.1-2.3-4.6zM516.3 361.3l-12.4-2.1c-1.2 4.6-4 8.4-7.9 10.9l5.9 11.1 2.7 5.2c8.8-5.1 15.3-13.8 17.5-24.1l-5.8-1z"/><path class="st6" d="M468.2 354.9l-12.6-.8-5.9-.4v.9c0 10.1 4.1 19.3 10.7 25.9l4-4.3 8.5-9.2c-2.8-3.2-4.6-7.4-4.7-12.1z"/><path class="st4" d="M495.9 339.3l-2.4 4.6c3.5 2.3 5.7 6.3 5.7 10.8v.8l5.1.9 12.4 2.1c.2-1.3.2-2.5.2-3.8 0-11.3-6.1-21.2-15.2-26.5l-5.8 11.1zM487 336.6c2.3.1 4.4.6 6.4 1.4l5.8-11.2 2.7-5.2c-4.7-2.3-10-3.5-15.7-3.5l.2 5.9.6 12.6z"/></g><g><path class="st0" d="M446.7 407.2H525.1V411.09999999999997H446.7zM446.7 441.5H450.59999999999997V445.4H446.7zM454.4 441.5H525.1V445.4H454.4z"/><path class="st4" d="M446.7 456.1H450.59999999999997V460H446.7z"/><path class="st0" d="M454.4 456.1H525.1V460H454.4z"/><path d="M446.7 470.8H450.59999999999997V474.7H446.7z" style="fill:#6292ff"/><path class="st0" d="M454.4 470.8H525.1V474.7H454.4z"/><path d="M446.7 485.4H450.59999999999997V489.29999999999995H446.7z" style="fill:#da5544"/><path class="st0" d="M454.4 485.4H525.1V489.29999999999995H454.4z"/><path class="st5" d="M446.7 500H450.59999999999997V503.9H446.7z"/><path class="st0" d="M454.4 500H525.1V503.9H454.4zM446.7 417.7H525.1V430.7H446.7z"/></g></g><g><path class="st3" d="M522.8 556.7c.3-.3.7-.5 1.1-.6.4-.1.8-.1 1.3-.1 1-.1 2-.3 2.9-.8.5-.3.9-.6 1.4-.8l2.9.1c.4.4.7 1 .8 1.6.1.5.1 1.1.1 1.6v.6h-10.8v-.6c0-.4 0-.8.3-1z"/><path class="st9" d="M532.7 551.2L532.4 554.5 529.4 554.4 529.2 551.4z"/><path class="st3" d="M494 555.5c.3-.3.7-.4 1.1-.5.4 0 .8 0 1.3.1 1 .1 2.1-.1 3-.5.5-.2 1-.5 1.5-.6l2.9.4c.4.5.5 1.1.6 1.7.1.5 0 1.1-.1 1.6l-.1.6-10.7-1.2.1-.6c0-.4.1-.8.4-1z"/><path class="st4" d="M535.3 503.7c.6-11.4.5-27.5-2.6-36.6 0-.2-23.9 2-23.9 2l-5.6 22.9c-2 8.1-2.9 16.3-2.8 24.6l.3 34.4 4 .3 7.5-45.5c2.8-5.4 5.8-11.6 8.1-17.7l8.7 63.4 4-.2c0-.1 2.3-47.6 2.3-47.6z"/><path class="st9" d="M504.5 551.2L503.8 554.4 500.9 554 501 551z"/><path class="st10" d="M481.6 394.3c.7-.3 1.6 0 1.9.7 2 4 4.2 7.8 6.6 11.5 2.4 3.7 5 7.2 7.8 10.5s5.8 6.4 9.1 9.1c1.6 1.4 3.3 2.7 5 3.9.4.3.9.6 1.3.9l1.3.9c.9.6 1.8 1.1 2.7 1.7.3.2.5.4.8.6.2.2.4.5.6.7.3.5.6 1.1.7 1.8.3 1.3.1 2.7-.7 4-.8 1.3-2 2.1-3.3 2.3-.7.1-1.4.1-2.1 0-.3-.1-.7-.2-1-.3l-.9-.6c-.9-.7-1.8-1.5-2.7-2.3l-1.3-1.2c-.4-.4-.9-.8-1.3-1.2-1.7-1.6-3.4-3.4-4.9-5.1-3.1-3.5-6-7.3-8.5-11.2-2.5-3.9-4.7-8-6.6-12.2-1.9-4.2-3.6-8.4-5.1-12.7-.5-.7-.1-1.5.6-1.8z"/><path class="st2" d="M500.2 434.6l9.4 7.3c2.8 2.2 6.8 1.9 9-.9s1.8-7.2-1.1-9.4l-9.4-7.3-7.9 10.3z"/><path class="st2" d="M521.8 428.5c-9-.1-16 7.9-14.8 16.8l1.8 23.7c10 3.6 17.5 1.6 23.9-2l1.1-25.2c.7-7.1-4.9-13.2-12-13.3z"/><path class="st1" d="M531.8 433.5l-.2.2c1 1.4 1.7 3 2 4.7h.3c-.3-1.7-1-3.4-2.1-4.9zm-9.9 37.3v.3c2.2-.2 4.4-.8 6.6-1.7l-.1-.2c-2.1.8-4.2 1.3-6.5 1.6zm5.1-41.3c-1.6-.8-3.4-1.2-5.2-1.2h-.2c-4.3 0-8.5 1.9-11.3 5.2-1.7 1.9-2.8 4.2-3.3 6.6l.3.1c1.5-6.6 7.4-11.6 14.5-11.5 1.9 0 3.6.5 5.2 1.2v-.4zM508.6 466c-.1 0-.2.1-.3.1l.2 3 .2.1c2.2.8 4.5 1.4 6.6 1.7v-.3c-2.1-.3-4.2-.8-6.5-1.7l-.2-2.9zm-1.8-20.6l.9 12h.3l-.9-12h-.3z"/><path class="st3" d="M524 412.1s6.2 1.5 4.7 8.4c-1 4.6-4.4 7-9.2 7.8l4.5-16.2z"/><path class="st9" d="M517.5 423.7l.5 7.1c2 1.2 4 1.1 5.9-.3l-.5-7.1-5.9.3z"/><path class="st10" d="M517.6 424.6l.1 2.2c.9.5 1.9.7 3 .7h.2c1-.1 2-.5 2.7-1.2l-.1-2.1-5.9.4z"/><path class="st9" d="M514.6 415.4l.4 5.3.1 1.2c.3 2.9 2.7 5.1 5.6 5.1.3 0 .6 0 .9-.1.1 0 .2-.1.3-.1h.1c.4-.2.8-.4 1.1-.8.7-.8 1.1-1.6 1.5-2.5.3-.7.6-1.5.8-2.2.2-.9.4-1.8.2-2.8l-.4-4.6-9-.7-1.6 2.2z"/><path class="st3" d="M523.9 414s-10.3.6-8.2 9.7c0 0-3.2-6.5.1-10.9 3.6-4.8 8.5-3.2 10.2-.9 1.7 2.3 3 6.1-1.8 8.9-.1-.1 1.5-3.5-.3-6.8z"/><path class="st9" d="M523.7 419.5c.1 1.2 1.1 2.1 2.3 2 1.2-.1 2.1-1.1 2-2.3-.1-1.2-1.1-2.1-2.3-2-1.2.1-2.1 1.1-2 2.3z"/><g><path class="st3" d="M503.8 450.8l-7.4-8c4.5-4.2 6.9-9.8 6.9-15.9h10.9c0 9.1-3.8 17.8-10.4 23.9z"/><path class="st4" d="M514.2 427h-10.9c0-12-9.7-21.7-21.7-21.7-2.6 0-5.1.4-7.5 1.3l-3.8-10.2c3.6-1.3 7.4-2 11.3-2 18-.1 32.6 14.6 32.6 32.6z"/><path class="st2" d="M481.6 459.6c-18 0-32.6-14.6-32.6-32.6 0-13.6 8.6-25.9 21.4-30.6l3.8 10.2c-8.5 3.1-14.2 11.3-14.2 20.4 0 12 9.7 21.7 21.7 21.7 5.5 0 10.8-2.1 14.8-5.8l7.4 8c-6.1 5.6-14 8.7-22.3 8.7z"/></g><g><path class="st9" d="M471.1 455.3c0-.8.5-1.5 1.3-1.5 4.4-.5 8.8-1.1 13.1-2.1 4.3-.9 8.5-2.1 12.6-3.5 4.1-1.5 8-3.2 11.8-5.2 1.9-1 3.7-2.1 5.5-3.3.4-.3.9-.6 1.3-.9l1.3-.9c.8-.6 1.7-1.2 2.5-1.9.3-.2.6-.4.8-.5l.9-.3c.6-.1 1.3-.1 1.9 0 1.3.2 2.6.9 3.5 2.1.9 1.2 1.2 2.6 1 3.9-.1.7-.4 1.3-.8 1.9-.2.3-.4.6-.7.8-.3.3-.6.5-.9.7-1 .6-2.1 1.2-3.1 1.7l-1.6.8c-.5.3-1.1.5-1.6.8-2.1 1-4.3 2-6.5 2.8-4.4 1.7-9 3-13.5 3.9-4.6.9-9.2 1.5-13.7 1.9-4.6.3-9.1.4-13.7.3-.8 0-1.4-.7-1.4-1.5z"/><path class="st2" d="M515.5 452.5l10.1-6.2c3.1-1.9 4.3-5.7 2.4-8.8-1.9-3.1-6.1-4.2-9.1-2.3l-10.1 6.2 6.7 11.1z"/><path class="st1" d="M529.1 439.4c-.1-.7-.4-1.4-.8-2-.9-1.5-2.5-2.7-4.3-3.1-.3-.1-.6-.1-.9-.2v.3c2 .3 3.9 1.4 4.9 3.2 1.4 2.3 1.1 5-.5 7l.2.1c1.3-1.5 1.8-3.4 1.4-5.3zm-3.3 7.1s.1 0 .1-.1l-.3-.1-3 1.8.2.2 3-1.8zm-4.2 2.6l-.2-.2-2.9 1.7.2.2 2.9-1.7zm-4.4 2.6l-.2-.2-1.5.9-5.2-8.5-.2.1 5.3 8.8 1.8-1.1zm.2-15.9l-7.4 4.5.1.2 7.4-4.5-.1-.2z"/></g></g><g><path class="st10" d="M234.4 464c0-.8-.5-1.5-1.3-1.6-2.3-.3-4.6-.6-6.9-1-2.3-.4-4.5-.8-6.7-1.3s-4.3-1.2-6.2-2c-1.9-.8-3.7-1.9-5.3-3.1-3.2-2.5-5.7-6-8-9.7-.3-.5-.6-.9-.9-1.4l-.8-1.4c-.6-1-1.1-2-1.7-3-1.1-2-2.2-4-3.2-6.1-1.4-2.6-4.7-3.5-7.2-2s-3.3 4.8-1.7 7.3c1.4 1.9 2.7 3.9 4.1 5.8.7 1 1.4 1.9 2.2 2.9l1.1 1.4c.4.5.8.9 1.1 1.4 1.6 1.9 3.2 3.7 5 5.5 1.8 1.8 3.9 3.4 6.1 4.8 2.3 1.3 4.7 2.3 7.2 3 2.5.7 4.9 1.1 7.3 1.3 2.4.2 4.8.4 7.1.4 2.4.1 4.7.1 7 .1 1 0 1.7-.6 1.7-1.3z"/><path class="st3" d="M190.5 450.4l-6.3-10c-1.9-3-1.3-7 1.8-8.9 3-1.9 7.3-1.1 9.2 2l6.3 10-11 6.9z"/><path class="st9" d="M181.4 505.2L189.7 554.4 192.6 553.9 193.4 504.8z"/><path class="st4" d="M194.2 504.7l-13.6.5c-3.7-9-6.9-28.9-3.1-38.1l15.2 3.4 1.5 34.2z"/><circle transform="rotate(-16.739 184.847 470.406)" class="st4" cx="184.8" cy="470.4" r="7.9"/><g class="st11"><path class="st4" d="M184.8 470.4L184.8 470.4 184.8 470.4 184.8 470.3z"/></g><path class="st9" d="M165.9 503.2L161.1 553.4 164.1 553.6 177.6 505.8z"/><path class="st4" d="M180.4 462.7c-3.2-1-6.5.2-8.5 2.7-.1.2-.3.4-.4.6-5.7 8.3-7.5 27.6-6.3 37l13.2 3 7.3-33.4c1.3-4.2-1.1-8.6-5.3-9.9z"/><path class="st2" d="M180.4 497.1l-1.9 8.9-2.2-.5v.3l2.4.5 2-9.1-.3-.1zm-11.9-25.8c-1.3 3.5-2.4 7.8-3.1 12.8v.3h.3c.6-4.6 1.7-9.1 3.1-12.9l-.3-.2zm-3.9 23.7h.3c0-2.2.2-4.5.4-6.8h-.3c-.3 2.3-.4 4.6-.4 6.8zm.6 8c-.2-1.3-.3-2.8-.3-4.4h-.3c.1 1.6.2 3.1.3 4.4v.2l8 1.8.1-.2-7.8-1.8zm18.6-21.8l-1.7 7.9h.3l1.7-7.9h-.3z"/><path class="st3" d="M170.4 556.6c-.2-.4-.6-.6-1-.7-.4-.1-.8-.1-1.2-.2-1-.2-2-.6-2.8-1.2-.4-.3-.8-.7-1.3-.9l-2.9-.3c-.4.4-.8.9-1 1.5-.2.5-.2 1.1-.3 1.6l-.1.6 10.7 1.2.1-.6c.1-.3 0-.7-.2-1zM199.5 555.1c-.3-.3-.7-.4-1.2-.4-.4 0-.8.1-1.3.1-1 .1-2.1 0-3-.4l-1.5-.6-2.9.5c-.3.5-.5 1.1-.5 1.7 0 .5 0 1.1.1 1.6l.1.6 10.7-1.6-.1-.6c0-.3-.1-.6-.4-.9zM182 428.8c9 .1 15.8 8.2 14.4 17.1l-3.6 24c-6.5 2.3-15.6 1.5-23.1-.7v-27.4c-.5-7.1 5.2-13.1 12.3-13z"/><path class="st1" d="M169.4 457.4v10.4h.3v-10.4h-.3zm12.6-28.8h-.1c-.4 0-.8 0-1.2.1v.3c.4 0 .8-.1 1.3-.1 2.1 0 4 .5 5.8 1.2l.1-.2c-1.8-.9-3.8-1.3-5.9-1.3zm11.3 5.3c-.8-.9-1.7-1.8-2.7-2.5l-.2.2c3.7 2.7 6.1 7.1 6.1 11.9 0 .8-.1 1.6-.2 2.4l-.8 5.3.3.1.8-5.3c.7-4.4-.5-8.8-3.3-12.1zm-.6 36c-5.9 2.1-13.9 1.6-20.9-.1v.3c4 1 8.1 1.5 11.8 1.5 3.5 0 6.6-.5 9.2-1.4l.1-.1 2.1-13.8h-.3l-2 13.6zm-16.9-39.5l-.1-.3c-1.1.6-2.1 1.4-2.9 2.3-2.4 2.5-3.6 5.9-3.3 9.3v6.4h.3v-6.4c-.4-4.7 2.1-9 6-11.3z"/><g><path class="st9" d="M186.2 424.7l-.4 7.3c-2.1 1.1-4 1-5.9-.4l.4-7.3 5.9.4z"/><path class="st10" d="M186.1 426.9v.8c-.9.5-2 .7-3.1.7h-.2c-1-.1-1.9-.5-2.6-1.2l.1-2.1 5.8 1.8z"/><path class="st9" d="M189.3 416.4l-.5 5.2-.1 1.2c-.3 2.9-2.8 5.1-5.7 5-.3 0-.6-.1-.9-.1-.1 0-.2-.1-.3-.1h-.1c-.4-.2-.8-.5-1.1-.8-.6-.8-1-1.6-1.4-2.5-.3-.8-.6-1.5-.8-2.3-.2-.9-.3-1.8-.2-2.8l.2-3.6 9.3-1.5 1.6 2.3z"/><path class="st3" d="M189 424.6s0-3.1-.1-4.6c-.1-1.4-.4-2.8-1.5-2.6-2.1.4-2.9-1.4-2.9-1.4-.6 0-1.2.1-1.9.3-3.1.8-3.6 0-4-.5-.8 2.4-.5 5.5-.5 5.8 0 .1.1.3.1.4.2.8.5 1.5.8 2.3.3.7.6 1.4 1 2v.5c-2.2-.4-4.9-2.8-5.6-4.7-2.3-7.2 1.6-11.5 7.1-12.6 4.8-.9 7.4 3.5 8.4 7.5.8 2.3-.3 7-.9 7.6z"/><path class="st9" d="M180.2 420.3c-.1 1.2-1.1 2.1-2.3 2-1.2-.1-2.1-1.1-2-2.3.1-1.2 1.1-2.1 2.3-2 1.2.1 2 1.1 2 2.3z"/></g><g><path transform="rotate(-180 274.437 454.01)" class="st2" d="M269 446.1H279.8V462H269z"/><path transform="rotate(-180 260.511 447.387)" class="st2" d="M255.1 432.8H265.9V461.90000000000003H255.1z"/><path transform="rotate(-180 246.585 443.424)" class="st4" d="M241.2 424.9H252V461.9H241.2z"/><path transform="rotate(-180 232.659 439.712)" class="st4" d="M227.2 417.5H238V461.9H227.2z"/><path transform="rotate(-180 218.732 441.217)" class="st4" d="M213.3 420.5H224.10000000000002V461.9H213.3z"/><path transform="rotate(-180 204.806 443.424)" class="st2" d="M199.4 424.9H210.20000000000002V461.9H199.4z"/><path transform="rotate(-180 190.88 447.387)" class="st4" d="M185.5 432.8H196.3V461.90000000000003H185.5z"/><g><path transform="rotate(-180 232.659 462.663)" class="st3" d="M183.1 461.9H282.3V463.4H183.1z"/></g></g><g><path class="st9" d="M227.5 461.9c-.1-.8-.7-1.4-1.5-1.4h-6.9c-2.3-.1-4.6-.2-6.8-.4s-4.4-.6-6.4-1.1c-2-.6-3.9-1.3-5.7-2.4-3.5-2.1-6.5-5.1-9.3-8.5-.4-.4-.7-.8-1.1-1.3l-1-1.3c-.7-.9-1.4-1.8-2-2.7-1.4-1.8-2.7-3.7-4-5.6-1.7-2.3-5.1-2.8-7.4-.9-2.3 1.8-2.6 5.3-.6 7.5 1.6 1.7 3.2 3.4 4.9 5.2.8.9 1.7 1.7 2.5 2.6l1.3 1.3c.4.4.9.8 1.3 1.2 1.8 1.7 3.7 3.3 5.8 4.8 2.1 1.5 4.3 2.8 6.7 3.9 2.4 1 5 1.7 7.5 2 2.5.3 5 .4 7.4.3 2.4-.1 4.8-.3 7.1-.6s4.7-.6 7-.9c.7-.3 1.2-1 1.2-1.7z"/><path class="st3" d="M181.9 454.2l-7.7-9c-2.3-2.7-2.2-6.7.5-9.1 2.7-2.3 7.1-2.1 9.4.7l7.7 9-9.9 8.4z"/><path class="st1" d="M179.6 434.3c-1.2-.1-2.3.1-3.4.6l.1.2c2.6-1.2 5.9-.6 7.8 1.7l.7.8.2-.2-.7-.8c-1.1-1.3-2.8-2.2-4.7-2.3zm12.2 11.6l-8.1 6.8.2.2 8.3-7-4.4-5.2-.2.2 4.2 5zm-18-9.1c-1.8 2.1-1.9 5.2-.4 7.7l.2-.1c-1.4-2.3-1.4-5.3.3-7.4l-.1-.2zm7.4 17l.2-.2-3.7-4.4-.2.2 3.7 4.4z"/></g></g><g><path class="st3" d="M630.9 587.7H74.2c-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9H631c1.6 0 2.9 1.3 2.9 2.9-.1 1.6-1.4 2.9-3 2.9z"/></g><g><path transform="rotate(-40.957 194.403 297.627)" class="st2" d="M179.5 288.7H209.2V306.4H179.5z"/><path transform="rotate(-40.957 148.955 337.083)" class="st4" d="M103.6 323.8H194.2V350.40000000000003H103.6z"/><path class="st4" d="M294.2 300.4c28.1-24.4 31.2-67.2 6.7-95.3-24.4-28.1-67.2-31.2-95.3-6.7-25.9 22.5-30.5 60.4-12.1 88.2 1.6 2.4 3.4 4.8 5.4 7.1 2 2.3 4.1 4.4 6.2 6.3 25 22.1 63.3 22.9 89.1.4zm-76.9-88.6c20.7-18 52.3-15.8 70.3 5s15.8 52.3-5 70.3-52.3 15.8-70.3-5-15.8-52.3 5-70.3z"/><g style="opacity:.5"><path class="st2" d="M212.3 282.1c-18-20.8-15.8-52.3 5-70.3 20.7-18 52.3-15.8 70.3 5s15.8 52.3-5 70.3c-20.7 17.9-52.3 15.7-70.3-5z"/></g><g><path class="st1" d="M263.6 217c.2-.4.4-.7.8-1 1-.8 2.5-.5 3.2.5l20.8 28.3c.8 1 .5 2.5-.5 3.2-1 .8-2.5.5-3.2-.5l-20.8-28.3c-.5-.6-.6-1.5-.3-2.2zM252.5 225.2c.2-.4.4-.7.8-1 1-.8 2.5-.5 3.2.5l20.8 28.3c.8 1 .5 2.5-.5 3.2-1 .8-2.5.5-3.2-.5l-20.8-28.3c-.5-.6-.6-1.5-.3-2.2z"/></g></g><g><path class="st3" d="M410 551.8l-12.9 6.5c-.2-.4-.3-.9-.2-1.4.1-.6.5-1 .9-1.3.5-.3 1-.6 1.5-.8 1.2-.7 2.2-1.6 3-2.8.4-.6.7-1.2 1.2-1.8l3.6-1.7c.7.3 1.4.8 1.9 1.4.4.5.7 1.2 1 1.9zM422.6 556.4l-14.4 1.9c-.1-.5 0-1 .2-1.4.3-.5.8-.8 1.3-1 .5-.2 1.1-.2 1.7-.3 1.4-.2 2.6-.8 3.7-1.6.6-.4 1.1-.9 1.7-1.3l3.9-.4c.6.5 1.1 1.2 1.3 2 .4.7.5 1.4.6 2.1zM416.5 508.6L416.5 508.6 416.5 508.6z"/><g class="st11"><path class="st3" d="M414.6 478.3L414.6 478.3 414.6 478.3 414.6 478.3z"/></g><path class="st3" d="M416.5 508.6L416.5 508.6 416.5 508.6zM416.5 508.6L416.5 508.6 416.5 508.6z"/><path class="st2" d="M384.1 510.1l18.8 40.3 4.7-1.9-12-37.6 9.7-15.3 11 57.2 5.1-.3.1-73.2c.1-.7-30.9-2.6-30.9-2.6l-6.8 30.4c-.1 1.1 0 2 .3 3zm32.4-1.5z"/><g class="st11"><path class="st3" d="M416.5 508.6L416.5 508.6 416.5 508.6z"/></g><path class="st10" d="M352.8 484.7c1.5-1.5 3-2.8 4.5-4.2.4-.3.7-.7 1.1-1 .4-.4.7-.7 1.1-1l1-1.1.5-.5.5-.5c2.7-2.9 5.1-6 7.3-9.3 1-1.7 2.1-3.3 3.1-5l.7-1.3c.1-.2.2-.4.4-.6l.3-.7 1.3-2.6c.1-.2.2-.4.3-.7l.3-.7.6-1.3.6-1.3.3-.7.2-.3.1-.3 1.1-2.7c.4-.9.7-1.8 1.1-2.8.4-1.2 1.4-2 2.6-2.4 1.2-.4 2.6-.4 3.9.2 1.3.6 2.3 1.6 2.8 2.7.5 1.2.5 2.5-.1 3.7-.5.9-1 1.8-1.6 2.8l-1.6 2.7-.2.3-.2.3-.4.7-.9 1.3-.9 1.3-.4.7c-.1.2-.3.4-.5.7l-1.8 2.6-.5.6c-.2.2-.3.4-.5.6l-1 1.3c-1.3 1.7-2.7 3.3-4.1 4.9-2.9 3.1-6 6.1-9.2 8.7l-.6.5-.6.5-1.3.9c-.4.3-.8.6-1.3.9-.4.3-.8.6-1.3.9-1.7 1.2-3.4 2.3-5 3.4-.5.4-1.3.3-1.9-.3-.3-.6-.3-1.4.2-1.9z"/><path class="st4" d="M383.8 465.5l5.6-12.2c1.7-3.7.4-8-3.3-9.7-3.7-1.7-8.4-.1-10 3.6l-5.6 12.2 13.3 6.1z"/><g><path class="st4" d="M389.8 435.7c-7.7 1.9-12.2 9.9-9.6 17.5l11.9 36.1c13.9 1.7 20.3-2.7 29.7-9.7l-12.4-33.5c-3-7.9-11.4-12.4-19.6-10.4z"/></g><g><path class="st1" d="M403.3 438.2c1.4 1 2.7 2.2 3.8 3.7l.3-.3c-1.1-1.4-2.4-2.7-3.8-3.7l-.3.3zm16 43.1l.2.3c.8-.6 1.5-1.1 2.3-1.7l.2-.2-3.2-8.7-.4.1 3.1 8.5c-.6.5-1.4 1.1-2.2 1.7zm-27.6 8.3h.3c2.7.3 5.1.5 7.3.4l-.1-.4c-2.2.1-4.5 0-7.2-.3l-7-21.2-.4.1 7.1 21.4zm20.6-3.7c-1 .5-1.9 1-3 1.4l.2.4c1.1-.5 2.1-1 3.1-1.5l-.3-.3zm2.1-26l.4-.2-3-8-.4.2 3 8zm-32.6-.2l.4-.1-2.1-6.5c-2.3-6.8 1.2-14.1 7.6-16.8.3-.1.6-.3 1-.4l-.2-.4-.9.3c-6.8 2.8-10.3 10.4-7.9 17.4l2.1 6.5z"/></g><g><path class="st4" d="M353.2 491.4c8.2 7.9 20.6 10.6 31.7 6l-11.3-26.9-20.4 20.9z"/><path class="st3" d="M373.6 470.4l29.2-1.4c-.2-3.3-.9-6.7-2.3-9.9-2.7-6.4-7.4-11.3-13.1-14.4l-13.8 25.7zM362.2 443.5l11.3 26.9 13.9-25.7c-7.4-4-16.7-4.8-25.2-1.2z"/><path class="st3" d="M373.6 470.4l11.3 26.9c11.6-4.9 18.4-16.4 17.8-28.3l-29.1 1.4z"/><path class="st4" d="M346.7 481.8c1.6 3.7 3.8 7 6.6 9.6l20.4-21-29-3.4c-.7 4.9-.1 9.9 2 14.8z"/></g><g><path class="st9" d="M371.3 467.3c.5-.6 1.3-.7 1.9-.3 1.8 1.2 3.7 2.4 5.6 3.4.9.5 1.9 1 2.9 1.4 1 .4 1.9.8 2.9 1.1 1 .3 1.9.5 2.8.5h1.2c.4 0 .8-.1 1.1-.2.3-.1.6-.3.9-.4.3-.2.5-.4.8-.6.2-.2.5-.5.7-.8.2-.3.4-.6.6-1 .4-.7.7-1.6 1-2.5.3-.9.5-1.8.7-2.8.4-2 .6-4 .7-6.1.1-2.1.2-4.2.2-6.4 0-2.1-.1-4.3-.2-6.5 0-1.4.5-2.6 1.5-3.6.9-.9 2.2-1.5 3.7-1.5 1.4 0 2.7.6 3.7 1.6.9 1 1.4 2.3 1.3 3.7-.2 2.3-.4 4.6-.8 6.8-.3 2.3-.7 4.6-1.1 6.9-.5 2.3-1 4.6-1.8 7-.4 1.2-.8 2.3-1.4 3.5-.6 1.2-1.2 2.3-2 3.4-.4.6-.9 1.1-1.4 1.6-.5.5-1.1 1-1.7 1.4-.6.4-1.3.8-2.1 1.1-.7.3-1.5.5-2.2.6-.7.1-1.5.1-2.2.1h-.6l-.5-.1c-.3-.1-.7-.1-1-.2-1.3-.3-2.5-.7-3.6-1.2s-2.2-1.1-3.2-1.7c-1-.6-2-1.3-2.9-2-1.9-1.4-3.6-2.8-5.3-4.3-.6-.5-.7-1.3-.2-1.9z"/><path class="st4" d="M406.8 461.8l.4-13.4c.1-4.1-2.8-7.6-6.8-7.7-4.1-.1-7.7 3.2-7.9 7.2l-.4 13.4 14.7.5z"/><path class="st1" d="M392.2 449.3h.4V448c0-.5.1-.9.2-1.4l-.4-.1c-.1.5-.2 1-.2 1.5v1.3zm11.3 12.8l3.7.1.1-4.1-.4-.1-.1 3.8-3.3-.1v.4zm3.7-11.4l-.2 4.9h.4l.2-5-.4.1zm-12.7-7.9l.4.1c1.5-1.4 3.4-2.2 5.5-2.2 1.7.1 3.3.7 4.4 1.8l.2-.3c-1.3-1.2-2.9-1.8-4.6-1.9-1.1 0-2.2.2-3.3.6-1 .5-1.9 1.1-2.6 1.9zm-2.6 15.2l.4.1.1-3.4h-.4l-.1 3.3zm4.5 3.9l3.4.1v-.4l-3.3-.1-.1.4z"/></g><g><path class="st9" d="M383 434.5l4.8 8.4c2.5.2 4.3-.9 5.5-3.1l-4.8-8.4-5.5 3.1z"/><path class="st10" d="M383 434.5l2.2 3.8c.5-.1.9-.2 1.4-.4.1-.1.3-.1.4-.2 1.5-.9 2.5-2.4 2.8-4l-1.3-2.3-5.5 3.1z"/><path class="st9" d="M377.6 430.8l2.1 3.5.9 1.4c1.2 1.9 3.7 2.7 5.7 1.7.7-.3 1.3-.8 1.7-1.3.1-.1.2-.3.3-.4.1-.1.1-.2.2-.3.5-.9.8-1.8.7-2.9-.1-.9-.2-1.8-.3-2.8-.1-.6-.2-1.1-.3-1.7-.5-2.5-2.3-4.6-4.7-5.3-2.1-.6-4-.1-5.6 1.6-1.7 1.8-2 4.4-.7 6.5z"/><path class="st3" d="M385.7 429.1h-.8s0-3.2-.8-3.9c-1.2-1-4.5.3-5.9 1.4-.4.4-.7.7-.7 1.3.1 1.2.5 3.5 1.7 5.5 0 0-5-5.2-4.5-9.4.3-2.8.8-4.8 4.3-4.8 5.5 0 9.6 2.7 11.2 8.4l-3.5.2-1 1.3z"/><g><path class="st9" d="M385.9 429.5c.6 1 2 1.3 3.1.7s1.6-2 1-3c-.6-1-2-1.3-3.1-.7-1.2.6-1.6 2-1 3z"/></g></g></g><g><path class="st5" d="M305 499.7H375.1V558.3H305z"/><path class="st13" d="M281.2 499.7H305V558.3H281.2z"/><path class="st13" d="M305 499.7L295.6 517.6 269.4 517.6 281.2 499.7zM386 519.6L316 524.1 305 499.7 375.1 504.2z"/><path class="st5" d="M386 519.6L316 519.6 305 499.7 375.1 499.7zM305 499.7L299.7 519.7 269.4 517.6 295.6 517.6z"/></g><g><path class="st0" d="M38.9 241.8c3.5-18.6 10.8-36.5 20.7-52.7 5-8.1 10.7-15.8 17.1-22.9 3.2-3.6 6.5-7 10-10.3 3.5-3.3 7.1-6.4 10.8-9.4 15-11.9 32.3-20.9 50.6-26.7 9.2-2.9 18.6-4.9 28.1-6.1 2.4-.3 4.8-.5 7.1-.8l3.6-.3c1.2-.1 2.4-.1 3.6-.2 4.8-.2 9.6-.2 14.4 0 4.8.2 9.6.7 14.3 1.3 4.8.6 9.5 1.5 14.2 2.5 2.3.5 4.7 1.1 7 1.7l3.5 1c1.2.3 2.3.7 3.4 1.1.6.2 1.1.4 1.7.5l1.7.6c1.1.4 2.3.8 3.4 1.2 1.1.4 2.2.8 3.4 1.3l3.3 1.4c.6.2 1.1.5 1.7.7l1.6.7 3.3 1.5 3.2 1.6 1.6.8 1.6.8 3.2 1.7 3.1 1.7 1.6.9 1.5.9 3.1 1.8c4.1 2.4 8.1 4.9 12.1 7.5 4 2.6 7.9 5.2 11.9 7.9 7.8 5.3 15.6 10.7 23.5 15.9 3.9 2.6 7.9 5.1 11.9 7.6 4 2.4 8.1 4.8 12.2 7.1 2 1.2 4.1 2.2 6.2 3.3 1 .6 2.1 1 3.2 1.6 1.1.5 2.1 1.1 3.2 1.5 2.1 1 4.3 2 6.5 2.8 1.1.4 2.2.9 3.3 1.3l3.3 1.2 3.3 1.2c1.1.4 2.2.8 3.4 1.1l3.4 1c.6.2 1.1.3 1.7.5l1.7.4c1.1.3 2.3.6 3.4.8l3.5.7c.6.1 1.2.2 1.7.3l1.7.3 3.5.5c-9.4-.8-18.8-2.7-27.8-5.6-9-2.9-17.8-6.7-26.3-11-4.3-2.1-8.4-4.4-12.5-6.8-4.1-2.4-8.2-4.8-12.2-7.3s-8-5.1-12-7.6l-11.9-7.7c-4-2.6-7.9-5.1-11.9-7.6s-8-4.9-12.1-7.3l-3.1-1.7-1.5-.9-1.5-.8-3.1-1.7-3.1-1.6-1.6-.8-1.6-.8-3.2-1.5-3.2-1.4-1.6-.7c-.5-.2-1.1-.4-1.6-.7-17.2-7.2-35.7-11.2-54.3-11.9-18.6-.8-37.4 1.5-55.2 6.9-4.5 1.3-8.9 2.9-13.2 4.6-4.3 1.7-8.6 3.7-12.7 5.8-8.3 4.2-16.2 9.2-23.7 14.8-7.4 5.7-14.4 11.9-20.8 18.8-6.4 6.8-12.2 14.2-17.4 22-10.6 15.9-18.3 33.3-22.9 51.7z"/></g><g><path class="st0" d="M658 370.2c6.5 13.9 10.3 29.1 11.5 44.5 1.1 15.4-.4 31.1-4.6 46.1-4.2 14.9-11.2 29.1-20.3 41.6-9.1 12.5-20.3 23.5-33.2 31.9 11.9-9.7 22.3-21 30.7-33.6 8.4-12.6 14.9-26.4 19-41 4.1-14.5 5.9-29.7 5.3-44.9-.4-15.1-3.3-30.2-8.4-44.6z"/></g><g><path class="st1" d="M639.8 422.2c.4 9.5-.9 19.2-3.6 28.3-1.4 4.6-3.1 9.1-5.2 13.4-2.1 4.3-4.6 8.5-7.3 12.4-2.8 3.9-5.9 7.6-9.2 11.1-3.4 3.4-7 6.6-10.9 9.4-7.7 5.7-16.4 10.1-25.5 12.9 8.8-3.5 17.1-8.3 24.6-14.1 3.7-2.9 7.2-6.1 10.5-9.5 3.3-3.4 6.3-7 9-10.9 2.7-3.8 5.1-7.9 7.3-12.1 2.1-4.2 3.9-8.6 5.4-13.1 2.9-8.8 4.5-18.2 4.9-27.8z"/></g></svg>

2.5 变更登录页

vue3/src/views/login.vue

复制代码

<template>
  <div class="login-container">
    <!-- 左侧品牌展示区（PC显示） -->
    <div class="login-banner">
      <div class="banner-content">
        <!-- 图标放上方 -->
        <div class="banner-icon">
          <img src="@/assets/images/login-box-bg.svg" alt="科技图标"/>
        </div>
        <h2 class="banner-title">{{ title }}</h2>
        <p class="banner-desc">高效 · 安全 · 智能的管理系统</p>
      </div>


      <!-- 光圈装饰 -->
      <span class="circle-light"></span>

      <!-- 动态漂浮点阵 + 连线 -->
      <svg class="tech-dots" viewBox="0 0 1 1" preserveAspectRatio="none">
        <line v-for="(line, index) in lines" :key="index"
              :x1="line.x1" :y1="line.y1" :x2="line.x2" :y2="line.y2"
              stroke="rgba(102,204,255,0.2)" stroke-width="0.001"/>
        <circle v-for="dot in dots" :key="dot.id"
                :cx="dot.x" :cy="dot.y" r="0.008" class="dot"/>
      </svg>
    </div>

    <!-- 右侧表单区 -->
    <div class="login-form-wrapper">
      <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
        <h3 class="title mobile-title">{{ title }}</h3>

        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="账号" prefix-icon="User"/>
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="Lock"
                    @keyup.enter="handleLogin"/>
        </el-form-item>

        <el-form-item prop="code" v-if="captchaEnabled">
          <div class="code-group">
            <el-input v-model="loginForm.code" placeholder="验证码" prefix-icon="Key" @keyup.enter="handleLogin"/>
            <img :src="codeUrl" @click="getCode" class="code-img" title="点击刷新验证码"/>
          </div>
        </el-form-item>

        <el-form-item class="form-actions">
          <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
          <router-link class="link-register" :to="'/register'" v-if="register">立即注册</router-link>
        </el-form-item>

        <el-form-item>
          <el-button :loading="loading" type="primary" class="login-btn" @click.prevent="handleLogin">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>

      <div class="el-login-footer">
        <span>© 2018-2025 fisec.cn All Rights Reserved.</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {getCodeImg} from "@/api/login"
import Cookies from "js-cookie"
import {encrypt, decrypt} from "@/utils/jsencrypt"
import useUserStore from '@/store/modules/user'

const title = import.meta.env.VITE_APP_TITLE
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const {proxy} = getCurrentInstance()

const loginForm = ref({
  username: "admin",
  password: "admin123",
  rememberMe: false,
  code: "",
  uuid: ""
})

const loginRules = {
  username: [{required: true, trigger: "blur", message: "请输入您的账号"}],
  password: [{required: true, trigger: "blur", message: "请输入您的密码"}],
  code: [{required: true, trigger: "change", message: "请输入验证码"}]
}

const codeUrl = ref("")
const loading = ref(false)
// 验证码开关
const captchaEnabled = ref(true)
// 注册开关
const register = ref(false)
const redirect = ref(undefined)

watch(route, (newRoute) => {
  redirect.value = newRoute.query && newRoute.query.redirect
}, {immediate: true})

function handleLogin() {
  proxy.$refs.loginRef.validate(valid => {
    if (valid) {
      loading.value = true
      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
      if (loginForm.value.rememberMe) {
        Cookies.set("username", loginForm.value.username, {expires: 30})
        Cookies.set("password", encrypt(loginForm.value.password), {expires: 30})
        Cookies.set("rememberMe", loginForm.value.rememberMe, {expires: 30})
      } else {
        // 否则移除
        Cookies.remove("username")
        Cookies.remove("password")
        Cookies.remove("rememberMe")
      }
      // 调用action的登录方法
      userStore.login(loginForm.value).then(() => {
        const query = route.query
        const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
          if (cur !== "redirect") {
            acc[cur] = query[cur]
          }
          return acc
        }, {})
        router.push({path: redirect.value || "/", query: otherQueryParams})
      }).catch(() => {
        loading.value = false
        // 重新获取验证码
        if (captchaEnabled.value) {
          getCode()
        }
      })
    }
  })
}

function getCode() {
  getCodeImg().then(res => {
    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
    if (captchaEnabled.value) {
      codeUrl.value = "data:image/gif;base64," + res.img
      loginForm.value.uuid = res.uuid
    }
  })
}

function getCookie() {
  const username = Cookies.get("username")
  const password = Cookies.get("password")
  const rememberMe = Cookies.get("rememberMe")
  loginForm.value = {
    username: username === undefined ? loginForm.value.username : username,
    password: password === undefined ? loginForm.value.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
  }
}

// ---------------- 动态点阵 + 连线 ----------------
const dots = reactive([])
const lines = reactive([])
const DOT_COUNT = 40
const LINE_DISTANCE = 0.12 // 最大连线距离（相对SVG比例）

function random(min, max) {
  return Math.random() * (max - min) + min
}

onMounted(() => {
  // 初始化点
  for (let i = 0; i < DOT_COUNT; i++) {
    dots.push({
      id: i,
      x: random(0, 1),
      y: random(0, 1),
      dx: random(-0.002, 0.002),
      dy: random(-0.002, 0.002)
    })
  }

  function animate() {
    lines.length = 0
    for (let dot of dots) {
      dot.x += dot.dx
      dot.y += dot.dy
      if (dot.x < 0 || dot.x > 1) dot.dx *= -1
      if (dot.y < 0 || dot.y > 1) dot.dy *= -1
    }

    // 计算连线
    for (let i = 0; i < dots.length; i++) {
      for (let j = i + 1; j < dots.length; j++) {
        const dx = dots[i].x - dots[j].x
        const dy = dots[i].y - dots[j].y
        const dist = Math.sqrt(dx * dx + dy * dy)
        if (dist < LINE_DISTANCE) {
          lines.push({x1: dots[i].x, y1: dots[i].y, x2: dots[j].x, y2: dots[j].y})
        }
      }
    }
    requestAnimationFrame(animate)
  }

  animate()
})

getCode()
getCookie()
</script>

<style lang="scss" scoped>
$primary-color: #409eff;
$text-dark: #1d2129;
$text-light: #86909c;
$mobile-breakpoint: 768px;

.login-container {
  display: flex;
  height: 100vh;
  position: relative;

  /* 左侧品牌区 */
  .login-banner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, #66ccff 0%, #409eff 100%);
    overflow: hidden;
    padding: 2rem;

    .banner-content {
      position: relative;
      z-index: 2;
      max-width: 400px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .banner-icon {
        margin-top: -50px;
        width: 350px;
        height: 350px;
        margin-bottom: 0.8rem; // 原 1.5rem -> 0.8rem，文字往上
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          display: block;
        }
      }

      .banner-title {
        font-size: 2.4rem;
        font-weight: 700;
        margin-top: -50px;
        margin-bottom: 0.4rem; // 原 0.8rem -> 0.4rem，更紧凑
        line-height: 1.2;
        background: linear-gradient(90deg, #66ccff, #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .banner-desc {
        font-size: 1.1rem;
        margin-top: 0; // 删除多余空隙
        line-height: 1.5;
        opacity: 0.9;
      }
    }

    .circle-light {
      position: absolute;
      top: 20%;
      left: 20%;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
      z-index: 1;
      animation: pulse 3s infinite;
    }

    .tech-dots {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .dot {
      fill: #66CCFF;
      filter: drop-shadow(0 0 4px rgba(102, 204, 255, 0.6));
    }

    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
        opacity: 0.3;
      }
      50% {
        transform: scale(1.2);
        opacity: 0.15;
      }
    }
  }

  /* 右侧表单区 */
  .login-form-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f4ff, #ffffff);

    .login-form {
      width: 380px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 16px;
      padding: 2rem;
      backdrop-filter: blur(12px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

      .title {
        text-align: center;
        font-size: 1.6rem;
        font-weight: 600;
        color: $text-dark;
        margin-bottom: 2rem;
      }

      .el-form-item {
        margin-bottom: 1rem;
      }

      .code-group {
        display: flex;
        gap: 10px;
        align-items: center;
      }

      .code-img {
        width: 100px;
        height: 38px;
        border-radius: 6px;
        cursor: pointer;
        object-fit: cover;
        border: 1px solid #dcdfe6;
      }

      .login-btn {
        width: 100%;
        height: 46px;
        border-radius: 8px;
        font-size: 1rem;
      }

      .form-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
      }

      .link-register {
        font-size: 0.9rem;
        color: $primary-color;
      }
    }
  }

  .el-login-footer {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 0.8rem;
    color: $text-light;
  }

  @media (max-width: $mobile-breakpoint) {
    flex-direction: column;
    .login-banner {
      display: none;
    }
    .login-form-wrapper {
      width: 100%;
      height: 100%;
      background: #f0f4ff;

      .login-form {
        background: rgba(255, 255, 255, 0.95);
        padding: 1.5rem;
        border-radius: 12px;
      }

      .mobile-title {
        display: block;
        margin-bottom: 1.5rem;
      }
    }
  }
}
</style>

2.6 变更首页

vue3/src/views/index.vue

复制代码

<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <el-card shadow="hover" class="news-card">
          <template #header>
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <el-text>通知公告</el-text>
              <el-button type="primary" icon="ArrowRight" @click="common.goToMenu('Notice')" link
                         style="display: flex; align-items: center;">更多
              </el-button>
            </div>
          </template>
          <el-row v-for="item in noticeList" :key="item.id" class="news-item"
                  @click="detailViewRef.open(item.noticeId)">
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
              <el-icon class="news-icon" :class="item.type">
                <component :is="getNoticeIcon(item.noticeType)"/>
              </el-icon>
              <el-space direction="vertical" class="news-content">
                <el-text class="news-title" :title="item.title">{{ item.noticeTitle }}</el-text>
                <el-text class="news-time">{{ item.createTime }}</el-text>
              </el-space>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card shadow="hover">
          <template #header>
            <el-text>快捷方式</el-text>
          </template>
          <el-row class="shortcut-area">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" class="shortcut" @click.stop="common.goToMenu('User')">
              <el-icon>
                <DataLine/>
              </el-icon>
              <el-text size="small">用户管理</el-text>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" class="shortcut" @click.stop="common.goToMenu('Role')">
              <el-icon>
                <Place/>
              </el-icon>
              <el-text size="small">角色管理</el-text>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" class="shortcut" @click.stop="common.goToMenu('Menu')">
              <el-icon>
                <Document/>
              </el-icon>
              <el-text size="small">菜单管理</el-text>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" class="shortcut" @click.stop="common.goToMenu('Dept')">
              <el-icon>
                <ArrowDown/>
              </el-icon>
              <el-text size="small">组织管理</el-text>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" class="shortcut" @click.stop="common.goToMenu('Post')">
              <el-icon>
                <Compass/>
              </el-icon>
              <el-text size="small">岗位管理</el-text>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" class="shortcut" @click.stop="common.goToMenu('Dict')">
              <el-icon>
                <QuestionFilled/>
              </el-icon>
              <el-text size="small">字典管理</el-text>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" class="shortcut" @click.stop="common.goToMenu('Config')">
              <el-icon>
                <User/>
              </el-icon>
              <el-text size="small">参数设置</el-text>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" class="shortcut" @click.stop="common.goToMenu('Notice')">
              <el-icon>
                <Setting/>
              </el-icon>
              <el-text size="small">通知公告</el-text>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-divider/>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>若依后台管理框架</h2>
        <p>
          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
        </p>
        <p>
          <b>当前版本:</b> <span>v{{ version }}</span>
        </p>
        <p>
          <el-tag type="danger">&yen;免费开源</el-tag>
        </p>
        <p>
          <el-button
              type="primary"
              icon="Cloudy"
              plain
              @click="goTarget('https://gitee.com/y_project/RuoYi-Vue')"
          >访问码云
          </el-button
          >
          <el-button
              icon="HomeFilled"
              plain
              @click="goTarget('http://ruoyi.vip')"
          >访问主页
          </el-button
          >
        </p>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <el-row>
          <el-col :span="12">
            <h2>技术选型</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <h4>后端技术</h4>
            <ul>
              <li>SpringBoot</li>
              <li>Spring Security</li>
              <li>JWT</li>
              <li>MyBatis</li>
              <li>Druid</li>
              <li>Fastjson</li>
              <li>...</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h4>前端技术</h4>
            <ul>
              <li>Vue</li>
              <li>Vuex</li>
              <li>Element-ui</li>
              <li>Axios</li>
              <li>Sass</li>
              <li>Quill</li>
              <li>...</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <DetailView ref="detailViewRef" />
  </div>
</template>

<script setup name="Index">
import {Bell, Document} from "@element-plus/icons-vue";
import {listNotice} from "@/api/system/notice.js";
import common from "@/utils/common.js";
import DetailView from "@/layout/components/HeaderNotice/DetailView.vue";

const detailViewRef = ref()

const noticeList = ref([])

function getNoticeList() {
  listNotice({
    pageNum: 1,
    pageSize: 5,
    orderByColumn: 'noticeId',
    isAsc: 'desc',
    noticeTitle: undefined,
    createBy: undefined,
    status: 0
  }).then(response => {
    noticeList.value = response.rows
  })
}

// 根据类型选择图标
const getNoticeIcon = (type) => {
  return type === '1' ? Bell : Document
}

onMounted(() => {
  getNoticeList()
})

</script>

<style scoped lang="scss">
.home {
  :deep(.el-card__header) {
    padding: 10px 20px;
  }

  :deep(.el-card__body) {
    padding: 10px 20px;
  }
}

.news-card {
  .news-item {
    display: flex;
    align-items: flex-start;
    padding: 6px 0;
    border-bottom: 1px solid #ebeef5;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .news-item:last-child {
    border-bottom: none;
  }

  .news-item:hover {
    background-color: #e9ffee;
  }

  .news-icon {
    font-size: 24px;
    margin-right: 12px;
    margin-top: 6px;
  }

  .news-icon.news {
    color: #409eff;
  }

  .news-icon.notice {
    color: #e6a23c;
  }

  .news-content {
    display: inline-block;
  }

  .news-title {
    font-size: 15px;
    color: #303133;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .news-time {
    font-size: 13px;
    color: #909399;
  }
}

.shortcut-area {
  .shortcut {
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .el-icon {
      width: 70px;
      height: 50px;
      line-height: 60px;
      border-radius: 2px;
      font-weight: 500;
      font-size: 30px;
      background-color: #f8f8f8;
      color: #333;
    }
  }

  .shortcut:hover {
    .el-icon {
      background-color: #e9ffee;
      color: #009688;
      box-shadow: 1px 1px 4px #cccccc53;
    }

    .el-text {
      font-weight: 600;
      color: #009688;
    }
  }
}

</style>

2.7 登陆页改造效果图

三、改造后项目地址

地址：分支为 boot3-blue
git clone https://gitee.com/javakly/RuoYi-Vue.git

若依-vue3 把深色版本改成天蓝色-含登录页

一、 将菜单配置换成天蓝色

1、 将配置面板改成蓝色

2 修改 variables.module.scss配色

3 微调菜单显示

3.1 左侧菜单微调

3.1.1 Sidebar/index.vue 调整

3.1.2 修改菜单的样式

3.2 左侧log微调

4、其他可选

4.1 默认弹窗样式不调整

4.2 修复 pnpm 启动保存

5 修改效果

二 首页和登陆页调整

2.1 安装

2.2 新增工具类

2.3 新增 idea @识别路径

2.4 新增登陆背景图

2.5 变更登录页

2.6 变更首页

2.7 登陆页改造效果图

三、改造后项目地址

一、将菜单配置换成天蓝色

1、将配置面板改成蓝色

二首页和登陆页调整