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