+样式

liuyg

2021-12-23 3063e55a3ce855f36654b19b8db90b0ad161404b

+样式

 src/components/mobileCortrolButtom/index.vue

@@ -143,7 +143,7 @@
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    font-size: 32px;
    margin-left: 12px;
    border-radius: 5px;
    .icons {
@@ -152,7 +152,7 @@
      height: 100%;
    }
    .icon {
      font-size: 20px;
      font-size: 32px;
      color: #fff;
      &::before {
        width: 100%;

 src/components/mobileLeftNav/index.vue

@@ -76,7 +76,8 @@
          checked: "/img/leftnav/tag-checked.png",
          layer: "tagLayer",
          methods: getListarchitecture1,
          imgSrc: "img/mobile/pink.png",
          imgSrc: "https://map.hit.edu.cn/images/tarrow_xq.png",
          // imgSrc: "img/mobile/pink.png",
        },
        // {
        //   flag: false,
@@ -96,7 +97,8 @@
          checked: "/img/leftnav/scene-checked.png",
          layer: "sceneLayer",
          methods: getListarchitecture,
          imgSrc: "img/mobile/blue.png",
          imgSrc: "img/leftnav/map-panorama.png",
          // imgSrc: "img/mobile/blue.png",
        },
        // {
        //   flag: false,
@@ -116,7 +118,8 @@
          checked: "/img/leftnav/aed-checked.png",
          layer: "aedLayer",
          methods: getListaed,
          imgSrc: "img/mobile/pink.png",
          imgSrc: "img/leftnav/map-aed.png",
          // imgSrc: "img/mobile/pink.png",
        },
        {
          flag: false,
@@ -126,7 +129,8 @@
          checked: "/img/leftnav/park-checked.png",
          layer: "parkLayer",
          methods: getListparking,
          imgSrc: "img/mobile/popcorn.png",
          imgSrc: "https://map.hit.edu.cn/images/p-biao.png",
          // imgSrc: "img/mobile/popcorn.png",
        },
        {
          flag: false,
@@ -136,7 +140,8 @@
          checked: "/img/leftnav/come-checked.png",
          layer: "comeLayer",
          methods: getListdoor,
          imgSrc: "img/mobile/purple.png",
          imgSrc: "img/leftnav/map-activity.png",
          // imgSrc: "img/mobile/purple.png",
        },
      ],
      viewer: null,
