10 changed files with 1640 additions and 917 deletions
-
BINsrc/assets/images/location.png
-
108src/assets/json/lib.json
-
23src/assets/json/lib2.json
-
12src/assets/styles/index.scss
-
16src/main.js
-
1src/views/header/index.vue
-
401src/views/index.vue
-
975src/views/map/index.vue
-
785src/views/map/index2.vue
-
210src/views/pageOne/index.vue
|
After Width: 64 | Height: 64 | Size: 2.6 KiB |
@ -0,0 +1,108 @@ |
|||
[ |
|||
{ |
|||
"name": "陶铸图书馆", |
|||
"value": [111.848657, 26.588519], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "龙山街道分馆", |
|||
"value": [111.86478,26.599231], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "黎家坪分馆", |
|||
"value": [111.823424,26.693962], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "大村甸分馆", |
|||
"value": [111.77655,26.663866], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "邵家岭自助馆", |
|||
"value": [111.856979,26.59469], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "下马渡分馆", |
|||
"value": [111.895584,26.611702], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "复兴路自助馆", |
|||
"value": [111.843102,26.57896], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "七里桥分馆", |
|||
"value": [111.902703,26.571593], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "少儿馆", |
|||
"value": [111.842537,26.58196], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "茅竹镇分馆", |
|||
"value": [111.796508,26.510589], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "观音滩镇分馆", |
|||
"value": [111.897118,26.48444], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "凯俊盛科城分馆", |
|||
"value": [111.851548,26.550191], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "进宝塘镇分馆", |
|||
"value": [112.085297,26.436849], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "三口塘镇分馆", |
|||
"value": [111.819018,26.412155], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "肖家镇分馆", |
|||
"value": [112.009764,26.355137], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "潘市镇分馆", |
|||
"value": [112.051186,26.489878], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "大忠桥镇分馆", |
|||
"value": [111.873254,26.369761], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "浯溪街道分馆", |
|||
"value": [111.855175,26.574414], |
|||
"place": "祁阳县茅竹镇" |
|||
}, |
|||
{ |
|||
"name": "长虹街道分馆", |
|||
"value": [111.850902,26.586461], |
|||
"place": "长虹街道" |
|||
}, |
|||
{ |
|||
"name": "白水镇分馆", |
|||
"value": [111.989802,26.421353], |
|||
"place": "白水镇" |
|||
}, |
|||
{ |
|||
"name": "白竹湖自助馆", |
|||
"value": [111.862001,26.580311], |
|||
"place": "白竹湖" |
|||
} |
|||
|
|||
] |
|||
@ -0,0 +1,23 @@ |
|||
{ |
|||
"陶铸图书馆":[111.848657, 26.588519], |
|||
"龙山街道分馆":[111.86478,26.599231], |
|||
"黎家坪分馆": [111.823424,26.693962], |
|||
"大村甸分馆": [111.77655,26.663866], |
|||
"邵家岭自助馆":[111.856979,26.59469], |
|||
"下马渡分馆":[111.895584,26.611702], |
|||
"复兴路自助馆":[111.843102,26.57896], |
|||
"七里桥分馆": [111.902703,26.571593], |
|||
"少儿馆":[111.842537,26.58196], |
|||
"茅竹镇分馆":[111.796508,26.510589], |
|||
"观音滩镇分馆":[111.897118,26.48444], |
|||
"凯俊盛科城分馆":[111.851548,26.550191], |
|||
"进宝塘镇分馆":[112.085297,26.436849], |
|||
"三口塘镇分馆":[111.819018,26.412155], |
|||
"肖家镇分馆":[112.009764,26.355137], |
|||
"潘市镇分馆": [112.051186,26.489878], |
|||
"大忠桥镇分馆":[111.873254,26.369761], |
|||
"浯溪街道分馆":[111.855175,26.574414], |
|||
"长虹街道分馆":[111.850902,26.586461], |
|||
"白水镇分馆": [111.989802,26.421353], |
|||
"白竹湖自助馆":[111.862001,26.580311] |
|||
} |
|||
975
src/views/map/index.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,210 @@ |
|||
<template> |
|||
<div> |
|||
<div id="tagcloud1" class="tagcloud"> |
|||
<div>自动驾驶</div> |
|||
<a href="##">辅助驾驶</a> |
|||
<div>AEB</div> |
|||
<div href="##"><p>路测</p></div> |
|||
<div href="##">量子芯片</div> |
|||
<i>光速</i> |
|||
<div href="##">激光雷达</div> |
|||
<b>纳米科技</b> |
|||
<a href="##">电子信息</a> |
|||
<a href="##">超级计算机</a> |
|||
<div>自动驾驶</div> |
|||
<a href="##">辅助驾驶</a> |
|||
<div>AEB</div> |
|||
<div href="##"><p>路测</p></div> |
|||
<div href="##">量子芯片</div> |
|||
<i>光速</i> |
|||
<div href="##">激光雷达</div> |
|||
<b>纳米科技</b> |
|||
<a href="##">电子信息</a> |
|||
<a href="##">超级计算机</a> |
|||
</div> |
|||
<div class="scrollBox"> |
|||
<p>第一行书</p> |
|||
<vue-seamless-scroll |
|||
ref="listData" |
|||
:data="list" |
|||
:class-option="defaultOption" |
|||
style="height: 100px; overflow: hidden" |
|||
> |
|||
<ul> |
|||
<li v-for="(item, index) in list" :key="index"> |
|||
<div class="bord"> |
|||
{{ index }} |
|||
<div class="book-img"> |
|||
<img :src="item.cover" :onerror="defaultImg"> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</vue-seamless-scroll> |
|||
<p>第二行书</p> |
|||
<vue-seamless-scroll |
|||
ref="listData2" |
|||
:data="list" |
|||
:class-option="default2Option" |
|||
style="height: 100px; overflow: hidden" |
|||
> |
|||
<ul> |
|||
<li v-for="(item, index) in list" :key="index"> |
|||
<div class="bord"> |
|||
{{ index }} |
|||
<div class="book-img"> |
|||
<img :src="item.cover" :onerror="defaultImg"> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</vue-seamless-scroll> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import data from '@/views/newBookRecommend/data.json' |
|||
export default { |
|||
components: { |
|||
}, |
|||
data() { |
|||
return { |
|||
list: [], |
|||
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
|||
mySwipera1: { |
|||
notNextTick: true, |
|||
noSwiping: true, |
|||
observer: true, // 开启动态检查器，监测swiper和slide |
|||
observeParents: true, // 监测Swiper 的祖/父元素 |
|||
speed: 4000, // 切换速度 |
|||
loop: true, // 循环 |
|||
slidesPerView: 6, // 显示数量 |
|||
spaceBetween: 10, // 间隔 |
|||
freeMode: true, // 自动贴合 |
|||
autoplay: { // 自动播放 |
|||
delay: 0, // 自动切换的时间间隔 |
|||
stopOnLastSlide: false, // 切换到最后一个slide时停止自动切换 |
|||
disableOnInteraction: false// 用户操作后是否停止 |
|||
} |
|||
}, |
|||
mySwipera2: { |
|||
notNextTick: true, |
|||
observer: true, // 开启动态检查器，监测swiper和slide |
|||
observeParents: true, // 监测Swiper 的祖/父元素 |
|||
speed: 4000, // 切换速度 |
|||
loop: true, // 循环 |
|||
slidesPerView: 6, // 显示数量 |
|||
spaceBetween: 10, // 间隔 |
|||
freeMode: true, // 自动贴合 |
|||
autoplay: { // 自动播放 |
|||
delay: 0, // 自动切换的时间间隔 |
|||
stopOnLastSlide: false, // 切换到最后一个slide时停止自动切换 |
|||
disableOnInteraction: false, // 用户操作后是否停止 |
|||
reverseDirection: true// 方向切换 |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
defaultOption() { |
|||
return { |
|||
step: 1.5, // 数值越大速度滚动越快 |
|||
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length |
|||
hoverStop: true, // 是否开启鼠标悬停stop |
|||
direction: 2, // 0向下 1向上 2向左 3向右 |
|||
openWatch: true, // 开启数据实时监控刷新dom |
|||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
|||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
|||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms) |
|||
} |
|||
}, |
|||
default2Option() { |
|||
return { |
|||
step: 1.5, // 数值越大速度滚动越快 |
|||
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length |
|||
hoverStop: true, // 是否开启鼠标悬停stop |
|||
direction: 3, // 0向下 1向上 2向左 3向右 |
|||
openWatch: true, // 开启数据实时监控刷新dom |
|||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
|||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
|||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms) |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.list = data |
|||
}, |
|||
beforeDestroy() { |
|||
clearTimeout(this.timer2) |
|||
}, |
|||
mounted() { |
|||
this.tagAnimation() |
|||
}, |
|||
methods: { |
|||
tagAnimation() { |
|||
tagCloud({ |
|||
selector: '#tagcloud1', // 元素选择器，id 或 class |
|||
fontsize: 26, // 基本字体大小, 默认16，单位px |
|||
radius: 260, // 滚动横/纵轴半径, 默认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: false, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动 |
|||
multicolour: true // 彩色字体，颜色随机，取值：true(默认),false |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
.tagcloud { |
|||
width: 5.5rem; |
|||
height: 5rem; |
|||
margin: .2rem; |
|||
margin-left: .3rem; |
|||
overflow: hidden; |
|||
a { |
|||
text-decoration: none; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.scrollBox{ |
|||
width: 100%; |
|||
height: 96px; |
|||
box-sizing: border-box; |
|||
ul{ |
|||
height: 96px; |
|||
display: flex; |
|||
li{ |
|||
width: 240px; |
|||
margin-right: 10px; |
|||
border: solid 2px #f7f7f9; |
|||
cursor: pointer; |
|||
.bord{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
.book-img{ |
|||
width: .5rem; |
|||
height: .5rem; |
|||
background: url('~@/assets/images/default-img.png') no-repeat center center; |
|||
background-size: contain; |
|||
display: flex; |
|||
align-items: center; |
|||
overflow: hidden; |
|||
img{ |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue