| | |
| | | id="map_content_content"> |
| | | <div id="mapChildContent"> |
| | | <div class="arc-bcg"> |
| | | <img src="/img/job/one.jpg" |
| | | alt="" |
| | | @click="alert(1)"> |
| | | <img :src="popupBgUrl" |
| | | alt=""> |
| | | </div> |
| | | <div class="popup-nav"> |
| | | <ul> |
| | | <li> |
| | | <li class="come-here-fun"> |
| | | <i class="popup-icon come-nav deblurring"></i> |
| | | 到这 |
| | | </li> |
| | | <li> |
| | | <li class="get-to-fun"> |
| | | <i class="popup-icon start-nav deblurring"></i> |
| | | 出发 |
| | | </li> |
| | | <li> |
| | | <li class="qr-code-fun"> |
| | | <i class="popup-icon qr-code-nav deblurring"></i> |
| | | 二维码 |
| | | </li> |
| | | <li> |
| | | <li class="imgs-fun"> |
| | | <i class="popup-icon atlas-nav deblurring"></i> |
| | | 图集 |
| | | </li> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 二维码弹框相关 --> |
| | | <el-dialog title="场景二维码" |
| | | :visible.sync="QRCodeFlag" |
| | | width='44%' |
| | | :before-close="handleClose"> |
| | | <div style="margin: 0; position: relative; width: 100%; height: 352px;"> |
| | | <img width="260" |
| | | :src="pupupQRUrl" |
| | | alt="" |
| | | style="position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | margin: auto"> |
| | | <div style="position: absolute; bottom: 0; width: 100%; line-height: 36px; text-align: center;"> |
| | | (右键另存为图片) |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <left-nav ref="leftNav"></left-nav> |
| | | |
| | | <campusNav :comeName="comeName" |
| | | :getToName="getToName" |
| | | v-show="campusNavFlag" /> |
| | | |
| | | <el-image v-show="false" |
| | | style="width: 100px; height: 100px" |
| | | :src="url" |
| | | :preview-src-list="srcList" |
| | | ref="popupImgs"> |
| | | </el-image> |
| | | |
| | | </div> |
| | | </template> |
| | |
| | | name: 'mapBox', |
| | | data () { |
| | | return { |
| | | popupFlag: false |
| | | popupFlag: false, |
| | | campusNavFlag: false, |
| | | comeName: '', |
| | | getToName: '', |
| | | QRCodeFlag: false, |
| | | url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', |
| | | srcList: [ |
| | | 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', |
| | | 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg' |
| | | ] |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapGetters([ |
| | | 'viewer' |
| | | 'viewer', |
| | | 'popupBgUrl', |
| | | 'pupupQRUrl' |
| | | ]) |
| | | }, |
| | | mounted () { |
| | | var that = this |
| | | |
| | | this.$nextTick(() => { |
| | | // 动态添加dom元素,并绑定VUE事件(打开pdf)(.pdf-item为动态添加的元素,放置在父元素.pdf-body下) |
| | | $('#map_popup_content').on('click', '.arc-bcg', function () { |
| | |
| | | |
| | | $(this).parent().siblings().children(`div:eq(${$(this).index()})`).addClass('on').siblings().removeClass('on') |
| | | }) |
| | | |
| | | $('#map_popup_content').on('click', '.popup-nav .come-here-fun', function (e) { |
| | | that.comeName = '成交楼' |
| | | if (that.campusNavFlag == false) that.campusNavFlag = true |
| | | }) |
| | | |
| | | $('#map_popup_content').on('click', '.popup-nav .get-to-fun', function (e) { |
| | | that.getToName = '活动中心' |
| | | if (that.campusNavFlag == false) that.campusNavFlag = true |
| | | }) |
| | | |
| | | $('#map_popup_content').on('click', '.popup-nav .qr-code-fun', function (e) { |
| | | that.QRCodeFlag = true |
| | | }) |
| | | |
| | | $('#map_popup_content').on('click', '.popup-nav .imgs-fun', function (e) { |
| | | console.log(that.$refs.popupImgs) |
| | | that.$refs.popupImgs.clickHandler() |
| | | }) |
| | | }) |
| | | |
| | | var DC = global.DC |
| | | |
| | | var that = this |
| | | |
| | | let viewer |
| | | |
| | |
| | | DC.ready(initViewer) |
| | | }, |
| | | methods: { |
| | | |
| | | closeCampusNav () { |
| | | this.campusNavFlag = false |
| | | } |
| | | } |
| | | } |
| | | </script> |