1

mayisheng

2022-08-15 81f54040c2cb65537c6c6e1db8358a39a57dea0d

 src/components/mobileLeftNav/index.vue

@@ -1,415 +1,521 @@
<template>
  <div class="m-left-nav" :style="[navStyle]">
    <!-- :style="[coutrolStyle]" -->
    <div class="m-left-coutrol" @click="iconHide = !iconHide">
      <i :class="icons"></i>
    <!-- 右侧标签管理栏
mobileLeftNav
    -->
    <div :class="['m-left-nav', seeRight ? '' : 'nones']" :style="[navStyle]">
        <!-- :style="[coutrolStyle]" -->
        <div class="m-left-coutrol" @click="changeIconHide">
            <i :class="icons"></i>
        </div>
        <ul>
            <li
                v-for="(item, index) in leftNavData"
                :key="index"
                @click="leftNavClick(item)"
                v-show="!item.notShow"
            >
                <img :style="[imgStyle]" :src="item.img" alt />
                <span>{{ item.label }}</span>
            </li>
        </ul>
    </div>
    <ul>
      <li
        v-for="(item, index) in leftNavData"
        :key="index"
        @click="leftNavClick(item)"
      >
        <img :style="[imgStyle]" :src="item.img" alt="" />
        <span>{{ item.label }}</span>
      </li>
    </ul>
    <div
      ref="mobile-mapContentContent"
      v-show="popupWindow1"
      id="mobile-map_MP1"
    >
      <div class="mobile-popup-imgs-heard">
        <img :src="url1" alt="" />
        <el-image
          style="width: 100px; height: 100px"
          :src="url1"
          id="mobileBigImgs"
          v-show="false"
          :preview-src-list="srcList1"
        >
        </el-image>
        南门口
      </div>
      <div class="mobile-popup-control">
        <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs1"
          >图集</el-link
        >
        <el-divider direction="vertical"></el-divider>
        <el-link icon="el-icon-map-location">实景</el-link>
        <el-divider direction="vertical"></el-divider>
        <el-link icon="el-icon-aim" @click="goOn1">去这</el-link>
      </div>
    </div>
    <!-- 地图图标弹窗↑ -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
    // getListdoor, //出入
    // getListaed, //AED
    // getListparking, //停车场
    getListarchitecture, // 全景
    getListarchitecture1, // 标签
    getListroad, // 道路
    getListcat // 出入-AED-停车场
} from '@/api/mobile/piont/index'
import { getListVideo } from '@/api/mobile/monitor/index'
const layers = {
    mobileTagLayer: null,
    wayLayer: null,
    sceneLayer: null,
    videoLayer: null,
    activityLayer: null,
    aedLayer: null,
    parkLayer: null,
    comeLayer: null
}
export default {
  name: "mobileLeftNav",
  computed: {},
  watch: {
    iconHide() {
      if (this.iconHide) {
        this.icons = "el-icon-d-arrow-left";
        this.navStyle.right = "-51px";
        this.imgStyle.right = "6px";
      } else {
        this.icons = "el-icon-d-arrow-right";
        this.navStyle.right = "0px";
        this.imgStyle.right = "0";
      }
    name: 'mobileLeftNav',
    watch: {
        iconHide: {
            immediate: true,
            handler (newCode, oldCode) {
                if (newCode) {
                    this.icons = 'el-icon-d-arrow-left'
                    this.navStyle.right = '-51px'
                    this.imgStyle.right = '6px'
                } else {
                    this.icons = 'el-icon-d-arrow-right'
                    this.navStyle.right = '0px'
                    this.imgStyle.right = '0'
                }
            }
        },
        seeRight () {
            if (this.seeRight) {
                this.leftNavData[0].flag = false
                this.leftNavData[0].img = this.leftNavData[0].checked
                layers[this.leftNavData[0].layer].show = true
            } else {
                const lnd = this.leftNavData
                for (const k in lnd) {
                    if (layers[this.leftNavData[k].layer]._show) {
                        // console.log(lnd[k].label, "所有开启");
                        this.leftNavData[k].flag = false
                        this.leftNavData[k].img = this.leftNavData[k].normal
                        layers[this.leftNavData[k].layer].show = false
                    }
                }
            }
        }
    },
  },
  data() {
    return {
      popupWindow1: false,
      url1: "/img/job/one.jpg",
      srcList1: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      icons: "el-icon-d-arrow-right",
      iconHide: false,
      navStyle: {
        right: "0px",
      },
      imgStyle: {
        right: "0",
      },
      //   coutrolStyle: {
      //     position: " absolute",
      //     left: "-26px",
      //     top: "114px",
      //     right: "auto",
      //     width: "25px",
      //     height: "60px",
      //     backgroundColor: "#fff",
      //     borderRadius: "10px",
      //     display: "flex",
      //     alignItems: "center",
      //     justifyContent: "center",
      //     transition: "left 3s",
      //   },
      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.0493 + Math.random() * 0.5;
        const lat = 31.2583 + Math.random() * 0.5;
        list.push(new this.DC.Position(lng, lat, 0));
      }
      return list;
    computed: {
        ...mapGetters(['iconHide', 'dimensionData', 'seeRight', 'pinchFlag'])
    },
    leftNavClick(item) {
      // console.log(item);
      this.popupWindow1 = false;
      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;
      }
    data () {
        return {
            icons: 'el-icon-d-arrow-right',
            navStyle: {
                right: '0px'
            },
            imgStyle: {
                right: '0'
            },
            leftNavData: [
                {
                    flag: true,
                    label: '标签',
                    // img: "/img/leftnav/tag.png",
                    img: '/img/leftnav/tag-checked.png',
                    normal: '/img/leftnav/tag.png',
                    checked: '/img/leftnav/tag-checked.png',
                    layer: 'mobileTagLayer',
                    methods: getListarchitecture1,
                    imgSrc: '/img/icon/tarrow_xq.png'
                    // imgSrc: "img/mobile/pink.png",
                },
                {
                    flag: false,
                    label: '道路',
                    img: '/img/leftnav/way.png',
                    normal: '/img/leftnav/way.png',
                    checked: '/img/leftnav/way-checked.png',
                    layer: 'wayLayer',
                    methods: getListroad,
                    imgSrc: 'img/mobile/green.png'
                },
                {
                    flag: false,
                    label: '实景',
                    img: '/img/leftnav/scene.png',
                    normal: '/img/leftnav/scene.png',
                    checked: '/img/leftnav/scene-checked.png',
                    layer: 'sceneLayer',
                    methods: getListarchitecture,
                    imgSrc: 'img/leftnav/map-panorama.png'
                    // imgSrc: "img/mobile/blue.png",
                },
                {
                    flag: false,
                    label: '监控',
                    img: '/img/leftnav/monitor.png',
                    normal: '/img/leftnav/monitor.png',
                    checked: '/img/leftnav/monitor-checked.png',
                    layer: 'videoLayer',
                    methods: getListVideo,
                    imgSrc: '/img/leftnav/map-monitor.png'
                    // imgSrc: "img/mobile/blue.png",
                },
                // {
                //   flag: false,
                //   label: "活动",
                //   img: "/img/leftnav/activity.png",
                //   normal: "/img/leftnav/activity.png",
                //   checked: "/img/leftnav/activity-checked.png",
                //   layer: "activityLayer",
                //   methods: getListdoor,
                //   imgSrc: "img/mobile/brown.png",
                // },
                {
                    flag: false,
                    label: 'AED',
                    img: '/img/leftnav/aed.png',
                    normal: '/img/leftnav/aed.png',
                    checked: '/img/leftnav/aed-checked.png',
                    layer: 'aedLayer',
                    methods: getListcat,
                    type: 9,
                    imgSrc: 'img/leftnav/map-aed.png',
                    // imgSrc: "img/mobile/pink.png",
                    notShow: true
                },
                {
                    flag: false,
                    label: '停车',
                    img: '/img/leftnav/park.png',
                    normal: '/img/leftnav/park.png',
                    checked: '/img/leftnav/park-checked.png',
                    layer: 'parkLayer',
                    methods: getListcat,
                    type: 11,
                    imgSrc: '/img/icon/p-biao.png'
                    // imgSrc: "img/mobile/popcorn.png",
                },
                {
                    flag: false,
                    label: '出入',
                    img: '/img/leftnav/come.png',
                    normal: '/img/leftnav/come.png',
                    checked: '/img/leftnav/come-checked.png',
                    layer: 'comeLayer',
                    methods: getListcat,
                    type: 12,
                    imgSrc: 'img/leftnav/map-activity.png'
                    // imgSrc: "img/mobile/purple.png",
                }
            ]
            //   viewer: null,
            //   mobileTagLayer: null,
            //   wayLayer: null,
            //   sceneLayer: null,
            //   videoLayer: null,
            //   activityLayer: null,
            //   aedLayer: null,
            //   parkLayer: null,
            //   comeLayer: null,
        }
    },
    initialize(viewer) {
      var that = this;
      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);
    created () { },
    mounted () { },
    methods: {
        changeIconHide () {
            const isif = this.iconHide
            this.$store.commit('MSET_ICONHIDE', !isif)
        },
        leftNavClick (item) {
            // console.log(123132);
            // 判断并关闭已开启标签
            const lnd = this.leftNavData
            for (const k in lnd) {
                // console.log(this[this.leftNavData[k].layer]);
                if (lnd[k].label == item.label) {
                    // console.log(lnd[k].label, "当前点击");
                    continue
                }
                if (layers[this.leftNavData[k].layer]._show) {
                    // console.log(lnd[k].label, "所有开启");
                    this.leftNavData[k].flag = false
                    this.leftNavData[k].img = this.leftNavData[k].normal
                    layers[this.leftNavData[k].layer].show = false
                }
            }

      this.aedLayer = new this.DC.VectorLayer("aedLayer");
      viewer.addLayer(this.aedLayer);
            item.flag = !item.flag
            if (item.flag == true) {
                item.img = item.checked
                layers[item.layer].show = true
                // console.log("飞入");
                // this.flyTo(item);
                this.$store.dispatch('closeMobileWindowsDom') // 关闭弹窗
            } else {
                item.img = item.normal
                layers[item.layer].show = false
            }
        },
        // flyTo(item) {
        //   const that = this;
        //   const posi = this[item.layer].positions[0];
        //   // console.log(posi);
        //   const lntLat =
        //     that.dimensionData.pitch == -45
        //       ? [posi.lng + 0.00917, posi.lat - 0.0188, 500]
        //       : [posi.lng + 0.01197, posi.lat - 0.00055, 500];
        //   // that.mviewer.camera.flyTo({
        //   //   destination: Cesium.Cartesian3.fromDegrees(
        //   //     lntLat[0],
        //   //     lntLat[1],
        //   //     lntLat[2]
        //   //   ),
        //   // });
        //   // return;
        //   this.$store.dispatch("mapFlyTo", {
        //     // 飞入
        //     lntLat: lntLat,
        //     // lntLat: [posi.lng + 0.01187, posi.lat - 0.0308, 4000],
        //     // lntLat: [121.50492752204283, 31.21567802276832, 2530],
        //     heading: that.dimensionData.heading,
        //     pitch: that.dimensionData.pitch,
        //     roll: that.dimensionData.roll,
        //     noOpen: true,
        //   });
        // },
        overlayClick (data, billboard, label, k, ourD) {
            const that = this
            billboard.on(global.DC.MouseEventType.CLICK, (e) => {
                if (that.pinchFlag == true) {
                    return
                }
                const d = {
                    name:
                        data[k].mechanismname ||
                        data[k].roadname ||
                        data[k].vrname ||
                        (ourD.label == '监控' ? '监控' : '无显示名字'),
                    bgImg: data[k].tpurl,
                    video: ourD.label == '监控' ? data[k].vrurl : '',
                    from: 'labels',
                    introduce: data[k].introduce,
                    panoramaurl: ourD.label == '实景' ? data[k].vrurl : ''
                }
                // 定制化窗体
                that.openPopupS(
                    e.position,
                    [e.overlay._position._lng, e.overlay._position._lat],
                    d
                )
            })
            label.on(global.DC.MouseEventType.CLICK, (e) => {
                if (that.pinchFlag == true) {
                    return
                }
                const d = {
                    name:
                        data[k].mechanismname ||
                        data[k].roadname ||
                        (ourD.label == '监控' ? '监控' : '无显示名字'),
                    bgImg: data[k].tpurl,
                    video: data[k].videourl || '',
                    from: 'labels',
                    introduce: data[k].introduce,
                    panoramaurl: data[k].panoramaurl
                }
                // 定制化窗体
                that.openPopupS(
                    e.position,
                    [e.overlay._position._lng, e.overlay._position._lat],
                    d
                )
            })
        },
        initialize () {
            var that = this
            global.viewer.scene.globe.depthTestAgainstTerrain = false
            layers.mobileTagLayer = new global.DC.VectorLayer('mobileTagLayer')
            global.viewer.addLayer(layers.mobileTagLayer)

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

      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">
                                南门口
                            </div>
                            <div class="tag-angle-content">
                                <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
                            </div>
                        </div>
                    `
        );
        this.tagLayer.addOverlay(divIcon);
        //订阅事件1
        divIcon.on(DC.MouseEventType.CLICK, (e) => {
          // console.log(e);
          that.popupWindow1 = true;
          // 定制化窗体
          var divForms = new DC.mobileDivForms(viewer, {
            domId: "mobilePopup",
            title: "成教楼  ",
            className: "mobilePopup",
            content: document.getElementById("mobile-map_MP1"),
            position: [e.position],
          });
          viewer.zoomToPosition(
            new DC.Position(
              e.overlay._position._lng,
              e.overlay._position._lat - 0.012,
              1530,
              0,
              -45
            )
          );
        });
      });
            layers.sceneLayer = new global.DC.VectorLayer('sceneLayer')
            global.viewer.addLayer(layers.sceneLayer)

      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;">
                                工建街
                            </div>
                            <div  class="way-sign-box">
                                <img src="https://map.hit.edu.cn/images/roadsign3.png">
                            </div>
                        </div>
                    `
        );
        this.wayLayer.addOverlay(divIcon);
      });
            layers.videoLayer = new global.DC.VectorLayer('videoLayer')
            global.viewer.addLayer(layers.videoLayer)

      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);
      });
            layers.activityLayer = new global.DC.VectorLayer('activityLayer')
            global.viewer.addLayer(layers.activityLayer)

      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);
            layers.aedLayer = new global.DC.VectorLayer('aedLayer')
            global.viewer.addLayer(layers.aedLayer)

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

        this.aedLayer.addOverlay(billboard);
      });
            layers.comeLayer = new global.DC.VectorLayer('comeLayer')
            global.viewer.addLayer(layers.comeLayer)

      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>
                            <div class="park-sign-box">
                                <div>
                                    <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="校外街路侧停车场" title="校外街路侧停车场">
                                </div>
                                <div>
                                    <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
                                </div>
                            </div>
                        </div>
                    `
        );
        this.parkLayer.addOverlay(divIcon);
      });
            const ourNum = that.leftNavData.length
            for (let n = 0; n < ourNum; n++) {
                const ourD = this.leftNavData[n]
                const d = ourD.type ? { lifetype: ourD.type } : {}
                ourD.methods(d).then((res) => {
                    let imgUrl = null
                    let sateName = null
                    let data = null

      const positions6 = this.generatePosition(10);
      positions6.forEach((item, index) => {
        const label = new this.DC.Label(item, "123");
        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);
                    if (ourD.label == '监控' || ourD.label == '实景') {
                        data = res.data.data.records
                    } else {
                        data = res.data.data
                    }

        const billboard = new this.DC.Billboard(
          item,
          "/img/leftnav/map-activity.png"
        );
        billboard.size = [16, 16];
                    const position = that.changePoiton(data)
                    const num = data.length
                    for (let k = 0; k < num; k++) {
                        sateName = data[k].mechanismname
                        if (ourD.label == '标签') {
                            imgUrl = '/img/icon/m-t.png'
                        } else if (ourD.label == '道路') {
                            imgUrl = '/img/icon/m-w.png'
                            sateName = data[k].roadname
                        } else if (ourD.label == '实景') {
                            imgUrl = '/img/icon/m-s.png'
                            sateName = data[k].vrname
                        } else if (ourD.label == 'AED') {
                            imgUrl = null
                        } else if (ourD.label == '停车') {
                            imgUrl = '/img/icon/m-p.png'
                        } else if (ourD.label == '出入') {
                            imgUrl = '/img/icon/m-c.png'
                        } else if (ourD.label == '监控') {
                            imgUrl = '/img/icon/m-v.png'
                            sateName = data[k].vrname
                        }

        this.comeLayer.addOverlay(billboard);
      });
                        const billboard = new global.DC.Billboard(position[k], imgUrl)

      this.tagLayer.show = false;
      this.wayLayer.show = false;
      this.sceneLayer.show = false;
      this.aedLayer.show = false;
      this.parkLayer.show = false;
      this.comeLayer.show = false;
    },
    mobileOpenImgs1() {
      let imgsDom = document.getElementById("mobileBigImgs");
      imgsDom.click();
    },
    goOn1() {},
  },
};
                        const label = new global.DC.Label(
                            position[k],
                            sateName
                        )

                        label.setStyle({
                            fillColor: global.DC.Color.RED,
                            style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                            outlineColor: global.DC.Color.WHITE, // 边框颜色
                            outlineWidth: 8, // 边框大小，
                            font: '12px sans-serif',
                            pixelOffset: { x: 0, y: -24 }
                        })

                        that.overlayClick(data, billboard, label, k, ourD)

                        layers[that.leftNavData[n].layer].addOverlay(billboard) // 加入图标
                        layers[that.leftNavData[n].layer].addOverlay(label)
                    }
                    layers[that.leftNavData[n].layer].positions = position
                    if (that.leftNavData[n].layer == 'mobileTagLayer') {
                        // that.leftNavData[n].img = that.leftNavData[n].checked;
                    } else {
                        layers[that.leftNavData[n].layer].show = false
                    }
                })
            }
            // setTimeout(() => {
            //   this.mobileTagLayer.show = false;
            // }, 500);
        },

        changePoiton (data) {
            const that = this
            const list = []
            const num = data.length
            for (let i = 0; i < num; i++) {
                let obj = {}
                if (data[i].x && data[i].x != '') {
                    const position = that.coordinate(data[i].x)
                    obj = {
                        lng: position.lng, lat: position.lat
                    }
                } else {
                    obj = {
                        lng: data[i].jd, lat: data[i].wd
                    }
                }
                list.push(new global.DC.Position(Number(obj.lng), Number(obj.lat), 0))
            }
            return list
        },

        coordinate (item) {
            const arr = item.split(',')

            return {
                lng: arr[0],
                lat: arr[1]
            }
        },

        mobileOpenImgs1 () {
            const imgsDom = document.getElementById('mobileBigImgs')
            imgsDom.click()
        },
        goOn1 () { },
        openPopupS (position, lntLat, query) {
            const that = this
            // 定制化窗体
            const d = {
                position,
                lntLat,
                query: { ...(query || {}), position, lntLat },
                useJWD: true // 仅使用经纬度
            }
            that.$store.dispatch('setMobileWindows', d)
        }
    }
}
</script>

<style scoped lang='scss'>
<style scoped lang="scss">
.m-left-nav {
  position: fixed;
  bottom: 30px;
  right: 0px;
  z-index: 200;
  background-color: #fff;
  border-radius: 17px 0 0 17px;
  transition: all 0.5s;
  .m-left-coutrol {
    position: absolute;
    left: -24px;
    top: 96px;
    width: 25px;
    height: 60px;
    position: fixed;
    bottom: 30px;
    right: 0px;
    z-index: 200;
    background-color: #fff;
    border-radius: 17px 0 0 17px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ul {
    position: relative;
    top: 3px;
  }
  li {
    margin-bottom: 6px;
    font-weight: 400;
    display: block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
    border-radius: 15px;
    text-align: center;
    font-size: 0;
    cursor: pointer;

    img {
      position: relative;
      transition: all 0.5s;
      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;
    transition: all 0.5s;
    .m-left-coutrol {
        position: absolute;
        left: -24px;
        top: 79px;
        width: 25px;
        height: 60px;
        background-color: #fff;
        border-radius: 17px 0 0 17px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      color: #2f2f2f;
    ul {
        position: relative;
        top: 3px;
    }
  }
    li {
        margin-bottom: 6px;
        font-weight: 400;
        display: block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        background-color: #fff;
        border-radius: 15px;
        text-align: center;
        font-size: 0;
        cursor: pointer;

        img {
            position: relative;
            transition: all 0.5s;
            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;
        }
    }
}
.nones {
    display: none;
}
</style>