Home Explore Help
Register Sign In
seimin
/
zuel-itsm-3.0.2
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

增加电话挂号和修改密码

seimin 3 years ago
parent
863fe17bad
commit
ddd3079773
13 changed files with 1995 additions and 428 deletions
Split View Show Diff Stats
  1. 1 0
      index.html
  2. 23 9
      src/router/index.js
  3. 190 0
      src/views/changePassword.vue
  4. 451 0
      src/views/checkNumber.vue
  5. 510 419
      src/views/indes.vue
  6. 539 0
      static/font/seimin/demo.css
  7. 234 0
      static/font/seimin/demo_index.html
  8. 23 0
      static/font/seimin/iconfont.css
  9. 1 0
      static/font/seimin/iconfont.js
  10. 23 0
      static/font/seimin/iconfont.json
  11. BIN
      static/font/seimin/iconfont.ttf
  12. BIN
      static/font/seimin/iconfont.woff
  13. BIN
      static/font/seimin/iconfont.woff2

+ 1 - 0
index.html
View File 

@@ -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/font/seimin/iconfont.css">
6 7 
     <script src="./static/js/JQ-3.3.1.js"></script>
7 8 
     <meta name="viewport"
8 9 
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">

+ 23 - 9
src/router/index.js
View File 

@@ -12,6 +12,8 @@ import NoticeDetails from './../views/noticeDetails.vue'//公告详情
12 12 
 import NoticeList from './../views/noticeList.vue'//公告列表
13 13 
 import KnowList from './../views/knowList.vue'//知识库列表
14 14 
 import KnowDetails from './../views/knowDetails.vue'//知识库详情
15 
+import CheckNumber from './../views/checkNumber.vue'//电话插好
16 
+import ChangePassword from './../views/changePassword.vue'//修改密码
15 17 
 import Guide from './../views/guide.vue'//服务指南
16 18 
 import IncidentDetails from './../views/incidentDetails.vue'//事件详情
17 19 
 import CommonProblem from './../views/commonProblem.vue'//常见问题
 
@@ -41,7 +43,7 @@ export default new Router({
41 43 
         },
42 44 
         {
43 45 
           path: '/main/incidentList',
44 
-          name:'IncidentList',
46 
+          name: 'IncidentList',
45 47 
           component: IncidentList,
46 48 
           meta: { allowBack: false },
47 49 
         },
 
@@ -59,13 +61,13 @@ export default new Router({
59 61 
     },
60 62 
     {
61 63 
       path: '/myModify/:data',
62 
-      name:'MyModify',
64 
+      name: 'MyModify',
63 65 
       component: MyModify,
64 66 
       meta: { allowBack: false },
65 67 
     },
66 68 
     {
67 69 
       path: '/noticeDetails/:data',
68 
-      name:'NoticeDetails',
70 
+      name: 'NoticeDetails',
69 71 
       component: NoticeDetails,
70 72 
       meta: { allowBack: false },
71 73 
     },
 
@@ -76,42 +78,54 @@ export default new Router({
76 78 
     },
77 79 
     {
78 80 
       path: '/knowList',
79 
-      name:'KnowList',
81 
+      name: 'KnowList',
80 82 
       component: KnowList,
81 83 
       meta: { allowBack: false },
82 84 
     },
83 85 
     {
84 86 
       path: '/knowDetails/:data',
85 
-      name:'KnowDetails',
87 
+      name: 'KnowDetails',
86 88 
       component: KnowDetails,
87 89 
       meta: { allowBack: false },
88 90 
     },
89 91 
     {
92 
+      path: '/checkNumber',
93 
+      name: 'CheckNumber',
94 
+      component: CheckNumber,
95 
+      meta: { allowBack: false },
96 
+    },
97 
+    {
98 
+      path: '/changePassword',
99 
+      name: 'ChangePassword',
100 
+      component: ChangePassword,
101 
+      meta: { allowBack: false },
102 
+    },
103 
+    {
90 104 
       path: '/guide',
91 105 
       component: Guide,
92 106 
       meta: { allowBack: false },
93 107 
     },
94 108 
     {
95 109 
       path: '/incidentDetails/:data',
96 
-      name:'IncidentDetails',
110 
+      name: 'IncidentDetails',
97 111 
       component: IncidentDetails,
98 112 
       meta: { allowBack: false },
99 113 
     },
100 114 
     {
101 115 
       path: '/commonProblem/:data',
102 
-      name:'CommonProblem',
116 
+      name: 'CommonProblem',
103 117 
       component: CommonProblem,
104 118 
       meta: { allowBack: false },
105 119 
     },
106 120 
     {
107 121 
       path: '/evaluate/:data',
108 122 
       component: Evaluate,
109 
-      name:'Evaluate',
123 
+      name: 'Evaluate',
110 124 
       meta: { allowBack: false },
111 125 
     },
112 126 
     {
113 127 
       path: '/maintenance',
114 
-      name:'Maintenance',
128 
+      name: 'Maintenance',
115 129 
       component: Maintenance,
116 130 
       meta: { allowBack: false },
117 131 
     },

+ 190 - 0
src/views/changePassword.vue
View File 

@@ -0,0 +1,190 @@
1 
+<template>
2 
+  <div class="bgColor">
3 
+    <div slot="content" class="scroll-wrapper">
4 
+      <div class="demo">
5 
+        <div class="demoItem">
6 
+          <cube-button light
7 
+            ><a
8 
+              href="http://ids.zuel.edu.cn/personalInfo/personCenter/index.html?service=http://i.zuel.edu.cn#/accountsecurity"
9 
+              >统一身份认证密码修改</a
10 
+            ></cube-button
11 
+          >
12 
+        </div>
13 
+        <div class="demoItem">
14 
+          <cube-button light>
15 
+            <a href="https://oah5.zuel.edu.cn/Mobile/UserPwdInfo"
16 
+              >OA修改密码</a
17 
+            ></cube-button
18 
+          >
19 
+        </div>
20 
+        <div class="demoItem">
21 
+          <cube-button light @click="showToast()">认证计费密码修改</cube-button>
22 
+        </div>
23 
+      </div>
24 
+    </div>
25 
+  </div>
26 
+</template>
27 
+<script>
28 
+export default {
29 
+  data() {
30 
+    return {};
31 
+  },
32 
+  methods: {
33 
+    showToast() {
34 
+      this.$createDialog({
35 
+        type: "alert",
36 
+        content:
37 
+          "用户可以前往中南大微校园-校园网络-修改密码选项直接修改校园网密码",
38 
+        icon: "cubeic-alert"
39 
+      }).show();
40 
+    }
41 
+  }
42 
+};
43 
+</script>
44 
+<style lang="stylus" rel="stylesheet/stylus" scoped>
45 
+.demoItem{
46 
+  padding: 0.24rem 0.64rem;
47 
+  border-bottom: 0.01rem rgb(238, 238, 238) solid;
48 
+}
49 
+.demoItem button{
50 
+  color: #7e8c8d!important;
51 
+}
52 
+.scroll-list-wrap
53 
+  /* height: 350px */
54 
+  height:100vh
55 
+  /* border: 1px solid rgba(0, 0, 0, 0.1) */
56 
+  border-radius: 5px
57 
+  transform: rotate(0deg) // fix 子元素超出边框圆角部分不隐藏的问题
58 
+  overflow: hidden
59 
+
60 
+.foods-wrapper
61 
+  .food-item
62 
+    display: flex
63 
+    /* min-width: 0 */
64 
+    /* padding: 18px
65 
+    border-bottom: 1px solid rgba(7, 17, 27, 0.1) */
66 
+
67 
+    &:last-child
68 
+      border-none()
69 
+      margin-bottom: 0
70 
+
71 
+    .food-content
72 
+      flex: 1
73 
+      min-width: 0;
74 
+      .cartcontrol-wrapper
75 
+        position: absolute
76 
+        right: 0
77 
+        bottom: 12px
78 
+        .scroll-wrapper{
79 
+  .cube-pulldown-wrapper{
80 
+    .before-trigger{
81 
+      font-size: 30px;
82 
+      line-height: 30px;
83 
+      align-self: flex-end;
84 
+      span{
85 
+        display: inline-block;
86 
+        transition: all 0.3s;
87 
+        color: #666;
88 
+        &.rotate{
89 
+            transform: rotate(180deg)
90 
+          }
91 
+      }
92 
+    }
93 
+    .after-trigger{
94 
+      .refresh-text{
95 
+        color: grey
96 
+      }
97 
+    }
98 
+ }
99 
+}
100 
+</style>
101 
+<style scoped>
102 
+.bgColor {
103 
+  background-color: white;
104 
+}
105 
+.search {
106 
+  padding: 0.16rem 0.24rem;
107 
+  height: 0.6rem;
108 
+  background-color: #eeeeee;
109 
+  border-bottom: 0.01rem #999999 solid;
110 
+}
111 
+.search input {
112 
+  width: 100%;
113 
+  height: 0.56rem;
114 
+  border-radius: 4px;
115 
+  text-align: center;
116 
+  font-size: 0.28rem;
117 
+}
118 
+.search:focus {
119 
+  outline: none;
120 
+}
121 
+.food-item {
122 
+  border-top: 0.16rem rgb(238, 238, 238) solid;
123 
+}
124 
+.food-content {
125 
+  border-top: 0.01rem rgb(223, 222, 222) solid;
126 
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
127 
+}
128 
+.title {
129 
+  display: flex;
130 
+  min-width: 0;
131 
+  padding: 0.2rem 0.24rem;
132 
+  line-height: 0.45rem;
133 
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
134 
+}
135 
+.title div:nth-child(1) {
136 
+  width: 6%;
137 
+}
138 
+.title div:nth-child(1) i {
139 
+  font-size: 0.32rem;
140 
+  color: #005395;
141 
+  line-height: 0.49rem;
142 
+}
143 
+.title div:nth-child(2) {
144 
+  width: 94%;
145 
+  font-size: 0.32rem;
146 
+  overflow: hidden;
147 
+  white-space: nowrap;
148 
+  text-overflow: ellipsis;
149 
+}
150 
+.content {
151 
+  font-size: 0.28rem;
152 
+  /* margin-top: .3rem; */
153 
+  line-height: 0.39rem;
154 
+  overflow: hidden;
155 
+  display: -webkit-box;
156 
+  -webkit-line-clamp: 2;
157 
+  -webkit-box-orient: vertical;
158 
+  word-break: break-all;
159 
+  padding: 0 0.64rem;
160 
+  margin: 0.24rem 0;
161 
+  max-height: 0.78rem;
162 
+}
163 
+.timeBox {
164 
+  display: flex;
165 
+  justify-content: space-between;
166 
+  /* margin-top: .3rem; */
167 
+  border-top: 0.01rem rgb(223, 222, 222) solid;
168 
+  padding: 0.2rem 0.64rem;
169 
+}
170 
+.timeBox .time {
171 
+  color: #999999;
172 
+  font-size: 0.24rem;
173 
+}
174 
+.timeBox .good i {
175 
+  font-size: 0.3rem;
176 
+  color: #a37200;
177 
+}
178 
+.timeBox .good span {
179 
+  color: #a37200;
180 
+  font-size: 0.24rem;
181 
+}
182 
+.wushuju {
183 
+  margin-top: 2.4rem;
184 
+  text-align: center;
185 
+}
186 
+.wushuju img {
187 
+  width: 5.12rem;
188 
+  height: 2.84rem;
189 
+}
190 
+</style>

+ 451 - 0
src/views/checkNumber.vue
View File 

@@ -0,0 +1,451 @@
1 
+<template>
2 
+  <div class="bgColor">
3 
+    <div slot="content" class="scroll-wrapper">
4 
+      <div class="demo">
5 
+        <div class="scroll-list-wrap">
6 
+          <cube-scroll
7 
+            ref="scroll"
8 
+            :data="items"
9 
+            :options="options"
10 
+            @pulling-down="onPullingDown"
11 
+            @pulling-up="onPullingUp"
12 
+          >
13 
+            <div class="search">
14 
+              <input
15 
+                type="text"
16 
+                placeholder="搜索"
17 
+                v-model="search"
18 
+                @input="searchFn()"
19 
+              />
20 
+            </div>
21 
+            <ul class="foods-wrapper">
22 
+              <li
23 
+                v-for="data in items"
24 
+                class="food-item border-1px"
25 
+                :key="data.id"
26 
+              >
27 
+                <div class="food-content">
28 
+                  <div class="title">
29 
+                    <div>
30 
+                      <i class="iconfont icon-changjianwenti1"></i>
31 
+                    </div>
32 
+                    <div class="title_t">
33 
+                      <span>{{ data.dept }}</span>
34 
+                      <span v-if="data.phone"
35 
+                        ><a :href="'tel:' + data.phone"
36 
+                          ><i class="iconfont icon-shouji"></i
37 
+                          >{{ data.phone }}</a
38 
+                        ></span
39 
+                      >
40 
+                    </div>
41 
+                  </div>
42 
+                  <div class="content">
43 
+                    <span
44 
+                      >单位名称：{{
45 
+                        data.parent ? data.parent.dept : "无"
46 
+                      }}</span
47 
+                    >
48 
+                  </div>
49 
+                  <div class="content">
50 
+                    <span
51 
+                      >办公地址：{{
52 
+                        data.place
53 
+                          ? data.place.area.area + " " + data.place.place
54 
+                          : "无"
55 
+                      }}</span
56 
+                    >
57 
+                    <span></span>
58 
+                  </div>
59 
+                </div>
60 
+              </li>
61 
+              <div class="wushuju" v-show="wushuju">
62 
+                <img src="./../../static/images/wushuju.svg" alt="" />
63 
+                <div class="noDataFont">暂无数据</div>
64 
+              </div>
65 
+            </ul>
66 
+            <template v-if="customPullDown" slot="pulldown" slot-scope="props">
67 
+              <div
68 
+                v-if="props.pullDownRefresh"
69 
+                class="cube-pulldown-wrapper"
70 
+                :style="props.pullDownStyle"
71 
+              >
72 
+                <div
73 
+                  v-show="props.beforePullDown"
74 
+                  class="before-trigger"
75 
+                  :style="{ paddingTop: props.bubbleY + 'px' }"
76 
+                >
77 
+                  <span
78 
+                    :class="{
79 
+                      rotate: props.bubbleY > pullDownRefreshThreshold - 40
80 
+                    }"
81 
+                    >↓</span
82 
+                  >
83 
+                </div>
84 
+                <div class="after-trigger" v-show="!props.beforePullDown">
85 
+                  <div v-show="props.isPullingDown" class="loading">
86 
+                    <cube-loading></cube-loading>
87 
+                  </div>
88 
+                  <div v-show="!props.isPullingDown" class="text">
89 
+                    <span class="refresh-text">更新成功</span>
90 
+                  </div>
91 
+                </div>
92 
+              </div>
93 
+            </template>
94 
+          </cube-scroll>
95 
+        </div>
96 
+      </div>
97 
+    </div>
98 
+    <load-ing v-show="loadShow"></load-ing>
99 
+  </div>
100 
+</template>
101 
+<script>
102 
+import Vue from "vue";
103 
+import CubePage from "../components/cube-page.vue";
104 
+import SwitchOption from "../components/switch-option";
105 
+import InputOption from "../components/input-option";
106 
+import SelectOption from "../components/select-option";
107 
+import LoadIng from "./../views/loading.vue";
108 
+export default {
109 
+  data() {
110 
+    return {
111 
+      //   items: _foods,
112 
+      items: [],
113 
+      pullDownRefresh: true,
114 
+      pullDownRefreshThreshold: 60,
115 
+      pullDownRefreshStop: 40,
116 
+      pullDownRefreshTxt: "Refresh success",
117 
+      pullUpLoad: true,
118 
+      pullUpLoadThreshold: 0,
119 
+      pullUpLoadMoreTxt: "Load more",
120 
+      pullUpLoadNoMoreTxt: "没有更多数据",
121 
+      wushuju: false,
122 
+      customPullDown: true,
123 
+      search: "",
124 
+      sum: 10,
125 
+      idx: 0,
126 
+      loadShow: true
127 
+    };
128 
+  },
129 
+  components: {
130 
+    CubePage,
131 
+    SwitchOption,
132 
+    InputOption,
133 
+    SelectOption,
134 
+    LoadIng
135 
+  },
136 
+  computed: {
137 
+    options() {
138 
+      return {
139 
+        pullDownRefresh: this.pullDownRefreshObj,
140 
+        pullUpLoad: this.pullUpLoadObj,
141 
+        scrollbar: true
142 
+      };
143 
+    },
144 
+    pullDownRefreshObj: function() {
145 
+      return this.pullDownRefresh
146 
+        ? {
147 
+            threshold: parseInt(this.pullDownRefreshThreshold),
148 
+            txt: this.pullDownRefreshTxt
149 
+          }
150 
+        : false;
151 
+    },
152 
+    pullUpLoadObj: function() {
153 
+      return this.pullUpLoad
154 
+        ? {
155 
+            threshold: parseInt(this.pullUpLoadThreshold),
156 
+            txt: {
157 
+              more: this.pullUpLoadMoreTxt,
158 
+              noMore: this.pullUpLoadNoMoreTxt
159 
+            }
160 
+          }
161 
+        : false;
162 
+    }
163 
+  },
164 
+  methods: {
165 
+    getParams() {
166 
+      if (this.$route.params.keword) {
167 
+        this.search = this.$route.params.keword;
168 
+      }
169 
+    },
170 
+    searchFn() {
171 
+      var that = this;
172 
+      that.loadShow = true;
173 
+      this.idx = 0;
174 
+      this.$http
175 
+        .post("service/user/data/fetchDataList/department", {
176 
+          idx: 0,
177 
+          sum: 10,
178 
+          department: {
179 
+            selectType: "pinyin_qs",
180 
+            dept: that.search
181 
+          }
182 
+        })
183 
+        .then(function(res) {
184 
+          if (res.data.list.length > 0) {
185 
+            that.items = res.data.list;
186 
+            that.wushuju = false;
187 
+          } else {
188 
+            that.wushuju = true;
189 
+            that.items = [];
190 
+          }
191 
+          that.loadShow = false;
192 
+        });
193 
+    },
194 
+    toKnowDetails(data) {
195 
+      // this.$router.push({path:'/knowDetails'})
196 
+      this.$router.push({
197 
+        name: "KnowDetails",
198 
+        params: {
199 
+          data: JSON.stringify(data)
200 
+        }
201 
+      });
202 
+    },
203 
+    onPullingDown() {
204 
+      // 模拟更新数据
205 
+      this.idx = 0;
206 
+      setTimeout(() => {
207 
+        var that = this;
208 
+        this.$http
209 
+          .post("service/user/data/fetchDataList/department", {
210 
+            idx: 0,
211 
+            sum: 10,
212 
+            department: {
213 
+              selectType: "pinyin_qs",
214 
+              dept: that.search
215 
+            }
216 
+          })
217 
+          .then(function(res) {
218 
+            if (res.data.list.length > 0) {
219 
+              that.items = res.data.list;
220 
+              that.wushuju = false;
221 
+            } else {
222 
+              that.$refs.scroll.forceUpdate();
223 
+              that.wushuju = true;
224 
+            }
225 
+          });
226 
+      }, 1000);
227 
+    },
228 
+    getData(idx, sum) {
229 
+      var that = this;
230 
+      this.$http
231 
+        .post("service/user/data/fetchDataList/department", {
232 
+          idx: idx,
233 
+          sum: sum,
234 
+          department: {
235 
+            selectType: "pinyin_qs",
236 
+            dept: that.search
237 
+          }
238 
+        })
239 
+        .then(function(res) {
240 
+          if (res.data.list.length > 0) {
241 
+            that.items = res.data.list;
242 
+            that.wushuju = false;
243 
+          } else {
244 
+            that.wushuju = true;
245 
+          }
246 
+          that.loadShow = false;
247 
+        });
248 
+    },
249 
+    onPullingUp() {
250 
+      var that = this;
251 
+      that.idx = that.idx + 1;
252 
+      this.$http
253 
+        .post("service/user/data/fetchDataList/department", {
254 
+          idx: that.idx,
255 
+          sum: that.sum,
256 
+          department: {
257 
+            selectType: "pinyin_qs",
258 
+            dept: that.search
259 
+          }
260 
+        })
261 
+        .then(function(res) {
262 
+          setTimeout(() => {
263 
+            if (res.data.list.length > 0) {
264 
+              that.items = that.items.concat(res.data.list);
265 
+            } else {
266 
+              that.$refs.scroll.forceUpdate();
267 
+            }
268 
+          }, 1000);
269 
+        });
270 
+    },
271 
+    updatePullDownRefresh(val) {
272 
+      this.pullDownRefresh = val;
273 
+    },
274 
+    updatePullDownRefreshThreshold(val) {
275 
+      this.pullDownRefreshThreshold = val;
276 
+    },
277 
+    updatePullDownRefreshTxt(val) {
278 
+      this.pullDownRefreshTxt = val;
279 
+    },
280 
+    updatePullUpLoad(val) {
281 
+      this.pullUpLoad = val;
282 
+    },
283 
+    updatePullUpLoadThreshold(val) {
284 
+      this.pullUpLoadThreshold = val;
285 
+    },
286 
+    updatePullUpLoadMoreTxt(val) {
287 
+      this.pullUpLoadMoreTxt = val;
288 
+    },
289 
+    updatePullUpLoadNoMoreTxt(val) {
290 
+      this.pullUpLoadNoMoreTxt = val;
291 
+    },
292 
+    updateCustomPullDown(val) {
293 
+      this.customPullDown = val;
294 
+    },
295 
+    rebuildScroll() {
296 
+      Vue.nextTick(() => {
297 
+        this.$refs.scroll.destroy();
298 
+        this.$refs.scroll.initScroll();
299 
+      });
300 
+    }
301 
+  },
302 
+  created() {
303 
+    this.getParams();
304 
+    this.getData(this.idx, this.sum);
305 
+  }
306 
+};
307 
+</script>
308 
+<style lang="stylus" rel="stylesheet/stylus" scoped>
309 
+.scroll-list-wrap
310 
+  /* height: 350px */
311 
+  height:100vh
312 
+  /* border: 1px solid rgba(0, 0, 0, 0.1) */
313 
+  border-radius: 5px
314 
+  transform: rotate(0deg) // fix 子元素超出边框圆角部分不隐藏的问题
315 
+  overflow: hidden
316 
+
317 
+.foods-wrapper
318 
+  .food-item
319 
+    display: flex
320 
+    /* min-width: 0 */
321 
+    /* padding: 18px
322 
+    border-bottom: 1px solid rgba(7, 17, 27, 0.1) */
323 
+
324 
+    &:last-child
325 
+      border-none()
326 
+      margin-bottom: 0
327 
+
328 
+    .food-content
329 
+      flex: 1
330 
+      min-width: 0;
331 
+      .cartcontrol-wrapper
332 
+        position: absolute
333 
+        right: 0
334 
+        bottom: 12px
335 
+        .scroll-wrapper{
336 
+  .cube-pulldown-wrapper{
337 
+    .before-trigger{
338 
+      font-size: 30px;
339 
+      line-height: 30px;
340 
+      align-self: flex-end;
341 
+      span{
342 
+        display: inline-block;
343 
+        transition: all 0.3s;
344 
+        color: #666;
345 
+        &.rotate{
346 
+            transform: rotate(180deg)
347 
+          }
348 
+      }
349 
+    }
350 
+    .after-trigger{
351 
+      .refresh-text{
352 
+        color: grey
353 
+      }
354 
+    }
355 
+ }
356 
+}
357 
+</style>
358 
+<style scoped>
359 
+.bgColor {
360 
+  background-color: white;
361 
+}
362 
+.search {
363 
+  padding: 0.16rem 0.24rem;
364 
+  height: 0.6rem;
365 
+  background-color: #eeeeee;
366 
+  border-bottom: 0.01rem #999999 solid;
367 
+}
368 
+.search input {
369 
+  width: 100%;
370 
+  height: 0.56rem;
371 
+  border-radius: 4px;
372 
+  text-align: center;
373 
+  font-size: 0.28rem;
374 
+}
375 
+.search:focus {
376 
+  outline: none;
377 
+}
378 
+.food-item {
379 
+  border-top: 0.16rem rgb(238, 238, 238) solid;
380 
+}
381 
+.food-content {
382 
+  border-top: 0.01rem rgb(223, 222, 222) solid;
383 
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
384 
+}
385 
+.title {
386 
+  display: flex;
387 
+  min-width: 0;
388 
+  padding: 0.2rem 0.24rem;
389 
+  line-height: 0.45rem;
390 
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
391 
+}
392 
+.title .title_t {
393 
+  display: flex;
394 
+  justify-content: space-between;
395 
+}
396 
+.title div:nth-child(1) {
397 
+  width: 6%;
398 
+}
399 
+.title div:nth-child(1) i {
400 
+  font-size: 0.32rem;
401 
+  color: #005395;
402 
+  line-height: 0.49rem;
403 
+}
404 
+.title div:nth-child(2) {
405 
+  width: 94%;
406 
+  font-size: 0.32rem;
407 
+  overflow: hidden;
408 
+  white-space: nowrap;
409 
+  text-overflow: ellipsis;
410 
+}
411 
+.content {
412 
+  font-size: 0.28rem;
413 
+  /* margin-top: .3rem; */
414 
+  line-height: 0.39rem;
415 
+  overflow: hidden;
416 
+  display: -webkit-box;
417 
+  -webkit-line-clamp: 2;
418 
+  -webkit-box-orient: vertical;
419 
+  word-break: break-all;
420 
+  padding: 0 0.64rem;
421 
+  margin: 0.24rem 0;
422 
+  max-height: 0.78rem;
423 
+}
424 
+.timeBox {
425 
+  display: flex;
426 
+  justify-content: space-between;
427 
+  /* margin-top: .3rem; */
428 
+  border-top: 0.01rem rgb(223, 222, 222) solid;
429 
+  padding: 0.2rem 0.64rem;
430 
+}
431 
+.timeBox .time {
432 
+  color: #999999;
433 
+  font-size: 0.24rem;
434 
+}
435 
+.timeBox .good i {
436 
+  font-size: 0.3rem;
437 
+  color: #a37200;
438 
+}
439 
+.timeBox .good span {
440 
+  color: #a37200;
441 
+  font-size: 0.24rem;
442 
+}
443 
+.wushuju {
444 
+  margin-top: 2.4rem;
445 
+  text-align: center;
446 
+}
447 
+.wushuju img {
448 
+  width: 5.12rem;
449 
+  height: 2.84rem;
450 
+}
451 
+</style>

+ 510 - 419
src/views/indes.vue
View File 

@@ -1,460 +1,551 @@
1 1 
 <template>
2 
-    <div class="fle bgColor">
3 
-        <!-- 头部导航栏 -->
4 
-        <div class="tav">
5 
-            <div @click="toRapir()">
6 
-                <i class="iconfont icon-xinjian"></i>
7 
-                <span>快速报修</span>
8 
-            </div>
9 
-            <div @click="toKnowList()">
10 
-                <i class="iconfont icon-message"></i>
11 
-                <span>常见问题</span>
12 
-            </div>
13 
-            <!-- <div @click="toGuide()">
2 
+  <div class="fle bgColor">
3 
+    <!-- 头部导航栏 -->
4 
+    <div class="tav">
5 
+      <div @click="toRapir()">
6 
+        <i class="iconfont icon-xinjian"></i>
7 
+        <span>快速报修</span>
8 
+      </div>
9 
+      <div @click="toKnowList()">
10 
+        <i class="iconfont icon-message"></i>
11 
+        <span>常见问题</span>
12 
+      </div>
13 
+      <div @click="toCheckNumber()">
14 
+        <i class="dash dash-chahao"></i>
15 
+        <span>电话查号</span>
16 
+      </div>
17 
+      <div @click="toChangePassword()">
18 
+        <i class="dash dash-xiugaimima"></i>
19 
+        <span>修改密码</span>
20 
+      </div>
21 
+      <!-- <div @click="toGuide()">
14 22 
                 <i class="iconfont icon-fuwuzhinan"></i>
15 23 
                 <span>服务指南</span>
16 24 
             </div> -->
25 
+    </div>
26 
+    <div class="bigBody">
27 
+      <!-- 最新报修 -->
28 
+      <div class="newRepair">
29 
+        <div class="titHead">
30 
+          <span class="tit"
31 
+            ><i class="iconfont icon-zuixinbaoxiu newPapir"></i
32 
+            ><span>最新报修</span></span
33 
+          >
34 
+          <span class="link" @click="toIncidentList()"
35 
+            >更多<i class="iconfont icon-moren"></i
36 
+          ></span>
17 37 
         </div>
18 
-        <div class="bigBody">
19 
-            <!-- 最新报修 -->
20 
-            <div class="newRepair">
21 
-                <div class="titHead">
22 
-                    <span class="tit"><i class="iconfont icon-zuixinbaoxiu newPapir"></i><span>最新报修</span></span>
23 
-                    <span class="link" @click="toIncidentList()">更多<i class="iconfont icon-moren"></i></span>
24 
-                </div>
25 
-                <div class="conentBox" v-for="v in newRapirData" @click="toIncidentDetails(v)" v-if="!newRapirNoData&&!newRapirLoading">
26 
-                    <div class="conent">
27 
-                        <div class="head">
28 
-                            <!-- <span>{{v.requester.name}}</span> -->
29 
-                            <span>报修编号:{{v.bxcode}}</span>
30 
-                            <span>{{v.createTime}}</span>
31 
-                        </div>
32 
-                        <div class="cot">
33 
-                            {{v.description}}
34 
-                        </div>
35 
-                    </div>
36 
-                    <div class="flowChart">
37 
-                        <div class="pits">
38 
-                            <div :class="state!=1?'yesLine':''"></div>
39 
-                            <div :class="state!=1&&state!=2?'yesLine':''"></div>
40 
-                            <div :class="state!=1&&state!=2&&state!=3?'yesLine':''"></div>
41 
-                            <div :class="state!=1&&state!=2&&state!=3&&state!=4?'yesLine':''"></div>
38 
+        <div
39 
+          class="conentBox"
40 
+          v-for="v in newRapirData"
41 
+          @click="toIncidentDetails(v)"
42 
+          v-if="!newRapirNoData && !newRapirLoading"
43 
+        >
44 
+          <div class="conent">
45 
+            <div class="head">
46 
+              <!-- <span>{{v.requester.name}}</span> -->
47 
+              <span>报修编号:{{ v.bxcode }}</span>
48 
+              <span>{{ v.createTime }}</span>
49 
+            </div>
50 
+            <div class="cot">
51 
+              {{ v.description }}
52 
+            </div>
53 
+          </div>
54 
+          <div class="flowChart">
55 
+            <div class="pits">
56 
+              <div :class="state != 1 ? 'yesLine' : ''"></div>
57 
+              <div :class="state != 1 && state != 2 ? 'yesLine' : ''"></div>
58 
+              <div
59 
+                :class="state != 1 && state != 2 && state != 3 ? 'yesLine' : ''"
60 
+              ></div>
61 
+              <div
62 
+                :class="
63 
+                  state != 1 && state != 2 && state != 3 && state != 4
64 
+                    ? 'yesLine'
65 
+                    : ''
66 
+                "
67 
+              ></div>
42 68
43 
-                            <i class="iconfont icon-icon_weizuo shenqing no" v-if="false"></i>
44 
-                            <i class="iconfont icon-icon_weizuo shouli no" v-if="state==1"></i>
45 
-                            <i class="iconfont icon-icon_weizuo chuli no" v-if="state==2||state==1"></i>
46 
-                            <i class="iconfont icon-icon_weizuo pingjia no" v-if="state==3||state==2||state==1"></i>
47 
-                            <i class="iconfont icon-icon_weizuo wancheng no" v-if="state==4||state==3||state==2||state==1"></i>
69 
+              <i class="iconfont icon-icon_weizuo shenqing no" v-if="false"></i>
70 
+              <i
71 
+                class="iconfont icon-icon_weizuo shouli no"
72 
+                v-if="state == 1"
73 
+              ></i>
74 
+              <i
75 
+                class="iconfont icon-icon_weizuo chuli no"
76 
+                v-if="state == 2 || state == 1"
77 
+              ></i>
78 
+              <i
79 
+                class="iconfont icon-icon_weizuo pingjia no"
80 
+                v-if="state == 3 || state == 2 || state == 1"
81 
+              ></i>
82 
+              <i
83 
+                class="iconfont icon-icon_weizuo wancheng no"
84 
+                v-if="state == 4 || state == 3 || state == 2 || state == 1"
85 
+              ></i>
48 86
49 
-                            <i class="iconfont icon-icon_weizuo shenqing yes" v-if="state!=1"></i>
50 
-                            <i class="iconfont icon-icon_weizuo shouli yes" v-if="state!=1&&state!=2"></i>
51 
-                            <i class="iconfont icon-icon_weizuo chuli yes" v-if="state!=1&&state!=2&&state!=3"></i>
52 
-                            <i class="iconfont icon-icon_weizuo pingjia yes" v-if="state!=1&&state!=2&&state!=3&&state!=4"></i>
53 
-                            <i class="iconfont icon-icon_weizuo wancheng yes" v-if="false"></i>
87 
+              <i
88 
+                class="iconfont icon-icon_weizuo shenqing yes"
89 
+                v-if="state != 1"
90 
+              ></i>
91 
+              <i
92 
+                class="iconfont icon-icon_weizuo shouli yes"
93 
+                v-if="state != 1 && state != 2"
94 
+              ></i>
95 
+              <i
96 
+                class="iconfont icon-icon_weizuo chuli yes"
97 
+                v-if="state != 1 && state != 2 && state != 3"
98 
+              ></i>
99 
+              <i
100 
+                class="iconfont icon-icon_weizuo pingjia yes"
101 
+                v-if="state != 1 && state != 2 && state != 3 && state != 4"
102 
+              ></i>
103 
+              <i
104 
+                class="iconfont icon-icon_weizuo wancheng yes"
105 
+                v-if="false"
106 
+              ></i>
54 107
55 
-                            <i class="iconfont icon-icon_zhengzaijinx shenqing now" v-if="state==1"></i>
56 
-                            <i class="iconfont icon-icon_zhengzaijinx shouli now" v-if="state==2"></i>
57 
-                            <i class="iconfont icon-icon_zhengzaijinx chuli now" v-if="state==3"></i>
58 
-                            <i class="iconfont icon-icon_zhengzaijinx pingjia now" v-if="state==4"></i>
59 
-                            <i class="iconfont icon-icon_zhengzaijinx wancheng now" v-if="state==5"></i>
60 
-                        </div>
61 
-                        <div class="words">
62 
-                            <div>申请</div>
63 
-                            <div>受理</div>
64 
-                            <div>处理</div>
65 
-                            <div>评价</div>
66 
-                            <div>完成</div>
67 
-                        </div>
68 
-                    </div>
69 
-                </div>
70 
-                <!-- 无数据 -->
71 
-                <div class="wushuju" v-if="newRapirNoData">
72 
-                    <img src="./../../static/images/wushuju.svg" alt="">
73 
-                    <div class="noDataFont">暂无数据</div>
74 
-                </div>
75 
-                <!-- loading -->
76 
-                <div class="loading" v-if="newRapirLoading">
77 
-                    <cube-loading :size="30"></cube-loading>
78 
-                </div>
108 
+              <i
109 
+                class="iconfont icon-icon_zhengzaijinx shenqing now"
110 
+                v-if="state == 1"
111 
+              ></i>
112 
+              <i
113 
+                class="iconfont icon-icon_zhengzaijinx shouli now"
114 
+                v-if="state == 2"
115 
+              ></i>
116 
+              <i
117 
+                class="iconfont icon-icon_zhengzaijinx chuli now"
118 
+                v-if="state == 3"
119 
+              ></i>
120 
+              <i
121 
+                class="iconfont icon-icon_zhengzaijinx pingjia now"
122 
+                v-if="state == 4"
123 
+              ></i>
124 
+              <i
125 
+                class="iconfont icon-icon_zhengzaijinx wancheng now"
126 
+                v-if="state == 5"
127 
+              ></i>
128 
+            </div>
129 
+            <div class="words">
130 
+              <div>申请</div>
131 
+              <div>受理</div>
132 
+              <div>处理</div>
133 
+              <div>评价</div>
134 
+              <div>完成</div>
135 
+            </div>
136 
+          </div>
137 
+        </div>
138 
+        <!-- 无数据 -->
139 
+        <div class="wushuju" v-if="newRapirNoData">
140 
+          <img src="./../../static/images/wushuju.svg" alt="" />
141 
+          <div class="noDataFont">暂无数据</div>
142 
+        </div>
143 
+        <!-- loading -->
144 
+        <div class="loading" v-if="newRapirLoading">
145 
+          <cube-loading :size="30"></cube-loading>
146 
+        </div>
147 
+      </div>
148 
+      <!-- 最新公告 -->
149 
+      <div class="newNotice">
150 
+        <div class="titHead titHead1">
151 
+          <span class="tit"
152 
+            ><i class="iconfont icon-message newNoticeico"></i
153 
+            ><span>最新公告</span></span
154 
+          >
155 
+          <span class="link" @click="toNoticeList()"
156 
+            >更多<i class="iconfont icon-moren"></i
157 
+          ></span>
158 
+        </div>
159 
+        <div class="conentBox" v-if="!newNoticeNoData && !newNoticeLoading">
160 
+          <div
161 
+            class="conent"
162 
+            v-for="v in noticeData"
163 
+            @click="toNoticeDetails(v)"
164 
+          >
165 
+            <div class="head">
166 
+              <!-- <span>{{v.title}}</span> -->
167 
+              {{ v.title }}
79 168 
             </div>
80 
-            <!-- 最新公告 -->
81 
-            <div class="newNotice">
82 
-                <div class="titHead titHead1">
83 
-                    <span class="tit"><i class="iconfont icon-message newNoticeico"></i><span>最新公告</span></span>
84 
-                    <span class="link" @click="toNoticeList()">更多<i class="iconfont icon-moren"></i></span>
85 
-                </div>
86 
-                <div class="conentBox" v-if="!newNoticeNoData&&!newNoticeLoading">
87 
-                    <div class="conent" v-for="v in noticeData" @click="toNoticeDetails(v)">
88 
-                        <div class="head">
89 
-                            <!-- <span>{{v.title}}</span> -->
90 
-                            {{v.title}}
91 
-                        </div>
92 
-                        <div class="cot">
93 
-                                {{v.createTime.substring(0,v.createTime.length-5)}}
94 
-                        </div>
95 
-                    </div>
96 
-                </div>
97 
-                <!-- 无数据 -->
98 
-                <div class="wushuju" v-if="newNoticeNoData">
99 
-                    <img src="./../../static/images/wugonggao.svg" alt="">
100 
-                    <div class="noDataFont">暂无数据</div>
101 
-                </div>
102 
-                <!-- loading -->
103 
-                <div class="loading" v-if="newNoticeLoading">
104 
-                    <cube-loading :size="30"></cube-loading>
105 
-                </div>
169 
+            <div class="cot">
170 
+              {{ v.createTime.substring(0, v.createTime.length - 5) }}
106 171 
             </div>
172 
+          </div>
173 
+        </div>
174 
+        <!-- 无数据 -->
175 
+        <div class="wushuju" v-if="newNoticeNoData">
176 
+          <img src="./../../static/images/wugonggao.svg" alt="" />
177 
+          <div class="noDataFont">暂无数据</div>
107 178 
         </div>
179 
+        <!-- loading -->
180 
+        <div class="loading" v-if="newNoticeLoading">
181 
+          <cube-loading :size="30"></cube-loading>
182 
+        </div>
183 
+      </div>
108 184 
     </div>
185 
+  </div>
109 186 
 </template>
110 187 
 <script>
111 
-import {formatDate} from './../components/js/date.js';
188 
+import { formatDate } from "./../components/js/date.js";
112 189 
 export default {
113 
-    data(){
114 
-        return{
115 
-            loginUser:JSON.parse(localStorage.getItem("loginUser")),
116 
-            noticeData:"",//公告列表
117 
-            newRapirData:"",//最新报修
118 
-            state:"",//流程状态
119 
-            newRapirNoData:false,//最新报修无数据
120 
-            newNoticeNoData:false,
121 
-            newRapirLoading:true,//最新报修loading
122 
-            newNoticeLoading:true//最新公告loading
190 
+  data() {
191 
+    return {
192 
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
193 
+      noticeData: "", //公告列表
194 
+      newRapirData: "", //最新报修
195 
+      state: "", //流程状态
196 
+      newRapirNoData: false, //最新报修无数据
197 
+      newNoticeNoData: false,
198 
+      newRapirLoading: true, //最新报修loading
199 
+      newNoticeLoading: true //最新公告loading
200 
+    };
201 
+  },
202 
+  methods: {
203 
+    ceshi() {
204 
+      alert($("html").css("font-size"));
205 
+    },
206 
+    // 获取公告列表数据
207 
+    getNoticData() {
208 
+      var that = this;
209 
+      this.$http
210 
+        .post("service/user/data/fetchDataList/notice", {
211 
+          idx: 0,
212 
+          sum: 3,
213 
+          notice: {
214 
+            status: 1
215 
+          }
216 
+        })
217 
+        .then(function(res) {
218 
+          that.newNoticeLoading = false;
219 
+          if (res.data.list.length > 0) {
220 
+            that.newNoticeNoData = false;
221 
+            that.noticeData = res.data.list;
222 
+          } else {
223 
+            that.newNoticeNoData = true;
224 
+          }
225 
+        });
226 
+    },
227 
+    // 获取最新报修
228 
+    getNewRapir() {
229 
+      var that = this;
230 
+      this.$http
231 
+        .post("service/apply/bpm/fetchServiceTasks", {
232 
+          assignee: that.loginUser.id,
233 
+          idx: 0,
234 
+          sum: 1
235 
+        })
236 
+        .then(function(res) {
237 
+          that.newRapirLoading = false;
238 
+          if (res.data.data.length > 0) {
239 
+            that.newRapirNoData = false;
240 
+            that.newRapirData = res.data.data;
241 
+            that.newRapirData[0].createTime = formatDate(
242 
+              new Date(that.newRapirData[0].createTime),
243 
+              "MM-dd hh:mm"
244 
+            );
245 
+            if (that.newRapirData[0].state.name == "未受理") {
246 
+              that.state = 1;
247 
+            } else if (that.newRapirData[0].state.name == "已转换") {
248 
+              that.state = 2;
249 
+            } else if (that.newRapirData[0].state.name == "处理中") {
250 
+              that.state = 3;
251 
+            } else if (that.newRapirData[0].state.name == "待评价") {
252 
+              that.state = 4;
253 
+            } else if (that.newRapirData[0].state.name == "已解决") {
254 
+              that.state = 5;
255 
+            } else {
256 
+              that.state = 5;
257 
+            }
258 
+            if (
259 
+              that.newRapirData[0].incident.state &&
260 
+              that.newRapirData[0].incident.state.name
261 
+            ) {
262 
+              if (that.newRapirData[0].incident.state.name == "待接单") {
263 
+                that.state = 3;
264 
+              } else if (that.newRapirData[0].incident.state.name == "处理中") {
265 
+                that.state = 3;
266 
+              }
267 
+            }
268 
+            console.log(that.state);
269 
+          } else {
270 
+            that.newRapirNoData = true;
271 
+          }
272 
+        });
273 
+    },
274 
+    toRapir() {
275 
+      this.$router.push({ path: "/repair" });
276 
+    },
277 
+    toNoticeDetails(data) {
278 
+      this.$router.push({
279 
+        name: "NoticeDetails",
280 
+        params: {
281 
+          data: JSON.stringify(data)
123 282 
         }
283 
+      });
284 
+      // this.$router.push({
285 
+      //     name:'NoticeDetails',
286 
+      //     params:{
287 
+      //         data:data
288 
+      //     }
289 
+      // })
290 
+    },
291 
+    toNoticeList() {
292 
+      this.$router.push({ path: "/noticeList" });
293 
+    },
294 
+    toIncidentList() {
295 
+      this.$router.push({ path: "/main/incidentList" });
296 
+    },
297 
+    toKnowList() {
298 
+      this.$router.push({ path: "/knowList" });
124 299 
     },
125 
-    methods:{
126 
-        ceshi(){
127 
-            alert($('html').css("font-size"));
128 
-        },
129 
-        // 获取公告列表数据
130 
-        getNoticData(){
131 
-            var that=this;
132 
-            this.$http.post('service/user/data/fetchDataList/notice',{
133 
-                idx: 0,
134 
-                sum: 3,
135 
-                notice:{
136 
-                    status:1
137 
-                }
138 
-            }).then(function(res){
139 
-                that.newNoticeLoading=false;
140 
-                if(res.data.list.length>0){
141 
-                    that.newNoticeNoData=false;
142 
-                    that.noticeData=res.data.list;
143 
-                }else{
144 
-                    that.newNoticeNoData=true
145 
-                }
146 
-            })
147 
-        },
148 
-        // 获取最新报修
149 
-        getNewRapir(){
150 
-            var that=this;
151 
-            this.$http.post('service/apply/bpm/fetchServiceTasks',{
152 
-                assignee:that.loginUser.id,
153 
-                idx: 0,
154 
-                sum: 1
155 
-            }).then(function(res){
156 
-                that.newRapirLoading=false;
157 
-                if(res.data.data.length>0){
158 
-                    that.newRapirNoData=false;
159 
-                    that.newRapirData=res.data.data;
160 
-                    that.newRapirData[0].createTime=formatDate(new Date(that.newRapirData[0].createTime), 'MM-dd hh:mm');
161 
-                    if(that.newRapirData[0].state.name=="未受理"){
162 
-                        that.state=1
163 
-                    }else if(that.newRapirData[0].state.name=="已转换"){
164 
-                        that.state=2
165 
-                    }else if(that.newRapirData[0].state.name=="处理中"){
166 
-                        that.state=3
167 
-                    }else if(that.newRapirData[0].state.name=="待评价"){
168 
-                        that.state=4
169 
-                    }else if(that.newRapirData[0].state.name=="已解决"){
170 
-                        that.state=5
171 
-                    }else{
172 
-                        that.state=5
173 
-                    }
174 
-                    if(that.newRapirData[0].incident.state&&that.newRapirData[0].incident.state.name){
175 
-                        if(that.newRapirData[0].incident.state.name=="待接单"){
176 
-                            that.state=3
177 
-                        }else if(that.newRapirData[0].incident.state.name=="处理中"){
178 
-                            that.state=3
179 
-                        }
180 
-                    }
181 
-                    console.log(that.state)
182 
-                }else{
183 
-                    that.newRapirNoData=true
184 
-                }
185 
-            })
186 
-        },
187 
-        toRapir(){
188 
-            this.$router.push({path:'/repair'})
189 
-        },
190 
-        toNoticeDetails(data){
191 
-            this.$router.push({
192 
-                name:'NoticeDetails',
193 
-                params:{
194 
-                    data:JSON.stringify(data)
195 
-                }
196 
-            })
197 
-            // this.$router.push({
198 
-            //     name:'NoticeDetails',
199 
-            //     params:{
200 
-            //         data:data
201 
-            //     }
202 
-            // })
203 
-        },
204 
-        toNoticeList(){
205 
-            this.$router.push({path:'/noticeList'})
206 
-        },
207 
-        toIncidentList(){
208 
-            this.$router.push({path:'/main/incidentList'})
209 
-        },
210 
-        toKnowList(){
211 
-            this.$router.push({path:'/knowList'})
212 
-        },
213 
-        toGuide(){
214 
-            this.$router.push({path:'/guide'})
215 
-        },
216 
-        toIncidentDetails(data){
217 
-            this.$router.push({
218 
-                name:'IncidentDetails',
219 
-                params:{
220 
-                    data:JSON.stringify(data)
221 
-                }
222 
-            })
223 
-        },
300 
+    toCheckNumber() {
301 
+      this.$router.push({ path: "/checkNumber" });
224 302 
     },
225 
-    created(){
226 
-        this.getNoticData(),
227 
-        this.getNewRapir()
303 
+    toChangePassword() {
304 
+      this.$router.push({ path: "/changePassword" });
228 305 
     },
229 
-    mounted(){
306 
+    toGuide() {
307 
+      this.$router.push({ path: "/guide" });
308 
+    },
309 
+    toIncidentDetails(data) {
310 
+      this.$router.push({
311 
+        name: "IncidentDetails",
312 
+        params: {
313 
+          data: JSON.stringify(data)
314 
+        }
315 
+      });
230 316 
     }
231 
-}
317 
+  },
318 
+  created() {
319 
+    this.getNoticData(), this.getNewRapir();
320 
+  },
321 
+  mounted() {}
322 
+};
232 323 
 </script>
233 324 
 <style scoped>
234 
-.bgColor{
235 
-    background-color: white
325 
+.bgColor {
326 
+  background-color: white;
236 327 
 }
237 
-.fle{
238 
-    display: flex;
239 
-    flex-direction:column;
240 
-    background-color: white
328 
+.fle {
329 
+  display: flex;
330 
+  flex-direction: column;
331 
+  background-color: white;
241 332 
 }
242 
-.bigBody{
243 
-    display: flex;
244 
-    flex-direction:column;
245 
-    height: 100%;
246 
-    width: 100%
333 
+.bigBody {
334 
+  display: flex;
335 
+  flex-direction: column;
336 
+  height: 100%;
337 
+  width: 100%;
247 338 
 }
248 339 
 /* 头部导航栏 */
249 
-.tav{
250 
-    height: 2rem;
251 
-    background: linear-gradient(#005395, #226CA8,#003057);
252 
-    display: flex;
253 
-    width: 100%
254 
-}
255 
-.tav div{
256 
-    flex: 1;
257 
-    text-align: center;
258 
-    display: flex;
259 
-    flex-direction:column;
260 
-    align-items:center;
261 
-    justify-content:center
262 
-}
263 
-.tav div i{
264 
-    font-size: .6rem;
265 
-    color: white
266 
-}
267 
-.tav div span{
268 
-    font-size: .32rem;
269 
-    color: white;
270 
-    display: inline-block;
271 
-    margin-top: .16rem
340 
+.tav {
341 
+  height: 2rem;
342 
+  background: linear-gradient(#005395, #226ca8, #003057);
343 
+  display: flex;
344 
+  width: 100%;
345 
+}
346 
+.tav div {
347 
+  flex: 1;
348 
+  text-align: center;
349 
+  display: flex;
350 
+  flex-direction: column;
351 
+  align-items: center;
352 
+  justify-content: center;
353 
+}
354 
+.tav div i {
355 
+  font-size: 0.6rem;
356 
+  color: white;
357 
+}
358 
+.tav div span {
359 
+  font-size: 0.32rem;
360 
+  color: white;
361 
+  display: inline-block;
362 
+  margin-top: 0.16rem;
272 363 
 }
273 364 
 /* .bigBody{
274 365 
     height: auto;
275 366 
 } */
276 367 
 /* tit导航 */
277 
-.titHead{
278 
-    display: flex;
279 
-    justify-content:space-between;
280 
-    padding: 0 .24rem;
281 
-    height: .88rem;
282 
-    line-height: .88rem;
283 
-    border-bottom: .01rem rgb(238,238,238) solid
284 
-}
285 
-.titHead1{
286 
-    height: 1rem;
287 
-}
288 
-.titHead .tit .newPapir{
289 
-    font-size: .36rem;
290 
-    color: #A37200
291 
-}
292 
-.titHead .tit .newNoticeico{
293 
-    font-size: .36rem;
294 
-    color: #005395
295 
-}
296 
-.titHead .tit span{
297 
-    display: inline-block;
298 
-    margin-left: .08rem;
299 
-    font-size: .36rem
300 
-}
301 
-.titHead .link{
302 
-    font-size: .24rem;
303 
-    color: #999999
304 
-}
305 
-.titHead .link i{
306 
-    font-size: .24rem;
307 
-    color: #999999;
308 
-    display: inline-block;
309 
-    margin-left: .08rem
368 
+.titHead {
369 
+  display: flex;
370 
+  justify-content: space-between;
371 
+  padding: 0 0.24rem;
372 
+  height: 0.88rem;
373 
+  line-height: 0.88rem;
374 
+  border-bottom: 0.01rem rgb(238, 238, 238) solid;
375 
+}
376 
+.titHead1 {
377 
+  height: 1rem;
378 
+}
379 
+.titHead .tit .newPapir {
380 
+  font-size: 0.36rem;
381 
+  color: #a37200;
382 
+}
383 
+.titHead .tit .newNoticeico {
384 
+  font-size: 0.36rem;
385 
+  color: #005395;
386 
+}
387 
+.titHead .tit span {
388 
+  display: inline-block;
389 
+  margin-left: 0.08rem;
390 
+  font-size: 0.36rem;
391 
+}
392 
+.titHead .link {
393 
+  font-size: 0.24rem;
394 
+  color: #999999;
395 
+}
396 
+.titHead .link i {
397 
+  font-size: 0.24rem;
398 
+  color: #999999;
399 
+  display: inline-block;
400 
+  margin-left: 0.08rem;
310 401 
 }
311 402 
 /* 最新报修 */
312 
-.newRepair{
313 
-    border-top: .16rem rgb(238,238,238) solid;
314 
-}
315 
-.newRepair .conentBox{
316 
-    padding: 0 .16rem;
317 
-    height: auto;
318 
-}
319 
-.newRepair .conentBox .conent{
320 
-    padding: .24rem .48rem
321 
-}
322 
-.newRepair .conentBox .conent .head{
323 
-    height: .45rem;
324 
-    line-height: .45rem
325 
-}
326 
-.newRepair .conentBox .conent .head span:nth-child(1){
327 
-    float: left;
328 
-    font-size: .32rem;
329 
-    font-weight: 400;
330 
-    color: #333333
331 
-}
332 
-.newRepair .conentBox .conent .head span:nth-child(2){
333 
-    float: right;
334 
-    font-size: .23rem;
335 
-    color: #999999
336 
-}
337 
-.newRepair .conentBox .conent .cot{
338 
-    font-size: .28rem;
339 
-    color: #666666;
340 
-    line-height: .39rem;
341 
-    margin-top: .08rem;
342 
-    display: -webkit-box;
343 
-    -webkit-line-clamp: 2;
344 
-    -webkit-box-orient: vertical;
345 
-    word-break: break-all;
346 
-    overflow: hidden;
347 
-}
348 
-.newRepair .conentBox .flowChart{
349 
-    border-top: .01rem rgb(238,238,238) solid;
350 
-    padding: .24rem 0
351 
-}
352 
-.newRepair .conentBox .flowChart .pits{
353 
-    display: flex;
354 
-    margin-top: .24rem;
355 
-    padding: 0 10%;
356 
-    position: relative
357 
-}
358 
-.newRepair .conentBox .flowChart .pits i{
359 
-    font-size: .3rem
360 
-}
361 
-.newRepair .conentBox .flowChart .pits div{
362 
-    border-top: .03rem rgb(224, 222, 222) solid;
363 
-    flex: 1
364 
-}
365 
-.newRepair .conentBox .flowChart .pits .yesLine{
366 
-    border-top: .03rem rgb(1,85,157) solid;
367 
-}
368 
-.newRepair .conentBox .flowChart .pits .no{
369 
-    color:#cccccc
370 
-}
371 
-.newRepair .conentBox .flowChart .pits .yes{
372 
-    color:#005359
373 
-}
374 
-.newRepair .conentBox .flowChart .pits .now{
375 
-    color:#48a843
376 
-}
377 
-.newRepair .conentBox .flowChart .pits .shenqing{
378 
-    position: absolute;
379 
-    left: 8%;
380 
-    top:-.12rem
381 
-}
382 
-.newRepair .conentBox .flowChart .pits .shouli{
383 
-    position: absolute;
384 
-    left: 28%;
385 
-    top:-.12rem
386 
-}
387 
-.newRepair .conentBox .flowChart .pits .chuli{
388 
-    position: absolute;
389 
-    left: 48%;
390 
-    top:-.12rem
391 
-}
392 
-.newRepair .conentBox .flowChart .pits .pingjia{
393 
-    position: absolute;
394 
-    left: 68%;
395 
-    top:-.12rem
396 
-}
397 
-.newRepair .conentBox .flowChart .pits .wancheng{
398 
-    position: absolute;
399 
-    left: 88%;
400 
-    top:-.12rem
401 
-}
402 
-.newRepair .conentBox .flowChart .words{
403 
-    display: flex;
404 
-    margin-top: .3rem
405 
-}
406 
-.newRepair .conentBox .flowChart .words div{
407 
-    flex: 1;
408 
-    font-size: .32rem;
409 
-    text-align: center;
410 
-    color:#333333
403 
+.newRepair {
404 
+  border-top: 0.16rem rgb(238, 238, 238) solid;
405 
+}
406 
+.newRepair .conentBox {
407 
+  padding: 0 0.16rem;
408 
+  height: auto;
409 
+}
410 
+.newRepair .conentBox .conent {
411 
+  padding: 0.24rem 0.48rem;
412 
+}
413 
+.newRepair .conentBox .conent .head {
414 
+  height: 0.45rem;
415 
+  line-height: 0.45rem;
416 
+}
417 
+.newRepair .conentBox .conent .head span:nth-child(1) {
418 
+  float: left;
419 
+  font-size: 0.32rem;
420 
+  font-weight: 400;
421 
+  color: #333333;
422 
+}
423 
+.newRepair .conentBox .conent .head span:nth-child(2) {
424 
+  float: right;
425 
+  font-size: 0.23rem;
426 
+  color: #999999;
427 
+}
428 
+.newRepair .conentBox .conent .cot {
429 
+  font-size: 0.28rem;
430 
+  color: #666666;
431 
+  line-height: 0.39rem;
432 
+  margin-top: 0.08rem;
433 
+  display: -webkit-box;
434 
+  -webkit-line-clamp: 2;
435 
+  -webkit-box-orient: vertical;
436 
+  word-break: break-all;
437 
+  overflow: hidden;
438 
+}
439 
+.newRepair .conentBox .flowChart {
440 
+  border-top: 0.01rem rgb(238, 238, 238) solid;
441 
+  padding: 0.24rem 0;
442 
+}
443 
+.newRepair .conentBox .flowChart .pits {
444 
+  display: flex;
445 
+  margin-top: 0.24rem;
446 
+  padding: 0 10%;
447 
+  position: relative;
448 
+}
449 
+.newRepair .conentBox .flowChart .pits i {
450 
+  font-size: 0.3rem;
451 
+}
452 
+.newRepair .conentBox .flowChart .pits div {
453 
+  border-top: 0.03rem rgb(224, 222, 222) solid;
454 
+  flex: 1;
455 
+}
456 
+.newRepair .conentBox .flowChart .pits .yesLine {
457 
+  border-top: 0.03rem rgb(1, 85, 157) solid;
458 
+}
459 
+.newRepair .conentBox .flowChart .pits .no {
460 
+  color: #cccccc;
461 
+}
462 
+.newRepair .conentBox .flowChart .pits .yes {
463 
+  color: #005359;
464 
+}
465 
+.newRepair .conentBox .flowChart .pits .now {
466 
+  color: #48a843;
467 
+}
468 
+.newRepair .conentBox .flowChart .pits .shenqing {
469 
+  position: absolute;
470 
+  left: 8%;
471 
+  top: -0.12rem;
472 
+}
473 
+.newRepair .conentBox .flowChart .pits .shouli {
474 
+  position: absolute;
475 
+  left: 28%;
476 
+  top: -0.12rem;
477 
+}
478 
+.newRepair .conentBox .flowChart .pits .chuli {
479 
+  position: absolute;
480 
+  left: 48%;
481 
+  top: -0.12rem;
482 
+}
483 
+.newRepair .conentBox .flowChart .pits .pingjia {
484 
+  position: absolute;
485 
+  left: 68%;
486 
+  top: -0.12rem;
487 
+}
488 
+.newRepair .conentBox .flowChart .pits .wancheng {
489 
+  position: absolute;
490 
+  left: 88%;
491 
+  top: -0.12rem;
492 
+}
493 
+.newRepair .conentBox .flowChart .words {
494 
+  display: flex;
495 
+  margin-top: 0.3rem;
496 
+}
497 
+.newRepair .conentBox .flowChart .words div {
498 
+  flex: 1;
499 
+  font-size: 0.32rem;
500 
+  text-align: center;
501 
+  color: #333333;
411 502 
 }
412 503 
 /* 最新公告 */
413 
-.newNotice{
414 
-    border-top: .16rem rgb(238,238,238) solid;
415 
-    height: 100%;
416 
-    display: flex;
417 
-    flex-direction:column;
418 
-    min-height: 0
419 
-}
420 
-.newNotice .conentBox{
421 
-    height: 100%;
422 
-    overflow: hidden;
423 
-    overflow-y: scroll
424 
-}
425 
-.newNotice .conentBox .conent{
426 
-    padding: .24rem .64rem;
427 
-    border-bottom: .01rem rgb(238,238,238) solid
428 
-}
429 
-.newNotice .conentBox .conent .head{
430 
-    line-height: .45rem;
431 
-    display: -webkit-box;
432 
-    -webkit-line-clamp: 2;
433 
-    -webkit-box-orient: vertical;
434 
-    word-break: break-all;
435 
-    overflow: hidden;
436 
-    font-size: .32rem;
504 
+.newNotice {
505 
+  border-top: 0.16rem rgb(238, 238, 238) solid;
506 
+  height: 100%;
507 
+  display: flex;
508 
+  flex-direction: column;
509 
+  min-height: 0;
510 
+}
511 
+.newNotice .conentBox {
512 
+  height: 100%;
513 
+  overflow: hidden;
514 
+  overflow-y: scroll;
515 
+}
516 
+.newNotice .conentBox .conent {
517 
+  padding: 0.24rem 0.64rem;
518 
+  border-bottom: 0.01rem rgb(238, 238, 238) solid;
519 
+}
520 
+.newNotice .conentBox .conent .head {
521 
+  line-height: 0.45rem;
522 
+  display: -webkit-box;
523 
+  -webkit-line-clamp: 2;
524 
+  -webkit-box-orient: vertical;
525 
+  word-break: break-all;
526 
+  overflow: hidden;
527 
+  font-size: 0.32rem;
437 528 
 }
438 529 
 /* .newNotice .conentBox .conent .head span{
439 530 
     font-size: .32rem;
440 531 
 } */
441 
-.newNotice .conentBox .conent .cot{
442 
-    font-size: .24rem;
443 
-    color: #999999;
444 
-    line-height: .34rem;
445 
-    margin-top: .08rem
446 
-}
447 
-.wushuju{
448 
-    text-align: center;
449 
-}
450 
-.wushuju img{
451 
-    width: 5.12rem;
452 
-    height: 2.84rem;
453 
-}
454 
-.loading{
455 
-    height: 2rem;
456 
-    display: flex;
457 
-    justify-content:center;
458 
-    align-items:center
532 
+.newNotice .conentBox .conent .cot {
533 
+  font-size: 0.24rem;
534 
+  color: #999999;
535 
+  line-height: 0.34rem;
536 
+  margin-top: 0.08rem;
537 
+}
538 
+.wushuju {
539 
+  text-align: center;
540 
+}
541 
+.wushuju img {
542 
+  width: 5.12rem;
543 
+  height: 2.84rem;
544 
+}
545 
+.loading {
546 
+  height: 2rem;
547 
+  display: flex;
548 
+  justify-content: center;
549 
+  align-items: center;
459 550 
 }
460 551 
 </style>

+ 539 - 0
static/font/seimin/demo.css
View File 

@@ -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 
+}

+ 234 - 0
static/font/seimin/demo_index.html
View File 

@@ -0,0 +1,234 @@
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">&#xe7b7;</span>
59 
+                <div class="name">查号</div>
60 
+                <div class="code-name">&amp;#xe7b7;</div>
61 
+              </li>
62 
+
63 
+            <li class="dib">
64 
+              <span class="icon dash">&#xe6bf;</span>
65 
+                <div class="name">修改密码</div>
66 
+                <div class="code-name">&amp;#xe6bf;</div>
67 
+              </li>
68 
+
69 
+          </ul>
70 
+          <div class="article markdown">
71 
+          <h2 id="unicode-">Unicode 引用</h2>
72 
+          <hr>
73 
+
74 
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
75 
+          <ul>
76 
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
77 
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
78 
+          </ul>
79 
+          <blockquote>
80 
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
81 
+          </blockquote>
82 
+          <p>Unicode 使用步骤如下：</p>
83 
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
84 
+<pre><code class="language-css"
85 
+>@font-face {
86 
+  font-family: 'dash';
87 
+  src: url('iconfont.woff2?t=1634696226264') format('woff2'),
88 
+       url('iconfont.woff?t=1634696226264') format('woff'),
89 
+       url('iconfont.ttf?t=1634696226264') format('truetype');
90 
+}
91 
+</code></pre>
92 
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
93 
+<pre><code class="language-css"
94 
+>.dash {
95 
+  font-family: "dash" !important;
96 
+  font-size: 16px;
97 
+  font-style: normal;
98 
+  -webkit-font-smoothing: antialiased;
99 
+  -moz-osx-font-smoothing: grayscale;
100 
+}
101 
+</code></pre>
102 
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
103 
+<pre>
104 
+<code class="language-html"
105 
+>&lt;span class="dash"&gt;&amp;#x33;&lt;/span&gt;
106 
+</code></pre>
107 
+          <blockquote>
108 
+            <p>"dash" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
109 
+          </blockquote>
110 
+          </div>
111 
+      </div>
112 
+      <div class="content font-class">
113 
+        <ul class="icon_lists dib-box">
114 
+
115 
+          <li class="dib">
116 
+            <span class="icon dash dash-chahao"></span>
117 
+            <div class="name">
118 
+              查号
119 
+            </div>
120 
+            <div class="code-name">.dash-chahao
121 
+            </div>
122 
+          </li>
123 
+
124 
+          <li class="dib">
125 
+            <span class="icon dash dash-xiugaimima"></span>
126 
+            <div class="name">
127 
+              修改密码
128 
+            </div>
129 
+            <div class="code-name">.dash-xiugaimima
130 
+            </div>
131 
+          </li>
132 
+
133 
+        </ul>
134 
+        <div class="article markdown">
135 
+        <h2 id="font-class-">font-class 引用</h2>
136 
+        <hr>
137 
+
138 
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
139 
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
140 
+        <ul>
141 
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
142 
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
143 
+        </ul>
144 
+        <p>使用步骤如下：</p>
145 
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
146 
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
147 
+</code></pre>
148 
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
149 
+<pre><code class="language-html">&lt;span class="dash dash-xxx"&gt;&lt;/span&gt;
150 
+</code></pre>
151 
+        <blockquote>
152 
+          <p>"
153 
+            dash" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
154 
+        </blockquote>
155 
+      </div>
156 
+      </div>
157 
+      <div class="content symbol">
158 
+          <ul class="icon_lists dib-box">
159 
+
160 
+            <li class="dib">
161 
+                <svg class="icon svg-icon" aria-hidden="true">
162 
+                  <use xlink:href="#dash-chahao"></use>
163 
+                </svg>
164 
+                <div class="name">查号</div>
165 
+                <div class="code-name">#dash-chahao</div>
166 
+            </li>
167 
+
168 
+            <li class="dib">
169 
+                <svg class="icon svg-icon" aria-hidden="true">
170 
+                  <use xlink:href="#dash-xiugaimima"></use>
171 
+                </svg>
172 
+                <div class="name">修改密码</div>
173 
+                <div class="code-name">#dash-xiugaimima</div>
174 
+            </li>
175 
+
176 
+          </ul>
177 
+          <div class="article markdown">
178 
+          <h2 id="symbol-">Symbol 引用</h2>
179 
+          <hr>
180 
+
181 
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
182 
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
183 
+          <ul>
184 
+            <li>支持多色图标了，不再受单色限制。</li>
185 
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
186 
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
187 
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
188 
+          </ul>
189 
+          <p>使用步骤如下：</p>
190 
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
191 
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
192 
+</code></pre>
193 
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
194 
+<pre><code class="language-html">&lt;style&gt;
195 
+.icon {
196 
+  width: 1em;
197 
+  height: 1em;
198 
+  vertical-align: -0.15em;
199 
+  fill: currentColor;
200 
+  overflow: hidden;
201 
+}
202 
+&lt;/style&gt;
203 
+</code></pre>
204 
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
205 
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
206 
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
207 
+&lt;/svg&gt;
208 
+</code></pre>
209 
+          </div>
210 
+      </div>
211 
+
212 
+    </div>
213 
+  </div>
214 
+  <script>
215 
+  $(document).ready(function () {
216 
+      $('.tab-container .content:first').show()
217 
+
218 
+      $('#tabs li').click(function (e) {
219 
+        var tabContent = $('.tab-container .content')
220 
+        var index = $(this).index()
221 
+
222 
+        if ($(this).hasClass('active')) {
223 
+          return
224 
+        } else {
225 
+          $('#tabs li').removeClass('active')
226 
+          $(this).addClass('active')
227 
+
228 
+          tabContent.hide().eq(index).fadeIn()
229 
+        }
230 
+      })
231 
+    })
232 
+  </script>
233 
+</body>
234 
+</html>

+ 23 - 0
static/font/seimin/iconfont.css
View File 

@@ -0,0 +1,23 @@
1 
+@font-face {
2 
+  font-family: "dash"; /* Project id 2879659 */
3 
+  src: url('iconfont.woff2?t=1634696226264') format('woff2'),
4 
+       url('iconfont.woff?t=1634696226264') format('woff'),
5 
+       url('iconfont.ttf?t=1634696226264') 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-chahao:before {
17 
+  content: "\e7b7";
18 
+}
19 
+
20 
+.dash-xiugaimima:before {
21 
+  content: "\e6bf";
22 
+}
23 
+

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


+ 23 - 0
static/font/seimin/iconfont.json
View File 

@@ -0,0 +1,23 @@
1 
+{
2 
+  "id": "2879659",
3 
+  "name": "ITSM（微信新）",
4 
+  "font_family": "dash",
5 
+  "css_prefix_text": "dash-",
6 
+  "description": "引入一个新的字体图标",
7 
+  "glyphs": [
8 
+    {
9 
+      "icon_id": "1788495",
10 
+      "name": "查号",
11 
+      "font_class": "chahao",
12 
+      "unicode": "e7b7",
13 
+      "unicode_decimal": 59319
14 
+    },
15 
+    {
16 
+      "icon_id": "6282784",
17 
+      "name": "修改密码",
18 
+      "font_class": "xiugaimima",
19 
+      "unicode": "e6bf",
20 
+      "unicode_decimal": 59071
21 
+    }
22 
+  ]
23 
+}

BIN
static/font/seimin/iconfont.ttf
View File


BIN
static/font/seimin/iconfont.woff
View File


BIN
static/font/seimin/iconfont.woff2
View File