2022-11-26 18:17:55 +08:00
|
|
|
|
<!--
|
|
|
|
|
|
* @Author: hisense.xiaoshangqing
|
|
|
|
|
|
* @Date: 2022-7-26 10:00:48
|
2022-11-29 11:57:33 +08:00
|
|
|
|
* @LastEditors: hisense.wuhongjian
|
|
|
|
|
|
* @LastEditTime: 2022-11-29 11:47:26
|
2022-11-26 18:17:55 +08:00
|
|
|
|
* @Description: 水库专题首页缩略图 -->
|
|
|
|
|
|
<template>
|
|
|
|
|
|
<div class="river-course-view">
|
|
|
|
|
|
<div ref="qdCityMap" class="city-map-content-echarts"></div>
|
|
|
|
|
|
<div class="topic-animation1 display-animation1"></div>
|
|
|
|
|
|
<div class="topic-animation2 display-animation2"></div>
|
|
|
|
|
|
<div class="topic-animation3 display-animation3"></div>
|
|
|
|
|
|
<div class="topic-animation4 display-animation4"></div>
|
|
|
|
|
|
<div class="topic-animation5 display-animation5"></div>
|
|
|
|
|
|
<div class="topic-animation6 display-animation6"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
2022-11-29 11:57:33 +08:00
|
|
|
|
import { getProvideDistrictFundStatement } from '@/api/assertReport'
|
|
|
|
|
|
import axios from 'axios'
|
|
|
|
|
|
const echarts = require('echarts')
|
|
|
|
|
|
export default {
|
|
|
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
|
|
|
components: {},
|
|
|
|
|
|
data() {
|
|
|
|
|
|
//这里存放数据
|
|
|
|
|
|
return {
|
|
|
|
|
|
districtData: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '市南区',
|
|
|
|
|
|
value: [120.395966, 36.000892],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '市北区',
|
|
|
|
|
|
value: [120.355026, 36.083819],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '李沧区',
|
|
|
|
|
|
value: [120.421236, 36.188023],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '崂山区',
|
|
|
|
|
|
value: [120.587393, 36.199569],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '城阳区',
|
|
|
|
|
|
value: [120.369135, 36.266833],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '即墨区',
|
|
|
|
|
|
value: [120.517352, 36.490847],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '莱西市',
|
|
|
|
|
|
value: [120.426226, 36.86009],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '胶州市',
|
|
|
|
|
|
value: [120.010202, 36.235878],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '平度市',
|
|
|
|
|
|
value: [119.959012, 36.788828],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '西海岸新区',
|
|
|
|
|
|
value: [119.895518, 35.875138],
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2022-11-28 15:32:45 +08:00
|
|
|
|
|
2022-11-29 11:57:33 +08:00
|
|
|
|
mounted() {
|
|
|
|
|
|
this.findAllInfo()
|
|
|
|
|
|
},
|
|
|
|
|
|
//方法集合
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
findAllInfo() {
|
|
|
|
|
|
getProvideDistrictFundStatement().then((res) => {
|
|
|
|
|
|
let districtData = this.districtData
|
|
|
|
|
|
let resulrtData = res.data.data
|
|
|
|
|
|
for (let i = 0; i < resulrtData.length; i++) {
|
|
|
|
|
|
for (let j = 0; j < districtData.length; j++) {
|
|
|
|
|
|
if (resulrtData[i].districtName === districtData[j].name) {
|
|
|
|
|
|
districtData[j].num = resulrtData[i].applyPrice + '万'
|
|
|
|
|
|
}
|
2022-11-28 15:32:45 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2022-11-29 11:57:33 +08:00
|
|
|
|
console.log('上图数据', districtData)
|
|
|
|
|
|
this.initMap(districtData)
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
initMap(data) {
|
|
|
|
|
|
this.loadedDataUrl = './static/qingdao.json'
|
|
|
|
|
|
let _this = this
|
|
|
|
|
|
axios.get(_this.loadedDataUrl, {}).then((geoJson) => {
|
|
|
|
|
|
_this.myChart = echarts.init(_this.$refs.qdCityMap)
|
|
|
|
|
|
echarts.registerMap('qingdao', geoJson.data)
|
|
|
|
|
|
const imgBack = new Image()
|
|
|
|
|
|
imgBack.src = './static/assets/map-back.png'
|
|
|
|
|
|
const img = new Image()
|
|
|
|
|
|
img.src = './static/assets/echarts-map-bak.png'
|
|
|
|
|
|
const typeImg = new Image()
|
|
|
|
|
|
typeImg.src = './static/assets/reservoir-type-bak.png'
|
2022-11-26 18:17:55 +08:00
|
|
|
|
|
2022-11-29 11:57:33 +08:00
|
|
|
|
_this.option = {
|
|
|
|
|
|
visualMap: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
max: 100,
|
|
|
|
|
|
seriesIndex: 1,
|
|
|
|
|
|
inRange: {
|
|
|
|
|
|
color: ['#000000', 'yellow', 'pink'],
|
|
|
|
|
|
},
|
2022-11-26 18:17:55 +08:00
|
|
|
|
},
|
2022-11-29 11:57:33 +08:00
|
|
|
|
geo: [
|
|
|
|
|
|
{
|
|
|
|
|
|
map: 'qingdao',
|
|
|
|
|
|
roam: false, // 是否允许缩放
|
|
|
|
|
|
aspectScale: 0.8,
|
|
|
|
|
|
zoom: 1.1, // 默认显示级别
|
|
|
|
|
|
top: 100,
|
|
|
|
|
|
z: 6,
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true, //是否显示市
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#ffffff', //文字颜色
|
|
|
|
|
|
fontSize: 16, //文字大小
|
|
|
|
|
|
fontFamily: '微软雅黑',
|
|
|
|
|
|
backgroundColor: 'rgba(0,0,0,0)', //透明度0清空文字背景
|
|
|
|
|
|
},
|
2022-11-26 18:17:55 +08:00
|
|
|
|
},
|
2022-11-29 11:57:33 +08:00
|
|
|
|
itemStyle: {
|
|
|
|
|
|
borderColor: '#25e8ff',
|
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
|
/* areaColor: "#004d8e", //rgba设置透明度0
|
2022-11-26 18:17:55 +08:00
|
|
|
|
shadowColor: "#10daff",
|
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
|
shadowOffsetX: 10,
|
|
|
|
|
|
opacity: 0.53, */
|
2022-11-29 11:57:33 +08:00
|
|
|
|
areaColor: {
|
|
|
|
|
|
image: img,
|
|
|
|
|
|
repeat: 'repeat',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
disabled: false,
|
|
|
|
|
|
focus: 'none',
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: null,
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
//color: "#fff",
|
|
|
|
|
|
},
|
2022-11-26 18:17:55 +08:00
|
|
|
|
},
|
|
|
|
|
|
},
|
2022-11-29 11:57:33 +08:00
|
|
|
|
{
|
|
|
|
|
|
map: 'qingdao',
|
|
|
|
|
|
aspectScale: 0.8,
|
|
|
|
|
|
roam: false, // 是否允许缩放
|
|
|
|
|
|
zoom: 1.1, // 默认显示级别
|
|
|
|
|
|
top: 105,
|
|
|
|
|
|
z: 4,
|
2022-11-26 18:17:55 +08:00
|
|
|
|
itemStyle: {
|
2022-11-29 11:57:33 +08:00
|
|
|
|
areaColor: '#1864a5',
|
|
|
|
|
|
borderColor: 'transparent',
|
2022-11-26 18:17:55 +08:00
|
|
|
|
},
|
2022-11-29 11:57:33 +08:00
|
|
|
|
silent: true,
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
show: false,
|
2022-11-26 18:17:55 +08:00
|
|
|
|
},
|
|
|
|
|
|
},
|
2022-11-29 11:57:33 +08:00
|
|
|
|
{
|
|
|
|
|
|
map: 'qingdao',
|
|
|
|
|
|
aspectScale: 0.8,
|
|
|
|
|
|
roam: false, // 是否允许缩放
|
|
|
|
|
|
zoom: 1.1, // 默认显示级别
|
|
|
|
|
|
top: 110,
|
|
|
|
|
|
z: 3,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
areaColor: '#1864a5',
|
|
|
|
|
|
borderColor: 'transparent',
|
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
|
},
|
|
|
|
|
|
silent: true,
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
2022-11-26 18:17:55 +08:00
|
|
|
|
},
|
2022-11-29 11:57:33 +08:00
|
|
|
|
{
|
|
|
|
|
|
map: 'qingdao',
|
|
|
|
|
|
aspectScale: 0.8,
|
|
|
|
|
|
roam: true, // 是否允许缩放
|
|
|
|
|
|
zoom: 1.1, // 默认显示级别
|
|
|
|
|
|
top: 115,
|
|
|
|
|
|
z: 2,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
areaColor: '#1864a5',
|
|
|
|
|
|
//borderColor: "#0f3866",
|
|
|
|
|
|
borderColor: 'transparent',
|
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
|
shadowColor: '#808080', // 外部阴影
|
|
|
|
|
|
shadowBlur: '10',
|
|
|
|
|
|
},
|
|
|
|
|
|
silent: true,
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
2022-11-26 18:17:55 +08:00
|
|
|
|
},
|
2022-11-29 11:57:33 +08:00
|
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
// {
|
|
|
|
|
|
// tooltip: {
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// type: "effectScatter",
|
|
|
|
|
|
// coordinateSystem: "geo",
|
|
|
|
|
|
// rippleEffect: {
|
|
|
|
|
|
// scale: 3,
|
|
|
|
|
|
// brushType: "stroke",
|
|
|
|
|
|
// },
|
|
|
|
|
|
// showEffectOn: "render",
|
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
|
// normal: {
|
|
|
|
|
|
// shadowColor: "#ffffff",
|
|
|
|
|
|
// shadowBlur: 10,
|
|
|
|
|
|
// shadowOffsetX: 0,
|
|
|
|
|
|
// shadowOffsetY: 0,
|
|
|
|
|
|
// color: "#df1818",
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// label: {
|
|
|
|
|
|
// normal: {
|
|
|
|
|
|
// color: "#fff",
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// symbol: "circle",
|
|
|
|
|
|
// symbolSize: [10, 5],
|
|
|
|
|
|
// data:data, //地标闪烁小圆点
|
|
|
|
|
|
// zlevel: 1,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// {
|
|
|
|
|
|
// type: "scatter",
|
|
|
|
|
|
// coordinateSystem: "geo",
|
|
|
|
|
|
// symbol: function (value, params) {
|
|
|
|
|
|
// return 'image://static/assets/warning-reservoir.png';
|
|
|
|
|
|
// },
|
|
|
|
|
|
// symbolSize: [25, 35],
|
|
|
|
|
|
// symbolOffset: [0, -20],
|
|
|
|
|
|
// z: 9999,
|
|
|
|
|
|
// data:data, //企业图片
|
|
|
|
|
|
// },
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'scatter',
|
|
|
|
|
|
coordinateSystem: 'geo',
|
|
|
|
|
|
label: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
|
var name = params.data.num
|
|
|
|
|
|
var text = `{fline|${name}}`
|
|
|
|
|
|
return text
|
2022-11-26 18:17:55 +08:00
|
|
|
|
},
|
2022-11-29 11:57:33 +08:00
|
|
|
|
color: '#fff',
|
|
|
|
|
|
rich: {
|
|
|
|
|
|
fline: {
|
|
|
|
|
|
padding: [0, 25],
|
|
|
|
|
|
color: '#dcc52f',
|
|
|
|
|
|
textShadowColor: '#030615',
|
|
|
|
|
|
textShadowBlur: '0',
|
|
|
|
|
|
textShadowOffsetX: 1,
|
|
|
|
|
|
textShadowOffsetY: 1,
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
fontWeight: 400,
|
|
|
|
|
|
},
|
|
|
|
|
|
tline: {
|
|
|
|
|
|
padding: [0, 27],
|
|
|
|
|
|
color: '#afd31d',
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
},
|
2022-11-26 18:17:55 +08:00
|
|
|
|
},
|
|
|
|
|
|
},
|
2022-11-29 11:57:33 +08:00
|
|
|
|
emphasis: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
2022-11-26 18:17:55 +08:00
|
|
|
|
},
|
2022-11-29 11:57:33 +08:00
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: '#e3e00a',
|
2022-11-26 18:17:55 +08:00
|
|
|
|
},
|
2022-11-29 11:57:33 +08:00
|
|
|
|
symbol: 'image://static/assets/reservoir-type-bak.png',
|
|
|
|
|
|
symbolSize: [84, 28],
|
|
|
|
|
|
symbolOffset: [0, -30],
|
|
|
|
|
|
z: 999,
|
|
|
|
|
|
data: data, //企业名称
|
2022-11-26 18:17:55 +08:00
|
|
|
|
},
|
2022-11-29 11:57:33 +08:00
|
|
|
|
],
|
|
|
|
|
|
}
|
|
|
|
|
|
_this.myChart.setOption(_this.option)
|
|
|
|
|
|
_this.myChart.on('click', (params) => {
|
|
|
|
|
|
// console.log("点的是什么", params);
|
|
|
|
|
|
// //进入对应区的三维地图
|
|
|
|
|
|
// //跟右下角菜单切换触发调用方法一样，但是要传递区划参数，区划name
|
|
|
|
|
|
// const index = _this.districtData.findIndex((item) => {
|
|
|
|
|
|
// return item.name === params.name ;
|
|
|
|
|
|
// });
|
|
|
|
|
|
// //console.log('rrrrrrrr5555',index);
|
|
|
|
|
|
// let districtObject = {
|
|
|
|
|
|
// name:params.name,
|
|
|
|
|
|
// longitude:_this.districtData[index].value[0],
|
|
|
|
|
|
// latitude:_this.districtData[index].value[1],
|
|
|
|
|
|
// };
|
|
|
|
|
|
// _this.$emit('jumpIntoMap',districtObject);
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
2022-11-26 18:17:55 +08:00
|
|
|
|
},
|
|
|
|
|
|
|
2022-11-29 11:57:33 +08:00
|
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
|
|
|
beforeMount() {}, //生命周期 - 挂载之前
|
|
|
|
|
|
beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
|
|
|
updated() {}, //生命周期 - 更新之后
|
|
|
|
|
|
beforeUnmount() {}, //生命周期 - 销毁之前
|
|
|
|
|
|
unmounted() {}, //生命周期 - 销毁完成
|
|
|
|
|
|
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
|
|
|
}
|
2022-11-26 18:17:55 +08:00
|
|
|
|
</script>
|
2022-11-29 11:57:33 +08:00
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
//@import url(); 引入公共css类
|
2022-11-26 18:17:55 +08:00
|
|
|
|
|
2022-11-29 11:57:33 +08:00
|
|
|
|
.river-course-view {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
background: url('~@/assets/common/homePage/big-bak.png') no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
.city-map-content-echarts {
|
|
|
|
|
|
width: 10rem;
|
|
|
|
|
|
height: 7.9rem;
|
|
|
|
|
|
top: 10px;
|
|
|
|
|
|
left: 500px;
|
|
|
|
|
|
bottom: 2rem;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
|
}
|
|
|
|
|
|
.map-menu {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 486px;
|
|
|
|
|
|
bottom: 10px;
|
2022-11-26 18:17:55 +08:00
|
|
|
|
display: flex;
|
2022-11-29 11:57:33 +08:00
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
z-index: 99999;
|
|
|
|
|
|
.map-tab {
|
|
|
|
|
|
// 1、菜单切换功能
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
pointer-events: auto;
|
|
|
|
|
|
.tab-item {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
min-width: 1.4rem;
|
|
|
|
|
|
height: 30px;
|
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
border: 1px solid #2ab1e9;
|
|
|
|
|
|
border-left: 0;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
padding: 0px 20px;
|
|
|
|
|
|
background-color: #0d284f;
|
|
|
|
|
|
color: #35cffc;
|
|
|
|
|
|
&.active {
|
|
|
|
|
|
color: #fefefe;
|
|
|
|
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #1eafda);
|
|
|
|
|
|
}
|
|
|
|
|
|
&:first-child {
|
|
|
|
|
|
border-left: 1px solid #2ab1e9;
|
|
|
|
|
|
}
|
2022-11-26 18:17:55 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2022-11-29 11:57:33 +08:00
|
|
|
|
.reservoirType-list {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 486px;
|
|
|
|
|
|
width: 122px;
|
|
|
|
|
|
height: 100px;
|
|
|
|
|
|
top: 164px;
|
|
|
|
|
|
padding: 10px 0 0 10px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
background-color: rgba(13, 40, 79, 0.5);
|
|
|
|
|
|
border: 1px solid #0d284f;
|
|
|
|
|
|
padding-top: 22px;
|
|
|
|
|
|
.type-legend {
|
|
|
|
|
|
margin-bottom: 20px;
|
2022-11-26 18:17:55 +08:00
|
|
|
|
margin-left: 10px;
|
2022-11-29 11:57:33 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
.legend-color {
|
|
|
|
|
|
width: 12px;
|
|
|
|
|
|
height: 12px;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.color-normal {
|
|
|
|
|
|
background-color: #00ebac;
|
|
|
|
|
|
}
|
|
|
|
|
|
.color-warning {
|
|
|
|
|
|
background-color: #ff3537;
|
|
|
|
|
|
}
|
|
|
|
|
|
.legend-text {
|
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
|
span {
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
}
|
2022-11-26 18:17:55 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2022-11-29 11:57:33 +08:00
|
|
|
|
.topic-animation1 {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
position: absolute;
|
2022-11-26 18:17:55 +08:00
|
|
|
|
|
2022-11-29 11:57:33 +08:00
|
|
|
|
margin: 0px auto;
|
|
|
|
|
|
background-image: url('~@/assets/common/homePage/animation1.png');
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
}
|
|
|
|
|
|
.display-animation1 {
|
|
|
|
|
|
animation: topup1 5s linear 1s infinite;
|
|
|
|
|
|
}
|
|
|
|
|
|
.topic-animation2 {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
position: absolute;
|
2022-11-26 18:17:55 +08:00
|
|
|
|
|
2022-11-29 11:57:33 +08:00
|
|
|
|
margin: 0px auto;
|
|
|
|
|
|
background-image: url('~@/assets/common/homePage/animation2.png');
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
}
|
|
|
|
|
|
.display-animation2 {
|
|
|
|
|
|
animation: topup1 5s linear 2s infinite;
|
|
|
|
|
|
}
|
|
|
|
|
|
.topic-animation3 {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
position: absolute;
|
2022-11-26 18:17:55 +08:00
|
|
|
|
|
2022-11-29 11:57:33 +08:00
|
|
|
|
margin: 0px auto;
|
|
|
|
|
|
background-image: url('~@/assets/common/homePage/animation3.png');
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
}
|
|
|
|
|
|
.display-animation3 {
|
|
|
|
|
|
animation: topup1 5s linear 3s infinite;
|
|
|
|
|
|
}
|
|
|
|
|
|
.topic-animation4 {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
position: absolute;
|
2022-11-26 18:17:55 +08:00
|
|
|
|
|
2022-11-29 11:57:33 +08:00
|
|
|
|
margin: 0px auto;
|
|
|
|
|
|
background-image: url('~@/assets/common/homePage/animation4.png');
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
}
|
|
|
|
|
|
.display-animation4 {
|
|
|
|
|
|
animation: topup1 5s linear infinite;
|
|
|
|
|
|
}
|
|
|
|
|
|
.topic-animation5 {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
position: absolute;
|
2022-11-26 18:17:55 +08:00
|
|
|
|
|
2022-11-29 11:57:33 +08:00
|
|
|
|
margin: 0px auto;
|
|
|
|
|
|
background-image: url('~@/assets/common/homePage/animation5.png');
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
}
|
|
|
|
|
|
.display-animation5 {
|
|
|
|
|
|
animation: topup1 5s linear 4s infinite;
|
|
|
|
|
|
}
|
|
|
|
|
|
.topic-animation6 {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
position: absolute;
|
2022-11-26 18:17:55 +08:00
|
|
|
|
|
2022-11-29 11:57:33 +08:00
|
|
|
|
margin: 0px auto;
|
|
|
|
|
|
background-image: url('~@/assets/common/homePage/animation6.png');
|
|
|
|
|
|
background-size: cover;
|
2022-11-26 18:17:55 +08:00
|
|
|
|
}
|
2022-11-29 11:57:33 +08:00
|
|
|
|
.display-animation6 {
|
|
|
|
|
|
animation: topup1 5s linear infinite;
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes topup1 {
|
|
|
|
|
|
from {
|
|
|
|
|
|
top: 0%;
|
|
|
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
|
|
|
top: -100%;
|
|
|
|
|
|
}
|
2022-11-26 18:17:55 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
