package-lock.json

@@ -7935,8 +7935,7 @@
    "lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz?cache=0&sync_timestamp=1613835817439&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.21.tgz",
      "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
      "dev": true
      "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw="
    },
    "lodash.debounce": {
      "version": "4.0.8",

 package.json

@@ -13,6 +13,7 @@
        "core-js": "^3.6.5",
        "echarts": "^5.2.1",
        "element-ui": "^2.15.6",
        "lodash": "^4.17.21",
        "vue": "^2.6.11",
        "vue-axios": "^3.3.7",
        "vue-router": "^3.5.2",

 public/img/icon/xyjz.png

 src/components/arcNavBar/index.vue

@@ -7,7 +7,7 @@
                 :class="{'move': moveFlag}">
                <div class="title">
                    <img class="icon"
                         src="/img/icon/jg.png"
                         src="/img/icon/xyjz.png"
                         alt="">
                    <span>
                        {{title}}
@@ -46,6 +46,9 @@
<script>
import { mapGetters } from 'vuex'
import { getList, getChildNavList, getChildNavDetail } from '@/api/pc/public/arc'

var $ = window.$

export default {
    name: 'ArcNavBar',
    data () {
@@ -71,7 +74,13 @@
            // 点信息
            'pointPosition',
            // 点名称
            'stateName'
            'stateName',
            // 地址
            'siteName',
            // 介绍
            'introduceText',
            // 全景地址
            'panoramaUrl'
        ])
    },
    created () {
@@ -164,10 +173,15 @@
        mapPopup (param) {
            getChildNavDetail({ id: param.id }).then(res => {
                var result = res.data.data[0].list
                this.$store.commit('CLEAR_ALL', null)

                this.$store.commit('SET_POPUPBGURL', result.tpUrl)
                this.$store.commit('SET_POPUPQRURL', result.codeUrl)
                this.$store.commit('SET_POINTPOSITION', [result.jd, result.wd, result.gd, result.heading, result.pitch, result.roll])
                this.$store.commit('SET_POINTPOSITION', [Number(result.jd), Number(result.wd), Number(result.gd), Number(result.heading), Number(result.pitch), Number(result.roll)])
                this.$store.commit('SET_STATENAME', result.mechanismName)
                this.$store.commit('SET_SITENAME', result.address)
                this.$store.commit('SET_INTRODUCETEXT', result.introduce)
                this.$store.commit('SET_PANORAMAURL', result.panoramaurl)

                var that = this
                // item.alt, item.heading, item.pitch, item.roll
@@ -182,16 +196,16 @@
        },
        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(item.jd, item.wd, item.gd, item.heading, item.pitch, item.roll))
            // eslint-disable-next-line new-cap
            var popup = new this.DC.divForms(this.viewer, {
                domId: 'div1',
                title: item.mechanismName,
                className: 'divForms-dom',
                content: document.getElementById('mapChildContent'),
            // eslint-disable-next-line no-unused-vars
            var popup = new this.DC.DivForms(this.viewer, {
                domId: 'divFormsDomBox',
                position: [
                    position
                ]
            })

            this.$store.commit('SET_PANORAMAPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', true)
        }
    }
}

 src/components/leftNav/index.vue

@@ -1,140 +1,142 @@
<template>
  <div class="left-nav">
    <ul>
      <li
        v-for="(item, index) in leftNavData"
        :key="index"
        @click="leftNavClick(item)"
      >
        <img :src="item.img" alt="" />
        <span>{{ item.label }}</span>
      </li>
    </ul>
  </div>
    <div class="left-nav">
        <ul>
            <li v-for="(item, index) in leftNavData"
                :key="index"
                @click="leftNavClick(item)">
                <img :src="item.img"
                     alt="">
                <span>{{item.label}}</span>
            </li>
        </ul>
    </div>
</template>

<script>

export default {
  name: "leftNav",
  computed: {},
  data() {
    return {
      leftNavData: [
        {
          flag: false,
          label: "标签",
          img: "img/leftnav/tag.png",
          normal: "img/leftnav/tag.png",
          checked: "img/leftnav/tag-checked.png",
          layer: "tagLayer",
        },
        {
          flag: false,
          label: "道路",
          img: "img/leftnav/way.png",
          normal: "img/leftnav/way.png",
          checked: "img/leftnav/way-checked.png",
          layer: "wayLayer",
        },
        {
          flag: false,
          label: "实景",
          img: "img/leftnav/scene.png",
          normal: "img/leftnav/scene.png",
          checked: "img/leftnav/scene-checked.png",
          layer: "sceneLayer",
        },
        {
          flag: false,
          label: "活动",
          img: "img/leftnav/activity.png",
          normal: "img/leftnav/activity.png",
          checked: "img/leftnav/activity-checked.png",
          layer: "activityLayer",
        },
        {
          flag: false,
          label: "AED",
          img: "img/leftnav/aed.png",
          normal: "img/leftnav/aed.png",
          checked: "img/leftnav/aed-checked.png",
          layer: "aedLayer",
        },
        {
          flag: false,
          label: "停车",
          img: "img/leftnav/park.png",
          normal: "img/leftnav/park.png",
          checked: "img/leftnav/park-checked.png",
          layer: "parkLayer",
        },
        {
          flag: false,
          label: "出入",
          img: "img/leftnav/come.png",
          normal: "img/leftnav/come.png",
          checked: "img/leftnav/come-checked.png",
          layer: "comeLayer",
        },
      ],
      viewer: null,
      DC: null,
      tagLayer: null,
      wayLayer: null,
      sceneLayer: null,
      activityLayer: null,
      aedLayer: null,
      parkLayer: null,
      comeLayer: null,
    };
  },
  created() {
    this.DC = global.DC;
  },
  mounted() {},
  methods: {
    generatePosition(num) {
      const list = [];
      for (let i = 0; i < num; i++) {
        const lng = 121.1372 + Math.random() * 0.5;
        const lat = 31.0129 + Math.random() * 0.5;
        list.push(new this.DC.Position(lng, lat, 0));
      }
      return list;
    name: 'leftNav',
    computed: {},
    data () {
        return {
            leftNavData: [
                {
                    flag: false,
                    label: '标签',
                    img: '/img/leftnav/tag.png',
                    normal: '/img/leftnav/tag.png',
                    checked: '/img/leftnav/tag-checked.png',
                    layer: 'tagLayer'
                },
                {
                    flag: false,
                    label: '道路',
                    img: '/img/leftnav/way.png',
                    normal: '/img/leftnav/way.png',
                    checked: '/img/leftnav/way-checked.png',
                    layer: 'wayLayer'
                },
                {
                    flag: false,
                    label: '实景',
                    img: '/img/leftnav/scene.png',
                    normal: '/img/leftnav/scene.png',
                    checked: '/img/leftnav/scene-checked.png',
                    layer: 'sceneLayer'
                },
                {
                    flag: false,
                    label: '活动',
                    img: '/img/leftnav/activity.png',
                    normal: '/img/leftnav/activity.png',
                    checked: '/img/leftnav/activity-checked.png',
                    layer: 'activityLayer'
                },
                {
                    flag: false,
                    label: 'AED',
                    img: '/img/leftnav/aed.png',
                    normal: '/img/leftnav/aed.png',
                    checked: '/img/leftnav/aed-checked.png',
                    layer: 'aedLayer'
                },
                {
                    flag: false,
                    label: '停车',
                    img: '/img/leftnav/park.png',
                    normal: '/img/leftnav/park.png',
                    checked: '/img/leftnav/park-checked.png',
                    layer: 'parkLayer'
                },
                {
                    flag: false,
                    label: '出入',
                    img: '/img/leftnav/come.png',
                    normal: '/img/leftnav/come.png',
                    checked: '/img/leftnav/come-checked.png',
                    layer: 'comeLayer'
                }
            ],
            viewer: null,
            DC: null,
            tagLayer: null,
            wayLayer: null,
            sceneLayer: null,
            activityLayer: null,
            aedLayer: null,
            parkLayer: null,
            comeLayer: null
        }
    },
    leftNavClick(item) {
      item.flag = !item.flag;
      if (item.flag == true) {
        item.img = item.checked;
        this[item.layer].show = true;
      } else {
        item.img = item.normal;
        this[item.layer].show = false;
      }
    created () {
        this.DC = global.DC
    },
    initialize(viewer) {
      viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer = viewer;
      this.tagLayer = new this.DC.HtmlLayer("tagLayer");
      viewer.addLayer(this.tagLayer);
      this.wayLayer = new this.DC.HtmlLayer("wayLayer");
      viewer.addLayer(this.wayLayer);
      this.sceneLayer = new this.DC.VectorLayer("sceneLayer");
      viewer.addLayer(this.sceneLayer);
    mounted () {

      this.aedLayer = new this.DC.VectorLayer("aedLayer");
      viewer.addLayer(this.aedLayer);
    },
    methods: {
        generatePosition (num) {
            const list = []
            for (let i = 0; i < num; i++) {
                const lng = 121.44405783 + Math.random() * 0.5
                const lat = 31.19480456 + Math.random() * 0.5
                list.push(new this.DC.Position(lng, lat, 0))
            }
            return list
        },
        leftNavClick (item) {
            item.flag = !item.flag
            if (item.flag == true) {
                item.img = item.checked
                this[item.layer].show = true
            } else {
                item.img = item.normal
                this[item.layer].show = false
            }
        },
        initialize (viewer) {
            viewer.scene.globe.depthTestAgainstTerrain = false
            this.viewer = viewer
            this.tagLayer = new this.DC.HtmlLayer('tagLayer')
            viewer.addLayer(this.tagLayer)
            this.wayLayer = new this.DC.HtmlLayer('wayLayer')
            viewer.addLayer(this.wayLayer)
            this.sceneLayer = new this.DC.VectorLayer('sceneLayer')
            viewer.addLayer(this.sceneLayer)

      this.parkLayer = new this.DC.HtmlLayer("parkLayer");
      viewer.addLayer(this.parkLayer);
      this.comeLayer = new this.DC.VectorLayer("comeLayer");
      viewer.addLayer(this.comeLayer);
            this.aedLayer = new this.DC.VectorLayer('aedLayer')
            viewer.addLayer(this.aedLayer)

      const positions1 = this.generatePosition(50);
      positions1.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
            this.parkLayer = new this.DC.HtmlLayer('parkLayer')
            viewer.addLayer(this.parkLayer)
            this.comeLayer = new this.DC.VectorLayer('comeLayer')
            viewer.addLayer(this.comeLayer)

            const positions1 = this.generatePosition(50)
            positions1.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
                                南门口
@@ -144,15 +146,15 @@
                            </div>
                        </div>
                    `
        );
        this.tagLayer.addOverlay(divIcon);
      });
                )
                this.tagLayer.addOverlay(divIcon)
            })

      const positions2 = this.generatePosition(50);
      positions2.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
            const positions2 = this.generatePosition(50)
            positions2.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
                        <div  class="way-entitys-box">
                            <div  class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff;  width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
                                工建街
@@ -162,44 +164,38 @@
                            </div>
                        </div>
                    `
        );
        this.wayLayer.addOverlay(divIcon);
      });
                )
                this.wayLayer.addOverlay(divIcon)
            })

      const positions3 = this.generatePosition(50);
      positions3.forEach((item) => {
        const billboard = new this.DC.Billboard(
          item,
          "img/leftnav/map-panorama.png"
        );
        billboard.size = [16, 16];
        this.sceneLayer.addOverlay(billboard);
      });
            const positions3 = this.generatePosition(50)
            positions3.forEach(item => {
                const billboard = new this.DC.Billboard(item, '/img/leftnav/map-panorama.png')
                billboard.size = [16, 16]
                this.sceneLayer.addOverlay(billboard)
            })

      const positions4 = this.generatePosition(10);
      positions4.forEach((item, index) => {
        const label = new this.DC.Label(item, "建筑AED");
        label.setStyle({
          fillColor: this.DC.Color.ORANGERED,
          font: "10px sans-serif",
          pixelOffset: { x: 0, y: -16 },
        });
        this.aedLayer.addOverlay(label);
            const positions4 = this.generatePosition(10)
            positions4.forEach((item, index) => {
                const label = new this.DC.Label(item, '建筑AED')
                label.setStyle({
                    fillColor: this.DC.Color.ORANGERED,
                    font: '10px sans-serif',
                    pixelOffset: { x: 0, y: -16 }
                })
                this.aedLayer.addOverlay(label)

        const billboard = new this.DC.Billboard(
          item,
          "img/leftnav/map-aed.png"
        );
        billboard.size = [16, 16];
                const billboard = new this.DC.Billboard(item, '/img/leftnav/map-aed.png')
                billboard.size = [16, 16]

        this.aedLayer.addOverlay(billboard);
      });
                this.aedLayer.addOverlay(billboard)
            })

      const positions5 = this.generatePosition(120);
      positions5.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
            const positions5 = this.generatePosition(120)
            positions5.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
                        <div class="park-entitys-box">
                            <div class="park-title" alt="校外街路侧停车场">
                            </div>
@@ -213,79 +209,76 @@
                            </div>
                        </div>
                    `
        );
        this.parkLayer.addOverlay(divIcon);
      });
                )
                this.parkLayer.addOverlay(divIcon)
            })

      const positions6 = this.generatePosition(10);
      positions6.forEach((item, index) => {
        const label = new this.DC.Label(item, "数字视觉");
        label.setStyle({
          fillColor: this.DC.Color.PURPLE,
          outlineColor: this.DC.Color.WHITE, // 边框颜色
          outlineWidth: 2, // 边框大小，
          font: "10px sans-serif",
          pixelOffset: { x: 0, y: -16 },
        });
        this.comeLayer.addOverlay(label);
            const positions6 = this.generatePosition(10)
            positions6.forEach((item, index) => {
                const label = new this.DC.Label(item, '数字视觉')
                label.setStyle({
                    fillColor: this.DC.Color.PURPLE,
                    outlineColor: this.DC.Color.WHITE, // 边框颜色
                    outlineWidth: 2, // 边框大小，
                    font: '10px sans-serif',
                    pixelOffset: { x: 0, y: -16 }
                })
                this.comeLayer.addOverlay(label)

        const billboard = new this.DC.Billboard(
          item,
          "img/leftnav/map-activity.png"
        );
        billboard.size = [16, 16];
                const billboard = new this.DC.Billboard(item, '/img/leftnav/map-activity.png')
                billboard.size = [16, 16]

        this.comeLayer.addOverlay(billboard);
      });
                this.comeLayer.addOverlay(billboard)
            })

      this.tagLayer.show = false;
      this.wayLayer.show = false;
      this.sceneLayer.show = false;
      this.aedLayer.show = false;
      this.parkLayer.show = false;
      this.comeLayer.show = false;
    },
  },
};
            this.tagLayer.show = false
            this.wayLayer.show = false
            this.sceneLayer.show = false
            this.aedLayer.show = false
            this.parkLayer.show = false
            this.comeLayer.show = false
        }
    }
}
</script>

<style scoped lang='scss'>
.left-nav {
  position: fixed;
  top: 15%;
  right: 6%;
  z-index: 1;
  li {
    margin-bottom: 8px;
    font-weight: 400;
    display: block;
    width: 98px;
    height: 33px;
    line-height: 33px;
    background-color: #fff;
    border-radius: 17px;
    text-align: center;
    font-size: 0;
    cursor: pointer;
    position: fixed;
    top: 15%;
    right: 6%;
    z-index: 1;
    li {
        margin-bottom: 8px;
        font-weight: 400;
        display: block;
        width: 98px;
        height: 33px;
        line-height: 33px;
        background-color: #fff;
        border-radius: 17px;
        text-align: center;
        font-size: 0;
        cursor: pointer;

    img {
      width: 24px;
      height: 24px;
      vertical-align: middle;
      margin-right: 10px;
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      -ms-interpolation-mode: nearest-neighbor;
    }
        img {
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-right: 10px;
            image-rendering: -moz-crisp-edges;
            image-rendering: -o-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            -ms-interpolation-mode: nearest-neighbor;
        }

    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      color: #2f2f2f;
        span {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            color: #2f2f2f;
        }
    }
  }
}
</style>

 src/components/map/component/mapPopup.vue

New file
@@ -0,0 +1,266 @@
<template>
    <div>
        <div id="map_popup_content">
            <div v-if="detailsPopup"
                 class="divForms-dom"
                 id="divFormsDomBox">
                <div style='width: 100%; height: 100%;'>
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
                                <div class="arrow-lt"></div>
                                <div class="b-t"></div>
                                <div class="b-r"></div>
                                <div class="b-b"></div>
                                <div class="b-l"></div>
                                <div class="arrow-rb"></div>
                                <div class="label-wrap">
                                    <div class="title">
                                        {{stateName}}
                                    </div>
                                    <div class="label-content">
                                        <div class="arc-bcg">
                                            <img :src="popupBgUrl"
                                                 alt="">
                                        </div>
                                        <div v-show="siteName != null && siteName != ''"
                                             class="site">
                                            <strong>地址:</strong>{{siteName}}
                                        </div>
                                        <div v-show="introduceText != null && introduceText != ''"
                                             class="introduce">
                                            <p>
                                                <strong>介绍:</strong>
                                                {{introduceText}}
                                            </p>
                                        </div>
                                        <div class="popup-nav">
                                            <ul>
                                                <li @click="comeHereClick">
                                                    <i class="popup-icon come-nav deblurring"></i>
                                                    到这
                                                </li>
                                                <li @click="getToHereClick">
                                                    <i class="popup-icon start-nav deblurring"></i>
                                                    出发
                                                </li>
                                                <li @click="qrCodeClick">
                                                    <i class="popup-icon qr-code-nav deblurring"></i>
                                                    二维码
                                                </li>
                                                <li @click="imgsClick">
                                                    <i class="popup-icon atlas-nav deblurring"></i>
                                                    图集
                                                </li>
                                                <li v-show="panoramaUrl != null && panoramaUrl != ''"
                                                    @click="panoramaClick">
                                                    <i class="popup-icon live-action-nav deblurring"></i>
                                                    实景
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="arc-box">
                                            <ul class="tab-btn">
                                                <li class="on">教学科研行政</li>
                                                <li>生活服务</li>
                                            </ul>
                                            <div class="btm-content">
                                                <div class="on">
                                                    <ul>
                                                        <li>
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            教学楼
                                                        </li>
                                                        <li>
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            教学楼
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div>
                                                    <ul>
                                                        <li>
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            生活楼
                                                        </li>
                                                        <li>
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            生活楼
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="btm-box"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="b-t-l"></div>
                            <div class="b-b-r"></div>
                        </div>
                        <div class="arrow"></div>
                    </div>
                </div>
            </div>
            <div v-if="panoramaPopup"
                 class="panorama-dom"
                 id="PanoramaBox">
                <div style="width: 100%; height: 100%;">
                    <div class="panorama-container">
                        <div class="panorama-wrap">
                            <div class="content-wrap">
                                <div class="title">
                                    {{stateName}}
                                </div>
                                <div class="content">
                                    <iframe :src="panoramaUrl"
                                            frameborder="0"></iframe>
                                </div>
                            </div>
                        </div>
                        <div class="arrow"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 二维码弹框相关 -->
        <el-dialog title="场景二维码"
                   :visible.sync="QRCodeFlag"
                   width='44%'>
            <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>

        <el-image v-show="false"
                  style="width: 100px; height: 100px"
                  :src="url"
                  :preview-src-list="srcList"
                  ref="popupImgs">
        </el-image>

        <campusNav ref="campusNavRoute"
                   :comeName="comeName"
                   :getToName="getToName"
                   v-show="campusNavFlag" />
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'mapPopup',
    data () {
        return {
            DC: null,
            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',
            'popupBgUrl',
            'pupupQRUrl',
            // 终点
            'terminus',
            // 起点
            'startingPoint',
            // 点信息
            'pointPosition',
            // 点名称
            'stateName',
            // 地址
            'siteName',
            // 介绍
            'introduceText',
            // 全景地址
            'panoramaUrl',
            // 详情弹框显示关闭
            'detailsPopup',
            // 全景弹框显示关闭
            'panoramaPopup'
        ])
    },
    created () {
        this.DC = global.DC

        this.$nextTick(() => {
            $('#map_popup_content').on('click', '.tab-btn li', function (e) {
                $(this).addClass('on').siblings().removeClass('on')

                $(this).parent().siblings().children(`div:eq(${$(this).index()})`).addClass('on').siblings().removeClass('on')
            })
        })
    },
    methods: {
        closeCampusNav () {
            this.campusNavFlag = false
            this.$refs.campusNavRoute.clearLayer()
            this.$store.commit('SET_STARTINGPOINT', null)
            this.$store.commit('SET_TERMINUS', null)
            this.comeName = ''
            this.getToName = ''
        },

        comeHereClick () {
            this.comeName = this.stateName
            this.$store.commit('SET_TERMINUS', this.pointPosition)
            if (this.campusNavFlag == false) this.campusNavFlag = true
        },

        getToHereClick () {
            this.getToName = this.stateName
            this.$store.commit('SET_STARTINGPOINT', this.pointPosition)
            if (this.campusNavFlag == false) this.campusNavFlag = true
        },

        qrCodeClick () {
            this.QRCodeFlag = true
        },

        imgsClick () {
            this.$refs.popupImgs.clickHandler()
        },

        panoramaClick () {
            // eslint-disable-next-line new-cap
            var positions = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position.fromArray(this.pointPosition))
            this.viewer.scene.globe.depthTestAgainstTerrain = false
            // eslint-disable-next-line no-unused-vars
            var panorama = new this.DC.PanoramaBox(this.viewer, {
                domId: 'PanoramaBox',
                position: [
                    positions
                ]
            })
            this.$store.commit('SET_DETAILSPOPUP', false)
            this.$store.commit('SET_PANORAMAPOPUP', true)
        }
    }

}
</script>

<style>
</style>

 src/components/map/index.vue

@@ -3,165 +3,24 @@
    <div id="viewer-container"
         style="height: 100%; width: 100%;">

        <div v-show='popupFlag'
             id="modelPopup"
             style="width: 366px;
                height: 240px;
                background: url(/img/bg/nav-bg.jpeg) no-repeat;
                background-size: 100% 100%;">
            <div class="header">
                <div class="logo">
                    <img src="/img/navicon/map.png"
                         alt="">
                </div>
                <div class="title">
                    明德楼
                </div>
                <div class="close">
                    <img src="/img/navicon/close.png"
                         alt="">
                </div>
            </div>
            <div class="content">
                <div class="img">

                </div>
                <div class="meau">

                </div>
            </div>
        </div>

        <div id="map_popup_content">
        </div>

        <div ref="mapContentContent"
             v-show="false"
             id="map_content_content">
            <div id="mapChildContent">
                <div class="arc-bcg">
                    <img :src="popupBgUrl"
                         alt="">
                </div>
                <div class="popup-nav">
                    <ul>
                        <li class="come-here-fun"
                            :terminus="terminus">
                            <i class="popup-icon come-nav deblurring"></i>
                            到这
                        </li>
                        <li class="get-to-fun"
                            :startingPoint="startingPoint">
                            <i class="popup-icon start-nav deblurring"></i>
                            出发
                        </li>
                        <li class="qr-code-fun">
                            <i class="popup-icon qr-code-nav deblurring"></i>
                            二维码
                        </li>
                        <li class="imgs-fun">
                            <i class="popup-icon atlas-nav deblurring"></i>
                            图集
                        </li>
                        <li>
                            <i class="popup-icon live-action-nav deblurring"></i>
                            实景
                        </li>
                    </ul>
                </div>
                <div class="arc-box">
                    <ul class="tab-btn">
                        <li class="on">教学科研行政</li>
                        <li>生活服务</li>
                    </ul>
                    <div class="btm-content">
                        <div class="on">
                            <ul>
                                <li>
                                    <i class="popup-icon location-icon deblurring"></i>
                                    教学楼
                                </li>
                                <li>
                                    <i class="popup-icon location-icon deblurring"></i>
                                    教学楼
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li>
                                    <i class="popup-icon location-icon deblurring"></i>
                                    生活楼
                                </li>
                                <li>
                                    <i class="popup-icon location-icon deblurring"></i>
                                    生活楼
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="btm-box"></div>
            </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 ref="campusNavRoute"
                   :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>

        <mapPopup />
    </div>
</template>
<script>

import { mapGetters } from 'vuex'

var $ = window.$
import mapPopup from './component/mapPopup.vue'

export default {
    name: 'mapBox',
    components: {
        mapPopup
    },
    data () {
        return {
            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'
            ]
            DC: null
        }
    },
    computed: {
@@ -176,51 +35,25 @@
            // 点信息
            'pointPosition',
            // 点名称
            'stateName'
            'stateName',
            // 地址
            'siteName',
            // 介绍
            'introduceText',
            // 全景地址
            'panoramaUrl',
            // 详情弹框显示关闭
            'detailsPopup',
            // 全景弹框显示关闭
            'panoramaPopup'
        ])
    },
    mounted () {
        var that = this

        this.$nextTick(() => {
            // 动态添加dom元素，并绑定VUE事件(打开pdf)(.pdf-item为动态添加的元素，放置在父元素.pdf-body下)
            $('#map_popup_content').on('click', '.arc-bcg', function () {
                alert(1)
            })

            $('#map_popup_content').on('click', '.tab-btn li', function (e) {
                $(this).addClass('on').siblings().removeClass('on')

                $(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 = that.stateName
                that.$store.commit('SET_TERMINUS', that.pointPosition)
                if (that.campusNavFlag == false) that.campusNavFlag = true
            })

            // 起点
            $('#map_popup_content').on('click', '.popup-nav .get-to-fun', function (e) {
                that.getToName = that.stateName
                that.$store.commit('SET_STARTINGPOINT', that.pointPosition)
                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

        let viewer

        that.DC = global.DC

        function distanceSurface () {
            viewer.measure.distanceSurface()
@@ -281,7 +114,7 @@
        }

        function initViewer () {
            viewer = new DC.Viewer('viewer-container', {
            viewer = new that.DC.Viewer('viewer-container', {
                contextOptions: {
                    webgl: {
                        stencil: true,
@@ -298,7 +131,7 @@

            popup.hide()

            const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({
            const baselayer = that.DC.ImageryLayerFactory.createArcGisImageryLayer({
                url:
                    'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
            })
@@ -308,7 +141,7 @@
            })

            // eslint-disable-next-line camelcase
            const baselayer_shaded = DC.ImageryLayerFactory.createArcGisImageryLayer({
            const baselayer_shaded = that.DC.ImageryLayerFactory.createArcGisImageryLayer({
                url:
                    'http://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer'
            })
@@ -318,7 +151,7 @@
            })

            // eslint-disable-next-line camelcase
            const baselayer_street = DC.ImageryLayerFactory.createArcGisImageryLayer({
            const baselayer_street = that.DC.ImageryLayerFactory.createArcGisImageryLayer({
                url:
                    'http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer'
            })
@@ -328,7 +161,7 @@
            })

            // eslint-disable-next-line camelcase
            const baselayer_ter = DC.ImageryLayerFactory.createArcGisImageryLayer({
            const baselayer_ter = that.DC.ImageryLayerFactory.createArcGisImageryLayer({
                url:
                    'http://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer'
            })
@@ -337,52 +170,55 @@
                name: '地形'
            })

            const layer = new DC.TilesetLayer('layer')
            const layer = new that.DC.TilesetLayer('layer')
            viewer.addLayer(layer)
            const tileset = new DC.Tileset(
            const tileset = new that.DC.Tileset(
                'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
            )
            const style = new DC.TilesetStyle()
            const style = new that.DC.TilesetStyle()
            style.color = {
                conditions: [
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 300', 'rgba(45, 0, 75, 0.5)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 200', 'rgb(102, 71, 151)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 100', 'rgb(170, 162, 204)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 50', 'rgb(224, 226, 238)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 25', 'rgb(252, 230, 200)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 10', 'rgb(248, 176, 87)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 5', 'rgb(198, 106, 11)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['true', 'rgb(127, 59, 8)']
                ]
            }

            viewer.use(new DC.Measure())
            viewer.use(new that.DC.Measure())

            tileset.setStyle(style)
            layer.addOverlay(tileset)
            viewer.flyTo(tileset)

            tileset.on(DC.MouseEventType.CLICK, e => {
            tileset.on(that.DC.MouseEventType.CLICK, e => {
                // that.popupFlag = true

                console.log(e.position)

                viewer.scene.globe.depthTestAgainstTerrain = false

                // 定制化窗体
                var divForms = new DC.divForms(viewer, {
                    domId: 'div1',
                    title: '成教楼  ',
                    className: 'divForms-dom',
                    content: document.getElementById('mapChildContent'),
                // eslint-disable-next-line no-unused-vars
                var popup = new that.DC.DivForms(that.viewer, {
                    domId: 'divFormsDomBox',
                    position: [
                        e.position
                    ]
                })

                // popup.setWrapper('<div></div>')

                // popup.showAt(e.position, document.getElementById('modelPopup'))
                that.$store.commit('SET_PANORAMAPOPUP', false)
                that.$store.commit('SET_DETAILSPOPUP', true)
            })

            // viewer.zoomToPosition(
@@ -395,17 +231,10 @@
            viewer.distanceLegend.enable = true
        }

        DC.ready(initViewer)
        that.DC.ready(initViewer)
    },
    methods: {
        closeCampusNav () {
            this.campusNavFlag = false
            this.$refs.campusNavRoute.clearLayer()
            this.$store.commit('SET_STARTINGPOINT', null)
            this.$store.commit('SET_TERMINUS', null)
            this.comeName = ''
            this.getToName = ''
        }

    }
}
</script>

 src/components/orgNavBar/index.vue

@@ -37,6 +37,9 @@

<script>
import { mapGetters } from 'vuex'

var $ = window.$

export default {
    name: 'OrgNavBar',
    data () {
@@ -64,7 +67,13 @@
            // 点信息
            'pointPosition',
            // 点名称
            'stateName'
            'stateName',
            // 地址
            'siteName',
            // 介绍
            'introduceText',
            // 全景地址
            'panoramaUrl'
        ])
    },
    methods: {
@@ -118,14 +127,15 @@
            this.$parent.closeModel()
        },
        mapPopup (item) {
            this.$store.commit('CLEAR_ALL', null)

            this.$store.commit('SET_POPUPBGURL', item.bgImg)
            this.$store.commit('SET_POPUPQRURL', item.QRImg)
            this.$store.commit('SET_POINTPOSITION', [item.longitude, item.latitude, item.alt, item.heading, item.pitch, item.roll])
            this.$store.commit('SET_POINTPOSITION', [Number(item.longitude), Number(item.latitude), Number(item.alt), Number(item.heading), Number(item.pitch), Number(item.roll)])
            this.$store.commit('SET_STATENAME', item.navTitle)

            console.log(this.popupBgUrl)
            var that = this
            // item.alt, item.heading, item.pitch, item.roll

            this.viewer.zoomToPosition(
                new this.DC.Position(item.longitude, item.latitude, item.alt, item.heading, item.pitch, item.roll),
                function () {
@@ -135,16 +145,16 @@
        },
        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(item.longitude, item.latitude, item.alt, item.heading, item.pitch, item.roll))
            // eslint-disable-next-line new-cap
            var popup = new this.DC.divForms(this.viewer, {
                domId: 'div1',
                title: item.navTitle,
                className: 'divForms-dom',
                content: document.getElementById('mapChildContent'),
            // eslint-disable-next-line no-unused-vars
            var popup = new this.DC.DivForms(this.viewer, {
                domId: 'divFormsDomBox',
                position: [
                    position
                ]
            })

            this.$store.commit('SET_PANORAMAPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', true)
        }
    }
}

 src/divForms/divForms.js

@@ -10,11 +10,9 @@
import DC from '@dvgis/dc-sdk/dist/dc.base.min' // 基础包
import DcCore from '@dvgis/dc-sdk/dist/dc.core.min' // 核心包

var $ = window.$

DC.use(DcCore) // 安装DC核心库

class divForms {
class DivForms {
    /**
     * @popup 存放 dom 相关
     *
@@ -23,21 +21,11 @@
        this._viewer = viewer
        this._popup = popup
        this._position = popup.position
        this._title = popup.title
        this._content = popup.content
        this.appendPopup()
    }

    get viewer () {
        return this._viewer
    }

    get title () {
        return this._title
    }

    get content () {
        return this._content
    }

    get popup () {
@@ -53,97 +41,47 @@
         * @domId 存放 dom 的id, 多个数组，单个字符串
         */

        this.createVideoWindowAll(this._popup.domId, this._popup.className, this._position[0])
        this.createVideoWindowAll(this._popup.domId)
    }

    // 创建元素并追加
    createVideoWindowAll (id, className, position) {
        var childs = document.getElementById('map_popup_content').getElementsByTagName('div')
    createVideoWindowAll (id) {
        this._viewer.scene.postRender.addEventListener(this.movePopup(id))
    }

        if (childs.length > 0) {
            for (var i = 0; i < childs.length; i++) {
                document.getElementById('map_popup_content').removeChild(childs[i])
            }
        }

    movePopup (id) {
        var self = this

        var el = $("<div class=''></div>")

        var divBig = $("<div style='width: 100%; height: 100%;' class=''></div>")

        var divForms = $("<div class='divForms divForms-theme'></div>")

        var divFormsWrap = $("<div class='divForms-wrap'></div>")

        var area = $("<div class='area'></div>")

        var arrowLt = $("<div class='arrow-lt'></div>")
        var bT = $("<div class='b-t'></div>")
        var bR = $("<div class='b-r'></div>")
        var bB = $("<div class='b-b'></div>")
        var bL = $("<div class='b-l'></div>")
        var arrowRb = $("<div class='arrow-rb'></div>")

        var labelWrap = $("<div class='label-wrap'></div>")
        var titleDiv = $("<div class='title'></div>").text(this._title)
        var labelContent = $("<div class='label-content'></div>").append(this._content)

        labelWrap.append(titleDiv)
        labelWrap.append(labelContent)

        var bTL = $("<div class='b-t-l'></div>")
        var bBR = $("<div class='b-b-r'></div>")

        var arrow = $("<div class='arrow'></div>")

        area.append(arrowLt)
        area.append(bT)
        area.append(bR)
        area.append(bB)
        area.append(bL)
        area.append(arrowRb)
        area.append(labelWrap)

        divFormsWrap.append(area)
        divFormsWrap.append(bTL)
        divFormsWrap.append(bBR)

        divForms.append(divFormsWrap)
        divForms.append(arrow)

        divBig.append(divForms)
        el.append(divBig)

        el.attr('id', id)

        el.addClass(className || '')

        $('#map_popup_content').append(el)

        this._viewer.scene.postRender.addEventListener(function () {
        return function () {
            const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
                self._viewer.scene,
                position
                self._position[0]
            )

            self.positionPopUp(windowCoord, id)
        })
        }
    }

    clearMove (id) {
        this._viewer.scene.postRender.removeEventListener(this.movePopup(id))
    }

    positionPopUp (windowCoord, id) {
        if (windowCoord != undefined && windowCoord.x && windowCoord.x != undefined && !Number.isNaN(windowCoord.x)) {
        if (document.getElementById(id) == null || document.getElementById(id) == undefined) {
            this._viewer.scene.postRender.removeEventListener(this.movePopup(id))
            return
        }
        if (windowCoord != undefined && windowCoord.x && windowCoord.x != undefined && !Number.isNaN(windowCoord.x) &&
            windowCoord.y && windowCoord.y != undefined && !Number.isNaN(windowCoord.y)) {
            const x = windowCoord.x
            const y = windowCoord.y - document.getElementById(id).offsetHeight
            // x = windowCoord.x - document.getElementById(id).offsetWidth

            document.getElementById(id).style.cssText = `
            visibility:visible;
            z-index:1;
            transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
            `
        }
    }
}

export default divForms
export default DivForms

 src/divForms/panoramaBox.js

New file
@@ -0,0 +1,84 @@
/*
 * @Descripttion:
 * @version: 0.01
 * @Author: Morpheus
 * @Date: 2020-10-22 11:05:09
 * @LastEditors: Morpheus
 * @LastEditTime: 2020-10-22 13:48:22
 */

import DC from '@dvgis/dc-sdk/dist/dc.base.min' // 基础包
import DcCore from '@dvgis/dc-sdk/dist/dc.core.min' // 核心包

DC.use(DcCore) // 安装DC核心库

class PanoramaBox {
    /**
     * @popup 存放 dom 相关
     *
     */
    constructor (viewer, popup) {
        this._viewer = viewer
        this._popup = popup
        this._position = popup.position
        this.appendPopup()
    }

    get viewer () {
        return this._viewer
    }

    get popup () {
        return this._popup
    }

    get position () {
        return this._position
    }

    appendPopup () {
        /**
         * @domId 存放 dom 的id, 多个数组，单个字符串
         */

        this.createVideoWindowAll(this._popup.domId)
    }

    // 创建元素并追加
    createVideoWindowAll (id) {
        this._viewer.scene.postRender.addEventListener(this.movePopup(id))
    }

    movePopup (id) {
        var self = this
        return function () {
            const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
                self._viewer.scene,
                self._position[0]
            )

            self.positionPopUp(windowCoord, id)
        }
    }

    positionPopUp (windowCoord, id) {
        if (document.getElementById(id) == null || document.getElementById(id) == undefined) {
            this._viewer.scene.postRender.removeEventListener(this.movePopup(id))
            return
        }
        if (windowCoord != undefined && windowCoord.x && windowCoord.x != undefined && !Number.isNaN(windowCoord.x) &&
            windowCoord.y && windowCoord.y != undefined && !Number.isNaN(windowCoord.y)) {
            const x = windowCoord.x
            const y = windowCoord.y - document.getElementById(id).offsetHeight
            // x = windowCoord.x - document.getElementById(id).offsetWidth

            document.getElementById(id).style.cssText = `
            visibility:visible;
            z-index:1;
            transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
            `
        }
    }
}

export default PanoramaBox

 src/main.js

@@ -29,21 +29,24 @@

import '@dvgis/dc-sdk/dist/dc.core.min.css'

import divForms from '@/divForms/divForms'
import DivForms from '@/divForms/divForms'
import PanoramaBox from '@/divForms/panoramaBox'

// 手机弹窗
import mobileDivForms from '@/mobileDivForms/mobileDivForms'

Vue.prototype.$echarts = echarts
import _ from 'lodash'
Vue.prototype._ = _

console.log(DcCore)
Vue.prototype.$echarts = echarts

Vue.component(CollapseTransition.name, CollapseTransition) // 主要样式

global.DC = DC // 将DC提升到全局变量，方便在工程中直接使用
global.echarts = echarts // 将DC提升到全局变量，方便在工程中直接使用

DC.divForms = divForms
DC.DivForms = DivForms
DC.PanoramaBox = PanoramaBox
DC.mobileDivForms = mobileDivForms

DC.use(DcCore) // 安装DC核心库

 src/pcviews/service/index.vue

@@ -1,15 +1,16 @@
<template>
  <div>
      生活服务设施
  </div>
    <div>
        生活服务设施
    </div>
</template>

<script>
export default {

    created () {
        alert(1)
    }
}
</script>

<style>

</style>

 src/store/getters.js

@@ -1,5 +1,5 @@
//手机端
let mobile = {
// 手机端
const mobile = {
    mviewer: state => state.mobile.mviewer,
    mBigPopup: state => state.mobile.mBigPopup,
    mBigPopupAfter: state => state.mobile.mBigPopupAfter,
@@ -21,5 +21,10 @@
    terminus: state => state.popupParams.terminus,
    startingPoint: state => state.popupParams.startingPoint,
    stateName: state => state.popupParams.stateName,
    siteName: state => state.popupParams.siteName,
    introduceText: state => state.popupParams.introduceText,
    panoramaUrl: state => state.popupParams.panoramaUrl,
    detailsPopup: state => state.popupParams.detailsPopup,
    panoramaPopup: state => state.popupParams.panoramaPopup
}
export default getters

 src/store/modules/popupParams.js

@@ -5,7 +5,12 @@
        terminus: null,
        startingPoint: null,
        pointPosition: null,
        stateName: null
        stateName: null,
        siteName: null,
        introduceText: null,
        panoramaUrl: null,
        detailsPopup: false,
        panoramaPopup: false
    },
    mutations: {
        SET_POPUPBGURL(state, popupBgUrl) {
@@ -25,6 +30,27 @@
        },
        SET_STATENAME (state, stateName) {
            state.stateName = stateName
        },
        SET_SITENAME (state, siteName) {
            state.siteName = siteName
        },
        SET_INTRODUCETEXT (state, introduceText) {
            state.introduceText = introduceText
        },
        SET_PANORAMAURL (state, panoramaUrl) {
            state.panoramaUrl = panoramaUrl
        },
        SET_DETAILSPOPUP (state, detailsPopup) {
            state.detailsPopup = detailsPopup
        },
        SET_PANORAMAPOPUP (state, panoramaPopup) {
            state.panoramaPopup = panoramaPopup
        },

        CLEAR_ALL (state, param) {
            state.siteName = param
            state.introduceText = param
            state.panoramaUrl = param
        }
    },
    actions: {

 src/styles/common.scss

@@ -13,6 +13,7 @@

// page
@import "./divforms/divForms.scss";
@import "./divforms/panoramaBox.scss";
@import "./divforms/popup.scss";

// 手机样式

 src/styles/divforms/divForms.scss

@@ -1,7 +1,7 @@
.divForms-dom {
  position: fixed;
  left: 0;
  z-index: 1;
  z-index: 1 !important;
}

.divForms .arrow {

 src/styles/divforms/panoramaBox.scss

New file
@@ -0,0 +1,40 @@
.panorama-dom {
    position: fixed;
    left: 0;
    z-index: 1 !important;

    .panorama-wrap {
        position: relative;
        overflow: hidden;
        padding: 30px;

        .content-wrap {
            padding: 0 20px 20px 20px;

            background-image: linear-gradient(180deg, transparent 0px, #28bbf06c 0px, #28bbf06c 50%, transparent 50%), linear-gradient(0deg, transparent 0px, #28bbf06c 0px, #28bbf06c 50.1%, transparent 50%);
            border: 1px solid #29baf1;
            box-shadow: 0 0px 12px #29b8f1e5;

            .title {
                line-height: 36px;
                color: #fff;
                text-align: center;
            }
        }

        iframe {
            width: 460px;
            height: 320px;
        }
    }

    .arrow {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 45px;
        height: 2px;
        transform: rotate(-45deg) translate(5px, -15px);
        background-color: #28bbf0;
    }
}

 src/styles/divforms/popup.scss

@@ -121,4 +121,28 @@
            background: #666;
        }
    }
}

.site {
    font-size: 0.875rem;
    line-height: 24px;

    strong {
        font-size: 0.875rem;
    }
}

.introduce {

    strong {
        font-size: 0.875rem;
    }

    p {
        white-space: normal !important;
        word-wrap: break-word !important;
        max-width: 396px;
        font-size: 0.875rem;
        line-height: 24px;
    }
}