+全屏弹窗样式修改

liuyg

2021-12-16 d3fc230051884ee203e8adef0b8ff4158c2b43fe

+全屏弹窗样式修改

 src/components/mobilePopupOur/index.vue

@@ -6,7 +6,9 @@
      </div>
      <div class="m_p_h_center">
        <div>
          <div v-if="mBigPopup.search" style="color: #fff">查询结果</div>
          <div v-if="mBigPopup.search" style="color: #fff">
            查询结果{{ searchLabel ? "--" + searchLabel : "" }}
          </div>
          <el-dropdown trigger="click" @command="choiceIt" v-else>
            <span class="el-dropdown-link">
              {{ choiceValue }}<i class="el-icon-arrow-down el-icon--right"></i>
@@ -32,11 +34,21 @@
          :name="item.value"
        >
          <div class="m_p_c_tableIn">
            <el-empty
              v-show="item.child.length == 0"
              description="暂无数据"
            ></el-empty>
            <mobilePopupOurOnce
              v-for="(citem, cindex) in item.child"
              :key="cindex"
              :ends="item.child.length - 1 == cindex"
              :onceData="citem"
            ></mobilePopupOurOnce>
            <div v-show="item.child.length != 0">
              <el-divider content-position="left">
                <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;&nbsp;暂无更多
              </el-divider>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
@@ -53,6 +65,7 @@
  name: "mobilePopupOur",
  data() {
    return {
      searchLabel: "",
      choiceValue: "",
      choiceData: [
        {
@@ -73,6 +86,237 @@
          label: "西东大街",
          value: "first",
          child: [
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
@@ -150,80 +394,12 @@
        {
          label: "科技园",
          value: "third",
          child: [
            {
              name: "电力部门2",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门2",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆2",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["定位"],
            },
          ],
          child: [],
        },
        {
          label: "逸夫楼",
          value: "fourth",
          child: [
            {
              name: "电力部门3",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门3",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆3",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["定位"],
            },
          ],
          child: [],
        },
      ],
      fullscreenLoading: false,
@@ -240,7 +416,9 @@
    this.fullscreenLoading = true;
    setTimeout(() => {
      if (this.mBigPopup.search) {
        this.searchLabel = this.mBigPopup.value;
        console.log("查询搜索结果", this.mBigPopup.value);
        this.fullscreenLoading = false;
        return;
      }
      this.choiceValue = this.mBigPopup.name;

 src/components/mobilePopupOurOnce/index.vue

@@ -1,6 +1,12 @@
<template>
  <div class="mobilePopupOurOnce">
    <div class="mobilePopupOurOnce_center">
    <div
      class="mobilePopupOurOnce_center"
      :style="{
        borderBottom: !ends ? '#d4d4d4 dashed 1px' : '',
        marginBottom: !ends ? '6px' : '',
      }"
    >
      <div class="mobilePopupOurOnce_left">
        <img src="img/cc/cc.png" alt="" />
      </div>
@@ -29,7 +35,7 @@
<script>
import { mapGetters } from "vuex";
export default {
  props: ["onceData"],
  props: ["onceData", "ends"],
  name: "mobilePopupOurOnce",
  created() {
    this.DC = global.DC;
@@ -84,9 +90,9 @@
  padding: 0 0;
  margin: 0 8px;
  .mobilePopupOurOnce_center {
    margin-bottom: 8px;
    // margin-bottom: 8px;
    height: 80px;
    border-bottom: #d4d4d4 dashed 1px;
    // border-bottom: #d4d4d4 dashed 1px;
    padding-bottom: 8px;
    @extend .flexCenter;
    .mobilePopupOurOnce_left {

 src/styles/mobile/popup.scss

@@ -1,4 +1,5 @@
#mobile-map_popup_content {
    //弹窗
    width: 100%;
    position: fixed;
    z-index: 99;
@@ -144,4 +145,15 @@
            }
        }
    }

    //滚动条
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        width: 2px !important;
        /*滚动条的圆角*/
        -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.9);
        background-color: #f1f1f1;
        /*滚动条的背景颜色*/
    }
}