首頁 探索 說明
註冊 登入
seimin
/
zuel-itsm-3.0.2
關註 1
讚好 0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

扫一扫

seimin 3 年之前
父節點
207e2b74dc
當前提交
93bc6e33c4
共有 15 個文件被更改，包括 1311 次插入 和 215 次删除
分割檢視 顯示文件統計
  1. 1 0
      index.html
  2. 12 1
      package-lock.json
  3. 2 1
      package.json
  4. 34 0
      src/http/http.js
  5. 36 25
      src/views/Login.vue
  6. 12 0
      src/views/indes.vue
  7. 326 188
      src/views/processing.vue
  8. 539 0
      static/css/fontnew/demo.css
  9. 280 0
      static/css/fontnew/demo_index.html
  10. 31 0
      static/css/fontnew/iconfont.css
  11. 1 0
      static/css/fontnew/iconfont.js
  12. 37 0
      static/css/fontnew/iconfont.json
  13. 二進制
      static/css/fontnew/iconfont.ttf
  14. 二進制
      static/css/fontnew/iconfont.woff
  15. 二進制
      static/css/fontnew/iconfont.woff2

+ 1 - 0
index.html
查看文件 

@@ -3,6 +3,7 @@
3 3 
   <head>
4 4 
     <meta charset="utf-8" />
5 5 
     <link rel="stylesheet" href="./static/css/iconfont.css" />
6 
+    <link rel="stylesheet" href="./static/css/fontnew/iconfont.css" />
6 7 
     <script src="./static/js/JQ-3.3.1.js"></script>
7 8 
     <meta
8 9 
       name="viewport"

+ 12 - 1
package-lock.json
查看文件 

@@ -17,7 +17,8 @@
17 17 
         "vconsole": "^3.9.4",
18 18 
         "vue": "^2.5.2",
19 19 
         "vue-axios": "^2.1.4",
20 
-        "vue-router": "^3.0.1"
20 
+        "vue-router": "^3.0.1",
21 
+        "weixin-jsapi": "^1.1.0"
21 22 
       },
22 23 
       "devDependencies": {
23 24 
         "autoprefixer": "^7.1.2",
 
@@ -14663,6 +14664,11 @@
14663 14664 
         "node": ">=0.8.0"
14664 14665 
       }
14665 14666 
     },
14667 
+    "node_modules/weixin-jsapi": {
14668 
+      "version": "1.1.0",
14669 
+      "resolved": "https://registry.nlark.com/weixin-jsapi/download/weixin-jsapi-1.1.0.tgz",
14670 
+      "integrity": "sha1-UalaIiTFnR2PAv3bxt5S2hazRLM="
14671 
+    },
14666 14672 
     "node_modules/when": {
14667 14673 
       "version": "3.6.4",
14668 14674 
       "resolved": "https://registry.npm.taobao.org/when/download/when-3.6.4.tgz",
 
@@ -27180,6 +27186,11 @@
27180 27186 
       "integrity": "sha1-XS/yKXcAPsaHpLhwc9+7rBRszyk=",
27181 27187 
       "dev": true
27182 27188 
     },
27189 
+    "weixin-jsapi": {
27190 
+      "version": "1.1.0",
27191 
+      "resolved": "https://registry.nlark.com/weixin-jsapi/download/weixin-jsapi-1.1.0.tgz",
27192 
+      "integrity": "sha1-UalaIiTFnR2PAv3bxt5S2hazRLM="
27193 
+    },
27183 27194 
     "when": {
27184 27195 
       "version": "3.6.4",
27185 27196 
       "resolved": "https://registry.npm.taobao.org/when/download/when-3.6.4.tgz",

+ 2 - 1
package.json
查看文件 

@@ -19,7 +19,8 @@
19 19 
     "vconsole": "^3.9.4",
20 20 
     "vue": "^2.5.2",
21 21 
     "vue-axios": "^2.1.4",
22 
-    "vue-router": "^3.0.1"
22 
+    "vue-router": "^3.0.1",
23 
+    "weixin-jsapi": "^1.1.0"
23 24 
   },
24 25 
   "compileDependencies": [
25 26 
     "cube-ui"

+ 34 - 0
src/http/http.js
查看文件 

@@ -0,0 +1,34 @@
1 
+import wx from 'weixin-jsapi'
2 
+// 扫一扫
3 
+export function SM(Vue) {
4 
+  return new Promise((resolve, reject) => {
5 
+    let param = {
6 
+      requestUrl: location.href.split('#')[0]
7 
+    };
8 
+    Vue.$http.post("service/wechat/getJsConfig", param).then(res => {
9 
+      res = res.data;
10 
+      if (res) {
11 
+        wx.config({
12 
+          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
13 
+          appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
14 
+          timestamp: res.timestamp, // 必填，生成签名的时间戳
15 
+          nonceStr: res.nonceStr, // 必填，生成签名的随机串
16 
+          signature: res.signature, // 必填，签名，见附录1
17 
+          jsApiList: res.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
18 
+        });
19 
+        wx.ready(function() {
20 
+          wx.scanQRCode({
21 
+            desc: "scanQRCode desc",
22 
+            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
23 
+            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
24 
+            success: function(res) {
25 
+              // 当needResult 为 1 时，扫码返回的结果
26 
+              let str = res.resultStr.replace(/[\s\/]/g, '') || 'none';
27 
+              resolve(str);
28 
+            }
29 
+          });
30 
+        });
31 
+      }
32 
+    })
33 
+  });
34 
+}

+ 36 - 25
src/views/Login.vue
查看文件 

@@ -36,11 +36,11 @@ export default {
36 36 
       zhanghao: "",
37 37 
       mima: "",
38 38 
       requesterLgoinType: "",
39 
-      isSSo: true // 是否单点登录
39 
+      isSSo: true, // 是否单点登录
40 40 
     };
41 41 
   },
