Merge branch 'master' of http://git.hieap.cn/gitbucket/git/08335/hivui-platform-template

08335 / hivui-platform-template

hivui平台项目模板

Browse code Merge branch 'master' of http://git.hieap.cn/gitbucket/git/08335/hivui-platform-template master
commit ff41a4677b758618ca8e193071267886f663ac99 2 parents 28af6d7 + 085b6ed 12112 authored on 14 Apr

Showing 22 changed files

Ignore Space Show notes View package.json
{ "name": "hi-vui-template", "version": "1.1.72", "description": "A hi-vui-template project", "author": "zhcTeam", "scripts": { "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache", "pm2:start": "pm2 -s start processes.json", "dev": "vite --host", "def": "vite --host", "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build1": "webpack --mode production --config build/webpack.prod.conf.js", "dll": "webpack --config build/webpack.dll.conf.js", "start": "webpack-dev-server --config build/webpack.dev.conf.js", "copyassets": "node build/copyBaseAssets.js", "build:debug": "node --inspect-brk build/copyBaseAssets.js && cross-env NODE_ENV=production node --inspect-brk build/webpack.prod.conf.js", "build-el-theme": "sass ./theme/element.scss ./theme/build/element-ui.css --no-source-map --style=compressed", "build-hivuiMain-theme": "sass ./theme/hivuiMain.scss ./theme/build/hivuiMain.css --no-source-map --style=compressed", "build-hiui-theme": "sass ./theme/hiui.scss ./theme/build/hiui.css --no-source-map --style=compressed", "build-theme": "npm run build-el-theme && npm run build-hivuiMain-theme && npm run build-hiui-theme" }, "devDependencies": { "@babel/core": "^7.1.2", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7", "@babel/plugin-proposal-optional-chaining": "^7.16.7", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/preset-env": "^7.1.0", "@vitejs/plugin-vue-jsx": "^1.3.3", "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "add-asset-html-webpack-plugin": "^3.2.0", "autoprefixer": "^9.1.5", "babel-loader": "^8.0.4", "babel-plugin-component": "^1.1.1", "babel-plugin-transform-vite-meta-env": "^1.0.3", "caniuse-lite": "^1.0.30001436", "chalk": "^3.0.0", "clean-webpack-plugin": "^0.1.19", "copy-webpack-plugin": "^4.5.3", "cross-env": "^7.0.3", "css-loader": "^1.0.0", "dotenv": "^10.0.0", "file-loader": "^2.0.0", "happypack": "^5.0.1", "html-webpack-plugin": "^4.5.2", "less": "3.0.4", "less-loader": "5.0.0", "mini-css-extract-plugin": "^1.6.2", "node-sass": "4.14.1", "optimize-css-assets-webpack-plugin": "^5.0.1", "parallel-webpack": "^2.6.0", "postcss-import": "^11.1.0", "postcss-loader": "^2.1.6", "postcss-url": "^7.3.2", "progress-bar-webpack-plugin": "^2.1.0", "sass": "1.57.1", "sass-loader": "7.3.1", "style-loader": "^0.23.0", "terser-webpack-plugin": "^4.2.3", "thread-loader": "^3.0.4", "uglifyjs-webpack-plugin": "^2.0.1", "url-loader": "^1.1.1", "vite": "^2.9.15", "vite-plugin-html": "^2.1.1", "vite-plugin-imp": "^2.0.11", "vite-plugin-pagedata": "^1.0.4", "vite-plugin-vue2": "^1.9.0", "vue-loader": "^15.4.2", "vue-template-compiler": "2.6.14", "webpack": "^4.46.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^3.11.3", "webpack-merge": "^4.1.4" }, "dependencies": { "axios": "0.20.0", "babel-polyfill": "6.26.0", "classnames": "2.3.1", "echarts": "5.2.2", "element-ui": "2.15.3", "enquire.js": "2.1.6", "event-emitter": "^0.3.5", "font-awesome": "4.7.0", "hi-taskcenter": "^1.0.37", "hi-ui": "^1.2.3560", "js-cookie": "3.0.1", "js-md5": "0.7.3", "js-pinyin": "0.1.9", "lodash": "4.17.11", "pinyin-pro": "^3.20.4", "qrcode": "^1.5.3", "screenfull": "6.0.0", "sortablejs": "1.14.0", "v-clipboard": "2.2.3", "vue": "2.6.14", "vue-draggable-resizable": "2.3.0", "vue-gemini-scrollbar": "2.0.1", "vue-jstree": "2.1.6", "vue-router": "3.3.4", "vuex": "3.6.2", "zhc-birt-cmps": "^3.0.49", "zhc-flowchart": "^1.0.20", "zhc-visualstudio": "^1.0.18" }, "preview": { "autoStopTime": 172800 } } { "name": "hi-vui-template", "version": "1.1.72", "description": "A hi-vui-template project", "author": "zhcTeam", "scripts": { "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache", "pm2:start": "pm2 -s start processes.json", "dev": "vite --host", "def": "vite --host", "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build1": "webpack --mode production --config build/webpack.prod.conf.js", "dll": "webpack --config build/webpack.dll.conf.js", "start": "webpack-dev-server --config build/webpack.dev.conf.js", "copyassets": "node build/copyBaseAssets.js", "build:debug": "node --inspect-brk build/copyBaseAssets.js && cross-env NODE_ENV=production node --inspect-brk build/webpack.prod.conf.js", "build-el-theme": "sass ./theme/element.scss ./theme/build/element-ui.css --no-source-map --style=compressed", "build-hivuiMain-theme": "sass ./theme/hivuiMain.scss ./theme/build/hivuiMain.css --no-source-map --style=compressed", "build-hiui-theme": "sass ./theme/hiui.scss ./theme/build/hiui.css --no-source-map --style=compressed", "build-theme": "npm run build-el-theme && npm run build-hivuiMain-theme && npm run build-hiui-theme" }, "devDependencies": { "@babel/core": "^7.1.2", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7", "@babel/plugin-proposal-optional-chaining": "^7.16.7", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/preset-env": "^7.1.0", "@vitejs/plugin-vue-jsx": "^1.3.3", "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "add-asset-html-webpack-plugin": "^3.2.0", "autoprefixer": "^9.1.5", "babel-loader": "^8.0.4", "babel-plugin-component": "^1.1.1", "babel-plugin-transform-vite-meta-env": "^1.0.3", "caniuse-lite": "^1.0.30001436", "chalk": "^3.0.0", "clean-webpack-plugin": "^0.1.19", "copy-webpack-plugin": "^4.5.3", "cross-env": "^7.0.3", "css-loader": "^1.0.0", "dotenv": "^10.0.0", "file-loader": "^2.0.0", "happypack": "^5.0.1", "html-webpack-plugin": "^4.5.2", "less": "3.0.4", "less-loader": "5.0.0", "mini-css-extract-plugin": "^1.6.2", "node-sass": "4.14.1", "optimize-css-assets-webpack-plugin": "^5.0.1", "parallel-webpack": "^2.6.0", "postcss-import": "^11.1.0", "postcss-loader": "^2.1.6", "postcss-url": "^7.3.2", "progress-bar-webpack-plugin": "^2.1.0", "sass": "1.57.1", "sass-loader": "7.3.1", "style-loader": "^0.23.0", "terser-webpack-plugin": "^4.2.3", "thread-loader": "^3.0.4", "uglifyjs-webpack-plugin": "^2.0.1", "url-loader": "^1.1.1", "vite": "^2.9.15", "vite-plugin-html": "^2.1.1", "vite-plugin-imp": "^2.0.11", "vite-plugin-pagedata": "^1.0.4", "vite-plugin-vue2": "^1.9.0", "vue-loader": "^15.4.2", "vue-template-compiler": "2.6.14", "webpack": "^4.46.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^3.11.3", "webpack-merge": "^4.1.4" }, "dependencies": { "axios": "0.20.0", "babel-polyfill": "6.26.0", "classnames": "2.3.1", "echarts": "5.2.2", "element-ui": "2.15.3", "enquire.js": "2.1.6", "event-emitter": "^0.3.5", "font-awesome": "4.7.0", "hi-taskcenter": "^1.0.37", "hi-ui": "^1.2.3560", "js-cookie": "3.0.1", "js-md5": "0.7.3", "js-pinyin": "0.1.9", "lodash": "4.17.11", "pinyin-pro": "^3.20.4", "qrcode": "^1.5.3", "screenfull": "6.0.0", "sortablejs": "1.14.0", "v-clipboard": "2.2.3", "vue": "2.6.14", "vue-draggable-resizable": "2.3.0", "vue-gemini-scrollbar": "2.0.1", "vue-jstree": "2.1.6", "vue-router": "3.3.4", "vuex": "3.6.2", "zhc-birt-cmps": "^3.0.49", "zhc-flowchart": "^1.0.20", "zhc-visualstudio": "^1.0.17" }, "preview": { "autoStopTime": 172800 } }

Ignore Space Show notes View

package.json

{
  "name": "hi-vui-template",
  "version": "1.1.72",
  "description": "A hi-vui-template project",
  "author": "zhcTeam",
  "scripts": {
    "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache",
    "pm2:start": "pm2 -s start processes.json",
    "dev": "vite --host",
    "def": "vite --host",
    "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build1": "webpack --mode production --config build/webpack.prod.conf.js",
    "dll": "webpack --config build/webpack.dll.conf.js",
    "start": "webpack-dev-server --config build/webpack.dev.conf.js",
    "copyassets": "node build/copyBaseAssets.js",
    "build:debug": "node --inspect-brk build/copyBaseAssets.js && cross-env NODE_ENV=production node --inspect-brk build/webpack.prod.conf.js",
    "build-el-theme": "sass ./theme/element.scss ./theme/build/element-ui.css --no-source-map --style=compressed",
    "build-hivuiMain-theme": "sass ./theme/hivuiMain.scss ./theme/build/hivuiMain.css --no-source-map --style=compressed",
    "build-hiui-theme": "sass ./theme/hiui.scss ./theme/build/hiui.css --no-source-map --style=compressed",
    "build-theme": "npm run build-el-theme && npm run build-hivuiMain-theme && npm run build-hiui-theme"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@vitejs/plugin-vue-jsx": "^1.3.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "add-asset-html-webpack-plugin": "^3.2.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.4",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-transform-vite-meta-env": "^1.0.3",
    "caniuse-lite": "^1.0.30001436",
    "chalk": "^3.0.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.3",
    "cross-env": "^7.0.3",
    "css-loader": "^1.0.0",
    "dotenv": "^10.0.0",
    "file-loader": "^2.0.0",
    "happypack": "^5.0.1",
    "html-webpack-plugin": "^4.5.2",
    "less": "3.0.4",
    "less-loader": "5.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "node-sass": "4.14.1",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "parallel-webpack": "^2.6.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.6",
    "postcss-url": "^7.3.2",
    "progress-bar-webpack-plugin": "^2.1.0",
    "sass": "1.57.1",
    "sass-loader": "7.3.1",
    "style-loader": "^0.23.0",
    "terser-webpack-plugin": "^4.2.3",
    "thread-loader": "^3.0.4",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.1",
    "vite": "^2.9.15",
    "vite-plugin-html": "^2.1.1",
    "vite-plugin-imp": "^2.0.11",
    "vite-plugin-pagedata": "^1.0.4",
    "vite-plugin-vue2": "^1.9.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "2.6.14",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^3.11.3",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "axios": "0.20.0",
    "babel-polyfill": "6.26.0",
    "classnames": "2.3.1",
    "echarts": "5.2.2",
    "element-ui": "2.15.3",
    "enquire.js": "2.1.6",
    "event-emitter": "^0.3.5",
    "font-awesome": "4.7.0",
    "hi-taskcenter": "^1.0.37",
    "hi-ui": "^1.2.3560",
    "js-cookie": "3.0.1",
    "js-md5": "0.7.3",
    "js-pinyin": "0.1.9",
    "lodash": "4.17.11",
    "pinyin-pro": "^3.20.4",
    "qrcode": "^1.5.3",
    "screenfull": "6.0.0",
    "sortablejs": "1.14.0",
    "v-clipboard": "2.2.3",
    "vue": "2.6.14",
    "vue-draggable-resizable": "2.3.0",
    "vue-gemini-scrollbar": "2.0.1",
    "vue-jstree": "2.1.6",
    "vue-router": "3.3.4",
    "vuex": "3.6.2",
    "zhc-birt-cmps": "^3.0.49",
    "zhc-flowchart": "^1.0.20",
    "zhc-visualstudio": "^1.0.18"
  },
  "preview": {
    "autoStopTime": 172800
  }
}

{
  "name": "hi-vui-template",
  "version": "1.1.72",
  "description": "A hi-vui-template project",
  "author": "zhcTeam",
  "scripts": {
    "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache",
    "pm2:start": "pm2 -s start processes.json",
    "dev": "vite --host",
    "def": "vite --host",
    "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build1": "webpack --mode production --config build/webpack.prod.conf.js",
    "dll": "webpack --config build/webpack.dll.conf.js",
    "start": "webpack-dev-server --config build/webpack.dev.conf.js",
    "copyassets": "node build/copyBaseAssets.js",
    "build:debug": "node --inspect-brk build/copyBaseAssets.js && cross-env NODE_ENV=production node --inspect-brk build/webpack.prod.conf.js",
    "build-el-theme": "sass ./theme/element.scss ./theme/build/element-ui.css --no-source-map --style=compressed",
    "build-hivuiMain-theme": "sass ./theme/hivuiMain.scss ./theme/build/hivuiMain.css --no-source-map --style=compressed",
    "build-hiui-theme": "sass ./theme/hiui.scss ./theme/build/hiui.css --no-source-map --style=compressed",
    "build-theme": "npm run build-el-theme && npm run build-hivuiMain-theme && npm run build-hiui-theme"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@vitejs/plugin-vue-jsx": "^1.3.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "add-asset-html-webpack-plugin": "^3.2.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.4",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-transform-vite-meta-env": "^1.0.3",
    "caniuse-lite": "^1.0.30001436",
    "chalk": "^3.0.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.3",
    "cross-env": "^7.0.3",
    "css-loader": "^1.0.0",
    "dotenv": "^10.0.0",
    "file-loader": "^2.0.0",
    "happypack": "^5.0.1",
    "html-webpack-plugin": "^4.5.2",
    "less": "3.0.4",
    "less-loader": "5.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "node-sass": "4.14.1",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "parallel-webpack": "^2.6.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.6",
    "postcss-url": "^7.3.2",
    "progress-bar-webpack-plugin": "^2.1.0",
    "sass": "1.57.1",
    "sass-loader": "7.3.1",
    "style-loader": "^0.23.0",
    "terser-webpack-plugin": "^4.2.3",
    "thread-loader": "^3.0.4",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.1",
    "vite": "^2.9.15",
    "vite-plugin-html": "^2.1.1",
    "vite-plugin-imp": "^2.0.11",
    "vite-plugin-pagedata": "^1.0.4",
    "vite-plugin-vue2": "^1.9.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "2.6.14",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^3.11.3",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "axios": "0.20.0",
    "babel-polyfill": "6.26.0",
    "classnames": "2.3.1",
    "echarts": "5.2.2",
    "element-ui": "2.15.3",
    "enquire.js": "2.1.6",
    "event-emitter": "^0.3.5",
    "font-awesome": "4.7.0",
    "hi-taskcenter": "^1.0.37",
    "hi-ui": "^1.2.3560",
    "js-cookie": "3.0.1",
    "js-md5": "0.7.3",
    "js-pinyin": "0.1.9",
    "lodash": "4.17.11",
    "pinyin-pro": "^3.20.4",
    "qrcode": "^1.5.3",
    "screenfull": "6.0.0",
    "sortablejs": "1.14.0",
    "v-clipboard": "2.2.3",
    "vue": "2.6.14",
    "vue-draggable-resizable": "2.3.0",
    "vue-gemini-scrollbar": "2.0.1",
    "vue-jstree": "2.1.6",
    "vue-router": "3.3.4",
    "vuex": "3.6.2",
    "zhc-birt-cmps": "^3.0.49",
    "zhc-flowchart": "^1.0.20",
    "zhc-visualstudio": "^1.0.17"
  },
  "preview": {
    "autoStopTime": 172800
  }
}

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/demo.css 0 → 100644
/* 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; }

Ignore Space Show notes View

project/hivuiLogin/assets/iconfonts/demo.css 0 → 100644

/* 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;
}

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/demo_index.html 0 → 100644
<!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=1417123" 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"></span> <div class="name">新标签页</div> <div class="code-name">&#xe8ee;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">职位岗位</div> <div class="code-name">&#xe714;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">员工管理</div> <div class="code-name">&#xe644;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">在岗</div> <div class="code-name">&#xe6d3;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">职级</div> <div class="code-name">&#xe6d4;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">用户编号</div> <div class="code-name">&#xe6d5;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">岗级</div> <div class="code-name">&#xe6d6;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">修改用户信息</div> <div class="code-name">&#xe6d7;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">修改密码</div> <div class="code-name">&#xe6d8;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">机构</div> <div class="code-name">&#xe6d9;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">xlsx</div> <div class="code-name">&#xe605;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">工作流程图</div> <div class="code-name">&#xe602;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">功能</div> <div class="code-name">&#xe604;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">组织机构</div> <div class="code-name">&#xe63c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">根节点</div> <div class="code-name">&#xe810;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">部门</div> <div class="code-name">&#xe62b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">岗位</div> <div class="code-name">&#xe65c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">全屏</div> <div class="code-name">&#xeb11;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">权限</div> <div class="code-name">&#xe63f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">关闭其它</div> <div class="code-name">&#xe631;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">关闭</div> <div class="code-name">&#xe629;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">关闭所有</div> <div class="code-name">&#xe60f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">刷新</div> <div class="code-name">&#xe619;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">tree</div> <div class="code-name">&#xe6e8;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">退出</div> <div class="code-name">&#xe627;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">sort16</div> <div class="code-name">&#xe630;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">sort</div> <div class="code-name">&#xe93c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">-sort-2</div> <div class="code-name">&#xe73d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">edit</div> <div class="code-name">&#xe62f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrows down</div> <div class="code-name">&#xe623;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrows down</div> <div class="code-name">&#xe6fc;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">check-box-empty</div> <div class="code-name">&#xe625;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">check-box</div> <div class="code-name">&#xe626;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">add</div> <div class="code-name">&#xe6ee;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">delete</div> <div class="code-name">&#xe698;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">info</div> <div class="code-name">&#xe60a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">error</div> <div class="code-name">&#xe620;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">warn</div> <div class="code-name">&#xe601;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">close</div> <div class="code-name">&#xe607;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">set</div> <div class="code-name">&#xe61e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">设置</div> <div class="code-name">&#xe61d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">图表</div> <div class="code-name">&#xe632;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">cc-arrow-right-circle</div> <div class="code-name">&#xe6f8;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrow</div> <div class="code-name">&#xe6f6;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrow</div> <div class="code-name">&#xe6f7;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">cc-arrow-right-circle</div> <div class="code-name">&#xe6fa;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">cc-arrow-right-circle</div> <div class="code-name">&#xe6fb;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">search</div> <div class="code-name">&#xe621;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">clock</div> <div class="code-name">&#xe600;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrow</div> <div class="code-name">&#xe636;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">table</div> <div class="code-name">&#xe699;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">cc-arrow-right-circle</div> <div class="code-name">&#xe60d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">help</div> <div class="code-name">&#xe65d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">yxx_mark</div> <div class="code-name">&#xe63d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">钱</div> <div class="code-name">&#xe640;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">报表2</div> <div class="code-name">&#xe6d2;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">待办</div> <div class="code-name">&#xe64a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">切换</div> <div class="code-name">&#xe60e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">消息</div> <div class="code-name">&#xe6eb;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">time</div> <div class="code-name">&#xe64d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">画板主题</div> <div class="code-name">&#xe664;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">邮箱</div> <div class="code-name">&#xe6af;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">email</div> <div class="code-name">&#xe628;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">会议管理</div> <div class="code-name">&#xe612;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">今日收入</div> <div class="code-name">&#xe645;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">user</div> <div class="code-name">&#xe606;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">add</div> <div class="code-name">&#xe654;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">sun</div> <div class="code-name">&#xe6f5;</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=1697007139828') format('woff2'), url('iconfont.woff?t=1697007139828') format('woff'), url('iconfont.ttf?t=1697007139828') 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" ><span class="iconfont">&#x33;</span> </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-xinbiaoqianye"></span> <div class="name"> 新标签页 </div> <div class="code-name">.icon-xinbiaoqianye </div> </li> <li class="dib"> <span class="icon iconfont icon-drxx12"></span> <div class="name"> 职位岗位 </div> <div class="code-name">.icon-drxx12 </div> </li> <li class="dib"> <span class="icon iconfont icon-yuangongguanli"></span> <div class="name"> 员工管理 </div> <div class="code-name">.icon-yuangongguanli </div> </li> <li class="dib"> <span class="icon iconfont icon-zaigang"></span> <div class="name"> 在岗 </div> <div class="code-name">.icon-zaigang </div> </li> <li class="dib"> <span class="icon iconfont icon-zhiji"></span> <div class="name"> 职级 </div> <div class="code-name">.icon-zhiji </div> </li> <li class="dib"> <span class="icon iconfont icon-yonghubianhao"></span> <div class="name"> 用户编号 </div> <div class="code-name">.icon-yonghubianhao </div> </li> <li class="dib"> <span class="icon iconfont icon-gangji"></span> <div class="name"> 岗级 </div> <div class="code-name">.icon-gangji </div> </li> <li class="dib"> <span class="icon iconfont icon-xiugaiyonghuxinxi"></span> <div class="name"> 修改用户信息 </div> <div class="code-name">.icon-xiugaiyonghuxinxi </div> </li> <li class="dib"> <span class="icon iconfont icon-xiugaimima"></span> <div class="name"> 修改密码 </div> <div class="code-name">.icon-xiugaimima </div> </li> <li class="dib"> <span class="icon iconfont icon-jigou"></span> <div class="name"> 机构 </div> <div class="code-name">.icon-jigou </div> </li> <li class="dib"> <span class="icon iconfont icon-xlsx"></span> <div class="name"> xlsx </div> <div class="code-name">.icon-xlsx </div> </li> <li class="dib"> <span class="icon iconfont icon-flow"></span> <div class="name"> 工作流程图 </div> <div class="code-name">.icon-flow </div> </li> <li class="dib"> <span class="icon iconfont icon-func"></span> <div class="name"> 功能 </div> <div class="code-name">.icon-func </div> </li> <li class="dib"> <span class="icon iconfont icon-org"></span> <div class="name"> 组织机构 </div> <div class="code-name">.icon-org </div> </li> <li class="dib"> <span class="icon iconfont icon-root"></span> <div class="name"> 根节点 </div> <div class="code-name">.icon-root </div> </li> <li class="dib"> <span class="icon iconfont icon-dpt"></span> <div class="name"> 部门 </div> <div class="code-name">.icon-dpt </div> </li> <li class="dib"> <span class="icon iconfont icon-ptm"></span> <div class="name"> 岗位 </div> <div class="code-name">.icon-ptm </div> </li> <li class="dib"> <span class="icon iconfont icon-quanping"></span> <div class="name"> 全屏 </div> <div class="code-name">.icon-quanping </div> </li> <li class="dib"> <span class="icon iconfont icon-quanxian"></span> <div class="name"> 权限 </div> <div class="code-name">.icon-quanxian </div> </li> <li class="dib"> <span class="icon iconfont icon-closeOther"></span> <div class="name"> 关闭其它 </div> <div class="code-name">.icon-closeOther </div> </li> <li class="dib"> <span class="icon iconfont icon-close-circle"></span> <div class="name"> 关闭 </div> <div class="code-name">.icon-close-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-closeAll"></span> <div class="name"> 关闭所有 </div> <div class="code-name">.icon-closeAll </div> </li> <li class="dib"> <span class="icon iconfont icon-refresh"></span> <div class="name"> 刷新 </div> <div class="code-name">.icon-refresh </div> </li> <li class="dib"> <span class="icon iconfont icon-tree"></span> <div class="name"> tree </div> <div class="code-name">.icon-tree </div> </li> <li class="dib"> <span class="icon iconfont icon-tuichu"></span> <div class="name"> 退出 </div> <div class="code-name">.icon-tuichu </div> </li> <li class="dib"> <span class="icon iconfont icon-moveSort2"></span> <div class="name"> sort16 </div> <div class="code-name">.icon-moveSort2 </div> </li> <li class="dib"> <span class="icon iconfont icon-moveSort1"></span> <div class="name"> sort </div> <div class="code-name">.icon-moveSort1 </div> </li> <li class="dib"> <span class="icon iconfont icon-moveSort"></span> <div class="name"> -sort-2 </div> <div class="code-name">.icon-moveSort </div> </li> <li class="dib"> <span class="icon iconfont icon-edit"></span> <div class="name"> edit </div> <div class="code-name">.icon-edit </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-leftMore-circle"></span> <div class="name"> arrows down </div> <div class="code-name">.icon-arrow-leftMore-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-rightMore-circle"></span> <div class="name"> arrows down </div> <div class="code-name">.icon-arrow-rightMore-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-checkbox-empty"></span> <div class="name"> check-box-empty </div> <div class="code-name">.icon-checkbox-empty </div> </li> <li class="dib"> <span class="icon iconfont icon-checkbox"></span> <div class="name"> check-box </div> <div class="code-name">.icon-checkbox </div> </li> <li class="dib"> <span class="icon iconfont icon-add"></span> <div class="name"> add </div> <div class="code-name">.icon-add </div> </li> <li class="dib"> <span class="icon iconfont icon-delete"></span> <div class="name"> delete </div> <div class="code-name">.icon-delete </div> </li> <li class="dib"> <span class="icon iconfont icon-info"></span> <div class="name"> info </div> <div class="code-name">.icon-info </div> </li> <li class="dib"> <span class="icon iconfont icon-error"></span> <div class="name"> error </div> <div class="code-name">.icon-error </div> </li> <li class="dib"> <span class="icon iconfont icon-warn"></span> <div class="name"> warn </div> <div class="code-name">.icon-warn </div> </li> <li class="dib"> <span class="icon iconfont icon-close"></span> <div class="name"> close </div> <div class="code-name">.icon-close </div> </li> <li class="dib"> <span class="icon iconfont icon-set-fill"></span> <div class="name"> set </div> <div class="code-name">.icon-set-fill </div> </li> <li class="dib"> <span class="icon iconfont icon-set"></span> <div class="name"> 设置 </div> <div class="code-name">.icon-set </div> </li> <li class="dib"> <span class="icon iconfont icon-chart"></span> <div class="name"> 图表 </div> <div class="code-name">.icon-chart </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-down-circle"></span> <div class="name"> cc-arrow-right-circle </div> <div class="code-name">.icon-arrow-down-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-down"></span> <div class="name"> arrow </div> <div class="code-name">.icon-arrow-down </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-left"></span> <div class="name"> arrow </div> <div class="code-name">.icon-arrow-left </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-up-circle"></span> <div class="name"> cc-arrow-right-circle </div> <div class="code-name">.icon-arrow-up-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-left-circle"></span> <div class="name"> cc-arrow-right-circle </div> <div class="code-name">.icon-arrow-left-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-search"></span> <div class="name"> search </div> <div class="code-name">.icon-search </div> </li> <li class="dib"> <span class="icon iconfont icon-clock"></span> <div class="name"> clock </div> <div class="code-name">.icon-clock </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-right"></span> <div class="name"> arrow </div> <div class="code-name">.icon-arrow-right </div> </li> <li class="dib"> <span class="icon iconfont icon-table"></span> <div class="name"> table </div> <div class="code-name">.icon-table </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-right-circle"></span> <div class="name"> cc-arrow-right-circle </div> <div class="code-name">.icon-arrow-right-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-help"></span> <div class="name"> help </div> <div class="code-name">.icon-help </div> </li> <li class="dib"> <span class="icon iconfont icon-mark"></span> <div class="name"> yxx_mark </div> <div class="code-name">.icon-mark </div> </li> <li class="dib"> <span class="icon iconfont icon-money"></span> <div class="name"> 钱 </div> <div class="code-name">.icon-money </div> </li> <li class="dib"> <span class="icon iconfont icon-analyse"></span> <div class="name"> 报表2 </div> <div class="code-name">.icon-analyse </div> </li> <li class="dib"> <span class="icon iconfont icon-dealt"></span> <div class="name"> 待办 </div> <div class="code-name">.icon-dealt </div> </li> <li class="dib"> <span class="icon iconfont icon-change"></span> <div class="name"> 切换 </div> <div class="code-name">.icon-change </div> </li> <li class="dib"> <span class="icon iconfont icon-bell"></span> <div class="name"> 消息 </div> <div class="code-name">.icon-bell </div> </li> <li class="dib"> <span class="icon iconfont icon-time"></span> <div class="name"> time </div> <div class="code-name">.icon-time </div> </li> <li class="dib"> <span class="icon iconfont icon-skin"></span> <div class="name"> 画板主题 </div> <div class="code-name">.icon-skin </div> </li> <li class="dib"> <span class="icon iconfont icon-mail"></span> <div class="name"> 邮箱 </div> <div class="code-name">.icon-mail </div> </li> <li class="dib"> <span class="icon iconfont icon-email"></span> <div class="name"> email </div> <div class="code-name">.icon-email </div> </li> <li class="dib"> <span class="icon iconfont icon-meeting"></span> <div class="name"> 会议管理 </div> <div class="code-name">.icon-meeting </div> </li> <li class="dib"> <span class="icon iconfont icon-today"></span> <div class="name"> 今日收入 </div> <div class="code-name">.icon-today </div> </li> <li class="dib"> <span class="icon iconfont icon-user"></span> <div class="name"> user </div> <div class="code-name">.icon-user </div> </li> <li class="dib"> <span class="icon iconfont icon-listadd"></span> <div class="name"> add </div> <div class="code-name">.icon-listadd </div> </li> <li class="dib"> <span class="icon iconfont icon-sun"></span> <div class="name"> sun </div> <div class="code-name">.icon-sun </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"><link rel="stylesheet" href="./iconfont.css"> </code></pre> <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> <pre><code class="language-html"><span class="iconfont icon-xxx"></span> </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-xinbiaoqianye"></use> </svg> <div class="name">新标签页</div> <div class="code-name">#icon-xinbiaoqianye</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-drxx12"></use> </svg> <div class="name">职位岗位</div> <div class="code-name">#icon-drxx12</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-yuangongguanli"></use> </svg> <div class="name">员工管理</div> <div class="code-name">#icon-yuangongguanli</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-zaigang"></use> </svg> <div class="name">在岗</div> <div class="code-name">#icon-zaigang</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-zhiji"></use> </svg> <div class="name">职级</div> <div class="code-name">#icon-zhiji</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-yonghubianhao"></use> </svg> <div class="name">用户编号</div> <div class="code-name">#icon-yonghubianhao</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-gangji"></use> </svg> <div class="name">岗级</div> <div class="code-name">#icon-gangji</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-xiugaiyonghuxinxi"></use> </svg> <div class="name">修改用户信息</div> <div class="code-name">#icon-xiugaiyonghuxinxi</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-xiugaimima"></use> </svg> <div class="name">修改密码</div> <div class="code-name">#icon-xiugaimima</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-jigou"></use> </svg> <div class="name">机构</div> <div class="code-name">#icon-jigou</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-xlsx"></use> </svg> <div class="name">xlsx</div> <div class="code-name">#icon-xlsx</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-flow"></use> </svg> <div class="name">工作流程图</div> <div class="code-name">#icon-flow</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-func"></use> </svg> <div class="name">功能</div> <div class="code-name">#icon-func</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-org"></use> </svg> <div class="name">组织机构</div> <div class="code-name">#icon-org</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-root"></use> </svg> <div class="name">根节点</div> <div class="code-name">#icon-root</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-dpt"></use> </svg> <div class="name">部门</div> <div class="code-name">#icon-dpt</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-ptm"></use> </svg> <div class="name">岗位</div> <div class="code-name">#icon-ptm</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-quanping"></use> </svg> <div class="name">全屏</div> <div class="code-name">#icon-quanping</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-quanxian"></use> </svg> <div class="name">权限</div> <div class="code-name">#icon-quanxian</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-closeOther"></use> </svg> <div class="name">关闭其它</div> <div class="code-name">#icon-closeOther</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-close-circle"></use> </svg> <div class="name">关闭</div> <div class="code-name">#icon-close-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-closeAll"></use> </svg> <div class="name">关闭所有</div> <div class="code-name">#icon-closeAll</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-refresh"></use> </svg> <div class="name">刷新</div> <div class="code-name">#icon-refresh</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-tree"></use> </svg> <div class="name">tree</div> <div class="code-name">#icon-tree</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-tuichu"></use> </svg> <div class="name">退出</div> <div class="code-name">#icon-tuichu</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-moveSort2"></use> </svg> <div class="name">sort16</div> <div class="code-name">#icon-moveSort2</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-moveSort1"></use> </svg> <div class="name">sort</div> <div class="code-name">#icon-moveSort1</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-moveSort"></use> </svg> <div class="name">-sort-2</div> <div class="code-name">#icon-moveSort</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-edit"></use> </svg> <div class="name">edit</div> <div class="code-name">#icon-edit</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-leftMore-circle"></use> </svg> <div class="name">arrows down</div> <div class="code-name">#icon-arrow-leftMore-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-rightMore-circle"></use> </svg> <div class="name">arrows down</div> <div class="code-name">#icon-arrow-rightMore-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-checkbox-empty"></use> </svg> <div class="name">check-box-empty</div> <div class="code-name">#icon-checkbox-empty</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-checkbox"></use> </svg> <div class="name">check-box</div> <div class="code-name">#icon-checkbox</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-add"></use> </svg> <div class="name">add</div> <div class="code-name">#icon-add</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-delete"></use> </svg> <div class="name">delete</div> <div class="code-name">#icon-delete</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-info"></use> </svg> <div class="name">info</div> <div class="code-name">#icon-info</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-error"></use> </svg> <div class="name">error</div> <div class="code-name">#icon-error</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-warn"></use> </svg> <div class="name">warn</div> <div class="code-name">#icon-warn</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-close"></use> </svg> <div class="name">close</div> <div class="code-name">#icon-close</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-set-fill"></use> </svg> <div class="name">set</div> <div class="code-name">#icon-set-fill</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-set"></use> </svg> <div class="name">设置</div> <div class="code-name">#icon-set</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-chart"></use> </svg> <div class="name">图表</div> <div class="code-name">#icon-chart</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-down-circle"></use> </svg> <div class="name">cc-arrow-right-circle</div> <div class="code-name">#icon-arrow-down-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-down"></use> </svg> <div class="name">arrow</div> <div class="code-name">#icon-arrow-down</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-left"></use> </svg> <div class="name">arrow</div> <div class="code-name">#icon-arrow-left</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-up-circle"></use> </svg> <div class="name">cc-arrow-right-circle</div> <div class="code-name">#icon-arrow-up-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-left-circle"></use> </svg> <div class="name">cc-arrow-right-circle</div> <div class="code-name">#icon-arrow-left-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-search"></use> </svg> <div class="name">search</div> <div class="code-name">#icon-search</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-clock"></use> </svg> <div class="name">clock</div> <div class="code-name">#icon-clock</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-right"></use> </svg> <div class="name">arrow</div> <div class="code-name">#icon-arrow-right</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-table"></use> </svg> <div class="name">table</div> <div class="code-name">#icon-table</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-right-circle"></use> </svg> <div class="name">cc-arrow-right-circle</div> <div class="code-name">#icon-arrow-right-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-help"></use> </svg> <div class="name">help</div> <div class="code-name">#icon-help</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-mark"></use> </svg> <div class="name">yxx_mark</div> <div class="code-name">#icon-mark</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-money"></use> </svg> <div class="name">钱</div> <div class="code-name">#icon-money</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-analyse"></use> </svg> <div class="name">报表2</div> <div class="code-name">#icon-analyse</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-dealt"></use> </svg> <div class="name">待办</div> <div class="code-name">#icon-dealt</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-change"></use> </svg> <div class="name">切换</div> <div class="code-name">#icon-change</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-bell"></use> </svg> <div class="name">消息</div> <div class="code-name">#icon-bell</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-time"></use> </svg> <div class="name">time</div> <div class="code-name">#icon-time</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-skin"></use> </svg> <div class="name">画板主题</div> <div class="code-name">#icon-skin</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-mail"></use> </svg> <div class="name">邮箱</div> <div class="code-name">#icon-mail</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-email"></use> </svg> <div class="name">email</div> <div class="code-name">#icon-email</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-meeting"></use> </svg> <div class="name">会议管理</div> <div class="code-name">#icon-meeting</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-today"></use> </svg> <div class="name">今日收入</div> <div class="code-name">#icon-today</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-user"></use> </svg> <div class="name">user</div> <div class="code-name">#icon-user</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-listadd"></use> </svg> <div class="name">add</div> <div class="code-name">#icon-listadd</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-sun"></use> </svg> <div class="name">sun</div> <div class="code-name">#icon-sun</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"><script src="./iconfont.js"></script> </code></pre> <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> <pre><code class="language-html"><style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> </code></pre> <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> <pre><code class="language-html"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg> </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>

Ignore Space Show notes View

project/hivuiLogin/assets/iconfonts/demo_index.html 0 → 100644

<!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>
  
  <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=1417123" 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">&#xe8ee;</span>
                <div class="name">新标签页</div>
                <div class="code-name">&amp;#xe8ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe714;</span>
                <div class="name">职位岗位</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">员工管理</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d3;</span>
                <div class="name">在岗</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d4;</span>
                <div class="name">职级</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d5;</span>
                <div class="name">用户编号</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d6;</span>
                <div class="name">岗级</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d7;</span>
                <div class="name">修改用户信息</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d8;</span>
                <div class="name">修改密码</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d9;</span>
                <div class="name">机构</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">xlsx</div>
                <div class="code-name">&amp;#xe605;</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">&#xe604;</span>
                <div class="name">功能</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">组织机构</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe810;</span>
                <div class="name">根节点</div>
                <div class="code-name">&amp;#xe810;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">部门</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">岗位</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb11;</span>
                <div class="name">全屏</div>
                <div class="code-name">&amp;#xeb11;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">权限</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">关闭其它</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">关  闭</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">关闭所有</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e8;</span>
                <div class="name">tree</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">退出</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">sort16</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe93c;</span>
                <div class="name">sort</div>
                <div class="code-name">&amp;#xe93c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73d;</span>
                <div class="name">-sort-2</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">arrows down</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fc;</span>
                <div class="name">arrows down</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">check-box-empty</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">check-box</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ee;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">info</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">error</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">warn</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">set</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe61d;</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">&#xe6f8;</span>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f6;</span>
                <div class="name">arrow</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">arrow</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fa;</span>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fb;</span>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">clock</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">arrow</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">table</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">help</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">yxx_mark</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">钱</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
                <div class="name">报表2</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">待办</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">切换</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">画板主题</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">邮箱</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">email</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">会议管理</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">今日收入</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f5;</span>
                <div class="name">sun</div>
                <div class="code-name">&amp;#xe6f5;</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=1697007139828') format('woff2'),
       url('iconfont.woff?t=1697007139828') format('woff'),
       url('iconfont.ttf?t=1697007139828') 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-xinbiaoqianye"></span>
            <div class="name">
              新标签页
            </div>
            <div class="code-name">.icon-xinbiaoqianye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-drxx12"></span>
            <div class="name">
              职位岗位
            </div>
            <div class="code-name">.icon-drxx12
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuangongguanli"></span>
            <div class="name">
              员工管理
            </div>
            <div class="code-name">.icon-yuangongguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zaigang"></span>
            <div class="name">
              在岗
            </div>
            <div class="code-name">.icon-zaigang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhiji"></span>
            <div class="name">
              职级
            </div>
            <div class="code-name">.icon-zhiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghubianhao"></span>
            <div class="name">
              用户编号
            </div>
            <div class="code-name">.icon-yonghubianhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gangji"></span>
            <div class="name">
              岗级
            </div>
            <div class="code-name">.icon-gangji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugaiyonghuxinxi"></span>
            <div class="name">
              修改用户信息
            </div>
            <div class="code-name">.icon-xiugaiyonghuxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugaimima"></span>
            <div class="name">
              修改密码
            </div>
            <div class="code-name">.icon-xiugaimima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jigou"></span>
            <div class="name">
              机构
            </div>
            <div class="code-name">.icon-jigou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xlsx"></span>
            <div class="name">
              xlsx
            </div>
            <div class="code-name">.icon-xlsx
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-flow"></span>
            <div class="name">
              工作流程图
            </div>
            <div class="code-name">.icon-flow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-func"></span>
            <div class="name">
              功能
            </div>
            <div class="code-name">.icon-func
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-org"></span>
            <div class="name">
              组织机构
            </div>
            <div class="code-name">.icon-org
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-root"></span>
            <div class="name">
              根节点
            </div>
            <div class="code-name">.icon-root
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dpt"></span>
            <div class="name">
              部门
            </div>
            <div class="code-name">.icon-dpt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ptm"></span>
            <div class="name">
              岗位
            </div>
            <div class="code-name">.icon-ptm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanping"></span>
            <div class="name">
              全屏
            </div>
            <div class="code-name">.icon-quanping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanxian"></span>
            <div class="name">
              权限
            </div>
            <div class="code-name">.icon-quanxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-closeOther"></span>
            <div class="name">
              关闭其它
            </div>
            <div class="code-name">.icon-closeOther
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close-circle"></span>
            <div class="name">
              关  闭
            </div>
            <div class="code-name">.icon-close-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-closeAll"></span>
            <div class="name">
              关闭所有
            </div>
            <div class="code-name">.icon-closeAll
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refresh"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tree"></span>
            <div class="name">
              tree
            </div>
            <div class="code-name">.icon-tree
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuichu"></span>
            <div class="name">
              退出
            </div>
            <div class="code-name">.icon-tuichu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moveSort2"></span>
            <div class="name">
              sort16
            </div>
            <div class="code-name">.icon-moveSort2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moveSort1"></span>
            <div class="name">
              sort
            </div>
            <div class="code-name">.icon-moveSort1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moveSort"></span>
            <div class="name">
              -sort-2
            </div>
            <div class="code-name">.icon-moveSort
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-leftMore-circle"></span>
            <div class="name">
              arrows down
            </div>
            <div class="code-name">.icon-arrow-leftMore-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-rightMore-circle"></span>
            <div class="name">
              arrows down
            </div>
            <div class="code-name">.icon-arrow-rightMore-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-checkbox-empty"></span>
            <div class="name">
              check-box-empty
            </div>
            <div class="code-name">.icon-checkbox-empty
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-checkbox"></span>
            <div class="name">
              check-box
            </div>
            <div class="code-name">.icon-checkbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-info"></span>
            <div class="name">
              info
            </div>
            <div class="code-name">.icon-info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-error"></span>
            <div class="name">
              error
            </div>
            <div class="code-name">.icon-error
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-warn"></span>
            <div class="name">
              warn
            </div>
            <div class="code-name">.icon-warn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-set-fill"></span>
            <div class="name">
              set
            </div>
            <div class="code-name">.icon-set-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-set"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-set
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chart"></span>
            <div class="name">
              图表
            </div>
            <div class="code-name">.icon-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-down-circle"></span>
            <div class="name">
              cc-arrow-right-circle
            </div>
            <div class="code-name">.icon-arrow-down-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-down"></span>
            <div class="name">
              arrow
            </div>
            <div class="code-name">.icon-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-left"></span>
            <div class="name">
              arrow
            </div>
            <div class="code-name">.icon-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-up-circle"></span>
            <div class="name">
              cc-arrow-right-circle
            </div>
            <div class="code-name">.icon-arrow-up-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-left-circle"></span>
            <div class="name">
              cc-arrow-right-circle
            </div>
            <div class="code-name">.icon-arrow-left-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clock"></span>
            <div class="name">
              clock
            </div>
            <div class="code-name">.icon-clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-right"></span>
            <div class="name">
              arrow
            </div>
            <div class="code-name">.icon-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-table"></span>
            <div class="name">
              table
            </div>
            <div class="code-name">.icon-table
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-right-circle"></span>
            <div class="name">
              cc-arrow-right-circle
            </div>
            <div class="code-name">.icon-arrow-right-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-help"></span>
            <div class="name">
              help
            </div>
            <div class="code-name">.icon-help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mark"></span>
            <div class="name">
              yxx_mark
            </div>
            <div class="code-name">.icon-mark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-money"></span>
            <div class="name">
              钱
            </div>
            <div class="code-name">.icon-money
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-analyse"></span>
            <div class="name">
              报表2
            </div>
            <div class="code-name">.icon-analyse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dealt"></span>
            <div class="name">
              待办
            </div>
            <div class="code-name">.icon-dealt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-change"></span>
            <div class="name">
              切换
            </div>
            <div class="code-name">.icon-change
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bell"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-bell
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-time"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.icon-time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-skin"></span>
            <div class="name">
              画板主题
            </div>
            <div class="code-name">.icon-skin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mail"></span>
            <div class="name">
              邮箱
            </div>
            <div class="code-name">.icon-mail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-email"></span>
            <div class="name">
              email
            </div>
            <div class="code-name">.icon-email
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-meeting"></span>
            <div class="name">
              会议管理
            </div>
            <div class="code-name">.icon-meeting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-today"></span>
            <div class="name">
              今日收入
            </div>
            <div class="code-name">.icon-today
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.icon-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-listadd"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon-listadd
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sun"></span>
            <div class="name">
              sun
            </div>
            <div class="code-name">.icon-sun
            </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-xinbiaoqianye"></use>
                </svg>
                <div class="name">新标签页</div>
                <div class="code-name">#icon-xinbiaoqianye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-drxx12"></use>
                </svg>
                <div class="name">职位岗位</div>
                <div class="code-name">#icon-drxx12</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuangongguanli"></use>
                </svg>
                <div class="name">员工管理</div>
                <div class="code-name">#icon-yuangongguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zaigang"></use>
                </svg>
                <div class="name">在岗</div>
                <div class="code-name">#icon-zaigang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhiji"></use>
                </svg>
                <div class="name">职级</div>
                <div class="code-name">#icon-zhiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghubianhao"></use>
                </svg>
                <div class="name">用户编号</div>
                <div class="code-name">#icon-yonghubianhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gangji"></use>
                </svg>
                <div class="name">岗级</div>
                <div class="code-name">#icon-gangji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugaiyonghuxinxi"></use>
                </svg>
                <div class="name">修改用户信息</div>
                <div class="code-name">#icon-xiugaiyonghuxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugaimima"></use>
                </svg>
                <div class="name">修改密码</div>
                <div class="code-name">#icon-xiugaimima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jigou"></use>
                </svg>
                <div class="name">机构</div>
                <div class="code-name">#icon-jigou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xlsx"></use>
                </svg>
                <div class="name">xlsx</div>
                <div class="code-name">#icon-xlsx</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flow"></use>
                </svg>
                <div class="name">工作流程图</div>
                <div class="code-name">#icon-flow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-func"></use>
                </svg>
                <div class="name">功能</div>
                <div class="code-name">#icon-func</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-org"></use>
                </svg>
                <div class="name">组织机构</div>
                <div class="code-name">#icon-org</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-root"></use>
                </svg>
                <div class="name">根节点</div>
                <div class="code-name">#icon-root</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dpt"></use>
                </svg>
                <div class="name">部门</div>
                <div class="code-name">#icon-dpt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ptm"></use>
                </svg>
                <div class="name">岗位</div>
                <div class="code-name">#icon-ptm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanping"></use>
                </svg>
                <div class="name">全屏</div>
                <div class="code-name">#icon-quanping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanxian"></use>
                </svg>
                <div class="name">权限</div>
                <div class="code-name">#icon-quanxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-closeOther"></use>
                </svg>
                <div class="name">关闭其它</div>
                <div class="code-name">#icon-closeOther</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close-circle"></use>
                </svg>
                <div class="name">关  闭</div>
                <div class="code-name">#icon-close-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-closeAll"></use>
                </svg>
                <div class="name">关闭所有</div>
                <div class="code-name">#icon-closeAll</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tree"></use>
                </svg>
                <div class="name">tree</div>
                <div class="code-name">#icon-tree</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuichu"></use>
                </svg>
                <div class="name">退出</div>
                <div class="code-name">#icon-tuichu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moveSort2"></use>
                </svg>
                <div class="name">sort16</div>
                <div class="code-name">#icon-moveSort2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moveSort1"></use>
                </svg>
                <div class="name">sort</div>
                <div class="code-name">#icon-moveSort1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moveSort"></use>
                </svg>
                <div class="name">-sort-2</div>
                <div class="code-name">#icon-moveSort</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-leftMore-circle"></use>
                </svg>
                <div class="name">arrows down</div>
                <div class="code-name">#icon-arrow-leftMore-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-rightMore-circle"></use>
                </svg>
                <div class="name">arrows down</div>
                <div class="code-name">#icon-arrow-rightMore-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-empty"></use>
                </svg>
                <div class="name">check-box-empty</div>
                <div class="code-name">#icon-checkbox-empty</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox"></use>
                </svg>
                <div class="name">check-box</div>
                <div class="code-name">#icon-checkbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#icon-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info"></use>
                </svg>
                <div class="name">info</div>
                <div class="code-name">#icon-info</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-error"></use>
                </svg>
                <div class="name">error</div>
                <div class="code-name">#icon-error</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warn"></use>
                </svg>
                <div class="name">warn</div>
                <div class="code-name">#icon-warn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-set-fill"></use>
                </svg>
                <div class="name">set</div>
                <div class="code-name">#icon-set-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-set"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-set</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chart"></use>
                </svg>
                <div class="name">图表</div>
                <div class="code-name">#icon-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down-circle"></use>
                </svg>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">#icon-arrow-down-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down"></use>
                </svg>
                <div class="name">arrow</div>
                <div class="code-name">#icon-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left"></use>
                </svg>
                <div class="name">arrow</div>
                <div class="code-name">#icon-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up-circle"></use>
                </svg>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">#icon-arrow-up-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-circle"></use>
                </svg>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">#icon-arrow-left-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clock"></use>
                </svg>
                <div class="name">clock</div>
                <div class="code-name">#icon-clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right"></use>
                </svg>
                <div class="name">arrow</div>
                <div class="code-name">#icon-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-table"></use>
                </svg>
                <div class="name">table</div>
                <div class="code-name">#icon-table</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-circle"></use>
                </svg>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">#icon-arrow-right-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-help"></use>
                </svg>
                <div class="name">help</div>
                <div class="code-name">#icon-help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mark"></use>
                </svg>
                <div class="name">yxx_mark</div>
                <div class="code-name">#icon-mark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-money"></use>
                </svg>
                <div class="name">钱</div>
                <div class="code-name">#icon-money</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-analyse"></use>
                </svg>
                <div class="name">报表2</div>
                <div class="code-name">#icon-analyse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dealt"></use>
                </svg>
                <div class="name">待办</div>
                <div class="code-name">#icon-dealt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-change"></use>
                </svg>
                <div class="name">切换</div>
                <div class="code-name">#icon-change</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bell"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-bell</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-time"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#icon-time</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-skin"></use>
                </svg>
                <div class="name">画板主题</div>
                <div class="code-name">#icon-skin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail"></use>
                </svg>
                <div class="name">邮箱</div>
                <div class="code-name">#icon-mail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-email"></use>
                </svg>
                <div class="name">email</div>
                <div class="code-name">#icon-email</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-meeting"></use>
                </svg>
                <div class="name">会议管理</div>
                <div class="code-name">#icon-meeting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-today"></use>
                </svg>
                <div class="name">今日收入</div>
                <div class="code-name">#icon-today</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#icon-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-listadd"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#icon-listadd</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sun"></use>
                </svg>
                <div class="name">sun</div>
                <div class="code-name">#icon-sun</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>

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/expand/demo.css 0 → 100644
/* 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; }

Ignore Space Show notes View

project/hivuiLogin/assets/iconfonts/expand/demo.css 0 → 100644

.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 .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:hover {
  font-size: 100px;
}

.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>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;
}

-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-"]::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;
}

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/expand/demo_index.html 0 → 100644
<!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=5075494" 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"></span> <div class="name">scan</div> <div class="code-name">&#xe819;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">电脑</div> <div class="code-name">&#xe642;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">二维码</div> <div class="code-name">&#xe776;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">menu-uncheck@3x</div> <div class="code-name">&#xe687;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">Menu</div> <div class="code-name">&#xe6a2;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">language</div> <div class="code-name">&#xe60b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">layout</div> <div class="code-name">&#xe64e;</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=1776068143378') format('woff2'), url('iconfont.woff?t=1776068143378') format('woff'), url('iconfont.ttf?t=1776068143378') 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" ><span class="iconfont">&#x33;</span> </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-scan"></span> <div class="name"> scan </div> <div class="code-name">.icon-scan </div> </li> <li class="dib"> <span class="icon iconfont icon-diannao1"></span> <div class="name"> 电脑 </div> <div class="code-name">.icon-diannao1 </div> </li> <li class="dib"> <span class="icon iconfont icon-erweima1"></span> <div class="name"> 二维码 </div> <div class="code-name">.icon-erweima1 </div> </li> <li class="dib"> <span class="icon iconfont icon-menu-uncheckx"></span> <div class="name"> menu-uncheck@3x </div> <div class="code-name">.icon-menu-uncheckx </div> </li> <li class="dib"> <span class="icon iconfont icon-Menu"></span> <div class="name"> Menu </div> <div class="code-name">.icon-Menu </div> </li> <li class="dib"> <span class="icon iconfont icon-language"></span> <div class="name"> language </div> <div class="code-name">.icon-language </div> </li> <li class="dib"> <span class="icon iconfont icon-layout"></span> <div class="name"> layout </div> <div class="code-name">.icon-layout </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"><link rel="stylesheet" href="./iconfont.css"> </code></pre> <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> <pre><code class="language-html"><span class="iconfont icon-xxx"></span> </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-scan"></use> </svg> <div class="name">scan</div> <div class="code-name">#icon-scan</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-diannao1"></use> </svg> <div class="name">电脑</div> <div class="code-name">#icon-diannao1</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-erweima1"></use> </svg> <div class="name">二维码</div> <div class="code-name">#icon-erweima1</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-menu-uncheckx"></use> </svg> <div class="name">menu-uncheck@3x</div> <div class="code-name">#icon-menu-uncheckx</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-Menu"></use> </svg> <div class="name">Menu</div> <div class="code-name">#icon-Menu</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-language"></use> </svg> <div class="name">language</div> <div class="code-name">#icon-language</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-layout"></use> </svg> <div class="name">layout</div> <div class="code-name">#icon-layout</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"><script src="./iconfont.js"></script> </code></pre> <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> <pre><code class="language-html"><style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> </code></pre> <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> <pre><code class="language-html"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg> </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>

Ignore Space Show notes View

project/hivuiLogin/assets/iconfonts/expand/demo_index.html 0 → 100644

.main .logo a {
      display: flex;
      align-items: center;
    }

</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>

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/expand/iconfont.css 0 → 100644
@font-face { font-family: "iconfont"; /* Project id 5075494 */ src: url('iconfont.woff2?t=1776068143378') format('woff2'), url('iconfont.woff?t=1776068143378') format('woff'), url('iconfont.ttf?t=1776068143378') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-scan:before { content: "\e819"; } .icon-diannao1:before { content: "\e642"; } .icon-erweima1:before { content: "\e776"; } .icon-menu-uncheckx:before { content: "\e687"; } .icon-Menu:before { content: "\e6a2"; } .icon-language:before { content: "\e60b"; } .icon-layout:before { content: "\e64e"; }

Ignore Space Show notes View

project/hivuiLogin/assets/iconfonts/expand/iconfont.css 0 → 100644

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/expand/iconfont.js 0 → 100644
window._iconfont_svg_string_5075494='<svg><symbol id="icon-scan" viewBox="0 0 1024 1024"><path d="M84.19555555 366.36444445h63.71555556c5.00622222 0 9.10222222-4.096 9.10222222-9.10222223V157.01333333h200.24888889c5.00622222 0 9.10222222-4.096 9.10222223-9.10222222v-63.71555556c0-5.00622222-4.096-9.10222222-9.10222223-9.10222222H152.46222222c-42.78044445 0-77.36888889 34.58844445-77.36888889 77.36888889v204.8c0 5.00622222 4.096 9.10222222 9.10222222 9.10222223zM666.73777778 157.01333333h200.24888889v200.24888889c0 5.00622222 4.096 9.10222222 9.10222222 9.10222223h63.71555556c5.00622222 0 9.10222222-4.096 9.10222222-9.10222223V152.46222222c0-42.78044445-34.58844445-77.36888889-77.36888889-77.36888889H666.73777778c-5.00622222 0-9.10222222 4.096-9.10222223 9.10222222v63.71555556c0 5.00622222 4.096 9.10222222 9.10222223 9.10222222zM357.26222222 866.98666667H157.01333333V666.73777778c0-5.00622222-4.096-9.10222222-9.10222222-9.10222223h-63.71555556c-5.00622222 0-9.10222222 4.096-9.10222222 9.10222223v204.8c0 42.78044445 34.58844445 77.36888889 77.36888889 77.36888889h204.8c5.00622222 0 9.10222222-4.096 9.10222223-9.10222222v-63.71555556c0-5.00622222-4.096-9.10222222-9.10222223-9.10222222zM939.80444445 657.63555555h-63.71555556c-5.00622222 0-9.10222222 4.096-9.10222222 9.10222223v200.24888889H666.73777778c-5.00622222 0-9.10222222 4.096-9.10222223 9.10222222v63.71555556c0 5.00622222 4.096 9.10222222 9.10222223 9.10222222h204.8c42.78044445 0 77.36888889-34.58844445 77.36888889-77.36888889V666.73777778c0-5.00622222-4.096-9.10222222-9.10222222-9.10222223zM958.00888889 471.04H65.99111111c-5.00622222 0-9.10222222 4.096-9.10222222 9.10222222v63.71555556c0 5.00622222 4.096 9.10222222 9.10222222 9.10222222h892.01777778c5.00622222 0 9.10222222-4.096 9.10222222-9.10222222v-63.71555556c0-5.00622222-4.096-9.10222222-9.10222222-9.10222222z" ></path></symbol><symbol id="icon-diannao1" viewBox="0 0 1024 1024"><path d="M125.5 381.8L65.2 319V135.5s0-64.1 62.8-64.1h763.9s64.1 0 62.8 64.1v560.4s0 62.8-62.8 62.8h-260l2.5 130.7-194.8-193.5h452.3V135.5H125.5v246.3z m0 0" ></path><path d="M244.9 494.8V233.5h522.7v364.4h-426zM634.4 889.4h175.9s46.5 30.2 0 60.3H694.7l-60.3-60.3z" ></path></symbol><symbol id="icon-erweima1" viewBox="0 0 1024 1024"><path d="M267.6 209.08H209.08L267.6 267.6V209.08z" ></path><path d="M320.68 156v164.68l66.32 66.32V328.48h53.04V275.4H387V89.68H89.68L156 156h164.68zM745.16 209.08h66.32v66.32h-66.32zM572.72 514.2h53.04v-66.36h-53.04V394.8h-66.36v111.56l66.36 66.36v-58.52zM930.88 872.36h-58.52l58.52 58.52v-58.52zM811.48 447.84v66.36h119.4v-66.36h-119.4zM864.56 752.96h66.32v66.32h-66.32zM440.04 328.48h66.32V394.8h-66.32z" ></path><path d="M625.76 209.08v66.32h-53.08v53.08h53.08V394.8h66.32v53.08h53.08V394.8h185.72V89.68h-305.12V156h-119.4v53.08h119.4zM692.08 156h172.44v172.44h-172.44V156zM692.08 580.52h53.08v53.08h-53.08zM813.24 752.96h51.32v-119.4h66.32v-53.04h-119.4v119.4h-66.32v45.24l7.8 7.8h60.28zM440.04 209.08h66.32v66.32h-66.32zM625.76 514.2h66.32v66.32h-66.32zM745.16 514.2h66.32v66.32h-66.32z" ></path><path d="M752.96 752.96l-7.8-7.8v7.8h7.8z" ></path></symbol><symbol id="icon-menu-uncheckx" viewBox="0 0 1024 1024"><path d="M411.52 549.674667H187.605333c-32.853333 0-59.605333 26.709333-59.605333 59.605333v223.914667c0 32.853333 26.752 59.605333 59.605333 59.605333h223.914667c32.853333 0 59.605333-26.752 59.605333-59.605333V609.28c0-32.853333-26.752-59.605333-59.605333-59.605333z m-7.594667 257.792a18.090667 18.090667 0 0 1-18.090666 18.090666H213.290667a18.090667 18.090667 0 0 1-18.090667-18.090666v-172.501334c0-9.728 7.893333-18.090667 18.090667-18.090666h172.544c9.728 0 18.090667 7.893333 18.090666 18.090666v172.501334zM411.52 128c32.853333 0 59.605333 26.752 59.605333 59.605333v223.914667c0 32.853333-26.752 59.605333-59.605333 59.605333H187.605333c-32.853333 0-59.605333-26.752-59.605333-59.605333V187.605333C128 154.752 154.752 128 187.605333 128h223.914667z m-7.594667 257.834667V213.290667a18.090667 18.090667 0 0 0-18.090666-18.090667H213.290667A18.090667 18.090667 0 0 0 195.2 213.333333v172.544c0 10.197333 8.362667 18.090667 18.090667 18.090667h172.544c10.197333 0 18.090667-8.362667 18.090666-18.090667z m432.469334 167.04c32.853333 0 59.605333 26.752 59.605333 59.605333v223.914667c0 32.853333-26.752 59.605333-59.605333 59.605333h-223.914667c-32.853333 0-59.605333-26.752-59.605333-59.605333v-223.914667c0-32.853333 26.752-59.605333 59.605333-59.605333h223.914667z m-7.594667 257.834666v-172.544a18.090667 18.090667 0 0 0-18.090667-18.090666h-172.544a18.090667 18.090667 0 0 0-18.090666 18.090666v172.544c0 10.197333 8.362667 18.090667 18.090666 18.090667h172.544c10.197333 0 18.090667-8.362667 18.090667-18.090667zM836.394667 128C869.248 128 896 154.752 896 187.605333v223.914667c0 32.853333-26.752 59.605333-59.605333 59.605333h-223.914667c-32.853333 0-59.605333-26.752-59.605333-59.605333V187.605333c0-32.853333 26.752-59.605333 59.605333-59.605333h223.914667z m-7.594667 257.834667V213.290667A18.090667 18.090667 0 0 0 810.666667 195.2h-172.544a18.090667 18.090667 0 0 0-18.090667 18.090667v172.544c0 10.197333 8.362667 18.090667 18.090667 18.090666h172.544c10.197333 0 18.090667-8.362667 18.090666-18.090666z" fill="#848C97" ></path></symbol><symbol id="icon-Menu" viewBox="0 0 1024 1024"><path d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32h-256z m448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H608z m-448 448a32 32 0 0 1-32-32v-256a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32h-256z m448 0a32 32 0 0 1-32-32v-256a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H608z" fill="#383838" ></path></symbol><symbol id="icon-language" viewBox="0 0 1024 1024"><path d="M511.488 0C228.864 0 0 229.376 0 512s228.864 512 511.488 512C794.624 1024 1024 794.624 1024 512S794.624 0 511.488 0z m354.816 307.2h-151.04a801.28 801.28 0 0 0-70.656-182.272A411.136 411.136 0 0 1 866.304 307.2zM512 104.448c42.496 61.44 75.776 129.536 97.792 202.752H414.208C436.224 233.984 469.504 165.888 512 104.448zM115.712 614.4C107.52 581.632 102.4 547.328 102.4 512s5.12-69.632 13.312-102.4h173.056c-4.096 33.792-7.168 67.584-7.168 102.4 0 34.816 3.072 68.608 7.168 102.4H115.712z m41.984 102.4h151.04c16.384 64 39.936 125.44 70.656 182.272A408.9344 408.9344 0 0 1 157.696 716.8z m151.04-409.6H157.696a408.9344 408.9344 0 0 1 221.696-182.272A801.28 801.28 0 0 0 308.736 307.2zM512 919.552c-42.496-61.44-75.776-129.536-97.792-202.752h195.584c-22.016 73.216-55.296 141.312-97.792 202.752zM631.808 614.4H392.192c-4.608-33.792-8.192-67.584-8.192-102.4 0-34.816 3.584-69.12 8.192-102.4h239.616c4.608 33.28 8.192 67.584 8.192 102.4 0 34.816-3.584 68.608-8.192 102.4z m12.8 284.672c30.72-56.832 54.272-118.272 70.656-182.272h151.04a411.136 411.136 0 0 1-221.696 182.272zM735.232 614.4c4.096-33.792 7.168-67.584 7.168-102.4 0-34.816-3.072-68.608-7.168-102.4h173.056c8.192 32.768 13.312 67.072 13.312 102.4s-5.12 69.632-13.312 102.4h-173.056z" fill="#5F6368" ></path></symbol><symbol id="icon-layout" viewBox="0 0 1024 1024"><path d="M384 912.014222h496.014222c17.692444 0 32-14.307556 32-32.028444V339.996444H384v572.017778zM880.014222 111.957333H384v164.010667h528.014222v-131.982222c0-17.720889-14.307556-32-32.028444-32z m-768 32.028445v736c0 17.692444 14.279111 32 31.971556 32h176.014222V111.957333H143.985778c-17.692444 0-32 14.307556-32 32.028445z" fill="#000000" fill-opacity=".65" ></path></symbol></svg>',(e=>{var t=(h=(h=document.getElementsByTagName("script"))[h.length-1]).getAttribute("data-injectcss"),h=h.getAttribute("data-disable-injectsvg");if(!h){var c,a,n,o,i,v=function(t,h){h.parentNode.insertBefore(t,h)};if(t&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}c=function(){var t,h=document.createElement("div");h.innerHTML=e._iconfont_svg_string_5075494,(h=h.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",h=h,(t=document.body).firstChild?v(h,t.firstChild):t.appendChild(h))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(a=function(){document.removeEventListener("DOMContentLoaded",a,!1),c()},document.addEventListener("DOMContentLoaded",a,!1)):document.attachEvent&&(n=c,o=e.document,i=!1,d(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}function l(){i\|\|(i=!0,n())}function d(){try{o.documentElement.doScroll("left")}catch(t){return void setTimeout(d,50)}l()}})(window);

Ignore Space Show notes View

project/hivuiLogin/assets/iconfonts/expand/iconfont.js 0 → 100644

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/expand/iconfont.json 0 → 100644
{ "id": "5075494", "name": "hivui-platform-template", "font_family": "iconfont", "css_prefix_text": "icon-", "description": "", "glyphs": [ { "icon_id": "4766861", "name": "scan", "font_class": "scan", "unicode": "e819", "unicode_decimal": 59417 }, { "icon_id": "5121488", "name": "电脑", "font_class": "diannao1", "unicode": "e642", "unicode_decimal": 58946 }, { "icon_id": "47330665", "name": "二维码", "font_class": "erweima1", "unicode": "e776", "unicode_decimal": 59254 }, { "icon_id": "6642530", "name": "menu-uncheck@3x", "font_class": "menu-uncheckx", "unicode": "e687", "unicode_decimal": 59015 }, { "icon_id": "36632759", "name": "Menu", "font_class": "Menu", "unicode": "e6a2", "unicode_decimal": 59042 }, { "icon_id": "11903005", "name": "language", "font_class": "language", "unicode": "e60b", "unicode_decimal": 58891 }, { "icon_id": "19100272", "name": "layout", "font_class": "layout", "unicode": "e64e", "unicode_decimal": 58958 } ] }

Ignore Space Show notes View

project/hivuiLogin/assets/iconfonts/expand/iconfont.json 0 → 100644

{
  "id": "5075494",
  "name": "hivui-platform-template",
  "font_family": "iconfont",
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
    {
      "icon_id": "4766861",
      "name": "scan",
      "font_class": "scan",
      "unicode": "e819",
      "unicode_decimal": 59417
    },
    {
      "icon_id": "5121488",
      "name": "电脑",
      "font_class": "diannao1",
      "unicode": "e642",
      "unicode_decimal": 58946
    },
    {
      "icon_id": "47330665",
      "name": "二维码",
      "font_class": "erweima1",
      "unicode": "e776",
      "unicode_decimal": 59254
    },
    {
      "icon_id": "6642530",
      "name": "menu-uncheck@3x",
      "font_class": "menu-uncheckx",
      "unicode": "e687",
      "unicode_decimal": 59015
    },
    {
      "icon_id": "36632759",
      "name": "Menu",
      "font_class": "Menu",
      "unicode": "e6a2",
      "unicode_decimal": 59042
    },
    {
      "icon_id": "11903005",
      "name": "language",
      "font_class": "language",
      "unicode": "e60b",
      "unicode_decimal": 58891
    },
    {
      "icon_id": "19100272",
      "name": "layout",
      "font_class": "layout",
      "unicode": "e64e",
      "unicode_decimal": 58958
    }
  ]
}

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/expand/iconfont.ttf 0 → 100644
Not supported

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/expand/iconfont.woff 0 → 100644
Not supported

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/expand/iconfont.woff2 0 → 100644
Not supported

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/iconfont.css 0 → 100644
@font-face { font-family: "iconfont"; /* Project id 1417123 */ src: url('iconfont.woff2?t=1697007139828') format('woff2'), url('iconfont.woff?t=1697007139828') format('woff'), url('iconfont.ttf?t=1697007139828') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-xinbiaoqianye:before { content: "\e8ee"; } .icon-drxx12:before { content: "\e714"; } .icon-yuangongguanli:before { content: "\e644"; } .icon-zaigang:before { content: "\e6d3"; } .icon-zhiji:before { content: "\e6d4"; } .icon-yonghubianhao:before { content: "\e6d5"; } .icon-gangji:before { content: "\e6d6"; } .icon-xiugaiyonghuxinxi:before { content: "\e6d7"; } .icon-xiugaimima:before { content: "\e6d8"; } .icon-jigou:before { content: "\e6d9"; } .icon-xlsx:before { content: "\e605"; } .icon-flow:before { content: "\e602"; } .icon-func:before { content: "\e604"; } .icon-org:before { content: "\e63c"; } .icon-root:before { content: "\e810"; } .icon-dpt:before { content: "\e62b"; } .icon-ptm:before { content: "\e65c"; } .icon-quanping:before { content: "\eb11"; } .icon-quanxian:before { content: "\e63f"; } .icon-closeOther:before { content: "\e631"; } .icon-close-circle:before { content: "\e629"; } .icon-closeAll:before { content: "\e60f"; } .icon-refresh:before { content: "\e619"; } .icon-tree:before { content: "\e6e8"; } .icon-tuichu:before { content: "\e627"; } .icon-moveSort2:before { content: "\e630"; } .icon-moveSort1:before { content: "\e93c"; } .icon-moveSort:before { content: "\e73d"; } .icon-edit:before { content: "\e62f"; } .icon-arrow-leftMore-circle:before { content: "\e623"; } .icon-arrow-rightMore-circle:before { content: "\e6fc"; } .icon-checkbox-empty:before { content: "\e625"; } .icon-checkbox:before { content: "\e626"; } .icon-add:before { content: "\e6ee"; } .icon-delete:before { content: "\e698"; } .icon-info:before { content: "\e60a"; } .icon-error:before { content: "\e620"; } .icon-warn:before { content: "\e601"; } .icon-close:before { content: "\e607"; } .icon-set-fill:before { content: "\e61e"; } .icon-set:before { content: "\e61d"; } .icon-chart:before { content: "\e632"; } .icon-arrow-down-circle:before { content: "\e6f8"; } .icon-arrow-down:before { content: "\e6f6"; } .icon-arrow-left:before { content: "\e6f7"; } .icon-arrow-up-circle:before { content: "\e6fa"; } .icon-arrow-left-circle:before { content: "\e6fb"; } .icon-search:before { content: "\e621"; } .icon-clock:before { content: "\e600"; } .icon-arrow-right:before { content: "\e636"; } .icon-table:before { content: "\e699"; } .icon-arrow-right-circle:before { content: "\e60d"; } .icon-help:before { content: "\e65d"; } .icon-mark:before { content: "\e63d"; } .icon-money:before { content: "\e640"; } .icon-analyse:before { content: "\e6d2"; } .icon-dealt:before { content: "\e64a"; } .icon-change:before { content: "\e60e"; } .icon-bell:before { content: "\e6eb"; } .icon-time:before { content: "\e64d"; } .icon-skin:before { content: "\e664"; } .icon-mail:before { content: "\e6af"; } .icon-email:before { content: "\e628"; } .icon-meeting:before { content: "\e612"; } .icon-today:before { content: "\e645"; } .icon-user:before { content: "\e606"; } .icon-listadd:before { content: "\e654"; } .icon-sun:before { content: "\e6f5"; }

Ignore Space Show notes View

project/hivuiLogin/assets/iconfonts/iconfont.css 0 → 100644

@font-face {
  font-family: "iconfont"; /* Project id 1417123 */
  src: url('iconfont.woff2?t=1697007139828') format('woff2'),
       url('iconfont.woff?t=1697007139828') format('woff'),
       url('iconfont.ttf?t=1697007139828') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-xinbiaoqianye:before {
  content: "\e8ee";
}

.icon-drxx12:before {
  content: "\e714";
}

.icon-yuangongguanli:before {
  content: "\e644";
}

.icon-zaigang:before {
  content: "\e6d3";
}

.icon-zhiji:before {
  content: "\e6d4";
}

.icon-yonghubianhao:before {
  content: "\e6d5";
}

.icon-gangji:before {
  content: "\e6d6";
}

.icon-xiugaiyonghuxinxi:before {
  content: "\e6d7";
}

.icon-xiugaimima:before {
  content: "\e6d8";
}

.icon-jigou:before {
  content: "\e6d9";
}

.icon-xlsx:before {
  content: "\e605";
}

.icon-flow:before {
  content: "\e602";
}

.icon-func:before {
  content: "\e604";
}

.icon-org:before {
  content: "\e63c";
}

.icon-root:before {
  content: "\e810";
}

.icon-dpt:before {
  content: "\e62b";
}

.icon-ptm:before {
  content: "\e65c";
}

.icon-quanping:before {
  content: "\eb11";
}

.icon-quanxian:before {
  content: "\e63f";
}

.icon-closeOther:before {
  content: "\e631";
}

.icon-close-circle:before {
  content: "\e629";
}

.icon-closeAll:before {
  content: "\e60f";
}

.icon-refresh:before {
  content: "\e619";
}

.icon-tree:before {
  content: "\e6e8";
}

.icon-tuichu:before {
  content: "\e627";
}

.icon-moveSort2:before {
  content: "\e630";
}

.icon-moveSort1:before {
  content: "\e93c";
}

.icon-moveSort:before {
  content: "\e73d";
}

.icon-edit:before {
  content: "\e62f";
}

.icon-arrow-leftMore-circle:before {
  content: "\e623";
}

.icon-arrow-rightMore-circle:before {
  content: "\e6fc";
}

.icon-checkbox-empty:before {
  content: "\e625";
}

.icon-checkbox:before {
  content: "\e626";
}

.icon-add:before {
  content: "\e6ee";
}

.icon-delete:before {
  content: "\e698";
}

.icon-info:before {
  content: "\e60a";
}

.icon-error:before {
  content: "\e620";
}

.icon-warn:before {
  content: "\e601";
}

.icon-close:before {
  content: "\e607";
}

.icon-set-fill:before {
  content: "\e61e";
}

.icon-set:before {
  content: "\e61d";
}

.icon-chart:before {
  content: "\e632";
}

.icon-arrow-down-circle:before {
  content: "\e6f8";
}

.icon-arrow-down:before {
  content: "\e6f6";
}

.icon-arrow-left:before {
  content: "\e6f7";
}

.icon-arrow-up-circle:before {
  content: "\e6fa";
}

.icon-arrow-left-circle:before {
  content: "\e6fb";
}

.icon-search:before {
  content: "\e621";
}

.icon-clock:before {
  content: "\e600";
}

.icon-arrow-right:before {
  content: "\e636";
}

.icon-table:before {
  content: "\e699";
}

.icon-arrow-right-circle:before {
  content: "\e60d";
}

.icon-help:before {
  content: "\e65d";
}

.icon-mark:before {
  content: "\e63d";
}

.icon-money:before {
  content: "\e640";
}

.icon-analyse:before {
  content: "\e6d2";
}

.icon-dealt:before {
  content: "\e64a";
}

.icon-change:before {
  content: "\e60e";
}

.icon-bell:before {
  content: "\e6eb";
}

.icon-time:before {
  content: "\e64d";
}

.icon-skin:before {
  content: "\e664";
}

.icon-mail:before {
  content: "\e6af";
}

.icon-email:before {
  content: "\e628";
}

.icon-meeting:before {
  content: "\e612";
}

.icon-today:before {
  content: "\e645";
}

.icon-user:before {
  content: "\e606";
}

.icon-listadd:before {
  content: "\e654";
}

.icon-sun:before {
  content: "\e6f5";
}

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/iconfont.eot 0 → 100644
Not supported

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/iconfont.js 0 → 100644
window._iconfont_svg_string_1417123='<svg><symbol id="icon-xinbiaoqianye" viewBox="0 0 1024 1024"><path d="M865.9778052 703.3210029a39.33086723 39.33086723 0 0 1 39.33086724 39.33086724v78.6617345h78.66173449a39.33086723 39.33086723 0 1 1 0 78.66173447h-78.66173449v78.66173449a39.33086723 39.33086723 0 1 1-78.66173447 0v-78.66173449h-78.6617345a39.33086723 39.33086723 0 1 1 0-78.66173447h78.6617345v-78.6617345a39.33086723 39.33086723 0 0 1 39.33086723-39.33086724z m0-629.29387591A117.99260173 117.99260173 0 0 1 983.97040693 192.0197287v393.30867245a39.33086723 39.33086723 0 1 1-78.66173449 0V428.00493219H79.36046032v353.97780518a39.33086723 39.33086723 0 0 0 39.33086724 39.33086727h471.97040692a39.33086723 39.33086723 0 1 1 0 78.66173447H118.69132756a117.99260173 117.99260173 0 0 1-117.99260173-117.99260174V192.0197287A117.99260173 117.99260173 0 0 1 118.69132756 74.02712699h747.28647764z m0 78.66173448H118.69132756a39.33086723 39.33086723 0 0 0-39.33086724 39.33086723v157.32346901H905.30867244V192.0197287a39.33086723 39.33086723 0 0 0-39.33086724-39.33086723z m-648.95930954 58.99630086a39.33086723 39.33086723 0 1 1 0 78.6617345 39.33086723 39.33086723 0 0 1 0-78.6617345z m157.32346898 0a39.33086723 39.33086723 0 1 1 0 78.6617345 39.33086723 39.33086723 0 0 1 0-78.6617345z m157.32346899 0a39.33086723 39.33086723 0 1 1 0 78.6617345 39.33086723 39.33086723 0 0 1 0-78.6617345z" ></path></symbol><symbol id="icon-drxx12" viewBox="0 0 1024 1024"><path d="M746.47898896 298.53302627c-7.62886758-2.08060049-14.21743448-4.85473359-21.49953485-6.58856689a148.41614355 148.41614355 0 0 0-37.10403546-4.1612001c-3.46766661 0-4.1612001 0-4.16120009-3.81443379v-34.67666866c0-3.46766661 0-4.1612001-4.50796729-4.16120009H583.4986455a19.07216807 19.07216807 0 0 1-21.84630204-21.49953487V131.39148183c0-3.81443379 0-4.85473359-4.85473359-4.85473358H151.7741167c-4.1612001 0-5.20150078 0-5.20150078 5.20150078V894.27819922c0 4.50796729 0 5.20150078 5.54826708 5.20150078h526.73860196c3.81443379 0 5.54826709 0 5.20149991-5.20150078s0-16.64480127 0-25.31396778c0-2.7741331 0-3.46766661 3.81443378-3.46766748H743.01132237c2.7741331 0 3.12090029 0 3.12090029 3.46766748v62.07123692a31.20900205 31.20900205 0 0 1-30.86223574 30.86223574H118.83128135a32.24930185 32.24930185 0 0 1-31.20900205-17.33833477 21.49953487 21.49953487 0 0 1-3.46766748-12.83036748 51.32146992 51.32146992 0 0 1 0-7.28210039V96.71481318A34.67666865 34.67666865 0 0 1 95.59791318 70.36054473 32.24930185 32.24930185 0 0 1 118.83128135 62.03814453h470.90916386a39.87816943 39.87816943 0 0 1 29.82193594 12.13683399c38.14433613 37.79756895 76.63543857 75.94190508 115.12654102 113.39270771a36.75726914 36.75726914 0 0 1 11.79006679 28.43486807v82.53047197z" fill="#707070" ></path><path d="M689.95601914 820.07012744h-233.37398232c-11.79006768 0-14.91096797-3.12090029-14.91096797-14.91096708v-30.51546856a15.60450146 15.60450146 0 0 1 5.20150078-11.79006768 371.040358 371.040358 0 0 1 116.16684082-74.90160527 360.98412364 360.98412364 0 0 1 46.46673632-14.56420078 21.15276768 21.15276768 0 0 1 14.56420079 0 144.25494258 144.25494258 0 0 0 50.97470361 13.52390097 156.04501026 156.04501026 0 0 0 83.22400547-14.21743446 22.19306836 22.19306836 0 0 1 14.21743448 0 374.1612583 374.1612583 0 0 1 84.95783876 34.67666953 369.30652471 369.30652471 0 0 1 77.32897207 57.21650331 12.48360117 12.48360117 0 0 1 4.1612001 9.70946719v32.94283536c0 11.09653418-3.81443379 13.17713378-13.52390098 13.17713466h-235.45458193zM694.11721924 331.4758625a106.45737364 106.45737364 0 0 1 86.34490576 48.54733594 121.36834161 121.36834161 0 0 1 16.99156758 104.03000683 5.8950334 5.8950334 0 0 0 2.08060049 6.93533408 18.72540088 18.72540088 0 0 1 7.28210039 21.15276768 17.68510107 17.68510107 0 0 1-14.91096797 14.56420166c-3.81443379 0-3.81443379 2.7741331-4.1612001 5.2014999a130.7310416 130.7310416 0 0 1-29.12840244 67.27273769 92.93347266 92.93347266 0 0 1-54.78913652 34.67666954 75.24837158 75.24837158 0 0 1-60.3374045-14.21743447 120.6748081 120.6748081 0 0 1-50.28116923-86.69167296c0-3.46766661 0-4.85473359-5.20150078-5.5482662a18.37863457 18.37863457 0 0 1-14.56420078-14.91096797 19.41893437 19.41893437 0 0 1 7.62886669-21.15276856c2.7741331 0 2.7741331-3.46766661 2.08060049-6.2417997a121.02157442 121.02157442 0 0 1 34.67666865-124.14247559 106.80414082 106.80414082 0 0 1 77.32897207-29.12840156zM357.05999638 396.66799971h117.55390782a12.48360117 12.48360117 0 1 1 3.46766748 24.62043516H240.19962207c-8.66916738 0-14.21743448-4.50796729-14.56420078-11.79006768a12.13683398 12.13683398 0 0 1 11.79006767-13.17713379h119.63450742zM357.05999638 509.02040761h117.900675a12.48360117 12.48360117 0 0 1 13.87066729 11.44330049 13.17713378 13.17713378 0 0 1-11.09653418 13.52390098H240.19962207c-8.66916738 0-14.56420078-4.50796729-14.91096709-12.13683398a12.83036748 12.83036748 0 0 1 11.79006679-12.83036749h119.98127461zM357.05999638 621.37281465h116.1668417a26.00750215 26.00750215 0 0 1 7.28210039 0 13.52390097 13.52390097 0 0 1 8.3224002 13.87066728 13.17713378 13.17713378 0 0 1-11.79006768 10.40300069H240.19962207c-8.66916738 0-14.56420078-4.50796729-14.91096709-11.7900668a12.83036748 12.83036748 0 0 1 12.13683398-12.83036748h119.63450742z" fill="#707070" ></path></symbol><symbol id="icon-yuangongguanli" viewBox="0 0 1024 1024"><path d="M1020.74195011 759.88591585c0 39.42232301-27.65754599 95.15021416-159.75328798 138.2877299-92.2606198 30.13434114-214.24278156 46.6463089-343.6553288 46.6463089s-251.394709-16.51196775-343.6553288-46.6463089c-132.095742-42.93111615-159.75328798-98.8654069-159.75328798-138.2877299 0-39.2159234 27.65754599-95.15021416 159.54688838-138.08133031-6.6047871 22.91035525-11.76477702 46.85270849-15.27357016 71.41426052-60.06228269 24.76795162-82.35343916 50.56790124-82.35343916 66.66706979 0 18.98876291 30.54714034 51.18710003 117.02857143 79.46384479 86.2750315 28.07034517 201.44600655 43.55031494 324.46016629 43.55031494 123.01415974 0 238.39153439-15.47996977 324.46016629-43.55031494 86.2750315-28.07034517 117.02857143-60.26868229 117.02857143-79.46384479 0-16.51196775-23.11675485-42.93111615-85.44943311-67.90546737-3.50879314-24.56155203-8.66878307-48.29750567-15.27357017-71.20786093 1.03199799 0.20639959 1.85759637 0.61919879 2.88959436 0.8255984 132.095742 42.93111615 159.75328798 98.8654069 159.75328798 138.2877299z m-829.10718065-4.12799194c0-101.96140086 33.2303351-196.69881583 93.49901739-266.66827916 34.05593348-39.42232301 74.71665407-68.93746536 119.50536659-87.30702949-39.00952381-32.19833712-63.98387503-80.90864197-63.98387504-135.39813554 0-96.59501134 78.63824641-175.43965735 175.43965735-175.43965735s175.43965735 78.63824641 175.43965734 175.43965735c0 54.48949358-24.97435122 103.19979844-63.98387502 135.39813554 44.78871252 18.36956412 85.4494331 47.88470648 119.50536658 87.30702949 60.26868229 69.76306374 93.49901739 164.50047871 93.49901739 266.66827916 0 17.13116654-13.82877299 30.95993954-30.95993953 30.95993954s-30.95993954-13.82877299-30.95993953-30.95993954c0-158.5148904-93.49901739-285.86344168-219.40277149-309.80579491l-32.6111363 54.07669439c6.6047871 9.28798186 18.78236332 29.92794155 27.03834719 66.87346937 9.08158226 41.07351978 12.79677501 154.59329806 14.03517258 204.54200051 0.4127992 13.4159738-10.31997985 24.35515243-23.73595363 24.35515244h-54.90229277c-13.4159738 0-23.94235324-10.93917864-23.73595364-24.35515244 1.23839758-50.15510204 4.95359033-163.67488033 14.03517259-204.54200051 8.04958427-36.32632905 20.0207609-56.96628874 26.83194759-66.46067019L472.95742 445.952129c-125.9037541 23.94235324-219.40277147 151.29090451-219.40277148 309.80579491 0 17.13116654-13.82877299 30.95993954-30.95993953 30.95993954s-30.95993954-13.82877299-30.95993953-30.95993954zM515.88853615 379.904258c62.53907785 0 113.51977829-50.98070042 113.51977828-113.51977828s-50.98070042-113.51977829-113.51977828-113.51977828-113.51977829 50.98070042-113.51977828 113.51977828 50.98070042 113.51977829 113.51977828 113.51977828z" fill="#707070" ></path></symbol><symbol id="icon-zaigang" viewBox="0 0 1024 1024"><path d="M953.45777813 919.3244448c-18.2044448-177.49333333-141.0844448-323.12888853-302.6488896-375.46666667C732.72888853 496.07111147 785.06666667 409.6 785.06666667 307.2c0-150.18666667-122.88-273.06666667-273.06666667-273.06666667S238.93333333 157.01333333 238.93333333 307.2c0 100.1244448 54.61333333 188.87111147 136.53333334 236.65777813-161.5644448 54.61333333-284.4444448 197.97333333-300.37333334 375.46666667v4.5511104c0 15.92888853 13.65333333 29.58222187 29.58222187 29.58222293s29.58222187-13.65333333 29.58222293-29.58222293c4.55111147-38.6844448 13.65333333-75.09333333 27.30666667-109.22666667 18.2044448-45.51111147 47.78666667-86.47111147 81.92-120.60444373s75.09333333-63.7155552 120.60444373-81.92c47.78666667-20.48 97.84888853-29.58222187 147.91111147-29.58222293 52.33777813 0 102.4 9.10222187 147.91111147 29.58222293 45.51111147 18.2044448 86.47111147 47.78666667 120.60444373 81.92s63.7155552 75.09333333 81.92 120.60444373c13.65333333 34.13333333 25.03111147 70.54222187 27.30666667 109.22666667 0 15.92888853 13.65333333 29.58222187 29.58222293 29.58222293s29.58222187-13.65333333 29.58222187-29.58222293c4.55111147 0 4.55111147-2.2755552 4.55111146-4.5511104zM298.09777813 309.4755552c0-56.88888853 22.7555552-111.50222187 61.44-150.18666667s93.29777813-61.44 150.18666667-61.44 111.50222187 22.7555552 150.18666667 61.44 61.44 93.29777813 61.44 150.18666667-22.7555552 111.50222187-61.44 150.18666667-93.29777813 61.44-150.18666667 61.44-111.50222187-22.7555552-150.18666667-61.44c-38.6844448-38.6844448-61.44-93.29777813-61.44-150.18666667z" ></path><path d="M637.1555552 955.73333333c0 13.65333333-4.55111147 20.48-13.65333333 25.03111147-11.37777813 4.55111147-29.58222187 4.55111147-56.88888854 4.5511104-2.2755552-6.82666667-4.55111147-15.92888853-9.10222186-22.7555552h47.78666666c6.82666667 0 6.82666667-2.2755552 6.82666667-6.82666667v-141.0844448h-202.5244448v170.66666667h-25.03111147v-193.42222187h250.31111147v163.84z m-2.2755552-188.87111146H389.12v-61.44h22.7555552v40.96h86.47111147V694.0444448h22.7555552v52.33777707h88.74666666v-40.96h25.03111147v61.44z m-61.44 182.0444448c-13.65333333-13.65333333-31.85777813-29.58222187-54.61333333-45.51111147-25.03111147 20.48-52.33777813 36.40888853-79.6444448 50.06222293-2.2755552-4.55111147-11.37777813-13.65333333-15.92888854-18.2044448 27.30666667-11.37777813 54.61333333-27.30666667 77.36888854-45.51111146-22.7555552-15.92888853-47.78666667-31.85777813-70.54222187-43.2355552l15.92888853-13.65333334c22.7555552 11.37777813 47.78666667 27.30666667 72.81777814 43.2355552 18.2044448-15.92888853 34.13333333-34.13333333 45.51111146-52.33777706l20.48 9.10222186c-13.65333333 20.48-29.58222187 40.96-50.06222293 56.88888854 22.7555552 15.92888853 40.96 29.58222187 54.61333333 43.23555626l-15.92888853 15.92888854z" ></path></symbol><symbol id="icon-zhiji" viewBox="0 0 1024 1024"><path d="M953.45777813 919.3244448c-18.2044448-177.49333333-141.0844448-323.12888853-302.6488896-375.46666667C732.72888853 496.07111147 785.06666667 409.6 785.06666667 307.2c0-150.18666667-122.88-273.06666667-273.06666667-273.06666667S238.93333333 157.01333333 238.93333333 307.2c0 100.1244448 54.61333333 188.87111147 136.53333334 236.65777813-161.5644448 54.61333333-284.4444448 197.97333333-300.37333334 375.46666667v4.5511104c0 15.92888853 13.65333333 29.58222187 29.58222187 29.58222293s29.58222187-13.65333333 29.58222293-29.58222293c4.55111147-38.6844448 13.65333333-75.09333333 27.30666667-109.22666667 18.2044448-45.51111147 47.78666667-86.47111147 81.92-120.60444373s75.09333333-63.7155552 120.60444373-81.92c47.78666667-20.48 97.84888853-29.58222187 147.91111147-29.58222293 52.33777813 0 102.4 9.10222187 147.91111147 29.58222293 45.51111147 18.2044448 86.47111147 47.78666667 120.60444373 81.92s63.7155552 75.09333333 81.92 120.60444373c13.65333333 34.13333333 25.03111147 70.54222187 27.30666667 109.22666667 0 15.92888853 13.65333333 29.58222187 29.58222293 29.58222293s29.58222187-13.65333333 29.58222187-29.58222293c4.55111147 0 4.55111147-2.2755552 4.55111146-4.5511104zM298.09777813 309.4755552c0-56.88888853 22.7555552-111.50222187 61.44-150.18666667s93.29777813-61.44 150.18666667-61.44 111.50222187 22.7555552 150.18666667 61.44 61.44 93.29777813 61.44 150.18666667-22.7555552 111.50222187-61.44 150.18666667-93.29777813 61.44-150.18666667 61.44-111.50222187-22.7555552-150.18666667-61.44c-38.6844448-38.6844448-61.44-93.29777813-61.44-150.18666667z" ></path><path d="M512 673.5644448l38.6844448 77.36888853 84.1955552 11.37777814-61.44 61.44 15.92888853 84.1955552-77.36888853-40.96-75.09333333 40.96 15.92888853-84.1955552-61.44-61.44 84.19555627-11.37777814zM680.39111147 876.08888853l36.40888853 11.37777814 29.58222187-22.7555552v38.68444373l31.85777813 22.75555627-36.40888853 11.37777706-11.37777814 36.4088896-22.7555552-31.85777813h-38.6844448l22.7555552-29.58222187zM345.8844448 876.08888853l-11.37777813 36.4088896 22.7555552 29.58222187h-38.68444374l-22.75555626 31.85777813-11.37777707-36.4088896-36.4088896-11.37777706 31.85777813-22.75555627v-38.68444373l29.58222187 22.7555552z" ></path></symbol><symbol id="icon-yonghubianhao" viewBox="0 0 1024 1024"><path d="M953.45777813 919.3244448c-18.2044448-177.49333333-141.0844448-323.12888853-302.6488896-375.46666667C732.72888853 496.07111147 785.06666667 409.6 785.06666667 307.2c0-150.18666667-122.88-273.06666667-273.06666667-273.06666667S238.93333333 157.01333333 238.93333333 307.2c0 100.1244448 54.61333333 188.87111147 136.53333334 236.65777813-161.5644448 54.61333333-284.4444448 197.97333333-300.37333334 375.46666667v4.5511104c0 15.92888853 13.65333333 29.58222187 29.58222187 29.58222293s29.58222187-13.65333333 29.58222293-29.58222293c4.55111147-38.6844448 13.65333333-75.09333333 27.30666667-109.22666667 18.2044448-45.51111147 47.78666667-86.47111147 81.92-120.60444373s75.09333333-63.7155552 120.60444373-81.92c47.78666667-20.48 97.84888853-29.58222187 147.91111147-29.58222293 52.33777813 0 102.4 9.10222187 147.91111147 29.58222293 45.51111147 18.2044448 86.47111147 47.78666667 120.60444373 81.92s63.7155552 75.09333333 81.92 120.60444373c13.65333333 34.13333333 25.03111147 70.54222187 27.30666667 109.22666667 0 15.92888853 13.65333333 29.58222187 29.58222293 29.58222293s29.58222187-13.65333333 29.58222187-29.58222293c4.55111147 0 4.55111147-2.2755552 4.55111146-4.5511104zM298.09777813 309.4755552c0-56.88888853 22.7555552-111.50222187 61.44-150.18666667s93.29777813-61.44 150.18666667-61.44 111.50222187 22.7555552 150.18666667 61.44 61.44 93.29777813 61.44 150.18666667-22.7555552 111.50222187-61.44 150.18666667-93.29777813 61.44-150.18666667 61.44-111.50222187-22.7555552-150.18666667-61.44c-38.6844448-38.6844448-61.44-93.29777813-61.44-150.18666667z" ></path><path d="M314.02666667 1003.52v-211.62666667h29.58222186l111.50222294 166.1155552v-166.1155552h27.30666666v211.62666667h-29.58222293l-111.50222187-166.1155552v166.1155552h-27.30666666zM518.82666667 898.8444448c0-34.13333333 9.10222187-63.7155552 27.30666666-81.92 18.2044448-20.48 43.2355552-29.58222187 72.81777814-29.58222293 20.48 0 36.40888853 4.55111147 52.33777706 13.65333333 15.92888853 9.10222187 27.30666667 22.7555552 36.4088896 38.6844448s11.37777813 36.40888853 11.37777707 56.88888853c0 20.48-4.55111147 40.96-13.65333333 56.8888896s-20.48 29.58222187-36.40888854 38.68444374c-15.92888853 9.10222187-34.13333333 13.65333333-52.33777813 13.65333333-20.48 0-38.6844448-4.55111147-52.33777707-13.65333333-15.92888853-9.10222187-27.30666667-22.7555552-36.4088896-38.68444374s-9.10222187-34.13333333-9.10222186-54.61333333z m29.58222186 2.2755552c0 25.03111147 6.82666667 45.51111147 20.48 61.44 13.65333333 13.65333333 31.85777813 22.7555552 52.33777814 22.7555552 20.48 0 38.6844448-6.82666667 52.33777813-22.7555552 13.65333333-15.92888853 20.48-36.40888853 20.48-63.7155552 0-18.2044448-2.2755552-31.85777813-9.10222293-45.51111147-6.82666667-13.65333333-13.65333333-22.7555552-25.0311104-29.58222186-11.37777813-6.82666667-22.7555552-11.37777813-38.6844448-11.37777814-20.48 0-36.40888853 6.82666667-52.33777814 20.48-13.65333333 13.65333333-20.48 36.40888853-20.48 68.26666667z" ></path></symbol><symbol id="icon-gangji" viewBox="0 0 1024 1024"><path d="M953.45777813 919.3244448c-18.2044448-177.49333333-141.0844448-323.12888853-302.6488896-375.46666667C732.72888853 496.07111147 785.06666667 409.6 785.06666667 307.2c0-150.18666667-122.88-273.06666667-273.06666667-273.06666667S238.93333333 157.01333333 238.93333333 307.2c0 100.1244448 54.61333333 188.87111147 136.53333334 236.65777813-161.5644448 54.61333333-284.4444448 197.97333333-300.37333334 375.46666667v4.5511104c0 15.92888853 13.65333333 29.58222187 29.58222187 29.58222293s29.58222187-13.65333333 29.58222293-29.58222293c4.55111147-38.6844448 13.65333333-75.09333333 27.30666667-109.22666667 18.2044448-45.51111147 47.78666667-86.47111147 81.92-120.60444373s75.09333333-63.7155552 120.60444373-81.92c47.78666667-20.48 97.84888853-29.58222187 147.91111147-29.58222293 52.33777813 0 102.4 9.10222187 147.91111147 29.58222293 45.51111147 18.2044448 86.47111147 47.78666667 120.60444373 81.92s63.7155552 75.09333333 81.92 120.60444373c13.65333333 34.13333333 25.03111147 70.54222187 27.30666667 109.22666667 0 15.92888853 13.65333333 29.58222187 29.58222293 29.58222293s29.58222187-13.65333333 29.58222187-29.58222293c4.55111147 0 4.55111147-2.2755552 4.55111146-4.5511104zM298.09777813 309.4755552c0-56.88888853 22.7555552-111.50222187 61.44-150.18666667s93.29777813-61.44 150.18666667-61.44 111.50222187 22.7555552 150.18666667 61.44 61.44 93.29777813 61.44 150.18666667-22.7555552 111.50222187-61.44 150.18666667-93.29777813 61.44-150.18666667 61.44-111.50222187-22.7555552-150.18666667-61.44c-38.6844448-38.6844448-61.44-93.29777813-61.44-150.18666667z" ></path><path d="M591.6444448 905.67111147c-9.10222187-34.13333333-18.2044448-68.26666667-25.03111147-102.4-2.2755552-6.82666667-6.82666667-11.37777813-13.65333333-11.37777814h-81.92c-9.10222187 0-13.65333333 2.2755552-15.92888853 11.37777814-6.82666667 31.85777813-15.92888853 63.7155552-25.03111147 95.57333333-2.2755552 9.10222187 0 15.92888853 4.55111147 20.48 22.7555552 22.7555552 43.2355552 47.78666667 65.9911104 70.54222187 6.82666667 6.82666667 11.37777813 6.82666667 18.2044448 0l68.26666666-75.09333334c4.55111147 0 6.82666667-4.55111147 4.55111147-9.10222186zM461.93777813 760.0355552c2.2755552 9.10222187 6.82666667 13.65333333 15.92888854 13.65333333h65.99111146c11.37777813 0 15.92888853-4.55111147 18.20444374-13.65333333 2.2755552-18.2044448 6.82666667-34.13333333 11.37777813-52.33777707 2.2755552-11.37777813-2.2755552-15.92888853-13.65333333-15.9288896h-95.57333334c-11.37777813 0-13.65333333 4.55111147-11.37777813 15.9288896 2.2755552 15.92888853 6.82666667 34.13333333 9.10222293 52.33777707z" ></path></symbol><symbol id="icon-xiugaiyonghuxinxi" viewBox="0 0 1024 1024"><path d="M953.45777813 919.3244448c-18.2044448-177.49333333-141.0844448-323.12888853-302.6488896-375.46666667C732.72888853 496.07111147 785.06666667 409.6 785.06666667 307.2c0-150.18666667-122.88-273.06666667-273.06666667-273.06666667S238.93333333 157.01333333 238.93333333 307.2c0 100.1244448 54.61333333 188.87111147 136.53333334 236.65777813-161.5644448 54.61333333-284.4444448 197.97333333-300.37333334 375.46666667v4.5511104c0 15.92888853 13.65333333 29.58222187 29.58222187 29.58222293s29.58222187-13.65333333 29.58222293-29.58222293c4.55111147-38.6844448 13.65333333-75.09333333 27.30666667-109.22666667 18.2044448-45.51111147 47.78666667-86.47111147 81.92-120.60444373s75.09333333-63.7155552 120.60444373-81.92c47.78666667-20.48 97.84888853-29.58222187 147.91111147-29.58222293 52.33777813 0 102.4 9.10222187 147.91111147 29.58222293 45.51111147 18.2044448 86.47111147 47.78666667 120.60444373 81.92s63.7155552 75.09333333 81.92 120.60444373c13.65333333 34.13333333 25.03111147 70.54222187 27.30666667 109.22666667 0 15.92888853 13.65333333 29.58222187 29.58222293 29.58222293s29.58222187-13.65333333 29.58222187-29.58222293c4.55111147 0 4.55111147-2.2755552 4.55111146-4.5511104zM298.09777813 309.4755552c0-56.88888853 22.7555552-111.50222187 61.44-150.18666667s93.29777813-61.44 150.18666667-61.44 111.50222187 22.7555552 150.18666667 61.44 61.44 93.29777813 61.44 150.18666667-22.7555552 111.50222187-61.44 150.18666667-93.29777813 61.44-150.18666667 61.44-111.50222187-22.7555552-150.18666667-61.44c-38.6844448-38.6844448-61.44-93.29777813-61.44-150.18666667z" ></path><path d="M641.70666667 876.08888853h-27.30666667c-2.2755552 15.92888853-9.10222187 29.58222187-18.2044448 40.96l20.48 20.48c2.2755552 2.2755552 2.2755552 9.10222187 0 11.37777814l-13.65333333 13.65333333c-2.2755552 2.2755552-9.10222187 2.2755552-11.37777707 0l-20.48-20.48c-11.37777813 9.10222187-27.30666667 15.92888853-40.96 18.2044448v27.30666667c0 4.55111147-4.55111147 9.10222187-9.10222293 9.10222186h-15.92888854c-4.55111147 0-9.10222187-4.55111147-9.10222186-9.10222186v-27.30666667c-15.92888853-2.2755552-29.58222187-9.10222187-40.96-18.2044448l-20.48 20.48c-2.2755552 2.2755552-9.10222187 2.2755552-11.37777814 0l-11.37777813-11.37777813c-2.2755552-2.2755552-2.2755552-9.10222187 0-11.37777707l18.2044448-18.2044448c-9.10222187-11.37777813-15.92888853-27.30666667-18.2044448-40.96h-27.30666667c-4.55111147 0-9.10222187-4.55111147-9.10222186-9.10222187v-15.9288896c0-4.55111147 4.55111147-9.10222187 9.10222186-9.10222186h27.30666667c2.2755552-15.92888853 9.10222187-29.58222187 18.2044448-40.96l-20.48-20.48c-2.2755552-2.2755552-2.2755552-9.10222187 0-11.37777814l11.37777813-11.37777706c2.2755552-2.2755552 9.10222187-2.2755552 11.37777707 0l20.48 20.48c11.37777813-9.10222187 27.30666667-15.92888853 40.96-18.2044448v-27.30666667c0-4.55111147 4.55111147-9.10222187 9.10222293-9.10222187h15.92888854c4.55111147 0 9.10222187 4.55111147 9.10222186 9.10222187v27.30666667c15.92888853 2.2755552 29.58222187 9.10222187 40.96 18.2044448l20.48-20.48c2.2755552-2.2755552 9.10222187-2.2755552 11.37777814 0l11.37777813 11.37777706c2.2755552 2.2755552 2.2755552 9.10222187 0 11.37777814l-18.2044448 18.2044448c9.10222187 11.37777813 15.92888853 27.30666667 18.2044448 40.96h27.30666667c4.55111147 0 9.10222187 4.55111147 9.10222186 9.10222186v15.92888854c0 4.55111147-2.2755552 6.82666667-6.82666666 6.82666666zM512 791.89333333c-38.6844448 0-68.26666667 29.58222187-68.26666667 68.26666667s29.58222187 68.26666667 68.26666667 68.26666667 68.26666667-29.58222187 68.26666667-68.26666667-29.58222187-68.26666667-68.26666667-68.26666667z" ></path></symbol><symbol id="icon-xiugaimima" viewBox="0 0 1024 1024"><path d="M778.24 393.67111147h-22.7555552c-4.55111147 0-6.82666667-2.2755552-6.82666667-6.82666667v-109.22666667c0-131.98222187-106.95111147-238.93333333-238.93333333-238.93333333-129.70666667 0-236.65777813 106.95111147-236.65777813 236.65777707v111.50222293c0 4.55111147-2.2755552 6.82666667-6.82666667 6.82666667h-22.7555552c-50.06222187 0-88.74666667 40.96-88.74666667 88.74666666V898.8444448c0 50.06222187 40.96 88.74666667 88.74666667 88.74666667h534.7555552c50.06222187 0 88.74666667-40.96 88.74666667-88.74666667V482.41777813c2.2755552-50.06222187-38.6844448-88.74666667-88.74666667-88.74666666z m-443.73333333-118.3288896c0-47.78666667 18.2044448-93.29777813 52.33777813-125.1555552C420.97777813 116.05333333 464.21333333 97.84888853 512 97.84888853s93.29777813 18.2044448 125.1555552 52.33777814c34.13333333 34.13333333 52.33777813 77.36888853 52.33777813 125.1555552v111.50222293c0 4.55111147-2.2755552 6.82666667-6.82666666 6.82666667h-341.33333334c-4.55111147 0-6.82666667-2.2755552-6.82666666-6.82666667v-111.50222293zM810.09777813 898.8444448c0 15.92888853-13.65333333 29.58222187-29.58222293 29.58222187H245.76c-15.92888853 0-29.58222187-13.65333333-29.58222187-29.58222187V482.41777813c0-15.92888853 13.65333333-29.58222187 29.58222187-29.58222293h534.7555552c15.92888853 0 29.58222187 13.65333333 29.58222293 29.58222293V898.8444448z" ></path><path d="M673.5644448 712.24888853h-34.13333333c-4.55111147 20.48-11.37777813 38.6844448-22.75555627 52.33777814l25.03111147 25.03111146c4.55111147 4.55111147 4.55111147 11.37777813 0 15.92888854l-15.92888854 13.65333333c-4.55111147 4.55111147-11.37777813 4.55111147-15.9288896 0l-25.0311104-25.03111147c-15.92888853 11.37777813-34.13333333 18.2044448-52.33777813 22.75555627V853.33333333c0 6.82666667-4.55111147 11.37777813-11.37777813 11.37777814h-20.48c-6.82666667 0-11.37777813-4.55111147-11.37777707-11.37777814v-34.13333333c-20.48-2.2755552-38.6844448-11.37777813-52.33777813-22.7555552l-25.03111147 25.0311104c-4.55111147 4.55111147-11.37777813 4.55111147-15.92888853 0l-15.92888854-15.92888853c-4.55111147-4.55111147-4.55111147-11.37777813 0-15.92888854l25.0311104-25.03111146c-11.37777813-15.92888853-18.2044448-34.13333333-22.7555552-52.33777814h-34.13333333c-6.82666667 0-11.37777813-4.55111147-11.37777813-11.37777706v-20.48c0-6.82666667 4.55111147-11.37777813 11.37777813-11.37777814h34.13333333c4.55111147-20.48 11.37777813-38.6844448 22.7555552-52.33777813l-25.0311104-25.0311104c-4.55111147-4.55111147-4.55111147-11.37777813 0-15.9288896l15.92888854-15.92888853c4.55111147-4.55111147 11.37777813-4.55111147 15.92888853 0l25.03111147 25.03111146c15.92888853-11.37777813 34.13333333-18.2044448 52.33777813-22.75555626v-34.13333334c0-6.82666667 4.55111147-11.37777813 11.37777707-11.37777706h20.48c6.82666667 0 11.37777813 4.55111147 11.37777813 11.37777706v34.13333334c20.48 2.2755552 38.6844448 11.37777813 52.33777813 22.75555626l25.0311104-25.03111146c4.55111147-4.55111147 11.37777813-4.55111147 15.9288896 0l15.92888854 15.92888853c4.55111147 4.55111147 4.55111147 11.37777813 0 15.9288896l-25.03111147 25.0311104c11.37777813 15.92888853 18.2044448 34.13333333 22.75555627 52.33777813h34.13333333c6.82666667 0 11.37777813 4.55111147 11.37777707 11.37777814v20.48c0 6.82666667-4.55111147 11.37777813-11.37777707 11.37777706zM512 603.02222187c-47.78666667 0-86.47111147 38.6844448-86.47111147 86.47111146s38.6844448 86.47111147 86.47111147 86.47111147 86.47111147-38.6844448 86.47111147-86.47111147S559.78666667 603.02222187 512 603.02222187z" ></path></symbol><symbol id="icon-jigou" viewBox="0 0 1024 1024"><path d="M925.866667 893.866667c-17.066667-166.4-132.266667-302.933333-283.733334-352C718.933333 497.066667 768 416 768 320c0-140.8-115.2-256-256-256S256 179.2 256 320c0 93.866667 51.2 177.066667 128 221.866667-151.466667 51.2-266.666667 185.6-281.6 352v4.266666c0 14.933333 12.8 27.733333 27.733333 27.733334s27.733333-12.8 27.733334-27.733334c4.266667-36.266667 12.8-70.4 25.6-102.4 17.066667-42.666667 44.8-81.066667 76.8-113.066666s70.4-59.733333 113.066666-76.8c44.8-19.2 91.733333-27.733333 138.666667-27.733334 49.066667 0 96 8.533333 138.666667 27.733334 42.666667 17.066667 81.066667 44.8 113.066666 76.8s59.733333 70.4 76.8 113.066666c12.8 32 23.466667 66.133333 25.6 102.4 0 14.933333 12.8 27.733333 27.733334 27.733334s27.733333-12.8 27.733333-27.733334c4.266667 0 4.266667-2.133333 4.266667-4.266666zM311.466667 322.133333c0-53.333333 21.333333-104.533333 57.6-140.8s87.466667-57.6 140.8-57.6 104.533333 21.333333 140.8 57.6 57.6 87.466667 57.6 140.8-21.333333 104.533333-57.6 140.8-87.466667 57.6-140.8 57.6-104.533333-21.333333-140.8-57.6c-36.266667-36.266667-57.6-87.466667-57.6-140.8z" ></path><path d="M561.066667 765.866667h-96c-19.2 0-36.266667-17.066667-36.266667-36.266667v-19.2c0-19.2 17.066667-36.266667 36.266667-36.266667h96c19.2 0 36.266667 17.066667 36.266666 36.266667v19.2c0 19.2-17.066667 36.266667-36.266666 36.266667zM390.4 970.666667h-96c-19.2 0-36.266667-17.066667-36.266667-36.266667v-12.8c0-19.2 17.066667-36.266667 36.266667-36.266667h96c19.2 0 36.266667 17.066667 36.266667 36.266667v12.8c0 19.2-14.933333 36.266667-36.266667 36.266667zM729.6 970.666667h-96c-19.2 0-36.266667-17.066667-36.266667-36.266667v-12.8c0-19.2 17.066667-36.266667 36.266667-36.266667h96c19.2 0 36.266667 17.066667 36.266667 36.266667v12.8c0 19.2-17.066667 36.266667-36.266667 36.266667z" ></path><path d="M522.666667 812.8V746.666667h-21.333334v66.133333h-166.4v108.8h21.333334v-87.466667h313.6v87.466667h21.333333v-108.8z" ></path></symbol><symbol id="icon-xlsx" viewBox="0 0 1024 1024"><path d="M531.243 85.333H588.8v79.403h290.73a87.467 87.467 0 0 1 48.64 10.027 97.835 97.835 0 0 1 10.027 50.176q-0.81 258.602 0 516.821a425.643 425.643 0 0 1-3.328 86.827c-3.797 20.693-28.074 21.333-44.202 21.888H589.312v88.192h-60.245c-148.096-27.094-295.979-52.523-443.734-79.019V164.864c148.694-26.539 297.344-52.608 445.91-79.53z" fill="#207245" ></path><path d="M586.581 195.115h321.664v624.213H586.581v-59.435h77.995V690.56h-77.995v-40.064h77.995v-68.95h-77.995v-39.594h77.995v-69.461h-77.995v-40.064h77.995v-68.864h-77.995v-40.064h77.995V254.42h-77.995z" fill="#FFFFFF" ></path><path d="M703.53 254.037h136.534v69.803H703.531z" fill="#207245" ></path><path d="M373.973 346.368q33.195-2.432 66.304-4.267-39.04 81.835-78.592 163.542c26.752 55.808 54.187 110.933 80.726 167.168l-70.614-4.523a1202.347 1202.347 0 0 1-48.64-125.397c-13.226 40.362-32.17 78.805-47.402 118.442-21.334 0-42.667-1.194-64-2.133 25.002-50.432 49.237-100.907 75.05-150.613-21.973-51.2-45.994-101.718-68.608-152.832l64.256-3.712c14.55 39.04 30.251 77.482 42.368 117.546 13.526-42.666 32.896-82.346 49.152-123.306z" fill="#FFFFFF" ></path><path d="M703.53 362.112h136.534v69.803H703.531z m0 109.653h136.534v69.931H703.531z m0 109.782h136.534v69.802H703.531z m0 109.781h136.534v69.803H703.531z" fill="#207245" ></path></symbol><symbol id="icon-flow" viewBox="0 0 1024 1024"><path d="M983.964 953.145 846.307 953.145c-21.721 0-39.33-17.575-39.33-39.249L806.977 796.141c0-21.677 17.609-39.249 39.33-39.249l39.33 0L885.637 580.263c0-21.679-17.607-39.251-39.33-39.251L531.664 541.012l0 215.88 39.332 0c21.721 0 39.33 17.572 39.33 39.249l0 117.756c0 21.674-17.609 39.249-39.33 39.249L433.34 953.146c-21.723 0-39.33-17.575-39.33-39.249L394.01 796.141c0-21.677 17.607-39.249 39.33-39.249l39.33 0 0-215.88L177.693 541.012c-21.721 0-39.33 17.572-39.33 39.251l0 176.629 39.33 0c21.721 0 39.33 17.572 39.33 39.249l0 117.756c0 21.674-17.609 39.249-39.33 39.249L40.036 953.146c-21.721 0-39.33-17.575-39.33-39.249L0.706 796.141c0-21.677 17.609-39.249 39.33-39.249l39.33 0L79.366 560.636c0-43.355 35.219-78.502 78.663-78.502L472.67 482.134 472.67 266.257l-39.33 0c-21.723 0-39.33-17.575-39.33-39.253L394.01 109.252c0-21.679 17.607-39.251 39.33-39.251l137.657 0c21.721 0 39.33 17.572 39.33 39.251l0 117.751c0 21.679-17.609 39.253-39.33 39.253l-39.332 0 0 215.878 334.309 0c43.441 0 78.66 35.147 78.66 78.502l0 196.255 39.33 0c21.721 0 39.33 17.572 39.33 39.249l0 117.756C1023.294 935.571 1005.684 953.145 983.964 953.145z" ></path></symbol><symbol id="icon-func" viewBox="0 0 1024 1024"><path d="M63.3 151.3h896v174.2h-896V151.3zM63.3 425.1h896v174.2h-896V425.1zM63.3 698.9h896v174.2h-896V698.9z" ></path></symbol><symbol id="icon-org" viewBox="0 0 1024 1024"><path d="M642.465374 52.211681c6.510503 0 19.531509 6.510503 19.531509 19.563423v169.624136c0 6.542417-6.478589 19.563423-19.531509 19.563423h-254.45216c-6.510503-6.510503-13.05292-13.05292-13.05292-26.073926V65.264601c0-6.574331 6.542417-19.563423 19.595338-19.563423h247.909742v6.510503z m0-52.211681h-254.45216c-39.158761 0-65.232687 32.584429-65.232687 65.264601v169.592221c0 32.584429 26.073926 65.264601 65.232687 65.264602h254.45216c39.126847 0 65.200773-32.680172 65.200773-65.264602V65.264601c0-32.648258-26.105841-65.264601-65.200773-65.264601M224.931497 815.440504v163.17746H61.817864v-163.17746h163.113633z m19.595337-52.179767H48.764944c-19.563423 0-32.584429 12.989092-32.584429 32.584429v195.76189c0 19.595338 13.05292 32.648258 32.584429 32.648258h195.729976c19.563423 0 32.584429-13.05292 32.584429-32.648258V795.845166c0.031914-19.595338-19.563423-32.584429-32.552515-32.584429m345.663031 52.179767v163.17746h-163.049804v-163.17746h163.049804z m13.116748-52.179767h-195.729975c-19.563423 0-32.584429 12.989092-32.58443 32.584429v195.76189c0 19.595338 13.05292 32.648258 32.58443 32.648258h195.729975c19.563423 0 32.584429-13.05292 32.58443-32.648258V795.845166c0.031914-19.595338-12.989092-32.584429-32.58443-32.584429m358.811694 52.179767v163.17746h-163.081718v-163.17746h163.081718z m13.084835-52.179767h-195.793805c-19.563423 0-32.552515 12.989092-32.552515 32.584429v195.76189c0 19.595338 12.957178 32.648258 32.552515 32.648258h195.793805c19.531509 0 32.584429-13.05292 32.584429-32.648258V795.845166c0-19.595338-13.05292-32.584429-32.584429-32.584429m-469.777473-417.438135c-13.05292 0-19.531509 6.446675-19.53151 19.563423v326.163436c0 12.989092 6.478589 19.531509 19.53151 19.531509s19.563423-6.542417 19.563423-19.531509v-326.163436c6.542417-13.116749-6.510503-19.563423-19.563423-19.563423" ></path><path d="M857.726859 456.660724H140.1673c-13.084835 0-19.595338 13.021006-19.595337 19.563424 0 6.606246 6.510503 26.169669 19.595337 26.169669h717.559559c13.021006 0 19.531509-13.05292 19.531509-19.563424 0-6.606246-6.510503-26.169669-19.531509-26.169669z" ></path><path d="M140.1673 456.660724c-13.084835 0-19.595338 13.021006-19.595337 19.563424v182.740883c0 13.05292 13.05292 19.531509 19.595337 19.53151 6.478589 0 19.563423-13.05292 19.563424-19.53151v-176.134638c-0.031914-13.148663-6.574331-26.169669-19.563424-26.169669zM857.726859 456.660724c-13.05292 0-19.563423 13.021006-19.563423 19.563424v182.740883c0 13.05292 13.05292 19.531509 19.563423 19.53151s19.531509-13.05292 19.531509-19.53151v-176.134638c0-13.148663-6.510503-26.169669-19.531509-26.169669z" ></path></symbol><symbol id="icon-root" viewBox="0 0 1024 1024"><path d="M560 832h233.6v-140.8h-233.6V832z m35.2-112h160v76.8h-160v-76.8zM560 412.8v48h-185.6v48h185.6v48h233.6V416h-233.6z m195.2 108.8h-160v-76.8h160v76.8z" ></path><path d="M371.2 691.2V320h92.8V179.2H233.6V320h92.8v419.2c0 25.6 22.4 48 48 48h185.6v-48h-140.8c-25.6 0-48-22.4-48-48z" ></path></symbol><symbol id="icon-dpt" viewBox="0 0 1024 1024"><path d="M79 370.4l342.7 202.2c28.1 16.9 59 25.3 89.9 25.3s61.8-8.4 89.9-25.3l342.7-202.2c19.7-11.2 22.5-42.1 0-56.2L593 89.5c-25.3-16.9-53.4-25.3-81.5-25.3s-56.2 8.4-81.5 25.3L79 314.2c-22.5 14.1-19.6 45 0 56.2z m382-236c14-8.4 30.9-14 50.6-14 19.7 0 36.5 5.6 50.6 14l317.4 205-309 182.6c-19.7 11.2-39.3 16.9-61.8 16.9s-42.1-5.6-61.8-16.9L138 339.5l323-205.1zM76.2 541.7L421.7 758c28.1 16.9 59 25.3 89.9 25.3s61.8-8.4 89.9-25.3L947 541.7c8.4-5.6 14-14 14-22.5 0-22.5-25.3-36.5-42.1-22.5L573.4 713.1c-19.7 11.2-39.3 16.9-61.8 16.9s-42.1-5.6-61.8-16.9L104.3 494c-16.9-14-42.1 0-42.1 22.5 0 11.2 5.6 19.6 14 25.2z m842.7 132L573.4 890c-19.7 11.2-39.3 16.9-61.8 16.9s-42.1-5.6-61.8-16.9L104.3 673.7c-16.9-14-42.1 0-42.1 22.5 0 8.4 5.6 19.7 14 22.5L421.7 935c28.1 16.9 59 25.3 89.9 25.3s61.8-8.4 89.9-25.3L947 718.7c8.4-5.6 14-14 14-22.5 0-22.5-25.3-36.5-42.1-22.5z" ></path></symbol><symbol id="icon-ptm" viewBox="0 0 1024 1024"><path d="M426.666667 170.666667l85.333333 85.333333h341.333333a85.333333 85.333333 0 0 1 85.333334 85.333333v426.666667a85.333333 85.333333 0 0 1-85.333334 85.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V256a85.333333 85.333333 0 0 1 85.333334-85.333333h256z m426.666666 170.666666H170.666667v426.666667h682.666666V341.333333z m-392.533333 247.466667a102.826667 102.826667 0 0 1 102.4 102.4v34.133333H256v-34.133333a102.826667 102.826667 0 0 1 102.4-102.4h102.4z m273.066667-68.266667v68.266667H597.333333v-68.266667h136.533334zM409.6 384a85.333333 85.333333 0 1 1 0 170.666667 85.333333 85.333333 0 0 1 0-170.666667z m392.533333 34.133333v68.266667H597.333333V418.133333h204.8z" ></path></symbol><symbol id="icon-quanping" viewBox="0 0 1024 1024"><path d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z" fill="#444444" ></path></symbol><symbol id="icon-quanxian" viewBox="0 0 1552 1024"><path d="M1011.811097 1015.560258H507.375484a160.718452 160.718452 0 0 1-160.536774-160.536774V556.923871A160.718452 160.718452 0 0 1 507.375484 396.387097h504.501677a160.668903 160.668903 0 0 1 160.487226 160.536774V855.04a160.718452 160.718452 0 0 1-160.536774 160.536774zM507.375484 442.252387a114.737548 114.737548 0 0 0-114.671484 114.671484V855.04c0 63.256774 51.41471 114.721032 114.671484 114.721032h504.501677c63.207226 0 114.621935-51.464258 114.621936-114.721032V556.923871a114.737548 114.737548 0 0 0-114.621936-114.671484H507.375484zM1246.967742 214.709677a74.322581 74.322581 0 1 1 0-148.645161 74.322581 74.322581 0 0 1 0 148.645161z m0-33.032258a41.290323 41.290323 0 1 0 0-82.580645 41.290323 41.290323 0 0 0 0 82.580645zM322.064516 74.322581a33.032258 33.032258 0 1 1 0-66.064516 33.032258 33.032258 0 0 1 0 66.064516z m0-16.516129a16.516129 16.516129 0 1 0 0-33.032258 16.516129 16.516129 0 0 0 0 33.032258zM173.419355 875.354839a57.806452 57.806452 0 1 1 0-115.612904 57.806452 57.806452 0 0 1 0 115.612904z m0-33.032258a24.774194 24.774194 0 1 0 0-49.548387 24.774194 24.774194 0 0 0 0 49.548387z" ></path><path d="M194.064516 425.290323v-33.032258a12.387097 12.387097 0 1 1 24.774194 0v33.032258h33.032258a12.387097 12.387097 0 1 1 0 24.774193h-33.032258v33.032258a12.387097 12.387097 0 1 1-24.774194 0v-33.032258h-33.032258a12.387097 12.387097 0 1 1 0-24.774193h33.032258zM1419.792516 726.115097v-23.585032a8.852645 8.852645 0 0 1 17.70529 0v23.585032h23.585033a8.852645 8.852645 0 0 1 0 17.70529h-23.585033v23.585032a8.852645 8.852645 0 0 1-17.70529 0v-23.585032h-23.585032a8.852645 8.852645 0 0 1 0-17.70529h23.585032zM1274.698323 415.859613v-14.170839a5.301677 5.301677 0 0 1 10.603354 0v14.170839h14.170839a5.301677 5.301677 0 0 1 0 10.603355h-14.170839v14.170838a5.301677 5.301677 0 0 1-10.603354 0v-14.170838h-14.170839a5.301677 5.301677 0 0 1 0-10.603355h14.170839zM23.122581 974.451613h1126.4a23.122581 23.122581 0 1 1 0 46.245161H23.122581a23.122581 23.122581 0 1 1 0-46.245161zM1245.316129 974.451613h135.432258a23.122581 23.122581 0 1 1 0 46.245161h-135.432258a23.122581 23.122581 0 1 1 0-46.245161zM1476.541935 974.451613h52.851613a23.122581 23.122581 0 1 1 0 46.245161h-52.851613a23.122581 23.122581 0 1 1 0-46.245161z" ></path><path d="M501.908645 439.378581A22.874839 22.874839 0 0 1 478.967742 416.437677v-114.671483C478.967742 161.213935 595.802839 50.935742 745.571097 49.548387h2.824258c147.307355 1.387355 257.998452 109.369806 257.998451 252.217807v45.86529a22.940903 22.940903 0 0 1-45.86529 0v-45.86529c0-117.198452-91.730581-205.691871-213.570064-206.402065-124.663742 0.710194-222.174968 91.136-222.174968 206.402065v114.671483a22.874839 22.874839 0 0 1-22.874839 22.940904zM731.268129 804.335484a137.761032 137.761032 0 0 1-114.754064-135.630452 137.794065 137.794065 0 0 1 137.612387-137.612387 137.794065 137.794065 0 0 1 137.595871 137.612387 137.827097 137.827097 0 0 1-114.754065 135.630452 23.122581 23.122581 0 0 1 0.082581 1.915871v68.806193c0 12.667871-10.24 22.957419-22.924387 22.990452a22.990452 22.990452 0 0 1-22.940904-22.990452v-68.806193a23.122581 23.122581 0 0 1 0.082581-1.915871z m22.858323-227.377549a91.86271 91.86271 0 0 0-91.747097 91.747097 91.879226 91.879226 0 0 0 91.747097 91.796645 91.86271 91.86271 0 0 0 91.73058-91.747096c0-50.555871-41.224258-91.796645-91.73058-91.796646z" ></path></symbol><symbol id="icon-closeOther" viewBox="0 0 1024 1024"><path d="M512 962C263.9 962 62 760.1 62 512S263.9 62 512 62s450 201.9 450 450-201.9 450-450 450z m0-835.7c-212.7 0-385.7 173-385.7 385.7s173 385.7 385.7 385.7 385.7-173 385.7-385.7-173-385.7-385.7-385.7z" ></path><path d="M807.5 839.6c-8.2 0-16.4-3.1-22.7-9.4l-591-590.9c-12.6-12.6-12.6-32.9 0-45.5s32.9-12.6 45.5 0l590.9 590.9c12.6 12.6 12.6 32.9 0 45.5-6.3 6.2-14.5 9.4-22.7 9.4z" ></path></symbol><symbol id="icon-close-circle" viewBox="0 0 1024 1024"><path d="M512 1016C233.6 1016 8 790.4 8 512S233.6 8 512 8 1016 233.6 1016 512 790.4 1016 512 1016z m0-960C260.8 56 56 260.8 56 512S260.8 968 512 968 968 763.2 968 512 763.2 56 512 56z" ></path><path d="M548.8 512l195.2-195.2c9.6-9.6 9.6-25.6 0-36.8l-1.6-1.6c-9.6-9.6-25.6-9.6-35.2 0L512 475.2 316.8 280c-9.6-9.6-25.6-9.6-35.2 0l-1.6 1.6c-9.6 9.6-9.6 25.6 0 36.8L475.2 512 280 707.2c-9.6 9.6-9.6 25.6 0 36.8l1.6 1.6c9.6 9.6 25.6 9.6 35.2 0L512 548.8l195.2 195.2c9.6 9.6 25.6 9.6 35.2 0l1.6-1.6c9.6-9.6 9.6-25.6 0-36.8L548.8 512z" ></path></symbol><symbol id="icon-closeAll" viewBox="0 0 1024 1024"><path d="M40.960024 0.000026h788.47996a10.270719 10.270719 0 0 1 10.24 10.239999v71.679997a10.270719 10.270719 0 0 1-10.24 10.239999H92.160021v737.279963a10.269439 10.269439 0 0 1-10.239999 10.24H10.240025a10.269439 10.269439 0 0 1-10.239999-10.24V40.960024A40.916478 40.916478 0 0 1 40.960024 0.000026z" ></path><path d="M983.039976 163.840017H204.800015a40.916478 40.916478 0 0 0-40.959998 40.959998v778.239961a40.916478 40.916478 0 0 0 40.959998 40.959998h778.239961a40.916478 40.916478 0 0 0 40.959998-40.959998V204.800015a40.916478 40.916478 0 0 0-40.959998-40.959998z m-51.199997 767.999962H256.000013V256.000013h675.839966z" ></path><path d="M414.813445 773.119987h66.591997a18.440959 18.440959 0 0 0 13.905919-6.42432l98.136315-116.648954 98.136315 116.648954A18.090239 18.090239 0 0 0 705.49119 773.119987h66.591997a8.96 8.96 0 0 0 6.89664-14.764799L640.707834 593.919996l138.384633-164.435192A8.96 8.96 0 0 0 772.195827 414.720005h-66.591997a18.442239 18.442239 0 0 0-13.905919 6.42432l-98.248955 116.648954-98.136315-116.648954A18.091519 18.091519 0 0 0 481.406722 414.720005h-66.593277a8.96 8.96 0 0 0-6.89664 14.764799L546.186238 593.919996 407.916805 758.355188A8.96 8.96 0 0 0 414.813445 773.119987z" ></path></symbol><symbol id="icon-refresh" viewBox="0 0 1024 1024"><path d="M929.536 208c-17.664 0-32 14.336-32 32l0 45.024C819.712 152.896 676.448 64 512 64 264.576 64 64 264.576 64 512s200.576 448 448 448c149.728 0 281.6-73.952 362.88-186.816 0.256-0.256 0.416-0.544 0.64-0.8 0.992-1.408 2.208-2.656 3.2-4.064-0.128-0.064-0.192-0.16-0.32-0.224 3.52-5.184 6.08-11.072 6.08-17.792 0.032-17.856-14.432-32.288-32.224-32.288-12.608 0-23.264 7.424-28.576 17.984l-0.224 0c-69.728 96.768-183.072 160-311.456 160C299.936 896 128 724.064 128 512S299.936 128 512 128c148.544 0 276.832 84.608 340.672 208l-51.136 0c-17.664 0-32 14.336-32 32s14.336 32 32 32l128 0c17.664 0 32-14.336 32-32l0-128C961.536 222.336 947.2 208 929.536 208z" ></path></symbol><symbol id="icon-tree" viewBox="0 0 1024 1024"><path d="M177.697 741.043h185.982c12.353 0.196 22.195 10.36 22.008 22.705-0.195 12.074-9.935 21.804-22.008 21.999h-208.22c-12.328 0.068-22.382-9.859-22.458-22.177V338.968h-22.237c-12.404 0-22.449-10.045-22.449-22.449V227.35c0-12.396 10.045-22.45 22.449-22.45h89.178c12.395 0.017 22.423 10.063 22.44 22.45v89.177c0 12.396-10.045 22.441-22.44 22.441h-22.238v163.831h185.992c12.335-0.017 22.348 9.977 22.365 22.321 0.007 12.344-9.986 22.356-22.331 22.373H177.705v193.55h-0.008zM311.696 227.35c-0.008-12.387 10.037-22.45 22.432-22.45h565.771c12.386 0.017 22.432 10.063 22.45 22.45v89.177c0 12.396-10.045 22.441-22.45 22.441H334.146c-12.396 0-22.449-10.045-22.458-22.441V227.35h0.008z m163.823 253.202c-0.025-12.378 9.985-22.432 22.365-22.457H899.9c12.386 0.025 22.432 10.062 22.45 22.457v89.168c0 12.354-10.021 22.384-22.382 22.384H498.035c-12.396 0.032-22.483-9.986-22.517-22.384v-89.168h0.001z m0 238.255c0-12.371 10.011-22.448 22.517-22.448H899.9c12.386 0.015 22.432 10.061 22.45 22.448v89.169c0.031 12.362-9.943 22.417-22.297 22.449H498.035c-12.396 0.033-22.483-9.978-22.517-22.373v-89.245h0.001z" ></path></symbol><symbol id="icon-tuichu" viewBox="0 0 1024 1024"><path d="M765.824 638.208 765.824 510.592 446.72 510.592 446.72 382.912l319.04 0L765.76 255.232l191.424 191.488L765.824 638.208zM702.016 574.4l0 255.232L382.912 829.632l0 191.488L0 829.632 0 0l702.016 0 0 319.104L638.272 319.104 638.272 63.808 127.68 63.808l255.232 127.68 0 574.336 255.36 0L638.272 574.4 702.016 574.4z" ></path></symbol><symbol id="icon-moveSort2" viewBox="0 0 1024 1024"><path d="M384 320a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m256 0a64 64 0 1 1 0-128 64 64 0 0 1 0 128zM384 576a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m256 0a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m-256 256a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m256 0a64 64 0 1 1 0-128 64 64 0 0 1 0 128z" ></path></symbol><symbol id="icon-moveSort1" viewBox="0 0 1024 1024"><path d="M426.666667 554.666667v-85.333334h341.333333v85.333334h-341.333333z m0 256v-85.333334h170.666666v85.333334h-170.666666z m0-511.914667V213.333333h512v85.418667H426.666667zM256 725.333333h106.666667L213.333333 874.666667 64 725.333333H170.666667V298.666667H64L213.333333 149.333333 362.666667 298.666667H256v426.666666z" ></path></symbol><symbol id="icon-moveSort" viewBox="0 0 1024 1024"><path d="M660.7 187.4c9.2 0 18.1 3.7 24.6 10.2 6.5 6.5 10.2 15.4 10.2 24.6v580.7c0 15.5-10.2 29.1-25.1 33.5-14.9 4.3-30.8-1.7-39.2-14.8-3.8-1.7-7.3-4.1-10.2-7.1l-82-82c-12.8-13.7-12.4-35.1 0.9-48.4 13.3-13.3 34.7-13.6 48.4-0.9l37.6 37.6V222.2c0-9.2 3.7-18.1 10.2-24.6 6.5-6.5 15.4-10.2 24.6-10.2z m166.6 650.4c-9.2 0-18.1-3.7-24.6-10.2-6.5-6.5-10.2-15.4-10.2-24.6V222.2c0-15.5 10.2-29.1 25.1-33.4 14.9-4.3 30.8 1.7 39.1 14.7 3.7 1.6 7.2 4 10.3 7.1l82.1 82.1c9.3 8.7 13.2 21.8 10 34.1-3.2 12.3-12.8 22-25.1 25.1s-25.4-0.7-34.1-10l-37.6-37.6v498.6c0 9.2-3.7 18.1-10.2 24.6-6.7 6.6-15.5 10.3-24.8 10.3z m0 0M99.1 187.4H494c23.2 0 34.8 11.6 34.8 34.8 0 23.2-11.6 34.8-34.8 34.8H99.1c-23.2 0-34.8-11.6-34.8-34.8-0.1-23.2 11.5-34.8 34.8-34.8z m0 0M99.1 466.1h302c19.2 0 34.8 15.6 34.8 34.8 0 19.2-15.6 34.8-34.8 34.8h-302c-19.2 0-34.8-15.6-34.8-34.8-0.1-19.2 15.5-34.8 34.8-34.8z m0 278.8h302c12.4 0 24 6.6 30.2 17.4 6.2 10.8 6.2 24.1 0 34.8-6.2 10.8-17.7 17.4-30.2 17.4h-302c-12.4 0-23.9-6.6-30.2-17.4-6.2-10.8-6.2-24.1 0-34.8 6.2-10.8 17.7-17.4 30.2-17.4z m0 0" ></path></symbol><symbol id="icon-edit" viewBox="0 0 1024 1024"><path d="M870.96462219 885.385565L226.136855 885.385565l99.42411-30.05834062L166.55932906 696.3255875 107.80300531 890.67254c-1.29991875 4.30076437-0.99868312 8.51134969 0.43554469 12.18949594 0.95263406 7.66424344 7.52130094 13.64962594 15.4320975 13.64962593L870.96462219 916.51166094c8.55931687 0 15.5635275-7.00325156 15.5635275-15.5635275S879.52393906 885.385565 870.96462219 885.385565z" ></path><path d="M897.4762475 199.39402719l-74.98372125-74.98372125c-23.20090969-23.20090969-60.81700594-23.20090969-84.01791563 0l-42.97022624 42.97022625 159.00163687 159.00163687 42.97022625-42.97022625C920.67715719 260.21103312 920.67715719 222.59493687 897.4762475 199.39402719z" ></path><path d="M653.10401187 305.18150281L674.30467719 283.98179656 695.50438438 305.18150281 785.605535 395.28265437 833.305355 347.58187531 674.30467719 188.5811975 186.7008725 676.18500219 234.4006925 723.88482219Z" ></path><path d="M345.70279344 835.19076781l-90.09993188-90.09993187 418.69900688-418.69900688 90.09993187 90.09993188-418.69900687 418.69900687Z" ></path></symbol><symbol id="icon-arrow-leftMore-circle" viewBox="0 0 1024 1024"><path d="M107 512a405 405 0 1 0 810 0 405 405 0 0 0-810 0z m-44.99999999 0C62 263.465 263.465 62 512 62.00000001S962 263.465 961.99999999 512s-201.465 450-449.99999999 449.99999999-450-201.465-449.99999999-449.99999999z" ></path><path d="M363.815 512l119.11500001 119.07a22.5 22.5 0 1 1-31.86000001 31.86l-135-135a22.5 22.5 0 0 1 0-31.86l135-135a22.5 22.5 0 0 1 31.86000001 31.86L363.815 512z" ></path><path d="M543.815 512l119.115 119.07a22.5 22.5 0 0 1-31.86 31.86l-135-135a22.5 22.5 0 0 1 0-31.86l135-135a22.5 22.5 0 0 1 31.86 31.86L543.815 512z" ></path></symbol><symbol id="icon-arrow-rightMore-circle" viewBox="0 0 1024 1024"><path d="M917 512a405 405 0 1 0-810 0 405 405 0 0 0 810 0z m44.99999999 0C962 760.535 760.535 962 512 961.99999999S62 760.535 62.00000001 512s201.465-450 449.99999999-449.99999999 450 201.465 449.99999999 449.99999999z" ></path><path d="M660.185 512l-119.11500001-119.07a22.5 22.5 0 1 1 31.86000001-31.86l135 135a22.5 22.5 0 0 1 0 31.86l-135 135a22.5 22.5 0 0 1-31.86000001-31.86L660.185 512z" ></path><path d="M480.185 512l-119.115-119.07a22.5 22.5 0 0 1 31.86-31.86l135 135a22.5 22.5 0 0 1 0 31.86l-135 135a22.5 22.5 0 0 1-31.86-31.86L480.185 512z" ></path></symbol><symbol id="icon-checkbox-empty" viewBox="0 0 1024 1024"><path d="M849.5 118.25c33.75 0 56.25 22.5 56.25 56.25l0 675c0 33.75-22.5 56.25-56.25 56.25L174.5 905.75c-33.75 0-56.25-22.5-56.25-56.25L118.25 174.5c0-33.75 22.5-56.25 56.25-56.25L849.5 118.25M849.5 62L174.5 62C112.625 62 62 112.625 62 174.5l0 675c0 61.875 50.625 112.5 112.5 112.5l675 0c61.875 0 112.5-50.625 112.5-112.5L962 174.5C962 112.625 911.375 62 849.5 62L849.5 62z" ></path></symbol><symbol id="icon-checkbox" viewBox="0 0 1024 1024"><path d="M725.75 303.875L427.625 602 298.25 455.75c-22.5-22.5-56.25-22.5-78.75 0-22.5 22.5-22.5 56.25 0 78.75l163.125 185.625C393.875 731.375 410.75 737 422 737c16.875 0 28.125-5.625 39.375-16.875l337.5-337.5c22.5-22.5 22.5-56.25 0-78.75C782 281.375 742.625 281.375 725.75 303.875z" ></path><path d="M849.5 62L174.5 62C112.625 62 62 112.625 62 174.5l0 675c0 61.875 50.625 112.5 112.5 112.5l675 0c61.875 0 112.5-50.625 112.5-112.5L962 174.5C962 112.625 911.375 62 849.5 62zM905.75 849.5c0 33.75-22.5 56.25-56.25 56.25L174.5 905.75c-33.75 0-56.25-22.5-56.25-56.25L118.25 174.5c0-33.75 22.5-56.25 56.25-56.25l675 0c33.75 0 56.25 22.5 56.25 56.25L905.75 849.5z" ></path></symbol><symbol id="icon-add" viewBox="0 0 1024 1024"><path d="M740.1 484.3L540 484l0.3-200.1c0-15.4-12.5-28-28-28-15.4 0-28 12.5-28 28L484 484l-200.2-0.3c-15.4 0-28 12.5-28 28 0 15.4 12.5 28 28 28l200.2 0.3-0.3 200.2c0 15.4 12.5 28 28 28 15.4 0 28-12.5 28-28L540 540l200.1 0.3c15.4 0 28-12.5 28-28 0-15.4-12.5-28-28-28z" ></path><path d="M512 63.9C264.5 63.9 63.9 264.5 63.9 512S264.5 960.1 512 960.1 960.1 759.5 960.1 512 759.5 63.9 512 63.9z m271.6 719.7c-35.3 35.3-76.4 63-122.1 82.3-47.3 20-97.6 30.2-149.5 30.2S409.8 886 362.5 865.9c-45.7-19.3-86.8-47-122.1-82.3s-63-76.4-82.3-122.1c-20-47.3-30.2-97.6-30.2-149.5s10.1-102.2 30.2-149.5c19.3-45.7 47-86.8 82.3-122.1s76.4-63 122.1-82.3c47.3-20 97.6-30.2 149.5-30.2 51.9 0 102.2 10.1 149.5 30.2 45.7 19.3 86.8 47 122.1 82.3s63 76.4 82.3 122.1c20 47.3 30.2 97.6 30.2 149.5 0 51.9-10.1 102.2-30.2 149.5-19.3 45.7-47 86.8-82.3 122.1z" ></path></symbol><symbol id="icon-delete" viewBox="0 0 1024 1024"><path d="M826.19642832 347.3l-29.6035708 560.79642833a38.79642833 38.79642833 0 0 1-38.73214336 36.73928583H266.10714248a38.79642833 38.79642833 0 0 1-38.73214248-36.73928583L197.80357168 347.3a38.79642833 38.79642833 0 0 1 77.46428584-4.08214248l27.675 524.025h418.11428496l27.64285752-524.025a38.98928584 38.98928584 0 0 1 40.82142832-36.70714336 38.79642833 38.79642833 0 0 1 36.675 40.82142832z m102.85714335-129.85714248c0 21.43928584-17.38928584 38.79642833-38.82857167 38.79642832H133.775a38.79642833 38.79642833 0 0 1 0-77.56071416H347.10714248V91.37857168c0-18.73928584 12.50357168-29.08928584 31.24285752-29.08928584h267.23571416c18.73928584 0 31.24285752 10.35 31.24285752 29.08928584V178.67857168h213.36428584c21.43928584 0 38.79642833 17.35714248 38.79642832 38.79642832zM414.99285752 178.67857168h193.95V130.14285752h-193.95V178.67857168z m16.26428496 630.38571416h0.80357168c18.73928584 0 33.58928584-18 33.13928584-36.77142832l-9.86785752-419.30357168a34.26428584 34.26428584 0 0 0-34.71428496-33.65357168 33.75 33.75 0 0 0-33.13928585 34.48928584l9.83571417 420.20357167c0.45 18.45 15.55714248 35.03571416 33.94285664 35.03571417z m159.94285752 0c18.38571416 0 33.49285752-15.58928584 33.91071416-34.07142832l9.86785752-418.725a34.13571416 34.13571416 0 0 0-33.10714335-34.9714292 33.75 33.75 0 0 0-34.74642833 33.01071416l-9.86785752 419.14285752c-0.45 18.77142832 14.4 35.61428584 33.10714336 35.61428584h0.83571416z" ></path></symbol><symbol id="icon-info" viewBox="0 0 1024 1024"><path d="M512 1024C229.229714 1024 0 794.770286 0 512 0 229.229714 229.229714 0 512 0 794.770286 0 1024 229.229714 1024 512 1024 794.770286 794.770286 1024 512 1024ZM593.188571 203.044571C586.898286 164.644571 561.225143 147.053714 526.848 152.685714 480.365714 160.256 453.485714 205.129143 460.763429 249.6 466.029714 281.929143 492.397714 303.542857 529.773714 297.435429 576.256 289.828571 600.466286 247.478857 593.188571 203.044571ZM593.956571 664.576C572.635429 692.955429 523.52 741.449143 509.366857 743.753143 502.272 744.923429 500.297143 738.998857 502.857143 729.270857L567.478857 464.530286C571.062857 448.365714 574.976 428.032 573.330286 417.901714 569.709714 395.702857 541.805714 377.417143 519.570286 381.074286 466.029714 389.814857 379.136 454.838857 335.469714 530.468571 332.909714 540.196571 343.149714 552.009143 355.620571 552.045714 369.298286 534.272 418.962286 482.56 436.114286 479.780571 441.197714 478.939429 442.185143 485.010286 440.466286 493.568L376.502857 762.368C371.712 783.872 369.664 796.672 371.492571 807.789714 373.467429 819.931429 398.299429 844.909714 424.557714 840.594286 507.428571 827.062857 586.276571 744.667429 617.106286 685.677714 617.984 672.036571 606.061714 662.601143 593.956571 664.576Z" ></path></symbol><symbol id="icon-error" viewBox="0 0 1024 1024"><path d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512zM438.857143 506.148571L264.777143 683.154286a46.811429 46.811429 0 1 0 49.737143 78.994285 46.811429 46.811429 0 0 0 14.628571-14.628571L506.148571 570.514286l177.005715 177.005714a46.08 46.08 0 1 0 63.634285-64.365714L570.514286 506.148571l176.274285-176.274285a46.811429 46.811429 0 0 0-49.737142-78.994286 44.617143 44.617143 0 0 0-13.897143 14.628571L506.148571 442.514286 329.142857 265.508571a46.811429 46.811429 0 0 0-64.365714 14.628572 49.005714 49.005714 0 0 0 0 49.005714z" ></path></symbol><symbol id="icon-warn" viewBox="0 0 1102 1024"><path d="M617.721223 39.070296l476.238403 876.385787c12.36676 22.843059 11.657837 50.412269-1.89046 72.703945a75.460865 75.460865 0 0 1-64.433181 35.839972H75.159179a75.460865 75.460865 0 0 1-64.433181-35.839972 72.625175 72.625175 0 0 1-1.89046-72.703945L485.073941 39.070296A75.382096 75.382096 0 0 1 551.397582 0.000788c27.805517 0 53.326728 14.966142 66.40241 39.069508zM601.494774 395.422022c0-40.014738-28.041825-72.467637-62.62149-72.467637-34.658435 0-62.700259 32.452898-62.70026 72.467637V667.175659c0 40.093508 28.120594 72.467637 62.70026 72.467637 34.579666 0 62.62149-32.452898 62.62149-72.467637V395.422022z m-62.62149 389.592316a63.409182 63.409182 0 0 0-62.70026 64.196873c0 35.446127 28.120594 64.196874 62.70026 64.196874 34.579666 0 62.62149-28.750747 62.62149-64.196874a63.487951 63.487951 0 0 0-62.62149-64.196873z" ></path></symbol><symbol id="icon-close" viewBox="0 0 1024 1024"><path d="M777.856 280.192l-33.92-33.952-231.872 231.872-231.84-231.872-33.984 33.888 231.872 231.904-231.84 231.84 33.888 33.984 231.904-231.904 231.84 231.872 33.952-33.888-231.872-231.904z" ></path></symbol><symbol id="icon-set-fill" viewBox="0 0 1024 1024"><path d="M925.6 443.1h-41.4c-19 0-39.1-14.8-44.7-32.9l-23.7-57.7c-9-16.7-5.3-41.3 8-54.7l29.4-29.3c13.4-13.5 13.4-35.4 0-48.8L804.4 171c-13.4-13.4-35.3-13.4-48.8 0l-29.3 29.3c-13.4 13.4-38 17.1-54.8 8.1l-57.6-23.7C595.8 179.1 581 159 581 140V98.5c0-18.9-15.6-34.5-34.4-34.5h-68.9c-19 0-34.5 15.6-34.5 34.5v41.4c0 19-14.8 39.1-32.9 44.7l-57.7 23.7c-16.7 9-41.3 5.3-54.7-8.1l-29.4-29.3c-13.4-13.4-35.3-13.4-48.7 0l-48.7 48.7c-13.4 13.4-13.4 35.4 0 48.8l29.3 29.3c13.5 13.4 17.1 38 8.1 54.7l-23.7 57.7c-5.6 18.1-25.7 32.9-44.7 32.9H98.8c-19 0-34.5 15.5-34.5 34.5v68.9c0 19 15.5 34.5 34.5 34.5h41.3c19 0 39 14.9 44.6 32.9l23.8 57.7c8.9 16.7 5.3 41.4-8.1 54.8l-29.3 29.3c-13.3 13.4-13.3 35.3 0 48.8l48.8 48.8c13.4 13.4 35.3 13.4 48.7 0l29.4-29.3c13.3-13.4 38-17 54.6-8l57.8 23.7c18.1 5.6 32.9 25.7 32.9 44.7v41.2c0 18.9 15.5 34.5 34.5 34.5h68.9c18.9 0 34.4-15.5 34.4-34.5v-41.2c0-19 14.9-39.1 32.9-44.7l57.7-23.7c16.7-9 41.4-5.4 54.8 8l29.2 29.3c13.4 13.4 35.4 13.4 48.8 0l48.8-48.8c13.4-13.4 13.4-35.4 0-48.8l-29.4-29.3c-13.3-13.3-17-38-8-54.8l23.7-57.7c5.7-18.1 25.8-32.9 44.7-32.9h41.4c18.9 0 34.4-15.5 34.4-34.5v-69c-0.1-18.8-15.6-34.3-34.5-34.3m-241.2 68.8c0 95.2-77.1 172.3-172.3 172.3-95.2 0-172.3-77.1-172.3-172.3 0-95.1 77.1-172.3 172.3-172.3 95.2 0.1 172.3 77.2 172.3 172.3" ></path></symbol><symbol id="icon-set" viewBox="0 0 1024 1024"><path d="M836.738547 417.715637h-44.439118c-4.323469 0-8.172123-2.732228-9.526981-6.901177l-8.515954-25.335015c-1.207501-3.605108-0.228197-7.53665 2.413979-10.261715l29.756721-29.747511c23.26282-23.246447 23.26282-61.012585 0-84.268242l-43.557028-43.533492c-11.615549-11.622712-26.852578-17.398252-42.089607-17.398252s-30.5549 5.77554-42.187845 17.398252l-29.65746 29.747511a10.095939 10.095939 0 0 1-7.144724 2.961448 10.857279 10.857279 0 0 1-3.197832-0.480954l-25.350364-8.417717c-4.077875-1.362021-6.900154-5.212722-6.900154-9.543353v-44.577265c0-32.872688-26.706245-59.5687-59.57791-59.5687h-69.52854c-32.871665 0-59.57791 26.697035-59.57791 59.5687v44.421722c0 4.330632-2.724041 8.181333-6.900154 9.535167l-25.254173 8.499582c-1.043772 0.407276-2.169409 0.562818-3.214205 0.562818-2.642177 0-5.13802-1.035586-7.06286-2.961448l-29.740348-29.747511c-11.631922-11.622712-26.868951-17.398252-42.104956-17.398252-15.237029 0-30.53955 5.77554-42.186822 17.398252l-43.525306 43.533492c-23.26282 23.255657-23.26282 61.020772 0 84.268242l29.740348 29.747511c2.724041 2.725064 3.605108 6.655584 2.39863 10.342556l-8.41874 25.335015c-1.353834 4.087085-5.203512 6.901177-9.526981 6.901177h-44.503586c-32.888038 0-59.59326 26.697035-59.59326 59.5687v69.512167c0 32.879851 26.705222 59.57791 59.59326 59.57791h44.405349c4.339842 0 8.18952 2.724041 9.559727 6.891968l8.417716 25.335014c1.207501 3.605108 0.228197 7.53665-2.413979 10.260692l-29.756721 29.747511c-23.246447 23.255657-23.246447 61.013609 0 84.187401l43.557028 43.532469c11.615549 11.623735 26.852578 17.398252 42.186822 17.398252 15.302521 0 30.474059-5.774517 42.089607-17.398252l29.756721-29.747511a10.101055 10.101055 0 0 1 7.128351-2.968612c1.044796 0 2.170432 0.170892 3.214205 0.571005l25.336038 8.41874c4.094248 1.362021 6.900154 5.212722 6.900153 9.543354v44.421722c0 32.863479 26.705222 59.560514 59.577911 59.560514h69.527516c32.889061 0 59.57791-26.697035 59.57791-59.560514v-44.421722c0-4.330632 2.741437-8.181333 6.900154-9.543354l25.416879-8.41874c1.044796-0.325411 2.169409-0.480954 3.214205-0.480954 2.6432 0 5.122671 1.044796 7.04751 2.961448l29.756721 29.755698c11.630898 11.615549 26.851555 17.390066 42.186821 17.390066 15.302521 0 30.474059-5.77554 42.089607-17.390066l43.557029-43.541679c23.24747-23.173792 23.24747-61.012585 0-84.186377l-29.919427-29.903054c-2.724041-2.733251-3.686972-6.656607-2.413979-10.350742l8.41874-25.335015c1.370207-4.087085 5.220908-6.901177 9.559726-6.901177h44.421722c32.871665 0 59.57791-26.697035 59.577911-59.560514v-69.520353c0.078795-32.789801-26.708292-59.486836-59.498093-59.486836z m26.134217 129.008212c0 14.429641-11.712763 26.134217-26.134217 26.134217h-44.439118c-18.760273 0-35.351136 11.95017-41.208541 29.740348l-8.417716 25.343202c-5.285377 15.71082-1.289366 32.708959 10.506284 44.4954l29.755698 29.747511c4.878101 4.885264 7.602142 11.460006 7.602142 18.524912 0 6.972808-2.724041 13.547551-7.602142 18.515702l-43.557028 43.541679c-4.89345 4.885264-11.45182 7.610328-18.434862 7.610328s-13.556761-2.724041-18.531051-7.610328l-29.756721-29.747511c-8.172123-8.181333-19.086707-12.749372-30.702256-12.749372-4.666276 0-9.233292 0.717338-13.800308 2.251274l-25.498744 8.40953c-17.798365 5.938246-29.740348 22.537296-29.740348 41.215704v44.421722c0 14.430664-11.712763 26.13524-26.150589 26.13524h-69.52854c-14.436804 0-26.15059-11.704576-26.15059-26.13524v-44.421722c0-18.760273-11.941983-35.359322-29.740348-41.215704l-25.269523-8.40953c-4.469801-1.533936-9.136078-2.251274-13.866823-2.251274-11.550057 0-22.36538 4.494361-30.800493 12.749372l-29.740348 29.747511c-4.894474 4.885264-11.469216 7.610328-18.451234 7.610328-6.965645 0-13.540388-2.724041-18.515702-7.610328l-43.540656-43.541679c-4.89345-4.885264-7.618515-11.460006-7.618514-18.515702 0-6.982018 2.725064-13.556761 7.618514-18.442024l29.919427-29.829376c11.615549-11.704576 15.627932-28.703739 10.408047-44.421722l-8.41874-25.416879c-5.938246-17.790178-22.529109-29.740348-41.208541-29.740348h-44.503586c-14.4542 0-26.15059-11.704576-26.15059-26.134217v-69.520354c0-14.429641 11.69639-26.142403 26.15059-26.142403h44.405349c18.777669 0 35.368532-11.94096 41.224914-29.740348l8.499581-25.415856c5.13802-15.637142 1.125637-32.627095-10.571776-44.422746l-29.756721-29.739324c-4.89345-4.894474-7.618515-11.469216-7.618515-18.524912 0-6.973832 2.725064-13.548574 7.618515-18.523889l43.540655-43.533493c4.894474-4.894474 11.550057-7.618515 18.515702-7.618514 6.982018 0 13.556761 2.724041 18.451234 7.618514l29.740348 29.747512c8.18952 8.173147 19.086707 12.749372 30.735002 12.749372 4.730745 0 9.461489-0.807389 13.784958-2.251274l25.497721-8.335852c17.799388-5.930059 29.658484-22.529109 29.658483-41.208541v-44.503587c0-14.429641 11.712763-26.134217 26.15059-26.134217h69.52854c14.436804 0 26.15059 11.704576 26.15059 26.134217v44.421723c0 18.760273 11.941983 35.359322 29.740348 41.20854l25.433252 8.499581c4.405333 1.443885 9.054213 2.243087 13.704116 2.243088 11.468193 0 22.381753-4.486174 30.800494-12.741186l29.65746-29.748534c4.894474-4.885264 11.550057-7.618515 18.532075-7.618515s13.540388 2.732228 18.532075 7.618515l43.524283 43.533492c4.894474 4.894474 7.634888 11.469216 7.634888 18.524912 0 6.973832-2.740414 13.548574-7.634888 18.523889l-29.821189 29.821189c-11.712763 11.704576-15.72617 28.785603-10.425444 44.421722l8.41874 25.335015c5.938246 17.798365 22.529109 29.739325 41.22389 29.739325h44.421723c14.437827 0 26.151613 11.713786 26.151613 26.142403v69.438489h0.068561z m-350.84053-168.372755c-73.689303 0-133.674489 59.968813-133.674489 133.648906 0 73.680093 59.985186 133.657092 133.674489 133.657092 73.703629 0 133.689838-59.977 133.689838-133.657092 0-73.680093-59.986209-133.648906-133.689838-133.648906z m0 233.872538c-55.238069 0-100.230796-44.977377-100.230795-100.222609 0-55.238069 44.992727-100.222609 100.230795-100.222609 55.253418 0 100.247168 44.98454 100.247169 100.222609 0 55.244208-44.99375 100.222609-100.247169 100.222609z" ></path></symbol><symbol id="icon-chart" viewBox="0 0 1026 1024"><path d="M972.067982 946.325604H49.546624V23.804245c0-12.881128-10.913178-23.804245-23.794307-23.804245A23.784367 23.784367 0 0 0 1.948072 23.804245v945.749134c0 13.447659 10.356586 24.360837 23.804245 24.360838h946.315665c13.159424 0 23.804245-10.923117 23.804246-24.360838-0.009939-12.314597-10.644821-23.227775-23.804246-23.227775z m-532.797655-39.478273h176.380017c22.12453 0 39.756569-17.920273 39.756569-39.478272V92.960797c0-21.557999-17.632038-39.199977-39.756569-39.199977H439.270327a39.130403 39.130403 0 0 0-39.190037 39.199977v774.418201c0 21.54806 17.353742 39.468334 39.190037 39.468333z m39.199977-774.129966h97.990003V827.900725H478.470304V132.717365zM136.335213 906.847331h176.668252c21.557999 0 39.478273-17.920273 39.478273-39.478272V594.390519c0-22.12453-17.920273-39.756569-39.478273-39.756569H136.335213c-21.836295 0-39.190038 17.632038-39.190037 39.756569v272.97854c0 21.557999 17.363681 39.478273 39.190037 39.478272z m39.756569-273.256835h97.43341v194.310229h-97.43341V633.590496z m566.113659 273.256835H918.873693c21.557999 0 39.190038-17.920273 39.190038-39.478272V303.779941c0-21.557999-17.632038-39.756569-39.190038-39.756568H742.205441c-21.826356 0-39.756569 18.198569-39.756568 39.756568v563.589118c0 21.557999 17.930212 39.478273 39.756568 39.478272z m39.756569-563.589117h97.155115V827.900725h-97.155115V343.258214z" ></path></symbol><symbol id="icon-arrow-down-circle" viewBox="0 0 1024 1024"><path d="M231.91393 792.797779c71.800279 71.14434 170.937161 115.542526 280.334733 115.542526 109.39859599 0 208.534454-44.398186 280.334733-115.542526 71.222111-71.713298 115.669416-170.74273201 115.669416-280.025695l0 0c0-109.282962-44.447305-208.303186-115.669416-280.026718l0 0c-71.800279-71.704089-170.936137-116.111484-280.334733-116.111484l0 0 0 0 0 0c-109.397572 0-208.534454 44.407396-280.334733 116.111484-71.78186 71.724555-116.227118 170.743756-116.227118 280.026718l0 0 0 0C115.686812 622.055047 160.131047 721.084481 231.91393 792.797779L231.91393 792.797779zM829.043796 829.228503c-81.484849 80.8197-193.140858 130.909515-316.796156 130.909515-123.634832 0-235.888452-50.088792-316.795133-130.909515-80.906681-81.387635-131.043568-192.947454-131.043568-316.456419 0-123.50077801 50.135864-235.637742 131.043568-316.447209C276.359188 115.495966 388.613832 65.416384 512.248663 65.416384c123.65529801 0 235.310284 50.079582 316.796156 130.908492C909.950478 277.13332 960.106808 389.271306 960.106808 512.772085l0 0C960.106808 636.281049 909.950478 747.84086799 829.043796 829.228503L829.043796 829.228503zM751.551888 434.239474c4.572132 4.551666 7.408737 10.803044 7.408737 18.210757l0 0c0 3.412726-0.559748 6.828522-1.717108 9.66308-1.697665 3.415796-3.39533 6.27082-5.691629 8.547677l0 0-221.054605 200.913892c-2.856048 2.276856-5.130857 3.984754-8.565073 5.691629-2.855024 1.137916-6.250354 1.706875-9.68457 1.706875-3.413749 0-6.829546-0.568958-10.263761-1.706875-2.834558-1.706875-5.689582-3.414773-7.96643899-5.691629L272.944416 470.659965l0 0c-2.854001-2.276856-4.552689-5.131881-5.690606-8.547677-1.137916-2.83558099-2.276856-6.250354-2.276856-9.66308 0-7.407714 3.413749-13.659091 7.966439-18.210757l0 0c4.553713-4.552689 10.82351-7.407714 18.2302-7.407714 3.41477299 0 6.847965 0.559748 9.683547 1.697665 2.856048 1.157359 5.71107199 3.433192 7.987928 5.710049l203.402573 184.401824L715.092511 434.239474c2.275833-2.276856 5.131881-4.552689 7.966439-5.710049 3.43319199-1.137916 6.848988-1.69766499 10.262738-1.697665C740.15021 426.83073699 746.999199 429.685761 751.551888 434.239474L751.551888 434.239474z" ></path></symbol><symbol id="icon-arrow-down" viewBox="0 0 1024 1024"><path d="M497.888 595.712l197.28000001-205.44c10.432-8.864 25.968-7.504 34.68799999 3.024 8.736 10.528 7.36 26.24-3.072 35.08799999l-197.28 205.42400001c-10.432 8.864-25.968 7.504-34.688-3.008S487.44 604.56 497.888 595.712z" ></path><path d="M328.32 390.256l197.28 205.44c10.432 8.864 11.808 24.56 3.088 35.088-8.736 10.528-24.272 11.872-34.688 3.024l-197.28-205.44c-10.432-8.848-11.808-24.56-3.072-35.088C302.33599999 382.752 317.872 381.392 328.32 390.256z" ></path></symbol><symbol id="icon-arrow-left" viewBox="0 0 1024 1024"><path d="M428.288 497.888l205.44 197.28000001c8.864 10.432 7.504 25.968-3.024 34.68799999-10.528 8.736-26.24 7.36-35.08799999-3.072l-205.42400001-197.28c-8.864-10.432-7.504-25.968 3.008-34.688S419.44 487.44 428.288 497.888z" ></path><path d="M633.744 328.32l-205.44 197.28c-8.864 10.432-24.56 11.808-35.088 3.088-10.528-8.736-11.872-24.272-3.024-34.688l205.44-197.28c8.848-10.432 24.56-11.808 35.088-3.072C641.248 302.33599999 642.608 317.872 633.744 328.32z" ></path></symbol><symbol id="icon-arrow-up-circle" viewBox="0 0 1024 1024"><path d="M792.08607 231.202221c-71.800279-71.14434-170.937161-115.542526-280.334733-115.542526-109.39859599 0-208.534454 44.398186-280.334733 115.542526-71.222111 71.713298-115.669416 170.74273201-115.669416 280.025695l0 0c0 109.282962 44.447305 208.303186 115.669416 280.026718l0 0c71.800279 71.704089 170.936137 116.111484 280.334733 116.111484l0 0 0 0 0 0c109.397572 0 208.534454-44.407396 280.334733-116.111484 71.78186-71.724555 116.227118-170.743756 116.227118-280.026718l0 0 0 0C908.313188 401.944953 863.868953 302.915519 792.08607 231.202221L792.08607 231.202221zM194.956204 194.771497c81.484849-80.8197 193.140858-130.909515 316.796156-130.909515 123.634832 0 235.888452 50.088792 316.795133 130.909515 80.906681 81.387635 131.043568 192.947454 131.043568 316.456419 0 123.50077801-50.135864 235.637742-131.043568 316.447209C747.640812 908.504034 635.386168 958.583616 511.751337 958.583616c-123.65529801 0-235.310284-50.079582-316.796156-130.908492C114.049522 746.86668 63.893192 634.728694 63.893192 511.227915l0 0C63.893192 387.718951 114.049522 276.15913201 194.956204 194.771497L194.956204 194.771497zM272.448112 589.760526c-4.572132-4.551666-7.408737-10.803044-7.408737-18.210757l0 0c0-3.412726 0.559748-6.828522 1.717108-9.66308 1.697665-3.415796 3.39533-6.27082 5.691629-8.547677l0 0 221.054605-200.913892c2.856048-2.276856 5.130857-3.984754 8.565073-5.691629 2.855024-1.137916 6.250354-1.706875 9.68457-1.706875 3.413749 0 6.829546 0.568958 10.263761 1.706875 2.834558 1.706875 5.689582 3.414773 7.96643899 5.691629L751.055584 553.340035l0 0c2.854001 2.276856 4.552689 5.131881 5.690606 8.547677 1.137916 2.83558099 2.276856 6.250354 2.276856 9.66308 0 7.407714-3.413749 13.659091-7.966439 18.210757l0 0c-4.553713 4.552689-10.82351 7.407714-18.2302 7.407714-3.41477299 0-6.847965-0.559748-9.683547-1.697665-2.856048-1.157359-5.71107199-3.433192-7.987928-5.710049l-203.402573-184.401824L308.907489 589.760526c-2.275833 2.276856-5.131881 4.552689-7.966439 5.710049-3.43319199 1.137916-6.848988 1.69766499-10.262738 1.697665C283.84979 597.16926301 277.000801 594.314239 272.448112 589.760526L272.448112 589.760526z" ></path></symbol><symbol id="icon-arrow-left-circle" viewBox="0 0 1024 1024"><path d="M231.202221 231.91393c-71.14434 71.800279-115.542526 170.937161-115.542526 280.334733 0 109.39859599 44.398186 208.534454 115.542526 280.334733 71.713298 71.222111 170.74273201 115.669416 280.025695 115.669416l0 0c109.282962 0 208.303186-44.447305 280.026718-115.669416l0 0c71.704089-71.800279 116.111484-170.936137 116.111484-280.334733l0 0 0 0 0 0c0-109.397572-44.407396-208.534454-116.111484-280.334733-71.724555-71.78186-170.743756-116.227118-280.026718-116.227118l0 0 0 0C401.944953 115.686812 302.915519 160.131047 231.202221 231.91393L231.202221 231.91393zM194.771497 829.043796c-80.8197-81.484849-130.909515-193.140858-130.909515-316.796156 0-123.634832 50.088792-235.888452 130.909515-316.795133 81.387635-80.906681 192.947454-131.043568 316.456419-131.043568 123.50077801 0 235.637742 50.135864 316.447209 131.043568C908.504034 276.359188 958.583616 388.613832 958.583616 512.248663c0 123.65529801-50.079582 235.310284-130.908492 316.796156C746.86668 909.950478 634.728694 960.106808 511.227915 960.106808l0 0C387.718951 960.106808 276.15913201 909.950478 194.771497 829.043796L194.771497 829.043796zM589.760526 751.551888c-4.551666 4.572132-10.803044 7.408737-18.210757 7.408737l0 0c-3.412726 0-6.828522-0.559748-9.66308-1.717108-3.415796-1.697665-6.27082-3.39533-8.547677-5.691629l0 0-200.913892-221.054605c-2.276856-2.856048-3.984754-5.130857-5.691629-8.565073-1.137916-2.855024-1.706875-6.250354-1.706875-9.68457 0-3.413749 0.568958-6.829546 1.706875-10.263761 1.706875-2.834558 3.414773-5.689582 5.691629-7.96643899L553.340035 272.944416l0 0c2.276856-2.854001 5.131881-4.552689 8.547677-5.690606 2.83558099-1.137916 6.250354-2.276856 9.66308-2.276856 7.407714 0 13.659091 3.413749 18.210757 7.966439l0 0c4.552689 4.553713 7.407714 10.82351 7.407714 18.2302 0 3.41477299-0.559748 6.847965-1.697665 9.683547-1.157359 2.856048-3.433192 5.71107199-5.710049 7.987928l-184.401824 203.402573L589.760526 715.092511c2.276856 2.275833 4.552689 5.131881 5.710049 7.966439 1.137916 3.43319199 1.69766499 6.848988 1.697665 10.262738C597.16926301 740.15021 594.314239 746.999199 589.760526 751.551888L589.760526 751.551888z" ></path></symbol><symbol id="icon-search" viewBox="0 0 1024 1024"><path d="M447.325002 129.919978c-178.868807 0-323.872319 145.003512-323.872319 323.874365s145.003512 323.874365 323.872319 323.874365c178.870854 0 323.874365-145.003512 323.874365-323.874365S626.195855 129.919978 447.325002 129.919978zM447.325002 713.712071c-143.31915 0-259.915681-116.598578-259.915681-259.917728s116.596532-259.917728 259.915681-259.917728 259.917728 116.598578 259.917728 259.917728S590.643128 713.712071 447.325002 713.712071z" ></path><path d="M891.573945 840.061734 748.236376 696.699606c-13.43601 16.625656-28.371164 31.91385-44.338834 46.099944l142.458549 142.481062c6.246261 6.246261 14.427594 9.368368 22.60995 9.368368s16.363689-3.123131 22.60995-9.368368C904.065444 872.789113 904.065444 852.553233 891.573945 840.061734z" ></path></symbol><symbol id="icon-clock" viewBox="0 0 1024 1024"><path d="M512 128C264.576 128 64 328.576 64 576s200.576 448 448 448 448-200.576 448-448S759.424 128 512 128zM512 936c-198.824 0-360-161.178-360-360 0-198.824 161.176-360 360-360 198.822 0 360 161.176 360 360C872 774.822 710.822 936 512 936zM934.784 287.174C950.826 259.122 960 226.632 960 192c0-106.04-85.96-192-192-192-61.818 0-116.802 29.222-151.92 74.596C747.964 101.832 861.286 179.794 934.784 287.174zM407.92 74.596C372.804 29.222 317.818 0 256 0 149.96 0 64 85.96 64 192c0 34.632 9.174 67.122 25.216 95.174C162.716 179.794 276.038 101.832 407.92 74.596zM448 320l64 0 0 320-64 0L448 320zM512 576l192 0 0 64-192 0L512 576z" ></path></symbol><symbol id="icon-arrow-right" viewBox="0 0 1024 1024"><path d="M595.712 526.112l-205.44-197.28c-8.864-10.432-7.504-25.968 3.024-34.688 10.528-8.736 26.24-7.36 35.088 3.072l205.424 197.28c8.864 10.432 7.504 25.968-3.008 34.688S604.56 536.56 595.712 526.112z" ></path><path d="M390.256 695.68l205.44-197.28c8.864-10.432 24.56-11.808 35.088-3.088 10.528 8.736 11.872 24.272 3.024 34.688l-205.44 197.28c-8.848 10.432-24.56 11.808-35.088 3.072C382.752 721.664 381.392 706.128 390.256 695.68z" ></path></symbol><symbol id="icon-table" viewBox="0 0 1024 1024"><path d="M63.29814 120.015398l0 783.435039 895.355061 0L958.653201 120.015398 63.29814 120.015398 63.29814 120.015398zM399.05616 623.651916 399.05616 455.773418l223.840044 0 0 167.879522L399.05616 623.652939 399.05616 623.651916zM622.896204 679.611415l0 167.881568L399.05616 847.492984 399.05616 679.611415 622.896204 679.611415 622.896204 679.611415zM622.896204 231.933373l0 167.881568L399.05616 399.814941 399.05616 231.933373 622.896204 231.933373 622.896204 231.933373zM343.09666 231.933373l0 167.881568L119.257639 399.814941 119.257639 231.933373 343.09666 231.933373 343.09666 231.933373zM119.257639 455.773418l223.840044 0 0 167.879522L119.257639 623.652939 119.257639 455.773418 119.257639 455.773418zM678.855704 455.773418l223.840044 0 0 167.879522L678.855704 623.652939 678.855704 455.773418 678.855704 455.773418zM678.855704 399.814941 678.855704 231.933373l223.840044 0 0 167.881568L678.855704 399.814941 678.855704 399.814941zM119.257639 679.611415l223.840044 0 0 167.881568L119.257639 847.492984 119.257639 679.611415 119.257639 679.611415zM678.855704 847.492984 678.855704 679.611415l223.840044 0 0 167.881568L678.855704 847.492984 678.855704 847.492984zM678.855704 847.492984" ></path></symbol><symbol id="icon-arrow-right-circle" viewBox="0 0 1024 1024"><path d="M792.797779 792.08607c71.14434-71.800279 115.542526-170.937161 115.542526-280.334733 0-109.398596-44.398186-208.534454-115.542526-280.334733-71.713298-71.222111-170.742732-115.669416-280.025695-115.669416l0 0c-109.282962 0-208.303186 44.447305-280.026718 115.669416l0 0c-71.704089 71.800279-116.111484 170.936137-116.111484 280.334733l0 0 0 0 0 0c0 109.397572 44.407396 208.534454 116.111484 280.334733 71.724555 71.78186 170.743756 116.227118 280.026718 116.227118l0 0 0 0C622.055047 908.313188 721.084481 863.868953 792.797779 792.08607L792.797779 792.08607zM829.228503 194.956204c80.8197 81.484849 130.909515 193.140858 130.909515 316.796156 0 123.634832-50.088792 235.888452-130.909515 316.795133-81.387635 80.906681-192.947454 131.043568-316.456419 131.043568-123.500778 0-235.637742-50.135864-316.447209-131.043568C115.495966 747.640812 65.416384 635.386168 65.416384 511.751337c0-123.655298 50.079582-235.310284 130.908492-316.796156C277.13332 114.049522 389.271306 63.893192 512.772085 63.893192l0 0C636.281049 63.893192 747.840868 114.049522 829.228503 194.956204L829.228503 194.956204zM434.239474 272.448112c4.551666-4.572132 10.803044-7.408737 18.210757-7.408737l0 0c3.412726 0 6.828522 0.559748 9.66308 1.717108 3.415796 1.697665 6.27082 3.39533 8.547677 5.691629l0 0 200.913892 221.054605c2.276856 2.856048 3.984754 5.130857 5.691629 8.565073 1.137916 2.855024 1.706875 6.250354 1.706875 9.68457 0 3.413749-0.568958 6.829546-1.706875 10.263761-1.706875 2.834558-3.414773 5.689582-5.691629 7.966439L470.659965 751.055584l0 0c-2.276856 2.854001-5.131881 4.552689-8.547677 5.690606-2.835581 1.137916-6.250354 2.276856-9.66308 2.276856-7.407714 0-13.659091-3.413749-18.210757-7.966439l0 0c-4.552689-4.553713-7.407714-10.82351-7.407714-18.2302 0-3.414773 0.559748-6.847965 1.697665-9.683547 1.157359-2.856048 3.433192-5.711072 5.710049-7.987928l184.401824-203.402573L434.239474 308.907489c-2.276856-2.275833-4.552689-5.131881-5.710049-7.966439-1.137916-3.433192-1.697665-6.848988-1.697665-10.262738C426.830737 283.84979 429.685761 277.000801 434.239474 272.448112L434.239474 272.448112z" ></path></symbol><symbol id="icon-help" viewBox="0 0 1024 1024"><path d="M827.833737 196.140169C743.469304 111.750153 631.311875 65.290005 511.998465 65.290005c-119.311363 0-231.512794 46.479591-315.882344 130.850164C111.749642 280.491299 65.290517 392.668171 65.290517 511.998977c0 119.335922 46.459125 231.495398 130.830721 315.859831 84.364433 84.390016 196.566888 130.850164 315.878251 130.850164 119.31341 0 231.470839-46.479591 315.840388-130.850164 84.409458-84.346013 130.869606-196.523909 130.869606-315.859831C958.70846 392.668171 912.249335 280.510742 827.833737 196.140169zM540.442284 767.464299c-7.460925 7.460925-17.929348 11.796674-28.443819 11.796674-10.511401 0-20.985964-4.335748-28.442796-11.796674-7.414877-7.460925-11.731182-17.886369-11.731182-28.398794 0-10.536984 4.316306-21.005406 11.731182-28.42233 7.456832-7.455809 17.930371-11.778254 28.442796-11.778254 10.513448 0 20.982894 4.322445 28.443819 11.778254 7.372921 7.416923 11.733229 17.886369 11.733229 28.42233C552.175513 749.57793 547.815205 760.003374 540.442284 767.464299zM591.52573 531.633153c-34.028001 27.720342-50.951439 59.438741-50.951439 95.230921l-0.352017 10.951423-0.088004 0.082888c-1.1328 15.400758-13.95585 27.484981-29.661553 27.484981-16.403598 0-29.750581-13.305027-29.750581-29.731138 0-0.89437 0.085958-1.787716 0.172939-2.681062l-0.044002-0.067538c0-34.765805 3.317559-59.96165 9.990538-75.600839 6.675026-15.591093 21.901823-33.979906 45.543266-55.136761l24.170492-21.552875c32.500205-29.228695 48.724725-58.066487 48.724725-86.529749 0-24.428366-8.724709-44.452421-26.215058-60.068074-17.495466-15.600303-39.785122-23.427572-66.74924-23.427572-69.705572 0-104.824417 39.96113-105.35142 119.897717 0 0.086981 0.042979 0.155543 0.042979 0.218988 0 0.112564-0.042979 0.243547-0.042979 0.352017l0 1.196245-0.044002 0c-0.780783 16.908088-14.740726 30.40959-31.884175 30.40959-17.144472 0-31.104415-13.500479-31.890314-30.40959L347.057879 432.252725c0-53.896514 15.440667-96.449679 46.328142-127.684054 30.794353-31.280424 72.850192-46.87561 125.985366-46.87561 46.89403 0 84.848457 12.978593 113.902166 38.934754 29.140691 25.932626 43.666522 59.697637 43.666522 101.248985C676.940075 440.437128 648.498302 485.060441 591.52573 531.633153z" ></path></symbol><symbol id="icon-mark" viewBox="0 0 1024 1024"><path d="M677.720857 371.147018c0-91.64321-74.28589-165.928077-165.928077-165.928077s-165.928077 74.28589-165.928077 165.928077S420.149571 537.075095 511.79278 537.075095 677.720857 462.789205 677.720857 371.147018zM382.737496 371.147018c0-71.26202 57.776891-129.055285 129.055285-129.055285 71.279417 0 129.055285 57.794287 129.055285 129.055285 0 71.278393-57.775868 129.055285-129.055285 129.055285C440.513364 500.202303 382.737496 442.425412 382.737496 371.147018zM806.776142 371.147018c0-162.903184-132.061758-294.984385-294.984385-294.984385S216.808396 208.242811 216.808396 371.147018s294.984385 516.222161 294.984385 516.222161S806.776142 534.050202 806.776142 371.147018zM511.79278 113.035426c142.540414 0 258.110569 115.552759 258.110569 258.111592 0 142.558833-258.110569 460.912461-258.110569 460.912461S253.681188 513.704828 253.681188 371.147018C253.681188 228.588185 369.251344 113.035426 511.79278 113.035426zM642.187573 769.187547c-8.074909 11.081383-15.950274 21.710464-23.52274 31.794124 78.722946 9.06854 132.801609 27.838022 132.801609 49.513694 0 30.53648-107.304911 55.3097-239.674685 55.3097-132.36875 0-239.674685-24.77322-239.674685-55.3097 0-21.675672 54.079686-40.444131 132.802632-49.513694-7.572466-10.083659-15.448854-20.712741-23.52274-31.794124-86.981027 15.531741-146.152684 46.113247-146.152684 81.307817 0 50.916647 123.81698 92.182492 276.5485 92.182492s276.547477-41.265846 276.547477-92.182492C788.340257 815.300794 729.1686 784.719288 642.187573 769.187547z" ></path></symbol><symbol id="icon-money" viewBox="0 0 1024 1024"><path d="M700.416 278.528c-8.192-8.192-20.48-8.192-28.672 0l-159.744 159.744L352.256 278.528c-8.192-8.192-20.48-8.192-28.672 0s-8.192 20.48 0 28.672l139.264 139.264L335.872 446.464c-12.288 0-20.48 8.192-20.48 20.48s8.192 20.48 20.48 20.48L491.52 487.424l0 106.496L335.872 593.92c-12.288 0-20.48 8.192-20.48 20.48s8.192 20.48 20.48 20.48L491.52 634.88l0 192.512c0 12.288 8.192 20.48 20.48 20.48s20.48-8.192 20.48-20.48l0-192.512 155.648 0c12.288 0 20.48-8.192 20.48-20.48s-8.192-20.48-20.48-20.48L532.48 593.92l0-106.496 155.648 0c12.288 0 20.48-8.192 20.48-20.48s-8.192-20.48-20.48-20.48l-126.976 0 139.264-139.264C708.608 299.008 708.608 286.72 700.416 278.528z" ></path><path d="M512 86.016C278.528 86.016 86.016 278.528 86.016 512s188.416 425.984 425.984 425.984c233.472 0 425.984-188.416 425.984-425.984S745.472 86.016 512 86.016zM512 897.024c-212.992 0-385.024-172.032-385.024-385.024s172.032-385.024 385.024-385.024c212.992 0 385.024 172.032 385.024 385.024S724.992 897.024 512 897.024z" ></path></symbol><symbol id="icon-analyse" viewBox="0 0 1024 1024"><path d="M819.2 864 819.2 403.2 691.2 460.8 691.2 864 595.2 864 595.2 492.8 505.6 537.6 467.2 499.2 467.2 864 396.8 864 396.8 448 268.8 518.4 268.8 864 160 864 160 128 128 128 128 864 128 896 160 896 896 896 896 864Z" ></path><path d="M435.2 364.8 512 499.2 544 480 544 480 793.6 332.8 844.8 416 883.2 256 723.2 217.6 774.4 300.8 524.8 448 448 313.6 448 313.6 448 313.6 192 467.2 211.2 499.2Z" ></path></symbol><symbol id="icon-dealt" viewBox="0 0 1024 1024"><path d="M372.674303 617.841583 208.583061 617.841583l0 55.112202 158.683069 0C367.966071 654.182256 369.801882 635.789351 372.674303 617.841583L372.674303 617.841583z" ></path><path d="M208.583061 403.864164l353.807095 0c29.618575-13.797237 61.45363-22.044062 94.675266-23.715121l0-31.399127L208.583061 348.749916 208.583061 403.864164 208.583061 403.864164z" ></path><path d="M158.507572 769.490445c-20.847817 0-29.540803-8.698103-29.540803-29.526477l0-593.077573c0-20.828374 8.694009-29.52443 29.540803-29.52443l548.628222 0c20.826328 0 29.54592 8.696056 29.54592 29.52443l0 237.22489c23.485901 4.300956 33.708729 11.326976 54.92596 20.72502L791.607674 107.216907c0-24.76708-20.083407-44.847417-44.847417-44.847417L118.888226 62.369489c-24.769127 0-44.852534 20.081361-44.852534 44.847417l0 672.728658c0 24.758893 20.083407 44.847417 44.852534 44.847417l283.845697 0c-11.346419-21.157879-20.263509-31.520901-26.356274-55.302537L178.973696 769.490445 158.507572 769.490445z" ></path><path d="M208.583061 214.205617l448.481338 0 0 55.113225-448.481338 0 0-55.113225Z" ></path><path d="M679.400103 420.235017c-148.146085 0-268.25358 120.091122-268.25358 268.258697 0 148.144038 120.112612 268.257673 268.25358 268.257673 148.164504 0 268.25665-120.114658 268.25665-268.257673C947.656753 540.326139 827.564607 420.235017 679.400103 420.235017zM679.87901 905.252479C560.885895 905.252479 464.4311 808.801776 464.4311 689.810708c0-118.999255 96.455819-215.45712 215.44791-215.45712 119.001301 0 215.452004 96.457866 215.452004 215.45712C895.32999 808.801776 798.875195 905.252479 679.87901 905.252479z" ></path><path d="M208.583061 483.293191l0 55.113225 197.292412 0c8.973372-19.528775 19.332301-37.97387 30.9325-55.113225L208.583061 483.293191z" ></path><path d="M681.543929 714.512297 681.543929 589.929884 627.394658 589.929884 627.394658 769.682827 807.143509 769.682827 807.143509 714.512297Z" ></path></symbol><symbol id="icon-change" viewBox="0 0 1024 1024"><path d="M920.865573 637.722376H102.113167c-2.795673 0-5.514597 0.320295-8.133237 0.911766a36.95875 36.95875 0 0 0-18.426675 10.094916c-12.353352 12.419867-14.18814 31.399127-5.52176 45.776579a37.767162 37.767162 0 0 0 8.416693 9.992585l172.344207 173.278485c14.516622 14.59337 38.053688 14.59337 52.572356 0 14.516622-14.598486 14.516622-38.262442 0-52.856835L192.145693 713.098087h728.718857c20.554128 0 37.217646-16.873296 37.217646-37.685297 0-20.820188-16.662495-37.690414-37.216623-37.690414zM102.113167 386.467959h818.752406a36.920888 36.920888 0 0 0 7.80271-0.836041 36.917818 36.917818 0 0 0 19.774369-10.360976c14.517645-14.59644 14.517645-38.262442 0-52.855811L773.199419 146.225339c-14.515598-14.595416-38.054711-14.595416-52.571333 0-14.515598 14.594393-14.515598 38.261419 0 52.856835l111.408369 112.010073H102.113167c-20.554128 0-37.2156 16.873296-37.2156 37.689391 0 20.814048 16.660448 37.686321 37.2156 37.686321z" ></path></symbol><symbol id="icon-bell" viewBox="0 0 1024 1024"><path d="M861.40397037 717.4674963c8.49540741-0.24272592 16.99081482 1.45635555 25.12213333 6.79632592-29.4912-18.93262222-48.90927408-51.94334815-48.90927407-89.68722963V424.01185185c0-154.25232592-111.53256297-283.01842963-260.56628148-314.69416296V101.79318518c0-39.3216-31.7970963-70.99733333-70.99733333-70.99733333s-70.99733333 31.7970963-70.99733334 70.99733333v7.52450371c-149.03371852 31.67573333-260.56628148 160.32047408-260.56628148 314.69416296V634.57659259c0 37.74388148-19.53943703 70.75460741-48.90927408 89.68722963 8.25268148-5.33997037 16.62672592-7.16041482 25.12213333-6.79632592-26.09303703 0.12136297-47.21019259 21.11715555-47.21019258 47.33155555s21.11715555 47.33155555 47.33155555 47.33155556h710.33742223c26.2144 0 47.33155555-21.11715555 47.33155555-47.33155556 0.12136297-25.97167408-20.99579259-47.21019259-47.08882963-47.33155555zM506.17457778 978.03377778c65.41463703 0 118.45025185-53.03561482 118.45025185-118.45025186H387.72432592c0 65.41463703 52.91425185 118.45025185 118.45025186 118.45025186z" ></path></symbol><symbol id="icon-time" viewBox="0 0 1024 1024"><path d="M508.8 992C246.4 992 32 777.6 32 512S246.4 32 508.8 32s476.8 214.4 476.8 480c3.2 265.6-211.2 480-476.8 480z m0-896C281.6 96 96 281.6 96 512s185.6 416 412.8 416c227.2 0 412.8-185.6 412.8-416 3.2-230.4-182.4-416-412.8-416z" fill="#212121" ></path><path d="M704 576h-224c-19.2 0-32-12.8-32-32v-224c0-19.2 12.8-32 32-32s32 12.8 32 32v192h192c19.2 0 32 12.8 32 32s-12.8 32-32 32z" fill="#212121" ></path></symbol><symbol id="icon-skin" viewBox="0 0 1024 1024"><path d="M511.57333333 85.86666667c-311.25333333 0-426.34666667 272-426.34666666 424.53333333s110.72 427.30666667 417.38666666 427.30666667c0 0 76.16 1.38666667 76.16-67.41333334 0-68.69333333-34.24-46.72-34.24-96.10666666 0-49.49333333 34.24-71.46666667 50.66666667-71.46666667 16.42666667 0 124.8 8.21333333 185.17333333-15.25333333 60.26666667-23.14666667 157.54666667-97.38666667 157.54666667-223.78666667 0-111.25333333-115.09333333-377.81333333-426.34666667-377.81333333zM251.62666667 511.89333333c-19.62666667 0-38.50666667-7.78666667-52.48-21.76-13.86666667-13.97333333-21.65333333-32.85333333-21.65333334-52.48-0.74666667-26.98666667 13.12-52.16 36.37333334-65.92 23.25333333-13.76 52.05333333-13.76 75.30666666 0 23.25333333 13.76 37.12 38.93333333 36.37333334 65.92 0.21333333 40.85333333-32.96 74.13333333-73.92 74.24z m139.62666666-183.68c-19.62666667 0-38.50666667-7.78666667-52.37333333-21.76-13.86666667-13.86666667-21.65333333-32.74666667-21.65333333-52.48 0-40.85333333 33.17333333-74.02666667 74.02666666-74.02666666 40.85333333 0 74.02666667 33.17333333 74.02666667 74.02666666 0.10666667 41.06666667-33.06666667 74.24-74.02666667 74.24z m237.44 0c-40.85333333 0-74.02666667-33.17333333-74.02666666-74.24-0.74666667-26.98666667 13.12-52.16 36.37333333-65.92a74.34666667 74.34666667 0 0 1 75.30666667 0c23.25333333 13.76 37.12 38.93333333 36.37333333 65.92 0.10666667 41.06666667-33.06666667 74.24-74.02666667 74.24z m141.01333334 183.68c-40.85333333 0-74.02666667-33.17333333-74.02666667-74.24-0.74666667-26.98666667 13.12-52.16 36.37333333-65.92 23.25333333-13.76 52.05333333-13.76 75.30666667 0 23.25333333 13.76 37.12 38.93333333 36.37333333 65.92 0.10666667 19.62666667-7.68 38.50666667-21.54666666 52.48-13.97333333 13.86666667-32.74666667 21.76-52.48 21.76z m0 0" ></path></symbol><symbol id="icon-mail" viewBox="0 0 1024 1024"><path d="M1021.407 146.857L512.645 574.783 3.909 146.857zM0.007 183.402L339.886 471.24 0.007 876.743z" ></path><path d="M39.354 877.144L363.529 494.4 512.54 616.772l149.274-126.179 324.157 386.551zM1023.993 876.743L684.122 471.24l339.871-287.838z" ></path></symbol><symbol id="icon-email" viewBox="0 0 1024 1024"><path d="M1024.00144 220.64v574.32c0 5.76-0.736 11.456-1.824 17.072v0.064l-0.224 0.944A84.336 84.336 0 0 1 939.29744 880H101.08944a102.72 102.72 0 0 1-82.512-40.832 95.904 95.904 0 0 1-18.56-57.248V236.256a74.08 74.08 0 0 1 52.064-70.784l0.736-0.208 0.208-0.08A127.648 127.648 0 0 1 89.66544 160h883.424c1.328 0.512 2.64 1.232 4.032 1.44 25.52 4.32 40.592 19.152 45.344 44.496v0.08c0.88 4.816 1.536 9.712 1.536 14.608zM512.00144 591.232l451.152-379.472c-66.272-3.888-888.48-1.728-897.84 2.368L512.00144 591.2v0.064z m133.856-45.152l-114.112 96.144c-13.76 11.52-25.6 11.664-39.2 0.208l-48.272-40.752-63.84-53.936L81.02544 825.28l1.024 2.304h873.328L645.79344 546.08h0.064z m-304.864-31.68L51.79344 270.032v512.48l289.28-268.096h-0.08z m344.352-1.648l287.088 260.96V270.944L685.34544 512.768z" ></path></symbol><symbol id="icon-meeting" viewBox="0 0 1059 1024"><path d="M434.093791 101.281952m-101.281953 0a101.281952 101.281952 0 1 0 202.563905 0 101.281952 101.281952 0 1 0-202.563905 0Z" fill="#2c2c2c" ></path><path d="M434.093791 174.941554a172.310854 172.310854 0 0 1 172.310854 172.310854V460.372511H263.098286V347.252408a172.310854 172.310854 0 0 1 170.995505-172.310854z" fill="#2c2c2c" ></path><path d="M822.12205 101.281952m-101.281952 0a101.281952 101.281952 0 1 0 202.563905 0 101.281952 101.281952 0 1 0-202.563905 0Z" fill="#2c2c2c" ></path><path d="M822.12205 174.941554a172.310854 172.310854 0 0 1 172.310854 172.310854V460.372511H649.811196V347.252408a172.310854 172.310854 0 0 1 172.310854-172.310854z" fill="#2c2c2c" ></path><path d="M434.093791 632.683365m-101.281953 0a101.281952 101.281952 0 1 0 202.563905 0 101.281952 101.281952 0 1 0-202.563905 0Z" fill="#2c2c2c" ></path><path d="M434.093791 706.342967a172.310854 172.310854 0 0 1 172.310854 172.310854v112.462428H263.098286v-112.462428a172.310854 172.310854 0 0 1 170.995505-172.310854z" fill="#2c2c2c" ></path><path d="M822.12205 632.683365m-101.281952 0a101.281952 101.281952 0 1 0 202.563905 0 101.281952 101.281952 0 1 0-202.563905 0Z" fill="#2c2c2c" ></path><path d="M822.12205 706.342967a172.310854 172.310854 0 0 1 172.310854 172.310854v112.462428H649.811196v-112.462428a172.310854 172.310854 0 0 1 172.310854-172.310854z" fill="#2c2c2c" ></path><path d="M1026.65898 958.232498H282.828537a226.240206 226.240206 0 0 1 0-451.822736h743.830443a32.226076 32.226076 0 0 0 31.568401-32.88375 31.568401 31.568401 0 0 0-31.568401-32.883751H282.828537A287.403982 287.403982 0 0 0 0.02828 731.992293a288.061657 288.061657 0 0 0 282.800257 292.007707h743.830443a32.883751 32.883751 0 0 0 0-65.767502z" fill="#2c2c2c" ></path></symbol><symbol id="icon-today" viewBox="0 0 1024 1024"><path d="M197.667 361c2.11 0 7.389-2.111 15.833-6.333 78.112-35.89 155.166-85.5 231.167-148.834 2.11-2.11 5.277-4.222 9.5-6.333 42.222-40.111 77.055-53.833 104.5-41.167 6.333 4.223 25.333 19 57 44.334 54.889 46.444 138.277 100.277 250.166 161.5 29.556 16.889 38 38 25.334 63.333-12.667 33.778-47.5 34.833-104.5 3.167-73.89-35.89-150.944-89.722-231.167-161.5-12.667-8.445-28.5-6.334-47.5 6.333l-3.167 3.167c-82.333 71.778-167.833 125.61-256.5 161.5-35.889 14.778-61.222 11.61-76-9.5C157.555 403.222 166 380 197.667 361z m47.5 174.167h525.666c59.112 0 86.556 22.166 82.334 66.5-63.334 183.667-240.666 281.833-532 294.5-38-2.111-57-19-57-50.667 4.222-23.222 26.388-36.944 66.5-41.167 192.112-8.444 324.055-60.166 395.833-155.166 10.556-16.89 9.5-26.39-3.167-28.5H245.167c-27.445 0-42.223-13.722-44.334-41.167 2.111-27.445 16.89-42.222 44.334-44.333zM546 500.333c-14.778-12.666-40.11-45.388-76-98.166-19-23.223-15.833-43.278 9.5-60.167 25.333-14.778 49.611-11.611 72.833 9.5 33.778 33.778 60.167 69.666 79.167 107.667 6.333 27.444-2.111 47.5-25.333 60.166-25.334 10.556-45.39 4.223-60.167-19z" ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M512 486.10923498A220.07150577 220.07150577 0 1 1 512 45.96622222a220.07150577 220.07150577 0 0 1 0 440.14301276zM45.96622222 926.25224651v-25.89076503a362.47071645 362.47071645 0 0 1 362.47071646-362.47071646h207.12612264a362.47071645 362.47071645 0 0 1 362.47071646 362.47071646v25.89076503a51.78153127 51.78153127 0 0 1-51.78153127 51.78153127H97.74775349a51.78153127 51.78153127 0 0 1-51.78153127-51.78153127z" ></path></symbol><symbol id="icon-listadd" viewBox="0 0 1024 1024"><path d="M775.7 188c15.9 0 30.9 6.3 42.3 17.7 11.4 11.4 17.7 26.4 17.7 42.3v527.6c0 15.9-6.3 30.9-17.7 42.3s-26.4 17.7-42.3 17.7H248c-15.9 0-30.9-6.3-42.3-17.7-11.4-11.4-17.7-26.4-17.7-42.3V248c0-15.9 6.3-30.9 17.7-42.3 11.4-11.4 26.4-17.7 42.3-17.7h527.7m0-60H248c-66 0-120 54-120 120v527.6c0 66 54 120 120 120h527.6c66 0 120-54 120-120V248c0.1-66-53.9-120-119.9-120z" ></path><path d="M542.6 480.9l0.9-151.6c0.1-17.2-13.9-31.3-31.2-31.5-8.4 0-16.2 3.2-22.2 9.1l-0.1 0.1c-5.9 5.9-9.1 13.7-9.2 22l-0.8 151.7-150.5-0.2c-17.2 0-31.3 14-31.4 31.2-0.1 17.2 13.9 31.3 31.3 31.4l150.3 0.2-0.7 150.6c-0.1 17.3 13.9 31.4 31.1 31.5 8.4 0.1 16.4-3.2 22.4-9.2 5.8-5.8 9.1-13.6 9.2-22l0.8-150.7 153.1 0.2c8.4 0 16.3-3.3 22.2-9.2 5.9-5.9 9.1-13.7 9.2-22.1 0.1-17.2-13.9-31.3-31.3-31.4l-153.1-0.1z" ></path></symbol><symbol id="icon-sun" viewBox="0 0 1024 1024"><path d="M512 246.518519c-147.949037 0-265.481481 117.532444-265.481481 265.481481 0 147.930074 117.532444 265.481481 265.481481 265.481481s265.481481-117.551407 265.481481-265.481481c0-147.949037-117.532444-265.481481-265.481481-265.481481z m0 455.111111c-105.509926 0-189.62963-84.119704-189.62963-189.62963s84.119704-189.62963 189.62963-189.62963 189.62963 84.119704 189.62963 189.62963-84.119704 189.62963-189.62963 189.62963zM283.591111 229.091556L170.799407 116.299852 116.698074 170.420148l112.772741 112.772741 54.120296-54.101333zM905.860741 170.401185l-54.101334-54.101333-112.791703 112.772741 54.120296 54.120296 112.772741-112.791704zM549.925926 0h-75.851852v170.666667h75.851852V0zM170.666667 474.074074H0v75.851852h170.666667v-75.851852zM116.698074 851.361185l54.101333 54.120296 112.791704-112.791703-54.120296-54.101334-112.772741 112.772741zM853.333333 474.074074v75.851852h170.666667v-75.851852h-170.666667z m-114.365629 318.615704l112.791703 112.772741 54.101334-54.101334-112.772741-112.772741-54.120296 54.101334zM474.074074 1024h75.851852v-170.666667h-75.851852v170.666667z" ></path></symbol></svg>',function(h){var c=(c=document.getElementsByTagName("script"))[c.length-1],l=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var a,t,o,i,v,s=function(c,l){l.parentNode.insertBefore(c,l)};if(l&&!h.__iconfont__svg__cssinject__){h.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}a=function(){var c,l=document.createElement("div");l.innerHTML=h._iconfont_svg_string_1417123,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(c=document.body).firstChild?s(l,c.firstChild):c.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),a()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(o=a,i=h.document,v=!1,p(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,z())})}function z(){v\|\|(v=!0,o())}function p(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(p,50)}z()}}(window);

Ignore Space Show notes View

project/hivuiLogin/assets/iconfonts/iconfont.js 0 → 100644

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/iconfont.json 0 → 100644
{ "id": "1417123", "name": "zhc-portal", "font_family": "iconfont", "css_prefix_text": "icon-", "description": "", "glyphs": [ { "icon_id": "35423408", "name": "新标签页", "font_class": "xinbiaoqianye", "unicode": "e8ee", "unicode_decimal": 59630 }, { "icon_id": "3199598", "name": "职位岗位", "font_class": "drxx12", "unicode": "e714", "unicode_decimal": 59156 }, { "icon_id": "26587993", "name": "员工管理", "font_class": "yuangongguanli", "unicode": "e644", "unicode_decimal": 58948 }, { "icon_id": "31063761", "name": "在岗", "font_class": "zaigang", "unicode": "e6d3", "unicode_decimal": 59091 }, { "icon_id": "31067136", "name": "职级", "font_class": "zhiji", "unicode": "e6d4", "unicode_decimal": 59092 }, { "icon_id": "31067137", "name": "用户编号", "font_class": "yonghubianhao", "unicode": "e6d5", "unicode_decimal": 59093 }, { "icon_id": "31067138", "name": "岗级", "font_class": "gangji", "unicode": "e6d6", "unicode_decimal": 59094 }, { "icon_id": "31067578", "name": "修改用户信息", "font_class": "xiugaiyonghuxinxi", "unicode": "e6d7", "unicode_decimal": 59095 }, { "icon_id": "31067579", "name": "修改密码", "font_class": "xiugaimima", "unicode": "e6d8", "unicode_decimal": 59096 }, { "icon_id": "31133581", "name": "机构", "font_class": "jigou", "unicode": "e6d9", "unicode_decimal": 59097 }, { "icon_id": "15676330", "name": "xlsx", "font_class": "xlsx", "unicode": "e605", "unicode_decimal": 58885 }, { "icon_id": "249352", "name": "工作流程图", "font_class": "flow", "unicode": "e602", "unicode_decimal": 58882 }, { "icon_id": "6289727", "name": "功能", "font_class": "func", "unicode": "e604", "unicode_decimal": 58884 }, { "icon_id": "2959123", "name": "组织机构", "font_class": "org", "unicode": "e63c", "unicode_decimal": 58940 }, { "icon_id": "8795820", "name": "根节点", "font_class": "root", "unicode": "e810", "unicode_decimal": 59408 }, { "icon_id": "5881141", "name": "部门", "font_class": "dpt", "unicode": "e62b", "unicode_decimal": 58923 }, { "icon_id": "23081148", "name": "岗位", "font_class": "ptm", "unicode": "e65c", "unicode_decimal": 58972 }, { "icon_id": "5387606", "name": "全屏", "font_class": "quanping", "unicode": "eb11", "unicode_decimal": 60177 }, { "icon_id": "6691134", "name": "权限", "font_class": "quanxian", "unicode": "e63f", "unicode_decimal": 58943 }, { "icon_id": "4736385", "name": "关闭其它", "font_class": "closeOther", "unicode": "e631", "unicode_decimal": 58929 }, { "icon_id": "6395682", "name": "关闭", "font_class": "close-circle", "unicode": "e629", "unicode_decimal": 58921 }, { "icon_id": "10296880", "name": "关闭所有", "font_class": "closeAll", "unicode": "e60f", "unicode_decimal": 58895 }, { "icon_id": "879513", "name": "刷新", "font_class": "refresh", "unicode": "e619", "unicode_decimal": 58905 }, { "icon_id": "2576777", "name": "tree", "font_class": "tree", "unicode": "e6e8", "unicode_decimal": 59112 }, { "icon_id": "80224", "name": "退出", "font_class": "tuichu", "unicode": "e627", "unicode_decimal": 58919 }, { "icon_id": "9031766", "name": "sort16", "font_class": "moveSort2", "unicode": "e630", "unicode_decimal": 58928 }, { "icon_id": "10367835", "name": "sort", "font_class": "moveSort1", "unicode": "e93c", "unicode_decimal": 59708 }, { "icon_id": "11351033", "name": "-sort-2", "font_class": "moveSort", "unicode": "e73d", "unicode_decimal": 59197 }, { "icon_id": "777689", "name": "edit", "font_class": "edit", "unicode": "e62f", "unicode_decimal": 58927 }, { "icon_id": "8551103", "name": "arrows down", "font_class": "arrow-leftMore-circle", "unicode": "e623", "unicode_decimal": 58915 }, { "icon_id": "11266666", "name": "arrows down", "font_class": "arrow-rightMore-circle", "unicode": "e6fc", "unicode_decimal": 59132 }, { "icon_id": "519157", "name": "check-box-empty", "font_class": "checkbox-empty", "unicode": "e625", "unicode_decimal": 58917 }, { "icon_id": "519158", "name": "check-box", "font_class": "checkbox", "unicode": "e626", "unicode_decimal": 58918 }, { "icon_id": "8660113", "name": "add", "font_class": "add", "unicode": "e6ee", "unicode_decimal": 59118 }, { "icon_id": "6878719", "name": "delete", "font_class": "delete", "unicode": "e698", "unicode_decimal": 59032 }, { "icon_id": "1005342", "name": "info", "font_class": "info", "unicode": "e60a", "unicode_decimal": 58890 }, { "icon_id": "5279795", "name": "error", "font_class": "error", "unicode": "e620", "unicode_decimal": 58912 }, { "icon_id": "7597274", "name": "warn", "font_class": "warn", "unicode": "e601", "unicode_decimal": 58881 }, { "icon_id": "9788470", "name": "close", "font_class": "close", "unicode": "e607", "unicode_decimal": 58887 }, { "icon_id": "1802993", "name": "set", "font_class": "set-fill", "unicode": "e61e", "unicode_decimal": 58910 }, { "icon_id": "1380012", "name": "设置", "font_class": "set", "unicode": "e61d", "unicode_decimal": 58909 }, { "icon_id": "5140499", "name": "图表", "font_class": "chart", "unicode": "e632", "unicode_decimal": 58930 }, { "icon_id": "11198155", "name": "cc-arrow-right-circle", "font_class": "arrow-down-circle", "unicode": "e6f8", "unicode_decimal": 59128 }, { "icon_id": "10900908", "name": "arrow", "font_class": "arrow-down", "unicode": "e6f6", "unicode_decimal": 59126 }, { "icon_id": "11032339", "name": "arrow", "font_class": "arrow-left", "unicode": "e6f7", "unicode_decimal": 59127 }, { "icon_id": "11198224", "name": "cc-arrow-right-circle", "font_class": "arrow-up-circle", "unicode": "e6fa", "unicode_decimal": 59130 }, { "icon_id": "11198225", "name": "cc-arrow-right-circle", "font_class": "arrow-left-circle", "unicode": "e6fb", "unicode_decimal": 59131 }, { "icon_id": "58331", "name": "search", "font_class": "search", "unicode": "e621", "unicode_decimal": 58913 }, { "icon_id": "88038", "name": "clock", "font_class": "clock", "unicode": "e600", "unicode_decimal": 58880 }, { "icon_id": "144131", "name": "arrow", "font_class": "arrow-right", "unicode": "e636", "unicode_decimal": 58934 }, { "icon_id": "247436", "name": "table", "font_class": "table", "unicode": "e699", "unicode_decimal": 59033 }, { "icon_id": "372107", "name": "cc-arrow-right-circle", "font_class": "arrow-right-circle", "unicode": "e60d", "unicode_decimal": 58893 }, { "icon_id": "585102", "name": "help", "font_class": "help", "unicode": "e65d", "unicode_decimal": 58973 }, { "icon_id": "1045524", "name": "yxx_mark", "font_class": "mark", "unicode": "e63d", "unicode_decimal": 58941 }, { "icon_id": "1092161", "name": "钱", "font_class": "money", "unicode": "e640", "unicode_decimal": 58944 }, { "icon_id": "1104404", "name": "报表2", "font_class": "analyse", "unicode": "e6d2", "unicode_decimal": 59090 }, { "icon_id": "1237019", "name": "待办", "font_class": "dealt", "unicode": "e64a", "unicode_decimal": 58954 }, { "icon_id": "1327132", "name": "切换", "font_class": "change", "unicode": "e60e", "unicode_decimal": 58894 }, { "icon_id": "3405405", "name": "消息", "font_class": "bell", "unicode": "e6eb", "unicode_decimal": 59115 }, { "icon_id": "4111563", "name": "time", "font_class": "time", "unicode": "e64d", "unicode_decimal": 58957 }, { "icon_id": "5321791", "name": "画板主题", "font_class": "skin", "unicode": "e664", "unicode_decimal": 58980 }, { "icon_id": "5354204", "name": "邮箱", "font_class": "mail", "unicode": "e6af", "unicode_decimal": 59055 }, { "icon_id": "6050679", "name": "email", "font_class": "email", "unicode": "e628", "unicode_decimal": 58920 }, { "icon_id": "6427820", "name": "会议管理", "font_class": "meeting", "unicode": "e612", "unicode_decimal": 58898 }, { "icon_id": "6447175", "name": "今日收入", "font_class": "today", "unicode": "e645", "unicode_decimal": 58949 }, { "icon_id": "7876854", "name": "user", "font_class": "user", "unicode": "e606", "unicode_decimal": 58886 }, { "icon_id": "9102193", "name": "add", "font_class": "listadd", "unicode": "e654", "unicode_decimal": 58964 }, { "icon_id": "10104436", "name": "sun", "font_class": "sun", "unicode": "e6f5", "unicode_decimal": 59125 } ] }

Ignore Space Show notes View

project/hivuiLogin/assets/iconfonts/iconfont.json 0 → 100644

{
  "id": "1417123",
  "name": "zhc-portal",
  "font_family": "iconfont",
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
    {
      "icon_id": "35423408",
      "name": "新标签页",
      "font_class": "xinbiaoqianye",
      "unicode": "e8ee",
      "unicode_decimal": 59630
    },
    {
      "icon_id": "3199598",
      "name": "职位岗位",
      "font_class": "drxx12",
      "unicode": "e714",
      "unicode_decimal": 59156
    },
    {
      "icon_id": "26587993",
      "name": "员工管理",
      "font_class": "yuangongguanli",
      "unicode": "e644",
      "unicode_decimal": 58948
    },
    {
      "icon_id": "31063761",
      "name": "在岗",
      "font_class": "zaigang",
      "unicode": "e6d3",
      "unicode_decimal": 59091
    },
    {
      "icon_id": "31067136",
      "name": "职级",
      "font_class": "zhiji",
      "unicode": "e6d4",
      "unicode_decimal": 59092
    },
    {
      "icon_id": "31067137",
      "name": "用户编号",
      "font_class": "yonghubianhao",
      "unicode": "e6d5",
      "unicode_decimal": 59093
    },
    {
      "icon_id": "31067138",
      "name": "岗级",
      "font_class": "gangji",
      "unicode": "e6d6",
      "unicode_decimal": 59094
    },
    {
      "icon_id": "31067578",
      "name": "修改用户信息",
      "font_class": "xiugaiyonghuxinxi",
      "unicode": "e6d7",
      "unicode_decimal": 59095
    },
    {
      "icon_id": "31067579",
      "name": "修改密码",
      "font_class": "xiugaimima",
      "unicode": "e6d8",
      "unicode_decimal": 59096
    },
    {
      "icon_id": "31133581",
      "name": "机构",
      "font_class": "jigou",
      "unicode": "e6d9",
      "unicode_decimal": 59097
    },
    {
      "icon_id": "15676330",
      "name": "xlsx",
      "font_class": "xlsx",
      "unicode": "e605",
      "unicode_decimal": 58885
    },
    {
      "icon_id": "249352",
      "name": "工作流程图",
      "font_class": "flow",
      "unicode": "e602",
      "unicode_decimal": 58882
    },
    {
      "icon_id": "6289727",
      "name": "功能",
      "font_class": "func",
      "unicode": "e604",
      "unicode_decimal": 58884
    },
    {
      "icon_id": "2959123",
      "name": "组织机构",
      "font_class": "org",
      "unicode": "e63c",
      "unicode_decimal": 58940
    },
    {
      "icon_id": "8795820",
      "name": "根节点",
      "font_class": "root",
      "unicode": "e810",
      "unicode_decimal": 59408
    },
    {
      "icon_id": "5881141",
      "name": "部门",
      "font_class": "dpt",
      "unicode": "e62b",
      "unicode_decimal": 58923
    },
    {
      "icon_id": "23081148",
      "name": "岗位",
      "font_class": "ptm",
      "unicode": "e65c",
      "unicode_decimal": 58972
    },
    {
      "icon_id": "5387606",
      "name": "全屏",
      "font_class": "quanping",
      "unicode": "eb11",
      "unicode_decimal": 60177
    },
    {
      "icon_id": "6691134",
      "name": "权限",
      "font_class": "quanxian",
      "unicode": "e63f",
      "unicode_decimal": 58943
    },
    {
      "icon_id": "4736385",
      "name": "关闭其它",
      "font_class": "closeOther",
      "unicode": "e631",
      "unicode_decimal": 58929
    },
    {
      "icon_id": "6395682",
      "name": "关  闭",
      "font_class": "close-circle",
      "unicode": "e629",
      "unicode_decimal": 58921
    },
    {
      "icon_id": "10296880",
      "name": "关闭所有",
      "font_class": "closeAll",
      "unicode": "e60f",
      "unicode_decimal": 58895
    },
    {
      "icon_id": "879513",
      "name": "刷新",
      "font_class": "refresh",
      "unicode": "e619",
      "unicode_decimal": 58905
    },
    {
      "icon_id": "2576777",
      "name": "tree",
      "font_class": "tree",
      "unicode": "e6e8",
      "unicode_decimal": 59112
    },
    {
      "icon_id": "80224",
      "name": "退出",
      "font_class": "tuichu",
      "unicode": "e627",
      "unicode_decimal": 58919
    },
    {
      "icon_id": "9031766",
      "name": "sort16",
      "font_class": "moveSort2",
      "unicode": "e630",
      "unicode_decimal": 58928
    },
    {
      "icon_id": "10367835",
      "name": "sort",
      "font_class": "moveSort1",
      "unicode": "e93c",
      "unicode_decimal": 59708
    },
    {
      "icon_id": "11351033",
      "name": "-sort-2",
      "font_class": "moveSort",
      "unicode": "e73d",
      "unicode_decimal": 59197
    },
    {
      "icon_id": "777689",
      "name": "edit",
      "font_class": "edit",
      "unicode": "e62f",
      "unicode_decimal": 58927
    },
    {
      "icon_id": "8551103",
      "name": "arrows down",
      "font_class": "arrow-leftMore-circle",
      "unicode": "e623",
      "unicode_decimal": 58915
    },
    {
      "icon_id": "11266666",
      "name": "arrows down",
      "font_class": "arrow-rightMore-circle",
      "unicode": "e6fc",
      "unicode_decimal": 59132
    },
    {
      "icon_id": "519157",
      "name": "check-box-empty",
      "font_class": "checkbox-empty",
      "unicode": "e625",
      "unicode_decimal": 58917
    },
    {
      "icon_id": "519158",
      "name": "check-box",
      "font_class": "checkbox",
      "unicode": "e626",
      "unicode_decimal": 58918
    },
    {
      "icon_id": "8660113",
      "name": "add",
      "font_class": "add",
      "unicode": "e6ee",
      "unicode_decimal": 59118
    },
    {
      "icon_id": "6878719",
      "name": "delete",
      "font_class": "delete",
      "unicode": "e698",
      "unicode_decimal": 59032
    },
    {
      "icon_id": "1005342",
      "name": "info",
      "font_class": "info",
      "unicode": "e60a",
      "unicode_decimal": 58890
    },
    {
      "icon_id": "5279795",
      "name": "error",
      "font_class": "error",
      "unicode": "e620",
      "unicode_decimal": 58912
    },
    {
      "icon_id": "7597274",
      "name": "warn",
      "font_class": "warn",
      "unicode": "e601",
      "unicode_decimal": 58881
    },
    {
      "icon_id": "9788470",
      "name": "close",
      "font_class": "close",
      "unicode": "e607",
      "unicode_decimal": 58887
    },
    {
      "icon_id": "1802993",
      "name": "set",
      "font_class": "set-fill",
      "unicode": "e61e",
      "unicode_decimal": 58910
    },
    {
      "icon_id": "1380012",
      "name": "设置",
      "font_class": "set",
      "unicode": "e61d",
      "unicode_decimal": 58909
    },
    {
      "icon_id": "5140499",
      "name": "图表",
      "font_class": "chart",
      "unicode": "e632",
      "unicode_decimal": 58930
    },
    {
      "icon_id": "11198155",
      "name": "cc-arrow-right-circle",
      "font_class": "arrow-down-circle",
      "unicode": "e6f8",
      "unicode_decimal": 59128
    },
    {
      "icon_id": "10900908",
      "name": "arrow",
      "font_class": "arrow-down",
      "unicode": "e6f6",
      "unicode_decimal": 59126
    },
    {
      "icon_id": "11032339",
      "name": "arrow",
      "font_class": "arrow-left",
      "unicode": "e6f7",
      "unicode_decimal": 59127
    },
    {
      "icon_id": "11198224",
      "name": "cc-arrow-right-circle",
      "font_class": "arrow-up-circle",
      "unicode": "e6fa",
      "unicode_decimal": 59130
    },
    {
      "icon_id": "11198225",
      "name": "cc-arrow-right-circle",
      "font_class": "arrow-left-circle",
      "unicode": "e6fb",
      "unicode_decimal": 59131
    },
    {
      "icon_id": "58331",
      "name": "search",
      "font_class": "search",
      "unicode": "e621",
      "unicode_decimal": 58913
    },
    {
      "icon_id": "88038",
      "name": "clock",
      "font_class": "clock",
      "unicode": "e600",
      "unicode_decimal": 58880
    },
    {
      "icon_id": "144131",
      "name": "arrow",
      "font_class": "arrow-right",
      "unicode": "e636",
      "unicode_decimal": 58934
    },
    {
      "icon_id": "247436",
      "name": "table",
      "font_class": "table",
      "unicode": "e699",
      "unicode_decimal": 59033
    },
    {
      "icon_id": "372107",
      "name": "cc-arrow-right-circle",
      "font_class": "arrow-right-circle",
      "unicode": "e60d",
      "unicode_decimal": 58893
    },
    {
      "icon_id": "585102",
      "name": "help",
      "font_class": "help",
      "unicode": "e65d",
      "unicode_decimal": 58973
    },
    {
      "icon_id": "1045524",
      "name": "yxx_mark",
      "font_class": "mark",
      "unicode": "e63d",
      "unicode_decimal": 58941
    },
    {
      "icon_id": "1092161",
      "name": "钱",
      "font_class": "money",
      "unicode": "e640",
      "unicode_decimal": 58944
    },
    {
      "icon_id": "1104404",
      "name": "报表2",
      "font_class": "analyse",
      "unicode": "e6d2",
      "unicode_decimal": 59090
    },
    {
      "icon_id": "1237019",
      "name": "待办",
      "font_class": "dealt",
      "unicode": "e64a",
      "unicode_decimal": 58954
    },
    {
      "icon_id": "1327132",
      "name": "切换",
      "font_class": "change",
      "unicode": "e60e",
      "unicode_decimal": 58894
    },
    {
      "icon_id": "3405405",
      "name": "消息",
      "font_class": "bell",
      "unicode": "e6eb",
      "unicode_decimal": 59115
    },
    {
      "icon_id": "4111563",
      "name": "time",
      "font_class": "time",
      "unicode": "e64d",
      "unicode_decimal": 58957
    },
    {
      "icon_id": "5321791",
      "name": "画板主题",
      "font_class": "skin",
      "unicode": "e664",
      "unicode_decimal": 58980
    },
    {
      "icon_id": "5354204",
      "name": "邮箱",
      "font_class": "mail",
      "unicode": "e6af",
      "unicode_decimal": 59055
    },
    {
      "icon_id": "6050679",
      "name": "email",
      "font_class": "email",
      "unicode": "e628",
      "unicode_decimal": 58920
    },
    {
      "icon_id": "6427820",
      "name": "会议管理",
      "font_class": "meeting",
      "unicode": "e612",
      "unicode_decimal": 58898
    },
    {
      "icon_id": "6447175",
      "name": "今日收入",
      "font_class": "today",
      "unicode": "e645",
      "unicode_decimal": 58949
    },
    {
      "icon_id": "7876854",
      "name": "user",
      "font_class": "user",
      "unicode": "e606",
      "unicode_decimal": 58886
    },
    {
      "icon_id": "9102193",
      "name": "add",
      "font_class": "listadd",
      "unicode": "e654",
      "unicode_decimal": 58964
    },
    {
      "icon_id": "10104436",
      "name": "sun",
      "font_class": "sun",
      "unicode": "e6f5",
      "unicode_decimal": 59125
    }
  ]
}

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/iconfont.svg 0 → 100644

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/iconfont.ttf 0 → 100644
Not supported

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/iconfont.woff 0 → 100644
Not supported

Ignore Space Show notes View project/hivuiLogin/assets/iconfonts/iconfont.woff2 0 → 100644
Not supported

Ignore Space Show notes View project/hivuiLogin/components/LoginPanel.vue
<template> <div :class="'login_form' + ((captchaObj&&captchaObj.captchaId)?' showCaptcha':'')" v-if="config.isPwdLogin \|\| config.isScan"> <!-- 用户名密码窗口 --> <div id="showQr" class="loginMainBox" :hidden="!(config.isPwdLogin && currLoginType == 'com')"> <!-- <img @click="changeQr" class="icon-qrcode" :src="scanIcon" :hidden="!config.isScan" /> --> <i class="iconfont icon-erweima1 icon-qrcode" @click="changeQr" :hidden="!config.isScan"></i> <div class="login-tip" :hidden="!config.isScan"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">{{$t('hivuiLogin_main_scan_login')}}</div> </div> </div> <div class="login_form_bd"> <div class="error_tips"></div> <input type="hidden" name="directAction" value="" /> <input type="hidden" name="refererurl" value="" /> <div class="login_field"> <label>{{$t('hivuiLogin_main_user')}}</label> <input class="login_field_text" v-model="username" type="text" id="txtUserName" name="userName" :placeholder="$t('hivuiLogin_main_user_ph')" autofocus required autocomplete="off" @keyup.enter="loginFunc" :readonly="usernameReadonly" /> <i class="fa fa-user"></i> </div> <div class="login_field"> <label>{{$t('hivuiLogin_main_pw')}}</label> <input class="login_field_text" v-model="password" type="text" onfocus="this.type='password'" id="txtPassword" name="password" :placeholder="$t('hivuiLogin_main_pw_ph')" required autocomplete="off" @keyup.enter="loginFunc" /> <i class="fa fa-unlock-alt"></i> </div> <div class="login_field captcha_field" v-if="captchaObj&&captchaObj.captchaId"> <label>{{$t('hivuiLogin_main_captcha')}}</label> <div style="display:flex;align-items:center;"> <input class="login_field_text" v-model="loginCaptcha" type="text" id="loginCaptcha" name="captcha" :placeholder="$t('hivuiLogin_main_captcha_ph')" autofocus required autocomplete="off" @keyup.enter="loginFunc" style="width:50%;" /> <img :src="captchaObj.imageData" @click="getCaptchaPicObj"> </div> </div> <div class="saveCheckbox_box" v-if="!miniLoginInfo"> <label for="saveCheckbox" ><i :class=" 'fa ' + (isCheckRu ? 'fa-check-square-o' : 'fa-square-o') " ></i >{{$t('hivuiLogin_main_save_user')}}</label > <input type="checkbox" id="saveCheckbox" style="display: none" v-model="isCheckRu" @change="rememberUserEvent" /> <span class="forgetPw" @click="showResetPw" ><i class="fa fa-lock"></i ><span style="margin-left: 5px">{{$t('hivuiLogin_main_forget_user')}}</span></span > </div> <div class="login_form_btn"> <div class="login_btn_area"> <button :style="btnStyle" :class="'loginBtn' + (loginLoading ? ' disabled' : '')" @click="loginFunc" > {{$t('hivuiLogin_main_login_btn')}}<i :hidden="!loginLoading" class="el-icon-loading" ></i> </button> </div> </div> <div class="login_form_bottom" v-if="!miniLoginInfo"> <div class="register_tips" :hidden="config.hideRegister"> {{$t('hivuiLogin_main_register1')}} <span @click="goRegisterPage">{{$t('hivuiLogin_main_register2')}}</span> </div> <el-dropdown @command="changeLang" class="langDropdown" :hidden="!config.showChangeLangBtn"> <span class="el-dropdown-link"> {{currLangDesc}}<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <template v-for="(item,index) in langList"> <el-dropdown-item :key="'langList'+index" :command="item.name+','+item.key">{{item.name}}</el-dropdown-item> </template> </el-dropdown-menu> </el-dropdown> </div> <el-popover v-if="(hasAppQRCodeConfig \|\| config.appQRcode) && !miniLoginInfo" class="login_form_appqr" placement="bottom" width="210" popper-class="appQRPopper"> <div ref="appQRcode" class="login_download_app"> <template v-if="hasAppQRCodeConfig"> <canvas v-if="!appQRCodeQRcode_img.startsWith('imgUrl:')"></canvas> <img v-else :src="appQRCodeQRcode_img.replace('imgUrl:','')"> </template> <template v-else> <canvas v-if="!config.appQRcode.startsWith('imgUrl:')"></canvas> <img v-else :src="config.appQRcode.replace('imgUrl:','')"> </template> </div> <span slot="reference" class="login_form_app" :title="appQRCodeTitle" v-if="hasAppQRCodeConfig"> <img :src="appQRCodeSrc" :alt="config.appQRcodeConfig.title" v-if="appQRCodeSrc" :style="getQRCodeStyle()"> <i class="miniIcon" data-type="app" v-else></i> {{config.appQRcodeConfig.title}} </span> <span slot="reference" class="login_form_app" :title="$t('hivuiLogin_main_download')" v-else> <i class="miniIcon" data-type="app"></i> {{$t('hivuiLogin_main_download')}} </span> </el-popover> </div> </div> <!-- 扫码窗口 --> <div id="showCom" class="loginMainBox" :hidden="!(config.isScan && currLoginType == 'scan')" > <div class="login_form_hd"> <h3>{{$t('hivuiLogin_main_scan_login')}}</h3> <!-- <img @click="changeCom" class="icon-qrcode" :src="comIcon" alt="" :hidden="!config.isPwdLogin" /> --> <i class="iconfont icon-diannao1 icon-qrcode" @click="changeCom" :hidden="!config.isPwdLogin"></i> <div class="login-tip" :hidden="!config.isPwdLogin"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">{{$t('hivuiLogin_main_pw_text')}}</div> </div> </div> </div> <!-- 扫码界面 --> <div class="scan-page"> <!-- 初始状态 --> <div class="state default" v-if="scanState ==-1"> <div class="qr"> <img ref="scanQrCode" :src="scanQrCode" :load="scanLoading"/> </div> <div class="scan-info"> <div class="countdown"> <span>{{countdown}}</span> s </div> <div class="scan-desc"> <div> <!-- <img :src="saomaIcon"/> --> <i class="iconfont icon-scan"></i> </div> <div class="right"> <span> {{$t('hivuiLogin_main_app_text1')}} <a class="login-paimary-color">{{config.appName}}</a><br /> {{$t('hivuiLogin_main_app_text3')}} </span> </div> </div> </div> </div> <!-- 扫码中 --> <div class="state scanning" v-else-if="scanState == 0"> <div class="qr"> <img ref="scanQrCode" :src="scanQrCode" :load="scanLoading" /> <div class="loading-bg" v-loading="true"> </div> </div> <div class="scan-info"> <div class="scan-desc"> <div style="text-align:center;"> <span class="login-paimary-color" style="font-size:16px;">正在扫码...</span><br /> <span>请在手机上确认登录</span> </div> </div> </div> </div> <!-- 二维码错误 --> <div class="state expired" v-else> <div class="qr"> <img ref="scanQrCode" :src="scanQrCode" :load="scanLoading" /> <div class="loading-bg opacity"> <div class="loading-text"> <i class="el-icon-warning"></i> <span >{{scanErrorMsg}}</span> <el-button type="text" @click="refreshScanQrCode">点击刷新</el-button> </div> </div> </div> <div class="scan-info"> <div class="scan-desc"> <div> <!-- <img :src="saomaIcon"/> --> <i class="iconfont icon-scan"></i> </div> <div class="right"> <span> {{$t('hivuiLogin_main_app_text1')}} <a class="login-paimary-color" >{{config.appName}}</a><br /> {{$t('hivuiLogin_main_app_text3')}} </span> </div> </div> </div> </div> </div> </div> <div id="qrcode"></div> <!-- 重置密码 --> <el-dialog :title="$t('hivuiLogin_main_forget_title')" :visible.sync="isShowResetPw" width="400px" :close-on-click-modal="false" @close="cancelResetPw" :modal-append-to-body="false"> <resetPw res="resetPw" @resetCb="cancelResetPw"></resetPw> </el-dialog> <!--选择岗位 --> <el-dialog :title="$t('hivuiLogin_main_bz_title')" :visible.sync="isShowUserBz" width="300px" top="40vh" :close-on-click-modal="false" @close="cancelUserBz" :modal-append-to-body="false"> <div class="seldUserBzDialog"> <el-select v-model="seldUserBz" :placeholder="$t('hivuiLogin_main_bz_placeholder')" @change="changeUserBz"> <el-option v-for="item in userBzList" :key="item.fbzid" :label="item.fbzname+'/'+item.fbzid" :value="item.fbzid"> </el-option> </el-select> </div> </el-dialog> <!-- 管理员解锁 --> <el-dialog :title="$t('hivuiLogin_main_admin_forget_title')" :visible.sync="isShowAdminResetPw" width="430px" :close-on-click-modal="false" @close="cancelAdminResetPw" :modal-append-to-body="false"> <div class="unlock_field"> <label>{{$t('hivuiLogin_main_pw')}}</label> <div class="unlock_field_input"> <input ref="aaaa" class="unlock_field_text" v-model="unlockPassword" type="password" name="unlockPassword" :placeholder="$t('hivuiLogin_main_pw_ph')" autocomplete="off" @keyup.enter="adminUnlock" /> <i class="fa fa-unlock-alt"></i> </div> </div> <div class="unlock_field" v-if="captchaObj2&&captchaObj2.captchaId"> <label>{{$t('hivuiLogin_main_captcha')}}</label> <div class="unlock_field_input"> <input class="unlock_field_text" v-model="unlockCaptcha" type="text" name="unlockCaptcha" :placeholder="$t('hivuiLogin_main_captcha_ph')" autocomplete="off" @keyup.enter="adminUnlock" style="width:50%;" /> <i class="fa fa-unlock-alt"></i> <img :src="captchaObj2.imageData" @click="getCaptchaPicObj(2)"> </div> </div> <span slot="footer" class="dialog-footer"> <el-button size="small" type="primary" @click="adminUnlock">{{$t('hivuiLogin_main_admin_unlock')}}</el-button> </span> </el-dialog> </div> </template> <script> import { baseLogin,getScanQrCode,adminUnlock } from "../api/login"; import { getBzList,changeBz,getCaptchaPic } from "../api/user"; import md5 from "js-md5"; import Cookies from 'js-cookie'; import QRCode from 'qrcode'; import { utils } from "hi-ui"; import { projectName } from "../config"; import WebScoketManager from '../utils/websocket.js' import "font-awesome/css/font-awesome.css"; import comIcon from "../assets/computer2.png" import scanIcon from "../assets/qrcode2.png" import saomaIcon from "../assets/saoma2.png" import _loginLogoImg from "../assets/Logo1.png" import _loginBgImg from "../assets/background.png" import { getToken, setToken, removeToken, getUserId, setUserId, removeUserId, } from "../utils/auth.js"; import {setUrlValue,getUrlValue} from "../utils/index.js"; import resetPw from "../components/resetPw.vue"; export default { name: "LoginPanel", components: {resetPw}, props: { miniLoginInfo:{ type: Object, default: null, } }, data() { return { comIcon: comIcon, scanIcon: scanIcon, saomaIcon: saomaIcon, username: "", usernameReadonly: false, password: "", //登录输入验证码 loginCaptcha:"", config: { title: window.customSysCofig?.loginTitle\|\|this.$t('hivuiLogin_main_def_title'), loginLogoImg: window.customSysCofig?.loginLogo\|\|_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h\|\|56, loginLogoImg_width: window.customSysCofig?.loginLogo_w\|\|206, loginBgImg: window.customSysCofig?.loginBgImg\|\|_loginBgImg, copyright: window.customSysCofig?.copyright\|\|this.$t('hivuiLogin_main_def_copyright'), isScan: window.customSysCofig?.isScan\|\|false, isPwdLogin: window.customSysCofig?.isPwdLogin === false ? false : true, mainColor:window.customSysCofig?.mainColor, appQRcode:window.customSysCofig?.appQRcode\|\|"", appQRcodeConfig:window.customSysCofig?.appQRcodeConfig\|\|{}, hideRegister:window.customSysCofig?.hideRegister\|\|false, showChangeLangBtn:window.customSysCofig?.showChangeLangBtn\|\|false, appName:window.customSysCofig?.appName\|\|this.$t('hivuiLogin_main_app_text2'), }, currLoginType: "com", rememberUserId: getUserId(), loginLoading: false, isShowResetPw:false, isShowAdminResetPw:false, //是否显示选择登录岗位弹窗 isShowUserBz:false, //已选用户岗位 seldUserBz:"", //用户岗位数据列表 userBzList:[], //扫码Socket scanWS:null, //扫码UUID scanUUID:"", //登录二维码 scanQrCode:"", //二维码loading scanLoading:false, //扫码报错信息 scanErrorMsg:"", //当前扫码登录状态二维码状态(type)：-1-待机 0-扫码中 1-扫码取消 2-登录中 3-已失效 4-已使用 5-登录成功 6-登录失败 scanState:-1, //解锁密码 unlockPassword:"", //解锁输入验证码 unlockCaptcha:"", //验证码对象 captchaObj:null, //解锁验证码对象 captchaObj2:null, // 倒计时相关 countdown: 60, countdownTimer: null, isCounting: false }; }, computed: { btnStyle(){ return { "background-color": this.config.mainColor, }; }, isCheckRu() { return !!this.rememberUserId; }, currLangDesc(){ return window.localStorage.getItem("locale")?(JSON.parse(window.localStorage.getItem("locale")).desc):"中文"; }, langList(){ let arr=[ { name:"中文", key:"zh-CN", }, { name:"English", key:"en", }, ] if(window.customSysCofig?.addLangList?.length){ window.customSysCofig?.addLangList.forEach((item,index)=>{ arr.push({ name:item.name, key:item.key, }); }); } return arr; }, hasAppQRCodeConfig() { return this.config.appQRcodeConfig && this.config.appQRcodeConfig.QRcode_img; }, appQRCodeQRcode_img() { return this.hasAppQRCodeConfig ? this.config.appQRcodeConfig.QRcode_img : ''; }, appQRCodeTitle() { return this.hasAppQRCodeConfig ? this.config.appQRcodeConfig.title : ''; }, appQRCodeSrc() { return this.hasAppQRCodeConfig && this.config.appQRcodeConfig.icon ? this.config.appQRcodeConfig.icon : ''; } }, async created() { let me=this; if(!me.config.isPwdLogin && me.config.isScan){ //获取扫码登录二维码 this.changeQr(); } //获取验证码图片 await me.getCaptchaPicObj(); }, mounted() { if(this.miniLoginInfo){ this.username=this.miniLoginInfo.username\|\|""; this.usernameReadonly= !!(this.miniLoginInfo.questType=='ajax'&&this.miniLoginInfo.oldUserName); }else{ if (this.isCheckRu) { this.username = this.rememberUserId; } if(!window.localStorage.getItem("locale")){ window.localStorage.setItem("locale",JSON.stringify({ desc:"中文", name:"zh-CN", })); Cookies.set("locale","zh-CN"); } this.$refs.scanQrCode.onload = function() { // 清理创建的临时链接 //URL.revokeObjectURL(imageUrl); } //生成二维码 if(this.config.appQRcode \|\| this.hasAppQRCodeConfig){ let appQRcode= this.appQRCodeQRcode_img \|\| this.config.appQRcode; let isIMG=appQRcode.startsWith('imgUrl:'); if(appQRcode.indexOf('http')==-1){ appQRcode=(isIMG?'imgUrl:':'')+location.origin+appQRcode.replace('imgUrl:',''); } if(!isIMG){ let targetUrl=appQRcode; if(!window._global){//正式环境 targetUrl=utils.string.setUrlValue(targetUrl,"pn",window.HIVUI_SETTING.projectName); } console.log("测试str",targetUrl); this.createDLQrCode(this.$refs.appQRcode.querySelector("canvas"),targetUrl); } } } }, beforeDestroy() { // 组件销毁前清除定时器 this.stopCountdown(); }, methods: { // 获取二维码样式 getQRCodeStyle() { const style = {}; if (this.config.appQRcodeConfig && this.config.appQRcodeConfig.icon_width) { style.width = this.config.appQRcodeConfig.icon_width + 'px'; } if (this.config.appQRcodeConfig && this.config.appQRcodeConfig.icon_height) { style.height = this.config.appQRcodeConfig.icon_height + 'px'; } return style; }, // 开始倒计时 startCountdown() { // 如果已经在倒计时，则不重复启动 if (this.isCounting) return; this.isCounting = true; this.countdown = 60; // 重置时间为60秒 this.countdownTimer = setInterval(() => { this.countdown--; // 当倒计时结束 if (this.countdown <= 0) { this.finishCountdown(); } }, 1000); }, // 倒计时结束处理 finishCountdown() { this.stopCountdown(); // 设置为失效状态 this.setScanState({type:3,msg:"二维码已失效"}) }, // 停止倒计时 stopCountdown() { if (this.countdownTimer) { clearInterval(this.countdownTimer); this.countdownTimer = null; } this.isCounting = false; }, // 重置倒计时 resetCountdown() { this.stopCountdown(); this.countdown = 60; this.$nextTick(() => { this.startCountdown(); }); }, getLoginData(params = {}){ const username = this.username ? this.username.trim() : ''; const userInfo = { username, password: this.password \|\| '', }; // 根据类型处理密码加密 if(params.type === "md5" && this.password){ // 注意：MD5仅用于演示，实际项目中应使用更安全的哈希算法如bcrypt或后端处理 userInfo.password = md5(this.password); } return userInfo }, loginFunc() { if(this.loginLoading)return; let me=this; if(me.captchaObj && me.captchaObj.captchaId && !me.loginCaptcha.trim()){ me.$message.error(me.$t('hivuiLogin_main_valid_captcha')); return; }else if(!me.username.trim()){ me.$message.error(me.$t('hivuiLogin_main_valid_user')); return; }else if(!me.password){ me.$message.error(me.$t('hivuiLogin_main_valid_pw')); return; } const loginClick = window.customSysCofig?.loginView?.loginClick; if(loginClick){ loginClick.call( this, { getLoginData:me.getLoginData, setToken:setToken, }, ); if (me.isCheckRu) { setUserId(me.username); } else { removeUserId(); } }else{ me.defaultLogin(); } }, defaultLogin() { let me=this; removeToken(); me.loginLoading = true; let _params={ username: me.username.trim(), password: md5(me.password), }; if(me.loginCaptcha && me.captchaObj && me.captchaObj.captchaId){ _params.captchaId=me.captchaObj.captchaId; _params.captcha=me.loginCaptcha; } baseLogin(_params) .then((response) => { const data = response; setToken(data.token); if (me.isCheckRu) { setUserId(me.username); } else { removeUserId(); } if(this.miniLoginInfo){ me.$emit("loginSuccess", data); }else{ if(data.isAuthorize===false){ if(data.authorizeMsg){ me.$message.warning(data.authorizeMsg); } this.$router.push("/authorize"); }else if(window.customSysCofig?.isSelectUserBz){ getBzList().then((res)=>{ me.userBzList=res.dataPack; me.isShowUserBz=true; }); }else{ me.$emit("loginSuccess", data); } } }) .catch((error) => { me.loginLoading = false; if(me.captchaObj && me.captchaObj.captchaId && error.status==500){ me.getCaptchaPicObj(); } if(me.username.trim()=="admin" && error&&error.dataPack&&error.dataPack.lock){ me.isShowAdminResetPw=true; //获取验证码图片 me.getCaptchaPicObj(2); } }); }, //关闭选岗弹窗 cancelUserBz(){ this.isShowUserBz=false; this.loginLoading=false; }, //选择岗位 changeUserBz(val){ changeBz({ bzid:val }).then((res)=>{ this.$emit("loginSuccess"); }); }, changeQr() { this.currLoginType = "scan"; this.getScanQrCode(); }, changeCom() { this.currLoginType = "com"; }, showResetPw() { this.isShowResetPw=true; }, cancelResetPw() { this.isShowResetPw=false; }, cancelAdminResetPw(){ this.isShowAdminResetPw=false; }, rememberUserEvent() { if (this.isCheckRu) { this.rememberUserId = ""; } else { this.rememberUserId = true; } }, goRegisterPage(){ this.$router.push("/register"); }, changeLang(command){ let dataArr=command.split(","); window.localStorage.setItem("locale",JSON.stringify({ desc:dataArr[0], name:dataArr[1], })); Cookies.set("locale",dataArr[1]); window.location.reload(); }, //生成下载二维码 createDLQrCode(target,text){ QRCode.toCanvas(target, text, function (error) { // 将文本转化为二维码并渲染到canvas上 if (error) { console.error(error); } }); }, //解锁 adminUnlock(){ let me=this; if(!me.unlockPassword){ me.$message.error(me.$t('hivuiLogin_main_valid_pw')); return; } let _params={ userId: me.username.trim(), password: md5(me.unlockPassword) }; if(me.unlockCaptcha && me.captchaObj2 && me.captchaObj2.captchaId){ _params.captchaId=me.captchaObj2.captchaId; _params.captcha=me.unlockCaptcha; } adminUnlock(_params).then((response)=>{ if(response.status==200){ me.isShowAdminResetPw=false; if(!response.msg){ me.$message.error(me.$t('hivuiLogin_main_unlock_success')); } me.password=me.unlockPassword; if(!me.captchaObj \|\| !me.captchaObj.captchaId){ me.loginFunc(); }else{ me.loginCaptcha=""; } } }).catch((err)=>{ if(me.captchaObj2 && me.captchaObj2.captchaId && err.status==500){ me.getCaptchaPicObj(2); }else{ me.isShowAdminResetPw=false; } }); }, //获取验证码 getCaptchaPicObj(num){//num=2:管理员解锁时验证码 let me=this; getCaptchaPic({ type:"login" }).then((res)=>{ if(res&&res.dataPack){ if(num==2){ me.captchaObj2=res.dataPack; }else{ me.captchaObj=res.dataPack; } } }); }, scanInit(url,params) { let me=this; return getScanQrCode(url,params).then((res)=>{ me.scanLoading=false; if(res.headers.uuid){ me.scanUUID=atob(res.headers.uuid); console.log("uuid:",me.scanUUID); } const blob = new Blob([res.data], { type: 'image/jpeg' }); const imageUrl = URL.createObjectURL(blob); me.scanQrCode=imageUrl; me.resetCountdown(); if(!url){ me.createScanSocket(); } return Promise.resolve(res); }).catch((error)=>{ me.scanLoading=false; this.setScanState({ type:6, msg:"获取二维码失败" }); return Promise.reject(error); }); }, //获取扫码登录的二维码 getScanQrCode(){ let me=this; me.scanLoading=true; me.scanState=-1; if(me.scanWS){ me.scanWS.end(); } const scanInit = window.customSysCofig?.loginView?.scanInit; if(scanInit){ scanInit({ setScanQrCode:this.scanInit, setToken:setToken, setScanState:this.setScanState, createScanSocket:this.createScanSocket, }) }else{ me.scanInit(null,{"type":"qrLogin"}) } }, setScanState(state){ this.scanState = (state?.type !== undefined && state?.type !== null) ? state.type : 9; this.scanErrorMsg = state?.msg \|\| ""; if(this.scanState != -1){ this.stopCountdown(); } }, //刷新二维码 refreshScanQrCode(){ let me=this; me.getScanQrCode(); }, // 建立扫码登录socket createScanSocket(url, callback) { let me = this; return new Promise((resolve, reject) => { if ("WebSocket" in window) { try { // 构造 WebSocket 路径 let socketHost = window.HIVUI_SETTING?.serverUrl.replace("http", "ws"); let path = socketHost + "/ws/qr/login/pc/" + window.HIVUI_SETTING?.projectName + "/" + me.scanUUID; if (url) { path = url; } // 创建 WebSocket 实例 me.scanWS = new WebScoketManager({ link: path, //"reConnect":true, }); // 初始化 WebSocket 事件 me.initWSEvent(url, callback); // 监听连接错误 me.scanWS.on("onerror", (error) => { reject(new Error("WebSocket 链接错误: " + error.message)); }); // 监听连接关闭 me.scanWS.on("onclose", () => { reject(new Error("WebSocket 连接已关闭")); }); // 监听连接成功 me.scanWS.on("onopen", () => { resolve(me.scanWS); }); } catch (error) { console.error("WebSocket 初始化失败:", error); reject(new Error("WebSocket 初始化失败: " + error.message)); } } else { // 浏览器不支持 WebSocket alert("您的浏览器不支持 WebSocket!"); reject(new Error("浏览器不支持 WebSocket")); } }); }, //初始化WS事件 initWSEvent(url, callback) { let me=this; let _ws = me.scanWS; if (!_ws) { console.log("WebSocket 实例未初始化"); return; } console.log('开始连接websocket'); //建立连接 _ws.on("onopen", () => { console.log('数据发送中...'); }); //连接失败 _ws.on("onclose", () => { console.log('连接已关闭...'); }); //超时关闭 _ws.on("overtime", () => { console.log('服务器连接超时'); }); _ws.on("reConnect", () => { console.log('重新连接websocket中'); }); _ws.on("endReConnect", () => { console.log('重新连接次数超出上限，终止连接'); }); //接受消息 _ws.on("onmessage", (data) => { if(url && callback){ callback(data); return; }else{ if(data.status + "" =="500"){ me.setScanState({type:6,msg:data.msg}) return; }else if(data.status + "" =="200"){ if(data.token){//登录成功 setToken(data.token); if(window.customSysCofig?.isSelectUserBz){ getBzList().then((res)=>{ me.userBzList=res.dataPack; me.isShowUserBz=true; }); }else{ me.$emit("loginSuccess"); } return; } } if(typeof(data.type)!="undefined"){ this.setScanState(data); switch (data.type + "") {//二维码状态(type)：-1-待机 0-扫码中 1-扫码取消 2-登录中 3-已失效 4-已使用 5-登录成功 6-登录失败 case "0": break; case "1": me.scanErrorMsg="扫码已取消"; break; case "2": break; case "3": me.scanErrorMsg="二维码已失效"; me.stopCountdown(); break; case "4": me.scanErrorMsg="二维码已使用"; me.stopCountdown(); break; default: me.scanErrorMsg="扫码登录异常"; break; } } } }); }, }, }; </script> <style> </style> <style lang="scss" scoped> .login-paimary-color{ color: var(--el-color-primary,#06c); } .login_form { // width: 370px; // height: 380px; // margin: auto; // position: absolute; // top: 0; // left: 40%; // right: 0; // bottom: 0; // z-index: 100; // background-color: #fff; // padding: 18px 20px 0; // box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5); .login_form_hd{ position: relative; box-sizing: border-box; padding-left:30px; width: 100%; h3{ font-size: 24px; text-align: left; line-height: 44px; color: #333; font-weight: normal; } } .login_form_bd { min-height: 231px; height: 100%; position: relative; padding: 24px 20px 0; .login_form_appqr { position: absolute; bottom: 0; left: 15px; .login_form_app{ color: var(--el-color-primary,#06c); cursor: pointer; display: flex; align-items: center; gap: 5px; img{ width: 20px; } &:hover { color: #0f406c; &i { color: #0f406c; } } } .miniIcon { display: inline-block; height: 20px; width: 20px; background-position: center center; background-size: 100%; // margin-right:5px; &[data-type="app"] { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAbdJREFUWEftV0tOwzAQfUMoa24ARwA1XQMnoJyAVKLZUk7Q9AR0nSJRbhBOQPdtBUcoN2DdD0aTNiKOk9ZJYyGheBXF43nPz57xDCE5nPdjHC27ADUBnCrzxX7MABFgftjD8Pwr7oIUf+3xCEQXxXB2rgrg2zfZBO7Glzigt51u9jH4Fld4aowiF7IC7rQDiEfJv8ArSHwUwhR0BsK1vJYe4Nf7GQTGHkDd3wWycSESyqZED37D0yOQkKsQAeVY/xWBtbwz+HaQqY5RBdyJCIF9Ww3niFFFoFKgVAXakz4I9xDUwqA+RPwStqcOSDwDcpyjVAJuLFMyiRAQCAlF30YJMJg7GQK4zYj7F/i2I82VqkDkOZ2ECs72RgioSqSDGyXAzvlS8hjYnb9JxTrPo7Ej0AE3fgQ6JPZSAAgwt1rJSlYHN7QJK+wV5wqusDcjT0GijZTHsCJQlgJcri+sddqtLQP9ZqYsAvGKOVdDs5VASmOSeb9iPUNaQ6OzDoBcTObaCT/D4JeRvcgv4Lag2NqahfndYHPK92Zgx3JCUoEoedRW3Do1QTjJE+GZtgKf4KS2sLxkUvsBGpxuMP/zizEAAAAASUVORK5CYII="); } &[data-type="desk"] { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGRUFBRDNFOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGRUFBRDNGOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZFQUFEM0M5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZFQUFEM0Q5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7jOkn1AAABSElEQVR42mL8//8/AymApXzd08fvfv36+58Rh4o///7LCrLZqPCEmQgCuYwMaWeINPv/TGOQDUC8OEkx2kzoHw63MTMxrjv/Yf/Nz1AnATE/JzMjIwMIYwO7rn3iZGWcHCGL0PDt1z9czrj7+qf7xNtAxslKDTMFbiCDCY+jP/3469B7C8J27L318O0vfBpuvfwhUXLpyftfEC7QFQpVl888/AZyEjsLFtdffvodGJRff/07dvcLkCvGy6IrzXnkDpCddmbN2Xf/cYD9Nz+Bwj3tTNOWZxARkA0hM+8JcDH//osSrEBuiau4uSI3hOupww8NpTJ3iXuvf37//Y8J1V3AuNeQ4AA6DMjWk+E0keeCxR9ewJJxFuiei4+/wUVwhtKbL39su28yMTGsz1QG2oCUQnCAE/e+1G58+vrzbzRxRlKTN0CAAQB1Gu32zyWjpAAAAABJRU5ErkJggg=="); } } } .error_tips { position: absolute; line-height: 30px; font-size: 12px; color: var(--el-color-danger,#f60000); text-align: center; top: 0; left: 0; right: 0; width: 100%; margin: auto; } .login_field { position: relative; padding-bottom: 20px; label { line-height: 35px; display: block; height: 35px; font-size: 16px; } i { font-size: 20px; color: #aaa; width: 35px; text-align: center; line-height: 40px; height: 40px; position: absolute; top: 35px; left: 0; margin: auto; } .login_field_text { height: 40px; width: 100%; line-height: 40px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 16px; color: #000; padding-left: 35px; box-sizing: border-box; font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial, helvetica, clean, sans-serif; outline: none; &[readonly]{ background-color: #eee; color: #666; } &::input-placeholder { color: #ccc; } &:focus { border-color: var(--el-color-primary,#06c); } } img{ width:calc(50% - 10px); margin-left:10px; cursor: pointer; } } .saveCheckbox_box { height: 35px; line-height: 35px; padding-left: 30px; position: relative; top: 0px; label { cursor: pointer; user-select: none; i { font-size: 24px; position: absolute; top: 0; left: 2px; bottom: 0; margin: auto; height: 25px; width: 25px; color: #888; cursor: pointer; text-align: center; } } .occasion { float: right; &:after { content: ""; background: no-repeat; width: 14px; height: 18px; position: absolute; top: 30%; pointer-events: none; right: 1px; } #selectStyle { border: none; outline: none; width: 62px; appearance: none; -webkit-appearance: none; -moz-appearance: none; } } } .forgetPw { float: right; color: var(--el-color-primary,#06c); cursor: pointer; margin-left: 5px; &:hover { color: #0f406c; i { color: #0f406c; } } } .login_form_btn { font-size: 13px; margin-top: 20px; .loginBtn { background-color: var(--el-color-primary,#06c);; width: 100%; height: 40px; border: none; border-radius: 5px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; i { margin-left: 5px; } &:hover { filter: brightness(0.8); } &.disabled { background-color: #ccc!important; &:hover { filter: brightness(1); } } } } /二维码/ .qrCodeImg { /* position: absolute; / height: 139px; width: 139px; / left:40% !important; right:0 !important; bottom:12%; / margin-top: 10px; margin-left: 85px; z-index: 999; } .login_form_bottom{ padding-top: 15px; min-height:36px; .register_tips{ font-size: 14px; text-align: center; span{ color:var(--el-color-primary,#06c); cursor: pointer; } } .langDropdown{ position: absolute; bottom:0; right:0; padding:0 20px; } } } .login_form_google { width: 280px; position: absolute; top: 317px; left: 0; bottom: 0; color: #fff; line-height: 20px; text-align: center; font-weight: bold; font-size: 13px; cursor: pointer; user-select: none; & > a { color: #fff; } } .loginMainBox { position: relative; .login-title { height: 18px; line-height: 18px; font-size: 16px; color: #889aa4; margin-top: 12px; margin-left: 12px; padding-bottom: 8px; font-weight: 700; } .login-tip{ position: absolute; top: 8px; right: 52px; display: block; .poptip{ background-color: var(--el-color-primary-light-9,#ecf5ff); line-height: 16px; position: relative; z-index: 99; border: 1px solid var(--el-color-primary-light-6,#b3d8ff); padding: 5px 10px; border-radius: 4px; .poptip-arrow { position: absolute; z-index: 10; top: 8px; right: 0; span{ position: absolute; width: 0; height: 0; border-color: hsla(0,0%,100%,0); border-style: solid; overflow: hidden; top: 0; left: -1px; border-width: 6px 0 6px 6px; border-left-color: var(--el-color-primary-light-9,#ecf5ff); } em { position: absolute; width: 0; height: 0; border-color: hsla(0,0%,100%,0); border-style: solid; overflow: hidden; top: 0; left: 0; border-width: 6px 0 6px 6px; border-left-color: var(--el-color-primary-light-6,#b3d8ff); border-right-color: var(--el-color-primary-light-6,#b3d8ff); } } .poptip-content { font-size: 12px; font-weight: 400; color: var(--el-color-primary,#06c);; } } } .qrDesc { font-size: 12px; color: #666; width: 160px; margin: auto; overflow: hidden; line-height: 17px; margin-top: 230px; .qrDesc_right { position: relative; left: 50px; top: -35px; } } .scanMain { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); .qrcode-img { position: relative; margin: 20px auto; font-size: 14px; -webkit-box-shadow: 0 0 8px #ddd; box-shadow: 0 0 8px #ddd; opacity: 1; width: 140px; height: 140px; .qrcode-error { background: hsla(0, 0%, 100%, 0.95); position: absolute; left: 0; top: 0; z-index: 99; width: 100%; height: 100%; p { font-weight: 700; color: #222; margin-top: 38px; margin-bottom: 8px; text-align: center; } .refresh { background: #f40; width: 110px; height: 34px; line-height: 34px; text-align: center; margin: 0 auto; background: #ff9000; border-color: #ff9000; display: block; color: #fff; border-radius: 3px; font-size: 14px; cursor: pointer; } } canvas { margin: 5px; } } .login-error { text-align: center; color: #222; font-weight: 700; } } .scanMask{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(255,255,255,0.7); display: flex; justify-content: center; align-items: center; .scanMaskMsg{ padding: 0 10px; box-shadow: #000 0 0 10px 1px; background-color: #fff; line-height: 32px; border-radius: 5px; color: var(--el-color-primary,#06c);; font-weight: bold; } } /二维码切换登录/ .icon-qrcode { position: absolute; right: 0px; top: 0px; cursor: pointer; width: 44px; font-size: 40px; line-height: 1; color: var(--el-color-primary,#06c); z-index: 99; } .login-content { width: 100%; margin: 0 auto; padding-top: 55px; .qrcode-success { text-align: center; margin-top: 20px; .iconfont { color: #c5c5c5; font-size: 36px; } h4, p { margin-top: 10px; font-size: 14px; } } } // 扫码界面 .scan-page{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; .state{ .qr{ position: relative; img{ width: 200px; height: 200px; } .loading-bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; &.opacity{ background-color: rgba(255,255,255,0.9); } .loading-text{ width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; i{ font-size: 34px; color: red; } } } } .scan-info{ display: flex; flex-direction: column; gap: 5px; position: relative; top: -10px; z-index: 2001; .countdown{ text-align: center; } .scan-desc{ display: flex; justify-content: center; align-items: center; gap: 15px; font-size: 12px; color: #666; margin: auto; i{ font-size: 38px; color: var(--el-color-primary,#06c); } } } } } } &.showCaptcha{ height:440px; .login_form_bd { .login_field{ padding-bottom:10px; } .captcha_field{ input{ padding-left:10px; } } } } } .appQRPopper{ text-align: center; .login_download_app{ display:flex; justify-content:center; canvas{ width:180px!important; height:180px!important; } img{ max-width:180px; } } } .seldUserBzDialog{ display: flex; justify-content: center; padding-bottom:10px; } .unlock_field { display:flex; padding-top:10px; label { line-height: 35px; display: block; height: 35px; width:80px; font-size: 14px; padding-left:20px; } .unlock_field_input{ position: relative; margin-left:20px; flex: 0 0 calc(100% - 150px); display:flex; align-items: center; i { font-size: 20px; color: #aaa; width: 35px; text-align: center; line-height: 35px; height: 35px; position: absolute; top: 0; left: 0; margin: auto; } .unlock_field_text { height: 35px; width: 100%; line-height: 35px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 14px; color: #000; padding-left: 35px; box-sizing: border-box; font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial, helvetica, clean, sans-serif; &::input-placeholder { color: #ccc; } } img{ width:calc(50% - 10px); margin-left:10px; cursor: pointer; } } } @supports (display:none) { dot { display: inline-block; width: 3ch; text-indent: -1ch; vertical-align: bottom; overflow: hidden; animation: dot 2s infinite step-start both; font-family: Consolas, Monaco, monospace; } } @keyframes dot { 33% { text-indent: 0; } 66% { text-indent: -2ch; } } </style> <template> <div :class="'login_form' + ((captchaObj&&captchaObj.captchaId)?' showCaptcha':'')" v-if="config.isPwdLogin \|\| config.isScan"> <!-- 用户名密码窗口 --> <div id="showQr" class="loginMainBox" :hidden="!(config.isPwdLogin && currLoginType == 'com')"> <img @click="changeQr" class="icon-qrcode" :src="scanIcon" :hidden="!config.isScan" /> <div class="login-tip" :hidden="!config.isScan"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">{{$t('hivuiLogin_main_scan_login')}}</div> </div> </div> <div class="login_form_bd"> <div class="error_tips"></div> <input type="hidden" name="directAction" value="" /> <input type="hidden" name="refererurl" value="" /> <div class="login_field"> <label>{{$t('hivuiLogin_main_user')}}</label> <input class="login_field_text" v-model="username" type="text" id="txtUserName" name="userName" :placeholder="$t('hivuiLogin_main_user_ph')" autofocus required autocomplete="off" @keyup.enter="loginFunc" :readonly="usernameReadonly" /> <i class="fa fa-user"></i> </div> <div class="login_field"> <label>{{$t('hivuiLogin_main_pw')}}</label> <input class="login_field_text" v-model="password" type="text" onfocus="this.type='password'" id="txtPassword" name="password" :placeholder="$t('hivuiLogin_main_pw_ph')" required autocomplete="off" @keyup.enter="loginFunc" /> <i class="fa fa-unlock-alt"></i> </div> <div class="login_field captcha_field" v-if="captchaObj&&captchaObj.captchaId"> <label>{{$t('hivuiLogin_main_captcha')}}</label> <div style="display:flex;align-items:center;"> <input class="login_field_text" v-model="loginCaptcha" type="text" id="loginCaptcha" name="captcha" :placeholder="$t('hivuiLogin_main_captcha_ph')" autofocus required autocomplete="off" @keyup.enter="loginFunc" style="width:50%;" /> <img :src="captchaObj.imageData" @click="getCaptchaPicObj"> </div> </div> <div class="saveCheckbox_box" v-if="!miniLoginInfo"> <label for="saveCheckbox" ><i :class=" 'fa ' + (isCheckRu ? 'fa-check-square-o' : 'fa-square-o') " ></i >{{$t('hivuiLogin_main_save_user')}}</label > <input type="checkbox" id="saveCheckbox" style="display: none" v-model="isCheckRu" @change="rememberUserEvent" /> <span class="forgetPw" @click="showResetPw" ><i class="fa fa-lock"></i ><span style="margin-left: 5px">{{$t('hivuiLogin_main_forget_user')}}</span></span > </div> <div class="login_form_btn"> <div class="login_btn_area"> <button :style="btnStyle" :class="'loginBtn' + (loginLoading ? ' disabled' : '')" @click="loginFunc" > {{$t('hivuiLogin_main_login_btn')}}<i :hidden="!loginLoading" class="el-icon-loading" ></i> </button> </div> </div> <div class="login_form_bottom" v-if="!miniLoginInfo"> <div class="register_tips" :hidden="config.hideRegister"> {{$t('hivuiLogin_main_register1')}} <span @click="goRegisterPage">{{$t('hivuiLogin_main_register2')}}</span> </div> <el-dropdown @command="changeLang" class="langDropdown" :hidden="!config.showChangeLangBtn"> <span class="el-dropdown-link"> {{currLangDesc}}<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <template v-for="(item,index) in langList"> <el-dropdown-item :key="'langList'+index" :command="item.name+','+item.key">{{item.name}}</el-dropdown-item> </template> </el-dropdown-menu> </el-dropdown> </div> <el-popover v-if="(hasAppQRCodeConfig \|\| config.appQRcode) && !miniLoginInfo" class="login_form_appqr" placement="bottom" width="210" popper-class="appQRPopper"> <div ref="appQRcode" class="login_download_app"> <template v-if="hasAppQRCodeConfig"> <canvas v-if="!appQRCodeQRcode_img.startsWith('imgUrl:')"></canvas> <img v-else :src="appQRCodeQRcode_img.replace('imgUrl:','')"> </template> <template v-else> <canvas v-if="!config.appQRcode.startsWith('imgUrl:')"></canvas> <img v-else :src="config.appQRcode.replace('imgUrl:','')"> </template> </div> <span slot="reference" class="login_form_app" :title="appQRCodeTitle" v-if="hasAppQRCodeConfig"> <img :src="appQRCodeSrc" :alt="config.appQRcodeConfig.title" v-if="appQRCodeSrc" :style="getQRCodeStyle()"> <i class="miniIcon" data-type="app" v-else></i> {{config.appQRcodeConfig.title}} </span> <span slot="reference" class="login_form_app" :title="$t('hivuiLogin_main_download')" v-else> <i class="miniIcon" data-type="app"></i> {{$t('hivuiLogin_main_download')}} </span> </el-popover> </div> </div> <!-- 扫码窗口 --> <div id="showCom" class="loginMainBox" :hidden="!(config.isScan && currLoginType == 'scan')" > <div class="login_form_hd"> <h3>{{$t('hivuiLogin_main_scan_login')}}</h3> <img @click="changeCom" class="icon-qrcode" :src="comIcon" alt="" :hidden="!config.isPwdLogin" /> <div class="login-tip" :hidden="!config.isPwdLogin"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">{{$t('hivuiLogin_main_pw_text')}}</div> </div> </div> </div> <!-- 扫码界面 --> <div class="scan-page"> <!-- 初始状态 --> <div class="state default" v-if="scanState ==-1"> <div class="qr"> <img ref="scanQrCode" :src="scanQrCode" :load="scanLoading"/> </div> <div class="scan-info"> <div class="countdown"> <span>{{countdown}}</span> s </div> <div class="scan-desc"> <div> <img :src="saomaIcon"/> </div> <div class="right"> <span> {{$t('hivuiLogin_main_app_text1')}} <a class="login-paimary-color">{{config.appName}}</a><br /> {{$t('hivuiLogin_main_app_text3')}} </span> </div> </div> </div> </div> <!-- 扫码中 --> <div class="state scanning" v-else-if="scanState == 0"> <div class="qr"> <img ref="scanQrCode" :src="scanQrCode" :load="scanLoading" /> <div class="loading-bg" v-loading="true"> </div> </div> <div class="scan-info"> <div class="scan-desc"> <div style="text-align:center;"> <span class="login-paimary-color" style="font-size:16px;">正在扫码...</span><br /> <span>请在手机上确认登录</span> </div> </div> </div> </div> <!-- 二维码错误 --> <div class="state expired" v-else> <div class="qr"> <img ref="scanQrCode" :src="scanQrCode" :load="scanLoading" /> <div class="loading-bg opacity"> <div class="loading-text"> <i class="el-icon-warning"></i> <span >{{scanErrorMsg}}</span> <el-button type="text" @click="refreshScanQrCode">点击刷新</el-button> </div> </div> </div> <div class="scan-info"> <div class="scan-desc"> <div> <img :src="saomaIcon"/> </div> <div class="right"> <span> {{$t('hivuiLogin_main_app_text1')}} <a class="login-paimary-color" >{{config.appName}}</a><br /> {{$t('hivuiLogin_main_app_text3')}} </span> </div> </div> </div> </div> </div> </div> <div id="qrcode"></div> <!-- 重置密码 --> <el-dialog :title="$t('hivuiLogin_main_forget_title')" :visible.sync="isShowResetPw" width="400px" :close-on-click-modal="false" @close="cancelResetPw" :modal-append-to-body="false"> <resetPw res="resetPw" @resetCb="cancelResetPw"></resetPw> </el-dialog> <!--选择岗位 --> <el-dialog :title="$t('hivuiLogin_main_bz_title')" :visible.sync="isShowUserBz" width="300px" top="40vh" :close-on-click-modal="false" @close="cancelUserBz" :modal-append-to-body="false"> <div class="seldUserBzDialog"> <el-select v-model="seldUserBz" :placeholder="$t('hivuiLogin_main_bz_placeholder')" @change="changeUserBz"> <el-option v-for="item in userBzList" :key="item.fbzid" :label="item.fbzname+'/'+item.fbzid" :value="item.fbzid"> </el-option> </el-select> </div> </el-dialog> <!-- 管理员解锁 --> <el-dialog :title="$t('hivuiLogin_main_admin_forget_title')" :visible.sync="isShowAdminResetPw" width="430px" :close-on-click-modal="false" @close="cancelAdminResetPw" :modal-append-to-body="false"> <div class="unlock_field"> <label>{{$t('hivuiLogin_main_pw')}}</label> <div class="unlock_field_input"> <input ref="aaaa" class="unlock_field_text" v-model="unlockPassword" type="password" name="unlockPassword" :placeholder="$t('hivuiLogin_main_pw_ph')" autocomplete="off" @keyup.enter="adminUnlock" /> <i class="fa fa-unlock-alt"></i> </div> </div> <div class="unlock_field" v-if="captchaObj2&&captchaObj2.captchaId"> <label>{{$t('hivuiLogin_main_captcha')}}</label> <div class="unlock_field_input"> <input class="unlock_field_text" v-model="unlockCaptcha" type="text" name="unlockCaptcha" :placeholder="$t('hivuiLogin_main_captcha_ph')" autocomplete="off" @keyup.enter="adminUnlock" style="width:50%;" /> <i class="fa fa-unlock-alt"></i> <img :src="captchaObj2.imageData" @click="getCaptchaPicObj(2)"> </div> </div> <span slot="footer" class="dialog-footer"> <el-button size="small" type="primary" @click="adminUnlock">{{$t('hivuiLogin_main_admin_unlock')}}</el-button> </span> </el-dialog> </div> </template> <script> import { baseLogin,getScanQrCode,adminUnlock } from "../api/login"; import { getBzList,changeBz,getCaptchaPic } from "../api/user"; import md5 from "js-md5"; import Cookies from 'js-cookie'; import QRCode from 'qrcode'; import { utils } from "hi-ui"; import { projectName } from "../config"; import WebScoketManager from '../utils/websocket.js' import "font-awesome/css/font-awesome.css"; import comIcon from "../assets/computer2.png" import scanIcon from "../assets/qrcode2.png" import saomaIcon from "../assets/saoma2.png" import _loginLogoImg from "../assets/Logo1.png" import _loginBgImg from "../assets/background.png" import { getToken, setToken, removeToken, getUserId, setUserId, removeUserId, } from "../utils/auth.js"; import {setUrlValue,getUrlValue} from "../utils/index.js"; import resetPw from "../components/resetPw.vue"; export default { name: "LoginPanel", components: {resetPw}, props: { miniLoginInfo:{ type: Object, default: null, } }, data() { return { comIcon: comIcon, scanIcon: scanIcon, saomaIcon: saomaIcon, username: "", usernameReadonly: false, password: "", //登录输入验证码 loginCaptcha:"", config: { title: window.customSysCofig?.loginTitle\|\|this.$t('hivuiLogin_main_def_title'), loginLogoImg: window.customSysCofig?.loginLogo\|\|_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h\|\|56, loginLogoImg_width: window.customSysCofig?.loginLogo_w\|\|206, loginBgImg: window.customSysCofig?.loginBgImg\|\|_loginBgImg, copyright: window.customSysCofig?.copyright\|\|this.$t('hivuiLogin_main_def_copyright'), isScan: window.customSysCofig?.isScan\|\|false, isPwdLogin: window.customSysCofig?.isPwdLogin === false ? false : true, mainColor:window.customSysCofig?.mainColor, appQRcode:window.customSysCofig?.appQRcode\|\|"", appQRcodeConfig:window.customSysCofig?.appQRcodeConfig\|\|{}, hideRegister:window.customSysCofig?.hideRegister\|\|false, showChangeLangBtn:window.customSysCofig?.showChangeLangBtn\|\|false, appName:window.customSysCofig?.appName\|\|this.$t('hivuiLogin_main_app_text2'), }, currLoginType: "com", rememberUserId: getUserId(), loginLoading: false, isShowResetPw:false, isShowAdminResetPw:false, //是否显示选择登录岗位弹窗 isShowUserBz:false, //已选用户岗位 seldUserBz:"", //用户岗位数据列表 userBzList:[], //扫码Socket scanWS:null, //扫码UUID scanUUID:"", //登录二维码 scanQrCode:"", //二维码loading scanLoading:false, //扫码报错信息 scanErrorMsg:"", //当前扫码登录状态二维码状态(type)：-1-待机 0-扫码中 1-扫码取消 2-登录中 3-已失效 4-已使用 5-登录成功 6-登录失败 scanState:-1, //解锁密码 unlockPassword:"", //解锁输入验证码 unlockCaptcha:"", //验证码对象 captchaObj:null, //解锁验证码对象 captchaObj2:null, // 倒计时相关 countdown: 60, countdownTimer: null, isCounting: false }; }, computed: { btnStyle(){ return { "background-color": this.config.mainColor, }; }, isCheckRu() { return !!this.rememberUserId; }, currLangDesc(){ return window.localStorage.getItem("locale")?(JSON.parse(window.localStorage.getItem("locale")).desc):"中文"; }, langList(){ let arr=[ { name:"中文", key:"zh-CN", }, { name:"English", key:"en", }, ] if(window.customSysCofig?.addLangList?.length){ window.customSysCofig?.addLangList.forEach((item,index)=>{ arr.push({ name:item.name, key:item.key, }); }); } return arr; }, hasAppQRCodeConfig() { return this.config.appQRcodeConfig && this.config.appQRcodeConfig.QRcode_img; }, appQRCodeQRcode_img() { return this.hasAppQRCodeConfig ? this.config.appQRcodeConfig.QRcode_img : ''; }, appQRCodeTitle() { return this.hasAppQRCodeConfig ? this.config.appQRcodeConfig.title : ''; }, appQRCodeSrc() { return this.hasAppQRCodeConfig && this.config.appQRcodeConfig.icon ? this.config.appQRcodeConfig.icon : ''; } }, async created() { let me=this; if(!me.config.isPwdLogin && me.config.isScan){ //获取扫码登录二维码 this.changeQr(); } //获取验证码图片 await me.getCaptchaPicObj(); }, mounted() { if(this.miniLoginInfo){ this.username=this.miniLoginInfo.username\|\|""; this.usernameReadonly= !!(this.miniLoginInfo.questType=='ajax'&&this.miniLoginInfo.oldUserName); }else{ if (this.isCheckRu) { this.username = this.rememberUserId; } if(!window.localStorage.getItem("locale")){ window.localStorage.setItem("locale",JSON.stringify({ desc:"中文", name:"zh-CN", })); Cookies.set("locale","zh-CN"); } this.$refs.scanQrCode.onload = function() { // 清理创建的临时链接 //URL.revokeObjectURL(imageUrl); } //生成二维码 if(this.config.appQRcode \|\| this.hasAppQRCodeConfig){ let appQRcode= this.appQRCodeQRcode_img \|\| this.config.appQRcode; let isIMG=appQRcode.startsWith('imgUrl:'); if(appQRcode.indexOf('http')==-1){ appQRcode=(isIMG?'imgUrl:':'')+location.origin+appQRcode.replace('imgUrl:',''); } if(!isIMG){ let targetUrl=appQRcode; if(!window._global){//正式环境 targetUrl=utils.string.setUrlValue(targetUrl,"pn",window.HIVUI_SETTING.projectName); } console.log("测试str",targetUrl); this.createDLQrCode(this.$refs.appQRcode.querySelector("canvas"),targetUrl); } } } }, beforeDestroy() { // 组件销毁前清除定时器 this.stopCountdown(); }, methods: { // 获取二维码样式 getQRCodeStyle() { const style = {}; if (this.config.appQRcodeConfig && this.config.appQRcodeConfig.icon_width) { style.width = this.config.appQRcodeConfig.icon_width + 'px'; } if (this.config.appQRcodeConfig && this.config.appQRcodeConfig.icon_height) { style.height = this.config.appQRcodeConfig.icon_height + 'px'; } return style; }, // 开始倒计时 startCountdown() { // 如果已经在倒计时，则不重复启动 if (this.isCounting) return; this.isCounting = true; this.countdown = 60; // 重置时间为60秒 this.countdownTimer = setInterval(() => { this.countdown--; // 当倒计时结束 if (this.countdown <= 0) { this.finishCountdown(); } }, 1000); }, // 倒计时结束处理 finishCountdown() { this.stopCountdown(); // 设置为失效状态 this.setScanState({type:3,msg:"二维码已失效"}) }, // 停止倒计时 stopCountdown() { if (this.countdownTimer) { clearInterval(this.countdownTimer); this.countdownTimer = null; } this.isCounting = false; }, // 重置倒计时 resetCountdown() { this.stopCountdown(); this.countdown = 60; this.$nextTick(() => { this.startCountdown(); }); }, getLoginData(params = {}){ const username = this.username ? this.username.trim() : ''; const userInfo = { username, password: this.password \|\| '', }; // 根据类型处理密码加密 if(params.type === "md5" && this.password){ // 注意：MD5仅用于演示，实际项目中应使用更安全的哈希算法如bcrypt或后端处理 userInfo.password = md5(this.password); } return userInfo }, loginFunc() { if(this.loginLoading)return; let me=this; if(me.captchaObj && me.captchaObj.captchaId && !me.loginCaptcha.trim()){ me.$message.error(me.$t('hivuiLogin_main_valid_captcha')); return; }else if(!me.username.trim()){ me.$message.error(me.$t('hivuiLogin_main_valid_user')); return; }else if(!me.password){ me.$message.error(me.$t('hivuiLogin_main_valid_pw')); return; } const loginClick = window.customSysCofig?.loginView?.loginClick; if(loginClick){ loginClick.call( this, { getLoginData:me.getLoginData, setToken:setToken, }, ); }else{ me.defaultLogin(); } }, defaultLogin() { let me=this; removeToken(); me.loginLoading = true; let _params={ username: me.username.trim(), password: md5(me.password), }; if(me.loginCaptcha && me.captchaObj && me.captchaObj.captchaId){ _params.captchaId=me.captchaObj.captchaId; _params.captcha=me.loginCaptcha; } baseLogin(_params) .then((response) => { const data = response; setToken(data.token); if (me.isCheckRu) { setUserId(me.username); } else { removeUserId(); } if(this.miniLoginInfo){ me.$emit("loginSuccess", data); }else{ if(data.isAuthorize===false){ if(data.authorizeMsg){ me.$message.warning(data.authorizeMsg); } this.$router.push("/authorize"); }else if(window.customSysCofig?.isSelectUserBz){ getBzList().then((res)=>{ me.userBzList=res.dataPack; me.isShowUserBz=true; }); }else{ me.$emit("loginSuccess", data); } } }) .catch((error) => { me.loginLoading = false; if(me.captchaObj && me.captchaObj.captchaId && error.status==500){ me.getCaptchaPicObj(); } if(me.username.trim()=="admin" && error&&error.dataPack&&error.dataPack.lock){ me.isShowAdminResetPw=true; //获取验证码图片 me.getCaptchaPicObj(2); } }); }, //关闭选岗弹窗 cancelUserBz(){ this.isShowUserBz=false; this.loginLoading=false; }, //选择岗位 changeUserBz(val){ changeBz({ bzid:val }).then((res)=>{ this.$emit("loginSuccess"); }); }, changeQr() { this.currLoginType = "scan"; this.getScanQrCode(); }, changeCom() { this.currLoginType = "com"; }, showResetPw() { this.isShowResetPw=true; }, cancelResetPw() { this.isShowResetPw=false; }, cancelAdminResetPw(){ this.isShowAdminResetPw=false; }, rememberUserEvent() { if (this.isCheckRu) { this.rememberUserId = ""; } else { this.rememberUserId = true; } }, goRegisterPage(){ this.$router.push("/register"); }, changeLang(command){ let dataArr=command.split(","); window.localStorage.setItem("locale",JSON.stringify({ desc:dataArr[0], name:dataArr[1], })); Cookies.set("locale",dataArr[1]); window.location.reload(); }, //生成下载二维码 createDLQrCode(target,text){ QRCode.toCanvas(target, text, function (error) { // 将文本转化为二维码并渲染到canvas上 if (error) { console.error(error); } }); }, //解锁 adminUnlock(){ let me=this; if(!me.unlockPassword){ me.$message.error(me.$t('hivuiLogin_main_valid_pw')); return; } let _params={ userId: me.username.trim(), password: md5(me.unlockPassword) }; if(me.unlockCaptcha && me.captchaObj2 && me.captchaObj2.captchaId){ _params.captchaId=me.captchaObj2.captchaId; _params.captcha=me.unlockCaptcha; } adminUnlock(_params).then((response)=>{ if(response.status==200){ me.isShowAdminResetPw=false; if(!response.msg){ me.$message.error(me.$t('hivuiLogin_main_unlock_success')); } me.password=me.unlockPassword; if(!me.captchaObj \|\| !me.captchaObj.captchaId){ me.loginFunc(); }else{ me.loginCaptcha=""; } } }).catch((err)=>{ if(me.captchaObj2 && me.captchaObj2.captchaId && err.status==500){ me.getCaptchaPicObj(2); }else{ me.isShowAdminResetPw=false; } }); }, //获取验证码 getCaptchaPicObj(num){//num=2:管理员解锁时验证码 let me=this; getCaptchaPic({ type:"login" }).then((res)=>{ if(res&&res.dataPack){ if(num==2){ me.captchaObj2=res.dataPack; }else{ me.captchaObj=res.dataPack; } } }); }, scanInit(url,params) { let me=this; return getScanQrCode(url,params).then((res)=>{ me.scanLoading=false; if(res.headers.uuid){ me.scanUUID=atob(res.headers.uuid); console.log("uuid:",me.scanUUID); } const blob = new Blob([res.data], { type: 'image/jpeg' }); const imageUrl = URL.createObjectURL(blob); me.scanQrCode=imageUrl; me.resetCountdown(); if(!url){ me.createScanSocket(); } return Promise.resolve(res); }).catch((error)=>{ me.scanLoading=false; this.setScanState({ type:6, msg:"获取二维码失败" }); return Promise.reject(error); }); }, //获取扫码登录的二维码 getScanQrCode(){ let me=this; me.scanLoading=true; me.scanState=-1; if(me.scanWS){ me.scanWS.end(); } const scanInit = window.customSysCofig?.loginView?.scanInit; if(scanInit){ scanInit({ setScanQrCode:this.scanInit, setToken:setToken, setScanState:this.setScanState, createScanSocket:this.createScanSocket, }) }else{ me.scanInit(null,{"type":"qrLogin"}) } }, setScanState(state){ this.scanState = (state?.type !== undefined && state?.type !== null) ? state.type : 9; this.scanErrorMsg = state?.msg \|\| ""; if(this.scanState != -1){ this.stopCountdown(); } }, //刷新二维码 refreshScanQrCode(){ let me=this; me.getScanQrCode(); }, // 建立扫码登录socket createScanSocket(url, callback) { let me = this; return new Promise((resolve, reject) => { if ("WebSocket" in window) { try { // 构造 WebSocket 路径 let socketHost = window.HIVUI_SETTING?.serverUrl.replace("http", "ws"); let path = socketHost + "/ws/qr/login/pc/" + window.HIVUI_SETTING?.projectName + "/" + me.scanUUID; if (url) { path = url; } // 创建 WebSocket 实例 me.scanWS = new WebScoketManager({ link: path, //"reConnect":true, }); // 初始化 WebSocket 事件 me.initWSEvent(url, callback); // 监听连接错误 me.scanWS.on("onerror", (error) => { reject(new Error("WebSocket 链接错误: " + error.message)); }); // 监听连接关闭 me.scanWS.on("onclose", () => { reject(new Error("WebSocket 连接已关闭")); }); // 监听连接成功 me.scanWS.on("onopen", () => { resolve(me.scanWS); }); } catch (error) { console.error("WebSocket 初始化失败:", error); reject(new Error("WebSocket 初始化失败: " + error.message)); } } else { // 浏览器不支持 WebSocket alert("您的浏览器不支持 WebSocket!"); reject(new Error("浏览器不支持 WebSocket")); } }); }, //初始化WS事件 initWSEvent(url, callback) { let me=this; let _ws = me.scanWS; if (!_ws) { console.log("WebSocket 实例未初始化"); return; } console.log('开始连接websocket'); //建立连接 _ws.on("onopen", () => { console.log('数据发送中...'); }); //连接失败 _ws.on("onclose", () => { console.log('连接已关闭...'); }); //超时关闭 _ws.on("overtime", () => { console.log('服务器连接超时'); }); _ws.on("reConnect", () => { console.log('重新连接websocket中'); }); _ws.on("endReConnect", () => { console.log('重新连接次数超出上限，终止连接'); }); //接受消息 _ws.on("onmessage", (data) => { if(url && callback){ callback(data); return; }else{ if(data.status + "" =="500"){ me.setScanState({type:6,msg:data.msg}) return; }else if(data.status + "" =="200"){ if(data.token){//登录成功 setToken(data.token); if(window.customSysCofig?.isSelectUserBz){ getBzList().then((res)=>{ me.userBzList=res.dataPack; me.isShowUserBz=true; }); }else{ me.$emit("loginSuccess"); } return; } } if(typeof(data.type)!="undefined"){ this.setScanState(data); switch (data.type + "") {//二维码状态(type)：-1-待机 0-扫码中 1-扫码取消 2-登录中 3-已失效 4-已使用 5-登录成功 6-登录失败 case "0": break; case "1": me.scanErrorMsg="扫码已取消"; break; case "2": break; case "3": me.scanErrorMsg="二维码已失效"; me.stopCountdown(); break; case "4": me.scanErrorMsg="二维码已使用"; me.stopCountdown(); break; default: me.scanErrorMsg="扫码登录异常"; break; } } } }); }, }, }; </script> <style> </style> <style lang="scss" scoped> .login-paimary-color{ color: var(--el-color-primary,#06c); } .login_form { // width: 370px; // height: 380px; // margin: auto; // position: absolute; // top: 0; // left: 40%; // right: 0; // bottom: 0; // z-index: 100; // background-color: #fff; // padding: 18px 20px 0; // box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5); .login_form_hd{ position: relative; box-sizing: border-box; padding-left:30px; width: 100%; h3{ font-size: 24px; text-align: left; line-height: 44px; color: #333; font-weight: normal; } } .login_form_bd { min-height: 231px; height: 100%; position: relative; padding: 24px 20px 0; .login_form_appqr { position: absolute; bottom: 0; left: 15px; .login_form_app{ color: var(--el-color-primary,#06c); cursor: pointer; display: flex; align-items: center; gap: 5px; img{ width: 20px; } &:hover { color: #0f406c; &i { color: #0f406c; } } } .miniIcon { display: inline-block; height: 20px; width: 20px; background-position: center center; background-size: 100%; // margin-right:5px; &[data-type="app"] { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAbdJREFUWEftV0tOwzAQfUMoa24ARwA1XQMnoJyAVKLZUk7Q9AR0nSJRbhBOQPdtBUcoN2DdD0aTNiKOk9ZJYyGheBXF43nPz57xDCE5nPdjHC27ADUBnCrzxX7MABFgftjD8Pwr7oIUf+3xCEQXxXB2rgrg2zfZBO7Glzigt51u9jH4Fld4aowiF7IC7rQDiEfJv8ArSHwUwhR0BsK1vJYe4Nf7GQTGHkDd3wWycSESyqZED37D0yOQkKsQAeVY/xWBtbwz+HaQqY5RBdyJCIF9Ww3niFFFoFKgVAXakz4I9xDUwqA+RPwStqcOSDwDcpyjVAJuLFMyiRAQCAlF30YJMJg7GQK4zYj7F/i2I82VqkDkOZ2ECs72RgioSqSDGyXAzvlS8hjYnb9JxTrPo7Ej0AE3fgQ6JPZSAAgwt1rJSlYHN7QJK+wV5wqusDcjT0GijZTHsCJQlgJcri+sddqtLQP9ZqYsAvGKOVdDs5VASmOSeb9iPUNaQ6OzDoBcTObaCT/D4JeRvcgv4Lag2NqahfndYHPK92Zgx3JCUoEoedRW3Do1QTjJE+GZtgKf4KS2sLxkUvsBGpxuMP/zizEAAAAASUVORK5CYII="); } &[data-type="desk"] { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGRUFBRDNFOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGRUFBRDNGOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZFQUFEM0M5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZFQUFEM0Q5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7jOkn1AAABSElEQVR42mL8//8/AymApXzd08fvfv36+58Rh4o///7LCrLZqPCEmQgCuYwMaWeINPv/TGOQDUC8OEkx2kzoHw63MTMxrjv/Yf/Nz1AnATE/JzMjIwMIYwO7rn3iZGWcHCGL0PDt1z9czrj7+qf7xNtAxslKDTMFbiCDCY+jP/3469B7C8J27L318O0vfBpuvfwhUXLpyftfEC7QFQpVl888/AZyEjsLFtdffvodGJRff/07dvcLkCvGy6IrzXnkDpCddmbN2Xf/cYD9Nz+Bwj3tTNOWZxARkA0hM+8JcDH//osSrEBuiau4uSI3hOupww8NpTJ3iXuvf37//Y8J1V3AuNeQ4AA6DMjWk+E0keeCxR9ewJJxFuiei4+/wUVwhtKbL39su28yMTGsz1QG2oCUQnCAE/e+1G58+vrzbzRxRlKTN0CAAQB1Gu32zyWjpAAAAABJRU5ErkJggg=="); } } } .error_tips { position: absolute; line-height: 30px; font-size: 12px; color: var(--el-color-danger,#f60000); text-align: center; top: 0; left: 0; right: 0; width: 100%; margin: auto; } .login_field { position: relative; padding-bottom: 20px; label { line-height: 35px; display: block; height: 35px; font-size: 16px; } i { font-size: 20px; color: #aaa; width: 35px; text-align: center; line-height: 40px; height: 40px; position: absolute; top: 35px; left: 0; margin: auto; } .login_field_text { height: 40px; width: 100%; line-height: 40px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 16px; color: #000; padding-left: 35px; box-sizing: border-box; font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial, helvetica, clean, sans-serif; &[readonly]{ background-color: #eee; color: #666; } &::input-placeholder { color: #ccc; } } img{ width:calc(50% - 10px); margin-left:10px; cursor: pointer; } } .saveCheckbox_box { height: 35px; line-height: 35px; padding-left: 30px; position: relative; top: 0px; label { cursor: pointer; user-select: none; i { font-size: 24px; position: absolute; top: 0; left: 2px; bottom: 0; margin: auto; height: 25px; width: 25px; color: #888; cursor: pointer; text-align: center; } } .occasion { float: right; &:after { content: ""; background: no-repeat; width: 14px; height: 18px; position: absolute; top: 30%; pointer-events: none; right: 1px; } #selectStyle { border: none; outline: none; width: 62px; appearance: none; -webkit-appearance: none; -moz-appearance: none; } } } .forgetPw { float: right; color: var(--el-color-primary,#06c); cursor: pointer; margin-left: 5px; &:hover { color: #0f406c; i { color: #0f406c; } } } .login_form_btn { font-size: 13px; margin-top: 20px; .loginBtn { background-color: var(--el-color-primary,#06c);; width: 100%; height: 40px; border: none; border-radius: 5px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; i { margin-left: 5px; } &:hover { filter: brightness(0.8); } &.disabled { background-color: #ccc!important; &:hover { filter: brightness(1); } } } } /二维码/ .qrCodeImg { / position: absolute; / height: 139px; width: 139px; / left:40% !important; right:0 !important; bottom:12%; / margin-top: 10px; margin-left: 85px; z-index: 999; } .login_form_bottom{ padding-top: 15px; min-height:36px; .register_tips{ font-size: 14px; text-align: center; span{ color:var(--el-color-primary,#06c); cursor: pointer; } } .langDropdown{ position: absolute; bottom:0; right:0; padding:0 20px; } } } .login_form_google { width: 280px; position: absolute; top: 317px; left: 0; bottom: 0; color: #fff; line-height: 20px; text-align: center; font-weight: bold; font-size: 13px; cursor: pointer; user-select: none; & > a { color: #fff; } } .loginMainBox { position: relative; .login-title { height: 18px; line-height: 18px; font-size: 16px; color: #889aa4; margin-top: 12px; margin-left: 12px; padding-bottom: 8px; font-weight: 700; } .login-tip{ position: absolute; top: 8px; right: 52px; display: block; .poptip{ background-color: var(--el-color-primary-light-9,#ecf5ff); line-height: 16px; position: relative; z-index: 99; border: 1px solid var(--el-color-primary-light-6,#b3d8ff); padding: 5px 10px; border-radius: 4px; .poptip-arrow { position: absolute; z-index: 10; top: 8px; right: 0; span{ position: absolute; width: 0; height: 0; border-color: hsla(0,0%,100%,0); border-style: solid; overflow: hidden; top: 0; left: -1px; border-width: 6px 0 6px 6px; border-left-color: var(--el-color-primary-light-9,#ecf5ff); } em { position: absolute; width: 0; height: 0; border-color: hsla(0,0%,100%,0); border-style: solid; overflow: hidden; top: 0; left: 0; border-width: 6px 0 6px 6px; border-left-color: var(--el-color-primary-light-6,#b3d8ff); border-right-color: var(--el-color-primary-light-6,#b3d8ff); } } .poptip-content { font-size: 12px; font-weight: 400; color: var(--el-color-primary,#06c);; } } } .qrDesc { font-size: 12px; color: #666; width: 160px; margin: auto; overflow: hidden; line-height: 17px; margin-top: 230px; .qrDesc_right { position: relative; left: 50px; top: -35px; } } .scanMain { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); .qrcode-img { position: relative; margin: 20px auto; font-size: 14px; -webkit-box-shadow: 0 0 8px #ddd; box-shadow: 0 0 8px #ddd; opacity: 1; width: 140px; height: 140px; .qrcode-error { background: hsla(0, 0%, 100%, 0.95); position: absolute; left: 0; top: 0; z-index: 99; width: 100%; height: 100%; p { font-weight: 700; color: #222; margin-top: 38px; margin-bottom: 8px; text-align: center; } .refresh { background: #f40; width: 110px; height: 34px; line-height: 34px; text-align: center; margin: 0 auto; background: #ff9000; border-color: #ff9000; display: block; color: #fff; border-radius: 3px; font-size: 14px; cursor: pointer; } } canvas { margin: 5px; } } .login-error { text-align: center; color: #222; font-weight: 700; } } .scanMask{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(255,255,255,0.7); display: flex; justify-content: center; align-items: center; .scanMaskMsg{ padding: 0 10px; box-shadow: #000 0 0 10px 1px; background-color: #fff; line-height: 32px; border-radius: 5px; color: var(--el-color-primary,#06c);; font-weight: bold; } } /二维码切换登录*/ .icon-qrcode { position: absolute; right: 0px; top: 0px; cursor: pointer; width: 44px; z-index: 99; } .login-content { width: 100%; margin: 0 auto; padding-top: 55px; .qrcode-success { text-align: center; margin-top: 20px; .iconfont { color: #c5c5c5; font-size: 36px; } h4, p { margin-top: 10px; font-size: 14px; } } } // 扫码界面 .scan-page{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; .state{ .qr{ position: relative; img{ width: 200px; height: 200px; } .loading-bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; &.opacity{ background-color: rgba(255,255,255,0.9); } .loading-text{ width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; i{ font-size: 34px; color: red; } } } } .scan-info{ display: flex; flex-direction: column; gap: 5px; position: relative; top: -10px; z-index: 2001; .countdown{ text-align: center; } .scan-desc{ display: flex; justify-content: center; align-items: center; gap: 15px; font-size: 12px; color: #666; margin: auto; } } } } } &.showCaptcha{ height:440px; .login_form_bd { .login_field{ padding-bottom:10px; } .captcha_field{ input{ padding-left:10px; } } } } } .appQRPopper{ text-align: center; .login_download_app{ display:flex; justify-content:center; canvas{ width:180px!important; height:180px!important; } img{ max-width:180px; } } } .seldUserBzDialog{ display: flex; justify-content: center; padding-bottom:10px; } .unlock_field { display:flex; padding-top:10px; label { line-height: 35px; display: block; height: 35px; width:80px; font-size: 14px; padding-left:20px; } .unlock_field_input{ position: relative; margin-left:20px; flex: 0 0 calc(100% - 150px); display:flex; align-items: center; i { font-size: 20px; color: #aaa; width: 35px; text-align: center; line-height: 35px; height: 35px; position: absolute; top: 0; left: 0; margin: auto; } .unlock_field_text { height: 35px; width: 100%; line-height: 35px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 14px; color: #000; padding-left: 35px; box-sizing: border-box; font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial, helvetica, clean, sans-serif; &::input-placeholder { color: #ccc; } } img{ width:calc(50% - 10px); margin-left:10px; cursor: pointer; } } } @supports (display:none) { dot { display: inline-block; width: 3ch; text-indent: -1ch; vertical-align: bottom; overflow: hidden; animation: dot 2s infinite step-start both; font-family: Consolas, Monaco, monospace; } } @keyframes dot { 33% { text-indent: 0; } 66% { text-indent: -2ch; } } </style>

Ignore Space Show notes View

project/hivuiLogin/components/LoginPanel.vue

<template>
  <div :class="'login_form' + ((captchaObj&&captchaObj.captchaId)?' showCaptcha':'')" v-if="config.isPwdLogin || config.isScan">
    
    <div id="showQr" class="loginMainBox" :hidden="!(config.isPwdLogin && currLoginType == 'com')">
      
      <i class="iconfont icon-erweima1 icon-qrcode"         @click="changeQr"   :hidden="!config.isScan"></i>
      <div class="login-tip" :hidden="!config.isScan">
        <div class="poptip">
          <div class="poptip-arrow">
            <em></em>
            <span></span>
          </div>
          <div class="poptip-content">{{$t('hivuiLogin_main_scan_login')}}</div>
        </div>
      </div>
      <div class="login_form_bd">
        <div class="error_tips"></div>
        <input type="hidden" name="directAction" value="" />
        <input type="hidden" name="refererurl" value="" />
        <div class="login_field">
          <label>{{$t('hivuiLogin_main_user')}}</label>
          <input
            class="login_field_text"
            v-model="username"
            type="text"
            id="txtUserName"
            name="userName"
            :placeholder="$t('hivuiLogin_main_user_ph')"
            autofocus
            required
            autocomplete="off"
            @keyup.enter="loginFunc"
            :readonly="usernameReadonly"
          />
          <i class="fa fa-user"></i>
        </div>
        <div class="login_field">
          <label>{{$t('hivuiLogin_main_pw')}}</label>
          <input
            class="login_field_text"
            v-model="password"
            type="text"
            onfocus="this.type='password'"
            id="txtPassword"
            name="password"
            :placeholder="$t('hivuiLogin_main_pw_ph')"
            required
            autocomplete="off"
            @keyup.enter="loginFunc"
          />
          <i class="fa fa-unlock-alt"></i>
        </div>
        <div class="login_field captcha_field" v-if="captchaObj&&captchaObj.captchaId">
          <label>{{$t('hivuiLogin_main_captcha')}}</label>
          <div style="display:flex;align-items:center;">
            <input
              class="login_field_text"
              v-model="loginCaptcha"
              type="text"
              id="loginCaptcha"
              name="captcha"
              :placeholder="$t('hivuiLogin_main_captcha_ph')"
              autofocus
              required
              autocomplete="off"
              @keyup.enter="loginFunc"
              style="width:50%;"
            />
            <img :src="captchaObj.imageData" @click="getCaptchaPicObj">
          </div>
        </div>
        <div class="saveCheckbox_box" v-if="!miniLoginInfo">
          <label for="saveCheckbox"
            ><i
              :class="
                'fa ' + (isCheckRu ? 'fa-check-square-o' : 'fa-square-o')
              "
            ></i
            >{{$t('hivuiLogin_main_save_user')}}</label
          >
          <input
            type="checkbox"
            id="saveCheckbox"
            style="display: none"
            v-model="isCheckRu"
            @change="rememberUserEvent"
          />
          <span class="forgetPw" @click="showResetPw"
            ><i class="fa fa-lock"></i
            ><span style="margin-left: 5px">{{$t('hivuiLogin_main_forget_user')}}</span></span
          >
        </div>
        <div class="login_form_btn">
          <div class="login_btn_area">
            <button
              :style="btnStyle"
              :class="'loginBtn' + (loginLoading ? ' disabled' : '')"
              @click="loginFunc"
            >
              {{$t('hivuiLogin_main_login_btn')}}<i
                :hidden="!loginLoading"
                class="el-icon-loading"
              ></i>
            </button>
          </div>
        </div>
        <div class="login_form_bottom" v-if="!miniLoginInfo">
          <div class="register_tips" :hidden="config.hideRegister">
            {{$t('hivuiLogin_main_register1')}}
            <span @click="goRegisterPage">{{$t('hivuiLogin_main_register2')}}</span>
          </div>
          <el-dropdown @command="changeLang" class="langDropdown" :hidden="!config.showChangeLangBtn">
            <span class="el-dropdown-link">
              {{currLangDesc}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <template v-for="(item,index) in langList">
                <el-dropdown-item :key="'langList'+index" :command="item.name+','+item.key">{{item.name}}</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-popover v-if="(hasAppQRCodeConfig || config.appQRcode) && !miniLoginInfo" class="login_form_appqr" placement="bottom" width="210" popper-class="appQRPopper">
          <div ref="appQRcode" class="login_download_app">
            <template v-if="hasAppQRCodeConfig">
              <canvas v-if="!appQRCodeQRcode_img.startsWith('imgUrl:')"></canvas>
              <img v-else :src="appQRCodeQRcode_img.replace('imgUrl:','')">
            </template>
            <template v-else>
              <canvas v-if="!config.appQRcode.startsWith('imgUrl:')"></canvas>
              <img v-else :src="config.appQRcode.replace('imgUrl:','')">
            </template>
            
          </div>
          <span 
            slot="reference" 
            class="login_form_app" 
            :title="appQRCodeTitle" 
            v-if="hasAppQRCodeConfig">
            <img 
              :src="appQRCodeSrc" 
              :alt="config.appQRcodeConfig.title"  
              v-if="appQRCodeSrc" 
              :style="getQRCodeStyle()">
            <i class="miniIcon" data-type="app" v-else></i>
            {{config.appQRcodeConfig.title}}
          </span>
          <span 
            slot="reference" 
            class="login_form_app" 
            :title="$t('hivuiLogin_main_download')" 
            v-else>
            <i class="miniIcon" data-type="app"></i>
            {{$t('hivuiLogin_main_download')}}
          </span>
        </el-popover>
      </div>
    </div>
    
    <div
      id="showCom"
      class="loginMainBox"
      :hidden="!(config.isScan && currLoginType == 'scan')"
    >
      <div class="login_form_hd">
        <h3>{{$t('hivuiLogin_main_scan_login')}}</h3>
        
        <i class="iconfont icon-diannao1 icon-qrcode" @click="changeCom"  :hidden="!config.isPwdLogin"></i>
        <div class="login-tip" :hidden="!config.isPwdLogin">
          <div class="poptip">
            <div class="poptip-arrow">
              <em></em>
              <span></span>
            </div>
            <div class="poptip-content">{{$t('hivuiLogin_main_pw_text')}}</div>
          </div>
        </div>
      </div>
      
      <div class="scan-page">
           
          <div class="state default" v-if="scanState ==-1">
              <div class="qr">
                  <img ref="scanQrCode" :src="scanQrCode" :load="scanLoading"/>
              </div>
              <div class="scan-info">
                 <div class="countdown">
                     <span>{{countdown}}</span> s
                  </div>
                  <div class="scan-desc">
                    <div>
                      
                       <i class="iconfont icon-scan"></i>
                    </div>
                    <div class="right">
                      <span>
                        {{$t('hivuiLogin_main_app_text1')}}
                        <a class="login-paimary-color">{{config.appName}}</a><br />
                        {{$t('hivuiLogin_main_app_text3')}}
                      </span>
                    </div>
                </div>
              </div>
           
          </div>
          
          <div class="state scanning" v-else-if="scanState == 0">
              <div class="qr">
                  <img ref="scanQrCode" :src="scanQrCode" :load="scanLoading" />
                  <div class="loading-bg"  v-loading="true">
                  </div>
              </div>
              <div class="scan-info">            
                <div class="scan-desc">            
                  <div style="text-align:center;">
                  <span class="login-paimary-color" style="font-size:16px;">正在扫码...</span><br />
                  <span>请在手机上确认登录</span>
                  </div>
                </div>
              </div>
          </div>
          
          
          <div class="state expired" v-else>
              <div class="qr">
                  <img ref="scanQrCode" :src="scanQrCode" :load="scanLoading" />
                  <div class="loading-bg opacity">
                    <div class="loading-text">
                      <i class="el-icon-warning"></i>
                      <span >{{scanErrorMsg}}</span>
                      <el-button type="text" @click="refreshScanQrCode">点击刷新</el-button>
                    </div>
                  </div>
              </div>
              <div class="scan-info">
                  <div class="scan-desc">
                    <div>
                      
                      <i class="iconfont icon-scan"></i>
                    </div>
                    <div class="right">
                      <span>
                        {{$t('hivuiLogin_main_app_text1')}}
                        <a class="login-paimary-color" >{{config.appName}}</a><br />
                        {{$t('hivuiLogin_main_app_text3')}}
                        </span>
                    </div>
                </div>
              </div>
          </div>
      </div>
    </div>
    
    <div id="qrcode"></div>
    
    <el-dialog :title="$t('hivuiLogin_main_forget_title')" :visible.sync="isShowResetPw" width="400px" :close-on-click-modal="false" @close="cancelResetPw" :modal-append-to-body="false">
      <resetPw res="resetPw" @resetCb="cancelResetPw"></resetPw>
    </el-dialog>

<el-dialog :title="$t('hivuiLogin_main_bz_title')" :visible.sync="isShowUserBz" width="300px" top="40vh" :close-on-click-modal="false" @close="cancelUserBz" :modal-append-to-body="false">
      <div class="seldUserBzDialog">
        <el-select v-model="seldUserBz" :placeholder="$t('hivuiLogin_main_bz_placeholder')" @change="changeUserBz">
          <el-option
            v-for="item in userBzList"
            :key="item.fbzid"
            :label="item.fbzname+'/'+item.fbzid"
            :value="item.fbzid">
          </el-option>
        </el-select>
      </div>
    </el-dialog>
    
    <el-dialog :title="$t('hivuiLogin_main_admin_forget_title')" :visible.sync="isShowAdminResetPw" width="430px" :close-on-click-modal="false" @close="cancelAdminResetPw" :modal-append-to-body="false">
      <div class="unlock_field">
        <label>{{$t('hivuiLogin_main_pw')}}</label>
        <div class="unlock_field_input">
          <input
            ref="aaaa"
            class="unlock_field_text"
            v-model="unlockPassword"
            type="password"
            name="unlockPassword"
            :placeholder="$t('hivuiLogin_main_pw_ph')"
            autocomplete="off"
            @keyup.enter="adminUnlock"
          />
          <i class="fa fa-unlock-alt"></i>
        </div>
      </div>
      <div class="unlock_field" v-if="captchaObj2&&captchaObj2.captchaId">
        <label>{{$t('hivuiLogin_main_captcha')}}</label>
        <div class="unlock_field_input">
          <input
            class="unlock_field_text"
            v-model="unlockCaptcha"
            type="text"
            name="unlockCaptcha"
            :placeholder="$t('hivuiLogin_main_captcha_ph')"
            autocomplete="off"
            @keyup.enter="adminUnlock"
            style="width:50%;"
          />
          <i class="fa fa-unlock-alt"></i>
          <img :src="captchaObj2.imageData" @click="getCaptchaPicObj(2)">
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="adminUnlock">{{$t('hivuiLogin_main_admin_unlock')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

import resetPw from "../components/resetPw.vue";

export default {
  name: "LoginPanel",
  components: {resetPw},
  props: {
    miniLoginInfo:{
      type: Object,
      default: null,
    }
  },
  data() {
    return {
      comIcon: comIcon,
      scanIcon: scanIcon,
      saomaIcon: saomaIcon,
      username: "",
      usernameReadonly: false,
      password: "",
      //登录输入验证码
      loginCaptcha:"",
      config: {
        title: window.customSysCofig?.loginTitle||this.$t('hivuiLogin_main_def_title'),
        loginLogoImg: window.customSysCofig?.loginLogo||_loginLogoImg,
        loginLogoImg_height: window.customSysCofig?.loginLogo_h||56,
        loginLogoImg_width: window.customSysCofig?.loginLogo_w||206,
        loginBgImg: window.customSysCofig?.loginBgImg||_loginBgImg,
        copyright: window.customSysCofig?.copyright||this.$t('hivuiLogin_main_def_copyright'),
        isScan: window.customSysCofig?.isScan||false,
        isPwdLogin: window.customSysCofig?.isPwdLogin === false ? false : true,
        mainColor:window.customSysCofig?.mainColor,
        appQRcode:window.customSysCofig?.appQRcode||"",
        appQRcodeConfig:window.customSysCofig?.appQRcodeConfig||{},
        hideRegister:window.customSysCofig?.hideRegister||false,
        showChangeLangBtn:window.customSysCofig?.showChangeLangBtn||false,
        appName:window.customSysCofig?.appName||this.$t('hivuiLogin_main_app_text2'),
      },
      currLoginType: "com",
      rememberUserId: getUserId(),
      loginLoading: false,
      
      isShowResetPw:false,
      isShowAdminResetPw:false,
      //是否显示选择登录岗位弹窗
      isShowUserBz:false,
      //已选用户岗位
      seldUserBz:"",
      //用户岗位数据列表
      userBzList:[],
      //扫码Socket
      scanWS:null,
      //扫码UUID
      scanUUID:"",
      //登录二维码
      scanQrCode:"",
      //二维码loading
      scanLoading:false,
      //扫码报错信息
      scanErrorMsg:"",
      //当前扫码登录状态 二维码状态(type)：-1-待机 0-扫码中 1-扫码取消 2-登录中 3-已失效 4-已使用 5-登录成功 6-登录失败
      scanState:-1,
      //解锁密码
      unlockPassword:"",
      //解锁输入验证码
      unlockCaptcha:"",
      //验证码对象
      captchaObj:null,
      //解锁验证码对象
      captchaObj2:null,
      // 倒计时相关
      countdown: 60,
      countdownTimer: null,
      isCounting: false
    };
  },
  computed: {
    btnStyle(){
      return {
        "background-color": this.config.mainColor,
      };
    },
    isCheckRu() {
      return !!this.rememberUserId;
    },
    currLangDesc(){
      return window.localStorage.getItem("locale")?(JSON.parse(window.localStorage.getItem("locale")).desc):"中文";
    },
    langList(){
      let arr=[
        {
            name:"中文",
            key:"zh-CN",
        }, {
            name:"English",
            key:"en",
        }, 
      ]
      if(window.customSysCofig?.addLangList?.length){
        window.customSysCofig?.addLangList.forEach((item,index)=>{
          arr.push({
            name:item.name,
            key:item.key,
          });
        });
      }
      return arr;
    },
    hasAppQRCodeConfig() {
      return this.config.appQRcodeConfig && this.config.appQRcodeConfig.QRcode_img;
    },
    appQRCodeQRcode_img() {
      return this.hasAppQRCodeConfig ? this.config.appQRcodeConfig.QRcode_img : '';
    },
    appQRCodeTitle() {
      return this.hasAppQRCodeConfig ? this.config.appQRcodeConfig.title : '';
    },
    appQRCodeSrc() {
      return this.hasAppQRCodeConfig && this.config.appQRcodeConfig.icon ? 
             this.config.appQRcodeConfig.icon : '';
    }
  },
  
  async created() {
    let me=this;
    if(!me.config.isPwdLogin && me.config.isScan){
      //获取扫码登录二维码
      this.changeQr();
    }
    //获取验证码图片
    await me.getCaptchaPicObj();
  },

mounted() {
    if(this.miniLoginInfo){
      this.username=this.miniLoginInfo.username||"";
      this.usernameReadonly= !!(this.miniLoginInfo.questType=='ajax'&&this.miniLoginInfo.oldUserName);
    }else{
      if (this.isCheckRu) {
        this.username = this.rememberUserId;
      }
      if(!window.localStorage.getItem("locale")){
          window.localStorage.setItem("locale",JSON.stringify({
              desc:"中文",
              name:"zh-CN",
          }));
          Cookies.set("locale","zh-CN");
      }
      this.$refs.scanQrCode.onload = function() {
        // 清理创建的临时链接
        //URL.revokeObjectURL(imageUrl);
      }
      //生成二维码
      if(this.config.appQRcode || this.hasAppQRCodeConfig){
        let appQRcode= this.appQRCodeQRcode_img || this.config.appQRcode;
        let isIMG=appQRcode.startsWith('imgUrl:');
        if(appQRcode.indexOf('http')==-1){
          appQRcode=(isIMG?'imgUrl:':'')+location.origin+appQRcode.replace('imgUrl:','');
        }
        if(!isIMG){
          let targetUrl=appQRcode;
          if(!window._global){//正式环境
              targetUrl=utils.string.setUrlValue(targetUrl,"pn",window.HIVUI_SETTING.projectName);
          }
          console.log("测试str",targetUrl);
          this.createDLQrCode(this.$refs.appQRcode.querySelector("canvas"),targetUrl);
        }
      }
    }

},
  beforeDestroy() {
    // 组件销毁前清除定时器
    this.stopCountdown();
  },
  methods: {
    // 获取二维码样式
    getQRCodeStyle() {
      const style = {};
      if (this.config.appQRcodeConfig && this.config.appQRcodeConfig.icon_width) {
        style.width = this.config.appQRcodeConfig.icon_width + 'px';
      }
      if (this.config.appQRcodeConfig && this.config.appQRcodeConfig.icon_height) {
        style.height = this.config.appQRcodeConfig.icon_height + 'px';
      }
      return style;
    },
    
    // 开始倒计时
    startCountdown() {
      // 如果已经在倒计时，则不重复启动
      if (this.isCounting) return;
      
      this.isCounting = true;
      this.countdown = 60; // 重置时间为60秒
      
      this.countdownTimer = setInterval(() => {
        this.countdown--;
        
        // 当倒计时结束
        if (this.countdown <= 0) {
          this.finishCountdown();
        }
      }, 1000);
    },
    
    // 倒计时结束处理
    finishCountdown() {
      this.stopCountdown();
      // 设置为失效状态
      this.setScanState({type:3,msg:"二维码已失效"})
    },
    
    // 停止倒计时
    stopCountdown() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer);
        this.countdownTimer = null;
      }
      this.isCounting = false;
    },
    
    // 重置倒计时
    resetCountdown() {
      this.stopCountdown();
      this.countdown = 60;
      this.$nextTick(() => {
        this.startCountdown();
      });
    },

getLoginData(params = {}){
      const username = this.username ? this.username.trim() : '';
      
      const userInfo = {
        username,
        password: this.password || '',
      };
      
      // 根据类型处理密码加密
      if(params.type === "md5" && this.password){
        // 注意：MD5仅用于演示，实际项目中应使用更安全的哈希算法如bcrypt或后端处理
        userInfo.password = md5(this.password);
      }
      
      return userInfo
    },
    
    loginFunc() {
      if(this.loginLoading)return;
      let me=this;
      if(me.captchaObj && me.captchaObj.captchaId && !me.loginCaptcha.trim()){
        me.$message.error(me.$t('hivuiLogin_main_valid_captcha'));
        return;
      }else if(!me.username.trim()){
        me.$message.error(me.$t('hivuiLogin_main_valid_user'));
        return;
      }else if(!me.password){
        me.$message.error(me.$t('hivuiLogin_main_valid_pw'));
        return;
      }
      const loginClick = window.customSysCofig?.loginView?.loginClick;
      if(loginClick){
        loginClick.call(
          this,
          {
            getLoginData:me.getLoginData,
            setToken:setToken,
          },
        );
        if (me.isCheckRu) {
          setUserId(me.username);
        } else {
          removeUserId();
        }
      }else{
        me.defaultLogin();
      }
      
    },
    defaultLogin() {
      let me=this;
      removeToken();
      me.loginLoading = true;
      let _params={
        username: me.username.trim(),
        password: md5(me.password),
      };
      if(me.loginCaptcha && me.captchaObj && me.captchaObj.captchaId){
        _params.captchaId=me.captchaObj.captchaId;
        _params.captcha=me.loginCaptcha;
      }
      baseLogin(_params)
        .then((response) => {
          const data = response;
          setToken(data.token);
          if (me.isCheckRu) {
            setUserId(me.username);
          } else {
            removeUserId();
          }
          if(this.miniLoginInfo){
            me.$emit("loginSuccess", data);
          }else{
            if(data.isAuthorize===false){
              if(data.authorizeMsg){
                me.$message.warning(data.authorizeMsg);
              }
              this.$router.push("/authorize");
            }else if(window.customSysCofig?.isSelectUserBz){
              getBzList().then((res)=>{
                me.userBzList=res.dataPack;
                me.isShowUserBz=true;
              });
            }else{
              me.$emit("loginSuccess", data);
            }
          }
      
        })
        .catch((error) => {
          me.loginLoading = false;
          if(me.captchaObj && me.captchaObj.captchaId && error.status==500){
            me.getCaptchaPicObj();
          }
          if(me.username.trim()=="admin" && error&&error.dataPack&&error.dataPack.lock){
            me.isShowAdminResetPw=true;
            //获取验证码图片
            me.getCaptchaPicObj(2);
          }
        });
    },
    //关闭选岗弹窗
    cancelUserBz(){
      this.isShowUserBz=false;
      this.loginLoading=false;
    },
    //选择岗位
    changeUserBz(val){
      changeBz({
        bzid:val
      }).then((res)=>{
        this.$emit("loginSuccess");
      });
    },
    changeQr() {
      this.currLoginType = "scan";
      this.getScanQrCode();
    },
    changeCom() {
      this.currLoginType = "com";
    },
    
    showResetPw() {
      this.isShowResetPw=true;
    },
    cancelResetPw() {
      this.isShowResetPw=false;
    },
    cancelAdminResetPw(){
      this.isShowAdminResetPw=false;
    },
    rememberUserEvent() {
      if (this.isCheckRu) {
        this.rememberUserId = "";
      } else {
        this.rememberUserId = true;
      }
    },
    goRegisterPage(){
      this.$router.push("/register");
    },
    changeLang(command){
      let dataArr=command.split(",");
      window.localStorage.setItem("locale",JSON.stringify({
          desc:dataArr[0],
          name:dataArr[1],
      }));
      Cookies.set("locale",dataArr[1]);
      window.location.reload();
    },
    //生成下载二维码
    createDLQrCode(target,text){
      QRCode.toCanvas(target, text, function (error) { // 将文本转化为二维码并渲染到canvas上
        if (error) {
          console.error(error);
        }
      });
    },
    //解锁
    adminUnlock(){
      let me=this;
      if(!me.unlockPassword){
        me.$message.error(me.$t('hivuiLogin_main_valid_pw'));
        return;
      }
      let _params={
        userId: me.username.trim(),
        password: md5(me.unlockPassword)
      };
      if(me.unlockCaptcha && me.captchaObj2 && me.captchaObj2.captchaId){
        _params.captchaId=me.captchaObj2.captchaId;
        _params.captcha=me.unlockCaptcha;
      }
      adminUnlock(_params).then((response)=>{
        if(response.status==200){
          me.isShowAdminResetPw=false;
          if(!response.msg){
            me.$message.error(me.$t('hivuiLogin_main_unlock_success'));
          }
          me.password=me.unlockPassword;
          if(!me.captchaObj || !me.captchaObj.captchaId){
            me.loginFunc();
          }else{
            me.loginCaptcha="";
          }
        }
      }).catch((err)=>{
        if(me.captchaObj2 && me.captchaObj2.captchaId && err.status==500){
          me.getCaptchaPicObj(2);
        }else{
          me.isShowAdminResetPw=false;
        }
      });
    },
    //获取验证码
    getCaptchaPicObj(num){//num=2:管理员解锁时验证码
      let me=this;
      getCaptchaPic({
        type:"login"
      }).then((res)=>{
        if(res&&res.dataPack){
          if(num==2){
            me.captchaObj2=res.dataPack;
          }else{
            me.captchaObj=res.dataPack;
          }
        }
      });
    },

scanInit(url,params) { 
      let me=this;
      return getScanQrCode(url,params).then((res)=>{ 
        me.scanLoading=false;
        if(res.headers.uuid){
          me.scanUUID=atob(res.headers.uuid);
          console.log("uuid:",me.scanUUID);
        }
        const blob = new Blob([res.data], { type: 'image/jpeg' });
        const imageUrl = URL.createObjectURL(blob);
        me.scanQrCode=imageUrl;
        me.resetCountdown();
        if(!url){
          me.createScanSocket();
        }
        return Promise.resolve(res);
      }).catch((error)=>{
        me.scanLoading=false;
        this.setScanState({
          type:6,
          msg:"获取二维码失败"
        });
        return Promise.reject(error);
      });
    },
    //获取扫码登录的二维码
    getScanQrCode(){
      let me=this;
      me.scanLoading=true;
      me.scanState=-1;

if(me.scanWS){
        me.scanWS.end();
      }
      const scanInit = window.customSysCofig?.loginView?.scanInit;
      if(scanInit){
        scanInit({
          setScanQrCode:this.scanInit,
          setToken:setToken,
          setScanState:this.setScanState,
          createScanSocket:this.createScanSocket,
        })
      }else{
        me.scanInit(null,{"type":"qrLogin"})
      }
      
    },

setScanState(state){ 
      this.scanState = (state?.type !== undefined && state?.type !== null) ? state.type : 9;
      this.scanErrorMsg = state?.msg || "";
      if(this.scanState != -1){
        this.stopCountdown();
      }
    },

//刷新二维码
    refreshScanQrCode(){
      let me=this;
      me.getScanQrCode();
    },
    // 建立扫码登录socket
    createScanSocket(url, callback) {
        let me = this;
        return new Promise((resolve, reject) => {
            if ("WebSocket" in window) {
                try {
                    // 构造 WebSocket 路径
                    let socketHost = window.HIVUI_SETTING?.serverUrl.replace("http", "ws");
                    let path = socketHost + "/ws/qr/login/pc/" + window.HIVUI_SETTING?.projectName + "/" + me.scanUUID;

if (url) {
                        path = url;
                    }

// 创建 WebSocket 实例
                    me.scanWS = new WebScoketManager({
                        link: path,
                        //"reConnect":true,
                    });

// 初始化 WebSocket 事件
                    me.initWSEvent(url, callback);

// 监听连接错误
                    me.scanWS.on("onerror", (error) => {
                        reject(new Error("WebSocket 链接错误: " + error.message));
                    });

// 监听连接关闭
                    me.scanWS.on("onclose", () => {
                        reject(new Error("WebSocket 连接已关闭"));
                    });

// 监听连接成功
                    me.scanWS.on("onopen", () => {
                        resolve(me.scanWS);
                    });
                } catch (error) {
                    console.error("WebSocket 初始化失败:", error);
                    reject(new Error("WebSocket 初始化失败: " + error.message));
                }
            } else {
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
                reject(new Error("浏览器不支持 WebSocket"));
            }
        });
    },
    //初始化WS事件
    initWSEvent(url, callback) {
      let me=this;
      let _ws = me.scanWS;
      if (!_ws) {
        console.log("WebSocket 实例未初始化");
        return;
      }
      console.log('开始连接websocket');
      //建立连接
      _ws.on("onopen", () => {
          console.log('数据发送中...');
      });
      //连接失败
      _ws.on("onclose", () => {
          console.log('连接已关闭...');
      });
      //超时关闭
      _ws.on("overtime", () => {
          console.log('服务器连接超时');
      });
      _ws.on("reConnect", () => {
          console.log('重新连接websocket中');
      });
      _ws.on("endReConnect", () => {
          console.log('重新连接次数超出上限，终止连接');
      });
      //接受消息
      _ws.on("onmessage", (data) => {
        if(url && callback){
          callback(data);
          return;
        }else{ 
          if(data.status + "" =="500"){
            me.setScanState({type:6,msg:data.msg})
            return;
          }else if(data.status + "" =="200"){
            if(data.token){//登录成功
              setToken(data.token);
              if(window.customSysCofig?.isSelectUserBz){
                getBzList().then((res)=>{
                  me.userBzList=res.dataPack;
                  me.isShowUserBz=true;
                });
              }else{
                me.$emit("loginSuccess");
              }
              return;
            }
          }
          if(typeof(data.type)!="undefined"){
            this.setScanState(data);
            switch (data.type + "") {//二维码状态(type)：-1-待机 0-扫码中 1-扫码取消 2-登录中 3-已失效 4-已使用 5-登录成功 6-登录失败
                case "0": 
                  break;
                case "1": 
                  me.scanErrorMsg="扫码已取消";
                  break;
                case "2": 
                  break;
                case "3": 
                  me.scanErrorMsg="二维码已失效";
                  me.stopCountdown();
                  break;
                case "4": 
                  me.scanErrorMsg="二维码已使用";
                  me.stopCountdown();
                  break;
                default: 
                  me.scanErrorMsg="扫码登录异常";
                  break;
            }  
          }
        }
      });
    },

},
};
</script>
<style>

</style>

.login-content {
      width: 100%;
      margin: 0 auto;
      padding-top: 55px;
      .qrcode-success {
        text-align: center;
        margin-top: 20px;
        .iconfont {
          color: #c5c5c5;
          font-size: 36px;
        }
        h4,
        p {
          margin-top: 10px;
          font-size: 14px;
        }
      }
    }

// 扫码界面
    .scan-page{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .state{
        .qr{
          position: relative;
          img{
            width: 200px;
            height: 200px;
          }
          .loading-bg{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            &.opacity{
              background-color: rgba(255,255,255,0.9);
            }
            .loading-text{
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              i{
                font-size: 34px;
                color: red;
              }
            }
          }
        }
        .scan-info{
          display: flex;
          flex-direction: column;
          gap: 5px;
          position: relative;
          top: -10px;
          z-index: 2001;
          .countdown{
            text-align: center;
          }
          .scan-desc{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            font-size: 12px;
            color: #666;
            margin: auto;
            i{
              font-size: 38px;
              color: var(--el-color-primary,#06c);
            }
          }
        }
      }
     
    }
  }
  &.showCaptcha{
    height:440px;
    .login_form_bd {
      .login_field{
        padding-bottom:10px;
      }
      .captcha_field{
        input{
          padding-left:10px;
        }
      }
    }
  }
}

.appQRPopper{
  text-align: center;
  .login_download_app{
    display:flex;
    justify-content:center;
    canvas{
      width:180px!important;
      height:180px!important;
    }
    img{
      max-width:180px;
    }
  }
}
.seldUserBzDialog{
  display: flex;
  justify-content: center;
  padding-bottom:10px;
}
.unlock_field {
  display:flex;
  padding-top:10px;
  label {
    line-height: 35px;
    display: block;
    height: 35px;
    width:80px;
    font-size: 14px;
    padding-left:20px;
  }
  .unlock_field_input{
    position: relative;
    margin-left:20px;
    flex: 0 0 calc(100% - 150px);
    display:flex;
    align-items: center;
    i {
      font-size: 20px;
      color: #aaa;
      width: 35px;
      text-align: center;
      line-height: 35px;
      height: 35px;
      position: absolute;
      top: 0;
      left: 0;
      margin: auto;
    }
    .unlock_field_text {
      height: 35px;
      width: 100%;
      line-height: 35px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #fff;
      font-size: 14px;
      color: #000;
      padding-left: 35px;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,
        helvetica, clean, sans-serif;
      &::input-placeholder {
        color: #ccc;
      }
    }
    img{
      width:calc(50% - 10px);
      margin-left:10px;
      cursor: pointer;
    }
  }
}

@supports (display:none) {
    dot {
        display: inline-block; 
        width: 3ch;
        text-indent: -1ch;
        vertical-align: bottom; 
        overflow: hidden;
        animation: dot 2s infinite step-start both;
        font-family: Consolas, Monaco, monospace;
    }
}

@keyframes dot {
    33% { text-indent: 0; }
    66% { text-indent: -2ch; }
}
</style>

<template>
  <div :class="'login_form' + ((captchaObj&&captchaObj.captchaId)?' showCaptcha':'')" v-if="config.isPwdLogin || config.isScan">
    
    <div id="showQr" class="loginMainBox" :hidden="!(config.isPwdLogin && currLoginType == 'com')">
      <img
        @click="changeQr"
        class="icon-qrcode"
        :src="scanIcon"
        :hidden="!config.isScan"
      />
      <div class="login-tip" :hidden="!config.isScan">
        <div class="poptip">
          <div class="poptip-arrow">
            <em></em>
            <span></span>
          </div>
          <div class="poptip-content">{{$t('hivuiLogin_main_scan_login')}}</div>
        </div>
      </div>
      <div class="login_form_bd">
        <div class="error_tips"></div>
        <input type="hidden" name="directAction" value="" />
        <input type="hidden" name="refererurl" value="" />
        <div class="login_field">
          <label>{{$t('hivuiLogin_main_user')}}</label>
          <input
            class="login_field_text"
            v-model="username"
            type="text"
            id="txtUserName"
            name="userName"
            :placeholder="$t('hivuiLogin_main_user_ph')"
            autofocus
            required
            autocomplete="off"
            @keyup.enter="loginFunc"
            :readonly="usernameReadonly"
          />
          <i class="fa fa-user"></i>
        </div>
        <div class="login_field">
          <label>{{$t('hivuiLogin_main_pw')}}</label>
          <input
            class="login_field_text"
            v-model="password"
            type="text"
            onfocus="this.type='password'"
            id="txtPassword"
            name="password"
            :placeholder="$t('hivuiLogin_main_pw_ph')"
            required
            autocomplete="off"
            @keyup.enter="loginFunc"
          />
          <i class="fa fa-unlock-alt"></i>
        </div>
        <div class="login_field captcha_field" v-if="captchaObj&&captchaObj.captchaId">
          <label>{{$t('hivuiLogin_main_captcha')}}</label>
          <div style="display:flex;align-items:center;">
            <input
              class="login_field_text"
              v-model="loginCaptcha"
              type="text"
              id="loginCaptcha"
              name="captcha"
              :placeholder="$t('hivuiLogin_main_captcha_ph')"
              autofocus
              required
              autocomplete="off"
              @keyup.enter="loginFunc"
              style="width:50%;"
            />
            <img :src="captchaObj.imageData" @click="getCaptchaPicObj">
          </div>
        </div>
        <div class="saveCheckbox_box" v-if="!miniLoginInfo">
          <label for="saveCheckbox"
            ><i
              :class="
                'fa ' + (isCheckRu ? 'fa-check-square-o' : 'fa-square-o')
              "
            ></i
            >{{$t('hivuiLogin_main_save_user')}}</label
          >
          <input
            type="checkbox"
            id="saveCheckbox"
            style="display: none"
            v-model="isCheckRu"
            @change="rememberUserEvent"
          />
          <span class="forgetPw" @click="showResetPw"
            ><i class="fa fa-lock"></i
            ><span style="margin-left: 5px">{{$t('hivuiLogin_main_forget_user')}}</span></span
          >
        </div>
        <div class="login_form_btn">
          <div class="login_btn_area">
            <button
              :style="btnStyle"
              :class="'loginBtn' + (loginLoading ? ' disabled' : '')"
              @click="loginFunc"
            >
              {{$t('hivuiLogin_main_login_btn')}}<i
                :hidden="!loginLoading"
                class="el-icon-loading"
              ></i>
            </button>
          </div>
        </div>
        <div class="login_form_bottom" v-if="!miniLoginInfo">
          <div class="register_tips" :hidden="config.hideRegister">
            {{$t('hivuiLogin_main_register1')}}
            <span @click="goRegisterPage">{{$t('hivuiLogin_main_register2')}}</span>
          </div>
          <el-dropdown @command="changeLang" class="langDropdown" :hidden="!config.showChangeLangBtn">
            <span class="el-dropdown-link">
              {{currLangDesc}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <template v-for="(item,index) in langList">
                <el-dropdown-item :key="'langList'+index" :command="item.name+','+item.key">{{item.name}}</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-popover v-if="(hasAppQRCodeConfig || config.appQRcode) && !miniLoginInfo" class="login_form_appqr" placement="bottom" width="210" popper-class="appQRPopper">
          <div ref="appQRcode" class="login_download_app">
            <template v-if="hasAppQRCodeConfig">
              <canvas v-if="!appQRCodeQRcode_img.startsWith('imgUrl:')"></canvas>
              <img v-else :src="appQRCodeQRcode_img.replace('imgUrl:','')">
            </template>
            <template v-else>
              <canvas v-if="!config.appQRcode.startsWith('imgUrl:')"></canvas>
              <img v-else :src="config.appQRcode.replace('imgUrl:','')">
            </template>
            
          </div>
          <span 
            slot="reference" 
            class="login_form_app" 
            :title="appQRCodeTitle" 
            v-if="hasAppQRCodeConfig">
            <img 
              :src="appQRCodeSrc" 
              :alt="config.appQRcodeConfig.title"  
              v-if="appQRCodeSrc" 
              :style="getQRCodeStyle()">
            <i class="miniIcon" data-type="app" v-else></i>
            {{config.appQRcodeConfig.title}}
          </span>
          <span 
            slot="reference" 
            class="login_form_app" 
            :title="$t('hivuiLogin_main_download')" 
            v-else>
            <i class="miniIcon" data-type="app"></i>
            {{$t('hivuiLogin_main_download')}}
          </span>
        </el-popover>
      </div>
    </div>
    
    <div
      id="showCom"
      class="loginMainBox"
      :hidden="!(config.isScan && currLoginType == 'scan')"
    >
      <div class="login_form_hd">
        <h3>{{$t('hivuiLogin_main_scan_login')}}</h3>
        <img @click="changeCom" class="icon-qrcode" :src="comIcon" alt="" :hidden="!config.isPwdLogin" />
        <div class="login-tip" :hidden="!config.isPwdLogin">
          <div class="poptip">
            <div class="poptip-arrow">
              <em></em>
              <span></span>
            </div>
            <div class="poptip-content">{{$t('hivuiLogin_main_pw_text')}}</div>
          </div>
        </div>
      </div>
      
      <div class="scan-page">
           
          <div class="state default" v-if="scanState ==-1">
              <div class="qr">
                  <img ref="scanQrCode" :src="scanQrCode" :load="scanLoading"/>
              </div>
              <div class="scan-info">
                 <div class="countdown">
                     <span>{{countdown}}</span> s
                  </div>
                  <div class="scan-desc">
                    <div>
                      <img :src="saomaIcon"/>
                    </div>
                    <div class="right">
                      <span>
                        {{$t('hivuiLogin_main_app_text1')}}
                        <a class="login-paimary-color">{{config.appName}}</a><br />
                        {{$t('hivuiLogin_main_app_text3')}}
                      </span>
                    </div>
                </div>
              </div>
           
          </div>
          
          <div class="state scanning" v-else-if="scanState == 0">
              <div class="qr">
                  <img ref="scanQrCode" :src="scanQrCode" :load="scanLoading" />
                  <div class="loading-bg"  v-loading="true">
                  </div>
              </div>
              <div class="scan-info">            
                <div class="scan-desc">            
                  <div style="text-align:center;">
                  <span class="login-paimary-color" style="font-size:16px;">正在扫码...</span><br />
                  <span>请在手机上确认登录</span>
                  </div>
                </div>
              </div>
          </div>
          
          
          <div class="state expired" v-else>
              <div class="qr">
                  <img ref="scanQrCode" :src="scanQrCode" :load="scanLoading" />
                  <div class="loading-bg opacity">
                    <div class="loading-text">
                      <i class="el-icon-warning"></i>
                      <span >{{scanErrorMsg}}</span>
                      <el-button type="text" @click="refreshScanQrCode">点击刷新</el-button>
                    </div>
                  </div>
              </div>
              <div class="scan-info">
                  <div class="scan-desc">
                    <div>
                      <img :src="saomaIcon"/>
                    </div>
                    <div class="right">
                      <span>
                        {{$t('hivuiLogin_main_app_text1')}}
                        <a class="login-paimary-color" >{{config.appName}}</a><br />
                        {{$t('hivuiLogin_main_app_text3')}}
                        </span>
                    </div>
                </div>
              </div>
          </div>
      </div>
    </div>
    
    <div id="qrcode"></div>
    
    <el-dialog :title="$t('hivuiLogin_main_forget_title')" :visible.sync="isShowResetPw" width="400px" :close-on-click-modal="false" @close="cancelResetPw" :modal-append-to-body="false">
      <resetPw res="resetPw" @resetCb="cancelResetPw"></resetPw>
    </el-dialog>

import resetPw from "../components/resetPw.vue";

getLoginData(params = {}){
      const username = this.username ? this.username.trim() : '';
      
      const userInfo = {
        username,
        password: this.password || '',
      };
      
      // 根据类型处理密码加密
      if(params.type === "md5" && this.password){
        // 注意：MD5仅用于演示，实际项目中应使用更安全的哈希算法如bcrypt或后端处理
        userInfo.password = md5(this.password);
      }
      
      return userInfo
    },
    
    loginFunc() {
      if(this.loginLoading)return;
      let me=this;
      if(me.captchaObj && me.captchaObj.captchaId && !me.loginCaptcha.trim()){
        me.$message.error(me.$t('hivuiLogin_main_valid_captcha'));
        return;
      }else if(!me.username.trim()){
        me.$message.error(me.$t('hivuiLogin_main_valid_user'));
        return;
      }else if(!me.password){
        me.$message.error(me.$t('hivuiLogin_main_valid_pw'));
        return;
      }
      const loginClick = window.customSysCofig?.loginView?.loginClick;
      if(loginClick){
        loginClick.call(
          this,
          {
            getLoginData:me.getLoginData,
            setToken:setToken,
          },
        );
      }else{
        me.defaultLogin();
      }
      
    },
    defaultLogin() {
      let me=this;
      removeToken();
      me.loginLoading = true;
      let _params={
        username: me.username.trim(),
        password: md5(me.password),
      };
      if(me.loginCaptcha && me.captchaObj && me.captchaObj.captchaId){
        _params.captchaId=me.captchaObj.captchaId;
        _params.captcha=me.loginCaptcha;
      }
      baseLogin(_params)
        .then((response) => {
          const data = response;
          setToken(data.token);
          if (me.isCheckRu) {
            setUserId(me.username);
          } else {
            removeUserId();
          }
          if(this.miniLoginInfo){
            me.$emit("loginSuccess", data);
          }else{
            if(data.isAuthorize===false){
              if(data.authorizeMsg){
                me.$message.warning(data.authorizeMsg);
              }
              this.$router.push("/authorize");
            }else if(window.customSysCofig?.isSelectUserBz){
              getBzList().then((res)=>{
                me.userBzList=res.dataPack;
                me.isShowUserBz=true;
              });
            }else{
              me.$emit("loginSuccess", data);
            }
          }
      
        })
        .catch((error) => {
          me.loginLoading = false;
          if(me.captchaObj && me.captchaObj.captchaId && error.status==500){
            me.getCaptchaPicObj();
          }
          if(me.username.trim()=="admin" && error&&error.dataPack&&error.dataPack.lock){
            me.isShowAdminResetPw=true;
            //获取验证码图片
            me.getCaptchaPicObj(2);
          }
        });
    },
    //关闭选岗弹窗
    cancelUserBz(){
      this.isShowUserBz=false;
      this.loginLoading=false;
    },
    //选择岗位
    changeUserBz(val){
      changeBz({
        bzid:val
      }).then((res)=>{
        this.$emit("loginSuccess");
      });
    },
    changeQr() {
      this.currLoginType = "scan";
      this.getScanQrCode();
    },
    changeCom() {
      this.currLoginType = "com";
    },
    
    showResetPw() {
      this.isShowResetPw=true;
    },
    cancelResetPw() {
      this.isShowResetPw=false;
    },
    cancelAdminResetPw(){
      this.isShowAdminResetPw=false;
    },
    rememberUserEvent() {
      if (this.isCheckRu) {
        this.rememberUserId = "";
      } else {
        this.rememberUserId = true;
      }
    },
    goRegisterPage(){
      this.$router.push("/register");
    },
    changeLang(command){
      let dataArr=command.split(",");
      window.localStorage.setItem("locale",JSON.stringify({
          desc:dataArr[0],
          name:dataArr[1],
      }));
      Cookies.set("locale",dataArr[1]);
      window.location.reload();
    },
    //生成下载二维码
    createDLQrCode(target,text){
      QRCode.toCanvas(target, text, function (error) { // 将文本转化为二维码并渲染到canvas上
        if (error) {
          console.error(error);
        }
      });
    },
    //解锁
    adminUnlock(){
      let me=this;
      if(!me.unlockPassword){
        me.$message.error(me.$t('hivuiLogin_main_valid_pw'));
        return;
      }
      let _params={
        userId: me.username.trim(),
        password: md5(me.unlockPassword)
      };
      if(me.unlockCaptcha && me.captchaObj2 && me.captchaObj2.captchaId){
        _params.captchaId=me.captchaObj2.captchaId;
        _params.captcha=me.unlockCaptcha;
      }
      adminUnlock(_params).then((response)=>{
        if(response.status==200){
          me.isShowAdminResetPw=false;
          if(!response.msg){
            me.$message.error(me.$t('hivuiLogin_main_unlock_success'));
          }
          me.password=me.unlockPassword;
          if(!me.captchaObj || !me.captchaObj.captchaId){
            me.loginFunc();
          }else{
            me.loginCaptcha="";
          }
        }
      }).catch((err)=>{
        if(me.captchaObj2 && me.captchaObj2.captchaId && err.status==500){
          me.getCaptchaPicObj(2);
        }else{
          me.isShowAdminResetPw=false;
        }
      });
    },
    //获取验证码
    getCaptchaPicObj(num){//num=2:管理员解锁时验证码
      let me=this;
      getCaptchaPic({
        type:"login"
      }).then((res)=>{
        if(res&&res.dataPack){
          if(num==2){
            me.captchaObj2=res.dataPack;
          }else{
            me.captchaObj=res.dataPack;
          }
        }
      });
    },

if (url) {
                        path = url;
                    }

// 创建 WebSocket 实例
                    me.scanWS = new WebScoketManager({
                        link: path,
                        //"reConnect":true,
                    });

// 初始化 WebSocket 事件
                    me.initWSEvent(url, callback);

// 监听连接错误
                    me.scanWS.on("onerror", (error) => {
                        reject(new Error("WebSocket 链接错误: " + error.message));
                    });

// 监听连接关闭
                    me.scanWS.on("onclose", () => {
                        reject(new Error("WebSocket 连接已关闭"));
                    });

},
};
</script>
<style>

</style>

// 扫码界面
    .scan-page{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .state{
        .qr{
          position: relative;
          img{
            width: 200px;
            height: 200px;
          }
          .loading-bg{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            &.opacity{
              background-color: rgba(255,255,255,0.9);
            }
            .loading-text{
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              i{
                font-size: 34px;
                color: red;
              }
            }
          }
        }
        .scan-info{
          display: flex;
          flex-direction: column;
          gap: 5px;
          position: relative;
          top: -10px;
          z-index: 2001;
          .countdown{
            text-align: center;
          }
          .scan-desc{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            font-size: 12px;
            color: #666;
            margin: auto;
          }
        }
      }
     
    }
  }
  &.showCaptcha{
    height:440px;
    .login_form_bd {
      .login_field{
        padding-bottom:10px;
      }
      .captcha_field{
        input{
          padding-left:10px;
        }
      }
    }
  }
}

@keyframes dot {
    33% { text-indent: 0; }
    66% { text-indent: -2ch; }
}
</style>

Ignore Space Show notes View project/hivuiLogin/index.js
// import Vue from 'vue' import App from './App.vue' import router from './router' // import ElementUI from 'element-ui'; import './assets/iconfonts/expand/iconfont.css' import "hi-ui/lib/hi-ui.css"; import 'font-awesome/css/font-awesome.css' import store from './store' import Package from '../../package.json' console.log( '%c hi-vui-template %c v'.concat(Package.version, ' '), 'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #5584ff; font-weight: bold;', 'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;', ); Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app') // import Vue from 'vue' import App from './App.vue' import router from './router' // import ElementUI from 'element-ui'; import "hi-ui/lib/hi-ui.css"; import 'font-awesome/css/font-awesome.css' import store from './store' import Package from '../../package.json' console.log( '%c hi-vui-template %c v'.concat(Package.version, ' '), 'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #5584ff; font-weight: bold;', 'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;', ); Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')

Ignore Space Show notes View

project/hivuiLogin/index.js

Ignore Space Show notes View project/hivuiMain/views/layout/components/conciseSidebar/concisemenu.vue
<template> <div class="concise-menu" ref="conciseMenu" :style="menuStyle" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" > <div class="menu-search"> <div class="menu-title"> <div class="title">功能搜索:</div> </div> <div class="menu-search-box"> <input type="text" class="menu-search-input" placeholder="支持拼音首字母搜索" v-model.trim="searchWord" @focus="handleInputFocus" @blur="handleInputBlur" @compositionstart="handleCompositionStart" @compositionend="handleCompositionEnd" /> <i class="el-icon-circle-close" style="font-size: 12px;opacity: 0.5;margin-right: 5px;" v-if="searchWord != ''" @click="searchWord = ''"></i> <i class="iconfont icon-search"></i> </div> <div class="menu-search-box"> <!-- <input type="text" class="menu-search-input" placeholder="支持拼音首字母搜索" v-model.trim="searchWord" /> --> <!-- <el-input class="menu-search-input" clearable v-model="searchWord" placeholder="支持拼音首字母搜索" prefix-icon="el-icon-search" @focus.native="handleInputFocus" @blur.native="handleInputBlur" @compositionstart.native="handleCompositionStart" @compositionend.native="handleCompositionEnd" ></el-input> --> <!-- <i class="iconfont icon-search"></i> --> </div> </div> <div class="menu-content"> <div class="level1List" v-if="searchWord == ''"> <!-- 一级菜单列表 --> <ul class="area"> <li v-for="item in menus" :key="item.resId"> <div class="menu-item"> <div class="level first-level" :class="{ active: curresId == item.resId, noChild: !item.children \|\| !item.children.length, }" @click="handleFirstLevelClick(item)" @mouseenter="handleFirstLevelMouseEnter(item)" > <span class="title">{{ item.name }}</span> <i v-if="item.children && item.children.length" class="iconfont icon-arrow-right" ></i> </div> </div> </li> </ul> <!-- 二级及以下菜单列表 --> <ul class="area child-menu"> <li v-for="item in childrenData" :key="item.resId"> <div class="menu-item menu-item2"> <div> <div class="level second-level" :class="{ active: curresId == item.parentId && item.children && item.children.length, noChild: !item.children \|\| !item.children.length, }" @click="handleSecondLevelClick(item)" > <span class="title">{{ item.name }}</span> <!-- <i v-if="item.children && item.children.length" class="iconfont icon-arrow-right" ></i> --> </div> </div> <!-- 三级菜单 --> <ul class="child-area" v-if="item.children && item.children.length" > <template v-for="child in item.children"> <!-- 普通三级菜单项 --> <li :key="child.resId" v-if=" child.isShow && !(child.children && child.children.length) " > <div class="menu-item"> <div class="third-level" @click="handleOpenFunc(child)"> <span class="title">{{ child.name }}</span> <i v-if="child.children && child.children.length" class="iconfont icon-arrow-right" ></i> </div> </div> </li> <!-- 嵌套子菜单组件 --> <nav-sub-menus :level="0" :menuitem="child" :parent="conciseMenu" v-if=" child.isShow && child.children && child.children.length " :key="child.resId" > </nav-sub-menus> </template> </ul> </div> </li> </ul> </div> <div class="searchResultList" v-else> <ul> <li v-for="(searchItem, index) in searchList" :key="'search-' + index" :data-index="index" :title="searchItem.name" @click="handleOpenFunc(searchItem)" > <itemIcon :item="searchItem"></itemIcon> <span>{{ searchItem.name }}</span> </li> <li v-show="searchList.length == 0"> {{ $t("hivuiMain_nodata") }} </li> </ul> </div> </div> </div> </template> <script> import itemIcon from "@main/views/layout/components/allFuncMenu/itemIcon"; import NavSubMenus from "./menus.vue"; import pinyin from "js-pinyin"; import cloneDeep from "lodash/cloneDeep"; export default { name: "ConciseMenu", inject: ["addTab"], provide() { let me = this; return { hideMenus() { me.handleMouseLeave(); }, }; }, components: { NavSubMenus, itemIcon }, props: { targetElRect: { type: Object, required: true, }, placement: { type: String, default: "right", }, }, data() { return { searchWord: "", searchList: [], isVisible: false, isMouseOverMenu: false, isInputFocus: false, isComposing: false, curresId: "", childrenData: [], }; }, watch: { targetElRect: { handler() { this.updatePosition(); }, deep: true, }, searchWord(newVal, oldVal) { this.seldIndex = 0; this.doSearch(newVal); }, }, computed: { menuStyle() { return { position: "absolute", top: this.isVisible ? this.position.top + "px" : "-9999px", left: this.position.left + "px", opacity: this.isVisible ? 1 : 0, visibility: this.isVisible ? "visible" : "hidden", width: this.isVisible ? "700px" : "0", transition: " opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s", backgroundColor: "rgba(255, 255, 255, 1)", boxShadow: "0px 0px 6px rgba(0, 0, 0, 0.25)", boxSizing: "border-box", overflow: "hidden", zIndex: 1000, }; }, position() { return { top: 0, left: 0, }; }, menus() { const menus = this.$store.getters.menus.filter(item => item.isShow); return menus; }, }, methods: { /** * 显示菜单 / show() { this.isVisible = true; this.$nextTick(() => { this.updatePosition(); }); }, /* * 隐藏菜单 / hide() { if(this.isComposing \|\| this.isInputFocus){ return; } this.isVisible = false; }, /* * 更新菜单位置 / updatePosition() { if (!this.isVisible) return; this.$nextTick(() => { const menuEl = this.$el; if (!menuEl) return; const rect = this.targetElRect; if (!rect) return; let top = rect.top; let left = rect.right; if(this.placement != "right"){ top = top + rect.height; left = 0; } // 应用位置 menuEl.style.top = top + "px"; menuEl.style.left = left + "px"; }); }, /* * 鼠标进入菜单区域处理 / handleMouseEnter(e) { if (e) { const target = e.target \|\| e.srcElement; if (target.closest && target.closest(".pl-menus-item")) { this.isMouseOverMenu = true; return; } } this.isMouseOverMenu = true; }, handleInputFocus() { this.isInputFocus = true; }, handleInputBlur() { this.isInputFocus = false; }, handleCompositionStart() { this.isComposing = true; console.log("+++++compositionstart",this.isComposing); }, handleCompositionEnd() { this.isComposing = false; console.log("----compositionend",this.isComposing); }, /* * 鼠标离开菜单区域处理 / handleMouseLeave(e) { if (e) { const relatedTarget = e.relatedTarget \|\| e.toElement; if ( relatedTarget && relatedTarget.closest && relatedTarget.closest(".pl-menus-item") ) { this.isMouseOverMenu = true; return; } if (!relatedTarget) { const activeEl = document.activeElement; if ( this.$el && (this.isComposing \|\| this.isInputFocus \|\| this.$el.contains(activeEl)) ) { this.isMouseOverMenu = true; return; } } } this.isMouseOverMenu = false; this.hide(); }, /* * 处理一级菜单点击事件 / handleFirstLevelClick(item) { if (!item.children \|\| !item.children.length) { this.handleOpenFunc(item); } }, /* * 处理一级菜单鼠标悬停事件 / handleFirstLevelMouseEnter(item) { if (item.children && item.children.length) { this.handleOpenFunc(item, true); } }, /* * 处理二级菜单点击事件 / handleSecondLevelClick(item) { if (!item.children \|\| !item.children.length) { this.handleOpenFunc(item); } }, /* * 打开功能页面 * @param {Object} item - 菜单项 * @param {Boolean} isTabClick - 是否是标签页点击（仅设置子菜单数据） / async handleOpenFunc(item, isTabClick) { let me = this; if (isTabClick) { this.setChildrenData(item.resId); return; } if (item.type == "link") { window.open(item.resUrl, item.name); return; } else if (item.type == "sso") { item.ssoUrl = await me.$store.dispatch("user/openSSOFuncPage", { serviceUrl: item.resUrl, }); } // 添加标签页 me.addTab(item); setTimeout(() => { me.handleMouseLeave && me.handleMouseLeave(); }, 100); }, /* * 设置子菜单数据 * @param {String} resId - 菜单资源ID / setChildrenData(resId) { this.curresId = resId; const menu = this.menus.find((m) => m.resId === resId); if (menu && menu.children) { this.childrenData = menu.children; } else { this.childrenData = []; } }, //获取搜索列表数据 doSearch(cnKey) { let me = this; let list = [], records = me.$store.getters.menusList, hideMenuItemList = me.$store.getters.hideMenuItemList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for (let i = 0, l = records.length; i < l; i++) { let item = records[i]; if (!(!item.isShow \|\| hideMenuItemList.indexOf(item.parentId) != -1)) { if (item.parentId == -1 && item.type == "root") { continue; } if (re.test(cnKey)) { let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); if (y.indexOf(py) > -1 && item.type != "dir") { list.push(item); } } else { if (item.name.indexOf(cnKey) > -1 && item.type != "dir") { list.push(item); } } } } me.$set(me, "searchList", list); // me.$nextTick(() => { // me.countHeight(); // me.$refs.listBox.scrollTo({ // top: 0, // }); // }); }, }, mounted() { if (this.menus.length > 0) { const menu = this.menus[0]; this.setChildrenData(menu.resId); } }, }; </script> <style lang="less" scoped> .concise-menu { // border-radius: 5px; .title{ font-weight: 400; } ul, li { padding: 0; margin: 0; list-style: none; } { box-sizing: border-box; } .menu-search { display: flex; background-color: rgba(235, 241, 247, 1); border-bottom: 1px solid rgba(206, 215, 224, 1); height: 48px; padding-left: 15px; align-items: center; .menu-title { // width: 110px; text-align: right; padding-right: 10px; } .menu-search-box { width: 240px; display: flex; align-items: center; background-color: #fff; padding-right: 10px; border-radius: 5px; input { flex: 1; border: none; outline: none; line-height: 28px; padding: 0 15px; border-radius: 5px; } i { font-size: 20px; cursor: pointer; } } } .menu-content { position: relative; .level1List{ min-height: 350px; max-height: calc(100vh - 200px); overflow: auto; } .area { display: flex; flex-direction: column; li{ &:first-child{ .menu-item{ .first-level{ border-top: none; } } } &:last-child{ .menu-item2{ border-bottom: none; } } } &.child-menu { width: calc(100% - 168px); height: 100%; position: absolute; top: 0; right: 0; background-color: #fff; overflow: auto; padding-left: 24px; padding-right: 20px; .menu-item2{ padding: 12px 0; border-bottom: 1px dashed rgba(184, 184, 184, 1); } } .menu-item { display: flex; flex-direction: column; .level { position: relative; width: 168px; text-align: left; padding-left: 15px; i { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); } &.noChild { cursor: pointer; } &.first-level { cursor: pointer; background-color: rgba(247, 247, 247, 1); // border: 1px solid #ced7e0; border-bottom: none; line-height: 40px; &.active { // color: rgba(0, 102, 204, 1); background-color: #fff; border-right-color: transparent; cursor: default; } &:hover { // color: rgba(0, 102, 204, 1); } } &.second-level { width: 100%; // padding-top: 5px; padding-left: 5px; // padding-bottom: 5px; &.active { color: rgba(161, 161, 182, 1); background-color: #fff; border-color: transparent; &:hover { color: rgba(161, 161, 182, 1); } } &:hover { // color: rgba(0, 102, 204, 1); } } } } .child-area { width: 100%; display: flex; flex-wrap: wrap; padding-top: 3px; // gap: 8px; // border-bottom: 1px solid #ced7e0; li{ width: 33%; // margin-bottom: 12px; padding: 5px 6px; color:rgba(51, 51, 51, 1); } .third-level { // padding: 0 8px; // padding-left: 0; // border-left: 1px solid #ced7e0; cursor: pointer; &:hover { // color: rgba(0, 102, 204, 1); } } ::v-deep .pl-menus-item { // padding: 0 8px; // padding-left: 0; // border-left: 1px solid #ced7e0; &.pl-menus-itemSeld { color: rgba(0, 102, 204, 1); } .title { position: relative; font-weight: 400; color: #333333; .txt { display: inline-block; i { position: initial; transform: rotate(90deg); // right: -5px; // top: 50%; // transform: translateY(-50%); } } } } } } .searchResultList { width: 100%; min-height: 100px; max-height: calc(100vh - 200px); overflow: auto; padding: 5px 10px; ul { display: flex; flex-wrap: wrap; padding-bottom: 10px; li { flex: 0 0 33.3%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 32px; font-size: 14px; display: flex; align-items: center; cursor: pointer; &:hover { // color: #06c; } } .itemSeld { // color: #f00; } } } } } </style> <template> <div class="concise-menu" ref="conciseMenu" :style="menuStyle" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" > <div class="menu-search"> <div class="menu-title"> <div class="title">功能搜索:</div> </div> <div class="menu-search-box"> <input type="text" class="menu-search-input" placeholder="支持拼音首字母搜索" v-model.trim="searchWord" /> <i class="iconfont icon-search"></i> </div> </div> <div class="menu-content"> <div class="level1List" v-if="searchWord == ''"> <!-- 一级菜单列表 --> <ul class="area"> <li v-for="item in menus" :key="item.resId"> <div class="menu-item"> <div class="level first-level" :class="{ active: curresId == item.resId, noChild: !item.children \|\| !item.children.length, }" @click="handleFirstLevelClick(item)" @mouseenter="handleFirstLevelMouseEnter(item)" > <span class="title">{{ item.name }}</span> <i v-if="item.children && item.children.length" class="iconfont icon-arrow-right" ></i> </div> </div> </li> </ul> <!-- 二级及以下菜单列表 --> <ul class="area child-menu"> <li v-for="item in childrenData" :key="item.resId"> <div class="menu-item menu-item2"> <div> <div class="level second-level" :class="{ active: curresId == item.parentId && item.children && item.children.length, noChild: !item.children \|\| !item.children.length, }" @click="handleSecondLevelClick(item)" > <span class="title">{{ item.name }}</span> <!-- <i v-if="item.children && item.children.length" class="iconfont icon-arrow-right" ></i> --> </div> </div> <!-- 三级菜单 --> <ul class="child-area" v-if="item.children && item.children.length" > <template v-for="child in item.children"> <!-- 普通三级菜单项 --> <li :key="child.resId" v-if=" child.isShow && !(child.children && child.children.length) " > <div class="menu-item"> <div class="third-level" @click="handleOpenFunc(child)"> <span class="title">{{ child.name }}</span> <i v-if="child.children && child.children.length" class="iconfont icon-arrow-right" ></i> </div> </div> </li> <!-- 嵌套子菜单组件 --> <nav-sub-menus :level="0" :menuitem="child" :parent="conciseMenu" v-if=" child.isShow && child.children && child.children.length " :key="child.resId" > </nav-sub-menus> </template> </ul> </div> </li> </ul> </div> <div class="searchResultList" v-else> <ul> <li v-for="(searchItem, index) in searchList" :key="'search-' + index" :data-index="index" :title="searchItem.name" @click="handleOpenFunc(searchItem)" > <itemIcon :item="searchItem"></itemIcon> <span>{{ searchItem.name }}</span> </li> <li v-show="searchList.length == 0"> {{ $t("hivuiMain_nodata") }} </li> </ul> </div> </div> </div> </template> <script> import itemIcon from "@main/views/layout/components/allFuncMenu/itemIcon"; import NavSubMenus from "./menus.vue"; import pinyin from "js-pinyin"; import cloneDeep from "lodash/cloneDeep"; export default { name: "ConciseMenu", inject: ["addTab"], provide() { let me = this; return { hideMenus() { me.handleMouseLeave(); }, }; }, components: { NavSubMenus, itemIcon }, props: { targetElRect: { type: Object, required: true, }, placement: { type: String, default: "right", }, }, data() { return { searchWord: "", searchList: [], isVisible: false, isMouseOverMenu: false, curresId: "", childrenData: [], }; }, watch: { targetElRect: { handler() { this.updatePosition(); }, deep: true, }, searchWord(newVal, oldVal) { this.seldIndex = 0; this.doSearch(newVal); }, }, computed: { menuStyle() { return { position: "absolute", top: this.isVisible ? this.position.top + "px" : "-9999px", left: this.position.left + "px", opacity: this.isVisible ? 1 : 0, visibility: this.isVisible ? "visible" : "hidden", width: this.isVisible ? "700px" : "0", transition: " opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s", backgroundColor: "rgba(255, 255, 255, 1)", boxShadow: "0px 0px 6px rgba(0, 0, 0, 0.25)", boxSizing: "border-box", overflow: "hidden", zIndex: 1000, }; }, position() { return { top: 0, left: 0, }; }, menus() { const menus = this.$store.getters.menus.filter(item => item.isShow); return menus; }, }, methods: { /** * 显示菜单 / show() { this.isVisible = true; this.$nextTick(() => { this.updatePosition(); }); }, /* * 隐藏菜单 / hide() { this.isVisible = false; }, /* * 更新菜单位置 / updatePosition() { if (!this.isVisible) return; this.$nextTick(() => { const menuEl = this.$el; if (!menuEl) return; const rect = this.targetElRect; if (!rect) return; let top = rect.top; let left = rect.right; if(this.placement != "right"){ top = top + rect.height; left = 0; } // 应用位置 menuEl.style.top = top + "px"; menuEl.style.left = left + "px"; }); }, /* * 鼠标进入菜单区域处理 / handleMouseEnter(e) { if (e) { const target = e.target \|\| e.srcElement; if (target.closest && target.closest(".pl-menus-item")) { this.isMouseOverMenu = true; return; } } this.isMouseOverMenu = true; }, /* * 鼠标离开菜单区域处理 / handleMouseLeave(e) { if (e) { // 检查鼠标是否移向.pl-menus-item类元素 const relatedTarget = e.relatedTarget \|\| e.toElement; if ( relatedTarget && relatedTarget.closest && relatedTarget.closest(".pl-menus-item") ) { this.isMouseOverMenu = true; return; } } this.isMouseOverMenu = false; this.hide(); }, /* * 处理一级菜单点击事件 / handleFirstLevelClick(item) { if (!item.children \|\| !item.children.length) { this.handleOpenFunc(item); } }, /* * 处理一级菜单鼠标悬停事件 / handleFirstLevelMouseEnter(item) { if (item.children && item.children.length) { this.handleOpenFunc(item, true); } }, /* * 处理二级菜单点击事件 / handleSecondLevelClick(item) { if (!item.children \|\| !item.children.length) { this.handleOpenFunc(item); } }, /* * 打开功能页面 * @param {Object} item - 菜单项 * @param {Boolean} isTabClick - 是否是标签页点击（仅设置子菜单数据） / async handleOpenFunc(item, isTabClick) { let me = this; if (isTabClick) { this.setChildrenData(item.resId); return; } if (item.type == "link") { window.open(item.resUrl, item.name); return; } else if (item.type == "sso") { item.ssoUrl = await me.$store.dispatch("user/openSSOFuncPage", { serviceUrl: item.resUrl, }); } // 添加标签页 me.addTab(item); setTimeout(() => { me.handleMouseLeave && me.handleMouseLeave(); }, 100); }, /* * 设置子菜单数据 * @param {String} resId - 菜单资源ID / setChildrenData(resId) { this.curresId = resId; const menu = this.menus.find((m) => m.resId === resId); if (menu && menu.children) { this.childrenData = menu.children; } else { this.childrenData = []; } }, //获取搜索列表数据 doSearch(cnKey) { let me = this; let list = [], records = me.$store.getters.menusList, hideMenuItemList = me.$store.getters.hideMenuItemList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for (let i = 0, l = records.length; i < l; i++) { let item = records[i]; if (!(!item.isShow \|\| hideMenuItemList.indexOf(item.parentId) != -1)) { if (item.parentId == -1 && item.type == "root") { continue; } if (re.test(cnKey)) { let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); if (y.indexOf(py) > -1 && item.type != "dir") { list.push(item); } } else { if (item.name.indexOf(cnKey) > -1 && item.type != "dir") { list.push(item); } } } } me.$set(me, "searchList", list); // me.$nextTick(() => { // me.countHeight(); // me.$refs.listBox.scrollTo({ // top: 0, // }); // }); }, }, mounted() { if (this.menus.length > 0) { const menu = this.menus[0]; this.setChildrenData(menu.resId); } }, }; </script> <style lang="less" scoped> .concise-menu { // border-radius: 5px; .title{ font-weight: 400; } ul, li { padding: 0; margin: 0; list-style: none; } { box-sizing: border-box; } .menu-search { display: flex; background-color: rgba(235, 241, 247, 1); border-bottom: 1px solid rgba(206, 215, 224, 1); height: 48px; padding-left: 15px; align-items: center; .menu-title { // width: 110px; text-align: right; padding-right: 10px; } .menu-search-box { width: 240px; display: flex; align-items: center; background-color: #fff; padding-right: 10px; border-radius: 5px; input { flex: 1; border: none; outline: none; line-height: 28px; padding: 0 15px; border-radius: 5px; } i { font-size: 20px; cursor: pointer; } } } .menu-content { position: relative; .level1List{ min-height: 350px; max-height: calc(100vh - 200px); overflow: auto; } .area { display: flex; flex-direction: column; li{ &:first-child{ .menu-item{ .first-level{ border-top: none; } } } &:last-child{ .menu-item2{ border-bottom: none; } } } &.child-menu { width: calc(100% - 168px); height: 100%; position: absolute; top: 0; right: 0; background-color: #fff; overflow: auto; padding-left: 24px; padding-right: 20px; .menu-item2{ padding: 12px 0; border-bottom: 1px dashed rgba(184, 184, 184, 1); } } .menu-item { display: flex; flex-direction: column; .level { position: relative; width: 168px; text-align: left; padding-left: 15px; i { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); } &.noChild { cursor: pointer; } &.first-level { cursor: pointer; background-color: rgba(247, 247, 247, 1); // border: 1px solid #ced7e0; border-bottom: none; line-height: 40px; &.active { // color: rgba(0, 102, 204, 1); background-color: #fff; border-right-color: transparent; cursor: default; } &:hover { // color: rgba(0, 102, 204, 1); } } &.second-level { width: 100%; // padding-top: 5px; padding-left: 5px; // padding-bottom: 5px; &.active { color: rgba(161, 161, 182, 1); background-color: #fff; border-color: transparent; &:hover { color: rgba(161, 161, 182, 1); } } &:hover { // color: rgba(0, 102, 204, 1); } } } } .child-area { width: 100%; display: flex; flex-wrap: wrap; padding-top: 3px; // gap: 8px; // border-bottom: 1px solid #ced7e0; li{ width: 33%; // margin-bottom: 12px; padding: 5px 6px; color:rgba(51, 51, 51, 1); } .third-level { // padding: 0 8px; // padding-left: 0; // border-left: 1px solid #ced7e0; cursor: pointer; &:hover { // color: rgba(0, 102, 204, 1); } } ::v-deep .pl-menus-item { // padding: 0 8px; // padding-left: 0; // border-left: 1px solid #ced7e0; &.pl-menus-itemSeld { color: rgba(0, 102, 204, 1); } .title { position: relative; font-weight: 400; color: #333333; .txt { display: inline-block; i { position: initial; transform: rotate(90deg); // right: -5px; // top: 50%; // transform: translateY(-50%); } } } } } } .searchResultList { width: 100%; min-height: 100px; max-height: calc(100vh - 200px); overflow: auto; padding: 5px 10px; ul { display: flex; flex-wrap: wrap; padding-bottom: 10px; li { flex: 0 0 33.3%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 32px; font-size: 14px; display: flex; align-items: center; cursor: pointer; &:hover { // color: #06c; } } .itemSeld { // color: #f00; } } } } } </style>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/conciseSidebar/concisemenu.vue

<ul
                class="child-area"
                v-if="item.children && item.children.length"
              >
                <template v-for="child in item.children">
                  
                  <li
                    :key="child.resId"
                    v-if="
                      child.isShow && !(child.children && child.children.length)
                    "
                  >
                    <div class="menu-item">
                      <div class="third-level" @click="handleOpenFunc(child)">
                        <span class="title">{{ child.name }}</span>
                        <i
                          v-if="child.children && child.children.length"
                          class="iconfont icon-arrow-right"
                        ></i>
                      </div>
                    </div>
                  </li>

<nav-sub-menus
                    :level="0"
                    :menuitem="child"
                    :parent="conciseMenu"
                    v-if="
                      child.isShow && child.children && child.children.length
                    "
                    :key="child.resId"
                  >
                  </nav-sub-menus>
                </template>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div class="searchResultList" v-else>
        <ul>
          <li
            v-for="(searchItem, index) in searchList"
            :key="'search-' + index"
            :data-index="index"
            :title="searchItem.name"
            @click="handleOpenFunc(searchItem)"
          >
            <itemIcon :item="searchItem"></itemIcon>
            <span>{{ searchItem.name }}</span>
          </li>
          <li v-show="searchList.length == 0">
            {{ $t("hivuiMain_nodata") }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

isVisible: false,
      isMouseOverMenu: false,
      isInputFocus: false,
      isComposing: false,
      curresId: "",
      childrenData: [],
    };
  },
  watch: {
    targetElRect: {
      handler() {
        this.updatePosition();
      },
      deep: true,
    },
    searchWord(newVal, oldVal) {
      this.seldIndex = 0;
      this.doSearch(newVal);
    },
  },
  computed: {
    menuStyle() {
      return {
        position: "absolute",
        top: this.isVisible ? this.position.top + "px" : "-9999px",
        left: this.position.left + "px",
        opacity: this.isVisible ? 1 : 0,
        visibility: this.isVisible ? "visible" : "hidden",
        width: this.isVisible ? "700px" : "0",
        transition: " opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s",
        backgroundColor: "rgba(255, 255, 255, 1)",
        boxShadow: "0px 0px 6px  rgba(0, 0, 0, 0.25)",
        boxSizing: "border-box",
        overflow: "hidden",
        zIndex: 1000,
      };
    },
    position() {
      return {
        top: 0,
        left: 0,
      };
    },
    menus() {
      const menus = this.$store.getters.menus.filter(item => item.isShow);
      return menus;
    },
  },
  methods: {
    /**
     * 显示菜单
     */
    show() {
      this.isVisible = true;
      this.$nextTick(() => {
        this.updatePosition();
      });
    },

/**
     * 隐藏菜单
     */
    hide() {
      if(this.isComposing || this.isInputFocus){
        return;
      }
      this.isVisible = false;
    },

/**
     * 更新菜单位置
     */
    updatePosition() {
      if (!this.isVisible) return;

this.$nextTick(() => {
        const menuEl = this.$el;
        if (!menuEl) return;

const rect = this.targetElRect;
        if (!rect) return;

let top = rect.top;
        let left = rect.right;
        if(this.placement != "right"){
          top = top + rect.height;
          left = 0;
        }
        // 应用位置
        menuEl.style.top = top + "px";
        menuEl.style.left = left + "px";
      });
    },

/**
     * 鼠标进入菜单区域处理
     */
    handleMouseEnter(e) {
      if (e) {
        const target = e.target || e.srcElement;
        if (target.closest && target.closest(".pl-menus-item")) {
          this.isMouseOverMenu = true;
          return;
        }
      }
      this.isMouseOverMenu = true;
    },

handleInputFocus() {
      this.isInputFocus = true;
    },

handleInputBlur() {
      this.isInputFocus = false;
    },

handleCompositionStart() {
      this.isComposing = true;
      console.log("+++++compositionstart",this.isComposing);
    },

handleCompositionEnd() {
      this.isComposing = false;
      console.log("----compositionend",this.isComposing);
    },

/**
     * 鼠标离开菜单区域处理
     */
    handleMouseLeave(e) {
      if (e) {
        const relatedTarget = e.relatedTarget || e.toElement;
        if (
          relatedTarget &&
          relatedTarget.closest &&
          relatedTarget.closest(".pl-menus-item")
        ) {
          this.isMouseOverMenu = true;
          return;
        }

if (!relatedTarget) {
          const activeEl = document.activeElement;
          if (
            this.$el &&
            (this.isComposing || this.isInputFocus || this.$el.contains(activeEl))
          ) {
            this.isMouseOverMenu = true;
            return;
          }
        }
      }
      this.isMouseOverMenu = false;
      this.hide();
    },

/**
     * 处理一级菜单点击事件
     */
    handleFirstLevelClick(item) {
      if (!item.children || !item.children.length) {
        this.handleOpenFunc(item);
      }
    },

/**
     * 处理一级菜单鼠标悬停事件
     */
    handleFirstLevelMouseEnter(item) {
      if (item.children && item.children.length) {
        this.handleOpenFunc(item, true);
      }
    },

/**
     * 处理二级菜单点击事件
     */
    handleSecondLevelClick(item) {
      if (!item.children || !item.children.length) {
        this.handleOpenFunc(item);
      }
    },

/**
     * 打开功能页面
     * @param {Object} item - 菜单项
     * @param {Boolean} isTabClick - 是否是标签页点击（仅设置子菜单数据）
     */
    async handleOpenFunc(item, isTabClick) {
      let me = this;
      if (isTabClick) {
        this.setChildrenData(item.resId);
        return;
      }

if (item.type == "link") {
        window.open(item.resUrl, item.name);
        return;
      } else if (item.type == "sso") {
        item.ssoUrl = await me.$store.dispatch("user/openSSOFuncPage", {
          serviceUrl: item.resUrl,
        });
      }

// 添加标签页
      me.addTab(item);

setTimeout(() => {
        me.handleMouseLeave && me.handleMouseLeave();
      }, 100);
    },

/**
     * 设置子菜单数据
     * @param {String} resId - 菜单资源ID
     */
    setChildrenData(resId) {
      this.curresId = resId;
      const menu = this.menus.find((m) => m.resId === resId);
      if (menu && menu.children) {
        this.childrenData = menu.children;
      } else {
        this.childrenData = [];
      }
    },
    //获取搜索列表数据
    doSearch(cnKey) {
      let me = this;
      let list = [],
        records = me.$store.getters.menusList,
        hideMenuItemList = me.$store.getters.hideMenuItemList;
      let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase();
      let re = new RegExp("^[a-zA-Z]+$");
      for (let i = 0, l = records.length; i < l; i++) {
        let item = records[i];
        if (!(!item.isShow || hideMenuItemList.indexOf(item.parentId) != -1)) {
          if (item.parentId == -1 && item.type == "root") {
            continue;
          }
          if (re.test(cnKey)) {
            let y = pinyin.getCamelChars(item.name).toLocaleLowerCase();
            if (y.indexOf(py) > -1 && item.type != "dir") {
              list.push(item);
            }
          } else {
            if (item.name.indexOf(cnKey) > -1 && item.type != "dir") {
              list.push(item);
            }
          }
        }
      }
      me.$set(me, "searchList", list);
      // me.$nextTick(() => {
      //   me.countHeight();
      //   me.$refs.listBox.scrollTo({
      //     top: 0,
      //   });
      // });
    },
  },
  mounted() {
    if (this.menus.length > 0) {
      const menu = this.menus[0];
      this.setChildrenData(menu.resId);
    }
  },
};
</script>

* {
    box-sizing: border-box;
  }
  .menu-search {
    display: flex;
    background-color: rgba(235, 241, 247, 1);
    border-bottom: 1px solid rgba(206, 215, 224, 1);
    height: 48px;
    padding-left: 15px;
    align-items: center;

.menu-title {
      // width: 110px;
      text-align: right;
      padding-right: 10px;
    }
    .menu-search-box {
      width: 240px;
      display: flex;
      align-items: center;
      background-color: #fff;
      padding-right: 10px;
      border-radius: 5px;
      input {
        flex: 1;
        border: none;
        outline: none;
        line-height: 28px;
        padding: 0 15px;
        border-radius: 5px;
      }
      i {
        font-size: 20px;
        cursor: pointer;
      }
    }
  }

.menu-content {
    position: relative;
    .level1List{
      min-height: 350px;
      max-height: calc(100vh - 200px);
      overflow: auto;
    }
    .area {
      display: flex;
      flex-direction: column;

li{
        &:first-child{
          .menu-item{
            .first-level{
              border-top: none;
            }
          }
        }
        &:last-child{
          .menu-item2{
            border-bottom: none;
          }
        }
      }

&.child-menu {
        width: calc(100% - 168px);
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background-color: #fff;
        overflow: auto;
        padding-left: 24px;
        padding-right: 20px;
        .menu-item2{
          padding: 12px 0;
          border-bottom: 1px dashed rgba(184, 184, 184, 1);
        }
      }

.menu-item {
        display: flex;
        flex-direction: column;
        .level {
          position: relative;
          width: 168px;
          text-align: left;
          padding-left: 15px;
          i {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
          }

&.noChild {
            cursor: pointer;
          }

&.first-level {
            cursor: pointer;
            background-color: rgba(247, 247, 247, 1);
            // border: 1px solid #ced7e0;
            border-bottom: none;
            line-height: 40px;
          
            &.active {
              // color: rgba(0, 102, 204, 1);
              background-color: #fff;
              border-right-color: transparent;
              cursor: default;
            }

&:hover {
              // color: rgba(0, 102, 204, 1);
            }
          }

&.second-level {
            width: 100%;
            // padding-top: 5px;
            padding-left: 5px;
            // padding-bottom: 5px;

&.active {
              color: rgba(161, 161, 182, 1);
              background-color: #fff;
              border-color: transparent;
              &:hover {
                color: rgba(161, 161, 182, 1);
              }
            }

&:hover {
              // color: rgba(0, 102, 204, 1);
            }
          }
        }
      }

.child-area {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-top: 3px;
        // gap: 8px;
        // border-bottom: 1px solid #ced7e0;
        li{
          width: 33%;
          // margin-bottom: 12px;
          padding: 5px 6px;
          color:rgba(51, 51, 51, 1);
        }

.third-level {
          // padding: 0 8px;
          // padding-left: 0;
          // border-left: 1px solid #ced7e0;
          cursor: pointer;

&:hover {
            // color: rgba(0, 102, 204, 1);
          }
        }

::v-deep .pl-menus-item {
          // padding: 0 8px;
          // padding-left: 0;
          // border-left: 1px solid #ced7e0;

&.pl-menus-itemSeld {
            color: rgba(0, 102, 204, 1);
          }

.title {
            position: relative;
            font-weight: 400;
            color: #333333;
            .txt {
              display: inline-block;

i {
                position: initial;
                transform: rotate(90deg);
                // right: -5px;
                // top: 50%;
                // transform: translateY(-50%);
              }
            }
          }
        }
      }
    }

.searchResultList {
      width: 100%;
      min-height: 100px;
      max-height: calc(100vh - 200px);
      overflow: auto;
      padding: 5px 10px;
      ul {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 10px;
        li {
          flex: 0 0 33.3%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 32px;
          font-size: 14px;
          display: flex;
          align-items: center;
          cursor: pointer;
          &:hover {
            // color: #06c;
          }
        }
        .itemSeld {
          // color: #f00;
        }
      }
    }
  }
}
</style>

isVisible: false,
      isMouseOverMenu: false,
      curresId: "",
      childrenData: [],
    };
  },
  watch: {
    targetElRect: {
      handler() {
        this.updatePosition();
      },
      deep: true,
    },
    searchWord(newVal, oldVal) {
      this.seldIndex = 0;
      this.doSearch(newVal);
    },
  },
  computed: {
    menuStyle() {
      return {
        position: "absolute",
        top: this.isVisible ? this.position.top + "px" : "-9999px",
        left: this.position.left + "px",
        opacity: this.isVisible ? 1 : 0,
        visibility: this.isVisible ? "visible" : "hidden",
        width: this.isVisible ? "700px" : "0",
        transition: " opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s",
        backgroundColor: "rgba(255, 255, 255, 1)",
        boxShadow: "0px 0px 6px  rgba(0, 0, 0, 0.25)",
        boxSizing: "border-box",
        overflow: "hidden",
        zIndex: 1000,
      };
    },
    position() {
      return {
        top: 0,
        left: 0,
      };
    },
    menus() {
      const menus = this.$store.getters.menus.filter(item => item.isShow);
      return menus;
    },
  },
  methods: {
    /**
     * 显示菜单
     */
    show() {
      this.isVisible = true;
      this.$nextTick(() => {
        this.updatePosition();
      });
    },

/**
     * 隐藏菜单
     */
    hide() {
      this.isVisible = false;
    },

/**
     * 更新菜单位置
     */
    updatePosition() {
      if (!this.isVisible) return;

this.$nextTick(() => {
        const menuEl = this.$el;
        if (!menuEl) return;

const rect = this.targetElRect;
        if (!rect) return;

/**
     * 鼠标离开菜单区域处理
     */
    handleMouseLeave(e) {
      if (e) {
        // 检查鼠标是否移向.pl-menus-item类元素
        const relatedTarget = e.relatedTarget || e.toElement;
        if (
          relatedTarget &&
          relatedTarget.closest &&
          relatedTarget.closest(".pl-menus-item")
        ) {
          this.isMouseOverMenu = true;
          return;
        }
      }
      this.isMouseOverMenu = false;
      this.hide();
    },