|
<template>
|
<div class="box">
|
<!-- 标题页面 -->
|
<div class="header">
|
<header-page></header-page>
|
</div>
|
<!--中间信息弹窗 -->
|
<div class="Popuper">
|
<PopupPage></PopupPage>
|
</div>
|
|
<!-- 左侧菜单 Rectangle 133.png -->
|
<div class="Content">
|
<div class="leftMenu">
|
<left-page></left-page>
|
</div>
|
</div>
|
<div class="Content1">
|
<div class="rightMenu">
|
<right-page></right-page>
|
</div>
|
</div>
|
|
<!-- 重点视频选择区 -->
|
<div class="FoucsVideo">
|
<focus-page></focus-page>
|
</div>
|
<!-- 视频播放区 -->
|
<div class="videoPlayBack">
|
<video-play-back-page></video-play-back-page>
|
</div>
|
<!-- 热点框 -->
|
<div class="Press">
|
<press-page></press-page>
|
</div>
|
<!-- 全景视频 -->
|
<div class="panoramic"
|
v-if="$store.state.ShowPanoramicFlag">
|
<panoramic-page></panoramic-page>
|
</div>
|
<!-- 地图页面 -->
|
<map-page> </map-page>
|
</div>
|
</template>
|
|
<script>
|
import HeaderPage from './HeaderPage/index.vue'
|
import PopupPage from './PopupPage/index.vue'
|
import MapPage from './MapPage/index.vue'
|
import LeftPage from './LeftPage/index.vue'
|
import RightPage from './RightPage/index.vue'
|
import FocusPage from './FocusPage/index.vue'
|
import videoPlayBackPage from './VideoPlaybackPage/index.vue'
|
import PressPage from './PressPage/index.vue'
|
import PanoramicPage from './PanoramicPage/index.vue'
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {
|
HeaderPage,
|
PopupPage,
|
MapPage,
|
LeftPage,
|
RightPage,
|
FocusPage,
|
videoPlayBackPage,
|
PressPage,
|
PanoramicPage,
|
},
|
data () {
|
//这里存放数据
|
return {
|
showVideoFlag: false,
|
}
|
},
|
//方法集合
|
methods: {},
|
created () { },
|
mounted () {
|
// var position =DEFAULT_VIEW
|
// //巡航到某个位置 时长7秒
|
// map.setView(new TUVector3(position.x, position.y, position.z), new TURotator(position.roll,position.pitch, position.yaw,position.distance) ) ;
|
},
|
}
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.box {
|
// display: flex;
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
overflow-x: hidden;
|
.header {
|
height: 250px;
|
width: 100%;
|
z-index: 1000;
|
position: absolute;
|
}
|
.Content {
|
width: 33%;
|
height: 100%;
|
background: url('../../assets/img/2.png') no-repeat center;
|
background-size: 100% 100%;
|
z-index: 999;
|
position: absolute;
|
}
|
|
.Content1 {
|
width: 33%;
|
height: 100%;
|
right: 0%;
|
background: url('../../assets/img/1.png') no-repeat center;
|
background-size: 100% 100%;
|
z-index: 999;
|
position: absolute;
|
}
|
.Press {
|
width: 590px;
|
height: 60px;
|
z-index: 1000;
|
left: 1330px;
|
top: 179px;
|
padding: 16px;
|
position: absolute;
|
border-radius: 5px;
|
background: url('../../assets/img/bg.png') no-repeat center;
|
background-size: 100% 100%;
|
}
|
.panoramic {
|
width: 1828px;
|
height: 904px;
|
left: 1850px;
|
top: 89px;
|
z-index: 11111;
|
position: absolute;
|
}
|
.Popuper {
|
width: 916px;
|
height: 160px;
|
z-index: 999;
|
left: 2423px;
|
top: 167px;
|
position: absolute;
|
}
|
.leftMenu {
|
height: 949px;
|
width: 1134px;
|
left: -79px;
|
// top: 128px;
|
top: 59px;
|
position: absolute;
|
}
|
.rightMenu {
|
position: absolute;
|
width: 1134px;
|
height: 949px;
|
right: -100px;
|
// top: 128px;
|
top: 59px;
|
}
|
.FoucsVideo {
|
width: 627px;
|
height: 747px;
|
left: 640px;
|
top: 167px;
|
position: absolute;
|
z-index: 1111;
|
}
|
.videoPlayBack {
|
position: absolute;
|
width: 891px;
|
height: 694px;
|
right: 648px;
|
top: 188px;
|
z-index: 1111;
|
}
|
}
|
</style>
|