42 42 
   components: {
43 
-    LoadIng
43 
+    LoadIng,
44 44 
   },
45 45 
   methods: {
46 46 
     // 登陆
 
@@ -99,7 +99,7 @@ export default {
99 99 
               .$createDialog({
100 100 
                 type: "alert",
101 101 
                 title: "您的账号被删除，请联系管理员",
102 
-                icon: "cubeic-alert"
102 
+                icon: "cubeic-alert",
103 103 
               })
104 104 
               .show();
105 105 
           } else {
 
@@ -107,7 +107,7 @@ export default {
107 107 
               .$createDialog({
108 108 
                 type: "alert",
109 109 
                 title: res.data.remarks,
110 
-                icon: "cubeic-alert"
110 
+                icon: "cubeic-alert",
111 111 
               })
112 112 
               .show();
113 113 
           }
 
@@ -121,9 +121,9 @@ export default {
121 121 
         .post("service/auth/loginEncrypt", {
122 122 
           // username: "DingDanDan",
123 123 
           username: "admin",
124 
-          password: "20200326"
124 
+          password: "20200326",
125 125 
         })
126 
-        .then(function(res) {
126 
+        .then(function (res) {
127 127 
           that.loading = false;
128 128 
           if (res.data && res.data.state == 200) {
129 129 
             that.getConfig();
 
@@ -140,25 +140,39 @@ export default {
140 140 
         });
141 141 
     },
142 142 
     // 获取版本配置（报修主题：报修人/报修科室）
143 
+    // 获取配置
143 144 
     getConfig() {
144 
-      var that = this;
145 145 
       this.$http
146 146 
         .post("service/sysinfo/data/fetchDataList/systemConfiguration", {
147 147 
           idx: 0,
148 148 
           sum: 1000,
149 
-          systemConfiguration: { keyconfig: "repairMain" }
150 149 
         })
151 
-        .then(function(res) {
152 
-          console.log(res);
150 
+        .then((res) => {
151 
+          let list = res.data.list;
152 
+          let repairMain = list.find((v) => v.keyconfig == "repairMain"); //报修主体
153 
+          let incidentWithConsumable = list.find(
154 
+            (v) => v.keyconfig == "incidentWithConsumable"
155 
+          ); //是否绑定耗材
156 
+          let wxIncidentWithCmdb = list.find(
157 
+            (v) => v.keyconfig == "wxIncidentWithCmdb"
158 
+          ); //是否绑定资产
153 159 
           localStorage.setItem(
154 160 
             "valConfig",
155 
-            JSON.stringify(res.data.list[0].valueconfig)
161 
+            JSON.stringify(repairMain.valueconfig)
162 
+          );
163 
+          localStorage.setItem(
164 
+            "incidentWithConsumable",
165 
+            incidentWithConsumable.valueconfig
166 
+          );
167 
+          localStorage.setItem(
168 
+            "wxIncidentWithCmdb",
169 
+            wxIncidentWithCmdb.valueconfig
156 170 
           );
157 171 
         });
158 172 
     },
159 173 
     // 获取报修人登录方式
160 174 
     getLoginType() {
161 
-      this.$http.post("service/wechat/getLoginType", {}).then(result => {
175 
+      this.$http.post("service/wechat/getLoginType", {}).then((result) => {
162 176 
         if (result.data.status == 200) {
163 177 
           this.requesterLgoinType = result.data.data;
164 178 
           window.localStorage.setItem(
 
@@ -180,17 +194,14 @@ export default {
180 194 
       var ssoStr = "";
181 195 
       var ssoJson;
182 196 
       if (this.isSSo) {
183 
-        ssoStr = location.search
184 
-          .replace("?", "")
185 
-          .split("&")[0]
186 
-          .split("=")[1];
197 
+        ssoStr = location.search.replace("?", "").split("&")[0].split("=")[1];
187 198 
         ssoStr = decode(decodeURIComponent(ssoStr));
188 199 
         ssoJson = JSON.parse(ssoStr);
189 200 
       }
190 201 
       var postData = this.isSSo
191 202 
         ? { username: ssoJson.a, password: ssoJson.u, t: false }
192 203 
         : { username: this.zhanghao, password: this.mima };
193 
-      this.$http.post("service/auth/loginEncrypt", postData).then(res => {
204 
+      this.$http.post("service/auth/loginEncrypt", postData).then((res) => {
194 205 
         that.loading = false;
195 206 
         if (res.data && res.data.state == 200) {
196 207 
           this.getConfig();
 
@@ -207,7 +218,7 @@ export default {
207 218 
               title: "系统错误",
208 219 
               content: "请稍后再试",
209 220 
               icon: "cubeic-wrong",
210 
-              color: "red"
221 
+              color: "red",
211 222 
             })
212 223 
             .show();
213 224 
         }
 
@@ -215,25 +226,25 @@ export default {
215 226 
     },
216 227 
     // 获取查询参数
217 228 
     getQueryString(name) {
218 
-  　　var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
219 
-  　　var r = window.location.search.substr(1).match(reg);
220 
-  　　if (r != null){
229 
+      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
230 
+      var r = window.location.search.substr(1).match(reg);
231 
+      if (r != null) {
221 232 
         return unescape(r[2]);
222 233 
       }
223 234 
       return null;
224 235 
     },
225 236 
   },
226 237 
   created() {
227 
-    if(location.search.length > 0){
228 
-      this.isSSo = Boolean(this.getQueryString('t'));
229 
-    }else{
238 
+    if (location.search.length > 0) {
239 
+      this.isSSo = Boolean(this.getQueryString("t"));
240 
+    } else {
230 241 
       this.isSSo = false;
231 242 
     }
232 243 
     if (this.isSSo) {
233 244 
       this.zlogin();
234 245 
     }
235 246 
     this.getLoginType();
236 
-  }
247 
+  },
237 248 
 };
238 249 
 </script>
239 250

+ 12 - 0
src/views/indes.vue
查看文件 

@@ -18,6 +18,10 @@
18 18 
         <i class="iconfont icon-fuwuzhinan"></i>
19 19 
         <span>公告公示</span>
20 20 
       </router-link>
21 
+      <a @click.prevent="scan()" v-if="incidentWithConsumable == 1">
22 
+        <i class="dash dash-saoyisao"></i>
23 
+        <span>扫一扫</span>
24 
+      </a>
21 25 
       <!-- <div @click="toKnowList()">
22 26 
         <i class="iconfont icon-message"></i>
23 27 
         <span>常见问题</span>
 
@@ -213,10 +217,13 @@
213 217 
 </template>
214 218 
 <script>
215 219 
 import { formatDate } from "./../components/js/date.js";
220 
+import { SM } from "./../http/http";
216 221 
 export default {
217 222 
   data() {
218 223 
     return {
219 224 
       loginUser: JSON.parse(localStorage.getItem("loginUser")),
225 
+      incidentWithConsumable: localStorage.getItem("incidentWithConsumable"),//是否绑定耗材
226 
+      wxIncidentWithCmdb: localStorage.getItem("wxIncidentWithCmdb"),//是否绑定资产
220 227 
       noticeData: "", //公告列表
221 228 
       dataList: "", //最新报修
222 229 
       state: "", //流程状态
 
@@ -238,6 +245,11 @@ export default {
238 245 
     };
239 246 
   },
240 247 
   methods: {
248 
+    scan(){
249 
+      SM(this).then((ress1) => {
250 
+        alert(ress1);
251 
+      })
252 
+    },
241 253 
     // 获取公告列表数据
242 254 
     getNoticData() {
243 255 
       console.log(this.valConfig);

File diff suppressed because it is too large
+ 326 - 188
src/views/processing.vue


+ 539 - 0
static/css/fontnew/demo.css
查看文件 

@@ -0,0 +1,539 @@
1 
+/* Logo 字体 */
2 
+@font-face {
3 
+  font-family: "iconfont logo";
4 
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
5 
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
6 
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
7 
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
8 
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
9 
+}
10 
+
11 
+.logo {
12 
+  font-family: "iconfont logo";
13 
+  font-size: 160px;
14 
+  font-style: normal;
15 
+  -webkit-font-smoothing: antialiased;
16 
+  -moz-osx-font-smoothing: grayscale;
17 
+}
18 
+
19 
+/* tabs */
20 
+.nav-tabs {
21 
+  position: relative;
22 
+}
23 
+
24 
+.nav-tabs .nav-more {
25 
+  position: absolute;
26 
+  right: 0;
27 
+  bottom: 0;
28 
+  height: 42px;
29 
+  line-height: 42px;
30 
+  color: #666;
31 
+}
32 
+
33 
+#tabs {
34 
+  border-bottom: 1px solid #eee;
35 
+}
36 
+
37 
+#tabs li {
38 
+  cursor: pointer;
39 
+  width: 100px;
40 
+  height: 40px;
41 
+  line-height: 40px;
42 
+  text-align: center;
43 
+  font-size: 16px;
44 
+  border-bottom: 2px solid transparent;
45 
+  position: relative;
46 
+  z-index: 1;
47 
+  margin-bottom: -1px;
48 
+  color: #666;
49 
+}
50 
+
51 
+
52 
+#tabs .active {
53 
+  border-bottom-color: #f00;
54 
+  color: #222;
55 
+}
56 
+
57 
+.tab-container .content {
58 
+  display: none;
59 
+}
60 
+
61 
+/* 页面布局 */
62 
+.main {
63 
+  padding: 30px 100px;
64 
+  width: 960px;
65 
+  margin: 0 auto;
66 
+}
67 
+
68 
+.main .logo {
69 
+  color: #333;
70 
+  text-align: left;
71 
+  margin-bottom: 30px;
72 
+  line-height: 1;
73 
+  height: 110px;
74 
+  margin-top: -50px;
75 
+  overflow: hidden;
76 
+  *zoom: 1;
77 
+}
78 
+
79 
+.main .logo a {
80 
+  font-size: 160px;
81 
+  color: #333;
82 
+}
83 
+
84 
+.helps {
85 
+  margin-top: 40px;
86 
+}
87 
+
88 
+.helps pre {
89 
+  padding: 20px;
90 
+  margin: 10px 0;
91 
+  border: solid 1px #e7e1cd;
92 
+  background-color: #fffdef;
93 
+  overflow: auto;
94 
+}
95 
+
96 
+.icon_lists {
97 
+  width: 100% !important;
98 
+  overflow: hidden;
99 
+  *zoom: 1;
100 
+}
101 
+
102 
+.icon_lists li {
103 
+  width: 100px;
104 
+  margin-bottom: 10px;
105 
+  margin-right: 20px;
106 
+  text-align: center;
107 
+  list-style: none !important;
108 
+  cursor: default;
109 
+}
110 
+
111 
+.icon_lists li .code-name {
112 
+  line-height: 1.2;
113 
+}
114 
+
115 
+.icon_lists .icon {
116 
+  display: block;
117 
+  height: 100px;
118 
+  line-height: 100px;
119 
+  font-size: 42px;
120 
+  margin: 10px auto;
121 
+  color: #333;
122 
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
123 
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
124 
+  transition: font-size 0.25s linear, width 0.25s linear;
125 
+}
126 
+
127 
+.icon_lists .icon:hover {
128 
+  font-size: 100px;
129 
+}
130 
+
131 
+.icon_lists .svg-icon {
132 
+  /* 通过设置 font-size 来改变图标大小 */
133 
+  width: 1em;
134 
+  /* 图标和文字相邻时，垂直对齐 */
135 
+  vertical-align: -0.15em;
136 
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
137 
+  fill: currentColor;
138 
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
139 
+      normalize.css 中也包含这行 */
140 
+  overflow: hidden;
141 
+}
142 
+
143 
+.icon_lists li .name,
144 
+.icon_lists li .code-name {
145 
+  color: #666;
146 
+}
147 
+
148 
+/* markdown 样式 */
149 
+.markdown {
150 
+  color: #666;
151 
+  font-size: 14px;
152 
+  line-height: 1.8;
153 
+}
154 
+
155 
+.highlight {
156 
+  line-height: 1.5;
157 
+}
158 
+
159 
+.markdown img {
160 
+  vertical-align: middle;
161 
+  max-width: 100%;
162 
+}
163 
+
164 
+.markdown h1 {
165 
+  color: #404040;
166 
+  font-weight: 500;
167 
+  line-height: 40px;
168 
+  margin-bottom: 24px;
169 
+}
170 
+
171 
+.markdown h2,
172 
+.markdown h3,
173 
+.markdown h4,
174 
+.markdown h5,
175 
+.markdown h6 {
176 
+  color: #404040;
177 
+  margin: 1.6em 0 0.6em 0;
178 
+  font-weight: 500;
179 
+  clear: both;
180 
+}
181 
+
182 
+.markdown h1 {
183 
+  font-size: 28px;
184 
+}
185 
+
186 
+.markdown h2 {
187 
+  font-size: 22px;
188 
+}
189 
+
190 
+.markdown h3 {
191 
+  font-size: 16px;
192 
+}
193 
+
194 
+.markdown h4 {
195 
+  font-size: 14px;
196 
+}
197 
+
198 
+.markdown h5 {
199 
+  font-size: 12px;
200 
+}
201 
+
202 
+.markdown h6 {
203 
+  font-size: 12px;
204 
+}
205 
+
206 
+.markdown hr {
207 
+  height: 1px;
208 
+  border: 0;
209 
+  background: #e9e9e9;
210 
+  margin: 16px 0;
211 
+  clear: both;
212 
+}
213 
+
214 
+.markdown p {
215 
+  margin: 1em 0;
216 
+}
217 
+
218 
+.markdown>p,
219 
+.markdown>blockquote,
220 
+.markdown>.highlight,
221 
+.markdown>ol,
222 
+.markdown>ul {
223 
+  width: 80%;
224 
+}
225 
+
226 
+.markdown ul>li {
227 
+  list-style: circle;
228 
+}
229 
+
230 
+.markdown>ul li,
231 
+.markdown blockquote ul>li {
232 
+  margin-left: 20px;
233 
+  padding-left: 4px;
234 
+}
235 
+
236 
+.markdown>ul li p,
237 
+.markdown>ol li p {
238 
+  margin: 0.6em 0;
239 
+}
240 
+
241 
+.markdown ol>li {
242 
+  list-style: decimal;
243 
+}
244 
+
245 
+.markdown>ol li,
246 
+.markdown blockquote ol>li {
247 
+  margin-left: 20px;
248 
+  padding-left: 4px;
249 
+}
250 
+
251 
+.markdown code {
252 
+  margin: 0 3px;
253 
+  padding: 0 5px;
254 
+  background: #eee;
255 
+  border-radius: 3px;
256 
+}
257 
+
258 
+.markdown strong,
259 
+.markdown b {
260 
+  font-weight: 600;
261 
+}
262 
+
263 
+.markdown>table {
264 
+  border-collapse: collapse;
265 
+  border-spacing: 0px;
266 
+  empty-cells: show;
267 
+  border: 1px solid #e9e9e9;
268 
+  width: 95%;
269 
+  margin-bottom: 24px;
270 
+}
271 
+
272 
+.markdown>table th {
273 
+  white-space: nowrap;
274 
+  color: #333;
275 
+  font-weight: 600;
276 
+}
277 
+
278 
+.markdown>table th,
279 
+.markdown>table td {
280 
+  border: 1px solid #e9e9e9;
281 
+  padding: 8px 16px;
282 
+  text-align: left;
283 
+}
284 
+
285 
+.markdown>table th {
286 
+  background: #F7F7F7;
287 
+}
288 
+
289 
+.markdown blockquote {
290 
+  font-size: 90%;
291 
+  color: #999;
292 
+  border-left: 4px solid #e9e9e9;
293 
+  padding-left: 0.8em;
294 
+  margin: 1em 0;
295 
+}
296 
+
297 
+.markdown blockquote p {
298 
+  margin: 0;
299 
+}
300 
+
301 
+.markdown .anchor {
302 
+  opacity: 0;
303 
+  transition: opacity 0.3s ease;
304 
+  margin-left: 8px;
305 
+}
306 
+
307 
+.markdown .waiting {
308 
+  color: #ccc;
309 
+}
310 
+
311 
+.markdown h1:hover .anchor,
312 
+.markdown h2:hover .anchor,
313 
+.markdown h3:hover .anchor,
314 
+.markdown h4:hover .anchor,
315 
+.markdown h5:hover .anchor,
316 
+.markdown h6:hover .anchor {
317 
+  opacity: 1;
318 
+  display: inline-block;
319 
+}
320 
+
321 
+.markdown>br,
322 
+.markdown>p>br {
323 
+  clear: both;
324 
+}
325 
+
326 
+
327 
+.hljs {
328 
+  display: block;
329 
+  background: white;
330 
+  padding: 0.5em;
331 
+  color: #333333;
332 
+  overflow-x: auto;
333 
+}
334 
+
335 
+.hljs-comment,
336 
+.hljs-meta {
337 
+  color: #969896;
338 
+}
339 
+
340 
+.hljs-string,
341 
+.hljs-variable,
342 
+.hljs-template-variable,
343 
+.hljs-strong,
344 
+.hljs-emphasis,
345 
+.hljs-quote {
346 
+  color: #df5000;
347 
+}
348 
+
349 
+.hljs-keyword,
350 
+.hljs-selector-tag,
351 
+.hljs-type {
352 
+  color: #a71d5d;
353 
+}
354 
+
355 
+.hljs-literal,
356 
+.hljs-symbol,
357 
+.hljs-bullet,
358 
+.hljs-attribute {
359 
+  color: #0086b3;
360 
+}
361 
+
362 
+.hljs-section,
363 
+.hljs-name {
364 
+  color: #63a35c;
365 
+}
366 
+
367 
+.hljs-tag {
368 
+  color: #333333;
369 
+}
370 
+
371 
+.hljs-title,
372 
+.hljs-attr,
373 
+.hljs-selector-id,
374 
+.hljs-selector-class,
375 
+.hljs-selector-attr,
376 
+.hljs-selector-pseudo {
377 
+  color: #795da3;
378 
+}
379 
+
380 
+.hljs-addition {
381 
+  color: #55a532;
382 
+  background-color: #eaffea;
383 
+}
384 
+
385 
+.hljs-deletion {
386 
+  color: #bd2c00;
387 
+  background-color: #ffecec;
388 
+}
389 
+
390 
+.hljs-link {
391 
+  text-decoration: underline;
392 
+}
393 
+
394 
+/* 代码高亮 */
395 
+/* PrismJS 1.15.0
396 
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
397 
+/**
398 
+ * prism.js default theme for JavaScript, CSS and HTML
399 
+ * Based on dabblet (http://dabblet.com)
400 
+ * @author Lea Verou
401 
+ */
402 
+code[class*="language-"],
403 
+pre[class*="language-"] {
404 
+  color: black;
405 
+  background: none;
406 
+  text-shadow: 0 1px white;
407 
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
408 
+  text-align: left;
409 
+  white-space: pre;
410 
+  word-spacing: normal;
411 
+  word-break: normal;
412 
+  word-wrap: normal;
413 
+  line-height: 1.5;
414 
+
415 
+  -moz-tab-size: 4;
416 
+  -o-tab-size: 4;
417 
+  tab-size: 4;
418 
+
419 
+  -webkit-hyphens: none;
420 
+  -moz-hyphens: none;
421 
+  -ms-hyphens: none;
422 
+  hyphens: none;
423 
+}
424 
+
425 
+pre[class*="language-"]::-moz-selection,
426 
+pre[class*="language-"] ::-moz-selection,
427 
+code[class*="language-"]::-moz-selection,
428 
+code[class*="language-"] ::-moz-selection {
429 
+  text-shadow: none;
430 
+  background: #b3d4fc;
431 
+}
432 
+
433 
+pre[class*="language-"]::selection,
434 
+pre[class*="language-"] ::selection,
435 
+code[class*="language-"]::selection,
436 
+code[class*="language-"] ::selection {
437 
+  text-shadow: none;
438 
+  background: #b3d4fc;
439 
+}
440 
+
441 
+@media print {
442 
+
443 
+  code[class*="language-"],
444 
+  pre[class*="language-"] {
445 
+    text-shadow: none;
446 
+  }
447 
+}
448 
+
449 
+/* Code blocks */
450 
+pre[class*="language-"] {
451 
+  padding: 1em;
452 
+  margin: .5em 0;
453 
+  overflow: auto;
454 
+}
455 
+
456 
+:not(pre)>code[class*="language-"],
457 
+pre[class*="language-"] {
458 
+  background: #f5f2f0;
459 
+}
460 
+
461 
+/* Inline code */
462 
+:not(pre)>code[class*="language-"] {
463 
+  padding: .1em;
464 
+  border-radius: .3em;
465 
+  white-space: normal;
466 
+}
467 
+
468 
+.token.comment,
469 
+.token.prolog,
470 
+.token.doctype,
471 
+.token.cdata {
472 
+  color: slategray;
473 
+}
474 
+
475 
+.token.punctuation {
476 
+  color: #999;
477 
+}
478 
+
479 
+.namespace {
480 
+  opacity: .7;
481 
+}
482 
+
483 
+.token.property,
484 
+.token.tag,
485 
+.token.boolean,
486 
+.token.number,
487 
+.token.constant,
488 
+.token.symbol,
489 
+.token.deleted {
490 
+  color: #905;
491 
+}
492 
+
493 
+.token.selector,
494 
+.token.attr-name,
495 
+.token.string,
496 
+.token.char,
497 
+.token.builtin,
498 
+.token.inserted {
499 
+  color: #690;
500 
+}
501 
+
502 
+.token.operator,
503 
+.token.entity,
504 
+.token.url,
505 
+.language-css .token.string,
506 
+.style .token.string {
507 
+  color: #9a6e3a;
508 
+  background: hsla(0, 0%, 100%, .5);
509 
+}
510 
+
511 
+.token.atrule,
512 
+.token.attr-value,
513 
+.token.keyword {
514 
+  color: #07a;
515 
+}
516 
+
517 
+.token.function,
518 
+.token.class-name {
519 
+  color: #DD4A68;
520 
+}
521 
+
522 
+.token.regex,
523 
+.token.important,
524 
+.token.variable {
525 
+  color: #e90;
526 
+}
527 
+
528 
+.token.important,
529 
+.token.bold {
530 
+  font-weight: bold;
531 
+}
532 
+
533 
+.token.italic {
534 
+  font-style: italic;
535 
+}
536 
+
537 
+.token.entity {
538 
+  cursor: help;
539 
+}

+ 280 - 0
static/css/fontnew/demo_index.html
查看文件 

@@ -0,0 +1,280 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+<head>
4 
+  <meta charset="utf-8"/>
5 
+  <title>iconfont Demo</title>
6 
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
7 
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
8 
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
9 
+  <link rel="stylesheet" href="demo.css">
10 
+  <link rel="stylesheet" href="iconfont.css">
11 
+  <script src="iconfont.js"></script>
12 
+  <!-- jQuery -->
13 
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
14 
+  <!-- 代码高亮 -->
15 
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
16 
+  <style>
17 
+    .main .logo {
18 
+      margin-top: 0;
19 
+      height: auto;
20 
+    }
21 
+
22 
+    .main .logo a {
23 
+      display: flex;
24 
+      align-items: center;
25 
+    }
26 
+
27 
+    .main .logo .sub-title {
28 
+      margin-left: 0.5em;
29 
+      font-size: 22px;
30 
+      color: #fff;
31 
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
32 
+      -webkit-background-clip: text;
33 
+      -webkit-text-fill-color: transparent;
34 
+    }
35 
+  </style>
36 
+</head>
37 
+<body>
38 
+  <div class="main">
39 
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
40 
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
41 
+
42 
+    </a></h1>
43 
+    <div class="nav-tabs">
44 
+      <ul id="tabs" class="dib-box">
45 
+        <li class="dib active"><span>Unicode</span></li>
46 
+        <li class="dib"><span>Font class</span></li>
47 
+        <li class="dib"><span>Symbol</span></li>
48 
+      </ul>
49 
+
50 
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2879659" target="_blank" class="nav-more">查看项目</a>
51 
+
52 
+    </div>
53 
+    <div class="tab-container">
54 
+      <div class="content unicode" style="display: block;">
55 
+          <ul class="icon_lists dib-box">
56 
+
57 
+            <li class="dib">
58 
+              <span class="icon dash">&#xe8b5;</span>
59 
+                <div class="name">扫一扫</div>
60 
+                <div class="code-name">&amp;#xe8b5;</div>
61 
+              </li>
62 
+
63 
+            <li class="dib">
64 
+              <span class="icon dash">&#xe609;</span>
65 
+                <div class="name">fangdajing</div>
66 
+                <div class="code-name">&amp;#xe609;</div>
67 
+              </li>
68 
+
69 
+            <li class="dib">
70 
+              <span class="icon dash">&#xe7b7;</span>
71 
+                <div class="name">查号</div>
72 
+                <div class="code-name">&amp;#xe7b7;</div>
73 
+              </li>
74 
+
75 
+            <li class="dib">
76 
+              <span class="icon dash">&#xe6bf;</span>
77 
+                <div class="name">修改密码</div>
78 
+                <div class="code-name">&amp;#xe6bf;</div>
79 
+              </li>
80 
+
81 
+          </ul>
82 
+          <div class="article markdown">
83 
+          <h2 id="unicode-">Unicode 引用</h2>
84 
+          <hr>
85 
+
86 
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
87 
+          <ul>
88 
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
89 
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
90 
+          </ul>
91 
+          <blockquote>
92 
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
93 
+          </blockquote>
94 
+          <p>Unicode 使用步骤如下：</p>
95 
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
96 
+<pre><code class="language-css"
97 
+>@font-face {
98 
+  font-family: 'dash';
99 
+  src: url('iconfont.woff2?t=1641526164246') format('woff2'),
100 
+       url('iconfont.woff?t=1641526164246') format('woff'),
101 
+       url('iconfont.ttf?t=1641526164246') format('truetype');
102 
+}
103 
+</code></pre>
104 
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
105 
+<pre><code class="language-css"
106 
+>.dash {
107 
+  font-family: "dash" !important;
108 
+  font-size: 16px;
109 
+  font-style: normal;
110 
+  -webkit-font-smoothing: antialiased;
111 
+  -moz-osx-font-smoothing: grayscale;
112 
+}
113 
+</code></pre>
114 
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
115 
+<pre>
116 
+<code class="language-html"
117 
+>&lt;span class="dash"&gt;&amp;#x33;&lt;/span&gt;
118 
+</code></pre>
119 
+          <blockquote>
120 
+            <p>"dash" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
121 
+          </blockquote>
122 
+          </div>
123 
+      </div>
124 
+      <div class="content font-class">
125 
+        <ul class="icon_lists dib-box">
126 
+
127 
+          <li class="dib">
128 
+            <span class="icon dash dash-saoyisao"></span>
129 
+            <div class="name">
130 
+              扫一扫
131 
+            </div>
132 
+            <div class="code-name">.dash-saoyisao
133 
+            </div>
134 
+          </li>
135 
+
136 
+          <li class="dib">
137 
+            <span class="icon dash dash-fangdajing"></span>
138 
+            <div class="name">
139 
+              fangdajing
140 
+            </div>
141 
+            <div class="code-name">.dash-fangdajing
142 
+            </div>
143 
+          </li>
144 
+
145 
+          <li class="dib">
146 
+            <span class="icon dash dash-chahao"></span>
147 
+            <div class="name">
148 
+              查号
149 
+            </div>
150 
+            <div class="code-name">.dash-chahao
151 
+            </div>
152 
+          </li>
153 
+
154 
+          <li class="dib">
155 
+            <span class="icon dash dash-xiugaimima"></span>
156 
+            <div class="name">
157 
+              修改密码
158 
+            </div>
159 
+            <div class="code-name">.dash-xiugaimima
160 
+            </div>
161 
+          </li>
162 
+
163 
+        </ul>
164 
+        <div class="article markdown">
165 
+        <h2 id="font-class-">font-class 引用</h2>
166 
+        <hr>
167 
+
168 
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
169 
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
170 
+        <ul>
171 
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
172 
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
173 
+        </ul>
174 
+        <p>使用步骤如下：</p>
175 
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
176 
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
177 
+</code></pre>
178 
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
179 
+<pre><code class="language-html">&lt;span class="dash dash-xxx"&gt;&lt;/span&gt;
180 
+</code></pre>
181 
+        <blockquote>
182 
+          <p>"
183 
+            dash" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
184 
+        </blockquote>
185 
+      </div>
186 
+      </div>
187 
+      <div class="content symbol">
188 
+          <ul class="icon_lists dib-box">
189 
+
190 
+            <li class="dib">
191 
+                <svg class="icon svg-icon" aria-hidden="true">
192 
+                  <use xlink:href="#dash-saoyisao"></use>
193 
+                </svg>
194 
+                <div class="name">扫一扫</div>
195 
+                <div class="code-name">#dash-saoyisao</div>
196 
+            </li>
197 
+
198 
+            <li class="dib">
199 
+                <svg class="icon svg-icon" aria-hidden="true">
200 
+                  <use xlink:href="#dash-fangdajing"></use>
201 
+                </svg>
202 
+                <div class="name">fangdajing</div>
203 
+                <div class="code-name">#dash-fangdajing</div>
204 
+            </li>
205 
+
206 
+            <li class="dib">
207 
+                <svg class="icon svg-icon" aria-hidden="true">
208 
+                  <use xlink:href="#dash-chahao"></use>
209 
+                </svg>
210 
+                <div class="name">查号</div>
211 
+                <div class="code-name">#dash-chahao</div>
212 
+            </li>
213 
+
214 
+            <li class="dib">
215 
+                <svg class="icon svg-icon" aria-hidden="true">
216 
+                  <use xlink:href="#dash-xiugaimima"></use>
217 
+                </svg>
218 
+                <div class="name">修改密码</div>
219 
+                <div class="code-name">#dash-xiugaimima</div>
220 
+            </li>
221 
+
222 
+          </ul>
223 
+          <div class="article markdown">
224 
+          <h2 id="symbol-">Symbol 引用</h2>
225 
+          <hr>
226 
+
227 
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
228 
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
229 
+          <ul>
230 
+            <li>支持多色图标了，不再受单色限制。</li>
231 
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
232 
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
233 
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
234 
+          </ul>
235 
+          <p>使用步骤如下：</p>
236 
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
237 
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
238 
+</code></pre>
239 
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
240 
+<pre><code class="language-html">&lt;style&gt;
241 
+.icon {
242 
+  width: 1em;
243 
+  height: 1em;
244 
+  vertical-align: -0.15em;
245 
+  fill: currentColor;
246 
+  overflow: hidden;
247 
+}
248 
+&lt;/style&gt;
249 
+</code></pre>
250 
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
251 
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
252 
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
253 
+&lt;/svg&gt;
254 
+</code></pre>
255 
+          </div>
256 
+      </div>
257 
+
258 
+    </div>
259 
+  </div>
260 
+  <script>
261 
+  $(document).ready(function () {
262 
+      $('.tab-container .content:first').show()
263 
+
264 
+      $('#tabs li').click(function (e) {
265 
+        var tabContent = $('.tab-container .content')
266 
+        var index = $(this).index()
267 
+
268 
+        if ($(this).hasClass('active')) {
269 
+          return
270 
+        } else {
271 
+          $('#tabs li').removeClass('active')
272 
+          $(this).addClass('active')
273 
+
274 
+          tabContent.hide().eq(index).fadeIn()
275 
+        }
276 
+      })
277 
+    })
278 
+  </script>
279 
+</body>
280 
+</html>

+ 31 - 0
static/css/fontnew/iconfont.css
查看文件 

@@ -0,0 +1,31 @@
1 
+@font-face {
2 
+  font-family: "dash"; /* Project id 2879659 */
3 
+  src: url('iconfont.woff2?t=1641526164246') format('woff2'),
4 
+       url('iconfont.woff?t=1641526164246') format('woff'),
5 
+       url('iconfont.ttf?t=1641526164246') format('truetype');
6 
+}
7 
+
8 
+.dash {
9 
+  font-family: "dash" !important;
10 
+  font-size: 16px;
11 
+  font-style: normal;
12 
+  -webkit-font-smoothing: antialiased;
13 
+  -moz-osx-font-smoothing: grayscale;
14 
+}
15 
+
16 
+.dash-saoyisao:before {
17 
+  content: "\e8b5";
18 
+}
19 
+
20 
+.dash-fangdajing:before {
21 
+  content: "\e609";
22 
+}
23 
+
24 
+.dash-chahao:before {
25 
+  content: "\e7b7";
26 
+}
27 
+
28 
+.dash-xiugaimima:before {
29 
+  content: "\e6bf";
30 
+}
31 
+

File diff suppressed because it is too large
+ 1 - 0
static/css/fontnew/iconfont.js


+ 37 - 0
static/css/fontnew/iconfont.json
查看文件 

@@ -0,0 +1,37 @@
1 
+{
2 
+  "id": "2879659",
3 
+  "name": "ITSM（微信新）",
4 
+  "font_family": "dash",
5 
+  "css_prefix_text": "dash-",
6 
+  "description": "引入一个新的字体图标",
7 
+  "glyphs": [
8 
+    {
9 
+      "icon_id": "11372685",
10 
+      "name": "扫一扫",
11 
+      "font_class": "saoyisao",
12 
+      "unicode": "e8b5",
13 
+      "unicode_decimal": 59573
14 
+    },
15 
+    {
16 
+      "icon_id": "463375",
17 
+      "name": "fangdajing",
18 
+      "font_class": "fangdajing",
19 
+      "unicode": "e609",
20 
+      "unicode_decimal": 58889
21 
+    },
22 
+    {
23 
+      "icon_id": "1788495",
24 
+      "name": "查号",
25 
+      "font_class": "chahao",
26 
+      "unicode": "e7b7",
27 
+      "unicode_decimal": 59319
28 
+    },
29 
+    {
30 
+      "icon_id": "6282784",
31 
+      "name": "修改密码",
32 
+      "font_class": "xiugaimima",
33 
+      "unicode": "e6bf",
34 
+      "unicode_decimal": 59071
35 
+    }
36 
+  ]
37 
+}

二進制
static/css/fontnew/iconfont.ttf
查看文件


二進制
static/css/fontnew/iconfont.woff
查看文件


二進制
static/css/fontnew/iconfont.woff2
查看文件