From f0b2b04b1b43d4891c1808ad060b9959f9a1209c Mon Sep 17 00:00:00 2001
From: 819527061@qq.com <123456>
Date: 星期二, 25 七月 2023 14:29:42 +0800
Subject: [PATCH] 内容修改
---
src/pages/show/showIndex/showIndex.vue | 724 ++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 468 insertions(+), 256 deletions(-)
diff --git a/src/pages/show/showIndex/showIndex.vue b/src/pages/show/showIndex/showIndex.vue
index 3876f73..77f5dff 100644
--- a/src/pages/show/showIndex/showIndex.vue
+++ b/src/pages/show/showIndex/showIndex.vue
@@ -1,26 +1,57 @@
<template>
<div class="showIndex-wrap">
<div class="mapBox">
- <baidu-map
- :center="center"
- :zoom="zoom"
- class="bm-view"
- @ready="handler">
- </baidu-map>
+<!-- <baidu-map-->
+<!-- :center="center"-->
+<!-- :zoom="zoom"-->
+<!-- class="bm-view"-->
+<!-- @ready="handler">-->
+<!-- </baidu-map>-->
+ <div class="map" id="map"></div>
<!--<div class="map_container" id="map_container"></div>-->
</div>
+ <div class="upload-box" ref="upload-box">
+ <el-dropdown @command="uploadClick">
+ <el-button class="uploadBtn" plain size="small">
+ 涓婁紶鏂囦欢<i class="el-icon-arrow-down el-icon--right"></i>
+ </el-button>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="1">
+ 鎶ヨ
+ </el-dropdown-item>
+ <el-dropdown-item command="0">鐘舵�佸��</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </div>
<div class="showIndex-wrap-inside">
+ <div class="chouti-box left">
+ <img @click="handlechouClickCLeft" src="../../../assets/img/zhankaiIcon.png" alt="">
+ </div>
+ <div class="chouti-box right">
+ <img @click="handlechouClickCRight" src="../../../assets/img/zhankaiIcon2.png" alt="">
+ </div>
<div class="indexMoudleBlock-box">
- <IndexMoudleBlock></IndexMoudleBlock>
+ <IndexMoudleBlock ref="IndexMoudleBlock"></IndexMoudleBlock>
</div>
<div class="yunwei-box">
- <YunweiBlock></YunweiBlock>
+ <div class="yunwei-box-inside">
+ <YunweiBlock ref="YunweiBlock"></YunweiBlock>
+ <div class="chouti-box2 left">
+ <img @click="handlechouClickSLeft" src="../../../assets/img/shouqiIcon.png" alt="">
+ </div>
+ </div>
+
</div>
<div class="rizhi-box">
- <TimesLogs></TimesLogs>
+ <div class="yunwei-box-inside">
+ <TimesLogs ref="TimesLogs"></TimesLogs>
+ <div class="chouti-box2 right">
+ <img @click="handlechouClickSRight" src="../../../assets/img/shouqiIcon2.png" alt="">
+ </div>
+ </div>
</div>
</div>
-
+ <uploadForm ref="uploadForm" v-if="uploadVisiable"></uploadForm>
</div>
</template>
@@ -28,262 +59,279 @@
import IndexMoudleBlock from "./IndexMoudleBlock";
import TimesLogs from "./TimesLogs";
import YunweiBlock from "./YunweiBlock";
+ import uploadForm from "./upload/uploadForm";
+ import {getMapData} from '@/api/daping'
+ import {animateShanFlash} from '@/utils/animateShanFlash'
export default {
name: "showIndex",
components: {
IndexMoudleBlock,
YunweiBlock,
- TimesLogs
+ TimesLogs,
+ uploadForm
},
data() {
return{
center: { lng: 118.20, lat: 39.63},
zoom: 6,
mapObj:{},
- mapData:[],
mapData2:[],
+ uploadVisiable:false, //涓婁紶鏂囦欢寮规
+ timer:null,
+ mapData:[],
+ map:'',
+ zhankaiBtnIsShow:true
}
+ },
+ destroyed() {
+ clearInterval(this.timer)
},
mounted() {
//this.getMapData()
//this.initMap()
+ this.$nextTick(() => {
+ this.initMap()
+ })
+
+
+ // this.timer = setInterval(() => {
+ // this.getMapData()
+ // },300000)
+
},
methods: {
- // initMap() {
- // let map = new BMapGL.Map('map_container')
- // map.centerAndZoom(new BMapGL.Point(118.183450598,39.6505309225),12)
- // let goodsData = require('../../../assets/js/custom_map_config2')
- // map.setMapStyleV2({
- // styleJson: goodsData
- // // styleId: '5f9b8a9639cf6e4ae8806379bedba141'
- // // style: 'bluish'
- // })
- // map.setTilt(0)
- // map.setHeading(0)
- // map.enableScrollWheelZoom(true) //寮�鍚缉鏀惧姛鑳�
- //
- // // //鍥惧眰绠＄悊鍣紙Api鏂囨。--鍥惧眰绠＄悊鍣級
- // // var view = new mapvgl.View({
- // // map: map, //鎶婄敓鎴愮殑鍦板浘map浼犺繘鏉�
- // // });
- // // //椋炵嚎鍥惧眰鐨勫垱寤烘柟寮忥紙Api鏂囨。--椋炵嚎鍥惧眰锛�
- // // var layer = new mapvgl.LineRainbowLayer({
- // // // blend: 'lighter',
- // // // width: 12,
- // // //color: 'rgba(0, 96, 222, 1)',
- // // // lineJoin:'bevel'
- // // //style: 'road', // road, arrow, normal
- // // width: 10,
- // // //animation: true
- // //
- // // });
- // // var layer2 = new mapvgl.LineFlowLayer({
- // // // color: 'rgba(0, 255, 252, 1)',
- // // // width: 14,
- // // // animation: true,
- // // // duration: 1, // 寰幆鏃堕棿2s
- // // // trailLength: 2, // 鎷栧熬闀垮害鍗犻棿闅旂殑0.4
- // // // interval: 0.1, // 绮掑瓙闀垮害鍗犵嚎鏁翠綋闀垮害鐨�0.2
- // // // //step:0.1,
- // // // startTime: 0,
- // // // endTime: 100,
- // // // color: 'rgba(255, 71, 26, 0.9)',
- // // // step: 0.1, // 鍔ㄧ敾鐨勯�熷害
- // // // width: 10,
- // // // animation: true,
- // // // startTime:0,
- // // // endTime:4,
- // // // duration: 1, // 寰幆鏃堕棿2s
- // // // trailLength: 0.2, // 鎷栧熬闀垮害鍗犻棿闅旂殑0.4
- // // // interval: 0.1 // 绮掑瓙闀垮害鍗犵嚎鏁翠綋闀垮害鐨�0.2
- // // color: 'rgba(0, 255, 252, 1)',
- // // width: 6,
- // // animation: true,
- // // duration: 1.5, // 寰幆鏃堕棿2s
- // // trailLength: 1, // 鎷栧熬闀垮害鍗犻棿闅旂殑0.4
- // // interval: 0.05, // 绮掑瓙闀垮害鍗犵嚎鏁翠綋闀垮害鐨�0.2
- // // step:0.02,
- // // startTime: 0,
- // // endTime: 100,
- // // });
- // // // let layer = new mapvgl.LineTripLayer({
- // // // color: 'rgba(255, 71, 26, 0.9)',
- // // // width: 16,
- // // // animation: true,
- // // // duration: 1, // 寰幆鏃堕棿2s
- // // // trailLength: 20, // 鎷栧熬闀垮害鍗犻棿闅旂殑0.4
- // // // interval: 0.1 // 绮掑瓙闀垮害鍗犵嚎鏁翠綋闀垮害鐨�0.2
- // // // });
- // // view.addLayer(layer) //鎶婂浘灞傛坊鍔犲埌鍥惧眰绠＄悊鍣ㄩ噸
- // // view.addLayer(layer2) //鎶婂浘灞傛坊鍔犲埌鍥惧眰绠＄悊鍣ㄩ噸
- // // layer.setData(this.mapData2) //鍥惧眰鏁版嵁
- // // layer2.setData(this.mapData2) //鍥惧眰鏁版嵁
- // },
+ handlechouClickCLeft() { //宸﹀嚭
+ this.$nextTick(() => {
+ this.$refs.IndexMoudleBlock.loading()
+ const tl = this.gsap.timeline({defaults: {duration: 0.8}})
+ tl.fromTo('.yunwei-box',{
+ left: '-100%',
+ },{
+ left: '10px',
+ //autoAlpha: 0,
+ duration:1,
+ // ease: 'power2.out',
+ delay:0.5,
+ ease:'back.out(1)',
+ })
+ tl.fromTo('.chouti-box.left',{
+ opacity: 1
+ },{
+ opacity: 0,
+ duration:0.5,
+ },'<')
+ })
- // getMapData() {
- // this.mapData = []
- // this.mapData2 = []
- // let re2 = [
- // [
- // {
- // lng: 118.144674,
- // lat: 39.660641
- // },
- // {
- // lng: 118.229198,
- // lat: 39.763508
- // },
- // ],
- // [
- // {
- // lng: 118.180618,
- // lat: 39.753635
- // },
- // {
- // lng: 118.229198,
- // lat: 39.753635
- // },
- // ],
- // [
- // {
- // lng: 118.232887,
- // lat: 39.619857
- // },
- // {
- // lng: 118.208669,
- // lat: 39.596232
- // }
- // ],
- // [
- // {
- // lng: 118.240577,
- // lat: 39.661919
- // },
- // {
- // lng: 118.187038,
- // lat: 39.635918
- // }
- // ],
- // [
- // {
- // lng: 118.185321,
- // lat: 39.678277
- // },
- // {
- // lng: 118.217221,
- // lat: 39.677581
- // }
- // ],
- // [
- // {
- // lng: 118.184038,
- // lat: 39.631268
- // },
- // {
- // lng: 118.184042,
- // lat: 39.624384
- // }
- // ]
- // ]
- // let re = [
- // [118.184038,39.631268],
- // [118.184042,39.624384],
- //
- //
- // ]
- // let curve = new mapvgl.BezierCurve()
- // for(let i=0; i<re2.length; i++) {
- // //re[i].lng
- // curve.setOptions({
- // start:[re2[i][0].lng,re2[i][0].lat],
- // end:[re2[i][1].lng,re2[i][1].lat]
- // })
- // let cureData = curve.getPoints()
- // console.log(re2[i],'re[i]=====')
- // this.mapData2.push({
- // geometry: { //鎼哄甫鍦扮悊淇℃伅
- // type: 'LineString',
- // coordinates:cureData, //鎶婅礉濉炲皵鏇茬嚎鐨勬暟鎹斁杩涙潵
- // }
- // })
- // }
- // console.log(this.mapData2,'mapData2===')
- // this.mapData.push({
- // geometry: { //鎼哄甫鍦扮悊淇℃伅
- // type: 'LineString',
- // coordinates:re, //鎶婅礉濉炲皵鏇茬嚎鐨勬暟鎹斁杩涙潵
- // },
- // })
- // console.log(this.mapData,'mapData===')
- // }
- handler({BMap, map}) {
- this.mapObj = {BMap, map}
- let goodsData = require('../../../assets/js/custom_map_config2')
- let point = new BMap.Point(118.183450598,39.6505309225)
- map.centerAndZoom(point, 15)
- map.enableScrollWheelZoom(true) //榧犳爣婊氬姩缂╂斁
- map.setMapStyleV2({
- styleJson: goodsData
- // styleId: '5f9b8a9639cf6e4ae8806379bedba141'
- // style: 'bluish'
- })
- map.setCurrentCity('鍞愬北') // 璁剧疆鍦板浘鏄剧ず鐨勫煄甯� 姝ら」鏄繀椤昏缃殑
+ },
+ handlechouClickSLeft() { //宸︽敹
+ this.$nextTick(() => {
+ this.$refs.IndexMoudleBlock.loading2()
+ const tl = this.gsap.timeline({defaults: {duration: 0.8}})
+ tl.fromTo('.yunwei-box',{
+ left: '0',
+ },{
+ left: '-100%',
+ //autoAlpha: 0,
+ duration:1,
+ // ease: 'power2.out',
+ delay:0.5,
+ ease:'back.out(1)',
+ })
+ tl.fromTo('.chouti-box.left',{
+ left:'-100%',
+ opacity:0
+ },{
+ left:'5px',
+ opacity:1,
+ duration:1,
+ },'<')
+ })
+ },
+ handlechouClickCRight() { //鍙冲嚭
+ this.$nextTick(() => {
+ //this.$refs.TimesLogs.loading()
+ const tl = this.gsap.timeline({defaults: {duration: 0.8}})
+ tl.fromTo('.rizhi-box',{
+ right: '-100%',
+ },{
+ right: '0',
+ //autoAlpha: 0,
+ duration:1,
+ // ease: 'power2.out',
+ delay:0.5,
+ ease:'back.out(1)',
+ })
+ tl.fromTo('.chouti-box.right',{
+ opacity: 1
+ },{
+ opacity: 0,
+ duration:0.5,
+ },'<')
+ tl.fromTo('.upload-box',{
+ right: '-100%',
+ },{
+ right: '20px',
+ duration:0.5,
+ },'<')
+ })
+
+ },
+ handlechouClickSRight() { //鍙虫敹
+ this.$nextTick(() => {
+ // this.$refs.TimesLogs.loading2()
+ const tl = this.gsap.timeline({defaults: {duration: 0.8}})
+ tl.fromTo('.rizhi-box',{
+ right: '0px',
+ },{
+ right: '-24%',
+ //autoAlpha: 0,
+ duration:1,
+ // ease: 'power2.out',
+ delay:0.5,
+ ease:'back.out(1)',
+ })
+ tl.fromTo('.chouti-box.right',{
+ opacity:0,
+ right:'-100%',
+ },{
+ opacity:1,
+ right:'5px',
+ duration:1,
+ },'<')
+ tl.fromTo('.upload-box',{
+ right: '20px',
+ },{
+ right: '-100%',
+ duration:0.5,
+ },'<')
+ })
+ },
+ initMap() {
+ this.map = new window.BMap.Map("map",{
+ minZoom : 2,
+ maxZoom : 11
+ });
+ this.map.centerAndZoom(new BMap.Point(118.583450598,39.6505309225), 11)
+ //map.enableScrollWheelZoom(true) //榧犳爣婊氬姩缂╂斁
+ this.map.setCurrentCity('鍞愬北') // 璁剧疆鍦板浘鏄剧ず鐨勫煄甯� 姝ら」鏄繀椤昏缃殑
+ this.map.enableScrollWheelZoom(true) //寮�鍚紶鏍囨粴杞缉鏀�
+ //this.getMapData()
this.addMarker()
},
+ uploadClick(type) {
+ console.log(type,'type===')
+ this.uploadVisiable = true
+ this.$nextTick(() => {
+ this.$refs.uploadForm.init(type)
+ })
+ },
+ getMapData() {
+ getMapData().then(res => {
+ if(res.code == 0) {
+ this.mapData = res.data
+ this.addMarker()
+ }
+ })
+ },
+ // handler({BMap, map}) {
+ // this.mapObj = {BMap, map}
+ // //let goodsData = require('../../../assets/js/custom_map_config2')
+ // let point = new BMap.Point(118.183450598,39.6505309225)
+ // map.centerAndZoom(point, 11)
+ // map.enableScrollWheelZoom(true) //榧犳爣婊氬姩缂╂斁
+ // // map.setMapStyleV2({
+ // // styleJson: goodsData
+ // // // styleId: '5f9b8a9639cf6e4ae8806379bedba141'
+ // // // style: 'bluish'
+ // // })
+ // map.setCurrentCity('鍞愬北') // 璁剧疆鍦板浘鏄剧ず鐨勫煄甯� 姝ら」鏄繀椤昏缃殑
+ // this.getMapData()
+ //
+ // },
addMarker() {
- this.mapData = [
- {
- latitude: '118.20,39.63',
- },
- {
- latitude: '118.117511,39.625670',
- },
- {
- latitude: '118.114897,39.684427',
- },
- {
- latitude: '118.119517,39.655598',
- },
- {
- latitude: '118.116267,39.694433',
- },
- {
- latitude: '118.311267,39.694433',
- },
- {
- latitude: '118.211267,39.694433',
- },
- {
- latitude: '118.011267,39.674433',
- },
- {
- latitude: '118.011227,39.604433',
- }
- ]
- let BMap = this.mapObj.BMap
- let map = this.mapObj.map
+ let BMap = window.BMap
+ this.map.clearOverlays() // 娓呴櫎鍦板浘涓婃墍鏈夎鐩栫墿
+ //let map = new window.BMap.Map("map");
+ let mapMarkers = []
+ this.mapData = [{
+ lon:118.167201,
+ lat:39.60944,
+ address: '娌冲寳鐪佸攼灞卞競寮�骞冲尯涓滆タ澶ц199鍙�',
+ health: '0'
+ },{
+ lon:118.15782,
+ lat:39.63102,
+ address: '娌冲寳鐪佸攼灞卞競璺崡鍖烘柊鍗庤タ閬�76鍙�4灞�',
+ health: '0'
+ },{
+ lon:118.09289,
+ lat:39.58163,
+ address: '娌冲寳鐪佸攼灞卞競涓板崡鍖烘鑻戝ぇ琛�7鍙�',
+ health: '0'
+ },{
+ lon:118.45153,
+ lat:39.74049,
+ address: '娌冲寳鐪佸攼灞卞競鍙ゅ喍鍖烘案鐩涜矾',
+ health: '1'
+ },{
+ lon:118.45153,
+ lat:39.74049,
+ address: '娌冲寳鐪佸攼灞卞競鍙ゅ喍鍖烘案鐩涜矾',
+ health: '1'
+ }]
+ // this.mapData.forEach(item => {
+ // let marker = new BMap.Marker(item.lon,item.lat)
+ // mapMarkers.push(marker)
+ // this.mapObj.map.addOverlay(marker)
+ // })
+ // let markerClusterer = new BMapLib.MarkerClusterer(this.mapObj.map, {
+ // markers: mapMarkers,
+ // styles: [
+ // {
+ // url: "./static/img/markerIcon3",
+ // size: new BMap.Size(35, 35),
+ // },
+ // ],
+ // })
+ // markerClusterer.setMinClusterSize(2)
this.mapData.forEach(item => { //lng 缁忓害 lat 缁忓害
- if(item.latitude != null && item.latitude != '') {
- let longitude = item.latitude.split(',')[0]
- let latitude = item.latitude.split(',')[1]
- let myIcon = new BMap.Icon(
- require("../../../assets/img/markerIcon.png"),
- new BMap.Size(35, 35),
- { imageSize: new BMap.Size(35, 35),anchor : new BMap.Size(35, 35) })
+ console.log(this.mapData,'this.mapData===')
+ if(item.lon && item.lat) {
+ let longitude = item.lon
+ console.log(item.lon,'缁忕含----')
+ console.log(item.lat,'缁忕含----')
+ let latitude = item.lat
+ let myIcon = ''
+ if(item.health == 0) {
+ myIcon = new BMap.Icon(
+ '../../../../static/img/markerIcon3.png',
+ new BMap.Size(35, 35),
+ { imageSize: new BMap.Size(35, 35),anchor : new BMap.Size(35, 35) })
+ }else {
+ myIcon = new BMap.Icon(
+ '../../../../static/img/markerIcon2.png',
+ new BMap.Size(35, 35),
+ { imageSize: new BMap.Size(35, 35),anchor : new BMap.Size(35, 35) })
+ }
+
let point = new BMap.Point(longitude,latitude)
let marker = new BMap.Marker(point,{icon:myIcon})
- map.addOverlay(marker)
- map.setZoom(12)
+ this.map.addOverlay(marker)
+ this.map.setZoom(11)
// 娣诲姞榧犳爣鍒掑叆鍧愭爣鐐圭殑鏄剧ず鍐呭
+ let isH = ''
+ if(item.health == 0) {
+ isH = '姝ｅ父'
+ }else {
+ isH = '寮傚父'
+ }
let str = '<div style="padding:4px 10px;width:300px;max-width: 400px;display: flex;flex-direction: row;">'
str += '<div>'
- str += '<h1 style="font-size: 13px;text-align: center;line-height: 2"> ' + item.subjectName + '</h1>'
str += '<div style="display: flex;flex-direction: column">'
- str += '<div><h1 style="font-size: 12px;padding:2px 0;width: 100%;white-space:pre-wrap">妗堜欢鎻忚堪锛�'+item.casePoint+'</h1></div>'
+ str += '<div><h1 style="font-size: 12px;padding:2px 0;width: 100%;white-space:pre-wrap">閫氳鐘舵�侊細'+isH+'</h1></div>'
str += '<div><h1 style="font-size: 12px;padding:2px 0"">鍦板潃锛�'+item.address+'</h1></div>'
- str += '<div><h1 style="font-size: 12px;padding:2px 0">鏃堕棿锛�'+item.time+'</h1></div>'
str += '</div>'
str += '</div>'
let opts = {
@@ -303,24 +351,48 @@
// 榛樿涓嶆樉绀烘枃鏈爣娉�
label.hide()
// 鍦ㄥ叏鏅満鏅唴娣诲姞瑕嗙洊鐗�
- map.addOverlay(label);
- marker.addEventListener('mouseover', function () {
- //榧犳爣绉诲叆鍔ㄧ敾
- let divElement = document.createElement('div')
- divElement.className = 'before'
- let divElement2 = document.createElement('div')
- divElement2.className = 'after'
- marker.gd.innerHtml = marker.gd.childNodes[0]
- marker.gd.appendChild(divElement)
- marker.gd.appendChild(divElement2)
- marker.gd.className = ''
- marker.gd.className = 'mapBGFault'
- label.show()
- })
- marker.addEventListener('mouseout', function () {
- marker.gd.className = ''
- label.hide()
- })
+ this.map.addOverlay(label);
+
+
+ this.map.addEventListener('tilesloaded',function () {
+ // marker.domElement.className = marker.domElement.className + 'mapBGAnimate'
+ // console.log(marker.domElement.className,'marker====')
+ if(item.health == 1) {
+ let divElement = document.createElement('div')
+ divElement.className = 'before'
+ let divElement2 = document.createElement('div')
+ divElement2.className = 'after'
+ //marker.ad.innerHTML = marker.ad.childNodes[0]
+ marker.ad.appendChild(divElement)
+ marker.ad.appendChild(divElement2)
+ marker.ad.firstChild.style.position = 'relative'
+ marker.ad.firstChild.style.zIndex = '5';
+ }
+ marker.ad.style.overflow = ''
+ marker.ad.className = ''
+ marker.ad.className = 'mapBGAnimate'
+ })
+
+ let bdary = new BMap.Boundary();
+ console.log(bdary,'======================bdary=================')
+
+ bdary.get('鍞愬北甯傝矾鍖楀尯', (rs) => { //鑾峰彇琛屾斂鍖哄煙
+ alert(111)
+ console.log(re,'re=================')
+ //杩欓噷鏄敤鎴疯嚜宸辩殑鍑芥暟銆�
+ this.map.clearOverlays(); //娓呴櫎鍦板浘瑕嗙洊鐗�
+ var count = rs.boundaries.length; //琛屾斂鍖哄煙鐨勭偣鏈夊灏戜釜
+
+ for(var i = 0; i < count; i++){
+
+ var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //寤虹珛澶氳竟褰㈣鐩栫墿
+
+ this.map.addOverlay(ply); //娣诲姞瑕嗙洊鐗�
+ this.map.setViewport(ply.getPath()); //璋冩暣瑙嗛噹
+
+ }
+
+ });
}
})
@@ -329,6 +401,76 @@
}
</script>
+
+<style lang="scss">
+.mapBGAnimate{
+ position: relative;
+ img{
+ animation: huxi 2s infinite;
+ transform-origin: center;
+ filter:drop-shadow(0px 4px 2px rgba(0,0,0,0.3));
+ }
+}
+@keyframes huxi {
+ 0%{
+ transform: translateY(0);
+ }
+ 50%{
+ transform: translateY(-10px);
+ }
+ 100%{
+ transform: translateY(0);
+ }
+}
+.mapBGAnimate .before{
+ content: '';
+ position: absolute;
+ left: -2px;
+ top:15px;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: rgba(255,0,6,0.5);
+ transform: scale(0);
+ animation: myfirst 2s;
+ animation-iteration-count: infinite;
+ z-index: 4;
+}
+.mapBGAnimate .after{
+ content: '';
+ position: absolute;
+ left: -2px;
+ top:15px;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: rgba(255,0,6,0.4);
+ transform: scale(0);
+ animation: myfirst 2s infinite 0.3s;
+ z-index: 4;
+}
+@keyframes myfirst {
+ to{
+ background: rgba(0,0,0,0);
+ transform: scale(2);
+ }
+}
+ .upload-box{
+ .uploadBtn{
+ background: linear-gradient(to right,#0e0e25,#092749);
+ }
+ .el-button.is-plain:hover{
+ background: linear-gradient(to right, #0e0e25, #092749)!important;
+ }
+ .el-button{
+ border:1px solid #1ee3f3!important;
+ span{
+ color: #fff;
+ }
+ }
+ }
+
+</style>
<style lang="scss" scoped>
.showIndex-wrap{
@@ -336,24 +478,90 @@
height: calc(100% - 0.4167rem /* 80/192 */);
margin-top: 0.1042rem /* 20/192 */;
position: relative;
- .indexMoudleBlock-box{
+ .upload-box{
position: absolute;
- left: 0.1823rem /* 35/192 */;
- top: 0;
+ right: -100%;
+ top: -0.09375rem /* -18/192 */;
+ z-index: 999999999;
+ }
+ .showIndex-wrap-inside{
+ width: 100%;
+ height: 100%;
+ .chouti-box{
+ width: 0.1771rem /* 34/192 */;
+ height: 0.4896rem /* 94/192 */;
+ cursor: pointer;
+ z-index: 9999;
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ &.left{
+ position: absolute;
+ left: 10px;
+ top: 20%;
+ }
+ &.right{
+ position: absolute;
+ right: 10px;
+ top: 20%;
+ }
+ }
+ }
+ .indexMoudleBlock-box{
+ //position: absolute;
+ //left: 0.1823rem /* 35/192 */;
+ //top: 0;
+ width: 100%;
+ display: flex;
}
.yunwei-box{
position: absolute;
- left: 0.1823rem /* 35/192 */;
+ left:-100%;
top: 0.9375rem /* 180/192 */;
height: calc(100% - 0.9896rem /* 190/192 */);
max-height: 4.078125rem /* 783/192 */;
+ .yunwei-box-inside{
+ position: relative;
+ .chouti-box2{
+ width: 0.1771rem /* 34/192 */;
+ height: 0.4896rem /* 94/192 */;
+ cursor: pointer;
+ &.left{
+ position: absolute;
+ right: -0.2083rem /* -40/192 */;
+ top: 0.1042rem /* 20/192 */;
+ }
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
}
.rizhi-box{
position: absolute;
- right: 0.15625rem /* 30/192 */;
+ right: -100%;
top:0.9375rem /* 180/192 */;
height: calc(100% - 0.9896rem /* 190/192 */);
max-height: 4.078125rem /* 783/192 */;
+ .yunwei-box-inside{
+ position: relative;
+ .chouti-box2{
+ width: 0.1771rem /* 34/192 */;
+ height: 0.4896rem /* 94/192 */;
+ cursor: pointer;
+ &.right{
+ position: absolute;
+ left:-0.15625rem /* -30/192 */;
+ top: 0.1042rem /* 20/192 */;
+ }
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
}
.mapBox{
width: 100%;
@@ -362,6 +570,10 @@
top: -0.4167rem /* -80/192 */;
bottom: 0;
right: 0;
+ .map{
+ width: 100%;
+ height: 100%;
+ }
.map_container{
width: 100%;
height: 100%;
--
Gitblit v1.9.1