@@ -438,24 +443,74 @@
      // this.comeLayer["positions"] = positions6;
      let ourNum = that.leftNavData.length;
      for (let n = 0; n < ourNum; n++) {
        this.leftNavData[n].methods().then((res) => {
        let ourD = this.leftNavData[n];
        ourD.methods().then((res) => {
          let dom;
          let data = res.data.data;
          let position = that.changePoiton(data);
          let num = data.length;
          for (let k = 0; k < num; k++) {
            const divIcon = new that.DC.DivIcon(
              position[k],
              `
            if (ourD.label == "标签") {
              dom = `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
                               ${data[k].mechanismname}
                            </div>
                            <div class="tag-angle-content">
                                <img src="${this.leftNavData[n].imgSrc}">
                                <img src="${ourD.imgSrc}">
                            </div>
                        </div>
                    `
            );
                    `;
            } else if (ourD.label == "实景") {
              // <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;">
              //    ${data[k].mechanismname}
              // </div>
              dom = `
                        <div  class="way-entitys-box mobile-way-entitys-box">
                            <div  class="way-sign-box ">
                                <img src="img/leftnav/map-panorama.png">
                            </div>
                        </div>
                    `;
            } else if (ourD.label == "AED") {
              dom = `
                        <div class="mobiletag-entitys-box">
                            <div class="tag-content">
                               ${data[k].mechanismname}
                            </div>
                            <div class="tag-angle-content">
                                <img src="${ourD.imgSrc}">
                            </div>
                        </div>
                    `;
            } else if (ourD.label == "停车") {
              dom = `
                        <div class="park-entitys-box">
                            <div class="park-title" alt="${data[k].mechanismname}">
                            </div>
                            <div class="park-sign-box">
                                <div>
                                    <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="${data[k].mechanismname}" title="${data[k].mechanismname}">
                                </div>
                                <div>
                                    <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
                                </div>
                            </div>
                        </div>
                    `;
            } else if (ourD.label == "出入") {
              dom = `
                        <div class="mobiletag-entitys-box-pink">
                            <div class="tag-content">
                               ${data[k].mechanismname}
                            </div>
                            <div class="tag-angle-content">
                                <img src="${ourD.imgSrc}">
                            </div>
                        </div>
                    `;
            }
            const divIcon = new that.DC.DivIcon(position[k], dom);
            //订阅事件
            divIcon.on(DC.MouseEventType.CLICK, (e) => {
              // console.log(data[k]);
@@ -519,7 +574,7 @@
  .m-left-coutrol {
    position: absolute;
    left: -24px;
    top: 96px;
    top: 60px;
    width: 25px;
    height: 60px;
    background-color: #fff;

 src/components/mobilePopupOurOnce/index.vue

@@ -104,6 +104,7 @@
            lntLat: that.ourData.lntLat,
            query: { ...this.ourData, seebut: this.seebut },
            useJWD: true, //仅使用经纬度
            from: "PopupOurOnce",
          };
          that.popupsDom = that.$store.dispatch("setMobileWindows", d);
        }, 500);

 src/components/mobileWindow/index.vue

@@ -8,7 +8,7 @@
    <div class="mobilelabel-content">
      <div class="mobile-popup-imgs-heard">
        <div class="mobile-popup-imgs-h-close">
          <i class="el-icon-circle-close icon" @click="closeWindow"></i>
          <i class="el-icon-close icon" @click="closeWindow"></i>
        </div>
        <img :src="url" alt="" />
        <el-image
@@ -29,6 +29,7 @@
            <div class="m-c-title">{{ item.name }}：</div>
            <span class="m-c-center">{{ item.value }}</span>
          </div>
          <div class="mobileBig-center-introduce" v-html="introduce"></div>
        </div>
      </div>
      <div class="mobile-popup-control">
@@ -109,6 +110,9 @@
                value: queryData[k] ? queryData[k] : "暂无",
              });
            }
            if (k == "introduce") {
              this.introduce = queryData[k];
            }
          }
        }
      }
@@ -129,11 +133,13 @@
          name: "address",
          value: "地址",
        },
        {
          name: "introduce",
          value: "详情",
        },
        // {
        //   name: "introduce",
        //   value: "详情",
        // },
      ],
      introduce:
        "1，是一个阿拉伯数字。1是一个自然数，是最小的正整数，是最小的正奇数。1是一个有理数，是一位数，也是奇数。1既不是质数也不是合数。1的n次方（n∈R）都等于1。1的倒数是它本身。一个或者几个事物所组成的整体，可以看作是单位“1”。",
      title: "",
      fullscreenLoading: false,
      url: "/img/job/one.jpg",

 src/router/axios.js

@@ -9,8 +9,8 @@

const service = axios.create({
    //   baseURL: 'http://192.168.0.107:83',
    //   baseURL: 'http://192.168.0.107:80',
    baseURL: 'http://localhost:82',
    baseURL: 'http://192.168.0.107:80',
    // baseURL: 'http://localhost:82',
    timeout: 600000 // request timeout
})


 src/store/modules/mobile.js

