feat: 统一注册页面"联系我们"样式,并在打开邮箱失败时复制邮件地址

- Implemented FillLayerBackgroundCommand to fill the background of layers with a specified color.
- Introduced BackgroundFillManager to manage background fill operations.
- Updated LayerManager to include fillLayerBackground method.
- Enhanced LayersPanel with a color picker for filling layer backgrounds.
- Modified RasterizeLayerCommand to reflect changes in terminology and functionality.
- Adjusted LayerSort to ensure filled layers are rendered at the correct z-index.
- Updated relevant utility functions and components to support new fill feature.

.env

@@ -1,4 +1,4 @@
-# NODE_ENV = 'production'
-NODE_ENV = 'development'
-# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
-VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
+VITE_USER_NODE_ENV = 'production'
+# VITE_USER_NODE_ENV = 'development'
+VITE_APP_BASE_URL = 'http://18.167.251.121:10086'
+VITE_APP_BASE_URL = 'https://www.api.aida.com.hk'

.env.dev

@@ -1,11 +1,11 @@
-NODE_ENV = 'development'
-# VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
-# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
+VITE_USER_NODE_ENV = 'development'
+# VITE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
+# VITE_APP_BASE_URL = 'https://api.aida.com.hk'
 
-# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
-VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
-# VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
+# VITE_APP_BASE_URL = 'http://18.167.251.121:10086'
+VITE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
+# VITE_APP_BASE_URL = 'https://www.api.aida.com.hk'
 # 徐佩
-# VUE_APP_BASE_URL = 'http://192.168.31.118:5567'
+# VITE_APP_BASE_URL = 'http://192.168.31.118:5567'
 # 海波
-# VUE_APP_BASE_URL = 'http://192.168.31.34:5567'
+# VITE_APP_BASE_URL = 'http://192.168.31.34:5567'

.env.dev_build

@@ -1,7 +1,8 @@
-NODE_ENV = 'production'
-# VUE_APP_BASE_URL = 'https://aida.com.hk/test'
-# VUE_APP_BASE_URL = 'http://18.167.251.121:10088'
-# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
-VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
+VITE_USER_NODE_ENV = 'development'
+# VITE_APP_BASE_URL = 'https://aida.com.hk/test'
+# VITE_APP_BASE_URL = 'http://18.167.251.121:10088'
+# VITE_APP_BASE_URL = 'https://api.aida.com.hk'
+VITE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 
+# VITE_APP_BASE_URL = 'http://localhost:22170'
 

.env.production

@@ -1,4 +1,4 @@
-NODE_ENV = 'production'
-# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
-# VUE_APP_BASE_URL = 'https://polyu.api.aida.com.hk'
-VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
+VITE_USER_NODE_ENV = 'production'
+# VITE_APP_BASE_URL = 'http://18.167.251.121:10086'
+# VITE_APP_BASE_URL = 'https://polyu.api.aida.com.hk'
+VITE_APP_BASE_URL = 'https://www.api.aida.com.hk'

.env.test

@@ -1,7 +1,7 @@
-NODE_ENV = 'development'
-VUE_APP_BASE_URL = 'https://test.api.aida.com.hk'
-# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
+VITE_USER_NODE_ENV = 'development'
+VITE_APP_BASE_URL = 'https://test.api.aida.com.hk'
+# VITE_APP_BASE_URL = 'https://api.aida.com.hk'
 
-# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
-# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
-# VUE_APP_BASE_URL = 'http://192.168.1.6:7766'
+# VITE_APP_BASE_URL = 'http://18.167.251.121:10086'
+# VITE_APP_BASE_URL = 'http://192.168.1.9:5567'
+# VITE_APP_BASE_URL = 'http://192.168.1.6:7766'

.env.test_build

@@ -1,7 +1,7 @@
-NODE_ENV = 'production'
-# VUE_APP_BASE_URL = 'https://aida.com.hk/test'
-# VUE_APP_BASE_URL = 'http://18.167.251.121:10088'
-# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
-# VUE_APP_BASE_URL = 'https://test.api.aida.com.hk'
-VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
+VITE_USER_NODE_ENV = 'production'
+# VITE_APP_BASE_URL = 'https://aida.com.hk/test'
+# VITE_APP_BASE_URL = 'http://18.167.251.121:10088'
+# VITE_APP_BASE_URL = 'https://api.aida.com.hk'
+# VITE_APP_BASE_URL = 'https://test.api.aida.com.hk'
+VITE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 

.eslintrc-auto-import.json

@@ -0,0 +1,94 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "DirectiveBinding": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "PropType": true,
+    "Ref": true,
+    "Slot": true,
+    "Slots": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "cloneDeep": true,
+    "cloneDeepWith": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "debounce": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isArray": true,
+    "isBoolean": true,
+    "isDate": true,
+    "isFunction": true,
+    "isNaN": true,
+    "isNull": true,
+    "isNumber": true,
+    "isObject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "isString": true,
+    "isUndefined": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "onWatcherCleanup": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useId": true,
+    "useLink": true,
+    "useModel": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "useTemplateRef": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}

.eslintrc.js

