62 changed files with 729 additions and 2424 deletions
-
539selfServiceMachine/src/assets/iconfont/demo.css
-
557selfServiceMachine/src/assets/iconfont/demo_index.html
-
80selfServiceMachine/src/assets/iconfont/iconfont.css
-
1selfServiceMachine/src/assets/iconfont/iconfont.js
-
121selfServiceMachine/src/assets/iconfont/iconfont.json
-
51selfServiceMachine/src/assets/iconfont/iconfont.svg
-
BINselfServiceMachine/src/assets/iconfont/iconfont.ttf
-
BINselfServiceMachine/src/assets/iconfont/iconfont.woff
-
BINselfServiceMachine/src/assets/iconfont/iconfont.woff2
-
BINselfServiceMachine/src/assets/images/banner.png
-
BINselfServiceMachine/src/assets/images/default-img.png
-
BINselfServiceMachine/src/assets/images/home/bg.png
-
BINselfServiceMachine/src/assets/images/home/nav1.png
-
BINselfServiceMachine/src/assets/images/home/nav2.png
-
BINselfServiceMachine/src/assets/images/home/nav3.png
-
BINselfServiceMachine/src/assets/images/home/nav4.png
-
BINselfServiceMachine/src/assets/images/home/nav5.png
-
BINselfServiceMachine/src/assets/images/home/top.png
-
BINselfServiceMachine/src/assets/images/home/type-bg.png
-
BINselfServiceMachine/src/assets/images/img1.png
-
BINselfServiceMachine/src/assets/images/img10.png
-
BINselfServiceMachine/src/assets/images/img2.png
-
BINselfServiceMachine/src/assets/images/img3.png
-
BINselfServiceMachine/src/assets/images/img4.png
-
BINselfServiceMachine/src/assets/images/img5.png
-
BINselfServiceMachine/src/assets/images/img6.png
-
BINselfServiceMachine/src/assets/images/img7.png
-
BINselfServiceMachine/src/assets/images/img8.png
-
BINselfServiceMachine/src/assets/images/img9.png
-
BINselfServiceMachine/src/assets/images/list/1.png
-
BINselfServiceMachine/src/assets/images/list/10.png
-
BINselfServiceMachine/src/assets/images/list/11.png
-
BINselfServiceMachine/src/assets/images/list/12.png
-
BINselfServiceMachine/src/assets/images/list/13.png
-
BINselfServiceMachine/src/assets/images/list/14.png
-
BINselfServiceMachine/src/assets/images/list/15.png
-
BINselfServiceMachine/src/assets/images/list/2.png
-
BINselfServiceMachine/src/assets/images/list/3.png
-
BINselfServiceMachine/src/assets/images/list/4.png
-
BINselfServiceMachine/src/assets/images/list/5.png
-
BINselfServiceMachine/src/assets/images/list/6.png
-
BINselfServiceMachine/src/assets/images/list/7.png
-
BINselfServiceMachine/src/assets/images/list/8.png
-
BINselfServiceMachine/src/assets/images/list/9.png
-
BINselfServiceMachine/src/assets/images/list/left-btn.png
-
BINselfServiceMachine/src/assets/images/list/list-rack.png
-
BINselfServiceMachine/src/assets/images/list/list-title.png
-
BINselfServiceMachine/src/assets/images/list/right-btn.png
-
BINselfServiceMachine/src/assets/images/list/top.png
-
BINselfServiceMachine/src/assets/images/local-bg.png
-
785selfServiceMachine/src/assets/styles/index.scss
-
16selfServiceMachine/src/assets/styles/style.scss
-
6selfServiceMachine/src/main.js
-
40selfServiceMachine/src/router/index.js
-
94selfServiceMachine/src/views/authorRecommend.vue
-
178selfServiceMachine/src/views/bookRackList.vue
-
309selfServiceMachine/src/views/bookRecommend.vue
-
82selfServiceMachine/src/views/digitalResource.vue
-
40selfServiceMachine/src/views/hotBook.vue
-
191selfServiceMachine/src/views/index.vue
-
37selfServiceMachine/src/views/newBook.vue
-
26selfServiceMachine/src/views/onlineBookSelection.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,557 +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">位置</div> |
|||
<div class="code-name">&#xe639;</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">右滑</div> |
|||
<div class="code-name">&#xe635;</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">左滑</div> |
|||
<div class="code-name">&#xe638;</div> |
|||
</li> |
|||
|
|||
<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=1664428017869') format('woff2'), |
|||
url('iconfont.woff?t=1664428017869') format('woff'), |
|||
url('iconfont.ttf?t=1664428017869') format('truetype'), |
|||
url('iconfont.svg?t=1664428017869#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-weizhi"></span> |
|||
<div class="name"> |
|||
位置 |
|||
</div> |
|||
<div class="code-name">.icon-weizhi |
|||
</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont icon-youhua"></span> |
|||
<div class="name"> |
|||
右滑 |
|||
</div> |
|||
<div class="code-name">.icon-youhua |
|||
</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont icon-zuohua"></span> |
|||
<div class="name"> |
|||
左滑 |
|||
</div> |
|||
<div class="code-name">.icon-zuohua |
|||
</div> |
|||
</li> |
|||
|
|||
<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-weizhi"></use> |
|||
</svg> |
|||
<div class="name">位置</div> |
|||
<div class="code-name">#icon-weizhi</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<svg class="icon svg-icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-youhua"></use> |
|||
</svg> |
|||
<div class="name">右滑</div> |
|||
<div class="code-name">#icon-youhua</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<svg class="icon svg-icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-zuohua"></use> |
|||
</svg> |
|||
<div class="name">左滑</div> |
|||
<div class="code-name">#icon-zuohua</div> |
|||
</li> |
|||
|
|||
<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> |
|||
@ -1,80 +0,0 @@ |
|||
@font-face { |
|||
font-family: "iconfont"; /* Project id 3646564 */ |
|||
src: url('iconfont.woff2?t=1664428017869') format('woff2'), |
|||
url('iconfont.woff?t=1664428017869') format('woff'), |
|||
url('iconfont.ttf?t=1664428017869') format('truetype'), |
|||
url('iconfont.svg?t=1664428017869#iconfont') format('svg'); |
|||
} |
|||
|
|||
.iconfont { |
|||
font-family: "iconfont" !important; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.icon-weizhi:before { |
|||
content: "\e639"; |
|||
} |
|||
|
|||
.icon-youhua:before { |
|||
content: "\e635"; |
|||
} |
|||
|
|||
.icon-zuohua:before { |
|||
content: "\e638"; |
|||
} |
|||
|
|||
.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 { |
|||
content: "\e628"; |
|||
} |
|||
|
|||
.icon-a-no3:before { |
|||
content: "\e629"; |
|||
} |
|||
|
|||
.icon-a-no1:before { |
|||
content: "\e62b"; |
|||
} |
|||
|
|||
.icon-a-3:before { |
|||
content: "\e62d"; |
|||
} |
|||
|
|||
.icon-a-1:before { |
|||
content: "\e62e"; |
|||
} |
|||
|
|||
1
selfServiceMachine/src/assets/iconfont/iconfont.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,121 +0,0 @@ |
|||
{ |
|||
"id": "3646564", |
|||
"name": "东西湖图书馆", |
|||
"font_family": "iconfont", |
|||
"css_prefix_text": "icon-", |
|||
"description": "", |
|||
"glyphs": [ |
|||
{ |
|||
"icon_id": "32102019", |
|||
"name": "位置", |
|||
"font_class": "weizhi", |
|||
"unicode": "e639", |
|||
"unicode_decimal": 58937 |
|||
}, |
|||
{ |
|||
"icon_id": "31966175", |
|||
"name": "右滑", |
|||
"font_class": "youhua", |
|||
"unicode": "e635", |
|||
"unicode_decimal": 58933 |
|||
}, |
|||
{ |
|||
"icon_id": "31966176", |
|||
"name": "左滑", |
|||
"font_class": "zuohua", |
|||
"unicode": "e638", |
|||
"unicode_decimal": 58936 |
|||
}, |
|||
{ |
|||
"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", |
|||
"name": "通知", |
|||
"font_class": "tongzhi", |
|||
"unicode": "e628", |
|||
"unicode_decimal": 58920 |
|||
}, |
|||
{ |
|||
"icon_id": "31804864", |
|||
"name": "no.3", |
|||
"font_class": "a-no3", |
|||
"unicode": "e629", |
|||
"unicode_decimal": 58921 |
|||
}, |
|||
{ |
|||
"icon_id": "31804866", |
|||
"name": "no.1", |
|||
"font_class": "a-no1", |
|||
"unicode": "e62b", |
|||
"unicode_decimal": 58923 |
|||
}, |
|||
{ |
|||
"icon_id": "31804868", |
|||
"name": "3", |
|||
"font_class": "a-3", |
|||
"unicode": "e62d", |
|||
"unicode_decimal": 58925 |
|||
}, |
|||
{ |
|||
"icon_id": "31804869", |
|||
"name": "1", |
|||
"font_class": "a-1", |
|||
"unicode": "e62e", |
|||
"unicode_decimal": 58926 |
|||
} |
|||
] |
|||
} |
|||
51
selfServiceMachine/src/assets/iconfont/iconfont.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
After Width: 1080 | Height: 357 | Size: 230 KiB |
|
Before Width: 440 | Height: 526 | Size: 51 KiB |
|
Before Width: 1080 | Height: 1920 | Size: 214 KiB |
|
Before Width: 160 | Height: 160 | Size: 28 KiB |
|
Before Width: 160 | Height: 160 | Size: 28 KiB |
|
Before Width: 160 | Height: 160 | Size: 29 KiB |
|
Before Width: 160 | Height: 160 | Size: 31 KiB |
|
Before Width: 160 | Height: 160 | Size: 27 KiB |
|
Before Width: 1080 | Height: 254 | Size: 32 KiB |
|
Before Width: 1140 | Height: 198 | Size: 23 KiB |
|
After Width: 28 | Height: 28 | Size: 741 B |
|
After Width: 39 | Height: 38 | Size: 1.9 KiB |
|
After Width: 28 | Height: 28 | Size: 499 B |
|
After Width: 48 | Height: 13 | Size: 548 B |
|
After Width: 24 | Height: 24 | Size: 354 B |
|
After Width: 24 | Height: 24 | Size: 619 B |
|
After Width: 24 | Height: 24 | Size: 557 B |
|
After Width: 46 | Height: 50 | Size: 3.4 KiB |
|
After Width: 46 | Height: 50 | Size: 3.6 KiB |
|
After Width: 46 | Height: 50 | Size: 3.6 KiB |
|
Before Width: 97 | Height: 267 | Size: 5.9 KiB |
|
Before Width: 97 | Height: 267 | Size: 8.6 KiB |
|
Before Width: 97 | Height: 267 | Size: 8.4 KiB |
|
Before Width: 97 | Height: 267 | Size: 6.5 KiB |
|
Before Width: 97 | Height: 267 | Size: 6.1 KiB |
|
Before Width: 97 | Height: 267 | Size: 5.1 KiB |
|
Before Width: 97 | Height: 267 | Size: 7.2 KiB |
|
Before Width: 97 | Height: 267 | Size: 5.6 KiB |
|
Before Width: 97 | Height: 267 | Size: 6.5 KiB |
|
Before Width: 97 | Height: 267 | Size: 3.2 KiB |
|
Before Width: 97 | Height: 267 | Size: 6.6 KiB |
|
Before Width: 97 | Height: 267 | Size: 5.9 KiB |
|
Before Width: 97 | Height: 267 | Size: 8.0 KiB |
|
Before Width: 97 | Height: 267 | Size: 9.2 KiB |
|
Before Width: 97 | Height: 267 | Size: 8.7 KiB |
|
Before Width: 220 | Height: 60 | Size: 1.5 KiB |
|
Before Width: 1140 | Height: 137 | Size: 25 KiB |
|
Before Width: 494 | Height: 76 | Size: 15 KiB |
|
Before Width: 220 | Height: 60 | Size: 1.5 KiB |
|
Before Width: 1080 | Height: 120 | Size: 16 KiB |
|
Before Width: 83 | Height: 346 | Size: 6.5 KiB |
@ -1,94 +0,0 @@ |
|||
<template> |
|||
<div id="bookshelf"> |
|||
<div class="bookshelf-header" style="height:120px"> |
|||
<!-- <router-link to="/"> |
|||
<span class="icon iconfont icon-l"></span> |
|||
</router-link> --> |
|||
<span class="icon iconfont icon-l" @click="goBack()"></span> |
|||
<h2>作者推荐</h2> |
|||
</div> |
|||
<div class="main"> |
|||
<div v-for="(item,index) in authorList" :key="index" class="book-rack"> |
|||
<span class="author-index">{{ index+1 }}</span> |
|||
<div class="author-brief"> |
|||
<h3>{{ item.paAuthor }}</h3> |
|||
<p>{{ item.paExplain }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchProposeAuthor } from '@/api/bookshelf' |
|||
|
|||
export default { |
|||
name: 'AuthorRecommend', |
|||
components: { |
|||
}, |
|||
data() { |
|||
return { |
|||
authorList: [] |
|||
} |
|||
}, |
|||
created() { |
|||
this.getAuthor() |
|||
}, |
|||
methods: { |
|||
goBack() { |
|||
this.$router.go(-1) |
|||
}, |
|||
getAuthor() { |
|||
const params = { |
|||
libcode: this.libcode, |
|||
pageNo: 1, |
|||
pageSize: 22 |
|||
} |
|||
FetchProposeAuthor(params).then(res => { |
|||
this.authorList = res.proposeAuthorList |
|||
}).catch(() => { |
|||
this.$message.error('接口错误') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/styles/index.scss"; |
|||
.main{ |
|||
padding-top: 40px; |
|||
height: calc(100vh - 210px); |
|||
overflow: hidden; |
|||
overflow-y:auto ; |
|||
.book-rack{ |
|||
height: 387px; |
|||
margin-bottom: 40px; |
|||
padding: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
color: #333; |
|||
.author-index{ |
|||
width: 120px; |
|||
text-align: center; |
|||
} |
|||
.author-brief{ |
|||
flex: 1; |
|||
padding: 20px 50px 20px 0; |
|||
h3{ |
|||
font-size: 40px; |
|||
margin-bottom: 20px; |
|||
} |
|||
p{ |
|||
font-size: 30px; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 4; |
|||
line-clamp: 4; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
@ -1,178 +0,0 @@ |
|||
<template> |
|||
<div id="bookshelf"> |
|||
<div class="bookshelf-header" style="height:120px"> |
|||
<!-- <router-link to="/"> |
|||
<span class="icon iconfont icon-l"></span> |
|||
</router-link> --> |
|||
<span class="icon iconfont icon-l" @click="goBack()"></span> |
|||
<h2>本架图书</h2> |
|||
<div class="rack-direct"> |
|||
<span :class="classnameL" @click="handleDirect(-1)">左</span> |
|||
<span :class="classnameR" @click="handleDirect(1)">右</span> |
|||
</div> |
|||
</div> |
|||
<div v-loading="loading" class="rack-box"> |
|||
<div v-for="(item, index) in listData" :key="index" class="rack-item"> |
|||
<div :class="['swiper'+index,'rack-box-list']"> |
|||
<div class="swiper-wrapper"> |
|||
<div v-for="eitem in bookList[item]" :key="eitem.id" class="list-item swiper-slide" @click="handleDetails(eitem)"> |
|||
<div class="box-txt"> |
|||
<span class="book-name">{{ eitem.bookName }}</span> |
|||
<span class="book-writer">{{ eitem.bookAuthor }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="rack-floor"> |
|||
<span :class="['icon','iconfont','icon-l'+index]" @click="handlePage(-1)"></span> |
|||
<p><span style="margin-right:25px">第{{ index+1 }}层</span><span>(共{{ bookList[item]?bookList[item].length:0 }}本)</span></p> |
|||
<span :class="['icon','iconfont','icon-r'+index]" @click="handlePage(1)"></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<BookDetails ref="detailDom" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { initBookshelfDetails, getBookDetailsByISBN } from '@/api/bookshelf' |
|||
import BookDetails from './module/bookDetails.vue' |
|||
import { Swiper } from 'vue-awesome-swiper' |
|||
import 'swiper/swiper-bundle.css' |
|||
|
|||
export default { |
|||
name: 'CurrentRackBook', |
|||
components: { |
|||
BookDetails |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
listData: [], |
|||
bookList: {}, |
|||
classnameL: 'rack-direct-active', |
|||
classnameR: null |
|||
} |
|||
}, |
|||
created() { |
|||
this.initBookshelfDetails(-1) |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
initSwiper() { |
|||
this.$nextTick(() => { |
|||
for (const key in this.bookList) { |
|||
this.bookList[key].forEach((el, index) => { |
|||
new Swiper('.swiper' + index, { |
|||
slidesPerView: 'auto', |
|||
slidesPerGroup: 15, |
|||
observer: true, |
|||
navigation: { |
|||
nextEl: '.icon-r' + index, |
|||
prevEl: '.icon-l' + index |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 左右架切换之后，初始化swiper位置 |
|||
setSwiperInit() { |
|||
setTimeout(() => { |
|||
this.listData.forEach((item, index) => { |
|||
document.getElementsByClassName('swiper-wrapper')[index].style.transform = 'translate3d(0px, 0px, 0px)' |
|||
}) |
|||
}, 50) |
|||
}, |
|||
handleDetails(itemData) { |
|||
const params = { |
|||
isbn: itemData.isbn.replace(/\-/g, '') |
|||
} |
|||
getBookDetailsByISBN(params).then(res => { |
|||
this.$refs.detailDom.dialogVisible = true |
|||
if (res) { |
|||
this.$refs.detailDom.bookData = res |
|||
} else { |
|||
this.$refs.detailDom.bookData = { |
|||
srcUrl: itemData.bookAuthor, |
|||
bookName: itemData.bookName, |
|||
bookAuthor: itemData.bookAuthor ? itemData.bookAuthor : '暂无信息', |
|||
gist: '暂无简介', |
|||
Publish: '暂无信息', |
|||
places: [ |
|||
{ shelfName: '' } |
|||
] |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
// 翻页 |
|||
handlePage(page) { |
|||
if (page === 1) { |
|||
// 下一页 |
|||
} else { |
|||
// 上一页 |
|||
} |
|||
}, |
|||
// 控制左右 |
|||
handleDirect(n) { |
|||
if (n === -1) { // 左 |
|||
this.classnameR = null |
|||
this.classnameL = 'rack-direct-active' |
|||
} else { // 右 |
|||
this.classnameL = null |
|||
this.classnameR = 'rack-direct-active' |
|||
} |
|||
this.initBookshelfDetails(n) |
|||
}, |
|||
goBack() { |
|||
this.$router.go(-1) |
|||
}, |
|||
initBookshelfDetails(n) { |
|||
this.loading = true |
|||
const params = {} |
|||
if (n === -1) { // 左 |
|||
params.shelfNo = this.$route.query.leftShelfNo |
|||
} else { // 右 |
|||
params.shelfNo = this.$route.query.rightShelfNo |
|||
} |
|||
initBookshelfDetails(params).then((res) => { |
|||
console.log(this.listData) |
|||
// if (res.shelfs.length === 0) { |
|||
// res.shelfs.push('firstShelf', 'secondShelf', 'thirdShelf', 'fourthShelf', 'fivethShelf') |
|||
// for (let index = 0; index < res.shelfs.length; index++) { |
|||
// const shelfNo = res.shelfs[index] |
|||
// res.shelfBook[shelfNo] = [] |
|||
// } |
|||
// } |
|||
this.listData.splice(0, this.listData.length, ...res.shelfAll) |
|||
if (res.shelfs.length !== 0) { |
|||
for (let index = 0; index < res.shelfs.length; index++) { |
|||
const shelfNo = res.shelfs[index] |
|||
this.$set(this.bookList, shelfNo, res.shelfBook[shelfNo]) |
|||
} |
|||
} |
|||
if (this.listData.length > 0) { |
|||
this.initSwiper() |
|||
this.setSwiperInit() |
|||
} |
|||
setTimeout(() => { |
|||
this.loading = false |
|||
}, 1000) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
.swiper-container { |
|||
position: relative; |
|||
width: 100%; |
|||
} |
|||
.swiper-slide { |
|||
width: 65px !important; |
|||
} |
|||
</style> |
|||
@ -1,29 +1,300 @@ |
|||
<template> |
|||
<div id="bookshelf"> |
|||
<div class="bookshelf-header" style="height:120px"> |
|||
<span class="icon iconfont icon-l" @click="goBack()"></span> |
|||
<h2>书单推荐</h2> |
|||
</div> |
|||
</div> |
|||
<div id="book"> |
|||
<div class="top-bg"></div> |
|||
<div class="recommend-main"> |
|||
<div class="banner"> |
|||
<img src="~@/assets/images/banner.png" alt="" /> |
|||
</div> |
|||
<div class="recommend-cont"> |
|||
<div class="recommend-left"> |
|||
<div class="quick-filter"> |
|||
<h4 class="filter-header">快速筛选</h4> |
|||
<div class="filter-item"> |
|||
<div class="filter-item-title">出版社</div> |
|||
<ul class="publish-list"> |
|||
<li class="active"> |
|||
<p>人民文学出版社</p> |
|||
<span>100册</span> |
|||
</li> |
|||
<li> |
|||
<p>商务印书馆</p> |
|||
<span>96册</span> |
|||
</li> |
|||
<li> |
|||
<p>人民出版社</p> |
|||
<span>80册</span> |
|||
</li> |
|||
<li> |
|||
<p>上海译文出版社</p> |
|||
<span>43册</span> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="filter-item"> |
|||
<div class="filter-item-title">出版时间</div> |
|||
<div class="publish-time-list"> |
|||
<span class="active">2023</span> |
|||
<span>2022</span> |
|||
<span>2021</span> |
|||
<span>2020</span> |
|||
<span>2019</span> |
|||
<span>2018</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="ranking"> |
|||
<h4 class="filter-header">排行榜</h4> |
|||
<el-carousel |
|||
:interval="4000" |
|||
type="card" |
|||
indicator-position="none" |
|||
height="200px" |
|||
> |
|||
<el-carousel-item> |
|||
<div class="ranking-img"></div> |
|||
</el-carousel-item> |
|||
<el-carousel-item> |
|||
<div class="ranking-img"></div> |
|||
</el-carousel-item> |
|||
<el-carousel-item> |
|||
<div class="ranking-img"></div> |
|||
</el-carousel-item> |
|||
</el-carousel> |
|||
<div class="ranking-book-detail"> |
|||
<div class="book-info"> |
|||
<h5>AI超入门</h5> |
|||
<div class="book-author"> |
|||
<span>秋叶 刘进新</span> |
|||
<span>机械工业出版社</span> |
|||
</div> |
|||
<p class="book-intro title-item"> |
|||
图书简介图书简介图书简介图书简介图书简介图书简介图书 |
|||
</p> |
|||
<div class="ranking-status"></div> |
|||
</div> |
|||
<div class="book-click-num"> |
|||
<span class="click-num">100次</span> |
|||
<span class="detail-btn" @click="detailShow=true">查看详情</span> |
|||
</div> |
|||
</div> |
|||
<ul class="ranking-list-bottom"> |
|||
<li> |
|||
<span>TOP4</span> |
|||
<p class="title-item-only">秒懂AI写作</p> |
|||
</li> |
|||
<li> |
|||
<span>TOP5</span> |
|||
<p class="title-item-only"> |
|||
ChatGPT:AI革命AI革命AI革命 |
|||
</p> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<div class="recommend-right"> |
|||
<div class="right-header"> |
|||
<div class="recommend-search"> |
|||
<el-select |
|||
v-model="selectValue" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
<div class="input-search"> |
|||
<el-input |
|||
v-model="keyword" |
|||
placeholder="请输入关键词进行检索" |
|||
style="width: 300px" |
|||
></el-input> |
|||
<el-button type="primary">搜索</el-button> |
|||
</div> |
|||
<el-button>重置</el-button> |
|||
</div> |
|||
<div class="hot-keyword"> |
|||
<p>热门检索</p> |
|||
<div class="keyword-item"> |
|||
<span>人工智能</span> |
|||
<span>遥遥领先</span> |
|||
<span>ChatAPT</span> |
|||
<span>5G</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="recommend-list"> |
|||
<div class="result">检索结果：<span>121</span>册</div> |
|||
<div class="recommend-item" v-for="item in 10"> |
|||
<div class="book-detail"> |
|||
<div class="book-img"> |
|||
<img src="" alt="" /> |
|||
</div> |
|||
<div class="book-txt"> |
|||
<h4> |
|||
{{item}}秒懂AI提问：秒懂AI提问：让人工智能成为你的效率神器 |
|||
</h4> |
|||
<div class="book-autor"> |
|||
<span>秋叶 刘进新 姜梅 定秋枫</span> |
|||
<span>2023年07月</span> |
|||
</div> |
|||
<div class="book-publish"> |
|||
<span>人民邮电出版社</span> |
|||
<span>ISBN：950146556432</span> |
|||
</div> |
|||
<div class="book-intro title-item"> |
|||
精心提炼20种GPT提问方法及指令，从入到进阶再到精通，100个案例带你玩转100个案例带你玩转G |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="book-eval"> |
|||
<span class="eval-num">100次</span> |
|||
<div class="eval-star"> |
|||
<span class="active"></span> |
|||
<span class="active"></span> |
|||
<span></span> |
|||
<span></span> |
|||
<span></span> |
|||
</div> |
|||
<div class="to-book-more" @click="detailShow=true">查看详情</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-dialog class="detail-dialog" append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="detailShow"> |
|||
<div class="dialog-book"> |
|||
<div class="book-detail"> |
|||
<div class="book-img"> |
|||
<img src="" alt="" /> |
|||
</div> |
|||
<div class="book-txt"> |
|||
<h4> |
|||
秒懂AI提问：秒懂AI提问：让人工智能成为你的效率神器 |
|||
</h4> |
|||
<div class="book-autor"> |
|||
<span>秋叶 刘进新 姜梅 定秋枫</span> |
|||
<span>2023年07月</span> |
|||
</div> |
|||
<div class="book-publish"> |
|||
<span>人民邮电出版社</span> |
|||
<span>ISBN：950146556432</span> |
|||
</div> |
|||
<div class="book-intro title-item"> |
|||
精心提炼20种GPT提问方法及指令，从入到进阶再到精通，100个案例带你玩转100个案例带你玩转G |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="book-eval"> |
|||
<span class="eval-num">100次</span> |
|||
<div class="eval-star"> |
|||
<span class="active"></span> |
|||
<span class="active"></span> |
|||
<span></span> |
|||
<span></span> |
|||
<span></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="book-place"> |
|||
<h4>图书所在位置</h4> |
|||
<ul class="book-place-list"> |
|||
<li> |
|||
<span>1</span> |
|||
<p class="book-num">400300210</p> |
|||
<p class="place-detail">1区30列5节3层左侧</p> |
|||
</li> |
|||
<li> |
|||
<span>2</span> |
|||
<p class="book-num">400300210</p> |
|||
<p class="place-detail">1区30列5节3层左侧</p> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="book-bottom"> |
|||
<span @click="detailShow = false">关闭</span> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { bookListCrud } from './mixins/booklist.js' |
|||
// import { bookListCrud } from './mixins/booklist.js' |
|||
export default { |
|||
name: 'NewBook', |
|||
components: { }, |
|||
mixins: [bookListCrud], |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
methods: { |
|||
} |
|||
name: 'BookRecommend', |
|||
components: {}, |
|||
// mixins: [bookListCrud], |
|||
data() { |
|||
return { |
|||
selectValue: '1', |
|||
keyword: '', |
|||
detailShow: false, |
|||
options: [ |
|||
{ |
|||
value: '1', |
|||
label: '题名', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: 'ISBN', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '著者', |
|||
}, |
|||
{ |
|||
value: '4', |
|||
label: '出版社', |
|||
}, |
|||
{ |
|||
value: '5', |
|||
label: '出版时间', |
|||
}, |
|||
], |
|||
} |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/styles/index.scss"; |
|||
@import '~@/assets/styles/index.scss'; |
|||
::v-deep .el-dialog{ |
|||
width: 848px; |
|||
border-radius: 16px; |
|||
background: #F8F8FD; |
|||
box-shadow: 0px 3px 20px 1px rgba(0,0,0,0.05); |
|||
.el-dialog__body{ |
|||
padding: 20px 0 23px 0; |
|||
} |
|||
} |
|||
::v-deep .el-dialog__header{ |
|||
display: none; |
|||
} |
|||
.dialog-book{ |
|||
padding: 30px; |
|||
font-size: 28px; |
|||
.book-txt{ |
|||
color: #191A1A; |
|||
font-size: 30px; |
|||
} |
|||
.book-autor span{ |
|||
font-size: 24px; |
|||
} |
|||
.book-publish{ |
|||
font-size: 28px; |
|||
span:last-child{ |
|||
font-size: 24px; |
|||
} |
|||
} |
|||
.book-eval .eval-num{ |
|||
font-size: 28px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,82 +0,0 @@ |
|||
<template> |
|||
<div id="bookshelf"> |
|||
<div class="bookshelf-header" style="height:120px"> |
|||
<router-link to="/"> |
|||
<span class="icon iconfont icon-l"></span> |
|||
</router-link> |
|||
<h2>数字资源</h2> |
|||
</div> |
|||
<div class="main"> |
|||
<div v-for="(item,index) in srcList" :key="index" class="main-item" @click="jump(item.nrsUrl)"> |
|||
<img :src="'data:image/png;base64,' + item.nrsImages" /> |
|||
<div class="title" :style="{ fontSize: item.nrsTitle.length >6 ? '60px' : '80px'}"> |
|||
{{ item.nrsTitle }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import { initNumberResoures } from '@/api/bookshelf' |
|||
export default { |
|||
name: 'DigitalResource', |
|||
components: { |
|||
}, |
|||
data() { |
|||
return { |
|||
srcList: [] |
|||
} |
|||
}, |
|||
created() { |
|||
this.getInfo() |
|||
}, |
|||
methods: { |
|||
getInfo() { |
|||
initNumberResoures({ libcode: this.libcode }).then(data => { |
|||
this.srcList = data |
|||
}) |
|||
}, |
|||
jump(url) { |
|||
window.location.href = url |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/styles/index.scss"; |
|||
.main{ |
|||
padding-top: 40px; |
|||
height: calc(100vh - 180px); |
|||
overflow: hidden; |
|||
overflow-y:auto ; |
|||
.main-item{ |
|||
// height: 387px; |
|||
margin-bottom: 40px; |
|||
padding: 0 40px; |
|||
// overflow: hidden; |
|||
position: relative; |
|||
img{ |
|||
width: 100%; |
|||
} |
|||
.title{ |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%,-50%); |
|||
font-family: "HuXiaoBoNanShenTi"; |
|||
font-size: 80px; |
|||
color: #333; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 3; |
|||
line-clamp: 3; |
|||
-webkit-box-orient: vertical; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,40 +0,0 @@ |
|||
<template> |
|||
<div id="bookshelf"> |
|||
<div class="bookshelf-header" style="height:120px"> |
|||
<!-- <router-link to="/"> |
|||
<span class="icon iconfont icon-l"></span> |
|||
</router-link> --> |
|||
<span class="icon iconfont icon-l" @click="goBack()"></span> |
|||
<h2>热门图书</h2> |
|||
</div> |
|||
<BookList /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import BookList from '@/views/module/bookList.vue' |
|||
import { bookListCrud } from './mixins/booklist.js' |
|||
export default { |
|||
name: 'HotBook', |
|||
components: { BookList }, |
|||
mixins: [bookListCrud], |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
goBack() { |
|||
this.$router.go(-1) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/styles/index.scss"; |
|||
|
|||
</style> |
|||
@ -1,191 +0,0 @@ |
|||
<template> |
|||
<div id="bookshelf"> |
|||
<div class="bookshelf-header"> |
|||
<h2>RFID智慧书架</h2> |
|||
<span class="shelf-num">{{ shelfName }}</span> |
|||
</div> |
|||
<!-- 本架分类 --> |
|||
<div class="book-category"> |
|||
<p>{{ leftShelfMsg }}</p> |
|||
<p>{{ rightShelfMsg }}</p> |
|||
</div> |
|||
<!-- 智慧书架导航 --> |
|||
<ul class="book-nav"> |
|||
<li @click="toSearch"> |
|||
<img src="~@/assets/images/home/nav1.png" /> |
|||
<p>图书检索</p> |
|||
</li> |
|||
<li @click="toPath('/HotBook?bookType=hot')"> |
|||
<img src="~@/assets/images/home/nav2.png" /> |
|||
<p>热门图书</p> |
|||
</li> |
|||
<li @click="toPath('/AuthorRecommend')"> |
|||
<img src="~@/assets/images/home/nav3.png" /> |
|||
<p>作者推荐</p> |
|||
</li> |
|||
<li @click="toPath('/DigitalResource')"> |
|||
<img src="~@/assets/images/home/nav4.png" /> |
|||
<p>数字资源</p> |
|||
</li> |
|||
<li @click="toRoomNav"> |
|||
<img src="~@/assets/images/home/nav5.png" /> |
|||
<p>场馆导航</p> |
|||
</li> |
|||
</ul> |
|||
<!-- 本架图书 --> |
|||
<div class="book-rack"> |
|||
<div class="list-top"> |
|||
<div class="list-top-title"> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-benjiatushu" /> |
|||
</svg> |
|||
<p>本架图书</p> |
|||
</div> |
|||
<span class="more" @click="toPath('/CurrentRackBook')">更多<i class="iconfont icon-zuo rotate"></i></span> |
|||
</div> |
|||
<div class="rack-list"> |
|||
<BookListItem :list-data.sync="rackList" /> |
|||
<div class="other-list"> |
|||
<BookListItem :list-data.sync="otherList" :is-other-book="true" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 新书推荐 --> |
|||
<div class="book-rack new-recommend"> |
|||
<div class="list-top"> |
|||
<div class="list-top-title"> |
|||
<p>新书推荐</p> |
|||
</div> |
|||
<span class="more" @click="toPath('/NewBook?bookType=new')">更多<i class="iconfont icon-zuo rotate"></i></span> |
|||
</div> |
|||
<BookListItem :list-data.sync="newList" :is-new-book="true" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import BookListItem from '@/views/module/homeListItem.vue' |
|||
import { FetchNewBookRecommend, FetchCoverByISBN, initSmartBookshelf } from '@/api/bookshelf' |
|||
export default { |
|||
name: 'Home', |
|||
components: { |
|||
BookListItem |
|||
}, |
|||
data() { |
|||
return { |
|||
shelfName: '1', |
|||
leftShelfMsg: '', |
|||
rightShelfMsg: '', |
|||
// leftShelfNo: '1201-03-001-A-01', |
|||
// rightShelfNo: '1201-03-001-B-01', |
|||
leftShelfNo: '', |
|||
rightShelfNo: '', |
|||
rackList: [], // 本架图书排行第一 |
|||
otherList: [], // 本架图书排行后两本 |
|||
newList: [] // 新书推荐 |
|||
} |
|||
}, |
|||
created() { |
|||
this.getNewBookList() |
|||
// 本架图书 + 书架借本信息 |
|||
this.initSmartBookshelf() |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
toSearch() { |
|||
window.location.href = 'http://219.140.69.151/opac' |
|||
}, |
|||
toPath(path) { |
|||
if (path === '/CurrentRackBook') { |
|||
const query = { leftShelfNo: this.leftShelfNo, rightShelfNo: this.rightShelfNo } |
|||
this.$router.push({ path: path, query: query }) |
|||
} else { |
|||
this.$router.push(path) |
|||
} |
|||
}, |
|||
toRoomNav() { |
|||
const linkSrc = process.env.VUE_APP_BASE_API |
|||
window.location.href = linkSrc + '/anchoring/initVenueNavigation.do?libcode=' + this.libcode |
|||
}, |
|||
// 首页 - 新书推荐 |
|||
getNewBookList() { |
|||
const params = { |
|||
libcode: this.libcode, |
|||
pageNo: 1, |
|||
pageSize: 4 |
|||
} |
|||
FetchNewBookRecommend(params).then(res => { |
|||
let data = [] |
|||
data = res.newbookList |
|||
data.forEach(item => { |
|||
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
|||
}) |
|||
}).catch(() => { |
|||
this.$message.error('接口错误') |
|||
}) |
|||
}, |
|||
// 根据isbn获取图书封面 |
|||
getCoverByISBN(isbn, item) { |
|||
const params = { |
|||
isbn: isbn |
|||
} |
|||
console.log(params) |
|||
FetchCoverByISBN(params).then((res) => { |
|||
// item.cover = window.URL.createObjectURL(res) |
|||
if (res) { |
|||
item.cover = res |
|||
} else { |
|||
item.cover = '' |
|||
} |
|||
this.newList.push(item) |
|||
}) |
|||
}, |
|||
// 初始化首页书架信息 |
|||
initSmartBookshelf() { |
|||
this.leftShelfNo = this.$route.query.leftShelfNo |
|||
this.rightShelfNo = this.$route.query.rightShelfNo |
|||
const params = { leftShelfNo: this.leftShelfNo, rightShelfNo: this.rightShelfNo } |
|||
// const _this = this |
|||
initSmartBookshelf(params).then((res) => { |
|||
this.shelfName = res.shelfName |
|||
this.leftShelfMsg = res.leftShelf.sortMsg |
|||
this.rightShelfMsg = res.rightShelf.sortMsg |
|||
Promise.all(this.initBookData(res.bookList.splice(0, 1))).then((res) => { |
|||
this.rackList = res |
|||
console.log('rackList', this.rackList) |
|||
}) |
|||
Promise.all(this.initBookData(res.bookList.splice(-2))).then((res) => { |
|||
this.otherList = res |
|||
console.log('otherList', this.otherList) |
|||
}) |
|||
}) |
|||
}, |
|||
// 处理数据格式 |
|||
initBookData(bookList) { |
|||
return bookList.map(async(item, index) => { |
|||
const newItem = { |
|||
cover: item.srcUrl, |
|||
ranking: item.bookUID, |
|||
nbName: item.bookName, |
|||
isOtherBook: index !== 0, |
|||
nbAuthor: item.bookAuthor ? item.bookAuthor : '', |
|||
isNewBook: false, |
|||
num: item.heat ? item.heat : '0', |
|||
isbn: item.isbn |
|||
} |
|||
// const params = { |
|||
// isbn: item.isbn |
|||
// } |
|||
// const res = await FetchCoverByISBN(params) |
|||
// newItem.cover = window.URL.createObjectURL(res) |
|||
return newItem |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
</style> |
|||
@ -1,37 +0,0 @@ |
|||
<template> |
|||
<div id="bookshelf"> |
|||
<div class="bookshelf-header" style="height:120px"> |
|||
<!-- <router-link to="/"> |
|||
<span class="icon iconfont icon-l"></span> |
|||
</router-link> --> |
|||
<span class="icon iconfont icon-l" @click="goBack()"></span> |
|||
<h2>新书推荐</h2> |
|||
</div> |
|||
<BookList /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import BookList from '@/views/module/bookList.vue' |
|||
import { bookListCrud } from './mixins/booklist.js' |
|||
export default { |
|||
name: 'NewBook', |
|||
components: { BookList }, |
|||
mixins: [bookListCrud], |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
methods: { |
|||
goBack() { |
|||
this.$router.go(-1) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/styles/index.scss"; |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue