xuhuajiao
/
intelligence-screen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

第二名图标

master
x_ying 3 years ago
parent
66e5c24fa9
commit
532e36e3ec
11 changed files with 297 additions and 81 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 230
      src/assets/iconfont/demo_index.html
  2. 48
      src/assets/iconfont/iconfont.css
  3. 2
      src/assets/iconfont/iconfont.js
  4. 70
      src/assets/iconfont/iconfont.json
  5. 20
      src/assets/iconfont/iconfont.svg
  6. BIN
      src/assets/iconfont/iconfont.ttf
  7. BIN
      src/assets/iconfont/iconfont.woff
  8. BIN
      src/assets/iconfont/iconfont.woff2
  9. 2
      src/views/lengingRanking.vue
  10. 2
      src/views/readStar.vue
  11. 4
      src/views/totalLending.vue

230
src/assets/iconfont/demo_index.html
View File

@ -54,6 +54,54 @@
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe636;</span>
<div class="name">no.2</div>
<div class="code-name">&amp;#xe636;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe637;</span>
<div class="name">2</div>
<div class="code-name">&amp;#xe637;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe634;</span>
<div class="name">键盘</div>
<div class="code-name">&amp;#xe634;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe630;</span>
<div class="name">关闭</div>
<div class="code-name">&amp;#xe630;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe631;</span>
<div class="name">左</div>
<div class="code-name">&amp;#xe631;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe632;</span>
<div class="name">本架图书</div>
<div class="code-name">&amp;#xe632;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe633;</span>
<div class="name">热门</div>
<div class="code-name">&amp;#xe633;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62f;</span>
<div class="name">右</div>
<div class="code-name">&amp;#xe62f;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe628;</span> <span class="icon iconfont">&#xe628;</span>
<div class="name">通知</div> <div class="name">通知</div>
@ -66,24 +114,12 @@
<div class="code-name">&amp;#xe629;</div> <div class="code-name">&amp;#xe629;</div>
</li> </li>
<li class="dib">
<span class="icon iconfont">&#xe62a;</span>
<div class="name">no.2</div>
<div class="code-name">&amp;#xe62a;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe62b;</span> <span class="icon iconfont">&#xe62b;</span>
<div class="name">no.1</div> <div class="name">no.1</div>
<div class="code-name">&amp;#xe62b;</div> <div class="code-name">&amp;#xe62b;</div>
</li> </li>
<li class="dib">
<span class="icon iconfont">&#xe62c;</span>
<div class="name">2</div>
<div class="code-name">&amp;#xe62c;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe62d;</span> <span class="icon iconfont">&#xe62d;</span>
<div class="name">3</div> <div class="name">3</div>
@ -114,10 +150,10 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1663123643053') format('woff2'),
url('iconfont.woff?t=1663123643053') format('woff'),
url('iconfont.ttf?t=1663123643053') format('truetype'),
url('iconfont.svg?t=1663123643053#iconfont') format('svg');
src: url('iconfont.woff2?t=1663379994606') format('woff2'),
url('iconfont.woff?t=1663379994606') format('woff'),
url('iconfont.ttf?t=1663379994606') format('truetype'),
url('iconfont.svg?t=1663379994606#iconfont') format('svg');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -144,47 +180,101 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-tongzhi"></span>
<span class="icon iconfont icon-a-no21"></span>
<div class="name"> <div class="name">
通知
no.2
</div> </div>
<div class="code-name">.icon-tongzhi
<div class="code-name">.icon-a-no21
</div> </div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-a-no3"></span>
<span class="icon iconfont icon-a-21"></span>
<div class="name"> <div class="name">
no.3
2
</div> </div>
<div class="code-name">.icon-a-no3
<div class="code-name">.icon-a-21
</div> </div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-a-no2"></span>
<span class="icon iconfont icon-jianpan"></span>
<div class="name"> <div class="name">
no.2
键盘
</div> </div>
<div class="code-name">.icon-a-no2
<div class="code-name">.icon-jianpan
</div> </div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-a-no1"></span>
<span class="icon iconfont icon-guanbi"></span>
<div class="name"> <div class="name">
no.1
关闭
</div> </div>
<div class="code-name">.icon-a-no1
<div class="code-name">.icon-guanbi
</div> </div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-a-2"></span>
<span class="icon iconfont icon-zuo"></span>
<div class="name"> <div class="name">
2
左
</div>
<div class="code-name">.icon-zuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-benjiatushu"></span>
<div class="name">
本架图书
</div>
<div class="code-name">.icon-benjiatushu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-remen"></span>
<div class="name">
热门
</div>
<div class="code-name">.icon-remen
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-you"></span>
<div class="name">
右
</div>
<div class="code-name">.icon-you
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tongzhi"></span>
<div class="name">
通知
</div>
<div class="code-name">.icon-tongzhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-a-no3"></span>
<div class="name">
no.3
</div>
<div class="code-name">.icon-a-no3
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-a-no1"></span>
<div class="name">
no.1
</div> </div>
<div class="code-name">.icon-a-2
<div class="code-name">.icon-a-no1
</div> </div>
</li> </li>
@ -235,42 +325,90 @@
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tongzhi"></use>
<use xlink:href="#icon-a-no21"></use>
</svg> </svg>
<div class="name">通知</div>
<div class="code-name">#icon-tongzhi</div>
<div class="name">no.2</div>
<div class="code-name">#icon-a-no21</div>
</li> </li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-no3"></use>
<use xlink:href="#icon-a-21"></use>
</svg> </svg>
<div class="name">no.3</div>
<div class="code-name">#icon-a-no3</div>
<div class="name">2</div>
<div class="code-name">#icon-a-21</div>
</li> </li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-no2"></use>
<use xlink:href="#icon-jianpan"></use>
</svg> </svg>
<div class="name">no.2</div>
<div class="code-name">#icon-a-no2</div>
<div class="name">键盘</div>
<div class="code-name">#icon-jianpan</div>
</li> </li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-no1"></use>
<use xlink:href="#icon-guanbi"></use>
</svg> </svg>
<div class="name">no.1</div>
<div class="code-name">#icon-a-no1</div>
<div class="name">关闭</div>
<div class="code-name">#icon-guanbi</div>
</li> </li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-2"></use>
<use xlink:href="#icon-zuo"></use>
</svg> </svg>
<div class="name">2</div>
<div class="code-name">#icon-a-2</div>
<div class="name">左</div>
<div class="code-name">#icon-zuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-benjiatushu"></use>
</svg>
<div class="name">本架图书</div>
<div class="code-name">#icon-benjiatushu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-remen"></use>
</svg>
<div class="name">热门</div>
<div class="code-name">#icon-remen</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-you"></use>
</svg>
<div class="name">右</div>
<div class="code-name">#icon-you</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tongzhi"></use>
</svg>
<div class="name">通知</div>
<div class="code-name">#icon-tongzhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-no3"></use>
</svg>
<div class="name">no.3</div>
<div class="code-name">#icon-a-no3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-no1"></use>
</svg>
<div class="name">no.1</div>
<div class="code-name">#icon-a-no1</div>
</li> </li>
<li class="dib"> <li class="dib">

48
src/assets/iconfont/iconfont.css
View File

@ -1,9 +1,9 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 3646564 */ font-family: "iconfont"; /* Project id 3646564 */
src: url('iconfont.woff2?t=1663123643053') format('woff2'),
url('iconfont.woff?t=1663123643053') format('woff'),
url('iconfont.ttf?t=1663123643053') format('truetype'),
url('iconfont.svg?t=1663123643053#iconfont') format('svg');
src: url('iconfont.woff2?t=1663379994606') format('woff2'),
url('iconfont.woff?t=1663379994606') format('woff'),
url('iconfont.ttf?t=1663379994606') format('truetype'),
url('iconfont.svg?t=1663379994606#iconfont') format('svg');
} }
.iconfont { .iconfont {
@ -14,6 +14,38 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-a-no21:before {
content: "\e636";
}
.icon-a-21:before {
content: "\e637";
}
.icon-jianpan:before {
content: "\e634";
}
.icon-guanbi:before {
content: "\e630";
}
.icon-zuo:before {
content: "\e631";
}
.icon-benjiatushu:before {
content: "\e632";
}
.icon-remen:before {
content: "\e633";
}
.icon-you:before {
content: "\e62f";
}
.icon-tongzhi:before { .icon-tongzhi:before {
content: "\e628"; content: "\e628";
} }
@ -22,18 +54,10 @@
content: "\e629"; content: "\e629";
} }
.icon-a-no2:before {
content: "\e62a";
}
.icon-a-no1:before { .icon-a-no1:before {
content: "\e62b"; content: "\e62b";
} }
.icon-a-2:before {
content: "\e62c";
}
.icon-a-3:before { .icon-a-3:before {
content: "\e62d"; content: "\e62d";
} }

2
src/assets/iconfont/iconfont.js
File diff suppressed because it is too large
View File

70
src/assets/iconfont/iconfont.json
View File

