Auto Commit

.gitignore

-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-package-lock.json
-
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# Compiled class file
+*.class
+
+# Log file
+*.log
+
+# BlueJ files
+*.ctxt
+
+# Mobile Tools for Java (J2ME)
+.mtj.tmp/
+
+# Package Files #
+*.jar
+*.war
+*.nar
+*.ear
+*.zip
+*.tar.gz
+*.rar
+
+# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
+hs_err_pid*
+node_modules
+.idea/

.inscode

-run = "npm i && npm run dev"
 language = "node"
 
-[deployment]
-build = "npm i && npm run build"
-run = "npm run preview"
-
-[env]
-PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
-XDG_CONFIG_HOME = "/root/.config"
-npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
-
 [debugger]
 program = "main.js"

LICENSE

+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.en.md

+# koi-vue3-screen
+
+#### Description
+vue3版本数据大屏模板
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

README.md

-# VueJS-with-Vite
 
-Vue.js 是基于 JavaScript 构建用户界面的库。该模板使用 Vite 来提供应用程序服务。
+## 介绍
+vue3版本数据大屏模板
+
+## 软件架构
+软件架构说明：使用Vue3+Ts+Vite+DataV+ElementPlus+SASS
+
+## 项目截图
+<table>
+    <tr>
+        <td><img src="./example.png"/></td>
+    </tr>
+</table>
+
+## 安装教程
+1. 下载依赖包：npm install
+2. 启动项目：npm run dev
+3. Axios配置：路径src/axios/index.ts，api文件夹里面有接口调用示例。
+## 使用说明
+ 响应式自适应不同分辨率的屏幕，通过百分比+ElementPlus的布局方式进行配置
+详细文档看vue2码云地址的详细说明，vue3码云文档不在进行详细介绍
+## 交流
+<table>
+    <tr>
+        <td><img src="./wechat.png"/></td>
+    </tr>
+</table>
 
-## 推荐的IDE设置
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## 自定义配置
-
-请参阅 [[Vite配置参考](https://vitejs.dev/config/).
-
-## 项目设置
-
-```sh
-npm install
-```
-
-### 在开发环境中启动和热更新
-
-```sh
-npm run dev
-```
-
-### 编译用于生产环境
-
-```sh
-npm run build
-```

index.html

@@ -2,12 +2,23 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>可视化外网安全态势</title>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
+
+  <style>
+    html,
+    body,
+    #app {
+      padding: 0px;
+      margin: 0px;
+      height: 100%;
+      box-sizing: border-box;
+    }
+  </style>
 </html>

inscode.nix

-{ pkgs }: {
-    deps = [
-        pkgs.nodejs-16_x
-        pkgs.yarn
-    ];
-}
\ No newline at end of file

package.json

 {
-  "name": "vuejs-with-vite",
+  "name": "koi-vite-screen",
+  "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview --port 4173"
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "guess": "^1.0.2",
-    "vue": "^3.2.37"
+    "@element-plus/icons-vue": "^2.1.0",
+    "@kjgl77/datav-vue3": "^1.4.2",
+    "animate.css": "^4.1.1",
+    "axios": "^1.3.4",
+    "echarts": "^5.4.1",
+    "echarts-map": "^3.0.1",
+    "element-plus": "^2.2.36",
+    "live2d-widget": "^3.1.4",
+    "pinia": "^2.0.33",
+    "pinia-plugin-persist": "^1.0.0",
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^3.0.1",
-    "vite": "^5.0.1"
+    "@types/node": "^18.15.3",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "sass": "^1.58.3",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0",
+    "vue-tsc": "^1.0.24"
   }
 }

public/vite.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  <router-view></router-view>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
+<script setup lang="ts">
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
+</script>
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
+<style scoped lang="scss">
 </style>

src/api/test/index.ts

+import http from '@/axios/index'
+
+//查询
+export const getSelectApi = ()=>{
+  return http.get("/api/xxxxxx")
+}
+export const getModuleData = (url)=>{
+  return http.get(url)
+}
+//新增
+export const addApi = (params: any) => {
+  return http.post("/api/xxxxxx",params)
+}
+//编辑
+export const editApi = (params: any)=>{
+  return http.put("/api/xxxxxx",params)
+}
+//删除
+export const deleteApi = (xxx :string)=>{
+  return http.delete(`/api/xxxxxx/${xxx}`)
+}
+

src/assets/base.css

-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

src/assets/logo.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
\ No newline at end of file

src/assets/main.css

-@import "./base.css";
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

src/assets/scss/style.scss

