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> |
<template> |
||||
<div id="screen-container"> |
<div id="screen-container"> |
||||
|
<div v-if="isLoading" class="loading"> |
||||
|
<dv-loading>Loading...</dv-loading> |
||||
|
</div> |
||||
<Header :header-title="headerTitle" /> |
<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> |
</swiper-slide> |
||||
<div slot="pagination" class="swiper-pagination-home" /> |
<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> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
|
||||
import Header from '@/views/header/index.vue' |
import Header from '@/views/header/index.vue' |
||||
|
import PageOne from '@/views/pageOne/index.vue' |
||||
import Map from '@/views/map/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 { |
export default { |
||||
name: 'Home', |
name: 'Home', |
||||
components: { |
components: { |
||||
Header, |
Header, |
||||
Map, |
|
||||
swiper, |
|
||||
swiperSlide |
|
||||
|
PageOne, |
||||
|
Map |
||||
}, |
}, |
||||
data() { |
data() { |
||||
const _self = this |
|
||||
return { |
return { |
||||
|
active: 2, |
||||
|
isLoading: false, |
||||
|
fullscreen: false, |
||||
|
height: '', |
||||
headerTitle: '祁阳图书馆', |
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: { |
computed: { |
||||
swiper() { |
|
||||
return this.$refs.mySwiperHome.swiper |
|
||||
} |
|
||||
}, |
}, |
||||
created() { |
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() { |
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: { |
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 { |
} 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> |
</script> |
||||
|
|
||||
<style lang="scss"> |
<style lang="scss"> |
||||
@import "~@/assets/styles/index.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; |
position: relative; |
||||
width: 100%; |
width: 100%; |
||||
height: 100px; |
|
||||
|
// height: calc(100vh - 1.125rem) !important; |
||||
overflow: hidden; |
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> |
</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