<template>
|
<div class="box">
|
<!-- <div id="PROMTILE" v-if="PROMVIDEO">
|
<div id="PROMTILECLOSE" @click="PROMTILECLOSE()">
|
<img src="../../assets/img/pdf/Close.png" />
|
</div>
|
<iframe v-bind:src="ifreamUrl" style="width: 100%; height: 100%"></iframe>
|
</div> -->
|
<div class="content left">
|
<div class="layout">
|
<div class="layout_box">
|
<left1 @geturl="geturl(arguments)"></left1>
|
</div>
|
</div>
|
</div>
|
<div class="content center">
|
<!-- <iframe
|
src="https://bxgft.shouguang.gov.cn/ditu"
|
style="width: 100%; height: 100%"
|
class="mapindex"
|
></iframe> -->
|
<iframe
|
src="../turnjs/Code/index.html"
|
style="width: 100%; height: 100%"
|
></iframe>
|
<div class="center_mask">
|
<center @geturl="geturl(arguments)"></center>
|
</div>
|
</div>
|
<div class="content right">
|
<div class="layout">
|
<div class="layout_box" style="width: 100%">
|
<left2 @geturl="geturl(arguments)"></left2>
|
</div>
|
</div>
|
</div>
|
<!-- <el-dialog
|
:visible.sync="PROMVIDEO"
|
width="50%"
|
top="5vh"
|
:append-to-body="true"
|
:modal-append-to-body="false"
|
>
|
<div class="showTaggleOne">
|
<iframe
|
v-bind:src="ifreamUrl"
|
style="width: 100%; height: 100%"
|
></iframe>
|
</div>
|
</el-dialog> -->
|
<div v-if="PROMVIDEO" class="showVideone" @click="showvidetwo()">
|
<div class="ShowVideo1">
|
<iframe
|
v-bind:src="ifreamUrl"
|
style="width: 100%; height: 100%"
|
></iframe>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import left1 from "./left/left1.vue";
|
import left2 from "./left/left2.vue";
|
import right1 from "./right/right1.vue";
|
import center from "./center/center.vue";
|
import maodatamanage from "../../../src/components/MapDataMange.vue";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {
|
left1,
|
left2,
|
right1,
|
center,
|
maodatamanage,
|
},
|
data() {
|
//这里存放数据
|
return {
|
PROMVIDEO: false,
|
ifreamUrl: "",
|
};
|
},
|
//方法集合
|
methods: {
|
showvidetwo() {
|
this.PROMVIDEO = false;
|
},
|
geturl(response) {
|
this.PROMVIDEO = true;
|
this.ifreamUrl = response[0];
|
},
|
PROMTILECLOSE() {
|
this.PROMVIDEO = false;
|
this.ifreamUrl = " ";
|
},
|
},
|
mounted() {},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.box {
|
width: 100%;
|
|
height: 100vh;
|
position: relative;
|
overflow: hidden;
|
display: flex;
|
.showVideone {
|
background: rgba(0, 0, 0, 0.5);
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
z-index: 100;
|
}
|
.ShowVideo1 {
|
background: rgba(0, 0, 0, 0.5);
|
width: 45%;
|
height: 93%;
|
position: absolute;
|
z-index: 100;
|
left: 28%;
|
top: 5vh;
|
}
|
.content {
|
font-size: 80px;
|
width: 2308px;
|
background-size: 100% 100%;
|
padding: 0 102px;
|
box-sizing: border-box;
|
height: 100%;
|
.layout {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.layout_box {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
#PROMTILE {
|
position: absolute;
|
top: 15%;
|
left: 30%;
|
width: 40%;
|
height: 70%;
|
border: 1px solid;
|
/* background: wheat; */
|
background: white;
|
z-index: 30;
|
}
|
#PROMTILECLOSE {
|
img {
|
width: 200px;
|
height: 200px;
|
float: right;
|
margin-top: -3%;
|
margin-right: -4%;
|
}
|
}
|
.left {
|
background: rgba(8, 32, 58, 0.5);
|
padding-top: 316px;
|
position: absolute;
|
left: 0;
|
top: 0;
|
z-index: 30;
|
}
|
.right {
|
background: rgba(8, 32, 58, 0.5);
|
background-size: 100% 100%;
|
padding-top: 316px;
|
position: absolute;
|
right: 0;
|
top: 0;
|
z-index: 30;
|
}
|
.center {
|
width: 100%;
|
background-image: none !important;
|
padding-right: 0;
|
padding-left: 0;
|
margin: 0;
|
position: relative;
|
.center_mask {
|
width: 9074px;
|
height: 100%;
|
box-sizing: border-box;
|
padding-top: 316px;
|
// padding-left: 100px;
|
// padding-right: 100px;
|
position: absolute;
|
left: 2300px;
|
top: 0;
|
z-index: 29;
|
// background: url("../../assets/img/图层 32.png") no-repeat center;
|
background: rgba(0, 0, 0, 0.5);
|
background-size: 100% 100%;
|
}
|
}
|
}
|
@media only screen and (max-width: 2560px) {
|
.box {
|
// background-color: #fff;
|
|
height: 100%; //有问题，不能被撑开
|
// height: 200%;
|
.center {
|
.center_mask {
|
background: rgba(0, 0, 0, 0.7);
|
width: 100%;
|
left: 0px;
|
}
|
}
|
|
.left {
|
background: rgba(8, 32, 58, 0.7);
|
display: none;
|
}
|
.right {
|
background: rgba(8, 32, 58, 0.7);
|
display: none;
|
}
|
overflow: hidden;
|
.content {
|
height: 100%;
|
|
.layout {
|
position: absolute;
|
height: 38%;
|
.layout_box {
|
height: auto;
|
width: 100% !important;
|
}
|
}
|
}
|
}
|
}
|
@media only screen and (max-width: 1920px) {
|
.box {
|
// background-color: #fff;
|
|
.ShowVideo1 {
|
background: rgba(0, 0, 0, 0.5);
|
width: 80%;
|
height: 80%;
|
position: absolute;
|
z-index: 100;
|
left: 10%;
|
top: 10%;
|
}
|
}
|
}
|
</style>
|