+// 清除元素默认的内外边距
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  list-style-type: none;
+  outline: none;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'YouYuan';
+  background-color: black;
+  margin: 0;
+  padding: 0;
+}
+
+// 让所有斜体不倾斜
+em,i {
+  font-style: normal;
+}
+
+// 去掉列表前面的小点
+li {
+  list-style: none;
+}
+
+// 图片没有边框 去掉图片dice的空白缝隙
+img {
+  border: 0; //ie6
+  vertical-align: middle;
+}
+
+// button 按钮变小手
+buttom {
+  cursor: pointer
+}
+
+// 取消a标签连接下划线
+a {
+  color: #343440;
+  text-decoration: none;
+}
+
+a:hover {
+  color:#343440;
+}
+
+//浮动
+.float-r {
+  float: right;
+}
+
+//浮动
+.float-l {
+  float: left;
+}
+
+// 字体加粗
+.font-bold {
+  font-weight: bold;
+}
+
+//文章一行显示，多余省略号显示
+.title-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 方块背景颜色
+.bg-color-black {
+  background-color: rgba(19, 25, 47, 0.6);
+}
+
+// 常用颜色
+.colorBlack {
+  color: black !important;
+}
+
+.colorGrass {
+  color: #33cea0 !important;
+  &:hover {
+    color: lightsalmon !important;
+  }    
+}
+
+.colorRed {
+  color: red !important;
+  &:hover {
+    color: lightsalmon !important;
+  }    
+}
+
+.colorYellow {
+  color: yellow !important;
+  &:hover {
+    color: lightsalmon !important;
+  }    
+}
+
+.colorLightBlue {
+  color: turquoise !important;
+  &:hover {
+    color: lightsalmon !important;
+  }    
+}
+
+.colorPink {
+  color: pink !important;
+  &:hover {
+    color: lightsalmon !important;
+  }    
+}
+
+.colorText {
+  color: white !important;
+  // &:hover {
+  //   color: lightsalmon !important;
+  // }    
+}
+
+.colorBlue {
+  color: blue !important;
+  &:hover {
+    color: lightsalmon !important;
+  }    
+}
+
+.colorTomato {
+  color: tomato !important;
+  &:hover {
+    color: lightsalmon !important;
+  }    
+}
+
+.colorDeepskyblue {
+  color: deepskyblue !important;
+  &:hover {
+    color: lightsalmon !important;
+  }  
+}
+
+.colorDarkturquoise {
+  color: darkturquoise !important;
+  &:hover {
+    color: lightsalmon !important;
+  } 
+}
+
+.colorLightsalmon {
+  color: lightsalmon !important;
+  &:hover {
+    color: deepskyblue !important;
+  } 
+}
+
+.colorGold {
+  color: gold !important;
+  &:hover {
+    color: lightsalmon !important;
+  } 
+}
+
+.colorLightsteelblue {
+  color: lightsteelblue !important;
+  &:hover {
+    color: lightsalmon !important;
+  } 
+}
+
+.colorSienna {
+  color: sienna !important;
+  &:hover {
+    color: lightsalmon !important;
+  }  
+}
+
+.colorDarkorchid{
+  color: darkorchid !important;
+  &:hover {
+    color: lightsalmon !important;
+  }  
+}
+
+.colorLightpink {
+  color: lightpink !important;
+  &:hover {
+    color: lightsalmon !important;
+  }  
+}
+
+.colorHotpink {
+  color: hotpink !important;
+  &:hover {
+    color: lightsalmon !important;
+  }  
+}
+// 模板样式结束
+
+// 设置默认背景图片
+#index {
+  color: darkturquoise;
+  width: 100%;
+  height: 100%;
+  // 图片缩放自适应
+  background: url("../images/bg.png") center center no-repeat;
+  //background: url("../bgPage.jpg") center center no-repeat;
+  background-size: 100% 100%;
+  position: fixed;
+  overflow: hidden;
+}
+
+// 最小只支持1000px * 600px，太小了margin-bottom和padding-bottom属性比例不够协调。
+
+.koi-body-png {
+  // 头部布局
+  .header {    
+      position       : relative;
+      top            : 0.5vw;
+      width          : 100%;
+      background     : url("@/assets/images/title.png") no-repeat;
+      background-size: 100%;
+      text-align     : center;
+      margin         : 0;
+  }
+
+  // 标题自定义修改
+  .title {
+    position: absolute;
+    left: 46%;
+    margin-top: 0.4%;
+  }
+
+  // 当前时间css
+  .localTime {
+    position: absolute;
+    right: 1%;
+    top: 35%;
+  }
+
+  // 子节点首页字体css
+  .koiPage {
+    position: absolute;
+    left: 1%;
+    top: 35%;
+  }
+
+  // 跳转大屏页面选择框
+  .selectPage {
+    position: absolute;
+    left: 0.4%;
+    top: 35%;
+  }    
+
+  // 轮播图标
+  .skipPage {
+    position: absolute;
+    right: 17%;
+    top: 2.2%;   
+  }
+
+   /* 本项目采用ElementPlus - Layout布局 */
+  .layoutHome {
+    position: absolute;
+    min-width: 1000px;
+    min-height: 600px;
+    top: 8%;
+    width: 100%;
+    height: 100%;
+  }
+ }
+
+// 总体布局
+.koi-body {
+  // 头部布局
+  .header {    
+    // DataV边框10宽度左侧和高度设置
+    .dv-dec-10-left {
+      width: 25%;
+      margin-top: 0.5%;
+      margin-left: 0.2%;
+      height: 8px;
+      float: left;
+    }
+
+    // DataV边框10宽度右侧和高度设置
+    .dv-dec-10-right {
+      width: 25%;
+      margin-top: 0.5%;
+      margin-left: 0.2%;
+      height: 8px;
+      float: right;
+      // 边框翻转
+      transform: rotateY(180deg);
+    }
+
+    // DataV边框8左侧宽度和高度设置
+    .dv-dec-8-left {
+      width: 18%;
+      height: 6%;
+      margin-top: 0.7%;
+      position: absolute;
+      left: 25%;
+    }
+
+    // DataV边框8宽度右侧和高度设置
+    .dv-dec-8-right {
+      width: 18%;
+      height: 6%;
+      margin-top: 0.7%;
+      position: absolute;
+      right: 25%;
+    }
+    
+    // 标题自定义修改
+    .title {
+      position: absolute;
+      left: 43.5%;
+      margin-top: 0.8%;
+    }
+
+    // 当前时间css
+    .localTime {
+      position: absolute;
+      right: 1%;
+      top: 2%;
+    }
+
+    // 首页Gitee字体css
+    .homePage {
+      position: absolute;
+      left: 18%;
+      top: 2.4%;
+    }
+
+    // 子节点首页字体css
+    .koiPage {
+      position: absolute;
+      left: 1%;
+      top: 2.2%;
+    }
+
+    // 跳转大屏页面选择框
+    .selectPage {
+      position: absolute;
+      left: 0.4%;
+      top: 2.2%;
+    }    
+
+    // 轮播图标
+    .skipPage {
+      position: absolute;
+      right: 17%;
+      top: 2.2%;   
+    }
+    
+  }
+
+  /* 本项目采用ElementPlus - Layout布局 */
+  .layoutHome {
+    position: absolute;
+    min-width: 1000px;
+    min-height: 600px;
+    top: 5.5%;
+    width: 100%;
+    height: 100%;
+  }
+
+}

