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
-
415src/views/index.vue
-
977src/views/map/index.vue
-
795src/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] |
|||
} |
|||
@ -1,308 +1,205 @@ |
|||
<template> |
|||
<div id="screen-container"> |
|||
<div v-if="isLoading" class="loading"> |
|||
<dv-loading>Loading...</dv-loading> |
|||
</div> |
|||
<Header :header-title="headerTitle" /> |
|||
<swiper ref="mySwiperHome" class="swiper" :options="swiperOption"> |
|||
<!-- <swiper-slide v-for="(item,index) in displayedImages" :key="index" /> --> |
|||
<swiper-slide class="slide"> |
|||
<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="container"> |
|||
<p>第一行书</p> |
|||
<!-- <div id="e" class="roll-wrap roll_row"> |
|||
<ul class="roll__list" style="position: absolute; left: 0; top: 0;"> |
|||
<li v-for="(item,index) in list" :key="index">{{ index }} |
|||
<div class="book-img"> |
|||
<img :src="item.cover" :onerror="defaultImg"> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> --> |
|||
<div class="swiper-container seamless01-swiper"> |
|||
<div class="swiper-wrapper"> |
|||
<div v-for="(item,index) in list" :key="index" class="swiper-slide">{{ index }} |
|||
<div class="book-img"> |
|||
<img :src="item.cover" :onerror="defaultImg"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<p>第二行书</p> |
|||
<!-- <div id="f" class="roll-wrap roll_row"> |
|||
<ul class="roll__list" :style="{'position': 'absolute', 'right': 0,'top': 0, 'width': list.length*60 + 'px'} "> |
|||
<li v-for="(item,index) in list" :key="index"> |
|||
{{ index }} |
|||
<div class="book-img"> |
|||
<img :src="item.cover" :onerror="defaultImg"> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> --> |
|||
<div class="swiper-container seamless02-swiper"> |
|||
<div class="swiper-wrapper"> |
|||
<div v-for="(item,index) in list" :key="index" class="swiper-slide">{{ index }} |
|||
<div class="book-img"> |
|||
<img :src="item.cover" :onerror="defaultImg"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</swiper-slide> |
|||
<swiper-slide class="slide"> |
|||
<Map ref="mapRefs" /> |
|||
</swiper-slide> |
|||
<swiper-slide class="slide"> |
|||
<div>第三屏</div> |
|||
<div style="position: fixed; right: 40px; top: 10px; font-size: .4rem;">{{ active +' / '+ pageData.length }}</div> |
|||
<!-- <swiper ref="mySwiperHome" class="swiper-home" :options="swiperOption"> |
|||
<swiper-slide v-for="(item,index) in pageData" :key="index" class="slide"> |
|||
<PageOne v-if="item.name==='page1'" /> |
|||
<Map v-if="item.name==='page2'" ref="mapRefs" /> |
|||
<div v-if="item.name==='page3'">第三屏</div> |
|||
</swiper-slide> |
|||
<div slot="pagination" class="swiper-pagination-home" /> |
|||
</swiper> |
|||
</swiper> --> |
|||
<section ref="sectionRef"> |
|||
<!-- <keep-alive> --> |
|||
<PageOne |
|||
v-if="active === 1" |
|||
ref="user" |
|||
:height="height" |
|||
:fullscreen="fullscreen" |
|||
/> |
|||
<Map |
|||
v-if="active === 2" |
|||
:height="height" |
|||
:fullscreen="fullscreen" |
|||
/> |
|||
<div v-if="active === 3">第三屏</div> |
|||
<div v-if="active === 4">第四屏</div> |
|||
<!-- </keep-alive> --> |
|||
</section> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import Header from '@/views/header/index.vue' |
|||
import PageOne from '@/views/pageOne/index.vue' |
|||
import Map from '@/views/map/index.vue' |
|||
import data from '../views/newBookRecommend/data.json' |
|||
import { swiper, swiperSlide } from 'vue-awesome-swiper' |
|||
import 'swiper/dist/css/swiper.css' |
|||
|
|||
export default { |
|||
name: 'Home', |
|||
components: { |
|||
Header, |
|||
Map, |
|||
swiper, |
|||
swiperSlide |
|||
PageOne, |
|||
Map |
|||
}, |
|||
data() { |
|||
const _self = this |
|||
return { |
|||
active: 2, |
|||
isLoading: false, |
|||
fullscreen: false, |
|||
height: '', |
|||
headerTitle: '祁阳图书馆', |
|||
list: [], |
|||
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
|||
swiperOption: { |
|||
loop: true, |
|||
initialSlide: 0, |
|||
notNextTick: false, |
|||
observer: true, // 开启动态检查器 |
|||
speed: 2000, |
|||
autoplay: { |
|||
delay: 10000, // 自动切换的时间间隔，单位ms |
|||
stopOnLastSlide: true, // 当切换到最后一个slide时停止自动切换 |
|||
disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay |
|||
// reverseDirection: true // 开启反向自动轮播 |
|||
// waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时 |
|||
pageData: [ |
|||
{ |
|||
id: 1, title: 'page1', delayed: 10 |
|||
}, |
|||
direction: 'vertical', |
|||
// 显示分页 |
|||
pagination: { |
|||
el: '.swiper-pagination-home', |
|||
type: 'fraction' |
|||
{ |
|||
id: 2, title: 'page2', delayed: 0 |
|||
}, |
|||
on: { |
|||
slideChangeTransitionEnd() { |
|||
console.log(' this.activeIndex-index', this.activeIndex) |
|||
$('#e').rollNoInterval().left() |
|||
$('#f').rollNoInterval().right() |
|||
_self.addAnimationClass(this.activeIndex) |
|||
} |
|||
{ |
|||
id: 3, title: 'page3', delayed: 10 |
|||
}, |
|||
{ |
|||
id: 4, title: 'page4', delayed: 0 |
|||
} |
|||
}, |
|||
mySwipera1: null, |
|||
mySwipera2: null |
|||
], |
|||
swiperOption: null, |
|||
pageIndex: 0, |
|||
timer: null, |
|||
timer2: null |
|||
} |
|||
}, |
|||
computed: { |
|||
swiper() { |
|||
return this.$refs.mySwiperHome.swiper |
|||
} |
|||
}, |
|||
created() { |
|||
this.list = data |
|||
const METAWA = require('../assets/js/META.common.min.js') |
|||
const meta = new METAWA('665e845538d68') |
|||
meta.callback = (r) => { |
|||
console.log(r, '回调') |
|||
} |
|||
// const METAWA = require('../assets/js/META.common.min.js') |
|||
// const meta = new METAWA('665e845538d68') |
|||
// meta.callback = (r) => { |
|||
// console.log(r, '回调') |
|||
// } |
|||
}, |
|||
beforeDestroy() { |
|||
clearInterval(this.timer2) |
|||
window.removeEventListener('resize', this.setElementHeight) |
|||
}, |
|||
mounted() { |
|||
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 |
|||
this.showLoading() |
|||
this.setElementHeight() |
|||
window.addEventListener('resize', this.setElementHeight) |
|||
this.$once('hook:beforeDestroy', () => { |
|||
clearInterval(this.timer2) |
|||
window.removeEventListener('resize', this.setElementHeight) |
|||
}) |
|||
// $('#e').rollNoInterval().left() |
|||
// $('#f').rollNoInterval().right() |
|||
// this.mySwipera1 = new Swiper('.seamless01-swiper', { |
|||
// observer: true, // 开启动态检查器，监测swiper和slide |
|||
// observeParents: true, // 监测Swiper 的祖/父元素 |
|||
// speed: 4000, // 切换速度 |
|||
// loop: true, // 循环 |
|||
// slidesPerView: 4, // 显示数量 |
|||
// spaceBetween: 10, // 间隔 |
|||
// freeMode: true, // 自动贴合 |
|||
// autoplay: { // 自动播放 |
|||
// delay: 0, // 自动切换的时间间隔 |
|||
// stopOnLastSlide: false, // 切换到最后一个slide时停止自动切换 |
|||
// disableOnInteraction: false// 用户操作后是否停止 |
|||
// }, |
|||
// breakpoints: { |
|||
// 750: { // 当屏幕宽度大于等于320 |
|||
// slidesPerView: 3 |
|||
// } |
|||
// } |
|||
// }) |
|||
// this.mySwipera2 = new Swiper('.seamless02-swiper', { |
|||
// observer: true, // 开启动态检查器，监测swiper和slide |
|||
// observeParents: true, // 监测Swiper 的祖/父元素 |
|||
// speed: 4000, // 切换速度 |
|||
// loop: true, // 循环 |
|||
// slidesPerView: 4, // 显示数量 |
|||
// spaceBetween: 10, // 间隔 |
|||
// freeMode: true, // 自动贴合 |
|||
// autoplay: { // 自动播放 |
|||
// delay: 0, // 自动切换的时间间隔 |
|||
// stopOnLastSlide: false, // 切换到最后一个slide时停止自动切换 |
|||
// disableOnInteraction: false, // 用户操作后是否停止 |
|||
// reverseDirection: true// 方向切换 |
|||
// }, |
|||
// breakpoints: { |
|||
// 750: { // 当屏幕宽度大于等于320 |
|||
// slidesPerView: 3 |
|||
// } |
|||
// } |
|||
// }) |
|||
// this.autoPagination() |
|||
}, |
|||
methods: { |
|||
addAnimationClass(activeIndex) { |
|||
this.$nextTick(() => { |
|||
const swiper = this.$refs.mySwiperHome.swiper |
|||
if (swiper) { |
|||
const slides = swiper.slides |
|||
const nextSlide = slides.eq(2) |
|||
if (activeIndex === 2) { |
|||
nextSlide.find('.place-point').children().addClass('bouncePoint') |
|||
this.$refs.mapRefs.isPage2 = true |
|||
this.$refs.mapRefs.libIndex = 0 |
|||
this.$refs.mapRefs.libCurrent = this.$refs.mapRefs.libInfoData[this.$refs.mapRefs.libIndex] |
|||
this.$refs.mapRefs.init() |
|||
this.$refs.mapRefs.updatePageWithData() |
|||
autoPagination() { |
|||
this.timer2 = setInterval(() => { |
|||
setTimeout(() => { |
|||
if (this.active >= this.pageData.length) { |
|||
this.active = 1 |
|||
} else { |
|||
this.$refs.mapRefs.isPage2 = false |
|||
nextSlide.find('.place-point').children().removeClass('bouncePoint') |
|||
this.active++ |
|||
} |
|||
} |
|||
// this.showLoading() |
|||
}, 0) |
|||
}, 6000) |
|||
this.$once('hook:beforeDestroy', () => { |
|||
clearInterval(this.timer2) |
|||
}) |
|||
}, |
|||
showLoading() { |
|||
this.isLoading = true |
|||
this.timer = setTimeout(() => { |
|||
this.isLoading = false |
|||
window.clearTimeout(this.timer) |
|||
}, 1500) |
|||
}, |
|||
// 设置DOM高度 |
|||
setElementHeight() { |
|||
clearTimeout(this.timer) |
|||
this.timer = setTimeout(() => { |
|||
this.showLoading() |
|||
this.height = `${(this.$refs.sectionRef.offsetHeight - 30) / 3}px` |
|||
}, 100) |
|||
} |
|||
// init() { |
|||
// const _self = this |
|||
// this.swiperOption = { |
|||
// loop: false, |
|||
// initialSlide: _self.pageIndex, |
|||
// observer: true, // 修改swiper自己或子元素时，自动初始化swiper |
|||
// observeParents: true, // 修改swiper的父元素时，自动初始化swiper |
|||
// notNextTick: false, |
|||
// speed: 1500, |
|||
// autoplay: { |
|||
// delay: 10000, // 自动切换的时间间隔，单位ms |
|||
// stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换 |
|||
// disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay |
|||
// // reverseDirection: true // 开启反向自动轮播 |
|||
// // waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时 |
|||
// }, |
|||
// direction: 'vertical', |
|||
// // 显示分页 |
|||
// pagination: { |
|||
// el: '.swiper-pagination-home', |
|||
// type: 'fraction' |
|||
// }, |
|||
// on: { |
|||
// slideChangeTransitionEnd() { |
|||
// console.log(' this.activeIndex-index', this.realIndex) |
|||
// _self.pageIndex = this.realIndex |
|||
// _self.addAnimationClass(this.realIndex) |
|||
// } |
|||
// } |
|||
// } |
|||
// }, |
|||
// addAnimationClass(realIndex) { |
|||
// this.$nextTick(() => { |
|||
// const swiper = this.$refs.mySwiperHome.swiper |
|||
// if (swiper) { |
|||
// const slides = swiper.slides |
|||
// const nextSlide = slides.eq(2) |
|||
// if (realIndex === 1) { |
|||
// // nextSlide.find('.place-point').children().addClass('bouncePoint') |
|||
// this.$nextTick(() => { |
|||
// console.log(this.$refs.mapRefs.initChart) |
|||
// this.$refs.mapRefs.isPage2 = true |
|||
// this.$refs.mapRefs.count = 0 |
|||
// this.$refs.mapRefs.initChart() |
|||
// this.$refs.mapRefs.updateChart() |
|||
// }) |
|||
// } else { |
|||
// this.$refs.mapRefs.isPage2 = false |
|||
// nextSlide.find('.place-point').children().removeClass('bouncePoint') |
|||
// } |
|||
// } |
|||
// }) |
|||
// } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
::v-deep .swiper-wrapper{ |
|||
transition-timing-function: ease-in-out !important; |
|||
} |
|||
.tagcloud { |
|||
width: 5.5rem; |
|||
height: 5rem; |
|||
margin: .2rem; |
|||
margin-left: .3rem; |
|||
overflow: hidden; |
|||
} |
|||
a { |
|||
text-decoration: none; |
|||
cursor: pointer; |
|||
} |
|||
// .tagcloud>* { |
|||
// display: inline; |
|||
// white-space: nowrap; |
|||
// } |
|||
.container{ |
|||
margin-left: .3rem; |
|||
width: 5.5rem; |
|||
p{ |
|||
margin-top: .2rem; |
|||
.swiper-home{ |
|||
.swiper-wrapper{ |
|||
transition-timing-function: ease-in-out !important; |
|||
} |
|||
} |
|||
|
|||
/* seamlesswrap */ |
|||
.seamlesswrap{width: 100%;box-sizing: border-box;padding: 200px;} |
|||
.seamlesswrap img{width: 100%;display: block;} |
|||
.seamlesswrap .swiper-container-free-mode>.swiper-wrapper{ |
|||
-webkit-transition-timing-function:linear!important; |
|||
-o-transition-timing-function:linear!important; |
|||
transition-timing-function:linear!important; } |
|||
.seamlesswrap .swiper-container{margin: 10px 0;} |
|||
|
|||
.roll-wrap{ |
|||
.swiper-slide{ |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100px; |
|||
// height: calc(100vh - 1.125rem) !important; |
|||
overflow: hidden; |
|||
} |
|||
.roll_row .roll__list{ |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
border: 1px solid red; |
|||
} |
|||
.roll_row .roll__list li{ |
|||
display: block; |
|||
margin-right: 20px; |
|||
width: .5rem; |
|||
font-weight: bold; |
|||
font-size: .3rem; |
|||
text-align: 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%; |
|||
} |
|||
.swiper-pagination-home{ |
|||
position: fixed; |
|||
top: .2rem; |
|||
left: calc( 100% - 2rem); |
|||
font-size: .4rem; |
|||
} |
|||
} |
|||
.swiper-slide{ |
|||
width: 100%; |
|||
height: calc(100vh - 1.125rem); |
|||
overflow: hidden; |
|||
} |
|||
.swiper-pagination-home{ |
|||
position: fixed; |
|||
top: .2rem; |
|||
left: calc( 100% - 2rem); |
|||
font-size: .4rem; |
|||
} |
|||
|
|||
</style> |
|||
977
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