diff --git a/.umirc.ts b/.umirc.ts index 6fb25c9..6ce0b99 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -1,9 +1,30 @@ import { defineConfig } from 'umi'; export default defineConfig({ + title: '设施管理设备', nodeModulesTransform: { type: 'none', }, - routes: [{ path: '/', component: '@/pages/index' }], + theme: { + '@primary-color': '#165DFF', + }, + routes: [ + { + path: '/', + component: '@/pages/index', + routes: [ + { + path: '/basic', + component: '@/pages/Basic/Header', + routes: [ + { + path: '/basic/login', + component: '@/pages/Basic/List/Login', + }, + ], + }, + ], + }, + ], fastRefresh: {}, }); diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..40701ca --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "cSpell.words": ["iconfont"] +} diff --git a/src/pages/Basic/Header/index.less b/src/pages/Basic/Header/index.less new file mode 100644 index 0000000..b7408a7 --- /dev/null +++ b/src/pages/Basic/Header/index.less @@ -0,0 +1,15 @@ +.head { + height: 60px; + background: #001628; + font-size: 18px; + font-weight: 500; + color: #ffffff; + line-height: 60px; + padding-left: 40px; +} + +.content { + height: calc(100vh - 60px); + background-color: #fafafa; + overflow: auto; +} diff --git a/src/pages/Basic/Header/index.tsx b/src/pages/Basic/Header/index.tsx new file mode 100644 index 0000000..643c4d0 --- /dev/null +++ b/src/pages/Basic/Header/index.tsx @@ -0,0 +1,12 @@ +import styles from './index.less'; +import { Fragment } from 'react'; + +const Header = ({ ...props }) => { + return ( + +
设施管理设备
+
{props.children}
+ + ); +}; +export default Header; diff --git a/src/pages/Basic/List/Login/index.less b/src/pages/Basic/List/Login/index.less new file mode 100644 index 0000000..4eb2bca --- /dev/null +++ b/src/pages/Basic/List/Login/index.less @@ -0,0 +1,140 @@ +.login { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + + .left { + width: 480px; + height: 400px; + background: #fff; + box-shadow: 0px 10px 28px 2px rgba(231, 231, 231, 0.5); + border-radius: 8px; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + + .name { + display: flex; + align-items: center; + margin-top: 42px; + margin-bottom: 52px; + + b { + width: 6px; + height: 20px; + background: #165dff; + border-radius: 4px; + display: inline-block; + margin-right: 4px; + } + + span { + font-size: 24px; + font-weight: 500; + color: #232b40; + } + } + + .status { + font-size: 14px; + font-weight: 500; + color: #464f66; + + span { + color: #e30000; + } + } + + .btn { + width: 240px; + height: 40px; + background: #165dff; + border-radius: 4px; + cursor: pointer; + text-align: center; + line-height: 40px; + font-size: 14px; + font-weight: 400; + color: #ffffff; + margin-top: 52px; + } + + .tip { + font-size: 14px; + color: #fa6400; + position: absolute; + z-index: 2; + left: 0; + bottom: -45px; + width: 1400px; + } + } + + > aside { + width: 56px; + height: 34px; + color: #165dff; + font-size: 26px; + padding-left: 7px; + } + + .right { + width: 480px; + height: 400px; + background: #fff; + box-shadow: 0px 10px 28px 2px rgba(231, 231, 231, 0.5); + border-radius: 8px; + display: flex; + flex-direction: column; + align-items: center; + + .name { + display: flex; + align-items: center; + margin-top: 42px; + margin-bottom: 52px; + + b { + width: 6px; + height: 20px; + background: #165dff; + border-radius: 4px; + display: inline-block; + margin-right: 4px; + } + + span { + font-size: 24px; + font-weight: 500; + color: #232b40; + } + } + + .status { + font-size: 14px; + font-weight: 500; + color: #464f66; + + span { + color: #e30000; + } + } + + .btn { + width: 240px; + height: 40px; + background: #165dff; + border-radius: 4px; + cursor: pointer; + text-align: center; + line-height: 40px; + font-size: 14px; + font-weight: 400; + color: #ffffff; + margin-top: 22px; + margin-bottom: 20px; + } + } +} diff --git a/src/pages/Basic/List/Login/index.tsx b/src/pages/Basic/List/Login/index.tsx new file mode 100644 index 0000000..e5bba1f --- /dev/null +++ b/src/pages/Basic/List/Login/index.tsx @@ -0,0 +1,125 @@ +import styles from './index.less'; +import { Select, Input, Button, Row, Modal, Form } from 'antd'; +import Fetch from '@/utils/fetch'; +import { useEffect, useState } from 'react'; + +const Page = () => { + const [text, setText] = useState(''); + const [visible, setVisible] = useState(true); + const [form] = Form.useForm(); + + useEffect(() => { + getData(); + }, []); + + const getData = async () => { + const res = await Fetch('/openi/resource/getResourceStatus'); + console.log(res, 'res'); + if (res.result === 'success') { + setText(res.result?.data?.[0]?.resource ? '已开通' : '未开通'); + } + }; + + const handleFinish = (v: any) => {}; + + return ( +
+
+
+ + 开通设施管理设备 +
+
+ 当前状态：{text} +
+
点击开通
+
+ 注：请先开通设施密码管理设备，在开通设施密码管理证书体系，才能正常运行系统。 +
+
+
+ ); +}; +export default Page; diff --git a/src/pages/index.less b/src/pages/index.less deleted file mode 100644 index 586302b..0000000 --- a/src/pages/index.less +++ /dev/null @@ -1,3 +0,0 @@ -.title { - background: rgb(121, 242, 157); -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2e9ddef..71c56cb 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,23 +1,16 @@ -import styles from './index.less'; -import { message } from 'antd'; -import Fetch from '@/utils/fetch'; import { useEffect } from 'react'; +import { history } from 'umi'; +import { ConfigProvider } from 'antd'; +import zhCN from 'antd/es/locale/zh_CN'; +import '@/styles/base.less'; +import '@/styles/iconfont/iconfont.css'; -export default function IndexPage() { +const IndexPage = ({ ...props }) => { + //重定向页面 useEffect(() => { - getData(); + history.replace('/basic/login'); }, []); - const getData = async () => { - const res = await Fetch('/openi/resource/clickOpenResource', { - method: 'post', - }); - console.log(res); - }; - return ( -
-

message.info(2222)} className={styles.title}> - Page index -

-
- ); -} + + return {props.children}; +}; +export default IndexPage; diff --git a/src/styles/base.less b/src/styles/base.less new file mode 100755 index 0000000..914f10f --- /dev/null +++ b/src/styles/base.less @@ -0,0 +1,552 @@ +.bold { + font-weight: bold; +} + +.mt0 { + margin-top: 0px; +} + +.mt3 { + margin-top: 3px; +} + +.mt4 { + margin-top: 4px; +} + +.mt5 { + margin-top: 5px; +} + +.mt6 { + margin-top: 6px; +} + +.mt8 { + margin-top: 8px; +} + +.mt10 { + margin-top: 10px; +} + +.mt12 { + margin-top: 12px; +} + +.mt15 { + margin-top: 15px; +} + +.mt17 { + margin-top: 17px; +} + +.mt20 { + margin-top: 20px; +} + +.mt25 { + margin-top: 25px; +} + +.mt30 { + margin-top: 30px; +} + +.mt35 { + margin-top: 35px; +} + +.mt40 { + margin-top: 40px; +} + +.mt50 { + margin-top: 50px; +} + +.mt60 { + margin-top: 60px; +} + +.mt70 { + margin-top: 70px; +} + +.mt75 { + margin-top: 75px; +} + +.mt80 { + margin-top: 80px; +} + +.mt100 { + margin-top: 100px; +} + +.ml0 { + margin-left: 0; +} + +.ml2 { + margin-left: 2px; +} + +.ml5 { + margin-left: 5px; +} + +.ml8 { + margin-left: 8px; +} + +.ml10 { + margin-left: 10px; +} + +.ml10soft { + margin-left: 10px; +} + +.ml15 { + margin-left: 15px; +} + +.ml20 { + margin-left: 20px; +} + +.ml25 { + margin-left: 25px; +} + +.ml30 { + margin-left: 30px; +} + +.ml35 { + margin-left: 35px; +} + +.ml40 { + margin-left: 40px; +} + +.ml50 { + margin-left: 50px; +} + +.ml60 { + margin-left: 60px; +} + +.ml90 { + margin-left: 90px; +} + +.ml100 { + margin-left: 100px; +} + +.mr0 { + margin-right: 0px; +} + +.mr1 { + margin-right: 1px; +} + +.mr3 { + margin-right: 3px; +} + +.mr5 { + margin-right: 5px; +} + +.mr8 { + margin-right: 8px; +} + +.mr10 { + margin-right: 10px; +} + +.mr15 { + margin-right: 15px; +} + +.mr20 { + margin-right: 20px; +} + +.mr25 { + margin-right: 25px; +} + +.mr30 { + margin-right: 30px; +} + +.mr32 { + margin-right: 32px; +} + +.mr40 { + margin-right: 40px; +} + +.mr50 { + margin-right: 50px; +} + +.mb0 { + margin-bottom: 0px; +} + +.mb5 { + margin-bottom: 5px; +} + +.mb10 { + margin-bottom: 10px; +} + +.mb16 { + margin-bottom: 16px; +} + +.mb20 { + margin-bottom: 20px; +} + +.mb25 { + margin-bottom: 25px; +} + +.mb30 { + margin-bottom: 30px; +} + +.mb50 { + margin-bottom: 50px; +} + +.mb60 { + margin-bottom: 60px; +} + +.mb80 { + margin-bottom: 80px; +} + +.mb100 { + margin-bottom: 100px; +} + +.mtb20 { + margin-top: 20px; + margin-bottom: 20px; +} + +.p0 { + padding: 0; +} + +.p12 { + padding: 12px; +} + +.p16 { + padding: 16px; +} + +.p20 { + padding: 20px; +} + +.p30 { + padding: 30px; +} + +.pt2 { + padding-top: 2px; +} + +.pt5 { + padding-top: 5px; +} + +.pt8 { + padding-top: 8px; +} + +.pt10 { + padding-top: 10px; +} + +.pt20 { + padding-top: 20px; +} + +.pt30 { + padding-top: 30px; +} + +.pt40 { + padding-top: 40px; +} + +.pt60 { + padding-top: 60px; +} + +.pb0 { + padding-bottom: 0px; +} + +.pb5 { + padding-bottom: 5px; +} + +.pb8 { + padding-bottom: 8px; +} + +.pb10 { + padding-bottom: 10px; +} + +.pb12 { + padding-bottom: 12px; +} + +.pb20 { + padding-bottom: 20px; +} + +.pb30 { + padding-bottom: 30px; +} + +.pb40 { + padding-bottom: 40px; +} + +.pb50 { + padding-bottom: 50px; +} + +.pb60 { + padding-bottom: 60px; +} + +.pr5 { + padding-right: 5px; +} + +.pr10 { + padding-right: 10px; +} + +.pr20 { + padding-right: 20px; +} + +.pr25 { + padding-right: 25px; +} + +.pr30 { + padding-right: 30px; +} + +.pr40 { + padding-right: 40px; +} + +.pl0 { + padding-left: 0px; +} + +.pl8 { + padding-left: 8px; +} + +.pl10 { + padding-left: 10px; +} + +.pl15 { + padding-left: 15px; +} + +.pl20 { + padding-left: 20px; +} + +.pl25 { + padding-left: 25px; +} + +.pl30 { + padding-left: 30px; +} + +.pl40 { + padding-left: 40px; +} + +.pl60 { + padding-left: 60px; +} + +.pl70 { + padding-left: 70px; +} + +.pl80 { + padding-left: 80px; +} + +.plr20 { + padding-left: 20px; + padding-right: 20px; +} + +.plr30 { + padding-left: 30px; + padding-right: 30px; +} + +.tl { + text-align: left; +} + +.tc { + text-align: center; +} + +.tr { + text-align: right; +} + +.c-green-shixun { + color: #43d7b5; +} + +.show { + display: block; + _display: block; +} + +.minHb100 { + min-height: 100%; +} + +.minH200 { + min-height: 200px; +} + +.minH500 { + min-height: 500px; +} + +.minH1000 { + min-height: 1000px; +} + +.minH1050 { + min-height: 1050px; +} + +.hide { + display: none; + _display: none; +} + +.hidden { + visibility: hidden; +} + +.overflow_hidden { + overflow: hidden; +} + +.zIndexf1 { + z-index: -1; +} + +.font8 { + font-size: 8px; +} + +.font12 { + font-size: 12px; +} + +.font13 { + font-size: 13px; +} + +.font14 { + font-size: 14px; +} + +.font15 { + font-size: 15px; +} + +.font16 { + font-size: 16px; +} + +.font17 { + font-size: 17px; +} + +.font18 { + font-size: 18px; +} + +.font19 { + font-size: 19px; +} + +.font20 { + font-size: 20px; +} + +.font22 { + font-size: 22px; +} + +.font24 { + font-size: 24px; +} + +.font28 { + font-size: 28px; +} + +.font40 { + font-size: 40px; +} + +.font50 { + font-size: 50px; +} + +.line14 { + line-height: 1.4; +} + +.line24 { + line-height: 24px; +} + +.line26 { + line-height: 26px; +} diff --git a/src/styles/iconfont/demo.css b/src/styles/iconfont/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/src/styles/iconfont/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/src/styles/iconfont/demo_index.html b/src/styles/iconfont/demo_index.html new file mode 100644 index 0000000..fe42a8f --- /dev/null +++ b/src/styles/iconfont/demo_index.html @@ -0,0 +1,490 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+
    +
  • Unicode
    • +
  • Font class
    • +
  • Symbol
    • +
+ + 查看项目 + +
+
+
+
    + +
  • + +
    箭头
    +
    
    +
    • + +
  • + +
    编组
    +
    
    +
    • + +
  • + +
    密码软件加密
    +
    
    +
    • + +
  • + +
    节点
    +
    
    +
    • + +
  • + +
    产生公私钥对
    +
    
    +
    • + +
  • + +
    算法逻辑加密
    +
    
    +
    • + +
  • + +
    数据
    +
    
    +
    • + +
  • + +
    数据集
    +
    
    +
    • + +
  • + +
    算法参数加密
    +
    
    +
    • + +
  • + +
    人工智能
    +
    
    +
    • + +
  • + +
    预制密钥加密
    +
    
    +
    • + +
  • + +
    算法设计
    +
    
    +
    • + +
  • + +
    云集算
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot?t=1660117709966'); /* IE9 */
+  src: url('iconfont.eot?t=1660117709966#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('iconfont.woff2?t=1660117709966') format('woff2'),
+       url('iconfont.woff?t=1660117709966') format('woff'),
+       url('iconfont.ttf?t=1660117709966') format('truetype'),
+       url('iconfont.svg?t=1660117709966#iconfont') format('svg');
+}
+
+

第二步：定义使用 iconfont 的样式

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

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 箭头 +
    +
    .icon-jiantou +
    +
    • + +
  • + +
    + 编组 +
    +
    .icon-bianzu +
    +
    • + +
  • + +
    + 密码软件加密 +
    +
    .icon-mimaruanjianjiami +
    +
    • + +
  • + +
    + 节点 +
    +
    .icon-jiedian +
    +
    • + +
  • + +
    + 产生公私钥对 +
    +
    .icon-chanshenggongsiyuedui +
    +
    • + +
  • + +
    + 算法逻辑加密 +
    +
    .icon-suanfaluojijiami +
    +
    • + +
  • + +
    + 数据 +
    +
    .icon-shuju +
    +
    • + +
  • + +
    + 数据集 +
    +
    .icon-shujuji +
    +
    • + +
  • + +
    + 算法参数加密 +
    +
    .icon-suanfacanshujiami +
    +
    • + +
  • + +
    + 人工智能 +
    +
    .icon-rengongzhineng +
    +
    • + +
  • + +
    + 预制密钥加密 +
    +
    .icon-yuzhimiyuejiami +
    +
    • + +
  • + +
    + 算法设计 +
    +
    .icon-suanfasheji +
    +
    • + +
  • + +
    + 云集算 +
    +
    .icon-yunjisuan +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    箭头
    +
    #icon-jiantou
    +
    • + +
  • + +
    编组
    +
    #icon-bianzu
    +
    • + +
  • + +
    密码软件加密
    +
    #icon-mimaruanjianjiami
    +
    • + +
  • + +
    节点
    +
    #icon-jiedian
    +
    • + +
  • + +
    产生公私钥对
    +
    #icon-chanshenggongsiyuedui
    +
    • + +
  • + +
    算法逻辑加密
    +
    #icon-suanfaluojijiami
    +
    • + +
  • + +
    数据
    +
    #icon-shuju
    +
    • + +
  • + +
    数据集
    +
    #icon-shujuji
    +
    • + +
  • + +
    算法参数加密
    +
    #icon-suanfacanshujiami
    +
    • + +
  • + +
    人工智能
    +
    #icon-rengongzhineng
    +
    • + +
  • + +
    预制密钥加密
    +
    #icon-yuzhimiyuejiami
    +
    • + +
  • + +
    算法设计
    +
    #icon-suanfasheji
    +
    • + +
  • + +
    云集算
    +
    #icon-yunjisuan
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/src/styles/iconfont/iconfont.css b/src/styles/iconfont/iconfont.css new file mode 100644 index 0000000..204f365 --- /dev/null +++ b/src/styles/iconfont/iconfont.css @@ -0,0 +1,70 @@ +@font-face { + font-family: "iconfont"; /* Project id 3579477 */ + src: url('iconfont.eot?t=1660117709966'); /* IE9 */ + src: url('iconfont.eot?t=1660117709966#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('iconfont.woff2?t=1660117709966') format('woff2'), + url('iconfont.woff?t=1660117709966') format('woff'), + url('iconfont.ttf?t=1660117709966') format('truetype'), + url('iconfont.svg?t=1660117709966#iconfont') format('svg'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-jiantou:before { + content: "\e66b"; +} + +.icon-bianzu:before { + content: "\e65f"; +} + +.icon-mimaruanjianjiami:before { + content: "\e660"; +} + +.icon-jiedian:before { + content: "\e661"; +} + +.icon-chanshenggongsiyuedui:before { + content: "\e662"; +} + +.icon-suanfaluojijiami:before { + content: "\e663"; +} + +.icon-shuju:before { + content: "\e664"; +} + +.icon-shujuji:before { + content: "\e665"; +} + +.icon-suanfacanshujiami:before { + content: "\e666"; +} + +.icon-rengongzhineng:before { + content: "\e667"; +} + +.icon-yuzhimiyuejiami:before { + content: "\e668"; +} + +.icon-suanfasheji:before { + content: "\e669"; +} + +.icon-yunjisuan:before { + content: "\e66a"; +} + diff --git a/src/styles/iconfont/iconfont.eot b/src/styles/iconfont/iconfont.eot new file mode 100644 index 0000000..36637b4 Binary files /dev/null and b/src/styles/iconfont/iconfont.eot differ diff --git a/src/styles/iconfont/iconfont.js b/src/styles/iconfont/iconfont.js new file mode 100644 index 0000000..767d25d --- /dev/null +++ b/src/styles/iconfont/iconfont.js @@ -0,0 +1,65 @@ +!(function (l) { + var t, + i, + c, + h, + a, + e = + '', + o = (o = document.getElementsByTagName('script'))[ + o.length - 1 + ].getAttribute('data-injectcss'), + n = function (l, t) { + t.parentNode.insertBefore(l, t); + }; + if (o && !l.__iconfont__svg__cssinject__) { + l.__iconfont__svg__cssinject__ = !0; + try { + document.write( + '', + ); + } catch (l) { + console && console.log(l); + } + } + function s() { + a || ((a = !0), c()); + } + function d() { + try { + h.documentElement.doScroll('left'); + } catch (l) { + return void setTimeout(d, 50); + } + s(); + } + (t = function () { + var l, + t = document.createElement('div'); + (t.innerHTML = e), + (e = null), + (t = t.getElementsByTagName('svg')[0]) && + (t.setAttribute('aria-hidden', 'true'), + (t.style.position = 'absolute'), + (t.style.width = 0), + (t.style.height = 0), + (t.style.overflow = 'hidden'), + (t = t), + (l = document.body).firstChild ? n(t, l.firstChild) : l.appendChild(t)); + }), + document.addEventListener + ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState) + ? setTimeout(t, 0) + : ((i = function () { + document.removeEventListener('DOMContentLoaded', i, !1), t(); + }), + document.addEventListener('DOMContentLoaded', i, !1)) + : document.attachEvent && + ((c = t), + (h = l.document), + (a = !1), + d(), + (h.onreadystatechange = function () { + 'complete' == h.readyState && ((h.onreadystatechange = null), s()); + })); +})(window); diff --git a/src/styles/iconfont/iconfont.json b/src/styles/iconfont/iconfont.json new file mode 100644 index 0000000..ff2ee5d --- /dev/null +++ b/src/styles/iconfont/iconfont.json @@ -0,0 +1,100 @@ +{ + "id": "3579477", + "name": "信科大图标库", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "31164284", + "name": "箭头", + "font_class": "jiantou", + "unicode": "e66b", + "unicode_decimal": 58987 + }, + { + "icon_id": "31161856", + "name": "编组", + "font_class": "bianzu", + "unicode": "e65f", + "unicode_decimal": 58975 + }, + { + "icon_id": "31161857", + "name": "密码软件加密", + "font_class": "mimaruanjianjiami", + "unicode": "e660", + "unicode_decimal": 58976 + }, + { + "icon_id": "31161858", + "name": "节点", + "font_class": "jiedian", + "unicode": "e661", + "unicode_decimal": 58977 + }, + { + "icon_id": "31161859", + "name": "产生公私钥对", + "font_class": "chanshenggongsiyuedui", + "unicode": "e662", + "unicode_decimal": 58978 + }, + { + "icon_id": "31161860", + "name": "算法逻辑加密", + "font_class": "suanfaluojijiami", + "unicode": "e663", + "unicode_decimal": 58979 + }, + { + "icon_id": "31161861", + "name": "数据", + "font_class": "shuju", + "unicode": "e664", + "unicode_decimal": 58980 + }, + { + "icon_id": "31161862", + "name": "数据集", + "font_class": "shujuji", + "unicode": "e665", + "unicode_decimal": 58981 + }, + { + "icon_id": "31161863", + "name": "算法参数加密", + "font_class": "suanfacanshujiami", + "unicode": "e666", + "unicode_decimal": 58982 + }, + { + "icon_id": "31161864", + "name": "人工智能", + "font_class": "rengongzhineng", + "unicode": "e667", + "unicode_decimal": 58983 + }, + { + "icon_id": "31161865", + "name": "预制密钥加密", + "font_class": "yuzhimiyuejiami", + "unicode": "e668", + "unicode_decimal": 58984 + }, + { + "icon_id": "31161866", + "name": "算法设计", + "font_class": "suanfasheji", + "unicode": "e669", + "unicode_decimal": 58985 + }, + { + "icon_id": "31161867", + "name": "云集算", + "font_class": "yunjisuan", + "unicode": "e66a", + "unicode_decimal": 58986 + } + ] +} diff --git a/src/styles/iconfont/iconfont.svg b/src/styles/iconfont/iconfont.svg new file mode 100644 index 0000000..506c187 --- /dev/null +++ b/src/styles/iconfont/iconfont.svg @@ -0,0 +1,45 @@ + + + + Created by iconfont + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/styles/iconfont/iconfont.ttf b/src/styles/iconfont/iconfont.ttf new file mode 100644 index 0000000..05ff463 Binary files /dev/null and b/src/styles/iconfont/iconfont.ttf differ diff --git a/src/styles/iconfont/iconfont.woff b/src/styles/iconfont/iconfont.woff new file mode 100644 index 0000000..bff40d2 Binary files /dev/null and b/src/styles/iconfont/iconfont.woff differ diff --git a/src/styles/iconfont/iconfont.woff2 b/src/styles/iconfont/iconfont.woff2 new file mode 100644 index 0000000..485b7f2 Binary files /dev/null and b/src/styles/iconfont/iconfont.woff2 differ