<template>
|
<div class="invesBox">
|
<div class="boxtop">
|
<div class="boxleft">
|
<div class="titleHead">
|
<span>产业定位</span>
|
</div>
|
<video
|
src="../../../assets/images/2020.10.5经开区第一版.mp4"
|
autoplay
|
muted
|
loop
|
style="width: 400px; height: 235px"
|
@click="zjvideo()"
|
></video>
|
<marquee
|
class="wenzi"
|
direction="up"
|
scrolldelay="200"
|
behavior="scroll"
|
>
|
朝阳经济技术开发区按照“ 引进、聚集、升级、智能、低碳
|
”的产业发展思路，以高端制造和数字经济产业为主攻方向，加快绿色低碳新材料产业园、电子信息装备制造产业园、医疗器械产业园、轻纺产业园和数字经济产业园“五园”新型工业化中心区，建设现代化都市圈、高品质生活宜居地，打造朝阳全面振兴、全方位振兴引领区。
|
</marquee>
|
</div>
|
<div class="boxright">
|
<div class="titleHead">
|
<span>基础设施保障</span>
|
</div>
|
<div class="boxright1"></div>
|
</div>
|
</div>
|
<div class="boxcenter">
|
<div class="titleHead">
|
<span>投资优势</span>
|
</div>
|
<div>
|
<img
|
:src="active ? scdz : scdz1"
|
class="img2"
|
@click="CheckAttachment('生产成本优势')"
|
/>
|
<img
|
:src="active1 ? qydz : qydz1"
|
class="img3"
|
@click="CheckAttachment('区域优势')"
|
/>
|
<img
|
:src="active2 ? spdz : spdz1"
|
class="img4"
|
@click="CheckAttachment('审批服务优势')"
|
/>
|
<img
|
:src="active3 ? rcdz : rcdz1"
|
class="img5"
|
@click="CheckAttachment('人才优势')"
|
/>
|
</div>
|
</div>
|
<div class="boxbottom">
|
<div class="titleHead">
|
<span>优惠政策</span>
|
</div>
|
<div class="bottombox">
|
<div class="box1" @click="CheckAttachment('征地项目支持政策')">
|
<div class="boximg"></div>
|
<span>征地项目支持政策</span>
|
</div>
|
<div class="box1" @click="CheckAttachment('现代服务业项目政策')">
|
<div class="boximg"></div>
|
<span>现代服务业项目政策</span>
|
</div>
|
<div class="box1" @click="CheckAttachment('其他政策')" >
|
<div class="boximg"></div>
|
<span>其他政策</span>
|
</div>
|
</div>
|
<!-- <div class="favouredPolicy">
|
<img
|
:src="active4 ? zddz : zddz1"
|
class="zcimg2"
|
@click="CheckAttachment('征地项目支持政策')"
|
/>
|
<img
|
:src="active5 ? xddz : xddz1"
|
class="zcimg3"
|
@click="CheckAttachment('现代服务业项目政策')"
|
/>
|
<img
|
:src="active6 ? qtdz : qtdz1"
|
class="zcimg4"
|
@click="CheckAttachment('其他政策')"
|
/>
|
</div> -->
|
</div>
|
<div style="display: none" class="zjvideo" id="zjvideo">
|
<div
|
style="
|
font-size: 50px;
|
color: #ffffff;
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
z-index: 999999999;
|
"
|
@click="handleDialogClose11"
|
>
|
X
|
</div>
|
<video
|
src="../../../assets/images/2020.10.5经开区第一版.mp4"
|
autoplay
|
controls
|
style="width: 1615px"
|
ref="vueRef"
|
muted
|
></video>
|
</div>
|
<div class="sccb" v-if="dialogVisible7">
|
<img
|
src="../../../assets/images/a5.png"
|
style="position: absolute; left: 1190px; top: 109px"
|
@click="closeTC"
|
/>
|
<img src="../../../assets/images/生产成本优势1 (1).png" id="scOne" />
|
<img
|
src="../../../assets/images/a2.png"
|
style="position: absolute; left: 1272px; top: 425px"
|
@click="imgRight"
|
/>
|
<img
|
src="../../../assets/images/a4.png"
|
style="position: absolute; left: 7px; top: 425px"
|
@click="imgLeft"
|
/>
|
<img src="../../../assets/images/生产成本优势2.png" id="scTwo" />
|
</div>
|
<div class="sccb" v-if="dialogVisible9">
|
<img
|
src="../../../assets/images/a5.png"
|
style="position: absolute; left: 1190px; top: 109px"
|
@click="closeTC"
|
/>
|
<img src="../../../assets/images/审批服务弹窗.png" id="spOne" />
|
</div>
|
<div class="sccb" v-if="dialogVisible8">
|
<img
|
src="../../../assets/images/a5.png"
|
style="position: absolute; left: 1190px; top: 109px"
|
@click="closeTC"
|
/>
|
<img :src="showImg" />
|
<!-- <img :class="showImg" src="../../../assets/images/区域优势2.png" id="scTwo">-->
|
<!-- <img :class="showImg" src="../../../assets/images/区域优势3.png" id="scThree">-->
|
<!-- <img :class="showImg" src="../../../assets/images/区域优势4.png" id="scFour">-->
|
<!-- <img :class="showImg" src="../../../assets/images/区域优势5.png" id="scFive">-->
|
<img
|
src="../../../assets/images/a2.png"
|
style="position: absolute; left: 1272px; top: 425px"
|
@click="imgRight"
|
/>
|
<img
|
src="../../../assets/images/a4.png"
|
style="position: absolute; left: 7px; top: 425px"
|
@click="imgLeft"
|
/>
|
</div>
|
<div class="sccb" v-if="dialogVisible10">
|
<img
|
src="../../../assets/images/a5.png"
|
style="position: absolute; left: 1190px; top: 109px"
|
@click="closeTC"
|
/>
|
<img src="../../../assets/images/人才.png" id="spOne" />
|
</div>
|
<div class="sccb" v-if="dialogVisible1">
|
<img
|
src="../../../assets/images/a5.png"
|
style="position: absolute; left: 1190px; top: 109px"
|
@click="closeTC"
|
/>
|
<img src="../../../assets/images/征地项目1.png" id="scOne" />
|
<img
|
src="../../../assets/images/a2.png"
|
style="position: absolute; left: 1272px; top: 425px"
|
@click="imgRight"
|
/>
|
<img
|
src="../../../assets/images/a4.png"
|
style="position: absolute; left: 7px; top: 425px"
|
@click="imgLeft"
|
/>
|
<img src="../../../assets/images/征地项目2.png" id="scTwo" />
|
</div>
|
<div class="sccb" v-if="dialogVisible2">
|
<img
|
src="../../../assets/images/a5.png"
|
style="position: absolute; left: 1190px; top: 109px"
|
@click="closeTC"
|
/>
|
<img src="../../../assets/images/现代.png" id="spOne" />
|
</div>
|
<div class="sccb" v-if="dialogVisible3">
|
<img
|
src="../../../assets/images/a5.png"
|
style="position: absolute; left: 1190px; top: 109px"
|
@click="closeTC"
|
/>
|
<img src="../../../assets/images/其他.png" id="spOne" />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
components: {},
|
data() {
|
return {
|
superurl: [
|
require("../../../assets/images/区域优势1.png"),
|
require("../../../assets/images/区域优势2-2.png"),
|
require("../../../assets/images/区域优势3.png"),
|
require("../../../assets/images/区域优势4.png"),
|
require("../../../assets/images/区域优势5.png"),
|
],
|
calleft: 0,
|
|
active: true,
|
active1: true,
|
active2: true,
|
active3: true,
|
active4: true,
|
active5: true,
|
active6: true,
|
dialogVisible1: false,
|
dialogVisible2: false,
|
dialogVisible3: false,
|
dialogVisible7: false,
|
dialogVisible8: false,
|
dialogVisible9: false,
|
dialogVisible10: false,
|
dialogVisible11: false,
|
DialogClose1: false,
|
DialogClose2: false,
|
DialogClose3: false,
|
DialogClose7: false,
|
DialogClose8: false,
|
DialogClose9: false,
|
DialogClose10: false,
|
DialogClose11: false,
|
|
showImg: require("../../../assets/images/区域优势1.png"), // 显示得图片路径
|
scdz: require("../../../assets/images/生产成本优势.png"),
|
scdz1: require("../../../assets/images/生产-变.png"),
|
qydz: require("../../../assets/images/区域优势.png"),
|
qydz1: require("../../../assets/images/区域优势-变.png"),
|
spdz: require("../../../assets/images/审批服务优势.png"),
|
spdz1: require("../../../assets/images/审批服务优势-变.png"),
|
rcdz: require("../../../assets/images/人才优势.png"),
|
rcdz1: require("../../../assets/images/人才优势-变.png"),
|
zddz: require("../../../assets/images/征地项目支持政策.png"),
|
zddz1: require("../../../assets/images/征地项目支持政策-变.png"),
|
xddz: require("../../../assets/images/现代服务业项目政策.png"),
|
xddz1: require("../../../assets/images/现代服务业项目政策-变.png"),
|
qtdz: require("../../../assets/images/其他政策.png"),
|
qtdz1: require("../../../assets/images/其他政策-变.png"),
|
imgNum: 0, // 当前图片index
|
};
|
},
|
computed: {
|
defaultOption() {
|
return {
|
step: 0.4, // 数值越大速度滚动越快
|
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
|
hoverStop: true, // 是否开启鼠标悬停stop
|
direction: 1, // 0向下 1向上 2向左 3向右
|
openWatch: true, // 开启数据实时监控刷新dom
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
};
|
},
|
},
|
mounted() {},
|
methods: {
|
CheckAttachment(parm) {
|
switch (parm) {
|
case "征地项目支持政策":
|
this.DialogClose1 = true;
|
this.dialogVisible1 = true;
|
this.active4 = false;
|
break;
|
case "现代服务业项目政策":
|
this.dialogVisible2 = true;
|
this.DialogClose2 = true;
|
this.active5 = false;
|
break;
|
case "其他政策":
|
this.dialogVisible3 = true;
|
this.DialogClose3 = true;
|
this.active6 = false;
|
break;
|
case "生产成本优势":
|
this.dialogVisible7 = true;
|
this.DialogClose7 = true;
|
this.active = false;
|
break;
|
case "区域优势":
|
this.dialogVisible8 = true;
|
this.DialogClose8 = true;
|
this.active1 = false;
|
break;
|
case "审批服务优势":
|
this.dialogVisible9 = true;
|
this.DialogClose9 = true;
|
this.active2 = false;
|
break;
|
case "人才优势":
|
this.dialogVisible10 = true;
|
this.DialogClose10 = true;
|
this.active3 = false;
|
break;
|
}
|
},
|
zjvideo() {
|
const zjvideo = document.getElementById("zjvideo");
|
zjvideo.style.display = "block"; // 显示选择的元素
|
},
|
handleDialogClose1() {
|
this.dialogVisible1 = false;
|
this.DialogClose1 = false;
|
},
|
handleDialogClose2() {
|
this.dialogVisible2 = false;
|
this.DialogClose2 = false;
|
},
|
handleDialogClose3() {
|
this.dialogVisible3 = false;
|
},
|
closeTC() {
|
this.dialogVisible1 = false;
|
this.dialogVisible2 = false;
|
this.dialogVisible3 = false;
|
this.dialogVisible7 = false;
|
this.dialogVisible8 = false;
|
this.dialogVisible9 = false;
|
this.dialogVisible10 = false;
|
// this.DialogClose7 = false;
|
this.active = true;
|
this.active1 = true;
|
this.active2 = true;
|
this.active3 = true;
|
this.active4 = true;
|
this.active5 = true;
|
this.active6 = true;
|
},
|
handleDialogClose8() {
|
this.dialogVisible8 = false;
|
this.DialogClose8 = false;
|
},
|
// handleDialogClose9() {
|
// this.dialogVisible9 = false;
|
// this.DialogClose9 = false;
|
// },
|
handleDialogClose10() {
|
this.dialogVisible10 = false;
|
this.DialogClose10 = false;
|
},
|
handleDialogClose11() {
|
const zjvideo = document.getElementById("zjvideo");
|
zjvideo.style.display = "none"; // 隐藏选择的元素
|
this.$refs.vueRef.pause(); //暂停
|
},
|
imgRight() {
|
if (this.imgNum < 4) this.imgNum++;
|
this.showImg = this.superurl[this.imgNum];
|
const scOne = document.getElementById("scOne");
|
const scTwo = document.getElementById("scTwo");
|
scOne.style.display = "none"; // 隐藏选择的元素
|
scTwo.style.display = "block"; // 隐藏选择的元素
|
},
|
imgLeft() {
|
if (this.imgNum > 0) this.imgNum--;
|
this.showImg = this.superurl[this.imgNum];
|
const scOne = document.getElementById("scOne");
|
const scTwo = document.getElementById("scTwo");
|
scOne.style.display = "block"; // 隐藏选择的元素
|
scTwo.style.display = "none"; // 隐藏选择的元素
|
},
|
},
|
};
|
</script>
|
|
<style scoped="scoped" lang="less">
|
.invesBox {
|
width: 86%;
|
height: 100%;
|
.boxtop {
|
width: 100%;
|
height: 40%;
|
}
|
.boxcenter {
|
width: 100%;
|
height: 40%;
|
}
|
.boxbottom {
|
width: 100%;
|
height: 20%;
|
margin-top: 1%;
|
.bottombox {
|
width: 100%;
|
height: calc(100% - 58px);
|
margin-top: 10px;
|
display: flex;
|
justify-content: space-around;
|
/* 子元素溢出父容器时换行 */
|
flex-flow: row wrap;
|
padding-top: 10px;
|
.box1 {
|
width: 27%;
|
height: 100%;
|
|
color: white;
|
text-align: center;
|
font-size: 24px;
|
.boximg {
|
width: 50%;
|
height: 50%;
|
background-image: url(../../../assets/images/t1.png);
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
margin-bottom: 3%;
|
}
|
}
|
}
|
}
|
.boxleft {
|
width: 49.5%;
|
height: 100%;
|
float: left;
|
}
|
.boxright {
|
width: 49.5%;
|
height: 100%;
|
|
float: right;
|
}
|
.titleHead {
|
width: 100%;
|
height: 38px;
|
background-image: url(../../../assets/images/title.png);
|
background-size: 100% 100%;
|
font-family: MytitileName;
|
font-size: 28px;
|
display: flex;
|
align-items: center;
|
color: #98deff;
|
letter-spacing: 3px;
|
|
span {
|
width: 70%;
|
text-indent: 70px;
|
}
|
|
button {
|
height: 80%;
|
width: 20%;
|
font-size: 24px;
|
font-family: "microsoft yahei";
|
background-color: transparent;
|
color: #ffffff;
|
border: solid 1px #04a7dc;
|
background-color: #020919;
|
border-radius: 10px;
|
}
|
}
|
.wenzi {
|
color: #ffffff;
|
font-size: 22px;
|
line-height: 36px;
|
height: 230px;
|
overflow: scroll;
|
text-indent: 2em;
|
letter-spacing: 8px;
|
}
|
|
.scrool {
|
margin-top: 20px;
|
height: calc(100% - 112px);
|
width: 100%;
|
}
|
.img1 {
|
position: absolute;
|
bottom: 293px;
|
left: 245px;
|
}
|
|
.img2 {
|
position: absolute;
|
bottom: 633px;
|
left: 125px;
|
height: 245px;
|
}
|
|
.img3 {
|
position: absolute;
|
bottom: 633px;
|
left: 380px;
|
height: 245px;
|
}
|
.img4 {
|
position: absolute;
|
left: 125px;
|
bottom: 393px;
|
height: 245px;
|
}
|
.img5 {
|
position: absolute;
|
bottom: 393px;
|
left: 380px;
|
height: 245px;
|
}
|
.msg1 {
|
position: absolute;
|
bottom: 500px;
|
left: 72px;
|
}
|
.msg2 {
|
position: absolute;
|
bottom: 471px;
|
left: 72px;
|
font-size: 21px;
|
color: #0080ff;
|
}
|
.msg3 {
|
position: absolute;
|
bottom: 500px;
|
left: 448px;
|
}
|
.msg4 {
|
position: absolute;
|
bottom: 413px;
|
left: 448px;
|
width: 232px;
|
font-size: 21px;
|
color: #36ffcc;
|
}
|
|
.msg5 {
|
position: absolute;
|
bottom: 170px;
|
left: 72px;
|
}
|
.msg6 {
|
position: absolute;
|
bottom: 135px;
|
left: 72px;
|
font-size: 21px;
|
color: #1eabfb;
|
}
|
.msg7 {
|
position: absolute;
|
bottom: 170px;
|
left: 480px;
|
}
|
.msg8 {
|
position: absolute;
|
bottom: 110px;
|
left: 480px;
|
font-size: 21px;
|
width: 155px;
|
color: #fff146;
|
}
|
.boxright1 {
|
width: 100%;
|
margin-top: 10px;
|
height: 55%;
|
background-image: url(../../../assets/images/基础设施保障.png);
|
background-size: 100% 100%;
|
}
|
.favouredPolicy {
|
.zcimg1 {
|
margin-top: 60px;
|
}
|
|
.zcimg2 {
|
position: absolute;
|
left: 410px;
|
bottom: 500px;
|
height: 190px;
|
}
|
|
.zcimg3 {
|
position: absolute;
|
left: 410px;
|
bottom: 311px;
|
height: 190px;
|
}
|
|
.zcimg4 {
|
position: absolute;
|
left: 594px;
|
bottom: 316px;
|
height: 190px;
|
}
|
}
|
.datlog {
|
border-radius: 10px;
|
background: url("../../../assets/images/弹出背景.png") no-repeat;
|
width: 708px;
|
height: 836px;
|
|
img {
|
width: 640px;
|
height: 250px;
|
margin-bottom: 10px;
|
}
|
}
|
|
.zjvideo {
|
position: absolute;
|
left: 125%;
|
top: 16%;
|
}
|
|
.sccb {
|
width: 1275px;
|
height: 841px;
|
position: absolute;
|
left: 1455px;
|
top: 215px;
|
overflow: hidden;
|
padding-left: 60px;
|
}
|
}
|
|
.datlog /deep/ .el-dialog__header {
|
background-color: #002a54;
|
border: none;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
// font-size: 40px;
|
}
|
|
.datlog /deep/ .el-dialog__title {
|
color: #ffffff;
|
font-size: 36px;
|
font-weight: 700;
|
}
|
|
.datlog /deep/ .el-dialog__headerbtn {
|
font-size: 38px;
|
top: -11px;
|
right: 1px;
|
}
|
|
.datlog /deep/ .el-dialog__body {
|
padding: 0px;
|
//background-color: rgba(0, 0, 0);
|
background-color: #002a54;
|
color: #ffffff;
|
font-size: 28px;
|
height: 100%;
|
padding-top: 1px;
|
}
|
|
.datlog /deep/ .el-dialog {
|
display: flex;
|
display: -ms-flex;
|
flex-direction: column;
|
position: absolute;
|
top: -25%;
|
left: 5%;
|
width: 655px;
|
height: 795px;
|
max-height: calc(100% - 30px);
|
max-width: calc(100% - 30px);
|
}
|
|
.DatLog /deep/ .el-dialog .el-dialog__body {
|
max-height: 100%;
|
flex: 1;
|
-ms-flex: 1 1 auto;
|
/* 兼容IE */
|
overflow-y: auto;
|
overflow-x: hidden;
|
}
|
</style>
|
<style lang="less">
|
.el-dialog {
|
position: relative;
|
margin: 0 auto 50px;
|
background: transparent !important;
|
border-radius: 2px;
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
box-sizing: border-box;
|
width: 50%;
|
}
|
</style>
|
