浏览代码

微信登录

seimin 11 月之前
父节点
当前提交
22d23455b8

+ 2 - 0
.gitignore

@@ -0,0 +1,2 @@
1
+unpackage/
2
+node_modules/

+ 4 - 10
App.vue

@@ -18,15 +18,9 @@
18 18
 	@import '@/uni_modules/uni-scss/index.scss';
19 19
 	/* #ifndef APP-NVUE */
20 20
 	@import '@/static/customicons.css';
21
-	// 设置整个项目的背景色
22
-	page {
23
-		background-color: #f5f5f5;
24
-	}
25
-
26 21
 	/* #endif */
27
-	.example-info {
28
-		font-size: 14px;
29
-		color: #333;
30
-		padding: 10px;
31
-	}
22
+  // 自定义公共样式
23
+  @import '@/static/scss/common.scss';
24
+  // 字体图标
25
+  @import '@/static/font/iconfont.css';
32 26
 </style>

+ 20 - 3
http/http.js

@@ -13,9 +13,18 @@ export function get(url, data = {}) {
13 13
         'Cache-Control': 'no-cache'
14 14
       },
15 15
       success(res) {
16
-        resolve(res.data);
16
+        if(res.statusCode === 200){
17
+          resolve(res.data);
18
+        }else{
19
+          reject();
20
+          uni.showToast({
21
+            icon: 'none',
22
+            title: '请求数据失败!'
23
+          });
24
+        }
17 25
       },
18 26
       fail(err) {
27
+        reject();
19 28
         uni.showToast({
20 29
           icon: 'none',
21 30
           title: '请求数据失败!'
@@ -36,10 +45,18 @@ export function post(url, data = {}) {
36 45
         'Cache-Control': 'no-cache'
37 46
       },
38 47
       success(res) {
39
-        resolve(res.data);
48
+        if(res.statusCode === 200){
49
+          resolve(res.data);
50
+        }else{
51
+          reject();
52
+          uni.showToast({
53
+            icon: 'none',
54
+            title: '请求数据失败!'
55
+          });
56
+        }
40 57
       },
41 58
       fail(err) {
42
-        reject(err);
59
+        reject();
43 60
         uni.showToast({
44 61
           icon: 'none',
45 62
           title: '请求数据失败!'

+ 29 - 0
interceptor/routeInterceptor.js

@@ -0,0 +1,29 @@
1
+import { useLoginUserStore } from '@/stores/loginUser'
2
+const loginUserStore = useLoginUserStore()
3
+
4
+let repaireRouterList = [
5
+    "/pages/homePage/homePage", //登录页
6
+    "/pages/repairEntrance/repairEntrance", //绑定工号
7
+  ]
8
+  let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"];
9
+  //用遍历的方式分别为uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器
10
+  list.forEach(item => {
11
+    uni.addInterceptor(item, {
12
+      invoke(e) {
13
+        // 调用前拦截
14
+        const url = e.url.split('?')[0];
15
+        // 报修人不可以访问除了登录页,绑定工号页的其他页面
16
+        if (!repaireRouterList.includes(url) && loginUserStore.loginUser.user && loginUserStore.loginUser.user
17
+          .engineer !== 1) {
18
+          uni.reLaunch({
19
+            url: "/pages/repairEntrance/repairEntrance"
20
+          })
21
+          return false
22
+        }
23
+        return true
24
+      },
25
+      fail(err) { // 失败回调拦截
26
+        console.log(err);
27
+      },
28
+    })
29
+  })

+ 3 - 19
main.js

@@ -1,26 +1,11 @@
1
-// #ifndef VUE3
2
-import Vue from 'vue'
3
-import App from './App'
4
-
5
-Vue.config.productionTip = false
6
-
7
-App.mpType = 'app'
8
-
9
-const app = new Vue({
10
-  ...App
11
-})
12
-app.$mount()
13
-// #endif
14
-
15
-// #ifdef VUE3
16 1
 import {
17 2
   createSSRApp
18 3
 } from 'vue'
19 4
 import App from './App.vue'
20
-import * as Pinia from "pinia";
5
+import * as Pinia from "pinia"
21 6
 import {
22 7
   createUnistorage
23
-} from "./uni_modules/pinia-plugin-unistorage";
8
+} from "./uni_modules/pinia-plugin-unistorage"
24 9
 console.info('v3.5.0');
25 10
 
26 11
 export function createApp() {
@@ -28,10 +13,9 @@ export function createApp() {
28 13
   const store = Pinia.createPinia();
29 14
   store.use(createUnistorage());
30 15
   app.use(store);
31
-
16
+  
32 17
   return {
33 18
     app,
34 19
     Pinia,
35 20
   }
36 21
 }
37
-// #endif

+ 22 - 14
manifest.json

@@ -1,8 +1,8 @@
1 1
 {
2
-    "name" : "itsm-wx-handle",
3
-    "appid" : "",
2
+    "name" : "",
3
+    "appid" : "__UNI__EB71401",
4 4
     "description" : "",
5
-    "versionName" : "1.0.0",
5
+    "versionName" : "3.5.0",
6 6
     "versionCode" : "100",
7 7
     "transformPx" : false,
8 8
     "app-plus" : {
@@ -58,16 +58,24 @@
58 58
     },
59 59
     "vueVersion" : "3",
60 60
     // h5特有相关
61
-    "h5":{
62
-    	"devServer": {
63
-    		"proxy":{
64
-    			"/service":{ 
65
-    				"target" : "http://192.168.4.105", //请求的目标域名
66
-    				"changeOrigin" : true, //是否跨域
67
-    				"secure" : false
68
-    			}
69
-    		},
70
-    		"port" : 8080 //当前项目的端口号
71
-    	}
61
+    "h5" : {
62
+        "devServer" : {
63
+            "proxy" : {
64
+                "/service" : {
65
+                    "target" : "http://192.168.4.105", //请求的目标域名
66
+                    "changeOrigin" : true, //是否跨域
67
+                    "secure" : false
68
+                }
69
+            },
70
+            "port" : 8080 //当前项目的端口号
71
+        },
72
+        "router" : {
73
+            "base" : "/user/"
74
+        },
75
+        "optimization" : {
76
+            "treeShaking" : {
77
+                "enable" : true
78
+            }
79
+        }
72 80
     }
73 81
 }

+ 0 - 3
node_modules/.vite/deps_temp_155cf1a7/package.json

@@ -1,3 +0,0 @@
1
-{
2
-  "type": "module"
3
-}

+ 0 - 3
node_modules/.vite/deps_temp_b41cdf10/package.json

@@ -1,3 +0,0 @@
1
-{
2
-  "type": "module"
3
-}

+ 30 - 5
pages.json

@@ -1,12 +1,37 @@
1 1
 {
2 2
   "pages": [{
3
-    "path": "pages/homePage/homePage",
4
-    "style": {
5
-      "h5": {
6
-        "titleNView": false
3
+      "path": "pages/homePage/homePage",
4
+      "style": {
5
+        "h5": {
6
+          "titleNView": false
7
+        }
8
+      }
9
+    },
10
+    {
11
+      "path": "pages/initBind/initBind",
12
+      "style": {
13
+        "h5": {
14
+          "titleNView": false
15
+        }
16
+      }
17
+    },
18
+    {
19
+      "path": "pages/repairEntrance/repairEntrance",
20
+      "style": {
21
+        "h5": {
22
+          "titleNView": false
23
+        }
24
+      }
25
+    },
26
+    {
27
+      "path": "pages/incidentList/incidentList",
28
+      "style": {
29
+        "h5": {
30
+          "titleNView": false
31
+        }
7 32
       }
8 33
     }
9
-  }],
34
+  ],
10 35
   "globalStyle": {
11 36
     "navigationBarTextStyle": "black",
12 37
     "navigationBarBackgroundColor": "#F8F8F8",

+ 23 - 85
pages/homePage/homePage.vue

@@ -5,17 +5,18 @@
5 5
 </template>
6 6
 
7 7
 <script setup>
8
-  import {
9
-    onLoad
10
-  } from '@dcloudio/uni-app'
11
-  import {
12
-    get,
13
-    post,
14
-  } from "@/http/http.js";
15
-  import {
16
-    useLoginUserStore
17
-  } from '@/stores/loginUser'
18
-  const loginUserStore = useLoginUserStore()
8
+  // 添加路由拦截
9
+  import '@/interceptor/routeInterceptor.js'
10
+  import { onLoad } from '@dcloudio/uni-app'
11
+  import { defaultColor } from '@/static/js/theme.js'
12
+  import { post } from "@/http/http.js"
13
+  import { useWechatAuth } from '@/share/useWechatAuth.js'
14
+  import { useLoginSuccess } from '@/share/useLoginSuccess.js'
15
+  import { useSetTitle } from '@/share/useSetTitle.js'
16
+  
17
+  useSetTitle()
18
+  const { wechatAuth } = useWechatAuth()
19
+  const { loginSuccess } = useLoginSuccess()
19 20
 
20 21
   /**
21 22
    * 微信登录
@@ -39,93 +40,30 @@
39 40
           loginSuccess(res.user);
40 41
         } else if (res.state == 501) {
41 42
           uni.showModal({
42
-          	title: '提示',
43
-          	content: '您的账号被删除,请联系管理员',
43
+            title: '提示',
44
+            content: '您的账号被删除,请联系管理员',
44 45
             showCancel: false,
45
-            confirmColor: '#49b856'
46
+            confirmColor: defaultColor,
47
+            confirmText: '取消',
46 48
           });
47 49
         } else if (res.state == 403) {
48
-          // 没有填写微信和工号
49
-          // this.$createDialog({
50
-          //   type: 'prompt',
51
-          //   title: '请填写工号',
52
-          //   prompt: {
53
-          //     value: '',
54
-          //     placeholder: '请填写工号'
55
-          //   },
56
-          //   onConfirm: (e, promptValue) => {
57
-          //     console.log(e, promptValue);
58
-          //     that.$http.post("/auth/bindAccount", {
59
-          //       account: promptValue,
60
-          //       wechat: res.wechat
61
-          //     }).then(res1 => {
62
-          //       if (res1.data.status == 403) {
63
-          //         that
64
-          //           .$createDialog({
65
-          //             type: "alert",
66
-          //             title: '请联系管理员进行添加',
67
-          //             icon: "cubeic-alert"
68
-          //           })
69
-          //           .show();
70
-          //       } else {
71
-          //         wechatAuth();
72
-          //       }
73
-          //     })
74
-          //   }
75
-          // }).show()
50
+          uni.reLaunch({
51
+            url: `/pages/initBind/initBind?wechat=${res.wechat}`
52
+          })
76 53
         } else {
77 54
           uni.showModal({
78
-          	title: '提示',
79
-          	content: res.remarks || '请求数据失败!',
55
+            title: '提示',
56
+            content: res.remarks || '请求数据失败!',
80 57
             showCancel: false,
81
-            confirmColor: '#49b856'
58
+            confirmColor: defaultColor,
59
+            confirmText: '取消',
82 60
           });
83 61
         }
84 62
       });
85 63
     }
86 64
   }
87 65
 
88
-  /**
89
-   * 微信登录2
90
-   */
91
-  function wechatAuth() {
92
-    uni.showLoading({
93
-      title: "登录中",
94
-      mask: true,
95
-    });
96
-    post("/auth/wechatAuth", {
97
-      redirectUrl: location.origin + location.pathname
98
-    }).then(res => {
99
-      uni.hideLoading();
100
-      if (res.url) {
101
-        window.location.href = res.url;
102
-      } else {
103
-        loginSuccess(res.user);
104
-      }
105
-    });
106
-  }
107
-
108
-  /**
109
-   * 登录成功后的操作
110
-   */
111
-  function loginSuccess(user) {
112
-    loginUserStore.setLoginUser(user.user);
113
-    loginUserStore.setLoginUserMenu(user.menu);
114
-    // 判断用户标识是否为处理人
115
-    if(user.user.engineer === 1){
116
-      console.log('进入事件列表页');
117
-    }else{
118
-      console.log('进入错误页');
119
-    }
120
-  }
121
-
122 66
   onLoad((option) => {
123
-    // #ifdef H5
124 67
     wechatLoginEncrypt();
125
-    // #endif
126 68
   })
127 69
 </script>
128
-
129
-<style lang="scss">
130
-
131
-</style>

+ 14 - 0
pages/incidentList/incidentList.vue

@@ -0,0 +1,14 @@
1
+<template>
2
+  <view>
3
+    事件列表页
4
+  </view>
5
+</template>
6
+
7
+<script setup>
8
+  import { useSetTitle } from '@/share/useSetTitle.js'
9
+  useSetTitle()
10
+</script>
11
+
12
+<style lang="scss" scoped>
13
+
14
+</style>

+ 166 - 0
pages/initBind/initBind.vue

@@ -0,0 +1,166 @@
1
+<template>
2
+  <view class="repairEntrance">
3
+    <view class="info">
4
+      <view class="info_text">
5
+        <view class="text_left text_justify">您还没有绑定工号,请填写您的工号进行绑定。</view>
6
+      </view>
7
+      <view class="info_form">
8
+        <view class="info_form_item">
9
+          <label for="account" class="label"><text class="required newicon newicon-bitian"></text>工号:</label>
10
+          <uni-easyinput class="flex1" v-model="postData.account" placeholder="请输入工号" focus
11
+            :styles="{borderColor: !postData.account && isSubmmit ? '#f00' : ''}" :primaryColor="primaryColor" />
12
+        </view>
13
+      </view>
14
+    </view>
15
+    <button @click="bind" type="default" class="primaryButton bind">绑定</button>
16
+  </view>
17
+</template>
18
+
19
+<script setup>
20
+  import { onLoad } from '@dcloudio/uni-app'
21
+  import { post } from "@/http/http.js"
22
+  import { defaultColor } from '@/static/js/theme.js'
23
+  import { reactive, ref } from 'vue'
24
+  
25
+  import { useWechatAuth } from '@/share/useWechatAuth.js'
26
+  import { useSetTitle } from '@/share/useSetTitle.js'
27
+  
28
+  useSetTitle()
29
+  const { wechatAuth } = useWechatAuth()
30
+
31
+  // 数据
32
+  const postData = reactive({
33
+    account: '',
34
+  })
35
+
36
+  // 传参
37
+  const options = reactive({
38
+    wechat: '',
39
+  })
40
+
41
+  // easyinput颜色
42
+  const primaryColor = ref(defaultColor)
43
+
44
+  // 是否提交
45
+  const isSubmmit = ref(false)
46
+
47
+  /**
48
+   * 绑定
49
+   */
50
+  function bind() {
51
+    isSubmmit.value = true;
52
+    if(!postData.account){
53
+      uni.showModal({
54
+        title: '提示',
55
+        content: `请填写工号`,
56
+        showCancel: false,
57
+        confirmColor: defaultColor,
58
+        confirmText: '取消',
59
+      });
60
+      return;
61
+    }
62
+    bindFn();
63
+    
64
+  }
65
+  
66
+  /**
67
+   * 绑定工号
68
+   */
69
+  function bindFn(type) {
70
+    uni.showLoading({
71
+      title: "加载中",
72
+      mask: true,
73
+    });
74
+    post("/auth/bindAccount", {
75
+      account: postData.account,
76
+      wechat: options.wechat,
77
+      type: type || undefined,
78
+    }).then(res => {
79
+      uni.hideLoading();
80
+      if (res.status == 200) {
81
+        if(type === undefined){
82
+          // 查询
83
+          uni.showModal({
84
+            title: '提示',
85
+            content: `您输入的工号为“${postData.account}”对应姓名“${res.data ? res.data.name : ''}”,您确认绑定吗?`,
86
+            confirmColor: defaultColor,
87
+            confirmText: '确认',
88
+            success: function(res) {
89
+              if (res.confirm) {
90
+                bindFn('bind');
91
+              }
92
+            }
93
+          });
94
+        }else{
95
+          // 绑定
96
+          wechatAuth();
97
+        }
98
+      } else if (res.status == 403) {
99
+        //未查询到
100
+        uni.showModal({
101
+          title: '提示',
102
+          content: `您填写的工号“${postData.account}”,未查询到!请确认工号是否正确,如有问题请联系管理员。`,
103
+          showCancel: false,
104
+          confirmColor: defaultColor,
105
+          confirmText: '取消',
106
+        });
107
+      } else if (res.status == 401) {
108
+        //已被绑定
109
+        uni.showModal({
110
+          title: '提示',
111
+          content: `您填写工号为“${postData.account}”对应姓名为“${res.data ? res.data.name : ''}”已经被绑定,如有误请联系管理员处理。`,
112
+          showCancel: false,
113
+          confirmColor: defaultColor,
114
+          confirmText: '取消',
115
+        });
116
+      } else {
117
+        uni.showModal({
118
+          title: '提示',
119
+          content: res.msg || '请求数据失败!',
120
+          showCancel: false,
121
+          confirmColor: defaultColor,
122
+          confirmText: '取消',
123
+        });
124
+      }
125
+    })
126
+  }
127
+
128
+  onLoad((option) => {
129
+    console.log(option);
130
+    options.wechat = option.wechat;
131
+  })
132
+</script>
133
+
134
+<style lang="scss" scoped>
135
+  .repairEntrance {
136
+    height: 100%;
137
+    display: flex;
138
+    flex-direction: column;
139
+    justify-content: space-between;
140
+    align-items: center;
141
+
142
+    .info {
143
+      .info_text {
144
+        line-height: 56rpx;
145
+        font-size: 34rpx;
146
+        padding: 90rpx 0 58rpx;
147
+        display: flex;
148
+        justify-content: center;
149
+        align-items: center;
150
+      }
151
+
152
+      .info_form {
153
+        .info_form_item {
154
+          height: 86rpx;
155
+          display: flex;
156
+          align-items: center;
157
+        }
158
+      }
159
+    }
160
+
161
+    .bind {
162
+      width: 100%;
163
+      margin-bottom: 24rpx;
164
+    }
165
+  }
166
+</style>

+ 55 - 0
pages/repairEntrance/repairEntrance.vue

@@ -0,0 +1,55 @@
1
+<template>
2
+  <view class="repairEntrance">
3
+    <view class="info">
4
+      <view class="info_text">
5
+        <view class="text_left text_justify">您没有报修处理权限,如需要请联系管理员。</view>
6
+      </view>
7
+      <view class="info_tips text_center">如您需要报修点击<text class="info_primary">"进入报修”</text></view>
8
+    </view>
9
+    <button @click="goToRepair" type="default" class="primaryButton goToRepair">进入报修</button>
10
+  </view>
11
+</template>
12
+
13
+<script setup>
14
+  import { useSetTitle } from '@/share/useSetTitle.js'
15
+  useSetTitle()
16
+  /**
17
+   * 进入报修
18
+   */
19
+  function goToRepair() {
20
+    location.href = location.origin + '/req';
21
+  }
22
+</script>
23
+
24
+<style lang="scss" scoped>
25
+  .repairEntrance {
26
+    height: 100%;
27
+    display: flex;
28
+    flex-direction: column;
29
+    justify-content: space-between;
30
+    align-items: center;
31
+    .info {
32
+      .info_text {
33
+        line-height: 56rpx;
34
+        font-size: 34rpx;
35
+        padding: 90rpx 0 58rpx;
36
+        display: flex;
37
+        justify-content: center;
38
+        align-items: center;
39
+      }
40
+
41
+      .info_tips {
42
+        font-size: 24rpx;
43
+        color: $uni-secondary-color;
44
+
45
+        .info_primary {
46
+          color: $uni-primary;
47
+        }
48
+      }
49
+    }
50
+    .goToRepair{
51
+      width: 100%;
52
+      margin-bottom: 24rpx;
53
+    }
54
+  }
55
+</style>

+ 25 - 0
share/useLoginSuccess.js

@@ -0,0 +1,25 @@
1
+import { useLoginUserStore } from '@/stores/loginUser'
2
+const loginUserStore = useLoginUserStore()
3
+export function useLoginSuccess() {
4
+  /**
5
+   * 登录成功后的操作
6
+   */
7
+  function loginSuccess(user) {
8
+    loginUserStore.setLoginUser(user.user);
9
+    loginUserStore.setLoginUserMenu(user.menu);
10
+    // 判断用户标识是否为处理人
11
+    if (user.user.engineer === 1) {
12
+      uni.reLaunch({
13
+        url: '/pages/incidentList/incidentList'
14
+      })
15
+    } else {
16
+      uni.reLaunch({
17
+        url: '/pages/repairEntrance/repairEntrance'
18
+      })
19
+    }
20
+  }
21
+
22
+  return {
23
+    loginSuccess
24
+  };
25
+}

+ 29 - 0
share/useSetTitle.js

@@ -0,0 +1,29 @@
1
+import { onLoad } from '@dcloudio/uni-app'
2
+import { get } from "@/http/http.js"
3
+import { useLoginUserStore } from '@/stores/loginUser'
4
+const loginUserStore = useLoginUserStore()
5
+
6
+export function useSetTitle() {
7
+  /**
8
+   * 设置标题
9
+   */
10
+  function setTitle(){
11
+    console.log(loginUserStore.loginUser.sysName)
12
+    if(loginUserStore.loginUser.sysName){
13
+      uni.setNavigationBarTitle({
14
+        title: loginUserStore.loginUser.sysName //页面标题为页面顶部显示的文字
15
+      });
16
+    }else{
17
+      get("/auth/getSysNameAndLogo").then(res => {
18
+        let sysName = res.sysName || '';
19
+        loginUserStore.setLoginUserTitle(sysName)
20
+        uni.setNavigationBarTitle({
21
+          title: sysName //页面标题为页面顶部显示的文字
22
+        });
23
+      })
24
+    }
25
+  }
26
+  onLoad(() => {
27
+    setTitle();
28
+  })
29
+}

+ 35 - 0
share/useWechatAuth.js

@@ -0,0 +1,35 @@
1
+import {
2
+  get,
3
+  post,
4
+} from "@/http/http.js"
5
+import {
6
+  useLoginSuccess
7
+} from '@/share/useLoginSuccess.js'
8
+const {
9
+  loginSuccess
10
+} = useLoginSuccess()
11
+export function useWechatAuth() {
12
+  /**
13
+   * 微信登录2
14
+   */
15
+  function wechatAuth() {
16
+    uni.showLoading({
17
+      title: "登录中",
18
+      mask: true,
19
+    });
20
+    post("/auth/wechatAuth", {
21
+      redirectUrl: location.origin + location.pathname
22
+    }).then(res => {
23
+      uni.hideLoading();
24
+      if (res.url) {
25
+        window.location.href = res.url;
26
+      } else {
27
+        loginSuccess(res.user);
28
+      }
29
+    });
30
+  }
31
+
32
+  return {
33
+    wechatAuth
34
+  };
35
+}

二进制
static/c1.png


二进制
static/c2.png


二进制
static/c3.png


二进制
static/c4.png


二进制
static/c5.png


二进制
static/c6.png


二进制
static/c7.png


二进制
static/c8.png


二进制
static/c9.png


+ 539 - 0
static/font/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
+}

+ 533 - 0
static/font/demo_index.html

@@ -0,0 +1,533 @@
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/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
7
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.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=4304860" 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 newicon">&#xe655;</span>
59
+                <div class="name">bitian</div>
60
+                <div class="code-name">&amp;#xe655;</div>
61
+              </li>
62
+          
63
+            <li class="dib">
64
+              <span class="icon newicon">&#xe66d;</span>
65
+                <div class="name">资源 2-wode</div>
66
+                <div class="code-name">&amp;#xe66d;</div>
67
+              </li>
68
+          
69
+            <li class="dib">
70
+              <span class="icon newicon">&#xe66e;</span>
71
+                <div class="name">资源 1-zhuye</div>
72
+                <div class="code-name">&amp;#xe66e;</div>
73
+              </li>
74
+          
75
+            <li class="dib">
76
+              <span class="icon newicon">&#xe66f;</span>
77
+                <div class="name">资源 2-baoxiu</div>
78
+                <div class="code-name">&amp;#xe66f;</div>
79
+              </li>
80
+          
81
+            <li class="dib">
82
+              <span class="icon newicon">&#xe670;</span>
83
+                <div class="name">资源 1-baoxiu</div>
84
+                <div class="code-name">&amp;#xe670;</div>
85
+              </li>
86
+          
87
+            <li class="dib">
88
+              <span class="icon newicon">&#xe600;</span>
89
+                <div class="name">3.1选中</div>
90
+                <div class="code-name">&amp;#xe600;</div>
91
+              </li>
92
+          
93
+            <li class="dib">
94
+              <span class="icon newicon">&#xe63a;</span>
95
+                <div class="name">修改</div>
96
+                <div class="code-name">&amp;#xe63a;</div>
97
+              </li>
98
+          
99
+            <li class="dib">
100
+              <span class="icon newicon">&#xe610;</span>
101
+                <div class="name">主页</div>
102
+                <div class="code-name">&amp;#xe610;</div>
103
+              </li>
104
+          
105
+            <li class="dib">
106
+              <span class="icon newicon">&#xe66c;</span>
107
+                <div class="name">资源 1-wode</div>
108
+                <div class="code-name">&amp;#xe66c;</div>
109
+              </li>
110
+          
111
+            <li class="dib">
112
+              <span class="icon newicon">&#xe65c;</span>
113
+                <div class="name">筛选</div>
114
+                <div class="code-name">&amp;#xe65c;</div>
115
+              </li>
116
+          
117
+            <li class="dib">
118
+              <span class="icon newicon">&#xe604;</span>
119
+                <div class="name">报修</div>
120
+                <div class="code-name">&amp;#xe604;</div>
121
+              </li>
122
+          
123
+            <li class="dib">
124
+              <span class="icon newicon">&#xe638;</span>
125
+                <div class="name">消息管理</div>
126
+                <div class="code-name">&amp;#xe638;</div>
127
+              </li>
128
+          
129
+            <li class="dib">
130
+              <span class="icon newicon">&#xe673;</span>
131
+                <div class="name">新建 (1)</div>
132
+                <div class="code-name">&amp;#xe673;</div>
133
+              </li>
134
+          
135
+            <li class="dib">
136
+              <span class="icon newicon">&#xe606;</span>
137
+                <div class="name">图片</div>
138
+                <div class="code-name">&amp;#xe606;</div>
139
+              </li>
140
+          
141
+            <li class="dib">
142
+              <span class="icon newicon">&#xe609;</span>
143
+                <div class="name">设备巡检</div>
144
+                <div class="code-name">&amp;#xe609;</div>
145
+              </li>
146
+          
147
+          </ul>
148
+          <div class="article markdown">
149
+          <h2 id="unicode-">Unicode 引用</h2>
150
+          <hr>
151
+
152
+          <p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
153
+          <ul>
154
+            <li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
155
+            <li>默认情况下不支持多色,直接添加多色图标会自动去色。</li>
156
+          </ul>
157
+          <blockquote>
158
+            <p>注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)</p>
159
+          </blockquote>
160
+          <p>Unicode 使用步骤如下:</p>
161
+          <h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
162
+<pre><code class="language-css"
163
+>@font-face {
164
+  font-family: 'newicon';
165
+  src: url('iconfont.woff2?t=1712989645345') format('woff2'),
166
+       url('iconfont.woff?t=1712989645345') format('woff'),
167
+       url('iconfont.ttf?t=1712989645345') format('truetype');
168
+}
169
+</code></pre>
170
+          <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
171
+<pre><code class="language-css"
172
+>.newicon {
173
+  font-family: "newicon" !important;
174
+  font-size: 16px;
175
+  font-style: normal;
176
+  -webkit-font-smoothing: antialiased;
177
+  -moz-osx-font-smoothing: grayscale;
178
+}
179
+</code></pre>
180
+          <h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
181
+<pre>
182
+<code class="language-html"
183
+>&lt;span class="newicon"&gt;&amp;#x33;&lt;/span&gt;
184
+</code></pre>
185
+          <blockquote>
186
+            <p>"newicon" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
187
+          </blockquote>
188
+          </div>
189
+      </div>
190
+      <div class="content font-class">
191
+        <ul class="icon_lists dib-box">
192
+          
193
+          <li class="dib">
194
+            <span class="icon newicon newicon-bitian"></span>
195
+            <div class="name">
196
+              bitian
197
+            </div>
198
+            <div class="code-name">.newicon-bitian
199
+            </div>
200
+          </li>
201
+          
202
+          <li class="dib">
203
+            <span class="icon newicon newicon-ziyuan-wode1"></span>
204
+            <div class="name">
205
+              资源 2-wode
206
+            </div>
207
+            <div class="code-name">.newicon-ziyuan-wode1
208
+            </div>
209
+          </li>
210
+          
211
+          <li class="dib">
212
+            <span class="icon newicon newicon-ziyuan-zhuye"></span>
213
+            <div class="name">
214
+              资源 1-zhuye
215
+            </div>
216
+            <div class="code-name">.newicon-ziyuan-zhuye
217
+            </div>
218
+          </li>
219
+          
220
+          <li class="dib">
221
+            <span class="icon newicon newicon-ziyuan-baoxiu"></span>
222
+            <div class="name">
223
+              资源 2-baoxiu
224
+            </div>
225
+            <div class="code-name">.newicon-ziyuan-baoxiu
226
+            </div>
227
+          </li>
228
+          
229
+          <li class="dib">
230
+            <span class="icon newicon newicon-ziyuan-baoxiu1"></span>
231
+            <div class="name">
232
+              资源 1-baoxiu
233
+            </div>
234
+            <div class="code-name">.newicon-ziyuan-baoxiu1
235
+            </div>
236
+          </li>
237
+          
238
+          <li class="dib">
239
+            <span class="icon newicon newicon-31xuanzhong"></span>
240
+            <div class="name">
241
+              3.1选中
242
+            </div>
243
+            <div class="code-name">.newicon-31xuanzhong
244
+            </div>
245
+          </li>
246
+          
247
+          <li class="dib">
248
+            <span class="icon newicon newicon-weibiaoti2010104"></span>
249
+            <div class="name">
250
+              修改
251
+            </div>
252
+            <div class="code-name">.newicon-weibiaoti2010104
253
+            </div>
254
+          </li>
255
+          
256
+          <li class="dib">
257
+            <span class="icon newicon newicon-zhuye"></span>
258
+            <div class="name">
259
+              主页
260
+            </div>
261
+            <div class="code-name">.newicon-zhuye
262
+            </div>
263
+          </li>
264
+          
265
+          <li class="dib">
266
+            <span class="icon newicon newicon-ziyuan-wode"></span>
267
+            <div class="name">
268
+              资源 1-wode
269
+            </div>
270
+            <div class="code-name">.newicon-ziyuan-wode
271
+            </div>
272
+          </li>
273
+          
274
+          <li class="dib">
275
+            <span class="icon newicon newicon-shaixuan"></span>
276
+            <div class="name">
277
+              筛选
278
+            </div>
279
+            <div class="code-name">.newicon-shaixuan
280
+            </div>
281
+          </li>
282
+          
283
+          <li class="dib">
284
+            <span class="icon newicon newicon-baoxiu"></span>
285
+            <div class="name">
286
+              报修
287
+            </div>
288
+            <div class="code-name">.newicon-baoxiu
289
+            </div>
290
+          </li>
291
+          
292
+          <li class="dib">
293
+            <span class="icon newicon newicon-xiaoxiguanli"></span>
294
+            <div class="name">
295
+              消息管理
296
+            </div>
297
+            <div class="code-name">.newicon-xiaoxiguanli
298
+            </div>
299
+          </li>
300
+          
301
+          <li class="dib">
302
+            <span class="icon newicon newicon-xinjian2"></span>
303
+            <div class="name">
304
+              新建 (1)
305
+            </div>
306
+            <div class="code-name">.newicon-xinjian2
307
+            </div>
308
+          </li>
309
+          
310
+          <li class="dib">
311
+            <span class="icon newicon newicon-a-11111"></span>
312
+            <div class="name">
313
+              图片
314
+            </div>
315
+            <div class="code-name">.newicon-a-11111
316
+            </div>
317
+          </li>
318
+          
319
+          <li class="dib">
320
+            <span class="icon newicon newicon-shebeixunjian"></span>
321
+            <div class="name">
322
+              设备巡检
323
+            </div>
324
+            <div class="code-name">.newicon-shebeixunjian
325
+            </div>
326
+          </li>
327
+          
328
+        </ul>
329
+        <div class="article markdown">
330
+        <h2 id="font-class-">font-class 引用</h2>
331
+        <hr>
332
+
333
+        <p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
334
+        <p>与 Unicode 使用方式相比,具有如下特点:</p>
335
+        <ul>
336
+          <li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
337
+          <li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
338
+        </ul>
339
+        <p>使用步骤如下:</p>
340
+        <h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
341
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
342
+</code></pre>
343
+        <h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
344
+<pre><code class="language-html">&lt;span class="newicon newicon-xxx"&gt;&lt;/span&gt;
345
+</code></pre>
346
+        <blockquote>
347
+          <p>"
348
+            newicon" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
349
+        </blockquote>
350
+      </div>
351
+      </div>
352
+      <div class="content symbol">
353
+          <ul class="icon_lists dib-box">
354
+          
355
+            <li class="dib">
356
+                <svg class="icon svg-icon" aria-hidden="true">
357
+                  <use xlink:href="#newicon-bitian"></use>
358
+                </svg>
359
+                <div class="name">bitian</div>
360
+                <div class="code-name">#newicon-bitian</div>
361
+            </li>
362
+          
363
+            <li class="dib">
364
+                <svg class="icon svg-icon" aria-hidden="true">
365
+                  <use xlink:href="#newicon-ziyuan-wode1"></use>
366
+                </svg>
367
+                <div class="name">资源 2-wode</div>
368
+                <div class="code-name">#newicon-ziyuan-wode1</div>
369
+            </li>
370
+          
371
+            <li class="dib">
372
+                <svg class="icon svg-icon" aria-hidden="true">
373
+                  <use xlink:href="#newicon-ziyuan-zhuye"></use>
374
+                </svg>
375
+                <div class="name">资源 1-zhuye</div>
376
+                <div class="code-name">#newicon-ziyuan-zhuye</div>
377
+            </li>
378
+          
379
+            <li class="dib">
380
+                <svg class="icon svg-icon" aria-hidden="true">
381
+                  <use xlink:href="#newicon-ziyuan-baoxiu"></use>
382
+                </svg>
383
+                <div class="name">资源 2-baoxiu</div>
384
+                <div class="code-name">#newicon-ziyuan-baoxiu</div>
385
+            </li>
386
+          
387
+            <li class="dib">
388
+                <svg class="icon svg-icon" aria-hidden="true">
389
+                  <use xlink:href="#newicon-ziyuan-baoxiu1"></use>
390
+                </svg>
391
+                <div class="name">资源 1-baoxiu</div>
392
+                <div class="code-name">#newicon-ziyuan-baoxiu1</div>
393
+            </li>
394
+          
395
+            <li class="dib">
396
+                <svg class="icon svg-icon" aria-hidden="true">
397
+                  <use xlink:href="#newicon-31xuanzhong"></use>
398
+                </svg>
399
+                <div class="name">3.1选中</div>
400
+                <div class="code-name">#newicon-31xuanzhong</div>
401
+            </li>
402
+          
403
+            <li class="dib">
404
+                <svg class="icon svg-icon" aria-hidden="true">
405
+                  <use xlink:href="#newicon-weibiaoti2010104"></use>
406
+                </svg>
407
+                <div class="name">修改</div>
408
+                <div class="code-name">#newicon-weibiaoti2010104</div>
409
+            </li>
410
+          
411
+            <li class="dib">
412
+                <svg class="icon svg-icon" aria-hidden="true">
413
+                  <use xlink:href="#newicon-zhuye"></use>
414
+                </svg>
415
+                <div class="name">主页</div>
416
+                <div class="code-name">#newicon-zhuye</div>
417
+            </li>
418
+          
419
+            <li class="dib">
420
+                <svg class="icon svg-icon" aria-hidden="true">
421
+                  <use xlink:href="#newicon-ziyuan-wode"></use>
422
+                </svg>
423
+                <div class="name">资源 1-wode</div>
424
+                <div class="code-name">#newicon-ziyuan-wode</div>
425
+            </li>
426
+          
427
+            <li class="dib">
428
+                <svg class="icon svg-icon" aria-hidden="true">
429
+                  <use xlink:href="#newicon-shaixuan"></use>
430
+                </svg>
431
+                <div class="name">筛选</div>
432
+                <div class="code-name">#newicon-shaixuan</div>
433
+            </li>
434
+          
435
+            <li class="dib">
436
+                <svg class="icon svg-icon" aria-hidden="true">
437
+                  <use xlink:href="#newicon-baoxiu"></use>
438
+                </svg>
439
+                <div class="name">报修</div>
440
+                <div class="code-name">#newicon-baoxiu</div>
441
+            </li>
442
+          
443
+            <li class="dib">
444
+                <svg class="icon svg-icon" aria-hidden="true">
445
+                  <use xlink:href="#newicon-xiaoxiguanli"></use>
446
+                </svg>
447
+                <div class="name">消息管理</div>
448
+                <div class="code-name">#newicon-xiaoxiguanli</div>
449
+            </li>
450
+          
451
+            <li class="dib">
452
+                <svg class="icon svg-icon" aria-hidden="true">
453
+                  <use xlink:href="#newicon-xinjian2"></use>
454
+                </svg>
455
+                <div class="name">新建 (1)</div>
456
+                <div class="code-name">#newicon-xinjian2</div>
457
+            </li>
458
+          
459
+            <li class="dib">
460
+                <svg class="icon svg-icon" aria-hidden="true">
461
+                  <use xlink:href="#newicon-a-11111"></use>
462
+                </svg>
463
+                <div class="name">图片</div>
464
+                <div class="code-name">#newicon-a-11111</div>
465
+            </li>
466
+          
467
+            <li class="dib">
468
+                <svg class="icon svg-icon" aria-hidden="true">
469
+                  <use xlink:href="#newicon-shebeixunjian"></use>
470
+                </svg>
471
+                <div class="name">设备巡检</div>
472
+                <div class="code-name">#newicon-shebeixunjian</div>
473
+            </li>
474
+          
475
+          </ul>
476
+          <div class="article markdown">
477
+          <h2 id="symbol-">Symbol 引用</h2>
478
+          <hr>
479
+
480
+          <p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
481
+            这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
482
+          <ul>
483
+            <li>支持多色图标了,不再受单色限制。</li>
484
+            <li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
485
+            <li>兼容性较差,支持 IE9+,及现代浏览器。</li>
486
+            <li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
487
+          </ul>
488
+          <p>使用步骤如下:</p>
489
+          <h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
490
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
491
+</code></pre>
492
+          <h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
493
+<pre><code class="language-html">&lt;style&gt;
494
+.icon {
495
+  width: 1em;
496
+  height: 1em;
497
+  vertical-align: -0.15em;
498
+  fill: currentColor;
499
+  overflow: hidden;
500
+}
501
+&lt;/style&gt;
502
+</code></pre>
503
+          <h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
504
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
505
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
506
+&lt;/svg&gt;
507
+</code></pre>
508
+          </div>
509
+      </div>
510
+
511
+    </div>
512
+  </div>
513
+  <script>
514
+  $(document).ready(function () {
515
+      $('.tab-container .content:first').show()
516
+
517
+      $('#tabs li').click(function (e) {
518
+        var tabContent = $('.tab-container .content')
519
+        var index = $(this).index()
520
+
521
+        if ($(this).hasClass('active')) {
522
+          return
523
+        } else {
524
+          $('#tabs li').removeClass('active')
525
+          $(this).addClass('active')
526
+
527
+          tabContent.hide().eq(index).fadeIn()
528
+        }
529
+      })
530
+    })
531
+  </script>
532
+</body>
533
+</html>

+ 75 - 0
static/font/iconfont.css

@@ -0,0 +1,75 @@
1
+@font-face {
2
+  font-family: "newicon"; /* Project id 4304860 */
3
+  src: url('iconfont.woff2?t=1712989645345') format('woff2'),
4
+       url('iconfont.woff?t=1712989645345') format('woff'),
5
+       url('iconfont.ttf?t=1712989645345') format('truetype');
6
+}
7
+
8
+.newicon {
9
+  font-family: "newicon" !important;
10
+  font-size: 16px;
11
+  font-style: normal;
12
+  -webkit-font-smoothing: antialiased;
13
+  -moz-osx-font-smoothing: grayscale;
14
+}
15
+
16
+.newicon-bitian:before {
17
+  content: "\e655";
18
+}
19
+
20
+.newicon-ziyuan-wode1:before {
21
+  content: "\e66d";
22
+}
23
+
24
+.newicon-ziyuan-zhuye:before {
25
+  content: "\e66e";
26
+}
27
+
28
+.newicon-ziyuan-baoxiu:before {
29
+  content: "\e66f";
30
+}
31
+
32
+.newicon-ziyuan-baoxiu1:before {
33
+  content: "\e670";
34
+}
35
+
36
+.newicon-31xuanzhong:before {
37
+  content: "\e600";
38
+}
39
+
40
+.newicon-weibiaoti2010104:before {
41
+  content: "\e63a";
42
+}
43
+
44
+.newicon-zhuye:before {
45
+  content: "\e610";
46
+}
47
+
48
+.newicon-ziyuan-wode:before {
49
+  content: "\e66c";
50
+}
51
+
52
+.newicon-shaixuan:before {
53
+  content: "\e65c";
54
+}
55
+
56
+.newicon-baoxiu:before {
57
+  content: "\e604";
58
+}
59
+
60
+.newicon-xiaoxiguanli:before {
61
+  content: "\e638";
62
+}
63
+
64
+.newicon-xinjian2:before {
65
+  content: "\e673";
66
+}
67
+
68
+.newicon-a-11111:before {
69
+  content: "\e606";
70
+}
71
+
72
+.newicon-shebeixunjian:before {
73
+  content: "\e609";
74
+}
75
+

文件差异内容过多而无法显示
+ 1 - 0
static/font/iconfont.js


+ 114 - 0
static/font/iconfont.json

@@ -0,0 +1,114 @@
1
+{
2
+  "id": "4304860",
3
+  "name": "新itsm移动端",
4
+  "font_family": "newicon",
5
+  "css_prefix_text": "newicon-",
6
+  "description": "",
7
+  "glyphs": [
8
+    {
9
+      "icon_id": "5933281",
10
+      "name": "bitian",
11
+      "font_class": "bitian",
12
+      "unicode": "e655",
13
+      "unicode_decimal": 58965
14
+    },
15
+    {
16
+      "icon_id": "6602933",
17
+      "name": "资源 2-wode",
18
+      "font_class": "ziyuan-wode1",
19
+      "unicode": "e66d",
20
+      "unicode_decimal": 58989
21
+    },
22
+    {
23
+      "icon_id": "6602934",
24
+      "name": "资源 1-zhuye",
25
+      "font_class": "ziyuan-zhuye",
26
+      "unicode": "e66e",
27
+      "unicode_decimal": 58990
28
+    },
29
+    {
30
+      "icon_id": "6602935",
31
+      "name": "资源 2-baoxiu",
32
+      "font_class": "ziyuan-baoxiu",
33
+      "unicode": "e66f",
34
+      "unicode_decimal": 58991
35
+    },
36
+    {
37
+      "icon_id": "6602936",
38
+      "name": "资源 1-baoxiu",
39
+      "font_class": "ziyuan-baoxiu1",
40
+      "unicode": "e670",
41
+      "unicode_decimal": 58992
42
+    },
43
+    {
44
+      "icon_id": "200867",
45
+      "name": "3.1选中",
46
+      "font_class": "31xuanzhong",
47
+      "unicode": "e600",
48
+      "unicode_decimal": 58880
49
+    },
50
+    {
51
+      "icon_id": "1069107",
52
+      "name": "修改",
53
+      "font_class": "weibiaoti2010104",
54
+      "unicode": "e63a",
55
+      "unicode_decimal": 58938
56
+    },
57
+    {
58
+      "icon_id": "4510419",
59
+      "name": "主页",
60
+      "font_class": "zhuye",
61
+      "unicode": "e610",
62
+      "unicode_decimal": 58896
63
+    },
64
+    {
65
+      "icon_id": "6602932",
66
+      "name": "资源 1-wode",
67
+      "font_class": "ziyuan-wode",
68
+      "unicode": "e66c",
69
+      "unicode_decimal": 58988
70
+    },
71
+    {
72
+      "icon_id": "8039219",
73
+      "name": "筛选",
74
+      "font_class": "shaixuan",
75
+      "unicode": "e65c",
76
+      "unicode_decimal": 58972
77
+    },
78
+    {
79
+      "icon_id": "5796777",
80
+      "name": "报修",
81
+      "font_class": "baoxiu",
82
+      "unicode": "e604",
83
+      "unicode_decimal": 58884
84
+    },
85
+    {
86
+      "icon_id": "5223836",
87
+      "name": "消息管理",
88
+      "font_class": "xiaoxiguanli",
89
+      "unicode": "e638",
90
+      "unicode_decimal": 58936
91
+    },
92
+    {
93
+      "icon_id": "6796640",
94
+      "name": "新建 (1)",
95
+      "font_class": "xinjian2",
96
+      "unicode": "e673",
97
+      "unicode_decimal": 58995
98
+    },
99
+    {
100
+      "icon_id": "39056749",
101
+      "name": "图片",
102
+      "font_class": "a-11111",
103
+      "unicode": "e606",
104
+      "unicode_decimal": 58886
105
+    },
106
+    {
107
+      "icon_id": "2492912",
108
+      "name": "设备巡检",
109
+      "font_class": "shebeixunjian",
110
+      "unicode": "e609",
111
+      "unicode_decimal": 58889
112
+    }
113
+  ]
114
+}

二进制
static/font/iconfont.ttf


二进制
static/font/iconfont.woff


二进制
static/font/iconfont.woff2


+ 2 - 0
static/js/theme.js

@@ -0,0 +1,2 @@
1
+// 主题色
2
+export const defaultColor = '#49b856';

二进制
static/logo.png


+ 58 - 0
static/scss/common.scss

@@ -0,0 +1,58 @@
1
+// 设置页面属性
2
+page{
3
+  background-color: #fff;
4
+  color: #000;
5
+  padding: 0 24rpx;
6
+  height: 100vh;
7
+}
8
+
9
+// 居中
10
+.text_center{
11
+  text-align: center;
12
+}
13
+
14
+// 居左
15
+.text_left{
16
+  text-align: left;
17
+}
18
+
19
+// 两端对齐
20
+.text_justify{
21
+  text-align: justify;
22
+}
23
+
24
+// 按钮
25
+.primaryButton{
26
+  color: #fff!important;
27
+  background-color: $uni-primary!important;
28
+  border-color: $uni-primary!important;
29
+}
30
+
31
+// 必填标识
32
+.required{
33
+  color: #f00;
34
+  font-size: 20rpx;
35
+}
36
+
37
+// flex:1
38
+.flex1{
39
+  flex: 1;
40
+}
41
+
42
+// lable
43
+.label{
44
+  margin-right: 35rpx;
45
+  display: flex;
46
+  align-items: center;
47
+  font-size: 26rpx;
48
+}
49
+
50
+// easyinput边框选中色
51
+.is-focused{
52
+  border-color: $uni-primary!important;
53
+}
54
+
55
+// 弹窗两端对齐
56
+.uni-modal__bd{
57
+  text-align: justify;
58
+}

二进制
static/uni.png


+ 11 - 7
stores/loginUser.js

@@ -1,9 +1,5 @@
1
-import {
2
-  defineStore
3
-} from "pinia"
4
-import {
5
-  reactive
6
-} from 'vue'
1
+import { defineStore } from "pinia"
2
+import { reactive } from 'vue'
7 3
 
8 4
 export const useLoginUserStore = defineStore(
9 5
   "loginUser",
@@ -11,6 +7,7 @@ export const useLoginUserStore = defineStore(
11 7
     const loginUser = reactive({
12 8
       user: {},
13 9
       menu: [],
10
+      sysName: '',
14 11
     });
15 12
 
16 13
     // 设置当前登录用户
@@ -22,13 +19,20 @@ export const useLoginUserStore = defineStore(
22 19
     function setLoginUserMenu(data) {
23 20
       loginUser.menu = data;
24 21
     }
22
+    
23
+    // 设置系统名称
24
+    function setLoginUserTitle(data) {
25
+      loginUser.sysName = data;
26
+    }
25 27
 
26 28
     return {
27 29
       loginUser,
28 30
       setLoginUser,
29 31
       setLoginUserMenu,
32
+      setLoginUserTitle,
30 33
     };
31
-  }, {
34
+  },
35
+  {
32 36
     unistorage: true, // 开启后对 state 的数据读写都将持久化
33 37
   },
34 38
 );

+ 5 - 1
uni.scss

@@ -1 +1,5 @@
1
-@import '@/uni_modules/uni-scss/variables.scss';
1
+@import '@/uni_modules/uni-scss/variables.scss';
2
+// 主题色
3
+$uni-primary: #49b856;
4
+// 次要色
5
+$uni-secondary-color: #909399;