34 changed files with 2165 additions and 1273 deletions
-
2.eslintrc.js
-
2package.json
-
539src/assets/iconfont/demo.css
-
488src/assets/iconfont/demo_index.html
-
28src/assets/iconfont/iconfont.css
-
2src/assets/iconfont/iconfont.js
-
37src/assets/iconfont/iconfont.json
-
10src/assets/iconfont/iconfont.svg
-
BINsrc/assets/iconfont/iconfont.ttf
-
BINsrc/assets/iconfont/iconfont.woff
-
BINsrc/assets/iconfont/iconfont.woff2
-
BINsrc/assets/images/lib.jpg
-
BINsrc/assets/images/lib2.jpg
-
BINsrc/assets/images/lib3.jpg
-
BINsrc/assets/images/lib4.jpg
-
BINsrc/assets/images/lib5.jpg
-
BINsrc/assets/images/lib6.jpg
-
BINsrc/assets/images/map.png
-
63src/assets/js/META.common.min.js
-
50src/assets/js/METAWA.umd.min.js
-
244src/assets/js/rollSlide.js
-
322src/assets/js/tagcloud-2.2.js
-
1src/assets/json/qy.json
-
63src/components/SvgIcon/index.vue
-
10src/icons/index.js
-
1src/icons/svg/map.svg
-
1src/icons/svg/place.svg
-
4src/main.js
-
8src/router/index.js
-
5src/utils/index.js
-
201src/views/index.vue
-
674src/views/map/index.vue
-
232src/views/map/index2.vue
-
27vue.config.js
@ -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> |
|||
2
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
10
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: 400 | Height: 350 | Size: 27 KiB |
|
After Width: 400 | Height: 350 | Size: 30 KiB |
|
After Width: 400 | Height: 350 | Size: 32 KiB |
|
After Width: 400 | Height: 350 | Size: 26 KiB |
|
After Width: 400 | Height: 350 | Size: 31 KiB |
|
After Width: 400 | Height: 350 | Size: 35 KiB |
|
After Width: 621 | Height: 861 | Size: 107 KiB |
63
src/assets/js/META.common.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
50
src/assets/js/METAWA.umd.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,244 @@ |
|||
/** |
|||
* Created by f on 2015/5/8. |
|||
*/ |
|||
(function($) { |
|||
$.fn.rollSlide = function(obj) { |
|||
var $self = this |
|||
var orientation = obj.orientation || 'left' // 滚动方式
|
|||
var num = obj.num || 1 // 滚动数量
|
|||
var v = (typeof obj.v === 'number') ? obj.v : 0 // 滚动速度
|
|||
var minTime = (typeof obj.space === 'number') ? ((obj.space >= 100) ? obj.space : 100) : 100 // 最小间隔为 100 ms ，
|
|||
var space = minTime + v || 5000 + v // 滚动间隔 默认 5000ms
|
|||
var isRoll = obj.isRoll // 自动播放
|
|||
var isStart = true |
|||
var roll = function(ori, n, v) { |
|||
var $ul = $self.find('.roll__list') |
|||
var $item = $ul.find('li') |
|||
var range = 0 |
|||
var i; var len = $item.length |
|||
var sliceItem = [] |
|||
var cloneSliceItem = [] |
|||
var startTime = (new Date()).getTime() |
|||
// 存放滚动过的 item
|
|||
var memory = function() { |
|||
var arr = [] |
|||
|
|||
if (ori === 'left' || ori === 'top') { |
|||
for (i = 0; i < n; i++) { |
|||
range += ori === 'left' ? $($item[i]).outerWidth(true) : $($item[i]).outerHeight(true) // left 取 width，top 取 height
|
|||
arr.push($item[i]) |
|||
} |
|||
} else if (ori === 'right' || ori === 'bottom') { |
|||
for (i = len - n; n > 0; n--, i++) { |
|||
range += ori === 'right' ? $($item[i]).outerWidth(true) : $($item[i]).outerHeight(true) |
|||
arr.push($item[i]) |
|||
} |
|||
} |
|||
return arr |
|||
} |
|||
|
|||
isStart = false // 关闭滚动
|
|||
sliceItem = memory() |
|||
cloneSliceItem = $(sliceItem).clone() |
|||
// 判断往哪个方向移动
|
|||
switch (ori) { |
|||
case 'left': |
|||
$ul.append(cloneSliceItem) |
|||
$ul.animate({ |
|||
'left': -range + 'px' |
|||
}, v, function() { |
|||
$(this).css({ 'left': 0 }) |
|||
$(sliceItem).remove() |
|||
isStart = true // 开启滚动
|
|||
}) |
|||
break |
|||
case 'right': |
|||
$ul.prepend(cloneSliceItem) |
|||
$ul.css('left', -range + 'px') |
|||
$ul.animate({ |
|||
'left': 0 |
|||
}, v, function() { |
|||
$(sliceItem).remove() |
|||
isStart = true // 开启滚动
|
|||
}) |
|||
break |
|||
case 'top': |
|||
$ul.append(cloneSliceItem) |
|||
$ul.animate({ |
|||
'top': -range + 'px' |
|||
}, v, function() { |
|||
$(this).css({ 'top': 0 }) |
|||
$(sliceItem).remove() |
|||
isStart = true // 开启滚动
|
|||
}) |
|||
break |
|||
case 'bottom': |
|||
$ul.prepend(cloneSliceItem) |
|||
$ul.css('top', -range + 'px') |
|||
$ul.animate({ |
|||
'top': 0 |
|||
}, v, function() { |
|||
$(sliceItem).remove() |
|||
isStart = true // 开启滚动
|
|||
}) |
|||
break |
|||
} |
|||
} |
|||
var init = function() { |
|||
var $ul = $self.find('.roll__list') |
|||
var $item = $ul.find('li') |
|||
var len = $item.length |
|||
var timer |
|||
|
|||
num = num <= len ? num : len // 滚动个数超过列表数，取列表数
|
|||
if (len > 1) { |
|||
$self.on('click', '.pre', function() { |
|||
if (isStart) { |
|||
// 横向滚动
|
|||
if (orientation === 'left' || orientation === 'right') { |
|||
roll('right', num, v) |
|||
} else { // 纵向滚动
|
|||
roll('bottom', num, v) |
|||
} |
|||
} |
|||
}) |
|||
.on('click', '.next', function() { |
|||
if (isStart) { |
|||
// 横向滚动
|
|||
if (orientation === 'left' || orientation === 'right') { |
|||
roll('left', num, v) |
|||
} else { // 纵向滚动
|
|||
roll('top', num, v) |
|||
} |
|||
} |
|||
}) |
|||
.hover(function() { |
|||
clearInterval(timer) |
|||
}, function() { |
|||
if (isRoll) { |
|||
timer = setInterval(function() { |
|||
roll(orientation, num, v) |
|||
}, space) |
|||
} |
|||
}) |
|||
.trigger('mouseout') |
|||
} |
|||
} |
|||
|
|||
init() |
|||
} |
|||
$.fn.rollNoInterval = function() { |
|||
var $self = this |
|||
var $ul = $self.find('.roll__list') |
|||
var $item = $ul.find('li') |
|||
var len = $item.length |
|||
var timer |
|||
var left = function() { |
|||
var offset, i, |
|||
range, |
|||
$sliceItem |
|||
|
|||
$sliceItem = $($item[0]) |
|||
range = $sliceItem.outerWidth(true) |
|||
timer = setInterval(function() { |
|||
offset = $ul.css('left') |
|||
offset = parseInt(offset) |
|||
if (offset > -range) { |
|||
i = offset - 1 |
|||
$ul.css('left', i + 'px') |
|||
offset = $ul.css('left') |
|||
} else { |
|||
$sliceItem.detach() |
|||
$ul.css('left', 0) |
|||
$ul.append($sliceItem) |
|||
$sliceItem = $($ul.find('li')[0]) |
|||
range = $sliceItem.outerWidth(true) |
|||
} |
|||
}, 50) |
|||
} |
|||
var right = function() { |
|||
var offset, i, |
|||
range, |
|||
$sliceItem |
|||
|
|||
$sliceItem = $($item[len - 1]) |
|||
range = $sliceItem.outerWidth(true) |
|||
timer = setInterval(function() { |
|||
offset = $ul.css('right') |
|||
offset = parseInt(offset) |
|||
if (offset > -range) { |
|||
i = offset - 1 |
|||
$ul.css('right', i + 'px') |
|||
offset = $ul.css('right') |
|||
} else { |
|||
$sliceItem.detach() |
|||
$ul.css('right', 0) |
|||
$ul.prepend($sliceItem) |
|||
$sliceItem = $($ul.find('li')[len - 1]) |
|||
range = $sliceItem.outerWidth(true) |
|||
} |
|||
}, 50) |
|||
} |
|||
var top = function() { |
|||
var offset, i, |
|||
range, |
|||
$sliceItem |
|||
|
|||
$sliceItem = $($item[0]) |
|||
range = $sliceItem.outerHeight(true) |
|||
timer = setInterval(function() { |
|||
offset = $ul.css('top') |
|||
offset = parseInt(offset) |
|||
if (offset > -range) { |
|||
i = offset - 1 |
|||
$ul.css('top', i + 'px') |
|||
offset = $ul.css('top') |
|||
} else { |
|||
$sliceItem.detach() |
|||
$ul.css('top', 0) |
|||
$ul.append($sliceItem) |
|||
$sliceItem = $($ul.find('li')[0]) |
|||
range = $sliceItem.outerHeight(true) |
|||
} |
|||
}, 50) |
|||
} |
|||
var bottom = function() { |
|||
var offset, i, |
|||
range, |
|||
$sliceItem |
|||
|
|||
$sliceItem = $($item[len - 1]) |
|||
range = $sliceItem.outerHeight(true) |
|||
timer = setInterval(function() { |
|||
offset = $ul.css('bottom') |
|||
offset = parseInt(offset) |
|||
if (offset > -range) { |
|||
i = offset - 1 |
|||
$ul.css('bottom', i + 'px') |
|||
offset = $ul.css('bottom') |
|||
} else { |
|||
$sliceItem.detach() |
|||
$ul.css('bottom', 0) |
|||
$ul.prepend($sliceItem) |
|||
$sliceItem = $($ul.find('li')[len - 1]) |
|||
range = $sliceItem.outerHeight(true) |
|||
} |
|||
}, 50) |
|||
} |
|||
var init = function() { |
|||
$self.hover(function() { |
|||
clearInterval(timer) |
|||
}, function() { |
|||
|
|||
}) |
|||
} |
|||
|
|||
// init();
|
|||
return { |
|||
left: left, |
|||
right: right, |
|||
top: top, |
|||
bottom: bottom |
|||
} |
|||
} |
|||
})(jQuery) |
|||
@ -0,0 +1,322 @@ |
|||
/* |
|||
* 3d标签云 |
|||
* 功能：鼠标移入标签，当前标签静止放大 |
|||
* 说明：radius 控制滚动区域（横椭圆、纵椭圆、正圆） |
|||
* 版本：2.2 |
|||
* */ |
|||
|
|||
window.tagCloud = (function(win, doc) { |
|||
// 判断对象
|
|||
function isObject(obj) { |
|||
return Object.prototype.toString.call(obj) === '[object Object]' |
|||
} |
|||
|
|||
// 构造函数
|
|||
function TagCloud(options) { |
|||
var self = this |
|||
self.config = TagCloud._getConfig(options) |
|||
self.box = self.config.element // 组件元素
|
|||
self.fontsize = self.config.fontsize // 平均字体大小
|
|||
|
|||
if (Number.isInteger(self.config.radius)) { |
|||
self._radiusX = self._radiusY = self.config.radius |
|||
} else if (self.config.radius instanceof Array) { |
|||
if (self.config.radius.length === 1) { |
|||
self._radiusX = self._radiusY = self.config.radius[0] |
|||
} else { |
|||
self._radiusX = self.config.radius[0] |
|||
self._radiusY = self.config.radius[1] |
|||
} |
|||
} |
|||
|
|||
self.radius = self._radiusX // 滚动半径
|
|||
|
|||
_ratio = Math.round(self._radiusX * 10 / self._radiusY) / 10 // 滚动区域比例，保留一位小数
|
|||
if (_ratio < 1) { // 焦点在Y轴的椭圆
|
|||
self.ratioX = _ratio |
|||
self.ratioY = 1 |
|||
self.radius = self._radiusY // 滚动半径，选择长半径
|
|||
} else if (_ratio > 1) { // 焦点在X轴的椭圆
|
|||
self.ratioX = 1 |
|||
self.ratioY = _ratio |
|||
} else { |
|||
self.ratioX = self.ratioY = 1 // 正圆
|
|||
} |
|||
|
|||
self.depth = 2 * self.radius // 滚动深度
|
|||
self.size = 2 * self.radius // 随鼠标滚动变速作用区域
|
|||
self.mspeed = TagCloud._getMsSpeed(self.config.mspeed) |
|||
self.ispeed = TagCloud._getIsSpeed(self.config.ispeed) |
|||
self.items = self._getItems() |
|||
|
|||
self.direction = self.config.direction // 初始滚动方向
|
|||
self.keep = self.config.keep // 鼠标移出后是否保持之前滚动
|
|||
|
|||
// 初始化
|
|||
self.active = false // 是否为激活状态
|
|||
self.lasta = 1 |
|||
self.lastb = 1 |
|||
self.mouseX0 = self.ispeed * Math.sin(self.direction * Math.PI / 180) // 鼠标与滚动圆心x轴初始距离
|
|||
self.mouseY0 = -self.ispeed * Math.cos(self.direction * Math.PI / 180) // 鼠标与滚动圆心y轴初始距离
|
|||
self.mouseX = self.mouseX0 // 鼠标与滚动圆心x轴距离
|
|||
self.mouseY = self.mouseY0 // 鼠标与滚动圆心y轴距离
|
|||
self.index = -1 |
|||
|
|||
// 鼠标移入
|
|||
TagCloud._on(self.box, 'mouseover', function() { |
|||
self.active = true |
|||
}) |
|||
// 鼠标移出
|
|||
TagCloud._on(self.box, 'mouseout', function() { |
|||
self.active = false |
|||
}) |
|||
|
|||
// 鼠标在内移动
|
|||
TagCloud._on(self.keep ? win : self.box, 'mousemove', function(ev) { |
|||
var oEvent = win.event || ev |
|||
var boxPosition = self.box.getBoundingClientRect() |
|||
self.mouseX = (oEvent.clientX - (boxPosition.left + self.box.offsetWidth / 2)) / 5 |
|||
self.mouseY = (oEvent.clientY - (boxPosition.top + self.box.offsetHeight / 2)) / 5 |
|||
}) |
|||
|
|||
for (var j = 0, len = self.items.length; j < len; j++) { |
|||
self.items[j].element.index = j |
|||
// 鼠标移出子元素，当前元素静止放大
|
|||
self.items[j].element.onmouseover = function() { |
|||
self.index = this.index |
|||
} |
|||
// 鼠标移出子元素，当前元素继续滚动
|
|||
self.items[j].element.onmouseout = function() { |
|||
self.index = -1 |
|||
} |
|||
} |
|||
|
|||
// 定时更新
|
|||
TagCloud.boxs.push(self.box) |
|||
self.update(self) // 初始更新
|
|||
self.box.style.visibility = 'visible' |
|||
self.box.style.position = 'relative' |
|||
for (var j = 0, len = self.items.length; j < len; j++) { |
|||
self.items[j].element.style.position = 'absolute' |
|||
self.items[j].element.style.zIndex = j + 1 |
|||
} |
|||
self.up = setInterval(function() { |
|||
self.update(self) |
|||
}, 30) |
|||
} |
|||
|
|||
// 实例
|
|||
TagCloud.boxs = [] // 实例元素数组
|
|||
// 静态方法们
|
|||
TagCloud._set = function(element) { |
|||
if (TagCloud.boxs.indexOf(element) === -1) { // ie8不支持数组的indexOf方法，所以自定义indexOf
|
|||
return true |
|||
} |
|||
} |
|||
|
|||
// 添加数组IndexOf方法
|
|||
if (!Array.prototype.indexOf) { |
|||
// Array.prototype.indexOf = function (elt /*, from*/) {
|
|||
Array.prototype.indexOf = function(elt) { |
|||
var len = this.length >>> 0 |
|||
var from = Number(arguments[1]) || 0 |
|||
from = (from < 0) |
|||
? Math.ceil(from) |
|||
: Math.floor(from) |
|||
if (from < 0) { from += len } |
|||
|
|||
for (; from < len; from++) { |
|||
if (from in this && this[from] === elt) { return from } |
|||
} |
|||
return -1 |
|||
} |
|||
} |
|||
|
|||
TagCloud._getConfig = function(config) { |
|||
var defaultConfig = { // 默认值
|
|||
fontsize: 16, // 基本字体大小, 单位px
|
|||
radius: 60, // 滚动纵轴半径, 默认60, 单位px，取值60，[60]，[60, 60]
|
|||
mspeed: 'normal', // 滚动最大速度, 取值: slow, normal(默认), fast
|
|||
ispeed: 'normal', // 滚动初速度, 取值: slow, normal(默认), fast
|
|||
direction: 135, // 初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
|
|||
keep: true, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
|
|||
multicolour: true // 是否为彩色字体，颜色随机，取值：true(默认),false
|
|||
} |
|||
|
|||
if (isObject(config)) { |
|||
for (var i in config) { |
|||
if (config.hasOwnProperty(i)) { // hasOwnProperty()用来判断一个属性是定义在对象本身而不是继承自原型链
|
|||
defaultConfig[i] = config[i] // 用户配置
|
|||
} |
|||
} |
|||
} |
|||
|
|||
return defaultConfig// 配置 Merge
|
|||
} |
|||
|
|||
TagCloud._getMsSpeed = function(mspeed) { // 滚动最大速度
|
|||
var speedMap = { |
|||
slow: 1.5, |
|||
normal: 3, |
|||
fast: 5 |
|||
} |
|||
return speedMap[mspeed] || 3 |
|||
} |
|||
TagCloud._getIsSpeed = function(ispeed) { // 滚动初速度
|
|||
var speedMap = { |
|||
slow: 10, |
|||
normal: 25, |
|||
fast: 50 |
|||
} |
|||
return speedMap[ispeed] || 25 |
|||
} |
|||
TagCloud._getSc = function(a, b) { |
|||
var l = Math.PI / 180 |
|||
// 数组顺序0,1,2,3表示asin,acos,bsin,bcos
|
|||
return [ |
|||
Math.sin(a * l), |
|||
Math.cos(a * l), |
|||
Math.sin(b * l), |
|||
Math.cos(b * l) |
|||
] |
|||
} |
|||
|
|||
TagCloud._on = function(ele, eve, handler, cap) { |
|||
if (ele.addEventListener) { |
|||
ele.addEventListener(eve, handler, cap) |
|||
} else if (ele.attachEvent) { |
|||
ele.attachEvent('on' + eve, handler) |
|||
} else { |
|||
ele['on' + eve] = handler |
|||
} |
|||
} |
|||
|
|||
// 原型方法
|
|||
TagCloud.prototype = { |
|||
constructor: TagCloud, // 反向引用构造器
|
|||
|
|||
update: function() { |
|||
var self = this; var a; var b |
|||
|
|||
if (!self.active && !self.keep) { |
|||
self.mouseX = Math.abs(self.mouseX - self.mouseX0) < 1 ? self.mouseX0 : (self.mouseX + self.mouseX0) / 2 // 重置鼠标与滚动圆心x轴距离
|
|||
self.mouseY = Math.abs(self.mouseY - self.mouseY0) < 1 ? self.mouseY0 : (self.mouseY + self.mouseY0) / 2 // 重置鼠标与滚动圆心y轴距离
|
|||
} |
|||
|
|||
a = -(Math.min(Math.max(-self.mouseY, -self.size), self.size) * 2 / self.radius) * self.mspeed |
|||
b = (Math.min(Math.max(-self.mouseX, -self.size), self.size) * 2 / self.radius) * self.mspeed |
|||
|
|||
if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) { return } |
|||
|
|||
self.lasta = a |
|||
self.lastb = b |
|||
|
|||
var sc = TagCloud._getSc(a, b) |
|||
|
|||
for (var j = 0, len = self.items.length; j < len; j++) { |
|||
var rx1 = self.items[j].x |
|||
var ry1 = self.items[j].y * sc[1] + self.items[j].z * (-sc[0]) |
|||
var rz1 = self.items[j].y * sc[0] + self.items[j].z * sc[1] |
|||
|
|||
var rx2 = rx1 * sc[3] + rz1 * sc[2] |
|||
var ry2 = ry1 |
|||
var rz2 = rz1 * sc[3] - rx1 * sc[2] |
|||
|
|||
if (self.index == j) { |
|||
self.items[j].scale = 1 // 取值范围0.6 ~ 3
|
|||
self.items[j].fontsize = 18 |
|||
self.items[j].alpha = 1 |
|||
self.items[j].element.style.zIndex = 99 |
|||
} else { |
|||
var per = self.depth / (self.depth + rz2) |
|||
self.items[j].x = rx2 |
|||
self.items[j].y = ry2 |
|||
self.items[j].z = rz2 |
|||
|
|||
self.items[j].scale = per // 取值范围0.6 ~ 3
|
|||
self.items[j].fontsize = Math.ceil(per * 2) + self.fontsize - 6 |
|||
self.items[j].alpha = 1.5 * per - 0.5 |
|||
self.items[j].element.style.zIndex = Math.ceil(per * 10 - 5) |
|||
} |
|||
self.items[j].element.style.fontSize = self.items[j].fontsize + 'px' |
|||
self.items[j].element.style.left = self.items[j].x * self.ratioX + (self.box.offsetWidth - self.items[j].offsetWidth) / 2 + 'px' |
|||
self.items[j].element.style.top = self.items[j].y / self.ratioY + (self.box.offsetHeight - self.items[j].offsetHeight) / 2 + 'px' |
|||
self.items[j].element.style.filter = 'alpha(opacity=' + 100 * self.items[j].alpha + ')' |
|||
self.items[j].element.style.opacity = self.items[j].alpha |
|||
} |
|||
}, |
|||
|
|||
_getItems: function() { |
|||
var self = this |
|||
var items = [] |
|||
var element = self.box.children // children 全部是Element
|
|||
var length = element.length |
|||
var item |
|||
|
|||
for (var i = 0; i < length; i++) { |
|||
item = {} |
|||
item.angle = {} |
|||
item.angle.phi = Math.acos(-1 + (2 * i + 1) / length) |
|||
item.angle.theta = Math.sqrt((length + 1) * Math.PI) * item.angle.phi |
|||
item.element = element[i] |
|||
item.offsetWidth = item.element.offsetWidth |
|||
item.offsetHeight = item.element.offsetHeight |
|||
item.x = self.radius / 2 * 1.5 * Math.cos(item.angle.theta) * Math.sin(item.angle.phi) |
|||
item.y = self.radius / 2 * 1.5 * Math.sin(item.angle.theta) * Math.sin(item.angle.phi) |
|||
item.z = self.radius / 2 * 1.5 * Math.cos(item.angle.phi) |
|||
item.element.style.left = item.x * self.ratioX + (self.box.offsetWidth - item.offsetWidth) / 2 + 'px' |
|||
item.element.style.top = item.y / self.ratioY + (self.box.offsetHeight - item.offsetHeight) / 2 + 'px' |
|||
if (self.config.multicolour) { // 初始化文字颜色为彩色
|
|||
_color = self._randomNumBoth(0, 360) // 定义色相 (0 到 360) - 0 (或 360) 红，120绿，180青，240蓝，300紫
|
|||
_light = self._randomNumBoth(30, 60) // 定义亮度 0% 为暗, 50% 为普通, 100% 为白
|
|||
item.element.style.color = 'hsl(' + _color + ', 100%, ' + _light + '%)' // 中间值为饱和度; 0%灰色，100%全色
|
|||
// item.element.style.color = 'rgb(' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ')';
|
|||
} |
|||
items.push(item) |
|||
} |
|||
return items // 单元素数组
|
|||
}, |
|||
|
|||
// 取随机值，Min ≤ num ≤ Max
|
|||
_randomNumBoth: function(Min, Max) { |
|||
var Range = Max - Min |
|||
var Rand = Math.random() |
|||
var num = Min + Math.round(Rand * Range) // 四舍五入
|
|||
return num |
|||
} |
|||
} |
|||
|
|||
if (!doc.querySelectorAll) { // ie7不支持querySelectorAll，所以要重新定义
|
|||
doc.querySelectorAll = function(selectors) { |
|||
var style = doc.createElement('style'); var elements = []; var element |
|||
doc.documentElement.firstChild.appendChild(style) |
|||
doc._qsa = [] |
|||
|
|||
style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}' |
|||
window.scrollBy(0, 0) |
|||
style.parentNode.removeChild(style) |
|||
|
|||
while (doc._qsa.length) { |
|||
element = doc._qsa.shift() |
|||
element.style.removeAttribute('x-qsa') |
|||
elements.push(element) |
|||
} |
|||
doc._qsa = null |
|||
return elements |
|||
} |
|||
} |
|||
|
|||
return function(options) { // factory
|
|||
options = options || {} // 短路语法
|
|||
var selector = options.selector || '.tagcloud' // 默认选择class为tagcloud的元素
|
|||
var elements = doc.querySelectorAll(selector) |
|||
var instance = [] |
|||
for (var index = 0, len = elements.length; index < len; index++) { |
|||
options.element = elements[index] |
|||
if (TagCloud._set(options.element)) { |
|||
instance.push(new TagCloud(options)) |
|||
} |
|||
} |
|||
return instance |
|||
} |
|||
})(window, document) |
|||
1
src/assets/json/qy.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> |
|||
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> |
|||
<use :xlink:href="iconName" /> |
|||
</svg> |
|||
</template> |
|||
|
|||
<script> |
|||
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage |
|||
import { isExternal } from '@/utils/index' |
|||
|
|||
export default { |
|||
name: 'SvgIcon', |
|||
props: { |
|||
iconClass: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
className: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
isExternal() { |
|||
return isExternal(this.iconClass) |
|||
}, |
|||
iconName() { |
|||
return `#icon-${this.iconClass}` |
|||
}, |
|||
svgClass() { |
|||
if (this.className) { |
|||
return 'svg-icon ' + this.className |
|||
} else { |
|||
return 'svg-icon' |
|||
} |
|||
}, |
|||
styleExternalIcon() { |
|||
return { |
|||
mask: `url(${this.iconClass}) no-repeat 50% 50%`, |
|||
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%` |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.svg-icon { |
|||
width: 1em; |
|||
height: 1em; |
|||
vertical-align: -0.15em; |
|||
fill: currentColor; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.svg-external-icon { |
|||
background-color: currentColor; |
|||
mask-size: cover !important; |
|||
display: inline-block; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,10 @@ |
|||
import Vue from 'vue' |
|||
import SvgIcon from '@/components/SvgIcon'// svg component
|
|||
|
|||
// register globally
|
|||
Vue.component('svg-icon', SvgIcon) |
|||
|
|||
// 进行导入所有的svg格式 如果手动引入 需要依次引入
|
|||
const req = require.context('./svg', false, /\.svg$/) |
|||
const requireAll = requireContext => requireContext.keys().map(requireContext) |
|||
requireAll(req) |
|||
@ -0,0 +1 @@ |
|||
<svg xmlns="http://www.w3.org/2000/svg" pointer-events="none" class="leaflet-zoom-animated" width="1447" height="826" viewBox="-601 -370 1447 826" style="transform: translate3d(-601px, -370px, 0px);"><g><path class="leaflet-interactive" stroke="black" stroke-opacity="1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-opacity="1" fill-rule="evenodd" d="M7 -108L5 -106L6 -104L15 -93L21 -91L28 -83L35 -81L38 -77L44 -75L47 -77L50 -75L55 -76L58 -74L58 -69L60 -65L66 -67L68 -66L64 -59L64 -56L71 -52L73 -49L83 -48L83 -45L81 -43L82 -39L78 -35L79 -30L82 -29L77 -25L78 -20L75 -19L90 -9L90 -2L87 1L89 6L89 17L93 25L93 34L88 39L92 46L92 54L99 53L102 56L106 65L105 76L108 91L105 97L108 97L109 100L112 101L114 104L111 111L115 113L113 121L121 131L121 142L124 144L129 144L133 142L140 146L145 144L144 148L149 148L149 152L153 153L151 159L152 162L156 165L159 171L164 170L165 172L171 186L170 196L175 207L175 213L168 222L170 227L174 225L180 228L185 241L184 243L178 245L178 252L183 268L187 272L195 271L197 273L196 277L205 283L210 288L209 290L213 291L218 295L221 295L226 292L231 294L234 293L235 291L232 289L239 285L239 276L242 269L255 277L256 278L253 281L249 279L244 282L243 284L245 289L240 292L240 294L245 298L245 302L257 306L257 311L265 320L263 324L267 328L269 328L275 323L288 309L296 307L307 296L315 291L321 290L323 292L332 283L335 283L337 276L336 270L334 270L332 267L332 261L326 260L328 251L323 252L317 248L312 240L317 233L315 219L318 215L319 210L320 196L318 189L324 181L326 169L323 166L319 171L317 170L317 168L313 168L309 173L308 172L308 161L310 151L308 147L304 148L303 145L298 144L297 146L294 144L293 133L295 127L290 125L289 123L289 113L291 113L293 116L295 116L296 114L294 112L294 108L296 107L296 101L292 98L290 93L297 92L301 86L298 84L298 81L295 78L302 73L298 65L301 62L305 62L306 60L308 60L316 67L317 72L318 66L325 58L339 57L342 52L342 40L334 33L326 32L306 46L296 58L291 57L293 53L292 46L296 39L300 39L299 36L293 33L296 31L298 27L299 29L302 29L307 19L303 17L305 15L305 12L303 10L298 7L292 7L290 5L289 0L291 0L291 -5L294 -8L295 -12L289 -16L287 -15L285 -19L283 -18L279 -20L276 -23L278 -26L273 -29L269 -28L269 -24L266 -24L265 -17L263 -17L263 -19L253 -24L246 -25L239 -23L231 -28L230 -26L220 -26L215 -23L214 -20L219 -15L219 -12L224 -14L223 -12L227 -9L222 4L220 4L215 -1L212 -7L212 -12L204 -15L196 -25L197 -27L192 -35L192 -39L187 -50L187 -53L179 -62L174 -74L174 -84L168 -85L164 -88L162 -92L159 -94L157 -100L152 -104L149 -113L144 -113L140 -107L131 -105L128 -102L122 -104L126 -110L126 -115L124 -116L114 -113L114 -111L110 -107L105 -107L99 -113L99 -118L95 -119L90 -117L85 -120L85 -127L89 -130L89 -132L87 -132L88 -137L86 -137L82 -132L78 -132L73 -140L70 -141L63 -139L63 -134L59 -134L57 -132L54 -132L45 -138L37 -136L33 -128L34 -115L30 -114L32 -112L27 -110L25 -107L20 -108L15 -105L9 -107z" id="祁阳市"/></g></svg> |
|||
@ -0,0 +1 @@ |
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1717578633468" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5528" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M512.9082 73.160632c194.265533 0.331794 351.701904 157.768165 352.033698 352.033698 0.497691 92.570595-35.999676 181.408505-101.446092 246.854921l-5.474605 4.562171L512.991148 920.72904 268.87353 677.523856l-5.474605-5.474605c-65.446416-65.446416-102.026731-154.284326-101.446092-246.854921-0.331794-194.099635 156.689834-351.701904 350.706521-352.033698h0.248846m0.082948-73.160632C277.997872 0.165897 87.630921 190.698744 87.796819 425.692021 87.879767 537.423734 131.842505 644.593277 210.311845 724.140948l302.596355 299.859052 301.68392-300.854435c164.818793-166.892507 163.159822-435.894694-3.815634-600.713487C731.477661 44.128635 624.474016 0.082949 512.991148 0z m0 219.398947c80.874848-0.082949 146.570109 65.529364 146.57011 146.404212s-65.529364 146.570109-146.404213 146.57011c-80.874848 0.082949-146.570109-65.529364-146.570109-146.404213v-0.248845c0.497691-80.626002 65.695261-145.823572 146.321264-146.321264" fill="#3F92F6" p-id="5529"></path></svg> |
|||
@ -0,0 +1,674 @@ |
|||
<template> |
|||
<div style="position: relative;"> |
|||
<!-- <Header :header-title="headerTitle" /> --> |
|||
<div style="display: flex; justify-content: center; align-items: center; width: 100%; height:calc(100vh - 1.125rem); border: 1px solid red; overflow: hidden;"> |
|||
<div style="width:6.21rem; height:8.61rem; position: relative; overflow: hidden;"> |
|||
<!-- <svg-icon icon-class="map" style="width: 100%; height: 100%; " /> --> |
|||
<img class="map_img" src="@/assets/images/map.png" alt=""> |
|||
<div class="place-point"> |
|||
<div v-for="(item,index) in libInfoData" v-show="libIndex===index" :key="index" :class="['point'+ parseInt(index+1),'bouncePoint']" style="position: absolute"> |
|||
<p style="font-size: .14rem; ">{{ item.name }}</p> |
|||
<i class="iconfont icon-weizhi" /> |
|||
<div class="pulse" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="lib-info"> |
|||
<div class="lib-title">{{ libCurrent && libCurrent.name }}</div> |
|||
图片切换{{ currentIndex+1 }} |
|||
<swiper v-if="swiperOption" :key="swiperKey" ref="mySwiper" class="swiperLib" :options="swiperOption"> |
|||
<swiper-slide v-for="(item,index) in displayedImages" :key="index"> |
|||
<div class="book-img" style="width: 100%; height: 3rem;"> |
|||
<img :src="item.cover" :onerror="defaultImg" style="width: 100%;"> |
|||
</div> |
|||
</swiper-slide> |
|||
<!-- 标页码 --> |
|||
<div slot="pagination" class="swiper-pagination" /> |
|||
</swiper> |
|||
<div class="lib-content"> |
|||
<span>藏书量：4787</span> |
|||
<span>办证量：74</span> |
|||
<span>占地面积：40平方米</span> |
|||
<p>关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知</p> |
|||
</div> |
|||
</div> |
|||
<div class="read-num"> |
|||
<div class="lib-title">{{ libCurrent && libCurrent.name }}</div> |
|||
<h6>读者数量</h6> |
|||
<h6>借阅TOP10</h6> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { swiper, swiperSlide } from 'vue-awesome-swiper' |
|||
import 'swiper/dist/css/swiper.css' |
|||
export default { |
|||
components: { |
|||
swiper, |
|||
swiperSlide |
|||
}, |
|||
data() { |
|||
return { |
|||
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
|||
timeTicket: null, |
|||
headerTitle: '祁阳图书馆', |
|||
libInfoData: [ |
|||
{ 'id': '1', 'name': '龙山街道分管' }, { 'id': '2', 'name': '黎家坪分馆' }, { 'id': '3', 'name': '大村甸分馆' }, { 'id': '4', 'name': '陶铸图书馆' }, { 'id': '5', 'name': '邵家岭自助馆' }, { 'id': '6', 'name': '下马渡分馆' }, { 'id': '7', 'name': '复兴路自助馆' }, { 'id': '8', 'name': '七里桥分馆' }, { 'id': '9', 'name': '少儿馆' }, { 'id': '10', 'name': '茅竹镇分馆' }, { 'id': '11', 'name': '观音滩镇分馆' }, |
|||
{ 'id': '12', 'name': '凯俊盛科城分馆' }, { 'id': '13', 'name': '进宝塘镇分馆' }, { 'id': '14', 'name': '三口塘镇分馆' }, { 'id': '15', 'name': '肖家镇分馆' }, { 'id': '16', 'name': '潘市镇分馆' }, { 'id': '17', 'name': '大忠桥镇分馆' }, { 'id': '18', 'name': '浯溪街道分馆' }, { 'id': '19', 'name': '长虹街道分馆' }, { 'id': '20', 'name': '白水镇分馆' }, { 'id': '21', 'name': '白竹湖自助馆' } |
|||
], |
|||
libImg: [ |
|||
{ |
|||
'id': 1, |
|||
'cover': require('../../assets/images/lib.jpg') |
|||
}, |
|||
{ |
|||
'id': 2, |
|||
'cover': require('../../assets/images/lib2.jpg') |
|||
}, |
|||
{ |
|||
'id': 3, |
|||
'cover': require('../../assets/images/lib3.jpg') |
|||
}, |
|||
{ |
|||
'id': 4, |
|||
'cover': require('../../assets/images/lib4.jpg') |
|||
}, |
|||
{ |
|||
'id': 5, |
|||
'cover': require('../../assets/images/lib5.jpg') |
|||
} |
|||
], |
|||
libIndex: 0, |
|||
libCurrent: null, |
|||
swiperKey: 1, |
|||
currentIndex: 0, |
|||
displayedImages: [], |
|||
swiperOption: null |
|||
} |
|||
}, |
|||
computed: { |
|||
swiper() { |
|||
return this.$refs.mySwiper.swiper |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
clearTimeout(this.timeTicket) |
|||
}, |
|||
|
|||
mounted() { |
|||
this.init() |
|||
this.libCurrent = this.libInfoData[this.libIndex] |
|||
this.updatePageWithData() |
|||
}, |
|||
methods: { |
|||
updatePageWithData() { |
|||
console.log('update') |
|||
// 生成一个随机数来确定要显示的图片数量 |
|||
const displayCountOptions = [1, 2, 3, 5] |
|||
const displayCount = displayCountOptions[Math.floor(Math.random() * displayCountOptions.length)] |
|||
|
|||
// 从 libImg 中随机选择要显示的图片对象 |
|||
const shuffledLibImg = this.libImg.slice().sort(() => Math.random() - 0.5) // 随机打乱数组顺序 |
|||
this.displayedImages = shuffledLibImg.slice(0, displayCount) |
|||
|
|||
this.currentIndex = 0 |
|||
this.swiperKey += 1 |
|||
console.log(this.displayedImages) |
|||
|
|||
if (this.displayedImages.length === 1) { |
|||
setTimeout(() => { |
|||
this.libIndex++ |
|||
this.libCurrent = this.libInfoData[this.libIndex] |
|||
this.updatePageWithData() |
|||
}, 3000) |
|||
} |
|||
}, |
|||
init() { |
|||
const _self = this |
|||
this.swiperOption = { |
|||
// loop: true, |
|||
// initialSlide: 0, |
|||
notNextTick: false, // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true |
|||
// slidesPerView: 3, // 数量 |
|||
// spaceBetween: 30, // 间距 |
|||
// slidesPerGroup: 1, // 分几组 |
|||
// 禁止滑动 |
|||
noSwiping: true, |
|||
observer: true, // 开启动态检查器 |
|||
direction: 'horizontal', // 设置水平还是垂直vertical |
|||
// grabCursor: true, //光标样式 |
|||
// setWrapperSize: true, |
|||
// autoHeight: true, |
|||
// centeredSlides: true, |
|||
// paginationClickable: true, |
|||
// keyboard: true, //键盘控制 |
|||
// mousewheelControl: true, //鼠标轮控制 |
|||
autoplay: { |
|||
delay: 3000, // 自动切换的时间间隔，单位ms |
|||
stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换 |
|||
disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay |
|||
// reverseDirection: false, //开启反向自动轮播 |
|||
// waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时 |
|||
}, |
|||
// 显示分页 |
|||
pagination: { |
|||
el: '.swiper-pagination', |
|||
type: 'progressbar' |
|||
// progressbarOpposite: true, |
|||
// clickable: true // 允许分页点击跳转 |
|||
}, |
|||
on: { |
|||
slideChangeTransitionEnd() { |
|||
console.log(' this.activeIndex', this.activeIndex) |
|||
console.log('_self.libIndex', _self.libIndex) |
|||
_self.currentIndex = this.activeIndex |
|||
|
|||
if (_self.currentIndex === _self.displayedImages.length - 1) { |
|||
setTimeout(() => { |
|||
if (_self.libIndex === _self.libInfoData.length - 1) { |
|||
_self.libIndex = 0 |
|||
} else { |
|||
_self.libIndex++ |
|||
} |
|||
_self.libCurrent = _self.libInfoData[_self.libIndex] |
|||
_self.updatePageWithData() |
|||
_self.currentIndex = 0 |
|||
}, 3000) |
|||
_self.$refs.mySwiper.swiper.update() |
|||
_self.$refs.mySwiper.swiper.autoplay.start() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
.map_img{ |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
margin: 0 auto; |
|||
} |
|||
.place-point{ |
|||
position: relative; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
.iconfont{ |
|||
font-size: .3rem; |
|||
color: yellow; |
|||
} |
|||
.bouncePoint{ |
|||
-webkit-animation-name: bounce; |
|||
-moz-animation-name: bounce; |
|||
-o-animation-name: bounce; |
|||
-ms-animation-name: bounce; |
|||
animation-name: bounce; |
|||
-webkit-animation-fill-mode: both; |
|||
-moz-animation-fill-mode: both; |
|||
-o-animation-fill-mode: both; |
|||
-ms-animation-fill-mode: both; |
|||
animation-fill-mode: both; |
|||
-webkit-animation-duration: 1s; |
|||
-moz-animation-duration: 1s; |
|||
-o-animation-duration: 1s; |
|||
-ms-animation-duration: 1s; |
|||
animation-duration: 1s; |
|||
} |
|||
.point1{ |
|||
left: 10px; |
|||
top: 40px; |
|||
} |
|||
.point2{ |
|||
left: 90px; |
|||
top: 80px; |
|||
} |
|||
.point3{ |
|||
left: 133px; |
|||
top: 138px; |
|||
} |
|||
.point4{ |
|||
left: 127px; |
|||
top: 206px; |
|||
} |
|||
.point5{ |
|||
left: 171px; |
|||
top: 277px; |
|||
} |
|||
.point6{ |
|||
left: 176px; |
|||
top: 370px; |
|||
} |
|||
.point7{ |
|||
left: 297px; |
|||
top: 424px; |
|||
} |
|||
.point8{ |
|||
left: 264px; |
|||
top: 485px; |
|||
} |
|||
.point9{ |
|||
left: 374px; |
|||
top: 624px; |
|||
} |
|||
.point10{ |
|||
right: 49px; |
|||
bottom: 133px; |
|||
} |
|||
.point11{ |
|||
right: 86px; |
|||
bottom: 251px; |
|||
} |
|||
.point12{ |
|||
right: 66px; |
|||
bottom: 304px; |
|||
} |
|||
.point13{ |
|||
right: 16px; |
|||
top: 254px; |
|||
} |
|||
.point14{ |
|||
right: 124px; |
|||
top: 220px; |
|||
} |
|||
.point15{ |
|||
right: 124px; |
|||
top: 174px; |
|||
} |
|||
.point16{ |
|||
right: 169px; |
|||
top: 264px; |
|||
} |
|||
.point17{ |
|||
right: 239px; |
|||
top: 170px; |
|||
} |
|||
.point18{ |
|||
right: 229px; |
|||
top: 120px; |
|||
} |
|||
.point19{ |
|||
right: 280px; |
|||
top: 80px; |
|||
} |
|||
.point20{ |
|||
right: 289px; |
|||
top:40px; |
|||
} |
|||
.point21{ |
|||
right: 380px; |
|||
top:10px; |
|||
} |
|||
} |
|||
.lib-info{ |
|||
position: absolute; |
|||
left: 1rem; |
|||
top: 2rem; |
|||
width: 400px; |
|||
border: 1px solid #fff; |
|||
.lib-content{ |
|||
font-size: .2rem; |
|||
} |
|||
} |
|||
.lib-title{ |
|||
line-height: .45rem; |
|||
text-align: center; |
|||
} |
|||
.read-num{ |
|||
position: absolute; |
|||
right: 1rem; |
|||
top: 2rem; |
|||
width: 200px; |
|||
height: 600px; |
|||
border: 1px solid #fff; |
|||
} |
|||
|
|||
// .pin { |
|||
// width: 30px; |
|||
// height: 30px; |
|||
// border-radius: 50% 50% 50% 0; |
|||
// background: #89849b; |
|||
// position: absolute; |
|||
// -webkit-transform: rotate(0); |
|||
// -moz-transform: rotate(0); |
|||
// -o-transform: rotate(0); |
|||
// -ms-transform: rotate(0); |
|||
// transform: rotate(0); |
|||
// left: 50%; |
|||
// top: 50%; |
|||
// margin: -20px 0 0 -20px; |
|||
// -webkit-animation-name: bounce; |
|||
// -moz-animation-name: bounce; |
|||
// -o-animation-name: bounce; |
|||
// -ms-animation-name: bounce; |
|||
// animation-name: bounce; |
|||
// -webkit-animation-fill-mode: both; |
|||
// -moz-animation-fill-mode: both; |
|||
// -o-animation-fill-mode: both; |
|||
// -ms-animation-fill-mode: both; |
|||
// animation-fill-mode: both; |
|||
// -webkit-animation-duration: 1s; |
|||
// -moz-animation-duration: 1s; |
|||
// -o-animation-duration: 1s; |
|||
// -ms-animation-duration: 1s; |
|||
// animation-duration: 1s; |
|||
// } |
|||
// .pin:after { |
|||
// content: ''; |
|||
// width: 14px; |
|||
// height: 14px; |
|||
// margin: 8px 0 0 8px; |
|||
// background: #2f2f2f; |
|||
// position: absolute; |
|||
// border-radius: 50%; |
|||
// } |
|||
.pulse { |
|||
background: rgba(0,0,0,0.2); |
|||
border-radius: 50%; |
|||
height: 14px; |
|||
width: 14px; |
|||
margin: -9px 0 0 5px; |
|||
// position: absolute; |
|||
// left: 50%; |
|||
// top: 50%; |
|||
// margin: 11px 0px 0px -12px; |
|||
-webkit-transform: rotateX(55deg); |
|||
-moz-transform: rotateX(55deg); |
|||
-o-transform: rotateX(55deg); |
|||
-ms-transform: rotateX(55deg); |
|||
transform: rotateX(55deg); |
|||
z-index: -2; |
|||
} |
|||
.pulse:after { |
|||
content: ""; |
|||
border-radius: 50%; |
|||
height: 40px; |
|||
width: 40px; |
|||
position: absolute; |
|||
margin: -13px 0 0 -13px; |
|||
-webkit-animation: pulsate 1s ease-out; |
|||
-moz-animation: pulsate 1s ease-out; |
|||
-o-animation: pulsate 1s ease-out; |
|||
-ms-animation: pulsate 1s ease-out; |
|||
animation: pulsate 1s ease-out; |
|||
-webkit-animation-iteration-count: infinite; |
|||
-moz-animation-iteration-count: infinite; |
|||
-o-animation-iteration-count: infinite; |
|||
-ms-animation-iteration-count: infinite; |
|||
animation-iteration-count: infinite; |
|||
opacity: 0; |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
-webkit-box-shadow: 0 0 1px 2px #89849b; |
|||
box-shadow: 0 0 1px 2px #89849b; |
|||
-webkit-animation-delay: 1.1s; |
|||
-moz-animation-delay: 1.1s; |
|||
-o-animation-delay: 1.1s; |
|||
-ms-animation-delay: 1.1s; |
|||
animation-delay: 1.1s; |
|||
} |
|||
@-moz-keyframes pulsate { |
|||
0% { |
|||
-webkit-transform: scale(0.1, 0.1); |
|||
-moz-transform: scale(0.1, 0.1); |
|||
-o-transform: scale(0.1, 0.1); |
|||
-ms-transform: scale(0.1, 0.1); |
|||
transform: scale(0.1, 0.1); |
|||
opacity: 0; |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
} |
|||
50% { |
|||
opacity: 1; |
|||
-ms-filter: none; |
|||
filter: none; |
|||
} |
|||
100% { |
|||
-webkit-transform: scale(1.2, 1.2); |
|||
-moz-transform: scale(1.2, 1.2); |
|||
-o-transform: scale(1.2, 1.2); |
|||
-ms-transform: scale(1.2, 1.2); |
|||
transform: scale(1.2, 1.2); |
|||
opacity: 0; |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
} |
|||
} |
|||
@-webkit-keyframes pulsate { |
|||
0% { |
|||
-webkit-transform: scale(0.1, 0.1); |
|||
-moz-transform: scale(0.1, 0.1); |
|||
-o-transform: scale(0.1, 0.1); |
|||
-ms-transform: scale(0.1, 0.1); |
|||
transform: scale(0.1, 0.1); |
|||
opacity: 0; |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
} |
|||
50% { |
|||
opacity: 1; |
|||
-ms-filter: none; |
|||
filter: none; |
|||
} |
|||
100% { |
|||
-webkit-transform: scale(1.2, 1.2); |
|||
-moz-transform: scale(1.2, 1.2); |
|||
-o-transform: scale(1.2, 1.2); |
|||
-ms-transform: scale(1.2, 1.2); |
|||
transform: scale(1.2, 1.2); |
|||
opacity: 0; |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
} |
|||
} |
|||
@-o-keyframes pulsate { |
|||
0% { |
|||
-webkit-transform: scale(0.1, 0.1); |
|||
-moz-transform: scale(0.1, 0.1); |
|||
-o-transform: scale(0.1, 0.1); |
|||
-ms-transform: scale(0.1, 0.1); |
|||
transform: scale(0.1, 0.1); |
|||
opacity: 0; |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
} |
|||
50% { |
|||
opacity: 1; |
|||
-ms-filter: none; |
|||
filter: none; |
|||
} |
|||
100% { |
|||
-webkit-transform: scale(1.2, 1.2); |
|||
-moz-transform: scale(1.2, 1.2); |
|||
-o-transform: scale(1.2, 1.2); |
|||
-ms-transform: scale(1.2, 1.2); |
|||
transform: scale(1.2, 1.2); |
|||
opacity: 0; |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
} |
|||
} |
|||
@keyframes pulsate { |
|||
0% { |
|||
-webkit-transform: scale(0.1, 0.1); |
|||
-moz-transform: scale(0.1, 0.1); |
|||
-o-transform: scale(0.1, 0.1); |
|||
-ms-transform: scale(0.1, 0.1); |
|||
transform: scale(0.1, 0.1); |
|||
opacity: 0; |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
} |
|||
50% { |
|||
opacity: 1; |
|||
-ms-filter: none; |
|||
filter: none; |
|||
} |
|||
100% { |
|||
-webkit-transform: scale(1.2, 1.2); |
|||
-moz-transform: scale(1.2, 1.2); |
|||
-o-transform: scale(1.2, 1.2); |
|||
-ms-transform: scale(1.2, 1.2); |
|||
transform: scale(1.2, 1.2); |
|||
opacity: 0; |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
} |
|||
} |
|||
@-moz-keyframes bounce { |
|||
0% { |
|||
opacity: 0; |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
-webkit-transform: translateY(-2000px) rotate(0); |
|||
-moz-transform: translateY(-2000px) rotate(0); |
|||
-o-transform: translateY(-2000px) rotate(0); |
|||
-ms-transform: translateY(-2000px) rotate(0); |
|||
transform: translateY(-2000px) rotate(0); |
|||
} |
|||
60% { |
|||
opacity: 1; |
|||
-ms-filter: none; |
|||
filter: none; |
|||
-webkit-transform: translateY(30px) rotate(0); |
|||
-moz-transform: translateY(30px) rotate(0); |
|||
-o-transform: translateY(30px) rotate(0); |
|||
-ms-transform: translateY(30px) rotate(0); |
|||
transform: translateY(30px) rotate(0); |
|||
} |
|||
80% { |
|||
-webkit-transform: translateY(-10px) rotate(0); |
|||
-moz-transform: translateY(-10px) rotate(0); |
|||
-o-transform: translateY(-10px) rotate(0); |
|||
-ms-transform: translateY(-10px) rotate(0); |
|||
transform: translateY(-10px) rotate(0); |
|||
} |
|||
100% { |
|||
-webkit-transform: translateY(0) rotate(0); |
|||
-moz-transform: translateY(0) rotate(0); |
|||
-o-transform: translateY(0) rotate(0); |
|||
-ms-transform: translateY(0) rotate(0); |
|||
transform: translateY(0) rotate(0); |
|||
} |
|||
} |
|||
@-webkit-keyframes bounce { |
|||
0% { |
|||
opacity: 0; |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
-webkit-transform: translateY(-2000px) rotate(0); |
|||
-moz-transform: translateY(-2000px) rotate(0); |
|||
-o-transform: translateY(-2000px) rotate(0); |
|||
-ms-transform: translateY(-2000px) rotate(0); |
|||
transform: translateY(-2000px) rotate(0); |
|||
} |
|||
60% { |
|||
opacity: 1; |
|||
-ms-filter: none; |
|||
filter: none; |
|||
-webkit-transform: translateY(30px) rotate(0); |
|||
-moz-transform: translateY(30px) rotate(0); |
|||
-o-transform: translateY(30px) rotate(0); |
|||
-ms-transform: translateY(30px) rotate(0); |
|||
transform: translateY(30px) rotate(0); |
|||
} |
|||
80% { |
|||
-webkit-transform: translateY(-10px) rotate(0); |
|||
-moz-transform: translateY(-10px) rotate(0); |
|||
-o-transform: translateY(-10px) rotate(0); |
|||
-ms-transform: translateY(-10px) rotate(0); |
|||
transform: translateY(-10px) rotate(0); |
|||
} |
|||
100% { |
|||
-webkit-transform: translateY(0) rotate(0); |
|||
-moz-transform: translateY(0) rotate(0); |
|||
-o-transform: translateY(0) rotate(0); |
|||
-ms-transform: translateY(0) rotate(0); |
|||
transform: translateY(0) rotate(0); |
|||
} |
|||
} |
|||
@-o-keyframes bounce { |
|||
0% { |
|||
opacity: 0; |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
-webkit-transform: translateY(-2000px) rotate(0); |
|||
-moz-transform: translateY(-2000px) rotate(0); |
|||
-o-transform: translateY(-2000px) rotate(0); |
|||
-ms-transform: translateY(-2000px) rotate(0); |
|||
transform: translateY(-2000px) rotate(0); |
|||
} |
|||
60% { |
|||
opacity: 1; |
|||
-ms-filter: none; |
|||
filter: none; |
|||
-webkit-transform: translateY(30px) rotate(0); |
|||
-moz-transform: translateY(30px) rotate(0); |
|||
-o-transform: translateY(30px) rotate(0); |
|||
-ms-transform: translateY(30px) rotate(0); |
|||
transform: translateY(30px) rotate(0); |
|||
} |
|||
80% { |
|||
-webkit-transform: translateY(-10px) rotate(0); |
|||
-moz-transform: translateY(-10px) rotate(0); |
|||
-o-transform: translateY(-10px) rotate(0); |
|||
-ms-transform: translateY(-10px) rotate(0); |
|||
transform: translateY(-10px) rotate(0); |
|||
} |
|||
100% { |
|||
-webkit-transform: translateY(0) rotate(0); |
|||
-moz-transform: translateY(0) rotate(0); |
|||
-o-transform: translateY(0) rotate(0); |
|||
-ms-transform: translateY(0) rotate(0); |
|||
transform: translateY(0) rotate(0); |
|||
} |
|||
} |
|||
@keyframes bounce { |
|||
0% { |
|||
opacity: 0; |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
-webkit-transform: translateY(-2000px) rotate(0); |
|||
-moz-transform: translateY(-2000px) rotate(0); |
|||
-o-transform: translateY(-2000px) rotate(0); |
|||
-ms-transform: translateY(-2000px) rotate(0); |
|||
transform: translateY(-2000px) rotate(0); |
|||
} |
|||
60% { |
|||
opacity: 1; |
|||
-ms-filter: none; |
|||
filter: none; |
|||
-webkit-transform: translateY(30px) rotate(0); |
|||
-moz-transform: translateY(30px) rotate(0); |
|||
-o-transform: translateY(30px) rotate(0); |
|||
-ms-transform: translateY(30px) rotate(0); |
|||
transform: translateY(30px) rotate(0); |
|||
} |
|||
80% { |
|||
-webkit-transform: translateY(-10px) rotate(0); |
|||
-moz-transform: translateY(-10px) rotate(0); |
|||
-o-transform: translateY(-10px) rotate(0); |
|||
-ms-transform: translateY(-10px) rotate(0); |
|||
transform: translateY(-10px) rotate(0); |
|||
} |
|||
100% { |
|||
-webkit-transform: translateY(0) rotate(0); |
|||
-moz-transform: translateY(0) rotate(0); |
|||
-o-transform: translateY(0) rotate(0); |
|||
-ms-transform: translateY(0) rotate(0); |
|||
transform: translateY(0) rotate(0); |
|||
} |
|||
} |
|||
.swiperLib{ |
|||
height: 3rem; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,232 @@ |
|||
<template> |
|||
<div id="screen-container"> |
|||
<Header :header-title="headerTitle" /> |
|||
<div style="width:100%; height:calc( 100vh - 1.125rem); overflow: hidden;"> |
|||
<!-- <svg-icon icon-class="map" style="width: 100%; height: 100%; " /> --> |
|||
<div ref="chart" class="content" style="width: 100%; height: 100%; " /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Header from '@/views/header/index.vue' |
|||
import mapJson from '@/assets/json/qy.json' |
|||
import { debounce } from 'lodash' // js工具类,按需加载 |
|||
export default { |
|||
components: { |
|||
Header |
|||
}, |
|||
data() { |
|||
return { |
|||
timeTicket: null, |
|||
count: 0, |
|||
len: 0, // 轮播数组的长度， 通过 count % len 可以得到[0, len-1] 数组下标 |
|||
headerTitle: '祁阳图书馆' |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
clearTimeout(this.timeTicket) |
|||
window.removeEventListener('resize', this.resize) |
|||
}, |
|||
|
|||
mounted() { |
|||
this.initChart() // 初始化 |
|||
this.updateChart() // 更新数据，散点轮播显示 |
|||
this.mouseMove() // 鼠标移入移出效果 |
|||
window.addEventListener('resize', debounce(this.resize, 2000)) // 使用事件捕获，由外层向内 |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.$echarts.registerMap('qiyang', mapJson) // 注册map |
|||
this.myChart = this.$echarts.init(this.$refs.chart) // echarts容器实例化 |
|||
|
|||
const initOption = { |
|||
backgroundColor: '#fff', |
|||
geo: { // 2D地图坐标系 |
|||
show: false, // 不显示地图，用于为动效散点提供2D地图坐标系 |
|||
map: 'centerMap', |
|||
roam: false, // 禁用缩放、拖拽 |
|||
layoutCenter: ['50%', '47%'], // 地图中心位置 |
|||
layoutSize: '90%', // 控制地图尺寸（地图的宽度和高度都会改变） |
|||
aspectScale: 0.78, // 控制地图长宽比（此值越小地图越窄，越大地图越宽） |
|||
zlevel: 1 |
|||
}, |
|||
geo3D: { // 3D地图坐标系 |
|||
show: true, // 显示3D地图版块 |
|||
map: 'centerMap', |
|||
top: '-20', |
|||
regionHeight: 16, // 地图版块厚度 |
|||
label: { |
|||
show: true, |
|||
borderRadius: 0, |
|||
distanca: 0, |
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: '#C23531', // 地图初始化区域字体颜色 |
|||
borderWidth: 1, |
|||
borderColor: '#FFFF10' |
|||
} |
|||
}, |
|||
itemStyle: { |
|||
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。 |
|||
color: 'rgba(252,85,49, 0.5)', // 地图板块的颜色 |
|||
opacity: 1, // 图形的不透明度 [ default: 1 ] |
|||
borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ] |
|||
borderColor: '#FFF500' // 图形描边的颜色。[ default: #333 ] |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
color: '#fff000' |
|||
}, |
|||
itemStyle: { |
|||
color: '#ff0', |
|||
opacity: 0.5 |
|||
} |
|||
}, |
|||
light: { |
|||
// 光照阴影 |
|||
main: { |
|||
color: '#FFFFFF', // 光照颜色 |
|||
intensity: 2, // 光照强度 |
|||
shadowQuality: 'light', // 阴影亮度 |
|||
shadow: true, // 是否显示阴影 |
|||
alpha: 50, |
|||
beta: 10 |
|||
} |
|||
}, |
|||
viewControl: { |
|||
'projection': 'perspective', |
|||
'autoRotate': false, |
|||
'distance': 208, // 控制地图版块的大小 |
|||
'alpha': 72, // 地图版块垂直方向的角度 |
|||
'beta': 2, // 地图版块水平方向的角度 |
|||
rotateSensitivity: 0, // 禁用旋转 |
|||
panSensitivity: 0, // 禁用平移 |
|||
zoomSensitivity: 0 // 禁用缩放 |
|||
}, |
|||
zlevel: 2 |
|||
}, |
|||
series: [ |
|||
{ // 动效散点图层，使用2D地图坐标系 |
|||
type: 'effectScatter', |
|||
coordinateSystem: 'geo', |
|||
zlevel: 3, |
|||
rippleEffect: { // 涟漪特效 |
|||
period: 4, // 动画时间，值越小速度越快 |
|||
brushType: 'fill', // 波纹绘制方式 stroke, fill |
|||
scale: 10 // 波纹圆环最大限制，值越大波纹越大 |
|||
}, |
|||
symbol: 'circle', |
|||
symbolSize: function(val) { |
|||
return (5 + val[2] * 5) / 150 // 圆环大小 |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
show: true, |
|||
color: '#F41C19' |
|||
} |
|||
}, |
|||
data: [] |
|||
} |
|||
] |
|||
} |
|||
|
|||
this.myChart.setOption(initOption) |
|||
}, |
|||
updateChart() { |
|||
// 地图数据 |
|||
const mapData = mapJson.features.map((item) => { |
|||
return { |
|||
name: item.properties.name, |
|||
value: Math.round(Math.random() * 100), |
|||
centroid: item.properties.centroid, |
|||
adcode: item.properties.adcode |
|||
} |
|||
}) |
|||
|
|||
// 散点数据 |
|||
const scatterData = mapData.map((item) => { |
|||
return { |
|||
name: item.name, |
|||
value: item.centroid |
|||
? item.centroid.concat(item.value) |
|||
: item.centroid, // [经, 纬度, 值] |
|||
itemStyle: { |
|||
color: 'red' |
|||
} |
|||
// adcode: item.adcode, |
|||
} |
|||
}) |
|||
|
|||
const updateOption = { |
|||
series: [ |
|||
{ |
|||
data: mapData // type: 'map' |
|||
}, |
|||
{ |
|||
data: scatterData // type: 'effectScatter' |
|||
} |
|||
] |
|||
} |
|||
|
|||
this.len = updateOption.series[1].data.length // 此处设置的是需要轮播的次数 |
|||
this.myChart.setOption(updateOption) |
|||
this.autohover() |
|||
}, |
|||
mouseMove() { |
|||
// 当鼠标移入，终止轮播，高亮显示当前区域 |
|||
this.myChart.on('mouseover', (params) => { |
|||
clearInterval(this.timeTicket) |
|||
this.myChart.dispatchAction({ |
|||
type: 'downplay', |
|||
seriesIndex: 1 |
|||
}) |
|||
this.myChart.dispatchAction({ |
|||
type: 'highlight', |
|||
seriesIndex: 1, |
|||
dataIndex: params.dataIndex |
|||
}) |
|||
this.myChart.dispatchAction({ |
|||
type: 'showTip', |
|||
seriesIndex: 1, |
|||
dataIndex: params.dataIndex |
|||
}) |
|||
}) |
|||
// 当鼠标移出，轮播继续开始 |
|||
this.myChart.on('mouseout', this.autohover) |
|||
}, |
|||
autohover() { |
|||
clearInterval(this.timeTicket) |
|||
this.timeTicket = setInterval(() => { |
|||
// 1. 取消上次的高亮 |
|||
this.myChart.dispatchAction({ |
|||
type: 'downplay', |
|||
seriesIndex: 1 |
|||
}) |
|||
// 2. 显示当前高亮 |
|||
this.myChart.dispatchAction({ |
|||
type: 'highlight', |
|||
seriesIndex: 1, |
|||
dataIndex: this.count % this.len |
|||
}) |
|||
// 3. 显示提示框中的信息 |
|||
this.myChart.dispatchAction({ |
|||
type: 'showTip', |
|||
seriesIndex: 1, |
|||
dataIndex: this.count % this.len |
|||
}) |
|||
this.count++ |
|||
}, 2000) |
|||
}, |
|||
resize() { |
|||
this.myChart.resize() |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue