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