@ -5,6 +5,62 @@
"css_prefix_text": "icon-", "css_prefix_text": "icon-",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "31879702",
"name": "no.2",
"font_class": "a-no21",
"unicode": "e636",
"unicode_decimal": 58934
},
{
"icon_id": "31879708",
"name": "2",
"font_class": "a-21",
"unicode": "e637",
"unicode_decimal": 58935
},
{
"icon_id": "31879044",
"name": "键盘",
"font_class": "jianpan",
"unicode": "e634",
"unicode_decimal": 58932
},
{
"icon_id": "31859389",
"name": "关闭",
"font_class": "guanbi",
"unicode": "e630",
"unicode_decimal": 58928
},
{
"icon_id": "31859390",
"name": "左",
"font_class": "zuo",
"unicode": "e631",
"unicode_decimal": 58929
},
{
"icon_id": "31859393",
"name": "本架图书",
"font_class": "benjiatushu",
"unicode": "e632",
"unicode_decimal": 58930
},
{
"icon_id": "31859394",
"name": "热门",
"font_class": "remen",
"unicode": "e633",
"unicode_decimal": 58931
},
{
"icon_id": "31859388",
"name": "右",
"font_class": "you",
"unicode": "e62f",
"unicode_decimal": 58927
},
{ {
"icon_id": "31804863", "icon_id": "31804863",
"name": "通知", "name": "通知",
@ -19,13 +75,6 @@
"unicode": "e629", "unicode": "e629",
"unicode_decimal": 58921 "unicode_decimal": 58921
}, },
{
"icon_id": "31804865",
"name": "no.2",
"font_class": "a-no2",
"unicode": "e62a",
"unicode_decimal": 58922
},
{ {
"icon_id": "31804866", "icon_id": "31804866",
"name": "no.1", "name": "no.1",
@ -33,13 +82,6 @@
"unicode": "e62b", "unicode": "e62b",
"unicode_decimal": 58923 "unicode_decimal": 58923
}, },
{
"icon_id": "31804867",
"name": "2",
"font_class": "a-2",
"unicode": "e62c",
"unicode_decimal": 58924
},
{ {
"icon_id": "31804868", "icon_id": "31804868",
"name": "3", "name": "3",

20
src/assets/iconfont/iconfont.svg
File diff suppressed because it is too large
View File

BIN
src/assets/iconfont/iconfont.ttf
View File

BIN
src/assets/iconfont/iconfont.woff
View File

BIN
src/assets/iconfont/iconfont.woff2
View File

2
src/views/lengingRanking.vue
View File

@ -14,7 +14,7 @@
<use xlink:href="#icon-a-no1" /> <use xlink:href="#icon-a-no1" />
</svg> </svg>
<svg v-if="item.ranking === 2" class="icon" aria-hidden="true"> <svg v-if="item.ranking === 2" class="icon" aria-hidden="true">
<use xlink:href="#icon-a-no2" />
<use xlink:href="#icon-a-no21" />
</svg> </svg>
<svg v-if="item.ranking === 3" class="icon" aria-hidden="true"> <svg v-if="item.ranking === 3" class="icon" aria-hidden="true">
<use xlink:href="#icon-a-no3" /> <use xlink:href="#icon-a-no3" />

2
src/views/readStar.vue
View File

@ -8,7 +8,7 @@
<use xlink:href="#icon-a-1" /> <use xlink:href="#icon-a-1" />
</svg> </svg>
<svg v-else-if="item.ranking === 2" class="icon icon-star-2" aria-hidden="true"> <svg v-else-if="item.ranking === 2" class="icon icon-star-2" aria-hidden="true">
<use xlink:href="#icon-a-2" />
<use xlink:href="#icon-a-21" />
</svg> </svg>
<svg v-else-if="item.ranking === 3" class="icon icon-star-3" aria-hidden="true"> <svg v-else-if="item.ranking === 3" class="icon icon-star-3" aria-hidden="true">
<use xlink:href="#icon-a-3" /> <use xlink:href="#icon-a-3" />

4
src/views/totalLending.vue
View File

@ -52,10 +52,10 @@ export default {
}, },
toOrderNum(num) { toOrderNum(num) {
num = num.toString() // 数字变成字符串 num = num.toString() // 数字变成字符串
if (num.length < 6) { // 如未满位数，添加"0"补位
if (num.length < 9) { // 如未满位数，添加"0"补位
num = '0' + num num = '0' + num
this.toOrderNum(num) // 递归添加"0"补位 this.toOrderNum(num) // 递归添加"0"补位
} else if (num.length === 6) { // 数中加入逗号
} else if (num.length === 9) { // 数中加入逗号
this.chartNum = num.split('') // 将其便变成数据 this.chartNum = num.split('') // 将其便变成数据
} else { } else {
alert('显示异常') alert('显示异常')

Write Preview
Loading…
Cancel
Save