From a22aa1086eeef39a26cc161326ce09cd183185ea Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Fri, 04 Mar 2022 15:57:47 +0800
Subject: [PATCH] 3.3 1.自定义标签,退出后自动清除 2.自定义标签,转换二维码的数据格式ok,移动端对接二维码ok, 3.自定义标签点击移动到指定位置 ok 4.面板自适应高度 4.更换定位依赖,自定义标签扫码入移动端可以定位并显示路线

---
 src/components/leftNav/index.vue |  679 +++++++++++++++++++++++++++++++-------------------------
 1 files changed, 373 insertions(+), 306 deletions(-)

diff --git a/src/components/leftNav/index.vue b/src/components/leftNav/index.vue
index c828f40..0997990 100644
--- a/src/components/leftNav/index.vue
+++ b/src/components/leftNav/index.vue
@@ -1,154 +1,158 @@
 <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>
-
-import { getLifeList, getMonitorList, getSceneList, getWayList, getTagList } from '@/api/pc/leftNav/index'
+import {
+  getLifeList,
+  getMonitorList,
+  getSceneList,
+  getWayList,
+  getTagList,
+} from "@/api/pc/leftNav/index";
 
 export default {
-    name: 'leftNav',
-    computed: {},
-    data () {
-        return {
-            leftNavData: [
-                {
-                    flag: true,
-                    label: '标签',
-                    img: '/img/leftnav/tag-checked.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/monitor.png',
-                    normal: '/img/leftnav/monitor.png',
-                    checked: '/img/leftnav/monitor-checked.png',
-                    layer: 'monitorLayer'
-                },
-                // {
-                //     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,
-            monitorLayer: 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 = 115.86271917 + Math.random() * 0.01
-                const lat = 28.73615593 + Math.random() * 0.02
-                list.push(new this.DC.Position(lng, lat, 0))
-            }
-            return list
+  name: "leftNav",
+  computed: {},
+  data() {
+    return {
+      leftNavData: [
+        {
+          flag: true,
+          label: "标签",
+          img: "/img/leftnav/tag-checked.png",
+          normal: "/img/leftnav/tag.png",
+          checked: "/img/leftnav/tag-checked.png",
+          layer: "tagLayer",
         },
-        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
-            }
+        {
+          flag: false,
+          label: "道路",
+          img: "/img/leftnav/way.png",
+          normal: "/img/leftnav/way.png",
+          checked: "/img/leftnav/way-checked.png",
+          layer: "wayLayer",
         },
-        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.HtmlLayer('sceneLayer')
-            viewer.addLayer(this.sceneLayer)
-            this.monitorLayer = new this.DC.HtmlLayer('monitorLayer')
-            viewer.addLayer(this.monitorLayer)
-            this.aedLayer = new this.DC.VectorLayer('aedLayer')
-            viewer.addLayer(this.aedLayer)
-            this.parkLayer = new this.DC.HtmlLayer('parkLayer')
-            viewer.addLayer(this.parkLayer)
-            this.comeLayer = new this.DC.VectorLayer('comeLayer')
-            viewer.addLayer(this.comeLayer)
+        {
+          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/monitor.png",
+          normal: "/img/leftnav/monitor.png",
+          checked: "/img/leftnav/monitor-checked.png",
+          layer: "monitorLayer",
+        },
+        // {
+        //     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,
+      monitorLayer: 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 = 115.86271917 + Math.random() * 0.01;
+        const lat = 28.73615593 + Math.random() * 0.02;
+        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) {
+      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.HtmlLayer("sceneLayer");
+      viewer.addLayer(this.sceneLayer);
+      this.monitorLayer = new this.DC.HtmlLayer("monitorLayer");
+      viewer.addLayer(this.monitorLayer);
+      this.aedLayer = new this.DC.VectorLayer("aedLayer");
+      viewer.addLayer(this.aedLayer);
+      this.parkLayer = new this.DC.HtmlLayer("parkLayer");
+      viewer.addLayer(this.parkLayer);
+      this.comeLayer = new this.DC.VectorLayer("comeLayer");
+      viewer.addLayer(this.comeLayer);
 
-            getTagList().then(res => {
-                res.data.data.forEach(item => {
-                    const divIcon = new this.DC.DivIcon(
-                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
-                        `
+      getTagList().then((res) => {
+        res.data.data.forEach((item) => {
+          const divIcon = new this.DC.DivIcon(
+            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+            `
                         <div class="tag-entitys-box">
                             <div class="tag-content">
                                 ${item.mechanismname}
@@ -158,18 +162,26 @@
                             </div>
                         </div>
                     `
-                    )
+          );
+          //订阅事件
+          divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
+            console.log(item);
+            that.openPopups({
+              lng: e.overlay.position.lng,
+              lat: e.overlay.position.lat,
+              item: item,
+            });
+          });
+          this.tagLayer.addOverlay(divIcon);
+        });
+        // this.tagLayer.show = false
+      });
 
-                    this.tagLayer.addOverlay(divIcon)
-                })
-                // this.tagLayer.show = false
-            })
-
-            getWayList().then(res => {
-                res.data.data.forEach(item => {
-                    const divIcon = new this.DC.DivIcon(
-                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
-                        `
+      getWayList().then((res) => {
+        res.data.data.forEach((item) => {
+          const divIcon = new this.DC.DivIcon(
+            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+            `
                         <div  class="way-entitys-box">
                             <div  class="way-title" style="border: white 1px solid; font-size: 0.875rem; background: #0066ff;  width: 18px; line-height: 14px; padding: 6px 2px 6px 2px; color: white; text-align: center;">
                                  ${item.roadname}
@@ -179,112 +191,141 @@
                             </div>
                         </div>
                     `
-                    )
-                    this.wayLayer.addOverlay(divIcon)
-                })
-                this.wayLayer.show = false
-            })
+          );
+          this.wayLayer.addOverlay(divIcon);
+        });
+        this.wayLayer.show = false;
+      });
 
-            getMonitorList().then(res => {
-                res.data.data.forEach(item => {
-                    const divIcon = new this.DC.DivIcon(
-                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
-                        `
+      getMonitorList().then((res) => {
+        res.data.data.forEach((item) => {
+          const divIcon = new this.DC.DivIcon(
+            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+            `
                         <div class="monitor-entitys-box">
                             <div>${item.mechanismname}</div>
                             <img class="monitor-entitys-box" src="/img/leftnav/map-monitor.png" alt="">
                         </div>
                         `
-                    )
-                    divIcon.attrParams = item
-                    this.monitorLayer.addOverlay(divIcon)
+          );
+          divIcon.attrParams = item;
+          this.monitorLayer.addOverlay(divIcon);
 
-                    divIcon.on(that.DC.MouseEventType.CLICK, e => {
-                        this.$store.commit('SET_PANORAMAPOPUP', false)
-                        this.$store.commit('SET_DETAILSPOPUP', false)
-                        this.$store.commit('SET_STATENAME', e.overlay.attrParams.mechanismname)
-                        this.$store.commit('SET_MONITORURL', e.overlay.attrParams.videourl)
-                        // eslint-disable-next-line new-cap
-                        var positions = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position.fromArray([Number(item.jd), Number(item.wd), 0, 0, -90, 0]))
-                        this.viewer.scene.globe.depthTestAgainstTerrain = false
-                        // eslint-disable-next-line no-unused-vars
-                        var monitor = new this.DC.PanoramaBox(this.viewer, {
-                            domId: 'MonitorBox',
-                            position: [
-                                positions
-                            ]
-                        })
+          divIcon.on(that.DC.MouseEventType.CLICK, (e) => {
+            this.$store.commit("SET_PANORAMAPOPUP", false);
+            this.$store.commit("SET_DETAILSPOPUP", false);
+            this.$store.commit(
+              "SET_STATENAME",
+              e.overlay.attrParams.mechanismname
+            );
+            this.$store.commit("SET_MONITORURL", e.overlay.attrParams.videourl);
+            // eslint-disable-next-line new-cap
+            var positions = this.DC.Transform.transformWGS84ToCartesian(
+              new this.DC.Position.fromArray([
+                Number(item.jd),
+                Number(item.wd),
+                0,
+                0,
+                -90,
+                0,
+              ])
+            );
+            this.viewer.scene.globe.depthTestAgainstTerrain = false;
+            // eslint-disable-next-line no-unused-vars
+            var monitor = new this.DC.PanoramaBox(this.viewer, {
+              domId: "MonitorBox",
+              position: [positions],
+            });
 
-                        this.$store.commit('SET_MONITORPOPUP', true)
-                    })
-                })
+            this.$store.commit("SET_MONITORPOPUP", true);
+          });
+        });
 
-                this.monitorLayer.show = false
-            })
+        this.monitorLayer.show = false;
+      });
 
-            getSceneList().then(res => {
-                res.data.data.forEach(item => {
-                    const divIcon = new this.DC.DivIcon(
-                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
-                        `
+      getSceneList().then((res) => {
+        res.data.data.forEach((item) => {
+          const divIcon = new this.DC.DivIcon(
+            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+            `
                         <div class="scene-entitys-box">
                             <div>${item.mechanismname}</div>
                             <img src="/img/leftnav/map-panorama.png" alt="">
                         </div>
                         `
-                    )
-                    divIcon.attrParams = item
-                    this.sceneLayer.addOverlay(divIcon)
+          );
+          divIcon.attrParams = item;
+          this.sceneLayer.addOverlay(divIcon);
 
-                    divIcon.on(that.DC.MouseEventType.CLICK, e => {
-                        this.$store.commit('SET_DETAILSPOPUP', false)
-                        this.$store.commit('SET_MONITORPOPUP', false)
-                        this.$store.commit('SET_STATENAME', e.overlay.attrParams.mechanismname)
-                        this.$store.commit('SET_PANORAMAURL', e.overlay.attrParams.panoramaurl)
-                        // eslint-disable-next-line new-cap
-                        var positions = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position.fromArray([Number(item.jd), Number(item.wd), 0, 0, -90, 0]))
-                        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
-                            ]
-                        })
+          divIcon.on(that.DC.MouseEventType.CLICK, (e) => {
+            this.$store.commit("SET_DETAILSPOPUP", false);
+            this.$store.commit("SET_MONITORPOPUP", false);
+            this.$store.commit(
+              "SET_STATENAME",
+              e.overlay.attrParams.mechanismname
+            );
+            this.$store.commit(
+              "SET_PANORAMAURL",
+              e.overlay.attrParams.panoramaurl
+            );
+            // eslint-disable-next-line new-cap
+            var positions = this.DC.Transform.transformWGS84ToCartesian(
+              new this.DC.Position.fromArray([
+                Number(item.jd),
+                Number(item.wd),
+                0,
+                0,
+                -90,
+                0,
+              ])
+            );
+            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_PANORAMAPOPUP', true)
-                    })
-                })
+            this.$store.commit("SET_PANORAMAPOPUP", true);
+          });
+        });
 
-                this.sceneLayer.show = false
-            })
+        this.sceneLayer.show = false;
+      });
 
-            getLifeList({ lifetype: 9 }).then(res => {
-                res.data.data.forEach(item => {
-                    const label = new this.DC.Label(new that.DC.Position(Number(item.jd), Number(item.wd), 0), item.mechanismname)
-                    label.setStyle({
-                        fillColor: this.DC.Color.CRIMSON,
-                        style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
-                        outlineColor: that.DC.Color.WHITE, // 边框颜色
-                        outlineWidth: 8, // 边框大小,
-                        font: '14px sans-serif',
-                        pixelOffset: { x: 0, y: -24 }
-                    })
-                    this.aedLayer.addOverlay(label)
+      getLifeList({ lifetype: 9 }).then((res) => {
+        res.data.data.forEach((item) => {
+          const label = new this.DC.Label(
+            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+            item.mechanismname
+          );
+          label.setStyle({
+            fillColor: this.DC.Color.CRIMSON,
+            style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
+            outlineColor: that.DC.Color.WHITE, // 边框颜色
+            outlineWidth: 8, // 边框大小,
+            font: "14px sans-serif",
+            pixelOffset: { x: 0, y: -24 },
+          });
+          this.aedLayer.addOverlay(label);
 
-                    const billboard = new this.DC.Billboard(new that.DC.Position(Number(item.jd), Number(item.wd), 0), '/img/leftnav/map-aed.png')
-                    billboard.size = [20, 20]
+          const billboard = new this.DC.Billboard(
+            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+            "/img/leftnav/map-aed.png"
+          );
+          billboard.size = [20, 20];
 
-                    this.aedLayer.addOverlay(billboard)
-                })
-                this.aedLayer.show = false
-            })
+          this.aedLayer.addOverlay(billboard);
+        });
+        this.aedLayer.show = false;
+      });
 
-            getLifeList({ lifetype: 11 }).then(res => {
-                res.data.data.forEach(item => {
-                    const divIcon = new this.DC.DivIcon(
-                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
-                        `
+      getLifeList({ lifetype: 11 }).then((res) => {
+        res.data.data.forEach((item) => {
+          const divIcon = new this.DC.DivIcon(
+            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+            `
                         <div class="park-entitys-box">
                             <div class="park-title" alt="${item.mechanismname}">
                             </div>
@@ -298,83 +339,109 @@
                             </div>
                         </div>
                     `
-                    )
-                    this.parkLayer.addOverlay(divIcon)
-                })
-                this.parkLayer.show = false
-            })
+          );
+          this.parkLayer.addOverlay(divIcon);
+        });
+        this.parkLayer.show = false;
+      });
 
-            getLifeList({ lifetype: 12 }).then(res => {
-                res.data.data.forEach(item => {
-                    const label = new that.DC.Label(new that.DC.Position(Number(item.jd), Number(item.wd), 0), item.mechanismname)
-                    label.setStyle({
-                        fillColor: that.DC.Color.FUCHSIA,
-                        style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
-                        outlineColor: that.DC.Color.WHITE, // 边框颜色
-                        outlineWidth: 8, // 边框大小,
-                        font: '14px sans-serif',
-                        pixelOffset: { x: 0, y: -40 }
-                    })
-                    that.comeLayer.addOverlay(label)
+      getLifeList({ lifetype: 12 }).then((res) => {
+        res.data.data.forEach((item) => {
+          const label = new that.DC.Label(
+            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+            item.mechanismname
+          );
+          label.setStyle({
+            fillColor: that.DC.Color.FUCHSIA,
+            style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
+            outlineColor: that.DC.Color.WHITE, // 边框颜色
+            outlineWidth: 8, // 边框大小,
+            font: "14px sans-serif",
+            pixelOffset: { x: 0, y: -40 },
+          });
+          that.comeLayer.addOverlay(label);
 
-                    const billboard = new that.DC.Billboard(new that.DC.Position(Number(item.jd), Number(item.wd), 0), '/img/leftnav/map-activity.png')
-                    billboard.size = [20, 20]
-                    billboard.setStyle({
-                        pixelOffset: { x: 0, y: -16 }
-                    })
+          const billboard = new that.DC.Billboard(
+            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+            "/img/leftnav/map-activity.png"
+          );
+          billboard.size = [20, 20];
+          billboard.setStyle({
+            pixelOffset: { x: 0, y: -16 },
+          });
 
-                    that.comeLayer.addOverlay(billboard)
-                })
-                this.comeLayer.show = false
-            })
-        }
-    }
-}
+          that.comeLayer.addOverlay(billboard);
+        });
+        this.comeLayer.show = false;
+      });
+    },
+    openPopups(value) {
+      var popup = new this.DC.DivForms(this.viewer, {
+        domId: "divFormsDomBox",
+        position: [
+          this.DC.Transform.transformWGS84ToCartesian(
+            new this.DC.Position(
+              Number(value.lng),
+              Number(value.lat),
+              Number(value.alt || 0)
+            )
+          ),
+        ],
+      });
+      this.$store.dispatch("setOurDataInPoput", value);
+      this.$store.dispatch("pcFlyView", {
+        jd: value.lng,
+        wd: value.lat,
+        viewer: this.viewer,
+      });
+    },
+  },
+};
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .left-nav {
-    position: fixed;
-    top: 160px;
-    right: 30px;
-    // bottom: 20px;
-    // left: 0;
-    z-index: 1;
-    ul {
-        // display: flex;
-        li {
-            // margin: 0 8px;
-            margin-bottom: 12px;
-            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: 160px;
+  right: 30px;
+  // bottom: 20px;
+  // left: 0;
+  z-index: 1;
+  ul {
+    // display: flex;
+    li {
+      // margin: 0 8px;
+      margin-bottom: 12px;
+      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>

--
Gitblit v1.9.3