@@ -1,72 +1,66 @@
 module.exports = {
-    root: true, // 停止在父级目录中寻找
-    env: {
-      es6: true, // 启用 ES6 语法支持以及新的 ES6 全局变量或类型
-      node: true, // Node.js 全局变量和 Node.js 作用域
-    },
-    extends: ['plugin:vue/essential'],
-    rules: {
-      'no-alert': 0, // 禁止使用alert confirm prompt
-      'no-console': 0, // 禁止使用console
-      'no-debugger': 0, // 禁止使用debugger
-      'prefer-const': 0, // 建议使用 const 关闭
-      'no-dupe-keys': 2, // 在创建对象字面量时不允许键重复 {a:1,a:1}
-      'no-dupe-args': 2, // 函数参数不能重复
-      'no-duplicate-imports': [
-        1,
-        {
-          includeExports: true
-        }
-      ], // 不允许重复导入
-   
-      'no-duplicate-case': 2, // switch中的case标签不能重复
-      'padded-blocks': 0, // 块语句内行首行尾是否要空行
-      'space-after-keywords': [0, 'always'], // 关键字后面是否要空一格
-      'space-before-blocks': [0, 'always'], // 不以新行开始的块{前面要不要有空格
-      'space-before-function-paren': [0, 'always'], // 函数定义时括号前面要不要有空格
-      'space-in-parens': [0, 'never'], // 小括号里面要不要有空格
-      'space-infix-ops': 0, // 中缀操作符周围要不要有空格
-      eqeqeq: 0, // 必须使用全等
-      'no-var': 0, // 禁用var，用let和const代替
-      'no-inline-comments': 0, // 禁止行内备注
-      indent: 0,
-      'vue/script-indent': 0,
-      'vue/require-prop-type-constructor': 0,
-      'vue/no-use-v-if-with-v-for': 0,
-      'no-trailing-spaces': 0, // 一行结束后面不要有空格
-      'no-multiple-empty-lines': 0, // [1, {"max": 2}],空行最多不能超过2行
-      'no-extra-boolean-cast': 0, // 禁止不必要的bool转换
-      'valid-jsdoc': 0,
-      'one-var': 0, // 连续声明
-      semi: 0, // 语句强制分号结尾
-      'semi-spacing': [0, { before: false, after: true }], // 分号前后空格
-      'no-new': 0, // 禁止在使用new构造一个实例后不赋值
-      'no-extra-semi': 0, // 禁止多余的冒号
-      'keyword-spacing': 0,
-      'arrow-parens': 0, // 箭头函数用小括号括起来 - 关闭
-      'generator-star-spacing': 0, // 生成器函数*的前后空格
-      'no-mixed-operators': 0,
-      'eol-last': 0, // 文件以单一的换行符结束 - 关闭
-      'object-curly-spacing': 0, // 大括号内是否允许不必要的空格
-      'no-callback-literal': 0,
-      'multiline-ternary': 0,
-      'no-self-assign':'off',
-      'vue/multi-word-component-names': "off",
-      "vue/no-v-model-argument":  "off",
-    },
-    plugins:[
-        'vue'
-    ],
-    parserOptions: {
-      parser: 'babel-eslint',
-      "requireConfigFile": false,
-    },
-    overrides: [
+  root: true,
+  env: {
+    se6: true,
+    node: true,
+  },
+  extends: ["plugin:vue/essential"],
+  rules: {
+    "no-alert": 0, // 禁止使用alert confirm prompt
+    "no-console": 0, // 禁止使用console
+    "no-debugger": 0, // 禁止使用debugger
+    "prefer-const": 0, // 建议使用 const 关闭
+    "no-dupe-keys": 2, // 在创建对象字面量时不允许键重复 {a:1,a:1}
+    "no-dupe-args": 2, // 函数参数不能重复
+    "no-duplicate-imports": [
+      1,
       {
-        files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
-        env: {
-          jest: true
-        }
+        includeExports: true,
+      },
+    ], // 不允许重复导入
+
+    "no-duplicate-case": 2, // switch中的case标签不能重复
+    "padded-blocks": 0, // 块语句内行首行尾是否要空行
+    "space-after-keywords": [0, "always"], // 关键字后面是否要空一格
+    "space-before-blocks": [0, "always"], // 不以新行开始的块{前面要不要有空格
+    "space-before-function-paren": [0, "always"], // 函数定义时括号前面要不要有空格
+    "space-in-parens": [0, "never"], // 小括号里面要不要有空格
+    "space-infix-ops": 0, // 中缀操作符周围要不要有空格
+    eqeqeq: 0, // 必须使用全等
+    "no-var": 0, // 禁用var，用let和const代替
+    "no-inline-comments": 0, // 禁止行内备注
+    indent: 0,
+    "vue/script-indent": 0,
+    "vue/require-prop-type-constructor": 0,
+    "vue/no-use-v-if-with-v-for": 0,
+    "no-trailing-spaces": 0, // 一行结束后面不要有空格
+    "no-multiple-empty-lines": 0, // [1, {"max": 2}],空行最多不能超过2行
+    "no-extra-boolean-cast": 0, // 禁止不必要的bool转换
+    "valid-jsdoc": 0,
+    "one-var": 0, // 连续声明
+    semi: 0, // 语句强制分号结尾
+    "semi-spacing": [0, { before: false, after: true }], // 分号前后空格
+    "no-new": 0, // 禁止在使用new构造一个实例后不赋值
+    "no-extra-semi": 0, // 禁止多余的冒号
+    "keyword-spacing": 0,
+    "arrow-parens": 0, // 箭头函数用小括号括起来 - 关闭
+    "generator-star-spacing": 0, // 生成器函数*的前后空格
+    "no-mixed-operators": 0,
+    "eol-last": 0, // 文件以单一的换行符结束 - 关闭
+    "object-curly-spacing": 0, // 大括号内是否允许不必要的空格
+    "no-callback-literal": 0,
+    "multiline-ternary": 0,
+    "no-self-assign": "off",
+    "vue/multi-word-component-names": "off",
+    "vue/no-v-model-argument": "off",
+  },
+  plugins:['vue'],
+  overrides: [
+    {
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+      env: {
+        jest: true
       }
-    ]
-  };
+    }
+  ]
+};

.gitignore

@@ -22,3 +22,5 @@ dist.rar
 *.njsproj
 *.sln
 *.sw?
+.eslintrc-auto-import.json
+components.d.ts

babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'     
-  ]
-}

index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> -->
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="/favicon.ico">
+  <title>AiDA</title>
+  <!-- <link href="https://fonts.font.im/css?family=Roboto:400,500,700,700i" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet"> -->
+  <!-- 字体css -->
+
+  <!-- <link rel="stylesheet" href="/css/googleapis.css"> -->
+  <!-- <link rel="stylesheet" href="/css/roboto.css"> -->
+   
+  <link rel="stylesheet" href="/css/sloganFamily.css">
+  <link rel="stylesheet" href="/css/pingfang.css">
+</head>
+
+<body>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script> -->
+  <script src="/js/color-thief.js"></script>
+  <script src="/js/aligning_guidelines.js"></script>
+  <noscript>
+    <strong>We're sorry but AiDA doesn't work properly without JavaScript enabled. Please enable it to
+      continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

package.json

@@ -1,87 +1,109 @@
 {
-	"name": "aida",
-	"version": "0.1.0",
-	"private": true,
-	"scripts": {
-		"serve": "vue-cli-service serve",
-		"build": "vue-cli-service build",
-		"serve:test": "vue-cli-service serve --mode test",
-		"build:test": "vue-cli-service build --mode test_build",
-		"serve:dev": "vue-cli-service serve --mode dev",
-		"build:dev": "vue-cli-service build --mode dev_build",
-		"lint": "vue-cli-service lint"
-	},
-	"dependencies": {
-		"@ans1998/vue3-color": "^3.0.7",
-		"@flaticon/flaticon-uicons": "^2.4.0",
-		"@types/fingerprintjs2": "^2.0.0",
-		"ant-design-vue": "^3.2.12",
-		"axios": "^1.4.0",
-		"core-js": "^3.8.3",
-		"driver.js": "^1.3.1",
-		"echarts": "^5.5.1",
-		"fabric-with-all": "^5.3.1",
-		"element-plus": "^2.4.2",
-		"file-saver": "^2.0.5",
-		"fingerprintjs2": "^2.1.4",
-		"gsap": "^3.12.5",
-		"html2canvas": "^1.4.1",
-		"jszip": "^3.10.1",
-		"md5": "^2.3.0",
-		"quantize": "^1.0.2",
-		"sortablejs": "^1.15.0",
-		"swiper": "^11.1.4",
-		"three": "^0.148.0",
-		"vue": "^3.2.13",
-		"vue-class-component": "^8.0.0-0",
-		"vue-cropper": "^1.0.5",
-		"vue-draggable-plus": "^0.6.0",
-		"vue-i18n": "^9.6.1",
-		"vue-router": "^4.0.3",
-		"vuedraggable": "^4.1.0",
-		"vuex": "^4.0.0"
-	},
-	"devDependencies": {
-		"@types/three": "^0.174.0",
-		"@typescript-eslint/eslint-plugin": "^5.4.0",
-		"@typescript-eslint/parser": "^5.4.0",
-		"@vue/cli-plugin-babel": "~5.0.0",
-		"@vue/cli-plugin-eslint": "~5.0.0",
-		"@vue/cli-plugin-router": "~5.0.0",
-		"@vue/cli-plugin-typescript": "~5.0.0",
-		"@vue/cli-plugin-vuex": "~5.0.0",
-		"@vue/cli-service": "~5.0.0",
-		"@vue/eslint-config-typescript": "^9.1.0",
-		"babel-eslint": "^10.1.0",
-		"eslint": "^7.32.0",
-		"eslint-plugin-vue": "^8.0.3",
-		"less": "^4.1.3",
-		"less-loader": "^11.0.0",
-		"style-resources-loader": "^1.5.0",
-		"typescript": "~4.5.5",
-		"unplugin-element-plus": "^0.8.0",
-		"vue-cli-plugin-style-resources-loader": "^0.1.5",
-		"vue-lazyload": "^3.0.0-rc.2"
-	},
-	"eslintConfig": {
-		"root": true,
-		"env": {
-			"node": true
-		},
-		"extends": [
-			"plugin:vue/vue3-essential",
-			"eslint:recommended",
-			"@vue/typescript/recommended"
-		],
-		"parserOptions": {
-			"ecmaVersion": 2020
-		},
-		"rules": {}
-	},
-	"browserslist": [
-		"> 1%",
-		"last 2 versions",
-		"not dead",
-		"not ie 11"
-	]
+  "name": "aida",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "serve": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 8080 --host 0.0.0.0",
+    "serve:test": "vite --mode test",
+    "build:test": "vite build --mode test_build",
+    "serve:dev": "vite --mode dev",
+    "build:dev": "vite build --mode dev_build",
+    "lint": "eslint src --ext .js,.ts,.vue --fix"
+  },
+  "dependencies": {
+    "@ans1998/vue3-color": "^3.0.7",
+    "@flaticon/flaticon-uicons": "^2.4.0",
+    "@types/fingerprintjs2": "^2.0.0",
+    "ant-design-vue": "^3.2.12",
+    "axios": "^1.4.0",
+    "core-js": "^3.8.3",
+    "driver.js": "^1.3.1",
+    "echarts": "^5.5.1",
+    "element-plus": "^2.4.2",
+    "fabric-with-all": "^5.3.1",
+    "file-saver": "^2.0.5",
+    "fingerprintjs2": "^2.1.4",
+    "gsap": "^3.12.5",
+    "html2canvas": "^1.4.1",
+    "jszip": "^3.10.1",
+    "md5": "^2.3.0",
+    "quantize": "^1.0.2",
+    "sortablejs": "^1.15.0",
+    "swiper": "^11.1.4",
+    "three": "^0.148.0",
+    "vue": "^3.2.13",
+    "vue-class-component": "^8.0.0-0",
+    "vue-cropper": "^1.0.5",
+    "vue-draggable-plus": "^0.6.0",
+    "vue-i18n": "^9.6.1",
+    "vue-router": "^4.0.3",
+    "vuedraggable": "^4.1.0",
+    "vuex": "^4.0.0",
+    "x-sender": "^1.1.6"
+  },
+  "devDependencies": {
+    "@types/three": "^0.174.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "less": "^4.1.3",
+    "less-loader": "^11.0.0",
+    "typescript": "~4.5.5",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-element-plus": "^0.8.0",
+    "unplugin-vue-components": "^28.7.0",
+    "vite": "^6.3.5",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vue-lazyload": "^3.0.0-rc.2"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true,
+      "browser": true,
+      "es2021": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended",
+      "@vue/typescript/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaVersion": 2020,
+      "sourceType": "module"
+    },
+    "plugins": [
+      "@typescript-eslint",
+      "vue"
+    ],
+    "rules": {
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "vue/multi-word-component-names": "off"
+    },
+    "overrides": [
+      {
+        "files": [
+          "*.vue"
+        ],
+        "parser": "vue-eslint-parser",
+        "parserOptions": {
+          "parser": "@typescript-eslint/parser"
+        }
+      }
+    ]
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
 }