src/assets/theme/shine.js

+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+    // this 改为 window
+}(window, function (exports, echarts) { 
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+    echarts.registerTheme('shine', {
+        "color": [
+            "#2d8cf0",
+            "#19be6b",
+            "#ff9900",
+            "#E46CBB",
+            "#9A66E4",
+            "#ed3f14",
+            "lightsteelblue",
+            "hotpink",
+            "sienna"
+          ],
+          "backgroundColor": "rgba(0,0,0,0)",
+          "textStyle": {},
+          "title": {
+            "textStyle": {
+              "color": "turquoise"
+            },
+            "subtextStyle": {
+              "color": "deepskyblue"
+            }
+          },
+          "line": {
+            "itemStyle": {
+              "normal": {
+                "borderWidth": "2"
+              }
+            },
+            "lineStyle": {
+              "normal": {
+                "width": "2"
+              }
+            },
+            "symbolSize": "6",
+            "symbol": "emptyCircle",
+            "smooth": true
+          },
+          "radar": {
+            "itemStyle": {
+              "normal": {
+                "borderWidth": "2"
+              }
+            },
+            "lineStyle": {
+              "normal": {
+                "width": "2"
+              }
+            },
+            "symbolSize": "6",
+            "symbol": "emptyCircle",
+            "smooth": true
+          },
+          "bar": {
+            "itemStyle": {
+              "normal": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+              },
+              "emphasis": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+              }
+            }
+          },
+          "pie": {
+            "itemStyle": {
+              "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+              },
+              "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+              }
+            }
+          },
+          "scatter": {
+            "itemStyle": {
+              "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+              },
+              "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+              }
+            }
+          },
+          "boxplot": {
+            "itemStyle": {
+              "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+              },
+              "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+              }
+            }
+          },
+          "parallel": {
+            "itemStyle": {
+              "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+              },
+              "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+              }
+            }
+          },
+          "sankey": {
+            "itemStyle": {
+              "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+              },
+              "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+              }
+            }
+          },
+          "funnel": {
+            "itemStyle": {
+              "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+              },
+              "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+              }
+            }
+          },
+          "gauge": {
+            "itemStyle": {
+              "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+              },
+              "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+              }
+            }
+          },
+          "candlestick": {
+            "itemStyle": {
+              "normal": {
+                "color": "#edafda",
+                "color0": "transparent",
+                "borderColor": "#d680bc",
+                "borderColor0": "#8fd3e8",
+                "borderWidth": "2"
+              }
+            }
+          },
+          "graph": {
+            "itemStyle": {
+              "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+              }
+            },
+            "lineStyle": {
+              "normal": {
+                "width": 1,
+                "color": "#aaa"
+              }
+            },
+            "symbolSize": "6",
+            "symbol": "emptyCircle",
+            "smooth": true,
+            "color": [
+              "#2d8cf0",
+              "#19be6b",
+              "#f5ae4a",
+              "#9189d5",
+              "#56cae2",
+              "#cbb0e3"
+            ],
+            "label": {
+              "normal": {
+                "textStyle": {
+                  "color": "#eee"
+                }
+              }
+            }
+          },
+          "map": {
+            "itemStyle": {
+              "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#516b91",
+                "borderWidth": 0.5
+              },
+              "emphasis": {
+                "areaColor": "rgba(165,231,240,1)",
+                "borderColor": "#516b91",
+                "borderWidth": 1
+              }
+            },
+            "label": {
+              "normal": {
+                "textStyle": {
+                  "color": "#000"
+                }
+              },
+              "emphasis": {
+                "textStyle": {
+                  "color": "rgb(81,107,145)"
+                }
+              }
+            }
+          },
+          "geo": {
+            "itemStyle": {
+              "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#516b91",
+                "borderWidth": 0.5
+              },
+              "emphasis": {
+                "areaColor": "rgba(165,231,240,1)",
+                "borderColor": "#516b91",
+                "borderWidth": 1
+              }
+            },
+            "label": {
+              "normal": {
+                "textStyle": {
+                  "color": "#000"
+                }
+              },
+              "emphasis": {
+                "textStyle": {
+                  "color": "rgb(81,107,145)"
+                }
+              }
+            }
+          },
+          "categoryAxis": {
+            "axisLine": {
+              "show": true,
+              "lineStyle": {
+                "color": "#cccccc"
+              }
+            },
+            "axisTick": {
+              "show": false,
+              "lineStyle": {
+                "color": "#333"
+              }
+            },
+            "axisLabel": {
+              "show": true,
+              "textStyle": {
+                "color": "#fff"
+              }
+            },
+            "splitLine": {
+              "show": false,
+              "lineStyle": {
+                "color": [
+                  "#eeeeee"
+                ]
+              }
+            },
+            "splitArea": {
+              "show": false,
+              "areaStyle": {
+                "color": [
+                  "rgba(250,250,250,0.05)",
+                  "rgba(200,200,200,0.02)"
+                ]
+              }
+            }
+          },
+          "valueAxis": {
+            "axisLine": {
+              "show": true,
+              "lineStyle": {
+                "color": "#cccccc"
+              }
+            },
+            "axisTick": {
+              "show": false,
+              "lineStyle": {
+                "color": "#333"
+              }
+            },
+            "axisLabel": {
+              "show": true,
+              "textStyle": {
+                "color": "#fff"
+              }
+            },
+            "splitLine": {
+              "show": false,
+              "lineStyle": {
+                "color": [
+                  "#eeeeee"
+                ]
+              }
+            },
+            "splitArea": {
+              "show": false,
+              "areaStyle": {
+                "color": [
+                  "rgba(250,250,250,0.05)",
+                  "rgba(200,200,200,0.02)"
+                ]
+              }
+            }
+          },
+          "logAxis": {
+            "axisLine": {
+              "show": true,
+              "lineStyle": {
+                "color": "#cccccc"
+              }
+            },
+            "axisTick": {
+              "show": false,
+              "lineStyle": {
+                "color": "#333"
+              }
+            },
+            "axisLabel": {
+              "show": true,
+              "textStyle": {
+                "color": "#999999"
+              }
+            },
+            "splitLine": {
+              "show": true,
+              "lineStyle": {
+                "color": [
+                  "#eeeeee"
+                ]
+              }
+            },
+            "splitArea": {
+              "show": false,
+              "areaStyle": {
+                "color": [
+                  "rgba(250,250,250,0.05)",
+                  "rgba(200,200,200,0.02)"
+                ]
+              }
+            }
+          },
+          "timeAxis": {
+            "axisLine": {
+              "show": true,
+              "lineStyle": {
+                "color": "#cccccc"
+              }
+            },
+            "axisTick": {
+              "show": false,
+              "lineStyle": {
+                "color": "#333"
+              }
+            },
+            "axisLabel": {
+              "show": true,
+              "textStyle": {
+                "color": "#999999"
+              }
+            },
+            "splitLine": {
+              "show": true,
+              "lineStyle": {
+                "color": [
+                  "#eeeeee"
+                ]
+              }
+            },
+            "splitArea": {
+              "show": false,
+              "areaStyle": {
+                "color": [
+                  "rgba(250,250,250,0.05)",
+                  "rgba(200,200,200,0.02)"
+                ]
+              }
+            }
+          },
+          "toolbox": {
+            "iconStyle": {
+              "normal": {
+                "borderColor": "#999"
+              },
+              "emphasis": {
+                "borderColor": "#666"
+              }
+            }
+          },
+          "legend": {
+            "textStyle": {
+              "color": "#fff"
+            }
+          },
+          "tooltip": {
+            "trigger": "axis",
+            "backgroundColor": "rgba(19, 25, 47, 0.6)", //设置背景图片 rgba格式
+            "borderWidth": "1", //边框宽度设置1
+            "borderColor": "deepskyblue", //设置边框颜色
+            "textStyle": {
+              "color": "white" //设置文字颜色
+            },         
+            "axisPointer": {
+              "lineStyle": {
+                "color": "#ccc",
+                "width": 1
+              },
+              "crossStyle": {
+                "color": "#ccc",
+                "width": 1
+              }
+            }
+          },
+          "timeline": {
+            "lineStyle": {
+              "color": "#8fd3e8",
+              "width": 1
+            },
+            "itemStyle": {
+              "normal": {
+                "color": "#8fd3e8",
+                "borderWidth": 1
+              },
+              "emphasis": {
+                "color": "#8fd3e8"
+              }
+            },
+            "controlStyle": {
+              "normal": {
+                "color": "#8fd3e8",
+                "borderColor": "#8fd3e8",
+                "borderWidth": 0.5
+              },
+              "emphasis": {
+                "color": "#8fd3e8",
+                "borderColor": "#8fd3e8",
+                "borderWidth": 0.5
+              }
+            },
+            "checkpointStyle": {
+              "color": "#8fd3e8",
+              "borderColor": "rgba(138,124,168,0.37)"
+            },
+            "label": {
+              "normal": {
+                "textStyle": {
+                  "color": "#8fd3e8"
+                }
+              },
+              "emphasis": {
+                "textStyle": {
+                  "color": "#8fd3e8"
+                }
+              }
+            }
+          },
+          "visualMap": {
+            "color": [
+              "#516b91",
+              "#59c4e6",
+              "#a5e7f0"
+            ]
+          },
+          "dataZoom": {
+            "backgroundColor": "rgba(0,0,0,0)",
+            "dataBackgroundColor": "rgba(255,255,255,0.3)",
+            "fillerColor": "rgba(167,183,204,0.4)",
+            "handleColor": "#a7b7cc",
+            "handleSize": "100%",
+            "textStyle": {
+              "color": "#333"
+            }
+          },
+          "markPoint": {
+            "label": {
+              "normal": {
+                "textStyle": {
+                  "color": "#eee"
+                }
+              },
+              "emphasis": {
+                "textStyle": {
+                  "color": "#eee"
+                }
+              }
+            }
+          }
+    });
+}));

src/components/icons/IconCommunity.vue

-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
-    />
-  </svg>
-</template>

src/components/icons/IconDocumentation.vue

-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
-    <path
-      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
-    />
-  </svg>
-</template>

src/components/icons/IconEcosystem.vue

-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
-    <path
-      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
-    />
-  </svg>
-</template>

src/components/icons/IconSupport.vue

-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
-    />
-  </svg>
-</template>

src/main.js

-import { createApp } from 'vue'
-import App from './App.vue'
-
-import './assets/main.css'
-
-createApp(App).mount('#app')

src/vite-env.d.ts

+/// <reference types="vite/client" />