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
-
286src/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
-
119src/views/map/index.vue
-
637src/views/map/index2.vue
-
115src/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