13 changed files with 1227 additions and 2432 deletions
-
539src/assets/iconfont/demo.css
-
488src/assets/iconfont/demo_index.html
-
13src/assets/styles/index.scss
-
5src/views/accessToLibrary/index.vue
-
82src/views/index.vue
-
68src/views/indexSelfService.vue
-
104src/views/lengingRanking/index-old.vue
-
104src/views/lengingRanking/index.vue
-
1021src/views/newBookRecommend/data.json
-
624src/views/newBookRecommend/index.vue
-
202src/views/readStar/index-height.vue
-
3src/views/video/index.vue
@ -1,539 +0,0 @@ |
|||
/* Logo 字体 */ |
|||
@font-face { |
|||
font-family: "iconfont logo"; |
|||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
|||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
|||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
|||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
|||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
|||
} |
|||
|
|||
.logo { |
|||
font-family: "iconfont logo"; |
|||
font-size: 160px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
/* tabs */ |
|||
.nav-tabs { |
|||
position: relative; |
|||
} |
|||
|
|||
.nav-tabs .nav-more { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
height: 42px; |
|||
line-height: 42px; |
|||
color: #666; |
|||
} |
|||
|
|||
#tabs { |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
|
|||
#tabs li { |
|||
cursor: pointer; |
|||
width: 100px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
text-align: center; |
|||
font-size: 16px; |
|||
border-bottom: 2px solid transparent; |
|||
position: relative; |
|||
z-index: 1; |
|||
margin-bottom: -1px; |
|||
color: #666; |
|||
} |
|||
|
|||
|
|||
#tabs .active { |
|||
border-bottom-color: #f00; |
|||
color: #222; |
|||
} |
|||
|
|||
.tab-container .content { |
|||
display: none; |
|||
} |
|||
|
|||
/* 页面布局 */ |
|||
.main { |
|||
padding: 30px 100px; |
|||
width: 960px; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.main .logo { |
|||
color: #333; |
|||
text-align: left; |
|||
margin-bottom: 30px; |
|||
line-height: 1; |
|||
height: 110px; |
|||
margin-top: -50px; |
|||
overflow: hidden; |
|||
*zoom: 1; |
|||
} |
|||
|
|||
.main .logo a { |
|||
font-size: 160px; |
|||
color: #333; |
|||
} |
|||
|
|||
.helps { |
|||
margin-top: 40px; |
|||
} |
|||
|
|||
.helps pre { |
|||
padding: 20px; |
|||
margin: 10px 0; |
|||
border: solid 1px #e7e1cd; |
|||
background-color: #fffdef; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.icon_lists { |
|||
width: 100% !important; |
|||
overflow: hidden; |
|||
*zoom: 1; |
|||
} |
|||
|
|||
.icon_lists li { |
|||
width: 100px; |
|||
margin-bottom: 10px; |
|||
margin-right: 20px; |
|||
text-align: center; |
|||
list-style: none !important; |
|||
cursor: default; |
|||
} |
|||
|
|||
.icon_lists li .code-name { |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
.icon_lists .icon { |
|||
display: block; |
|||
height: 100px; |
|||
line-height: 100px; |
|||
font-size: 42px; |
|||
margin: 10px auto; |
|||
color: #333; |
|||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
|||
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
|||
transition: font-size 0.25s linear, width 0.25s linear; |
|||
} |
|||
|
|||
.icon_lists .icon:hover { |
|||
font-size: 100px; |
|||
} |
|||
|
|||
.icon_lists .svg-icon { |
|||
/* 通过设置 font-size 来改变图标大小 */ |
|||
width: 1em; |
|||
/* 图标和文字相邻时，垂直对齐 */ |
|||
vertical-align: -0.15em; |
|||
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
|||
fill: currentColor; |
|||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
|||
normalize.css 中也包含这行 */ |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.icon_lists li .name, |
|||
.icon_lists li .code-name { |
|||
color: #666; |
|||
} |
|||
|
|||
/* markdown 样式 */ |
|||
.markdown { |
|||
color: #666; |
|||
font-size: 14px; |
|||
line-height: 1.8; |
|||
} |
|||
|
|||
.highlight { |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
.markdown img { |
|||
vertical-align: middle; |
|||
max-width: 100%; |
|||
} |
|||
|
|||
.markdown h1 { |
|||
color: #404040; |
|||
font-weight: 500; |
|||
line-height: 40px; |
|||
margin-bottom: 24px; |
|||
} |
|||
|
|||
.markdown h2, |
|||
.markdown h3, |
|||
.markdown h4, |
|||
.markdown h5, |
|||
.markdown h6 { |
|||
color: #404040; |
|||
margin: 1.6em 0 0.6em 0; |
|||
font-weight: 500; |
|||
clear: both; |
|||
} |
|||
|
|||
.markdown h1 { |
|||
font-size: 28px; |
|||
} |
|||
|
|||
.markdown h2 { |
|||
font-size: 22px; |
|||
} |
|||
|
|||
.markdown h3 { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.markdown h4 { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.markdown h5 { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.markdown h6 { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.markdown hr { |
|||
height: 1px; |
|||
border: 0; |
|||
background: #e9e9e9; |
|||
margin: 16px 0; |
|||
clear: both; |
|||
} |
|||
|
|||
.markdown p { |
|||
margin: 1em 0; |
|||
} |
|||
|
|||
.markdown>p, |
|||
.markdown>blockquote, |
|||
.markdown>.highlight, |
|||
.markdown>ol, |
|||
.markdown>ul { |
|||
width: 80%; |
|||
} |
|||
|
|||
.markdown ul>li { |
|||
list-style: circle; |
|||
} |
|||
|
|||
.markdown>ul li, |
|||
.markdown blockquote ul>li { |
|||
margin-left: 20px; |
|||
padding-left: 4px; |
|||
} |
|||
|
|||
.markdown>ul li p, |
|||
.markdown>ol li p { |
|||
margin: 0.6em 0; |
|||
} |
|||
|
|||
.markdown ol>li { |
|||
list-style: decimal; |
|||
} |
|||
|
|||
.markdown>ol li, |
|||
.markdown blockquote ol>li { |
|||
margin-left: 20px; |
|||
padding-left: 4px; |
|||
} |
|||
|
|||
.markdown code { |
|||
margin: 0 3px; |
|||
padding: 0 5px; |
|||
background: #eee; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
.markdown strong, |
|||
.markdown b { |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.markdown>table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0px; |
|||
empty-cells: show; |
|||
border: 1px solid #e9e9e9; |
|||
width: 95%; |
|||
margin-bottom: 24px; |
|||
} |
|||
|
|||
.markdown>table th { |
|||
white-space: nowrap; |
|||
color: #333; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.markdown>table th, |
|||
.markdown>table td { |
|||
border: 1px solid #e9e9e9; |
|||
padding: 8px 16px; |
|||
text-align: left; |
|||
} |
|||
|
|||
.markdown>table th { |
|||
background: #F7F7F7; |
|||
} |
|||
|
|||
.markdown blockquote { |
|||
font-size: 90%; |
|||
color: #999; |
|||
border-left: 4px solid #e9e9e9; |
|||
padding-left: 0.8em; |
|||
margin: 1em 0; |
|||
} |
|||
|
|||
.markdown blockquote p { |
|||
margin: 0; |
|||
} |
|||
|
|||
.markdown .anchor { |
|||
opacity: 0; |
|||
transition: opacity 0.3s ease; |
|||
margin-left: 8px; |
|||
} |
|||
|
|||
.markdown .waiting { |
|||
color: #ccc; |
|||
} |
|||
|
|||
.markdown h1:hover .anchor, |
|||
.markdown h2:hover .anchor, |
|||
.markdown h3:hover .anchor, |
|||
.markdown h4:hover .anchor, |
|||
.markdown h5:hover .anchor, |
|||
.markdown h6:hover .anchor { |
|||
opacity: 1; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.markdown>br, |
|||
.markdown>p>br { |
|||
clear: both; |
|||
} |
|||
|
|||
|
|||
.hljs { |
|||
display: block; |
|||
background: white; |
|||
padding: 0.5em; |
|||
color: #333333; |
|||
overflow-x: auto; |
|||
} |
|||
|
|||
.hljs-comment, |
|||
.hljs-meta { |
|||
color: #969896; |
|||
} |
|||
|
|||
.hljs-string, |
|||
.hljs-variable, |
|||
.hljs-template-variable, |
|||
.hljs-strong, |
|||
.hljs-emphasis, |
|||
.hljs-quote { |
|||
color: #df5000; |
|||
} |
|||
|
|||
.hljs-keyword, |
|||
.hljs-selector-tag, |
|||
.hljs-type { |
|||
color: #a71d5d; |
|||
} |
|||
|
|||
.hljs-literal, |
|||
.hljs-symbol, |
|||
.hljs-bullet, |
|||
.hljs-attribute { |
|||
color: #0086b3; |
|||
} |
|||
|
|||
.hljs-section, |
|||
.hljs-name { |
|||
color: #63a35c; |
|||
} |
|||
|
|||
.hljs-tag { |
|||
color: #333333; |
|||
} |
|||
|
|||
.hljs-title, |
|||
.hljs-attr, |
|||
.hljs-selector-id, |
|||
.hljs-selector-class, |
|||
.hljs-selector-attr, |
|||
.hljs-selector-pseudo { |
|||
color: #795da3; |
|||
} |
|||
|
|||
.hljs-addition { |
|||
color: #55a532; |
|||
background-color: #eaffea; |
|||
} |
|||
|
|||
.hljs-deletion { |
|||
color: #bd2c00; |
|||
background-color: #ffecec; |
|||
} |
|||
|
|||
.hljs-link { |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
/* 代码高亮 */ |
|||
/* PrismJS 1.15.0 |
|||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
|||
/** |
|||
* prism.js default theme for JavaScript, CSS and HTML |
|||
* Based on dabblet (http://dabblet.com) |
|||
* @author Lea Verou |
|||
*/ |
|||
code[class*="language-"], |
|||
pre[class*="language-"] { |
|||
color: black; |
|||
background: none; |
|||
text-shadow: 0 1px white; |
|||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
|||
text-align: left; |
|||
white-space: pre; |
|||
word-spacing: normal; |
|||
word-break: normal; |
|||
word-wrap: normal; |
|||
line-height: 1.5; |
|||
|
|||
-moz-tab-size: 4; |
|||
-o-tab-size: 4; |
|||
tab-size: 4; |
|||
|
|||
-webkit-hyphens: none; |
|||
-moz-hyphens: none; |
|||
-ms-hyphens: none; |
|||
hyphens: none; |
|||
} |
|||
|
|||
pre[class*="language-"]::-moz-selection, |
|||
pre[class*="language-"] ::-moz-selection, |
|||
code[class*="language-"]::-moz-selection, |
|||
code[class*="language-"] ::-moz-selection { |
|||
text-shadow: none; |
|||
background: #b3d4fc; |
|||
} |
|||
|
|||
pre[class*="language-"]::selection, |
|||
pre[class*="language-"] ::selection, |
|||
code[class*="language-"]::selection, |
|||
code[class*="language-"] ::selection { |
|||
text-shadow: none; |
|||
background: #b3d4fc; |
|||
} |
|||
|
|||
@media print { |
|||
|
|||
code[class*="language-"], |
|||
pre[class*="language-"] { |
|||
text-shadow: none; |
|||
} |
|||
} |
|||
|
|||
/* Code blocks */ |
|||
pre[class*="language-"] { |
|||
padding: 1em; |
|||
margin: .5em 0; |
|||
overflow: auto; |
|||
} |
|||
|
|||
:not(pre)>code[class*="language-"], |
|||
pre[class*="language-"] { |
|||
background: #f5f2f0; |
|||
} |
|||
|
|||
/* Inline code */ |
|||
:not(pre)>code[class*="language-"] { |
|||
padding: .1em; |
|||
border-radius: .3em; |
|||
white-space: normal; |
|||
} |
|||
|
|||
.token.comment, |
|||
.token.prolog, |
|||
.token.doctype, |
|||
.token.cdata { |
|||
color: slategray; |
|||
} |
|||
|
|||
.token.punctuation { |
|||
color: #999; |
|||
} |
|||
|
|||
.namespace { |
|||
opacity: .7; |
|||
} |
|||
|
|||
.token.property, |
|||
.token.tag, |
|||
.token.boolean, |
|||
.token.number, |
|||
.token.constant, |
|||
.token.symbol, |
|||
.token.deleted { |
|||
color: #905; |
|||
} |
|||
|
|||
.token.selector, |
|||
.token.attr-name, |
|||
.token.string, |
|||
.token.char, |
|||
.token.builtin, |
|||
.token.inserted { |
|||
color: #690; |
|||
} |
|||
|
|||
.token.operator, |
|||
.token.entity, |
|||
.token.url, |
|||
.language-css .token.string, |
|||
.style .token.string { |
|||
color: #9a6e3a; |
|||
background: hsla(0, 0%, 100%, .5); |
|||
} |
|||
|
|||
.token.atrule, |
|||
.token.attr-value, |
|||
.token.keyword { |
|||
color: #07a; |
|||
} |
|||
|
|||
.token.function, |
|||
.token.class-name { |
|||
color: #DD4A68; |
|||
} |
|||
|
|||
.token.regex, |
|||
.token.important, |
|||
.token.variable { |
|||
color: #e90; |
|||
} |
|||
|
|||
.token.important, |
|||
.token.bold { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.token.italic { |
|||
font-style: italic; |
|||
} |
|||
|
|||
.token.entity { |
|||
cursor: help; |
|||
} |
|||
@ -1,488 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"/> |
|||
<title>iconfont Demo</title> |
|||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/> |
|||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/> |
|||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
|||
<link rel="stylesheet" href="demo.css"> |
|||
<link rel="stylesheet" href="iconfont.css"> |
|||
<script src="iconfont.js"></script> |
|||
<!-- jQuery --> |
|||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
|||
<!-- 代码高亮 --> |
|||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
|||
<style> |
|||
.main .logo { |
|||
margin-top: 0; |
|||
height: auto; |
|||
} |
|||
|
|||
.main .logo a { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.main .logo .sub-title { |
|||
margin-left: 0.5em; |
|||
font-size: 22px; |
|||
color: #fff; |
|||
background: linear-gradient(-45deg, #3967FF, #B500FE); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="main"> |
|||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"> |
|||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"> |
|||
|
|||
</a></h1> |
|||
<div class="nav-tabs"> |
|||
<ul id="tabs" class="dib-box"> |
|||
<li class="dib active"><span>Unicode</span></li> |
|||
<li class="dib"><span>Font class</span></li> |
|||
<li class="dib"><span>Symbol</span></li> |
|||
</ul> |
|||
|
|||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3646564" target="_blank" class="nav-more">查看项目</a> |
|||
|
|||
</div> |
|||
<div class="tab-container"> |
|||
<div class="content unicode" style="display: block;"> |
|||
<ul class="icon_lists dib-box"> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">no.2</div> |
|||
<div class="code-name">&#xe636;</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">2</div> |
|||
<div class="code-name">&#xe637;</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">键盘</div> |
|||
<div class="code-name">&#xe634;</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">关闭</div> |
|||
<div class="code-name">&#xe630;</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">左</div> |
|||
<div class="code-name">&#xe631;</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">本架图书</div> |
|||
<div class="code-name">&#xe632;</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">热门</div> |
|||
<div class="code-name">&#xe633;</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">右</div> |
|||
<div class="code-name">&#xe62f;</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">通知</div> |
|||
<div class="code-name">&#xe628;</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">no.3</div> |
|||
<div class="code-name">&#xe629;</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">no.1</div> |
|||
<div class="code-name">&#xe62b;</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">3</div> |
|||
<div class="code-name">&#xe62d;</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">1</div> |
|||
<div class="code-name">&#xe62e;</div> |
|||
</li> |
|||
|
|||
</ul> |
|||
<div class="article markdown"> |
|||
<h2 id="unicode-">Unicode 引用</h2> |
|||
<hr> |
|||
|
|||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> |
|||
<ul> |
|||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li> |
|||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li> |
|||
</ul> |
|||
<blockquote> |
|||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p> |
|||
</blockquote> |
|||
<p>Unicode 使用步骤如下：</p> |
|||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> |
|||
<pre><code class="language-css" |
|||
>@font-face { |
|||
font-family: 'iconfont'; |
|||
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> |
|||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
|||
<pre><code class="language-css" |
|||
>.iconfont { |
|||
font-family: "iconfont" !important; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
</code></pre> |
|||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
|||
<pre> |
|||
<code class="language-html" |
|||
><span class="iconfont">&#x33;</span> |
|||
</code></pre> |
|||
<blockquote> |
|||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
|||
</blockquote> |
|||
</div> |
|||
</div> |
|||
<div class="content font-class"> |
|||
<ul class="icon_lists dib-box"> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont icon-a-no21"></span> |
|||
<div class="name"> |
|||
no.2 |
|||
</div> |
|||
<div class="code-name">.icon-a-no21 |
|||
</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont icon-a-21"></span> |
|||
<div class="name"> |
|||
2 |
|||
</div> |
|||
<div class="code-name">.icon-a-21 |
|||
</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont icon-jianpan"></span> |
|||
<div class="name"> |
|||
键盘 |
|||
</div> |
|||
<div class="code-name">.icon-jianpan |
|||
</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont icon-guanbi"></span> |
|||
<div class="name"> |
|||
关闭 |
|||
</div> |
|||
<div class="code-name">.icon-guanbi |
|||
</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont icon-zuo"></span> |
|||
<div class="name"> |
|||
左 |
|||
</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 class="code-name">.icon-a-no1 |
|||
</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont icon-a-3"></span> |
|||
<div class="name"> |
|||
3 |
|||
</div> |
|||
<div class="code-name">.icon-a-3 |
|||
</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont icon-a-1"></span> |
|||
<div class="name"> |
|||
1 |
|||
</div> |
|||
<div class="code-name">.icon-a-1 |
|||
</div> |
|||
</li> |
|||
|
|||
</ul> |
|||
<div class="article markdown"> |
|||
<h2 id="font-class-">font-class 引用</h2> |
|||
<hr> |
|||
|
|||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> |
|||
<p>与 Unicode 使用方式相比，具有如下特点：</p> |
|||
<ul> |
|||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> |
|||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> |
|||
</ul> |
|||
<p>使用步骤如下：</p> |
|||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> |
|||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
|||
</code></pre> |
|||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> |
|||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
|||
</code></pre> |
|||
<blockquote> |
|||
<p>" |
|||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
|||
</blockquote> |
|||
</div> |
|||
</div> |
|||
<div class="content symbol"> |
|||
<ul class="icon_lists dib-box"> |
|||
|
|||
<li class="dib"> |
|||
<svg class="icon svg-icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-no21"></use> |
|||
</svg> |
|||
<div class="name">no.2</div> |
|||
<div class="code-name">#icon-a-no21</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<svg class="icon svg-icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-21"></use> |
|||
</svg> |
|||
<div class="name">2</div> |
|||
<div class="code-name">#icon-a-21</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<svg class="icon svg-icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-jianpan"></use> |
|||
</svg> |
|||
<div class="name">键盘</div> |
|||
<div class="code-name">#icon-jianpan</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<svg class="icon svg-icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-guanbi"></use> |
|||
</svg> |
|||
<div class="name">关闭</div> |
|||
<div class="code-name">#icon-guanbi</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<svg class="icon svg-icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-zuo"></use> |
|||
</svg> |
|||
<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 class="dib"> |
|||
<svg class="icon svg-icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-3"></use> |
|||
</svg> |
|||
<div class="name">3</div> |
|||
<div class="code-name">#icon-a-3</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<svg class="icon svg-icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-1"></use> |
|||
</svg> |
|||
<div class="name">1</div> |
|||
<div class="code-name">#icon-a-1</div> |
|||
</li> |
|||
|
|||
</ul> |
|||
<div class="article markdown"> |
|||
<h2 id="symbol-">Symbol 引用</h2> |
|||
<hr> |
|||
|
|||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
|||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> |
|||
<ul> |
|||
<li>支持多色图标了，不再受单色限制。</li> |
|||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
|||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li> |
|||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li> |
|||
</ul> |
|||
<p>使用步骤如下：</p> |
|||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> |
|||
<pre><code class="language-html"><script src="./iconfont.js"></script> |
|||
</code></pre> |
|||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> |
|||
<pre><code class="language-html"><style> |
|||
.icon { |
|||
width: 1em; |
|||
height: 1em; |
|||
vertical-align: -0.15em; |
|||
fill: currentColor; |
|||
overflow: hidden; |
|||
} |
|||
</style> |
|||
</code></pre> |
|||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> |
|||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-xxx"></use> |
|||
</svg> |
|||
</code></pre> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<script> |
|||
$(document).ready(function () { |
|||
$('.tab-container .content:first').show() |
|||
|
|||
$('#tabs li').click(function (e) { |
|||
var tabContent = $('.tab-container .content') |
|||
var index = $(this).index() |
|||
|
|||
if ($(this).hasClass('active')) { |
|||
return |
|||
} else { |
|||
$('#tabs li').removeClass('active') |
|||
$(this).addClass('active') |
|||
|
|||
tabContent.hide().eq(index).fadeIn() |
|||
} |
|||
}) |
|||
}) |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,104 @@ |
|||
<template> |
|||
<!-- 借阅排行榜 --> |
|||
<div class="screen-item lending-ranking"> |
|||
<div class="common-title">借阅排行榜</div> |
|||
<vue-seamless-scroll |
|||
ref="listData" |
|||
:data="rankingList" |
|||
:class-option="defaultOption" |
|||
class="big-module module-content" |
|||
> |
|||
<div |
|||
v-for="(item, index) in rankingList" |
|||
:key="index" |
|||
class="book-list-item" |
|||
> |
|||
<div class="book-img"> |
|||
<img :src="item.cover" :onerror="defaultImg"> |
|||
</div> |
|||
<div class="book-info"> |
|||
<h4 class="title-item">{{ item.bookName }}</h4> |
|||
<p>{{ item.author }}</p> |
|||
</div> |
|||
<div class="ranking-num"> |
|||
<svg v-if="index === 0" class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-no1" /> |
|||
</svg> |
|||
<svg v-if="index === 1" class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-no21" /> |
|||
</svg> |
|||
<svg v-if="index === 2" class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-no3" /> |
|||
</svg> |
|||
<p>NO.{{ index + 1 }}</p> |
|||
</div> |
|||
</div> |
|||
</vue-seamless-scroll> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchBorrowRank, FetchCoverByISBN } from '@/api/library' |
|||
|
|||
export default { |
|||
name: 'LengingRanking', |
|||
data() { |
|||
return { |
|||
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
|||
rankingList: [] |
|||
} |
|||
}, |
|||
computed: { |
|||
defaultOption() { |
|||
return { |
|||
step: 1.1, // 滚动的速度 |
|||
hoverStop: false, // 是否开启鼠标悬停stop |
|||
singleHeight: 102, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
|||
openWatch: true, |
|||
waitTime: 2000 // 单步运动停止的时间(默认值1000ms) |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.getBorrowRank() |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
getBorrowRank() { |
|||
FetchBorrowRank().then((res) => { |
|||
if (res.errCode === 0) { |
|||
let data = [] |
|||
data = res.data |
|||
data.forEach(item => { |
|||
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
|||
}) |
|||
} else { |
|||
this.$message.error('接口错误') |
|||
} |
|||
}) |
|||
}, |
|||
getCoverByISBN(isbn, item) { |
|||
const params = { |
|||
isbn: isbn |
|||
} |
|||
FetchCoverByISBN(params).then((res) => { |
|||
console.log('RES', res) |
|||
if (res) { |
|||
// item.cover = window.URL.createObjectURL(res) |
|||
item.cover = res |
|||
} else { |
|||
item.cover = '' |
|||
} |
|||
console.log(item.cover) |
|||
this.rankingList.push(item) |
|||
this.$refs.listData.reset() |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~@/assets/styles/index.scss'; |
|||
</style> |
|||
1021
src/views/newBookRecommend/data.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,202 @@ |
|||
<template> |
|||
<!-- 新书推荐 --> |
|||
<div class="screen-item read-star"> |
|||
<div class="common-title">阅读之星</div> |
|||
<div ref="starList" class="medium-module module-content" :style="{ height: containerHeight + 'px' }"> |
|||
<div v-for="(item,index) in readstarList" :key="index" :class="['readstart-item', {'star1-bg':index === 0}, {'star2-bg':index === 1}, {'star3-bg':index === 2}]"> |
|||
<svg v-if="index === 0" class="icon icon-star-1" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-1" /> |
|||
</svg> |
|||
<svg v-else-if="index === 1" class="icon icon-star-2" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-21" /> |
|||
</svg> |
|||
<svg v-else-if="index === 2" class="icon icon-star-3" aria-hidden="true"> |
|||
<use xlink:href="#icon-a-3" /> |
|||
</svg> |
|||
<span v-else class="star-num">{{ index+1 }}</span> |
|||
<p class="star-info title-item"> 读者{{ item.RDNAME }}近30天借阅图书{{ item.TOTALNUM }}册</p> |
|||
<p class="star-date">{{ mondayDate }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchBorrowStar, FetchReadRanking } from '@/api/library' |
|||
// import { parseTime } from '@/utils/index.js' |
|||
export default { |
|||
name: 'ReadStar', |
|||
props: { |
|||
containerHeight: { |
|||
type: Number, |
|||
default: 0 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
readstarList: [], |
|||
mondayDate: null |
|||
} |
|||
}, |
|||
watch: { |
|||
// 监听父组件高度变化 |
|||
containerHeight(newVal) { |
|||
if (newVal > 0) { |
|||
this.calcDynamicSize(newVal) |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
this.getReadRanking() |
|||
if (this.containerHeight > 0) { |
|||
this.calcDynamicSize(this.containerHeight) |
|||
} |
|||
}, |
|||
methods: { |
|||
updateHeight(height) { |
|||
this.calcDynamicSize(height) |
|||
}, |
|||
// 核心：根据容器高度计算动态尺寸 |
|||
calcDynamicSize(containerHeight) { |
|||
// 容器高度转rem（假设1rem=100px，根据项目基准调整） |
|||
const containerRem = containerHeight / 100 || 6.8125 |
|||
|
|||
// 单行高度 = 容器高度 / 列表项数量（假设默认3项） |
|||
this.itemHeight = containerRem / 3 || 0.5 |
|||
|
|||
// 基础字体大小 = 容器高度的 2.8% |
|||
this.baseFontSize = containerRem * 0.028 || 0.2 |
|||
this.infoFontSize = containerRem * 0.03 || 0.2 |
|||
|
|||
// 图标尺寸 = 容器高度的 5% |
|||
this.iconSize = containerRem * 0.05 || 0.35 |
|||
this.iconMargin = containerRem * 0.007 || 0.05 |
|||
|
|||
// 排名数字尺寸 = 容器高度的 3.5% |
|||
this.numSize = containerRem * 0.035 || 0.25 |
|||
this.numFontSize = containerRem * 0.028 || 0.2 |
|||
this.numMargin = containerRem * 0.035 || 0.25 |
|||
|
|||
// 内边距 = 容器高度的 1.8% |
|||
this.paddingSize = containerRem * 0.018 || 0.125 |
|||
}, formatDateTime(date, type) { |
|||
const year = date.getFullYear() |
|||
const month = String(date.getMonth() + 1).padStart(2, '0') |
|||
const day = String(date.getDate()).padStart(2, '0') |
|||
|
|||
let timePart = '00:00:00' |
|||
if (type === 'end') { |
|||
timePart = '23:59:59' |
|||
} |
|||
|
|||
return `${year}-${month}-${day} ${timePart}` |
|||
}, |
|||
getReadRanking() { |
|||
// const currentDate = new Date() // 获取当前日期 |
|||
// currentDate.setDate(currentDate.getDate() - 30) // 将当前日期减去30天 |
|||
// const year = currentDate.getFullYear() // 获取年份 |
|||
// const month = currentDate.getMonth() + 1 // 获取月份（注意月份从0开始，需要加1） |
|||
// const day = currentDate.getDate() // 获取日期 |
|||
// const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}` |
|||
|
|||
// const params = { |
|||
// 'libcode': this.libcode, |
|||
// 'starttime': formattedDate, |
|||
// 'endtime': this.getFormattedDate(new Date()), |
|||
// 'rownum': 6, |
|||
// 'nordtype': 'JXTSG_E' |
|||
// } |
|||
|
|||
// 获取当前日期 |
|||
const currentDate = new Date() |
|||
currentDate.setDate(currentDate.getDate() - 30) // 将当前日期减去30天 |
|||
|
|||
// 获取开始日期（格式：YYYY-MM-DD 00:00:00） |
|||
const startDate = encodeURIComponent(this.formatDateTime(currentDate, 'start')) |
|||
|
|||
// 获取结束日期（格式：YYYY-MM-DD 23:59:59） |
|||
const endDate = encodeURIComponent(this.formatDateTime(new Date(), 'end')) |
|||
|
|||
const params = { |
|||
'libcode': this.libcode, |
|||
'starttime': startDate, |
|||
'endtime': endDate, |
|||
'rownum': 6, |
|||
'nordtype': 'JXTSG_E' |
|||
} |
|||
|
|||
FetchReadRanking(params).then(res => { |
|||
const result = JSON.parse(res.data) |
|||
|
|||
if (result.success && result.resultlist.length > 0) { |
|||
this.readstarList = result.resultlist.sort((a, b) => b.TOTALNUM - a.TOTALNUM).slice(0, 10) |
|||
// this.rankingDataComputed() |
|||
|
|||
// this.rankInterval = setInterval(() => { |
|||
// this.currentHover = (this.currentHover + 1) % this.rankingData.length |
|||
// }, 1000) |
|||
console.log('this.readstarList', this.readstarList) |
|||
this.getMondayDate() |
|||
} else { |
|||
throw new Error('Failed' + this.libcode) |
|||
} |
|||
}).catch(error => { |
|||
console.error('Error', error) |
|||
return null |
|||
}) |
|||
}, |
|||
// 获取list |
|||
getBorrowStar() { |
|||
FetchBorrowStar().then(res => { |
|||
if (res.errCode === 0) { |
|||
console.log(res) |
|||
this.readstarList = res.data |
|||
this.getMondayDate() |
|||
} else { |
|||
this.$message.error('接口错误') |
|||
} |
|||
}) |
|||
}, |
|||
// 获取本周一 |
|||
// getMondayTime() { |
|||
// const today = new Date() |
|||
// const year = today.getFullYear() |
|||
// const month = today.getMonth() // 月份从0开始 |
|||
// const day = today.getDate() |
|||
// const newDate = new Date(year, month, day) |
|||
|
|||
// const nowTime = newDate.getTime() |
|||
// const weekDay = newDate.getDay() // getDay() 返回的是0（周日）到6（周六） |
|||
// const oneDayTime = 24 * 60 * 60 * 1000 |
|||
|
|||
// // 计算从今天到本周一的天数差 |
|||
// const daysToMonday = weekDay === 0 ? -6 : 1 - weekDay |
|||
// // 计算本周一的时间戳 |
|||
// const mondayTime = nowTime - daysToMonday * oneDayTime |
|||
// // 格式化日期 |
|||
// this.mondayDate = this.parseTime(mondayTime, '{y}-{m}-{d}') |
|||
// console.log('this.mondayDate', this.mondayDate) |
|||
// }, |
|||
getMondayDate() { |
|||
const today = new Date() |
|||
const day = today.getDay() |
|||
|
|||
// 计算当前日期与本周周一之间的天数差 |
|||
// 如果今天是周日，则差值为6；如果是周六，则差值为5，依此类推 |
|||
const diff = day === 0 ? -6 : 1 - day |
|||
|
|||
// 减去计算出的天数差，得到本周周一的日期 |
|||
today.setDate(today.getDate() + diff) |
|||
|
|||
// 返回本周周一的日期，格式化为年-月-日 |
|||
this.mondayDate = today.toISOString().split('T')[0] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue