+把DC拉出vue实例中，解决vue内存溢出问题

liuyg

2022-03-15 7366b0a279425cb6218bec8ba19774e5e8399b91

 src/components/mobileActivity/index.vue

@@ -1,511 +1,507 @@
<template>
    <div
        id="mobileActivity"
        :style="{ height: height + 'px' }"
        :class="[openValue ? 'isOpens' : 'notOpens']"
        v-if="showActivity"
    >
        <div class="mobileActivity_heard">
            <div class="mobileActivity_title">活动标题：{{ hdTitle }}</div>
            <div class="mobileActivity_close" @click="closeActivity">
                <i class="el-icon-close"></i>
            </div>
        </div>
        <div class="mobileActivity_in">
            <!-- <el-button type="primary" @click="init">open</el-button>
            <el-button type="success" @click="closeInit">close</el-button>-->
            <div class="mobileActivity_insmall">
                <!-- <img :src="imgs" alt="" class="mobileActivity_insmallimg" /> -->
                <el-image
                    class="mobileActivity_insmallimg"
                    :src="useData.url"
                    :preview-src-list="useData.srcList"
                ></el-image>
                <div class="mobileActivity_insmallxiangqing">
                    <div
                        class="mobileActivity_insmallxiangqingIn"
                        v-for="(item, index) in useData.smallData"
                        :key="index"
                    >
                        <span class="mobileActivity_insmallxiangqingIn_s">
                            {{
                            item.lable
                            }}
                        </span>
                        : {{ item.value }}
                    </div>
                </div>
            </div>
            <div class="mobileActivity_detailed">
                <div
                    class="mobileActivity_detailedIn"
                    v-for="(item, index) in useData.detailedData"
                    :key="index"
                >
                    <span class="mobileActivity_insmallxiangqingIn_s">
                        {{
                        item.lable
                        }}
                    </span>
                    : {{ item.value }}
                </div>
            </div>
        </div>
        <div class="mobileActivity_coutrol" :style="{ bottom: bottom + 'px' }">
            <ul>
                <li
                    v-for="(item, index) in leftNavData"
                    :key="index"
                    @click="mobileActivityCoutrolClick(item)"
                    v-show="!item.notShow"
                >
                    <img :src="item.img" alt />
                    <span>{{ item.label }}</span>
                </li>
            </ul>
        </div>
  <div
    id="mobileActivity"
    :style="{ height: height + 'px' }"
    :class="[openValue ? 'isOpens' : 'notOpens']"
    v-if="showActivity"
  >
    <div class="mobileActivity_heard">
      <div class="mobileActivity_title">活动标题：{{ hdTitle }}</div>
      <div class="mobileActivity_close" @click="closeActivity">
        <i class="el-icon-close"></i>
      </div>
    </div>
    <div class="mobileActivity_in">
      <!-- <el-button type="primary" @click="init">open</el-button>
            <el-button type="success" @click="closeInit">close</el-button>-->
      <div class="mobileActivity_insmall">
        <!-- <img :src="imgs" alt="" class="mobileActivity_insmallimg" /> -->
        <el-image
          class="mobileActivity_insmallimg"
          :src="useData.url"
          :preview-src-list="useData.srcList"
        ></el-image>
        <div class="mobileActivity_insmallxiangqing">
          <div
            class="mobileActivity_insmallxiangqingIn"
            v-for="(item, index) in useData.smallData"
            :key="index"
          >
            <span class="mobileActivity_insmallxiangqingIn_s">
              {{ item.lable }}
            </span>
            : {{ item.value }}
          </div>
        </div>
      </div>
      <div class="mobileActivity_detailed">
        <div
          class="mobileActivity_detailedIn"
          v-for="(item, index) in useData.detailedData"
          :key="index"
        >
          <span class="mobileActivity_insmallxiangqingIn_s">
            {{ item.lable }}
          </span>
          : {{ item.value }}
        </div>
      </div>
    </div>
    <div class="mobileActivity_coutrol" :style="{ bottom: bottom + 'px' }">
      <ul>
        <li
          v-for="(item, index) in leftNavData"
          :key="index"
          @click="mobileActivityCoutrolClick(item)"
          v-show="!item.notShow"
        >
          <img :src="item.img" alt />
          <span>{{ item.label }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import moveWindow from './move'
import { mapGetters } from "vuex";
import moveWindow from "./move";
export default {
    name: 'mobileActivity',
    computed: {
        ...mapGetters([
            'showActivity',
            'showActivityData',
            'drawALineLayerMany',
            'drawAPointLayerMany'
        ])
    },
    data () {
        const heig = 135
        const bottom = 150
        return {
            useHeight: heig,
            height: heig,
            useBottom: bottom,
            bottom: bottom,
            openValue: false,
            domMove: null,
            start: 0,
            end: 0,
            hdTitle: '',
            // url: "",
            // srcList: [],
            useData: {},
            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: 'tagLayer',
                    imgSrc: 'https://map.hit.edu.cn/images/tarrow_xq.png',
                    // imgSrc: "img/mobile/pink.png",
                    layer: 'drawALineLayerMany'
                },
                {
                    flag: true,
                    label: '标点',
                    img: '/img/leftnav/way-checked.png',
                    normal: '/img/leftnav/way.png',
                    checked: '/img/leftnav/way-checked.png',
                    layer: 'wayLayer',
                    imgSrc: 'img/mobile/green.png',
                    layer: 'drawAPointLayerMany'
                }
                // {
                //   flag: false,
                //   label: "实景",
                //   img: "/img/leftnav/scene.png",
                //   normal: "/img/leftnav/scene.png",
                //   checked: "/img/leftnav/scene-checked.png",
                //   layer: "sceneLayer",
                //   imgSrc: "img/leftnav/map-panorama.png",
                //   // imgSrc: "img/mobile/blue.png",
                // },
            ]
        }
    },
    watch: {
        //   openValue() {
        //     if (this.openValue) {
        //       let windowHeight = document.body.clientHeight;
        //       this.height = windowHeight / 2;
        //     } else {
        //       this.height = this.useHeight;
        //     }
        //   },
        showActivity () {
            if (this.showActivity) {
                this.inToInit() // 初始化
                this.hdTitle = this.showActivityData.name
  name: "mobileActivity",
  computed: {
    ...mapGetters([
      "showActivity",
      "showActivityData",
      // 'drawALineLayerMany',
      // 'drawAPointLayerMany'
    ]),
  },
  data() {
    const heig = 135;
    const bottom = 150;
    return {
      useHeight: heig,
      height: heig,
      useBottom: bottom,
      bottom: bottom,
      openValue: false,
      domMove: null,
      start: 0,
      end: 0,
      hdTitle: "",
      // url: "",
      // srcList: [],
      useData: {},
      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: "tagLayer",
          imgSrc: "https://map.hit.edu.cn/images/tarrow_xq.png",
          // imgSrc: "img/mobile/pink.png",
          layer: "drawALineLayerMany",
        },
        {
          flag: true,
          label: "标点",
          img: "/img/leftnav/way-checked.png",
          normal: "/img/leftnav/way.png",
          checked: "/img/leftnav/way-checked.png",
          layer: "wayLayer",
          imgSrc: "img/mobile/green.png",
          layer: "drawAPointLayerMany",
        },
        // {
        //   flag: false,
        //   label: "实景",
        //   img: "/img/leftnav/scene.png",
        //   normal: "/img/leftnav/scene.png",
        //   checked: "/img/leftnav/scene-checked.png",
        //   layer: "sceneLayer",
        //   imgSrc: "img/leftnav/map-panorama.png",
        //   // imgSrc: "img/mobile/blue.png",
        // },
      ],
    };
  },
  watch: {
    //   openValue() {
    //     if (this.openValue) {
    //       let windowHeight = document.body.clientHeight;
    //       this.height = windowHeight / 2;
    //     } else {
    //       this.height = this.useHeight;
    //     }
    //   },
    showActivity() {
      if (this.showActivity) {
        this.inToInit(); // 初始化
        this.hdTitle = this.showActivityData.name;

                // new窗口对象
                const that = this
                const windowHeight = document.body.clientHeight
                this.doData(this.showActivityData) // 使用数据
                // 获取最大高度避免数据过少，空格多
                // let heard = document.querySelector(".mobileActivity_heard");
                // let ins = document.querySelector(".mobileActivity_in");
                // console.log(heard, ins, 77777);
                this.checkDom('querySelector', '.mobileActivity_heard', (head) => {
                    this.checkDom('querySelector', '.mobileActivity_in', (ins) => {
                        console.log((head.offsetHeight + ins.offsetHeight) / 4)
                        doit(head.offsetHeight + ins.offsetHeight)
                    })
                })
                // return;
                const doit = (maxheights) => {
                    this.domMove = new moveWindow({
                        id: 'mobileActivity',
                        minHeight: that.useHeight,
                        maxHeight: maxheights || windowHeight / 2,
                        critical: maxheights / 4,
                        fn: function (res) {
                            that.height = +res.height
                            that.bottom = +res.height + 15
                            // console.log(+res.height, "=======");
                            if (res.state != 'on') {
                                that.openValue = res.state
                            }
                        }
                    })
                    this.domMove.init()
                    // console.log(this.domMove);
                    // 转移···添加点和线
                    const addressOur = this.changeData(
                        this.useData.query,
                        'addressname',
                        'address'
                    )
                    const lxOur = this.changeData(this.useData.query, 'lxname', 'lx')
                    // console.log(addressOur, lxOur);
                    that.$store.dispatch('MSET_DRAWALINELAYERMANY', [
                        lxOur,
                        addressOur,
                        this.useData.query,
                        function () {
                            that.domMove.opens(false, true)
                        }
                    ])
                }
            }
        }
        // new窗口对象
        const that = this;
        const windowHeight = document.body.clientHeight;
        this.doData(this.showActivityData); // 使用数据
        // 获取最大高度避免数据过少，空格多
        // let heard = document.querySelector(".mobileActivity_heard");
        // let ins = document.querySelector(".mobileActivity_in");
        // console.log(heard, ins, 77777);
        this.checkDom("querySelector", ".mobileActivity_heard", (head) => {
          this.checkDom("querySelector", ".mobileActivity_in", (ins) => {
            console.log((head.offsetHeight + ins.offsetHeight) / 4);
            doit(head.offsetHeight + ins.offsetHeight);
          });
        });
        // return;
        const doit = (maxheights) => {
          this.domMove = new moveWindow({
            id: "mobileActivity",
            minHeight: that.useHeight,
            maxHeight: maxheights || windowHeight / 2,
            critical: maxheights / 4,
            fn: function (res) {
              that.height = +res.height;
              that.bottom = +res.height + 15;
              // console.log(+res.height, "=======");
              if (res.state != "on") {
                that.openValue = res.state;
              }
            },
          });
          this.domMove.init();
          // console.log(this.domMove);
          // 转移···添加点和线
          const addressOur = this.changeData(
            this.useData.query,
            "addressname",
            "address"
          );
          const lxOur = this.changeData(this.useData.query, "lxname", "lx");
          // console.log(addressOur, lxOur);
          that.$store.dispatch("MSET_DRAWALINELAYERMANY", [
            lxOur,
            addressOur,
            this.useData.query,
            function () {
              that.domMove.opens(false, true);
            },
          ]);
        };
      }
    },
    mounted () { },
    methods: {
        inToInit () {
            // 初始化
            this.openValue = false
            this.height = this.useHeight
            this.bottom = this.useBottom
            for (const k in this.leftNavData) {
                this.leftNavData[k].flag = true
                this.leftNavData[k].img = this.leftNavData[k].checked
            }
  },
  mounted() {},
  methods: {
    inToInit() {
      // 初始化
      this.openValue = false;
      this.height = this.useHeight;
      this.bottom = this.useBottom;
      for (const k in this.leftNavData) {
        this.leftNavData[k].flag = true;
        this.leftNavData[k].img = this.leftNavData[k].checked;
      }
    },
    // 处理主数据
    doData(val) {
      const srcList = val.opendata.tpurl.split(",");
      this.useData = {
        data: val,
        url: srcList[0],
        srcList: srcList,
        smallData: [
          {
            lable: "主办方",
            value: val.opendata.sponsor,
          },
          {
            lable: "承办方",
            value: val.opendata.undertake,
          },
        ],
        detailedData: [
          {
            lable: "活动时间",
            value: val.opendata.time,
          },
          {
            lable: "活动详情",
            value: val.opendata.context,
          },
        ],
        query: {
          name: val.opendata.hdname,
          bgImg: val.opendata.tpurl,
          from: "活动",
          websiteUrl: val.opendata.websiteurl,
          telePhone: val.opendata.telephone,
          introduce: val.opendata.context,
          video: val.opendata.videourl,
          // buts: ["定位"],
          // 活动添加的字段
          addressname: val.opendata.addressname.split(";"),
          address: val.opendata.address.split(";"),
          lxname: val.opendata.lxname.split(";"),
          lx: val.opendata.lx.split(";"),
          lntLat: [
            val.opendata.address.split(";")[0].split(",")[0],
            val.opendata.address.split(";")[0].split(",")[1],
          ],
          panoramaurl: val.opendata.panoramaurl, // 全景
        },
        // 处理主数据
        doData (val) {
            const srcList = val.opendata.tpurl.split(',')
            this.useData = {
                data: val,
                url: srcList[0],
                srcList: srcList,
                smallData: [
                    {
                        lable: '主办方',
                        value: val.opendata.sponsor
                    },
                    {
                        lable: '承办方',
                        value: val.opendata.undertake
                    }
                ],
                detailedData: [
                    {
                        lable: '活动时间',
                        value: val.opendata.time
                    },
                    {
                        lable: '活动详情',
                        value: val.opendata.context
                    }
                ],
                query: {
                    name: val.opendata.hdname,
                    bgImg: val.opendata.tpurl,
                    from: '活动',
                    websiteUrl: val.opendata.websiteurl,
                    telePhone: val.opendata.telephone,
                    introduce: val.opendata.context,
                    video: val.opendata.videourl,
                    // buts: ["定位"],
                    // 活动添加的字段
                    addressname: val.opendata.addressname.split(';'),
                    address: val.opendata.address.split(';'),
                    lxname: val.opendata.lxname.split(';'),
                    lx: val.opendata.lx.split(';'),
                    lntLat: [
                        val.opendata.address.split(';')[0].split(',')[0],
                        val.opendata.address.split(';')[0].split(',')[1]
                    ],
                    panoramaurl: val.opendata.panoramaurl // 全景
                }
            }
        },
        // 启动监听事件
        init () {
            this.domMove.init()
        },
        // 关闭监听事件
        closeInit () {
            this.domMove.closeInit()
        },
        // 控制线路和点的显影
        mobileActivityCoutrolClick (item) {
            item.flag = !item.flag
            if (item.flag == true) {
                item.img = item.checked
            } else {
                item.img = item.normal
            }
            this.$store.commit('showLineOrPoint', {
                layer: item.layer,
                flag: item.flag
            })
        },
        changeData (data, name, value) {
            const arr = []
            for (const k in data[name]) {
                arr.push({
                    name: data[name][k],
                    value:
                        name == 'lxname'
                            ? data[value][k]
                                .split('(')[1]
                                .split(')')[0]
                                .split(',')
                                .join(';')
                                .split(' ')
                                .join(',')
                            : [+data[value][k].split(',')[0], +data[value][k].split(',')[1]]
                })
            }
            return arr
        },
        closeActivity () {
            this.$store.commit('set_showActivity', { state: false })
            if (this.domMove) {
                this.closeInit()
            }
            // 关闭路线和点的图层
            this.$store.commit('removePolylineMany')
            // 关闭随地图弹窗
            this.$store.dispatch('closeMobileWindowsDom')
            // 显示右侧栏
            this.$store.commit('SET_SeeAndNotSee', true)
        },
        checkDom (methods, name, fn) {
            //  声明定时器
            var timer = null
            //  检查dom是否执行完成
            function checkDom () {
                // let dom = that.$refs[name];
                const dom = document[methods](name)
                if (dom) {
                    //  执行dom加载完成后的操作
                    //  清除定时器
                    if (!timer) {
                        clearTimeout(timer)
                    }
                    if (fn) {
                        // 回调函数
                        fn(dom)
                    } else {
                        return dom
                    }
                } else {
                    //  自我调用
                    timer = setTimeout(checkDom, 100)
                }
            }
            //  首次执行
            checkDom()
      };
    },
    // 启动监听事件
    init() {
      this.domMove.init();
    },
    // 关闭监听事件
    closeInit() {
      this.domMove.closeInit();
    },
    // 控制线路和点的显影
    mobileActivityCoutrolClick(item) {
      item.flag = !item.flag;
      if (item.flag == true) {
        item.img = item.checked;
      } else {
        item.img = item.normal;
      }
      this.$store.commit("showLineOrPoint", {
        layer: item.layer,
        flag: item.flag,
      });
    },
    changeData(data, name, value) {
      const arr = [];
      for (const k in data[name]) {
        arr.push({
          name: data[name][k],
          value:
            name == "lxname"
              ? data[value][k]
                  .split("(")[1]
                  .split(")")[0]
                  .split(",")
                  .join(";")
                  .split(" ")
                  .join(",")
              : [+data[value][k].split(",")[0], +data[value][k].split(",")[1]],
        });
      }
      return arr;
    },
    closeActivity() {
      this.$store.commit("set_showActivity", { state: false });
      if (this.domMove) {
        this.closeInit();
      }
      // 关闭路线和点的图层
      this.$store.commit("removePolylineMany");
      // 关闭随地图弹窗
      this.$store.dispatch("closeMobileWindowsDom");
      // 显示右侧栏
      this.$store.commit("SET_SeeAndNotSee", true);
    },
    checkDom(methods, name, fn) {
      //  声明定时器
      var timer = null;
      //  检查dom是否执行完成
      function checkDom() {
        // let dom = that.$refs[name];
        const dom = document[methods](name);
        if (dom) {
          //  执行dom加载完成后的操作
          //  清除定时器
          if (!timer) {
            clearTimeout(timer);
          }
          if (fn) {
            // 回调函数
            fn(dom);
          } else {
            return dom;
          }
        } else {
          //  自我调用
          timer = setTimeout(checkDom, 100);
        }
    }
}
      }
      //  首次执行
      checkDom();
    },
  },
};
</script>

