cx-wed/src/components/subject/projectplan/CollectiveLandAcquisition/loadingmap.vue

<template>
	<div class="app">
		<div class='picA'>
			<mapOpenlayers ref="map"></mapOpenlayers>
		    <div class='picB'>
				<Imgopenseadragon style="width: calc(100% - 16px);z-index: 99;background: #fff;left: 16px;" :strpdetails='strpdetails'></Imgopenseadragon>
		        <div readonly class='resizeElement'></div>
		    </div>
		</div>
	</div>
</template>

<script>
	import Imgopenseadragon from '../../../assembly/imgOpenseadragon.vue'
	import mapOpenlayers from '../../../assembly/mapOpenlayers.vue'
	export default {
		name: "Demolition",
		props: ['strpdetails'],
		components: {
			Imgopenseadragon,
			mapOpenlayers
		},
		data() {
			return {}
		},
		mounted() {
			let timer = setTimeout(() => {
			  this.$refs.map.initMap()
			  clearTimeout(timer)
			}, 500)
		},
		watch: {},
		methods: {}
	}
</script>

<style scoped lang="less">
	.app{
		width: 100%;
		height: 100%;
	}
	.picA {
	    width: 100%;
	    height: 100%;
	    padding: 0;
	    position: relative;
	    overflow: hidden;
	}
	
	.picB {
	    height: 100%;
	    position: absolute;
	    top: 0;
	    right: 0;
	    min-width: 0;
	    max-width:  calc(100% - 170px);
	    box-sizing: border-box;
	}
	.picB:before {
	    content: "↔";
	    position: absolute;
	    background: rgba(0, 0, 0, 0.5);
	    font-size: 16px;
	    color: white;
	    top: 0;
	    left: 0;
	    height: 100%;
	    line-height: 340px;
	}
	
	.resizeElement {
		border: 1px solid #000;
	    resize: horizontal;
	    overflow: scroll;
	    opacity: 0;
	    position: relative;
	    top: 0%;
	    left: 0px;
	    max-width: 100%;
	    min-width: 280px;
	    width: 350px;
	    cursor: move;
	    transform: scaleY(200) rotate(180deg);
	    transform-origin: center center;
	    animation: delta 3s normal ease-in-out 0.5s;
	}
	@keyframes delta {
	    0% {
	        width: 0;
	    }
	    30% {
	        width: 350px;
	    }
		60% {
		    width: 0px;
		}
	    100% {
	        width: 350px;
	    }
	}
</style>