@@ -89,12 +89,16 @@
        setMobileWindows({ state, commit, dispatch }, data) {//打开随地图移动窗口
            // 关闭前一个弹窗？
            dispatch("closeMobileWindowsDom");
            let clnt = data.from == "PopupOurOnce" ? +data.lntLat[0] : +data.lntLat[0],
                clat = data.from == "PopupOurOnce" ? +data.lntLat[1] - 0.00008 : +data.lntLat[1] - 0.00048,
                calt = data.from == "PopupOurOnce" ? 0 : 90.648862227;
            if (data.useJWD) {
                var ellipsoid = state.mviewer.scene.globe.ellipsoid;
                var cartographic = global.DC.Namespace.Cesium.Cartographic.fromDegrees(
                    data.lntLat[0],
                    data.lntLat[1] - 0.00048,
                    "90.648862227"
                    // data.lntLat[0],
                    // data.lntLat[1] - 0.00048,//数值增大是下
                    // "90.648862227"
                    clnt, clat, calt
                );
                data.position = ellipsoid.cartographicToCartesian(cartographic);
            }
@@ -121,11 +125,20 @@
            // Lat: - 0.0108 y轴 减是上
            // h：4000
            // lnt： + 0.01187 x轴
            // Lat: - 0.0308y轴
            // Lat: - 0.0308 y轴
            // h：330
            // lnt： + 0.01197 x轴
            // Lat: - 0.0021 y轴
            let Flys = [
                data.from == "PopupOurOnce" ? +data.lntLat[0] + 0.01197 : +data.lntLat[0] + 0.01197,
                data.from == "PopupOurOnce" ? +data.lntLat[1] - 0.0021 : +data.lntLat[1] - 0.0021,
                data.from == "PopupOurOnce" ? 330 : 330,
            ]
            let Position = new global.DC.Position(//转坐标
                +data.lntLat[0] + 0.01197,
                +data.lntLat[1] - 0.0021,
                330,
                // +data.lntLat[0] + 0.01197,
                // +data.lntLat[1] - 0.0021,
                // 330,
                ...Flys,
                0,
                -45
            );

 src/styles/entitys/text-entitys.scss

@@ -1,32 +1,20 @@
.tag-entitys-box {
$imgsize: 25px;

.mobiletag-entitys-box {
    // 手机地图点  勿删
    height: 28px;
    // border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .tag-content {
        // display: inline;
        // height: 20px;
        // line-height: 20px;
        // border: #FFFFFF solid 1px;
        // padding: 1px 4px 1px 4px;
        // color: #FFFFFF;
        // text-align: center;
        // background-color: #cc0000;
        // border-radius: 4px;
        // box-shadow: 2px 2px 10px white;
        font-size: 1.1rem;
        font-weight: 900;
        color: red;
        -webkit-text-stroke-color: #fff;
        -webkit-text-stroke-width: 0.6px;
    }
    $imgsize: 30px;
    .tag-angle-content {
        // height: 9px;
        // text-align: center;
        // margin: -6px 26px 0px 10px;
        width: $imgsize;
        height: $imgsize;
        img {
@@ -35,7 +23,52 @@
        }
    }
}
.mobiletag-entitys-box-pink {
    // 手机地图点  勿删  粉色
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .tag-content {
        font-size: 1.1rem;
        font-weight: 900;
        color: #fe77fe;
        -webkit-text-stroke-color: #fff;
        -webkit-text-stroke-width: 0.6px;
    }
    .tag-angle-content {
        width: $imgsize;
        height: $imgsize;
        img {
            width: 100%;
            height: 100%;
        }
    }
}
.tag-entitys-box {
    height: 28px;

    .tag-content {
        display: inline;
        height: 20px;
        line-height: 20px;
        border: #ffffff solid 1px;
        padding: 1px 4px 1px 4px;
        color: #ffffff;
        text-align: center;
        background-color: #cc0000;
        border-radius: 4px;
        box-shadow: 2px 2px 10px white;
        font-size: 0.875rem;
    }

    .tag-angle-content {
        height: 9px;
        text-align: center;
        margin: -6px 26px 0px 10px;
    }
}
.way-entitys-box {
    .way-title {
        border: white 1px solid;

 src/styles/mobile/popup.scss

@@ -16,25 +16,27 @@
        left: 1000px;
        position: absolute;
        height: auto;
        //   background-color: #fff;
        // background-color: #fff;
        background-image: linear-gradient(
                // 135deg,
                #28bbf0a1 30px,
                #28bbf0a1 30px,
                // #28bbf0a1 50%,
                // #28bbf06c 50%,
                // transparent 50%
                #28bbf0a1 100%,
                transparent 100%
                #28bbf06c 35px,
                #28bbf06c 35px,
                #28bbf06c calc(100% - 34px),
                transparent calc(100% - 34px)
            ),
            linear-gradient(
                // -45deg,
                transparent 30px,
                #28bbf0a1 30px,
                // #28bbf0a1 50.1%,
                // #28bbf06c 50.1%,
                // transparent 50%
                #28bbf0a1 100%,
                transparent 100%
                transparent 35px,
                #28bbf06c 35px,
                #28bbf06c calc(100% - 0px),
                transparent calc(100% - 0px)
            );
        // background-image: linear-gradient(135deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50%, transparent 50%),
        //     linear-gradient(-45deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50.1%, transparent 50%);
        border-radius: 10px;
        position: relative;

@@ -43,12 +45,16 @@
            color: #fff;
            width: 100%;
            height: 35px;
            background-image: linear-gradient(#29baf1, #28bbf0);
            // background-image: linear-gradient(135deg, transparent 25px, #29baf1 25px);
            background-image: linear-gradient(#29baf1a1, #29baf1a1);

            // background-image: linear-gradient(#29baf1, #28bbf0);
            // background-color: #f7f7f7;
            border-bottom: 1px solid #ebebeb;
            font-size: 14px;
            font-size: 16px;
            border-radius: 10px 10px 0 0;
            padding: 8px 14px;
            line-height: 20px;
            box-sizing: border-box;
        }
        .mobilelabel-content {
@@ -59,8 +65,10 @@
                .mobile-popup-imgs-h-close {
                    width: 35px;
                    height: 34px;
                    background-image: linear-gradient(#29baf1, #28bbf0);
                    // background-image: linear-gradient(#29baf1a1, #29baf1a1);
                    // background-image: linear-gradient(#29baf1, #28bbf0);
                    // background-color: #f7f7f7;
                    background-color: transparent;
                    position: absolute;
                    @extend .centersFlex;
                    border-radius: 100px;
@@ -77,13 +85,16 @@
                letter-spacing: 1px;
                box-sizing: border-box;
                img {
                    margin-left: calc(50% - 35px);
                    width: 70px;
                    height: 70px;
                }
                $centerFontSize: 15px;
                //内容显示
                .mobileBig-center-our {
                    width: 100%;
                    height: auto;
                    font-size: $centerFontSize;
                    .mobileBig-center {
                        width: 100%;
                        min-height: 30px;
@@ -101,18 +112,26 @@
                            line-height: 25px;
                        }
                    }
                    .mobileBig-center-introduce {
                        width: 100%;
                        height: auto;
                        // border: 1px solid red;
                        text-indent: 2em;
                        color: #fff;
                    }
                }
            }
            .mobile-popup-control {
                width: 100%;
                height: 20px;
                background-color: #f7f7f7;
                // background-color: #f7f7f7;
                border-top: 1px solid #ebebeb;
                padding: 5px 0 8px 0;
                border-radius: 0 0 10px 10px;
                display: flex;
                align-items: center;
                background-image: linear-gradient(#29baf1, #28bbf0);
                background-image: linear-gradient(#29baf1a1, #29baf1a1);
                // background-image: linear-gradient(#29baf1, #28bbf0);
                justify-content: center;
                position: relative;
                &::before {
@@ -212,8 +231,8 @@
            @extend .flexCenter;
            .el-icon-s-flag.icon {
                position: relative;
                top: 10px;
                left: 10px;
                top: 4px;
                left: 4px;
            }
        }
    }
@@ -399,3 +418,12 @@
        // }
    }
}

//左侧弹窗全景图片变小
.mobile-way-entitys-box {
    $size: 30px;
    img {
        width: $size;
        height: $size;
    }
}