<style lang="scss">
#mobileActivity {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    // height: 50px;
    background-color: #fff;
    z-index: 999;
    transition: height 0.1s;
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  // height: 50px;
  background-color: #fff;
  z-index: 999;
  transition: height 0.1s;
  border-radius: 15px 15px 0 0;
  .mobileActivity_heard {
    height: 35px;
    border-radius: 15px 15px 0 0;
    .mobileActivity_heard {
        height: 35px;
        border-radius: 15px 15px 0 0;
        width: 100%;
        background-color: #409eff;
        color: #fff;
        border-bottom: 1px solid rgba($color: #acacac, $alpha: 0.5);
        box-shadow: 0 0px 10px -3px rgba($color: #acacac, $alpha: 0.5);
        .mobileActivity_title {
            width: 100%;
            height: 100%;
            line-height: 35px;
            text-indent: 1rem;
        }
        .mobileActivity_close {
            position: absolute;
            right: 5px;
            top: 5px;
            font-size: 25px;
        }
    width: 100%;
    background-color: #409eff;
    color: #fff;
    border-bottom: 1px solid rgba($color: #acacac, $alpha: 0.5);
    box-shadow: 0 0px 10px -3px rgba($color: #acacac, $alpha: 0.5);
    .mobileActivity_title {
      width: 100%;
      height: 100%;
      line-height: 35px;
      text-indent: 1rem;
    }
    .mobileActivity_in {
        width: 100%;
        height: auto;
        overflow: hidden;
        padding-bottom: 5px;
        .mobileActivity_insmall {
            background-color: #fff;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            .mobileActivity_insmallimg {
                width: 90px;
                height: 90px;
            }
            .mobileActivity_insmallxiangqing {
                width: calc(100% - 110px);
                height: 94px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                flex-direction: column;
                .mobileActivity_insmallxiangqingIn {
                    width: 100%;
                }
            }
        }
        .mobileActivity_detailed {
            background-color: rgba(202, 202, 202, 0.2);
            padding: 3px 0 0 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            .mobileActivity_detailedIn {
                background-color: #fff;
                box-sizing: border-box;
                width: 100%;
                padding: 5px;
                margin: 0 0 3px 0;
            }
        }
        .mobileActivity_insmallxiangqingIn_s {
            font-weight: 600;
        }
    .mobileActivity_close {
      position: absolute;
      right: 5px;
      top: 5px;
      font-size: 25px;
    }
  }
  .mobileActivity_in {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-bottom: 5px;
    .mobileActivity_insmall {
      background-color: #fff;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .mobileActivity_insmallimg {
        width: 90px;
        height: 90px;
      }
      .mobileActivity_insmallxiangqing {
        width: calc(100% - 110px);
        height: 94px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        .mobileActivity_insmallxiangqingIn {
          width: 100%;
        }
      }
    }
    .mobileActivity_detailed {
      background-color: rgba(202, 202, 202, 0.2);
      padding: 3px 0 0 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .mobileActivity_detailedIn {
        background-color: #fff;
        box-sizing: border-box;
        width: 100%;
        padding: 5px;
        margin: 0 0 3px 0;
      }
    }
    .mobileActivity_insmallxiangqingIn_s {
      font-weight: 600;
    }
  }
}

.notOpens {
    &::after {
        content: '';
        display: block;
        width: 20px;
        height: 4px;
        background-color: rgba(202, 202, 202, 1);
        position: absolute;
        top: -9px;
        left: calc(50% - 10px);
        border-radius: 5px;
    }
  &::after {
    content: "";
    display: block;
    width: 20px;
    height: 4px;
    background-color: rgba(202, 202, 202, 1);
    position: absolute;
    top: -9px;
    left: calc(50% - 10px);
    border-radius: 5px;
  }
}

.isOpens {
    &::after {
        content: '';
        display: block;
        width: 13px;
        height: 4px;
        background-color: rgba(202, 202, 202, 1);
        position: absolute;
        top: -9px;
        left: calc(50% - 12px);
        border-radius: 5px;
        transform: rotate(30deg);
    }
    &::before {
        content: '';
        display: block;
        width: 13px;
        height: 4px;
        background-color: rgba(202, 202, 202, 1);
        position: absolute;
        top: -9px;
        left: calc(50% - 4px);
        border-radius: 5px;
        transform: rotate(-30deg);
    }
  &::after {
    content: "";
    display: block;
    width: 13px;
    height: 4px;
    background-color: rgba(202, 202, 202, 1);
    position: absolute;
    top: -9px;
    left: calc(50% - 12px);
    border-radius: 5px;
    transform: rotate(30deg);
  }
  &::before {
    content: "";
    display: block;
    width: 13px;
    height: 4px;
    background-color: rgba(202, 202, 202, 1);
    position: absolute;
    top: -9px;
    left: calc(50% - 4px);
    border-radius: 5px;
    transform: rotate(-30deg);
  }
}
.mobileActivity_coutrol {
    position: fixed;
    bottom: 150px;
    left: 0px;
    z-index: 200;
  position: fixed;
  bottom: 150px;
  left: 0px;
  z-index: 200;
  background-color: #fff;
  border-radius: 0 17px 17px 0;
  transition: all 0.18s;
  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: 0 17px 17px 0;
    transition: all 0.18s;
    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;
    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;
        }
    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;
    }
  }
}
</style>