public/css/googleapis.css

@@ -1,252 +0,0 @@
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(./woff/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(./woff/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(./woff/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(./woff/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(./woff/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(./woff/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(./woff/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmYUtfCRc4EsA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmYUtfABc4EsA.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmYUtfCBc4EsA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmYUtfBxc4EsA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmYUtfCxc4EsA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmYUtfChc4EsA.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url(./woff/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}

public/css/pingfang.css

@@ -0,0 +1,21 @@
+@font-face {
+	font-family: 'pingfang_semibold';
+	font-weight: normal;
+	src: url('pingfang/PingFang-Semibold.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'pingfang_medium';
+	font-weight: normal;
+	src: url('pingfang/pingfang-medium.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'pingfang_regular';
+	font-weight: normal;
+	src: url('pingfang/pingfang-regular.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'satoshi_light';
+	font-weight: normal;
+	/* src: url('pingfang/Satoshi-Light.ttf'), format('truetype'); */
+	src: url('pingfang/pingfang-regular.ttf') format('truetype');
+}

public/css/roboto.css

@@ -1,230 +0,0 @@
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 700;
-  src: url(./woff/KFOjCnqEu92Fr1Mu51TzBic3CsTKlA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 700;
-  src: url(./woff/KFOjCnqEu92Fr1Mu51TzBic-CsTKlA.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 700;
-  src: url(./woff/KFOjCnqEu92Fr1Mu51TzBic2CsTKlA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 700;
-  src: url(./woff/KFOjCnqEu92Fr1Mu51TzBic5CsTKlA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 700;
-  src: url(./woff/KFOjCnqEu92Fr1Mu51TzBic1CsTKlA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 700;
-  src: url(./woff/KFOjCnqEu92Fr1Mu51TzBic0CsTKlA.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 700;
-  src: url(./woff/KFOjCnqEu92Fr1Mu51TzBic6CsQ.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url(./woff/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url(./woff/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url(./woff/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url(./woff/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url(./woff/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url(./woff/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url(./woff/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: url(./woff/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: url(./woff/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: url(./woff/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: url(./woff/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: url(./woff/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: url(./woff/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: url(./woff/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: url(./woff/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: url(./woff/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: url(./woff/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: url(./woff/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: url(./woff/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: url(./woff/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: url(./woff/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
-	font-family: 'pixel';
-	font-style: normal;
-	font-weight: 500;
-	src: url('woff/pixel.ttf') format('truetype');
-  }

public/css/sloganFamily.css

@@ -38,19 +38,25 @@
 	font-family: 'CN_slogan_art1';
 	font-weight: normal;
 	src: url('slogan/CN_LongCang-Regular.ttf') format('truetype');
+	/* src: url('https://s3.ap-east-1.amazonaws.com/aida-produce-v3.0/fonts/CN_LongCang-Regular.ttf') format('truetype'); */
+
 }
 @font-face {
 	font-family: 'CN_slogan_art2';
 	font-weight: normal;
 	src: url('slogan/CN_ZCOOLQingKeHuangYou-Regular.ttf') format('truetype');
+	/* src: url('https://s3.ap-east-1.amazonaws.com/aida-produce-v3.0/fonts/CN_ZCOOLQingKeHuangYou-Regular.ttf') format('truetype'); */
+
 }
 @font-face {
 	font-family: 'CN_slogan_art3';
 	font-weight: normal;
 	src: url('slogan/CN_ZCOOLXiaoWei-Regular.ttf') format('truetype');
+	/* src: url('https://s3.ap-east-1.amazonaws.com/aida-produce-v3.0/fonts/CN_ZCOOLXiaoWei-Regular.ttf') format('truetype'); */
 }
 @font-face {
 	font-family: 'CN_slogan_art4';
 	font-weight: normal;
 	src: url('slogan/CN_ZhiMangXing-Regular.ttf') format('truetype');
+	/* src: url('https://s3.ap-east-1.amazonaws.com/aida-produce-v3.0/fonts/CN_ZhiMangXing-Regular.ttf') format('truetype'); */
 }

public/index.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> -->
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>AiDA</title>
-    <!-- <link href="https://fonts.font.im/css?family=Roboto:400,500,700,700i" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet"> -->
-<!-- 字体css -->
-	<link rel="stylesheet" href="/css/googleapis.css">
-	<link rel="stylesheet" href="/css/roboto.css">
-	<link rel="stylesheet" href="/css/sloganFamily.css">
-  </head>
-  <body>
-    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script> -->
-	<script src="/js/color-thief.js"></script>
-	<script src="/js/aligning_guidelines.js"></script>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

public/sketch_bar_chart.html

@@ -0,0 +1,427 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="UTF-8" />
+  <title>style category</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+  <style>
+    body { 
+      margin: 0; 
+      padding: 0; 
+      font-family: sans-serif; 
+      box-sizing: border-box;
+      background-color: #f9f9f9;
+    }
+    .viewport {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      overflow: auto;
+      background-color: #f9f9f9;
+      cursor: grab;
+      scrollbar-width: thick;
+      scrollbar-color: #666 #eee;
+    }
+    .viewport::-webkit-scrollbar {
+      height: 16px;
+      width: 16px;
+    }
+    .viewport::-webkit-scrollbar-track {
+      background: #eee;
+      border-radius: 8px;
+    }
+    .viewport::-webkit-scrollbar-thumb {
+      background: #666;
+      border-radius: 8px;
+      border: 3px solid #eee;
+    }
+    .viewport::-webkit-scrollbar-thumb:hover {
+      background: #333;
+    }
+    .content-size {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+    .content {
+      padding: 30px;
+      transform-origin: top left;
+      width: max-content;
+      min-width: 100%;
+    }
+    h1 {
+      text-align: center;
+      font-size: 100px;
+      margin: 40px 0 60px;
+      font-weight: bold;
+      color: #333;
+    }
+    .chart-section {
+      margin-bottom: 80px;
+      background: #fff;
+      border-radius: 16px;
+      padding: 30px;
+      box-shadow: 0 6px 20px rgba(0,0,0,0.08);
+    }
+    h2 {
+      text-align: center;
+      font-size: 80px;
+      margin: 0 0 40px;
+      font-weight: bold;
+      color: #444;
+    }
+    .chart-container { 
+      overflow-x: auto; 
+      width: 100%; 
+      min-width: 8000px; /* 适配20倍组间空隙，大幅扩大容器宽度 */
+      min-height: 1900px;
+      scrollbar-width: thick;
+      scrollbar-color: #666 #eee;
+      padding-bottom: 100px;
+    }
+    /* 自定义滚动条 */
+    .chart-container::-webkit-scrollbar {
+      height: 16px;
+    }
+    .chart-container::-webkit-scrollbar-track {
+      background: #eee;
+      border-radius: 8px;
+    }
+    .chart-container::-webkit-scrollbar-thumb {
+      background: #666;
+      border-radius: 8px;
+      border: 3px solid #eee;
+    }
+    .chart-container::-webkit-scrollbar-thumb:hover {
+      background: #333;
+    }
+    canvas { 
+      width: 100%;
+      height: 1800px !important;
+      background: #fff; 
+      border: 2px solid #ddd; 
+      border-radius: 12px;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+    }
+    /* 响应式调整：保持默认缩放30%，不额外调整 */
+    @media (max-width: 1200px) {
+      .chart-container {
+        min-height: 1900px;
+      }
+      canvas {
+        height: 1800px !important;
+      }
+      h1 {
+        font-size: 48px;
+      }
+      h2 {
+        font-size: 36px;
+      }
+    }
+  </style>
+  <!-- 禁止页面缩放的meta标签 -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+</head>
+<body>
+  <div id="viewport" class="viewport">
+    <div id="content-size" class="content-size">
+      <div id="content" class="content">
+        <h1>style category</h1>
+
+        <div class="chart-section">
+          <h2>1. ALL </h2>
+          <div class="chart-container">
+            <canvas id="chartAll"></canvas>
+          </div>
+        </div>
+
+        <div class="chart-section">
+          <h2>2. Male </h2>
+          <div class="chart-container">
+            <canvas id="chartMale"></canvas>
+          </div>
+        </div>
+
+        <div class="chart-section">
+          <h2>3. Female </h2>
+          <div class="chart-container">
+            <canvas id="chartFemale"></canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const viewport = document.getElementById('viewport');
+      const content = document.getElementById('content');
+      const contentSize = document.getElementById('content-size');
+      let MIN_SCALE = 1;
+      const MAX_SCALE = 3;
+      let scale = 1;
+      function computeMinScale() {
+        const cw = content.offsetWidth;
+        const vw = viewport.clientWidth;
+        if (!cw || !vw) return 1;
+        return Math.min(MAX_SCALE, Math.max(0.2, vw / cw));
+      }
+      function updateWrapperSize() {
+        const w = content.offsetWidth * scale;
+        const h = content.offsetHeight * scale;
+        contentSize.style.width = w + 'px';
+        contentSize.style.height = h + 'px';
+      }
+      function applyScale(newScale, ax, ay) {
+        const prev = scale;
+        const target = Math.max(MIN_SCALE, Math.min(MAX_SCALE, newScale));
+        if (target === prev) return;
+        const ratio = target / prev;
+        const rect = viewport.getBoundingClientRect();
+        const anchorX = ax != null ? ax : viewport.scrollLeft + viewport.clientWidth / 2;
+        const anchorY = ay != null ? ay : viewport.scrollTop + viewport.clientHeight / 2;
+        scale = target;
+        content.style.transform = 'scale(' + scale + ')';
+        updateWrapperSize();
+        let newLeft = anchorX * ratio - viewport.clientWidth / 2;
+        let newTop = anchorY * ratio - viewport.clientHeight / 2;
+        const maxLeft = Math.max(0, contentSize.scrollWidth - viewport.clientWidth);
+        const maxTop = Math.max(0, contentSize.scrollHeight - viewport.clientHeight);
+        viewport.scrollLeft = Math.max(0, Math.min(maxLeft, newLeft));
+        viewport.scrollTop = Math.max(0, Math.min(maxTop, newTop));
+      }
+      function initScale() {
+        MIN_SCALE = computeMinScale();
+        scale = MIN_SCALE;
+        content.style.transform = 'scale(' + scale + ')';
+        updateWrapperSize();
+      }
+      initScale();
+
+      let dragging = false;
+      let sx = 0, sy = 0, sl = 0, st = 0;
+      viewport.addEventListener('mousedown', function(e) {
+        if (e.button !== 0) return;
+        dragging = true;
+        viewport.style.cursor = 'grabbing';
+        sx = e.clientX;
+        sy = e.clientY;
+        sl = viewport.scrollLeft;
+        st = viewport.scrollTop;
+      });
+      window.addEventListener('mousemove', function(e) {
+        if (!dragging) return;
+        viewport.scrollLeft = sl - (e.clientX - sx);
+        viewport.scrollTop = st - (e.clientY - sy);
+      });
+      window.addEventListener('mouseup', function() {
+        dragging = false;
+        viewport.style.cursor = '';
+      });
+
+      viewport.addEventListener('wheel', function(e) {
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          const factor = e.deltaY < 0 ? 1.1 : 0.9;
+          const rect = viewport.getBoundingClientRect();
+          const ax = viewport.scrollLeft + (e.clientX - rect.left);
+          const ay = viewport.scrollTop + (e.clientY - rect.top);
+          const next = scale * factor;
+          applyScale(next < MIN_SCALE ? MIN_SCALE : next, ax, ay);
+        }
+      }, { passive: false });
+
+      window.addEventListener('resize', function() {
+        const prevMin = MIN_SCALE;
+        MIN_SCALE = computeMinScale();
+        if (scale < MIN_SCALE) {
+          applyScale(MIN_SCALE);
+        } else {
+          updateWrapperSize();
+        }
+      });
+      window.addEventListener('load', function() {
+        initScale();
+      });
+    });
+
+    // 共用配置 - 保持原有标签处理逻辑（下划线换行）
+    const labels = [
+      'ACADEMIC','BUSINESS','CASUAL','COUNTRY_STYLE','DOPAMINE','ETHNIC','FUTURISM',
+      'GOTHIC','LOLITA','MERLAD','MINIMALISM','NEW_CHINESE','OUTDOOR_FUNCTIONAL',
+      'POST_APOCALYPTIC','PREPPY','ROCK','ROMANTIC','SEXY','SWEET','WABI_SABI','Y2K','民族风'
+    ].map(label => label.replace('_', '\n'));
+
+    // 所有数据（保持更新后的数值）
+    const allData = {
+      male_tops: [0,686,638,491,128,11,366,35,0,20,313,126,359,166,385,187,6,3,3,219,282,0],
+      male_bottoms: [0,280,199,141,132,1,43,49,0,13,178,93,279,10,96,25,0,5,0,163,239,0],
+      male_outwear: [0,2442,2147,1245,161,19,671,216,0,58,471,168,1001,319,803,367,11,1,1,278,631,0],
+      female_dress: [260,1030,4322,1158,256,0,397,340,488,279,1104,312,215,170,0,223,990,607,1438,293,292,159],
+      female_skirt: [408,662,1177,633,214,0,381,280,278,308,358,200,297,209,0,231,584,233,714,246,385,95],
+      female_blouse: [618,1275,3786,710,385,0,533,412,454,453,616,221,852,181,0,437,869,533,899,336,991,169],
+      female_outwear: [267,1255,740,453,178,0,418,160,101,301,273,172,712,172,0,245,198,13,159,280,500,76],
+      female_trousers: [171,782,1899,391,232,0,267,64,137,293,351,141,865,101,0,189,654,137,319,299,427,96]
+    };
+
+    // 颜色配置（保持原有颜色）
+    const colors = {
+      male_tops: '#1f77b4',
+      male_bottoms: '#ff7f0e',
+      male_outwear: '#2ca02c',
+      female_dress: '#d62728',
+      female_skirt: '#9467bd',
+      female_blouse: '#8c564b',
+      female_outwear: '#e377c2',
+      female_trousers: '#7f7f7f'
+    };
+
+    // 图表基础配置 - 核心修改：categoryPercentage设为0.04（原0.8的1/20），扩大组间空隙20倍
+    const baseChartConfig = {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { 
+          position: 'top',
+          labels: {
+            font: { size: 60, weight: 'bold' },
+            padding: 60,
+            boxWidth: 60
+          },
+          padding: { bottom: 60 }
+        },
+        tooltip: { 
+          mode: 'index', 
+          intersect: false,
+          padding: 30,
+          titleFont: { size: 60 },
+            bodyFont: { size: 42 },
+            boxPadding: 20,
+          cornerRadius: 12
+        }
+      },
+      scales: {
+        x: { 
+          stacked: false, 
+          title: { 
+            display: true, 
+            text: '',
+            font: { size: 1, weight: 'bold' },
+            padding: { top: 1, bottom: 1 }
+          }, 
+          ticks: { 
+            maxRotation: 0, // 保持原有斜放角度（向左下45度）
+            minRotation: 0, // 强制固定角度
+            autoSkip: false,
+            font: { size: 28, weight: 'bold' },
+            padding: 150,
+            color: '#333',
+            lineHeight: 1.3,
+            align: 'right' // 斜放标签右对齐，提升可读性
+          },
+          grid: { display: false },
+          border: { width: 3 },
+          categoryPercentage: 0.5, // 核心修改：原0.8 → 0.04，组间空隙扩大20倍
+          barPercentage: 0.8, // 保持组内柱子宽度不变
+        },
+        y: { 
+          beginAtZero: true, 
+          title: { 
+            display: true, 
+            text: '',
+            font: { size: 1, weight: 'bold' },
+            padding: { right: 1 }
+          },
+          ticks: {
+            font: { size: 33, weight: 'bold' },
+            padding: 30,
+            color: '#333',
+            stepSize: 500 // 适配更大数值范围
+          },
+          grid: { color: '#e0e0e0', lineWidth: 3 },
+          border: { width: 3 }
+        }
+      },
+      layout: {
+        padding: { top: 60, right: 90, bottom: 100, left: 90 }
+      },
+      animation: { duration: 1500, easing: 'easeOutQuart' },
+      barThickness: 'flex',
+      maxBarThickness: 70,
+      minBarLength: 5
+    };
+
+    // 1. 创建综合图表
+    new Chart(document.getElementById('chartAll'), {
+      type: 'bar',
+      data: {
+        labels: labels,
+        datasets: Object.keys(allData).map(key => ({
+          label: key,
+          data: allData[key],
+          backgroundColor: colors[key]
+        }))
+      },
+      options: { ...baseChartConfig }
+    });
+
+    // 2. 创建男性分类图表
+    new Chart(document.getElementById('chartMale'), {
+      type: 'bar',
+      data: {
+        labels: labels,
+        datasets: [
+          { label: 'male_tops', data: allData.male_tops, backgroundColor: colors.male_tops },
+          { label: 'male_bottoms', data: allData.male_bottoms, backgroundColor: colors.male_bottoms },
+          { label: 'male_outwear', data: allData.male_outwear, backgroundColor: colors.male_outwear }
+        ]
+      },
+      options: {
+        ...baseChartConfig,
+        scales: {
+          ...baseChartConfig.scales,
+          x: {
+            ...baseChartConfig.scales.x,
+            categoryPercentage: 0.35
+          },
+          y: {
+            ...baseChartConfig.scales.y,
+            stepSize: 800 // 适配男性外套最大值2442
+          }
+        }
+      }
+    });
+
+    // 3. 创建女性分类图表
+    new Chart(document.getElementById('chartFemale'), {
+      type: 'bar',
+      data: {
+        labels: labels,
+        datasets: [
+          { label: 'female_dress', data: allData.female_dress, backgroundColor: colors.female_dress },
+          { label: 'female_skirt', data: allData.female_skirt, backgroundColor: colors.female_skirt },
+          { label: 'female_blouse', data: allData.female_blouse, backgroundColor: colors.female_blouse },
+          { label: 'female_outwear', data: allData.female_outwear, backgroundColor: colors.female_outwear },
+          { label: 'female_trousers', data: allData.female_trousers, backgroundColor: colors.female_trousers }
+        ]
+      },
+      options: {
+        ...baseChartConfig,
+        scales: {
+          ...baseChartConfig.scales,
+          x: {
+            ...baseChartConfig.scales.x,
+            categoryPercentage: 0.28
+          },
+          y: {
+            ...baseChartConfig.scales.y,
+            stepSize: 1000 // 适配女性连衣裙最大值4322
+          }
+        }
+      }
+    });
+  </script>
+</body>
+</html>

src/App.vue

@@ -2,11 +2,32 @@
   <router-view/>
 </template>
 
-<style>
+<style lang="less">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   height: 100%;
 }
+
+.ipad{
+	*{
+		-webkit-touch-callout:none;
+		-khtml-user-select:none;
+		-webkit-user-select:none;
+		-moz-user-select:none;
+		-ms-user-select: none;
+		user-select:none;
+
+		touch-action: pan-x pan-y; /* 允许单指平移（滚动）但禁用捏合缩放 */
+		input,textarea{
+			-webkit-touch-callout:default;
+			-khtml-user-select:auto;
+			-webkit-user-select:auto;
+			-moz-user-select:auto;
+			-ms-user-select: auto;
+			user-select:auto;
+		}
+	}
+}
 </style>

src/assets/iconfont2/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/iconfont2/demo_index.html

@@ -0,0 +1,970 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4292253" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe650;</span>
+                <div class="name">裁剪</div>
+                <div class="code-name">&amp;#xe650;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60a;</span>
+                <div class="name">角度</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe69e;</span>
+                <div class="name">水平翻转</div>
+                <div class="code-name">&amp;#xe69e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xec60;</span>
+                <div class="name">垂直翻转</div>
+                <div class="code-name">&amp;#xec60;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8d1;</span>
+                <div class="name">clothes</div>
+                <div class="code-name">&amp;#xe8d1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe647;</span>
+                <div class="name">材质</div>
+                <div class="code-name">&amp;#xe647;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61b;</span>
+                <div class="name">IC-液化</div>
+                <div class="code-name">&amp;#xe61b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe751;</span>
+                <div class="name">上一层</div>
+                <div class="code-name">&amp;#xe751;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe604;</span>
+                <div class="name">上一层</div>
+                <div class="code-name">&amp;#xe604;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68a;</span>
+                <div class="name">下一层</div>
+                <div class="code-name">&amp;#xe68a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68b;</span>
+                <div class="name">上一层</div>
+                <div class="code-name">&amp;#xe68b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6a1;</span>
+                <div class="name">审批</div>
+                <div class="code-name">&amp;#xe6a1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">用户</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">使用次数</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe634;</span>
+                <div class="name">下拉</div>
+                <div class="code-name">&amp;#xe634;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">编辑</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64f;</span>
+                <div class="name">圆形</div>
+                <div class="code-name">&amp;#xe64f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe615;</span>
+                <div class="name">三角形</div>
+                <div class="code-name">&amp;#xe615;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe632;</span>
+                <div class="name">图层</div>
+                <div class="code-name">&amp;#xe632;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe616;</span>
+                <div class="name">平移</div>
+                <div class="code-name">&amp;#xe616;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67b;</span>
+                <div class="name">橡皮</div>
+                <div class="code-name">&amp;#xe67b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64c;</span>
+                <div class="name">tx-fill-椭圆形</div>
+                <div class="code-name">&amp;#xe64c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">直线</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xec5f;</span>
+                <div class="name">线</div>
+                <div class="code-name">&amp;#xec5f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xea6f;</span>
+                <div class="name">正方形</div>
+                <div class="code-name">&amp;#xea6f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62d;</span>
+                <div class="name">图层</div>
+                <div class="code-name">&amp;#xe62d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe685;</span>
+                <div class="name">点位</div>
+                <div class="code-name">&amp;#xe685;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe620;</span>
+                <div class="name">并集</div>
+                <div class="code-name">&amp;#xe620;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe668;</span>
+                <div class="name">并集</div>
+                <div class="code-name">&amp;#xe668;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe603;</span>
+                <div class="name">标签</div>
+                <div class="code-name">&amp;#xe603;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe85f;</span>
+                <div class="name">语言</div>
+                <div class="code-name">&amp;#xe85f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe626;</span>
+                <div class="name">撤销 返回 撤回 上一步</div>
+                <div class="code-name">&amp;#xe626;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe609;</span>
+                <div class="name">撤销 返回 撤回 上一步</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66c;</span>
+                <div class="name">外套_长款外套1@1x</div>
+                <div class="code-name">&amp;#xe66c;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1762934152017') format('woff2'),
+       url('iconfont.woff?t=1762934152017') format('woff'),
+       url('iconfont.ttf?t=1762934152017') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-caijian"></span>
+            <div class="name">
+              裁剪
+            </div>
+            <div class="code-name">.icon-caijian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-angle"></span>
+            <div class="name">
+              角度
+            </div>
+            <div class="code-name">.icon-angle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-flip-horizontal"></span>
+            <div class="name">
+              水平翻转
+            </div>
+            <div class="code-name">.icon-flip-horizontal
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-flip-vertical"></span>
+            <div class="name">
+              垂直翻转
+            </div>
+            <div class="code-name">.icon-flip-vertical
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-clothes"></span>
+            <div class="name">
+              clothes
+            </div>
+            <div class="code-name">.icon-clothes
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-caizhi"></span>
+            <div class="name">
+              材质
+            </div>
+            <div class="code-name">.icon-caizhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-IC-yehua"></span>
+            <div class="name">
+              IC-液化
+            </div>
+            <div class="code-name">.icon-IC-yehua
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shangyiceng"></span>
+            <div class="name">
+              上一层
+            </div>
+            <div class="code-name">.icon-shangyiceng
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shangyiceng1"></span>
+            <div class="name">
+              上一层
+            </div>
+            <div class="code-name">.icon-shangyiceng1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiayiceng"></span>
+            <div class="name">
+              下一层
+            </div>
+            <div class="code-name">.icon-xiayiceng
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shangyiceng2"></span>
+            <div class="name">
+              上一层
+            </div>
+            <div class="code-name">.icon-shangyiceng2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shenpi"></span>
+            <div class="name">
+              审批
+            </div>
+            <div class="code-name">.icon-shenpi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yonghu"></span>
+            <div class="name">
+              用户
+            </div>
+            <div class="code-name">.icon-yonghu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-usetime"></span>
+            <div class="name">
+              使用次数
+            </div>
+            <div class="code-name">.icon-usetime
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiala"></span>
+            <div class="name">
+              下拉
+            </div>
+            <div class="code-name">.icon-xiala
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-bianji"></span>
+            <div class="name">
+              编辑
+            </div>
+            <div class="code-name">.icon-bianji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-circle"></span>
+            <div class="name">
+              圆形
+            </div>
+            <div class="code-name">.icon-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-sanjiaoxing"></span>
+            <div class="name">
+              三角形
+            </div>
+            <div class="code-name">.icon-sanjiaoxing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tuceng"></span>
+            <div class="name">
+              图层
+            </div>
+            <div class="code-name">.icon-tuceng
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-move"></span>
+            <div class="name">
+              平移
+            </div>
+            <div class="code-name">.icon-move
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiangpi_huaban1"></span>
+            <div class="name">
+              橡皮
+            </div>
+            <div class="code-name">.icon-xiangpi_huaban1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tx-fill-tuoyuanxing"></span>
+            <div class="name">
+              tx-fill-椭圆形
+            </div>
+            <div class="code-name">.icon-tx-fill-tuoyuanxing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhixian"></span>
+            <div class="name">
+              直线
+            </div>
+            <div class="code-name">.icon-zhixian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xian"></span>
+            <div class="name">
+              线
+            </div>
+            <div class="code-name">.icon-xian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-checkbox-full"></span>
+            <div class="name">
+              正方形
+            </div>
+            <div class="code-name">.icon-checkbox-full
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tuceng1"></span>
+            <div class="name">
+              图层
+            </div>
+            <div class="code-name">.icon-tuceng1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dianwei"></span>
+            <div class="name">
+              点位
+            </div>
+            <div class="code-name">.icon-dianwei
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-bingji"></span>
+            <div class="name">
+              并集
+            </div>
+            <div class="code-name">.icon-bingji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-bingji1"></span>
+            <div class="name">
+              并集
+            </div>
+            <div class="code-name">.icon-bingji1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-biaoqian"></span>
+            <div class="name">
+              标签
+            </div>
+            <div class="code-name">.icon-biaoqian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yuyan"></span>
+            <div class="name">
+              语言
+            </div>
+            <div class="code-name">.icon-yuyan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fanchehui"></span>
+            <div class="name">
+              撤销 返回 撤回 上一步
+            </div>
+            <div class="code-name">.icon-fanchehui
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chehui"></span>
+            <div class="name">
+              撤销 返回 撤回 上一步
+            </div>
+            <div class="code-name">.icon-chehui
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-waitao_changkuanwaitao11x"></span>
+            <div class="name">
+              外套_长款外套1@1x
+            </div>
+            <div class="code-name">.icon-a-waitao_changkuanwaitao11x
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-caijian"></use>
+                </svg>
+                <div class="name">裁剪</div>
+                <div class="code-name">#icon-caijian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-angle"></use>
+                </svg>
+                <div class="name">角度</div>
+                <div class="code-name">#icon-angle</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-flip-horizontal"></use>
+                </svg>
+                <div class="name">水平翻转</div>
+                <div class="code-name">#icon-flip-horizontal</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-flip-vertical"></use>
+                </svg>
+                <div class="name">垂直翻转</div>
+                <div class="code-name">#icon-flip-vertical</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-clothes"></use>
+                </svg>
+                <div class="name">clothes</div>
+                <div class="code-name">#icon-clothes</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-caizhi"></use>
+                </svg>
+                <div class="name">材质</div>
+                <div class="code-name">#icon-caizhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-IC-yehua"></use>
+                </svg>
+                <div class="name">IC-液化</div>
+                <div class="code-name">#icon-IC-yehua</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shangyiceng"></use>
+                </svg>
+                <div class="name">上一层</div>
+                <div class="code-name">#icon-shangyiceng</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shangyiceng1"></use>
+                </svg>
+                <div class="name">上一层</div>
+                <div class="code-name">#icon-shangyiceng1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiayiceng"></use>
+                </svg>
+                <div class="name">下一层</div>
+                <div class="code-name">#icon-xiayiceng</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shangyiceng2"></use>
+                </svg>
+                <div class="name">上一层</div>
+                <div class="code-name">#icon-shangyiceng2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shenpi"></use>
+                </svg>
+                <div class="name">审批</div>
+                <div class="code-name">#icon-shenpi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yonghu"></use>
+                </svg>
+                <div class="name">用户</div>
+                <div class="code-name">#icon-yonghu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-usetime"></use>
+                </svg>
+                <div class="name">使用次数</div>
+                <div class="code-name">#icon-usetime</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiala"></use>
+                </svg>
+                <div class="name">下拉</div>
+                <div class="code-name">#icon-xiala</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bianji"></use>
+                </svg>
+                <div class="name">编辑</div>
+                <div class="code-name">#icon-bianji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-circle"></use>
+                </svg>
+                <div class="name">圆形</div>
+                <div class="code-name">#icon-circle</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-sanjiaoxing"></use>
+                </svg>
+                <div class="name">三角形</div>
+                <div class="code-name">#icon-sanjiaoxing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tuceng"></use>
+                </svg>
+                <div class="name">图层</div>
+                <div class="code-name">#icon-tuceng</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-move"></use>
+                </svg>
+                <div class="name">平移</div>
+                <div class="code-name">#icon-move</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiangpi_huaban1"></use>
+                </svg>
+                <div class="name">橡皮</div>
+                <div class="code-name">#icon-xiangpi_huaban1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tx-fill-tuoyuanxing"></use>
+                </svg>
+                <div class="name">tx-fill-椭圆形</div>
+                <div class="code-name">#icon-tx-fill-tuoyuanxing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhixian"></use>
+                </svg>
+                <div class="name">直线</div>
+                <div class="code-name">#icon-zhixian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xian"></use>
+                </svg>
+                <div class="name">线</div>
+                <div class="code-name">#icon-xian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-checkbox-full"></use>
+                </svg>
+                <div class="name">正方形</div>
+                <div class="code-name">#icon-checkbox-full</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tuceng1"></use>
+                </svg>
+                <div class="name">图层</div>
+                <div class="code-name">#icon-tuceng1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dianwei"></use>
+                </svg>
+                <div class="name">点位</div>
+                <div class="code-name">#icon-dianwei</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bingji"></use>
+                </svg>
+                <div class="name">并集</div>
+                <div class="code-name">#icon-bingji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bingji1"></use>
+                </svg>
+                <div class="name">并集</div>
+                <div class="code-name">#icon-bingji1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-biaoqian"></use>
+                </svg>
+                <div class="name">标签</div>
+                <div class="code-name">#icon-biaoqian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yuyan"></use>
+                </svg>
+                <div class="name">语言</div>
+                <div class="code-name">#icon-yuyan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fanchehui"></use>
+                </svg>
+                <div class="name">撤销 返回 撤回 上一步</div>
+                <div class="code-name">#icon-fanchehui</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chehui"></use>
+                </svg>
+                <div class="name">撤销 返回 撤回 上一步</div>
+                <div class="code-name">#icon-chehui</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-waitao_changkuanwaitao11x"></use>
+                </svg>
+                <div class="name">外套_长款外套1@1x</div>
+                <div class="code-name">#icon-a-waitao_changkuanwaitao11x</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/assets/iconfont2/iconfont.css

@@ -1,18 +1,38 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4292253 */
-  src: url('iconfont.woff2?t=1727415711578') format('woff2'),
-       url('iconfont.woff?t=1727415711578') format('woff'),
-       url('iconfont.ttf?t=1727415711578') format('truetype');
+  src: url('iconfont.woff2?t=1762934152017') format('woff2'),
+       url('iconfont.woff?t=1762934152017') format('woff'),
+       url('iconfont.ttf?t=1762934152017') format('truetype');
 }
 
 .iconfont {
   font-family: "iconfont" !important;
-  font-size: 1.8rem;
+  font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-caijian:before {
+  content: "\e650";
+}
+
+.icon-angle:before {
+  content: "\e60a";
+}
+
+.icon-flip-horizontal:before {
+  content: "\e69e";
+}
+
+.icon-flip-vertical:before {
+  content: "\ec60";
+}
+
+.icon-clothes:before {
+  content: "\e8d1";
+}
+
 .icon-caizhi:before {
   content: "\e647";
 }

src/assets/iconfont2/iconfont.json

@@ -1,170 +1,247 @@
 {
-  "id": "",
-  "name": "",
+  "id": "4292253",
+  "name": "aida",
   "font_family": "iconfont",
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
     {
-      "icon_id": "124968799",
-      "name": "外套_长款外套1@1x",
-      "font_class": "a-waitao_changkuanwaitao11x",
-      "unicode": "e66c",
-      "unicode_decimal": 58988
+      "icon_id": "22138606",
+      "name": "裁剪",
+      "font_class": "caijian",
+      "unicode": "e650",
+      "unicode_decimal": 58960
     },
     {
-      "icon_id": "125198319",
-      "name": "撤销 返回 撤回 上一步",
-      "font_class": "fanchehui",
-      "unicode": "e626",
-      "unicode_decimal": 58918
+      "icon_id": "8875396",
+      "name": "角度",
+      "font_class": "angle",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
     },
     {
-      "icon_id": "125198320",
-      "name": "撤销 返回 撤回 上一步",
-      "font_class": "chehui",
-      "unicode": "e609",
-      "unicode_decimal": 58889
+      "icon_id": "15551512",
+      "name": "水平翻转",
+      "font_class": "flip-horizontal",
+      "unicode": "e69e",
+      "unicode_decimal": 59038
     },
     {
-      "icon_id": "125524062",
-      "name": "语言",
-      "font_class": "yuyan",
-      "unicode": "e85f",
-      "unicode_decimal": 59487
+      "icon_id": "46016160",
+      "name": "垂直翻转",
+      "font_class": "flip-vertical",
+      "unicode": "ec60",
+      "unicode_decimal": 60512
     },
     {
-      "icon_id": "126177191",
-      "name": "标签",
-      "font_class": "biaoqian",
-      "unicode": "e603",
-      "unicode_decimal": 58883
+      "icon_id": "20183053",
+      "name": "clothes",
+      "font_class": "clothes",
+      "unicode": "e8d1",
+      "unicode_decimal": 59601
     },
     {
-      "icon_id": "126459101",
-      "name": "并集",
-      "font_class": "bingji",
-      "unicode": "e620",
-      "unicode_decimal": 58912
+      "icon_id": "15739173",
+      "name": "材质",
+      "font_class": "caizhi",
+      "unicode": "e647",
+      "unicode_decimal": 58951
     },
     {
-      "icon_id": "126459102",
-      "name": "并集",
-      "font_class": "bingji1",
-      "unicode": "e668",
-      "unicode_decimal": 58984
+      "icon_id": "35023469",
+      "name": "IC-液化",
+      "font_class": "IC-yehua",
+      "unicode": "e61b",
+      "unicode_decimal": 58907
     },
     {
-      "icon_id": "126901286",
-      "name": "点位",
-      "font_class": "dianwei",
-      "unicode": "e685",
-      "unicode_decimal": 59013
+      "icon_id": "12096844",
+      "name": "上一层",
+      "font_class": "shangyiceng",
+      "unicode": "e751",
+      "unicode_decimal": 59217
     },
     {
-      "icon_id": "130743908",
-      "name": "编辑",
-      "font_class": "bianji",
-      "unicode": "e600",
-      "unicode_decimal": 58880
+      "icon_id": "16531912",
+      "name": "上一层",
+      "font_class": "shangyiceng1",
+      "unicode": "e604",
+      "unicode_decimal": 58884
     },
     {
-      "icon_id": "130743909",
-      "name": "圆形",
-      "font_class": "circle",
-      "unicode": "e64f",
-      "unicode_decimal": 58959
+      "icon_id": "24253227",
+      "name": "下一层",
+      "font_class": "xiayiceng",
+      "unicode": "e68a",
+      "unicode_decimal": 59018
     },
     {
-      "icon_id": "130743910",
-      "name": "三角形",
-      "font_class": "sanjiaoxing",
-      "unicode": "e615",
-      "unicode_decimal": 58901
+      "icon_id": "24253230",
+      "name": "上一层",
+      "font_class": "shangyiceng2",
+      "unicode": "e68b",
+      "unicode_decimal": 59019
     },
     {
-      "icon_id": "130743911",
-      "name": "图层",
-      "font_class": "tuceng",
-      "unicode": "e632",
-      "unicode_decimal": 58930
-    },
-    {
-      "icon_id": "130743912",
-      "name": "平移",
-      "font_class": "move",
-      "unicode": "e616",
-      "unicode_decimal": 58902
-    },
-    {
-      "icon_id": "130743913",
-      "name": "橡皮",
-      "font_class": "xiangpi_huaban1",
-      "unicode": "e67b",
-      "unicode_decimal": 59003
-    },
-    {
-      "icon_id": "130743914",
-      "name": "tx-fill-椭圆形",
-      "font_class": "tx-fill-tuoyuanxing",
-      "unicode": "e64c",
-      "unicode_decimal": 58956
-    },
-    {
-      "icon_id": "130743915",
-      "name": "直线",
-      "font_class": "zhixian",
-      "unicode": "e602",
-      "unicode_decimal": 58882
-    },
-    {
-      "icon_id": "130743916",
-      "name": "线",
-      "font_class": "xian",
-      "unicode": "ec5f",
-      "unicode_decimal": 60511
-    },
-    {
-      "icon_id": "130743917",
-      "name": "正方形",
-      "font_class": "checkbox-full",
-      "unicode": "ea6f",
-      "unicode_decimal": 60015
-    },
-    {
-      "icon_id": "130743918",
-      "name": "图层",
-      "font_class": "tuceng1",
-      "unicode": "e62d",
-      "unicode_decimal": 58925
-    },
-    {
-      "icon_id": "130751283",
+      "icon_id": "3663275",
       "name": "审批",
       "font_class": "shenpi",
       "unicode": "e6a1",
       "unicode_decimal": 59041
     },
     {
-      "icon_id": "130751284",
+      "icon_id": "7638976",
       "name": "用户",
       "font_class": "yonghu",
       "unicode": "e617",
       "unicode_decimal": 58903
     },
     {
-      "icon_id": "130751285",
+      "icon_id": "9775414",
       "name": "使用次数",
       "font_class": "usetime",
       "unicode": "e601",
       "unicode_decimal": 58881
     },
     {
-      "icon_id": "130751286",
+      "icon_id": "16843615",
       "name": "下拉",
       "font_class": "xiala",
       "unicode": "e634",
       "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "1264",
+      "name": "编辑",
+      "font_class": "bianji",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "755612",
+      "name": "圆形",
+      "font_class": "circle",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "3101162",
+      "name": "三角形",
+      "font_class": "sanjiaoxing",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "6774075",
+      "name": "图层",
+      "font_class": "tuceng",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
+      "icon_id": "10905244",
+      "name": "平移",
+      "font_class": "move",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "14421659",
+      "name": "橡皮",
+      "font_class": "xiangpi_huaban1",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "14718690",
+      "name": "tx-fill-椭圆形",
+      "font_class": "tx-fill-tuoyuanxing",
+      "unicode": "e64c",
+      "unicode_decimal": 58956
+    },
+    {
+      "icon_id": "17521049",
+      "name": "直线",
+      "font_class": "zhixian",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "17581689",
+      "name": "线",
+      "font_class": "xian",
+      "unicode": "ec5f",
+      "unicode_decimal": 60511
+    },
+    {
+      "icon_id": "18175800",
+      "name": "正方形",
+      "font_class": "checkbox-full",
+      "unicode": "ea6f",
+      "unicode_decimal": 60015
+    },
+    {
+      "icon_id": "26998795",
+      "name": "图层",
+      "font_class": "tuceng1",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "31762941",
+      "name": "点位",
+      "font_class": "dianwei",
+      "unicode": "e685",
+      "unicode_decimal": 59013
+    },
+    {
+      "icon_id": "8722601",
+      "name": "并集",
+      "font_class": "bingji",
+      "unicode": "e620",
+      "unicode_decimal": 58912
+    },
+    {
+      "icon_id": "15192904",
+      "name": "并集",
+      "font_class": "bingji1",
+      "unicode": "e668",
+      "unicode_decimal": 58984
+    },
+    {
+      "icon_id": "17863630",
+      "name": "标签",
+      "font_class": "biaoqian",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "16399020",
+      "name": "语言",
+      "font_class": "yuyan",
+      "unicode": "e85f",
+      "unicode_decimal": 59487
+    },
+    {
+      "icon_id": "4240742",
+      "name": "撤销 返回 撤回 上一步",
+      "font_class": "fanchehui",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    },
+    {
+      "icon_id": "6126117",
+      "name": "撤销 返回 撤回 上一步",
+      "font_class": "chehui",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "33174601",
+      "name": "外套_长款外套1@1x",
+      "font_class": "a-waitao_changkuanwaitao11x",
+      "unicode": "e66c",
+      "unicode_decimal": 58988
     }
   ]
 }

src/assets/icons/CBottom.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750089605497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22868" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M185.396221 1024a49.219161 49.219161 0 0 1 0-98.462134h630.08622a49.219161 49.219161 0 0 1 0 98.462134z m273.146103-175.898375L141.772852 518.402301a49.147725 49.147725 0 1 1 70.84035-68.149608l232.689715 242.000161a0.142871 0.142871 0 0 0 0.142872-0.142871V50.332128a49.83827 49.83827 0 0 1 52.409953-50.243072 49.195349 49.195349 0 0 1 46.242675 49.100102v641.111122c0 0.142871 0 0.309554 0.142872 0.142871l232.713527-241.976349a49.147725 49.147725 0 1 1 70.84035 68.149608L529.382674 848.101625a48.981042 48.981042 0 0 1-70.84035 0z" fill="#040000" p-id="22869"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750089605497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22868" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M185.396221 1024a49.219161 49.219161 0 0 1 0-98.462134h630.08622a49.219161 49.219161 0 0 1 0 98.462134z m273.146103-175.898375L141.772852 518.402301a49.147725 49.147725 0 1 1 70.84035-68.149608l232.689715 242.000161a0.142871 0.142871 0 0 0 0.142872-0.142871V50.332128a49.83827 49.83827 0 0 1 52.409953-50.243072 49.195349 49.195349 0 0 1 46.242675 49.100102v641.111122c0 0.142871 0 0.309554 0.142872 0.142871l232.713527-241.976349a49.147725 49.147725 0 1 1 70.84035 68.149608L529.382674 848.101625a48.981042 48.981042 0 0 1-70.84035 0z" p-id="22869"></path></svg>

src/assets/icons/CCheck.svg

@@ -0,0 +1 @@
+<svg t="1763432312095" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4678" width="200" height="200"><path d="M509.92 176C325.504 176 176 325.504 176 509.92c0 184.416 149.504 333.92 333.92 333.92 184.416 0 333.92-149.504 333.92-333.92C843.84 325.504 694.32 176 509.92 176z m166.64 214.848a16 16 0 0 1 22.624 0l11.328 11.312a16 16 0 0 1 0 22.624l-254.08 254.08a16 16 0 0 1-22.624 0l-159.616-159.632a16 16 0 0 1 0-22.624l11.312-11.312a16 16 0 0 1 22.624 0l136.992 136.992z" fill="currentColor" p-id="4679"></path></svg>