<template>
|
<div class="box">
|
<div v-show="contLeft" class="content left">
|
<el-row class="left_one">
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="15" class="layout_box">
|
<left1_1 class="left1_1"></left1_1>
|
<left1_2 class="left1_2"></left1_2>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="9">
|
<left2_1 class="left2_1" @showProm="showProm"></left2_1>
|
<left2_2 class="left2_2" @showToGoRester="showToGoRester"></left2_2>
|
</el-col>
|
</el-row>
|
<el-row class="left_two">
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="15" class="layout_box">
|
<left1_1 class="left1_1"></left1_1>
|
<left1_2 class="left1_2"></left1_2>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="9">
|
<left2_1 class="left2_1" @showProm="showProm"></left2_1>
|
<left2_2 class="left2_2" @showToGoRester="showToGoRester"></left2_2>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="content center">
|
<!-- <iframe
|
src="https://bxgft.shouguang.gov.cn/ditu"
|
style="width: 100%; height: 100%"
|
class="mapindex"
|
></iframe> -->
|
<map-view class="mapindex"></map-view>
|
<div class="center_header">
|
<div class="center_msg">
|
<div class="propaganda" @click="VIDEOCLICK()">
|
<h3>寿光宣传片</h3>
|
</div>
|
<div class="vr" @click="SZDZLICK()">
|
<h3>数字底座</h3>
|
</div>
|
<div class="vr" @click="SZJGCLICK()">
|
<h3>数字机关</h3>
|
</div>
|
<div class="vr" @click="VRCLICK()">
|
<h3>寿光VR</h3>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-show="contLeft" class="content right">
|
<right2_1 class="right2_1"></right2_1>
|
</div>
|
<!-- 宣传册弹框 -->
|
<el-dialog
|
:visible.sync="brochure"
|
width="33%"
|
top="5vh"
|
:append-to-body="true"
|
:modal-append-to-body="false"
|
>
|
<div class="videodialog_box">
|
<iframe
|
src="http://localhost:8080/turnjs/index.html"
|
style="width: 100%; height: 100%"
|
></iframe>
|
</div>
|
</el-dialog>
|
<!-- 宣传片弹框 -->
|
<!-- <el-dialog
|
:visible.sync="Promotional"
|
width="50%"
|
top="5vh"
|
:append-to-body="true"
|
:modal-append-to-body="false"
|
> -->
|
<div v-if="Promotional" class="showVideone" @click="showvideone()">
|
<div class="ShowVideo1">
|
<!-- <div class="videodialog_box"> -->
|
<video
|
style="object-fit: fill; width: 100%; height: 100%"
|
src="../../assets/img/shujuguanli/数据应用管理平台视频.mp4"
|
autoplay="autoplay"
|
poster="../../assets/img/寿光宣传片.png"
|
loop
|
x5-playsinline="true"
|
playsinline="true"
|
webkit-playsinline="true"
|
x-webkit-airplay="allow"
|
x5-video-player-type="h5"
|
x5-video-player-fullscreen="true"
|
></video>
|
</div>
|
</div>
|
<!-- </el-dialog> -->
|
<!-- 下宣传片弹框 -->
|
<!-- <el-dialog
|
:visible.sync="PROMVIDEO"
|
width="50%"
|
top="5vh"
|
:append-to-body="true"
|
:modal-append-to-body="false"
|
>
|
<div class="videodialog_box">
|
<video
|
style="object-fit: fill; width: 100%; height: 100%"
|
src="../../assets/img/寿光宣传片2016.mp4"
|
autoplay="autoplay"
|
muted="muted"
|
loop
|
x5-playsinline="true"
|
playsinline="true"
|
webkit-playsinline="true"
|
x-webkit-airplay="allow"
|
x5-video-player-type="h5"
|
x5-video-player-fullscreen="true"
|
></video>
|
</div>
|
</el-dialog> -->
|
<div v-if="PROMVIDEO" class="showVideone" @click="showvidetwo()">
|
<div class="ShowVideo1">
|
<!-- <div class="videodialog_box"> -->
|
<video
|
style="object-fit: fill; width: 100%; height: 100%"
|
src="../../assets/img/寿光宣传片2016.mp4"
|
autoplay="autoplay"
|
poster="../../assets/img/1640163807(1).jpg"
|
loop
|
x5-playsinline="true"
|
playsinline="true"
|
webkit-playsinline="true"
|
x-webkit-airplay="allow"
|
x5-video-player-type="h5"
|
x5-video-player-fullscreen="true"
|
></video>
|
</div>
|
</div>
|
<!-- <div id="FreeBoolk">
|
<div class="modal-background">
|
<div class="modal">
|
<div id="magazine" style="margin-top: 30%">
|
<div id="DHTMLCLOSE" @click="handleClose()">
|
<img src="../../assets/img/pdf/Close.png" />
|
</div>
|
<img class="DHTMLFTE" src="../../assets/img/pdf/左箭头.png">
|
<img class="DHTMRIGHT" src="../../assets/img/pdf/右箭头.png">
|
<iframe
|
src="./RESTER.html"
|
style="width: 100%; height: 100%"
|
></iframe>
|
</div>
|
</div>
|
</div>
|
</div> -->
|
<!-- <div id="Promotional" v-if="Promotional">
|
<div id="videoClose" @click="videoClose()">
|
<img src="../../assets/img/pdf/Close.png" />
|
</div>
|
<video
|
style="object-fit: fill; width: 100%; height: 100%"
|
src="../../assets/img/shujuguanli/数据应用管理平台视频.mp4"
|
autoplay="autoplay"
|
loop
|
x5-playsinline="true"
|
playsinline="true"
|
webkit-playsinline="true"
|
x-webkit-airplay="allow"
|
x5-video-player-type="h5"
|
x5-video-player-fullscreen="true"
|
></video>
|
</div> -->
|
<!-- <div id="PROMTILE" v-if="PROMVIDEO">
|
<div id="videoClose" @click="VIDEOCLOSE()">
|
<img src="../../assets/img/pdf/Close.png" />
|
</div>
|
<video
|
style="object-fit: fill; width: 100%; height: 100%"
|
src="../../assets/img/寿光宣传片2016.mp4"
|
autoplay="autoplay"
|
loop
|
x5-playsinline="true"
|
playsinline="true"
|
webkit-playsinline="true"
|
x-webkit-airplay="allow"
|
x5-video-player-type="h5"
|
x5-video-player-fullscreen="true"
|
></video>
|
</div> -->
|
<div v-show="FullOpen" id="fullopen" @click="fullopen"></div>
|
<div v-show="FullClose" id="fullclose" @click="fullclose"></div>
|
</div>
|
</template>
|
|
<script>
|
import left1_1 from "./left/left1-1.vue";
|
import left1_2 from "./left/left1-2.vue";
|
import left2_1 from "./left/left2-1.vue";
|
import left2_2 from "./left/left2-2.vue";
|
import right2_1 from "./right/right2-1.vue";
|
import MapView from "../../components/MapDataMange.vue";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
|
components: {
|
left1_1,
|
left1_2,
|
left2_1,
|
left2_2,
|
right2_1,
|
// right2_2,
|
MapView,
|
},
|
data () {
|
//这里存放数据
|
return {
|
brochure: false,
|
Promotional: false,
|
dialogVisible: false,
|
PROMVIDEO: false,
|
Request_flag: 1,
|
nI: 0,
|
kI: 0,
|
IMGSRC: null,
|
DB: null,
|
P01: null,
|
P01i: null,
|
P02: null,
|
P02i: null,
|
P1: null,
|
P1i: null,
|
P2: null,
|
P2i: null,
|
nI: null,
|
FullOpen: true,
|
FullClose: false,
|
contLeft: true,
|
};
|
},
|
//方法集合
|
|
mounted () {
|
this.oBox = document.getElementById("box");
|
this.oPage = document.querySelector(".page");
|
this.oPage2 = document.querySelector(".page2");
|
this.oFront = document.querySelector(".front");
|
this.oBack = document.querySelector(".back");
|
},
|
methods: {
|
fullclose () {
|
this.contLeft = true;
|
this.FullOpen = true;
|
this.FullClose = false;
|
},
|
fullopen () {
|
this.contLeft = false;
|
this.FullOpen = false;
|
this.FullClose = true;
|
},
|
showvideone () {
|
// var myVideo = document.getElementById("movie");
|
// myVideo.pause();
|
this.Promotional = false;
|
},
|
showvidetwo () {
|
this.PROMVIDEO = false;
|
},
|
SZJGCLICK () {
|
window.open("http://172.16.1.132/zfoa/DefaultZFNew2.aspx");
|
},
|
SZDZLICK () {
|
window.open("http://172.16.1.19/");
|
},
|
VRCLICK () {
|
window.open("https://vr.shouguang.gov.cn/");
|
},
|
// VIDEOCLOSE() {
|
// this.PROMVIDEO = false;
|
// },
|
VIDEOCLICK () {
|
this.PROMVIDEO = true;
|
},
|
//宣传片弹窗
|
showProm (val) {
|
this.Promotional = val;
|
// var container = document.getElementById("Promotional");
|
// container.removeAttribute("class");
|
// document.getElementsByTagName("body")[0].className = "modal-active";
|
// container.classList.add("class", "one");
|
},
|
// videoClose() {
|
// this.Promotional = false;
|
// },
|
showToGoRester (val) {
|
this.brochure = val;
|
},
|
|
// handleClose() {
|
// document.getElementById("FreeBoolk").classList.add("out");
|
// document.body.removeAttribute("class");
|
// },
|
},
|
created () { },
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
// @import url("../../assets/css/FREEBOOK.css"); //引入公共css类
|
.el-dialog,
|
.el-pager li {
|
background: transparent;
|
}
|
|
.box {
|
width: 100%;
|
height: 100vh;
|
overflow: hidden;
|
display: flex;
|
position: relative;
|
#fullopen {
|
z-index: 30;
|
bottom: 0%;
|
right: 25.5%;
|
width: 2%;
|
height: 10%;
|
position: absolute;
|
background: url("../../assets/img/fullopen.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
#fullclose {
|
z-index: 30;
|
bottom: 0%;
|
right: 1%;
|
width: 2%;
|
height: 10%;
|
position: absolute;
|
background: url("../../assets/img/fullclose.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.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.5%;
|
top: 5vh;
|
}
|
.content {
|
font-size: 80px;
|
width: 4616px;
|
height: 100%;
|
// background: url("../../assets/img/zuo.png") no-repeat center;
|
background-size: 100% 100%;
|
padding: 0 132px;
|
box-sizing: border-box;
|
overflow: hidden;
|
.left_two {
|
display: none;
|
}
|
.left_one {
|
display: block;
|
}
|
}
|
#Promotional {
|
position: absolute;
|
top: 15%;
|
left: 35%;
|
width: 30%;
|
height: 70%;
|
}
|
#PROMTILE {
|
position: absolute;
|
top: 15%;
|
left: 35%;
|
width: 30%;
|
height: 70%;
|
}
|
#videoClose {
|
img {
|
width: 200px;
|
height: 200px;
|
float: right;
|
margin-top: -5%;
|
margin-right: -5%;
|
}
|
}
|
#magazine {
|
width: 200%;
|
height: 2000px;
|
|
margin-left: -50%;
|
}
|
#DHTMLCLOSE {
|
img {
|
width: 200px;
|
height: 200px;
|
float: right;
|
margin-top: -5%;
|
margin-right: -5%;
|
}
|
}
|
.left {
|
background: rgba(8, 32, 58, 0.5);
|
width: 3800px;
|
padding-top: 316px;
|
position: absolute;
|
left: 0;
|
top: 0;
|
z-index: 30;
|
}
|
.right {
|
width: 3462px;
|
// background: url("../../assets/img/you.png") no-repeat center;
|
// background: url("../../assets/img/zuo.png") no-repeat center;
|
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;
|
position: relative;
|
.center_header {
|
background: rgba(0, 0, 0, 0.5);
|
position: relative;
|
width: 100%;
|
height: 13%;
|
bottom: 14%;
|
}
|
.center_msg {
|
width: 34%;
|
display: flex;
|
justify-content: flex-start;
|
position: absolute;
|
bottom: 10%;
|
left: 50%;
|
transform: translateX(-50%);
|
z-index: 40;
|
.propaganda {
|
width: 658px;
|
height: 288px;
|
background: url("../../assets/img/图层 21-2.png") no-repeat center;
|
background-size: 100% 100%;
|
line-height: 180px;
|
cursor: pointer;
|
}
|
.propaganda h3 {
|
background-image: -webkit-linear-gradient(bottom, #00d2ff, #00ffb4);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
font-size: 74px;
|
text-align: center;
|
-webkit-text-stroke: 2px #000;
|
}
|
.vr {
|
margin-left: auto;
|
width: 658px;
|
height: 288px;
|
background: url("../../assets/img/图层 21-2.png") no-repeat center;
|
background-size: 100% 100%;
|
line-height: 180px;
|
cursor: pointer;
|
}
|
.vr h3 {
|
background-image: -webkit-linear-gradient(bottom, #00d2ff, #00ffb4);
|
// background-image: -webkit-linear-gradient(bottom, #fffb89, #ffaa15);
|
-webkit-background-clip: text;
|
color: transparent;
|
font-size: 74px;
|
text-align: center;
|
font-weight: bold;
|
-webkit-text-stroke: 2px #000;
|
}
|
}
|
}
|
}
|
.videodialog_box {
|
width: 100%;
|
height: 2500px;
|
}
|
@media only screen and (max-width: 2560px) {
|
.box {
|
height: 150%;
|
#fullopen {
|
height: 5%;
|
right: 25%;
|
}
|
#fullclose {
|
height: 5%;
|
}
|
.ShowVideo1 {
|
background: rgba(0, 0, 0, 0.5);
|
width: 40%;
|
height: 50%;
|
position: absolute;
|
z-index: 100;
|
left: 31%;
|
top: 15%;
|
}
|
.content {
|
height: 100%;
|
|
.el-col-xl-12 {
|
width: 100% !important;
|
}
|
.left_one {
|
display: none;
|
}
|
.left_two {
|
display: block;
|
width: 100%;
|
position: relative;
|
}
|
.center_header {
|
background: rgba(0, 0, 0, 0.5);
|
position: relative;
|
width: 100%;
|
height: 6%;
|
bottom: 7%;
|
}
|
}
|
.el-col-xl-15 {
|
width: 100%;
|
}
|
.left {
|
padding-top: 400px;
|
background: rgba(8, 32, 58, 0.7);
|
|
.layout_box {
|
margin-bottom: 80px;
|
}
|
.left1_1 {
|
height: 1%;
|
}
|
.left2_1 {
|
width: 50%;
|
position: absolute;
|
left: 0;
|
top: 100%;
|
}
|
.left2_2 {
|
width: 50%;
|
position: absolute;
|
right: 0;
|
top: 100%;
|
}
|
}
|
.right {
|
padding-top: 400px;
|
background: rgba(8, 32, 58, 0.7);
|
}
|
}
|
}
|
|
@media only screen and (max-width: 1920px) {
|
.box {
|
// background-color: #fff;
|
|
height: 100%; //有问题，不能被撑开
|
}
|
}
|
|
@media only screen and (min-width: 6840px) {
|
.el-col-xl-12 {
|
width: 50% !important;
|
}
|
}
|
</style>
|
