首页全景加放大按钮

shuishen

2023-07-13 dc0a36599507611a8478f2145f9ef0381e973d87

首页全景加放大按钮

 public/images/amplification.png

 public/images/reduce.png

 src/styles/icon/index.scss

@@ -95,4 +95,26 @@
    content: "替";
    font-size: countSizeVh(16);
    visibility: hidden;
}

.el-icon-amplification-btn {
    background: url(/images/amplification.png) center no-repeat;
    background-size: countSizeVh(16) countSizeVh(16);
}

.el-icon-amplification-btn:before {
    content: "替";
    font-size: countSizeVh(16);
    visibility: hidden;
}

.el-icon-reduce-btn {
    background: url(/images/reduce.png) center no-repeat;
    background-size: countSizeVh(16) countSizeVh(16);
}

.el-icon-reduce-btn:before {
    content: "替";
    font-size: countSizeVh(16);
    visibility: hidden;
}

 src/styles/media/index.scss

@@ -2078,6 +2078,34 @@
                            height: countSizeVh(600);
                        }

                        &.panorama-amplification {
                            .el-dialog {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .title-box {
                            position: relative;

                            span {
                                position: absolute;
                                top: 0;
                                left: auto;
                                right: countSizeVw(36, 1920);
                                bottom: 0;
                                margin: auto;

                                display: flex;
                                align-items: center;
                                justify-content: center;

                                i {
                                    cursor: pointer;
                                }
                            }
                        }

                        .el-dialog__header span {
                            font-size: countSizeVh(18);
                        }

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-07-13 10:45:37
 * @LastEditTime: 2023-07-13 14:58:44
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -58,7 +58,17 @@
        </div>

        <el-dialog :title="panoramaTitle" :visible.sync="panoramaVisible" :before-close="panoramaBeforeClose" :modal="true"
            :modal-append-to-body="false" :close-on-click-modal="false" class="panorama-details-box">
            :modal-append-to-body="false" :close-on-click-modal="false" class="panorama-details-box" :class="{'panorama-amplification': panoramaIcon == 'el-icon-reduce-btn'}">
            <template slot="title">
                <div class="title-box">
                    {{ panoramaTitle }} 

                    <span>
                        <i :class="panoramaIcon" @click="panoramaIconClick"></i>
                    </span>
                </div>
            </template>

            <!-- <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0"></iframe>-->
            <iframe :src="panoramaVrUrl" style="width: 100%; height: 100%;" frameborder="0"></iframe>
        </el-dialog>
@@ -681,6 +691,7 @@
            policeSituationLayerShow: true,
            panoramaTitle: '',
            panoramaVrUrl: '',
            panoramaIcon: '',
            equimentTitle: '',
            panoramaVisible: false,
            equimentVisible: false,
@@ -1708,10 +1719,21 @@

        panoramaSiteClick (e) {
            this.panoramaTitle = '全景'

            this.panoramaIcon = 'el-icon-amplification-btn'

            this.panoramaVrUrl = e.overlay.attrParams.vrurl
            this.panoramaVisible = true
        },

        panoramaIconClick (e) {
            if (this.panoramaIcon == 'el-icon-amplification-btn') {
                this.panoramaIcon = 'el-icon-reduce-btn'
            } else {
                this.panoramaIcon = 'el-icon-amplification-btn'
            }
        },

        phoneSiteClick (e) {
            this.phoneTitle = e.overlay.attrParams.name
            this.phoneDetails = e.overlay.attrParams