17 changed files with 677 additions and 1675 deletions
-
32src/api/library.js
-
131src/assets/json/lib.json
-
23src/assets/json/lib2.json
-
6src/assets/styles/index.scss
-
19src/components/echart/barEcharts.vue
-
262src/components/echart/lineChart.vue
-
259src/components/echart/lineChartService.vue
-
2src/components/echart/todayCircle.vue
-
0src/components/echart/yearCircle.vue
-
1src/views/header/index.vue
-
46src/views/index.vue
-
117src/views/map/index.vue
-
637src/views/map/index2.vue
-
109src/views/pageFour/index.vue
-
289src/views/pageFour/module/video.vue
-
266src/views/pageOne/index.vue
-
121src/views/pageThree/index.vue
@ -1,108 +1,23 @@ |
|||||
[ |
|
||||
{ |
|
||||
"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": "白竹湖" |
|
||||
} |
|
||||
|
|
||||
] |
|
||||
|
{ |
||||
|
"陶铸图书馆":[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,23 +0,0 @@ |
|||||
{ |
|
||||
"陶铸图书馆":[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,259 +0,0 @@ |
|||||
<template> |
|
||||
<div id="main2" :style="{height:height,width:width}" /> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import echarts from 'echarts' |
|
||||
import resize from '@/utils/resizeMixins.js' |
|
||||
export default { |
|
||||
name: 'LineEcharts', |
|
||||
mixins: [resize], |
|
||||
props: { |
|
||||
chartData: { |
|
||||
type: Object, |
|
||||
require: true, |
|
||||
default: function() { |
|
||||
return {} |
|
||||
} |
|
||||
}, |
|
||||
width: { |
|
||||
type: String, |
|
||||
default: '100%' |
|
||||
}, |
|
||||
height: { |
|
||||
type: String, |
|
||||
default: '100%' |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
chart: null, |
|
||||
option: null |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
chartData: { |
|
||||
deep: true, |
|
||||
mmediate: true, |
|
||||
handler(val) { |
|
||||
setTimeout(() => { |
|
||||
this.setOptions(val) |
|
||||
}, 100) |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.$nextTick(() => { |
|
||||
this.initChart() |
|
||||
}) |
|
||||
this.resetPieChartData() |
|
||||
}, |
|
||||
beforeDestroy() { |
|
||||
if (!this.chart) { |
|
||||
return |
|
||||
} |
|
||||
this.chart.dispose() |
|
||||
this.chart = null |
|
||||
}, |
|
||||
methods: { |
|
||||
// 重绘饼图 |
|
||||
resetPieChartData() { |
|
||||
clearInterval(this.timeRePie) |
|
||||
this.timeRePie = setInterval(() => { |
|
||||
// debugger; |
|
||||
if (!this.chart) { |
|
||||
return |
|
||||
} |
|
||||
// 不先清空chart没法重绘 |
|
||||
this.chart.clear() |
|
||||
this.initChart() |
|
||||
}, 8000) |
|
||||
}, |
|
||||
initChart() { |
|
||||
const dom = document.getElementById('main2') |
|
||||
this.chart = echarts.init(dom, 'dark') |
|
||||
this.setOptions(this.chartData) |
|
||||
}, |
|
||||
setOptions({ returnData, borrowedData } = {}) { |
|
||||
const time = ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00'] |
|
||||
this.chart.setOption({ |
|
||||
backgroundColor: '#01103D', |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer: { |
|
||||
type: 'cross', |
|
||||
label: { |
|
||||
backgroundColor: '#6a7985' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
legend: { |
|
||||
top: '4%', |
|
||||
right: '4%', |
|
||||
icon: 'rect', |
|
||||
itemHeight: 6, |
|
||||
itemWidth: 11, |
|
||||
textStyle: { |
|
||||
color: '#339CFF', |
|
||||
fontSize: 18 |
|
||||
}, |
|
||||
data: [ |
|
||||
{ |
|
||||
name: '借出', |
|
||||
icon: 'rect', |
|
||||
textStyle: { |
|
||||
color: '#41A3FF', |
|
||||
fontFamily: 'DingTalk_JinBuTi_Regular' |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
name: '归还', |
|
||||
icon: 'rect', |
|
||||
textStyle: { |
|
||||
color: '#FFD050', |
|
||||
fontFamily: 'DingTalk_JinBuTi_Regular' |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
grid: { |
|
||||
left: '2%', |
|
||||
right: '4%', |
|
||||
bottom: '4%', |
|
||||
containLabel: true |
|
||||
}, |
|
||||
xAxis: [{ |
|
||||
type: 'category', |
|
||||
data: time.map(function(item) { |
|
||||
return item |
|
||||
}), |
|
||||
axisLabel: { |
|
||||
show: true, |
|
||||
formatter: function(value, idx) { |
|
||||
return value |
|
||||
}, |
|
||||
color: '#79B8FF', |
|
||||
fontSize: 16, |
|
||||
fontFamily: 'DingTalk_JinBuTi_Regular' |
|
||||
}, |
|
||||
axisLine: { |
|
||||
show: false, |
|
||||
lineStyle: { |
|
||||
width: '1', |
|
||||
color: '#113D72', |
|
||||
type: 'solid' |
|
||||
} |
|
||||
}, |
|
||||
axisTick: { |
|
||||
show: false |
|
||||
}, |
|
||||
splitLine: { |
|
||||
show: false, |
|
||||
lineStyle: { |
|
||||
color: '#333' |
|
||||
} |
|
||||
}, |
|
||||
boundaryGap: false |
|
||||
}], |
|
||||
yAxis: [ |
|
||||
{ |
|
||||
type: 'value', |
|
||||
// 坐标轴最大值、最小值、强制设置数据的步长间隔 |
|
||||
max: 1000, |
|
||||
min: 0, |
|
||||
interval: 250, |
|
||||
axisLabel: { |
|
||||
textStyle: { |
|
||||
color: '#79B8FF', |
|
||||
fontSize: 16, |
|
||||
fontFamily: 'DingTalk_JinBuTi_Regular' |
|
||||
} |
|
||||
}, |
|
||||
// 轴线 |
|
||||
axisLine: { |
|
||||
show: false, |
|
||||
lineStyle: { |
|
||||
color: '#113D72', |
|
||||
width: '1', |
|
||||
type: 'solid' |
|
||||
} |
|
||||
}, |
|
||||
// 坐标轴刻度相关设置。 |
|
||||
axisTick: { |
|
||||
show: false |
|
||||
}, |
|
||||
// 分割线 |
|
||||
splitLine: { |
|
||||
show: true, |
|
||||
lineStyle: { |
|
||||
color: 'rgba(66, 139, 221, 0.2)', |
|
||||
type: 'solid', |
|
||||
// 透明度 |
|
||||
opacity: 1, |
|
||||
width: 1 |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
], |
|
||||
series: [ |
|
||||
{ |
|
||||
name: '归还', |
|
||||
type: 'line', |
|
||||
stack: 'Total', |
|
||||
lineStyle: { |
|
||||
width: 3, |
|
||||
color: '#FFD14F' |
|
||||
}, |
|
||||
showSymbol: false, |
|
||||
itemStyle: { |
|
||||
color: '#FFD14F' |
|
||||
}, |
|
||||
areaStyle: { |
|
||||
opacity: 0.6, |
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
||||
|
|
||||
{ |
|
||||
offset: 0, |
|
||||
color: 'rgba(24, 176, 143, 0)' |
|
||||
}, |
|
||||
{ |
|
||||
offset: 1, |
|
||||
color: '#FFD14F' |
|
||||
} |
|
||||
]) |
|
||||
}, |
|
||||
data: returnData |
|
||||
}, |
|
||||
{ |
|
||||
name: '借出', |
|
||||
type: 'line', |
|
||||
stack: 'Total', |
|
||||
itemStyle: { |
|
||||
color: '#41A3FF' |
|
||||
}, |
|
||||
lineStyle: { |
|
||||
width: 3, |
|
||||
color: '#41A3FF' |
|
||||
}, |
|
||||
showSymbol: false, |
|
||||
areaStyle: { |
|
||||
opacity: 0.6, |
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
||||
{ |
|
||||
offset: 0, |
|
||||
color: 'rgba(254, 128, 66, 0)' |
|
||||
}, |
|
||||
{ |
|
||||
offset: 1, |
|
||||
color: '#41A3FF' |
|
||||
} |
|
||||
]) |
|
||||
}, |
|
||||
data: borrowedData |
|
||||
} |
|
||||
] |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,637 +0,0 @@ |
|||||
<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)]" style="position: absolute"> |
|
||||
<p style="font-size: .14rem; ">{{ item.name }}</p> |
|
||||
<span 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 { |
|
||||
isPage2: false, |
|
||||
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.libCurrent = this.libInfoData[this.libIndex] |
|
||||
this.init() |
|
||||
}, |
|
||||
methods: { |
|
||||
updatePageWithData() { |
|
||||
console.log('update') |
|
||||
console.log('_self.isPage22222', this.isPage2) |
|
||||
if (!this.isPage2) { |
|
||||
return false |
|
||||
} |
|
||||
// 生成一个随机数来确定要显示的图片数量 |
|
||||
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() { |
|
||||
if (_self.isPage2) { |
|
||||
_self.$refs.mySwiper.swiper.update() |
|
||||
_self.$refs.mySwiper.swiper.autoplay.start() |
|
||||
} else { |
|
||||
_self.$refs.mySwiper.swiper.autoplay.stop() |
|
||||
} |
|
||||
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) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</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; |
|
||||
} |
|
||||
.pulse { |
|
||||
background: rgba(0,0,0,0.2); |
|
||||
border-radius: 50%; |
|
||||
height: 14px; |
|
||||
width: 14px; |
|
||||
margin: -9px 0 0 5px; |
|
||||
-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> |
|
||||
@ -1,289 +0,0 @@ |
|||||
<template> |
|
||||
<div id="carousel"> |
|
||||
<h4>{{ slideData[beginValue].title }}</h4> |
|
||||
<div |
|
||||
ref="carousel" |
|
||||
class="carousel" |
|
||||
:style="{ height: height + 'px' }" |
|
||||
> |
|
||||
<transition-group tag="ul" class="slide clearfix" :name="transitionName"> |
|
||||
<li |
|
||||
v-for="(item, index) in slideData" |
|
||||
v-show="index == beginValue" |
|
||||
:key="index" |
|
||||
:style="{ height: height + 'px' }" |
|
||||
style="display: flex" |
|
||||
> |
|
||||
<!-- 播放视频 --> |
|
||||
<div v-for="(v, e) in item.videos" :key="e" class="videos"> |
|
||||
<video |
|
||||
ref="videoPlay" |
|
||||
muted="" |
|
||||
:src="v.video" |
|
||||
controls="controls" |
|
||||
:autoplay="autoPlay" |
|
||||
loop="loop" |
|
||||
style="width: 100%; height: 100%" |
|
||||
@timeupdate="handleTimeUpdate" |
|
||||
/> |
|
||||
</div> |
|
||||
<!-- <div class="up" @click="up"> < </div> |
|
||||
<div class="next" @click="next"> ></div> --> |
|
||||
</li> |
|
||||
</transition-group> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import 'videojs-contrib-hls' |
|
||||
export default { |
|
||||
name: 'Carousel', |
|
||||
props: { |
|
||||
height: { |
|
||||
type: Number, |
|
||||
default: 710 |
|
||||
}, |
|
||||
dot: { |
|
||||
type: Boolean, |
|
||||
default: true |
|
||||
}, |
|
||||
arrow: { |
|
||||
type: Boolean, |
|
||||
default: true |
|
||||
}, |
|
||||
interval: { |
|
||||
type: Number, |
|
||||
default: 5000 |
|
||||
}, |
|
||||
begin: { |
|
||||
type: Number, |
|
||||
default: 0 |
|
||||
}, |
|
||||
slideData: { |
|
||||
type: Array, |
|
||||
default: function() { |
|
||||
return [] |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
setInterval: '', |
|
||||
beginValue: 0, |
|
||||
transitionName: 'slide', |
|
||||
mytime_02: true, |
|
||||
videoDuration: 0, |
|
||||
currentTime: 0 |
|
||||
} |
|
||||
}, |
|
||||
beforeDestroy() { |
|
||||
// 组件销毁前,清除监听器 |
|
||||
clearInterval(this.setInterval) |
|
||||
}, |
|
||||
mounted() { |
|
||||
// var box = this.$refs.carousel; //监听对象 |
|
||||
// box.addEventListener("mouseover", () => { |
|
||||
// this.mouseOver(); |
|
||||
// }); |
|
||||
// box.addEventListener("mouseout", () => { |
|
||||
// this.mouseOut(); |
|
||||
// }); |
|
||||
this.beginValue = this.begin |
|
||||
this.play() |
|
||||
}, |
|
||||
methods: { |
|
||||
handleTimeUpdate(e) { |
|
||||
this.currentTime = parseInt(e.target.currentTime) |
|
||||
this.videoDuration = Math.floor(e.target.duration) |
|
||||
if (!this.mytime_02) { |
|
||||
return |
|
||||
} // 首次进入能执行 |
|
||||
this.mytime_02 = false |
|
||||
setTimeout(() => { |
|
||||
console.log('currentTime', this.currentTime) |
|
||||
console.log('e.target.duration', this.videoDuration) |
|
||||
if (this.currentTime === this.videoDuration) { |
|
||||
this.next() |
|
||||
} |
|
||||
this.mytime_02 = true // 上次执行成功，下一次才可执行。 |
|
||||
}, 1000) |
|
||||
}, |
|
||||
// 改变前后 |
|
||||
change(key) { |
|
||||
if (key > this.slideData.length - 1) { |
|
||||
key = 0 |
|
||||
} |
|
||||
if (key < 0) { |
|
||||
key = this.slideData.length - 1 |
|
||||
} |
|
||||
this.beginValue = key |
|
||||
}, |
|
||||
autoPlay() { |
|
||||
this.transitionName = 'slide' |
|
||||
this.beginValue++ |
|
||||
console.log('this.beginValue', this.beginValue) |
|
||||
if (this.beginValue >= this.slideData.length) { |
|
||||
this.beginValue = 0 |
|
||||
return |
|
||||
} |
|
||||
}, |
|
||||
play() { |
|
||||
// this.setInterval = setInterval(this.autoPlay, this.interval); |
|
||||
this.autoPlay |
|
||||
}, |
|
||||
mouseOver() { |
|
||||
// 鼠标进入 |
|
||||
// console.log('over') |
|
||||
// clearInterval(this.setInterval); |
|
||||
}, |
|
||||
mouseOut() { |
|
||||
// 鼠标离开 |
|
||||
// console.log('out') |
|
||||
// this.play(); |
|
||||
}, |
|
||||
up() { |
|
||||
// 上一页 |
|
||||
--this.beginValue |
|
||||
this.transitionName = 'slideBack' |
|
||||
this.change(this.beginValue) |
|
||||
}, |
|
||||
next() { |
|
||||
console.log('next', this.beginValue) |
|
||||
// 下一页 |
|
||||
++this.beginValue |
|
||||
console.log('next2', this.beginValue) |
|
||||
this.transitionName = 'slide' |
|
||||
this.change(this.beginValue) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "~@/assets/styles/index.scss"; |
|
||||
.slide { |
|
||||
position: relative; |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
overflow: hidden; |
|
||||
width: 100%; |
|
||||
height: 8.875rem; |
|
||||
margin-top: 0.475rem; |
|
||||
} |
|
||||
.slide li { |
|
||||
list-style: none; |
|
||||
position: absolute; |
|
||||
width: 100%; |
|
||||
height: 8.875rem; |
|
||||
} |
|
||||
.slide li img { |
|
||||
height: 8.875rem; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.slide li .title { |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
bottom: 0; |
|
||||
padding: 10px 20px; |
|
||||
width: 100%; |
|
||||
background: rgba(0, 0, 0, 0.35); |
|
||||
color: #fff; |
|
||||
font-size: larger; |
|
||||
text-align: center; |
|
||||
} |
|
||||
.videos { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
.videos:nth-child(1) { |
|
||||
margin-right: 0.2rem; |
|
||||
} |
|
||||
|
|
||||
.slideDot { |
|
||||
position: absolute; |
|
||||
z-index: 999; |
|
||||
bottom: 0.2rem; |
|
||||
right: 1.85rem; |
|
||||
} |
|
||||
.slideDot span { |
|
||||
display: inline-block; |
|
||||
width: 0.07rem; |
|
||||
height: 0.07rem; |
|
||||
background: rgba(255, 255, 255, 0.65); |
|
||||
margin-left: 0.05rem; |
|
||||
} |
|
||||
.slideDot span.active { |
|
||||
background: rgba(255, 255, 255, 1); |
|
||||
} |
|
||||
.up, |
|
||||
.next { |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
top: 50%; |
|
||||
margin-top: 0; |
|
||||
cursor: pointer; |
|
||||
font-size: 50px; |
|
||||
width: 80px; |
|
||||
height: 80px; |
|
||||
background-repeat: no-repeat; |
|
||||
background-position: 50% 50%; |
|
||||
} |
|
||||
.up { |
|
||||
left: 0.25rem; |
|
||||
} |
|
||||
.next { |
|
||||
left: auto; |
|
||||
right: 0.25rem; |
|
||||
} |
|
||||
/* .up:hover { |
|
||||
background-color: rgba(0, 0, 0, 0.3); |
|
||||
} */ |
|
||||
/* .next:hover { |
|
||||
background-color: rgba(0, 0, 0, 0.3); |
|
||||
} */ |
|
||||
|
|
||||
/*进入过渡生效时的状态*/ |
|
||||
.slide-enter-active { |
|
||||
transform: translateX(0); |
|
||||
transition: all 1s ease; |
|
||||
} |
|
||||
|
|
||||
/*进入开始状态*/ |
|
||||
.slide-enter { |
|
||||
transform: translateX(-100%); |
|
||||
} |
|
||||
|
|
||||
/*离开过渡生效时的状态*/ |
|
||||
.slide-leave-active { |
|
||||
transform: translateX(100%); |
|
||||
transition: all 1s ease; |
|
||||
} |
|
||||
|
|
||||
/*离开过渡的开始状态*/ |
|
||||
.slide-leave { |
|
||||
transform: translateX(0); |
|
||||
} |
|
||||
|
|
||||
/*进入过渡生效时的状态*/ |
|
||||
.slideBack-enter-active { |
|
||||
transform: translateX(0); |
|
||||
transition: all 1s ease; |
|
||||
} |
|
||||
|
|
||||
/*进入开始状态*/ |
|
||||
.slideBack-enter { |
|
||||
transform: translateX(100%); |
|
||||
} |
|
||||
|
|
||||
/*离开过渡生效时的状态*/ |
|
||||
.slideBack-leave-active { |
|
||||
transform: translateX(-100%); |
|
||||
transition: all 1s ease; |
|
||||
} |
|
||||
|
|
||||
/*离开过渡的开始状态*/ |
|
||||
.slideBack-leave { |
|
||||
transform: translateX(0); |
|
||||
} |
|
||||
</style> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue