From ce9ae368e42abf92a39f73654e301e680f2b4394 Mon Sep 17 00:00:00 2001
From: seatonwan9 <seatonwan9@163.com>
Date: 星期六, 29 五月 2021 11:17:07 +0800
Subject: [PATCH] 新增环境风险源图表信息

---
 src/components/LayerController/logic/EnvironmentRisk.js |   13 
 src/components/LayerController/logic/RiskSource.js      |   10 
 public/assets/environmentRiskPoint.json                 |   24 +-
 src/components/base-page/RiskSource/RiskSourceIndex.vue |  100 +++++++++++
 src/components/base-page/RiskSource/PublicTabs.vue      |  120 +++++++++++++
 src/components/base-page/RiskSource/PublicTable.vue     |  246 +++++++++++++++++++++++++++
 6 files changed, 489 insertions(+), 24 deletions(-)

diff --git a/public/assets/environmentRiskPoint.json b/public/assets/environmentRiskPoint.json
index a8da368..7a65236 100644
--- a/public/assets/environmentRiskPoint.json
+++ b/public/assets/environmentRiskPoint.json
@@ -1,7 +1,7 @@
 [
   [
     {
-      "no": 1,
+      "no": 0,
       "company": "鎵瓙鐭冲寲",
       "plate": "鐐兼补鏉垮潡",
       "unitname": "鑺崇儍鍘傘�佺偧娌瑰巶",
@@ -10,10 +10,10 @@
       "after": "R4(115.48)M1(10)E1",
       "Longitude": 118.7936111111,
       "Latitude": 32.2583305556,
-      "iconType": 1
+      "riskLevel": 1
     },
     {
-      "no": 2,
+      "no": 0,
       "company": "鎵瓙鐭冲寲",
       "plate": "鍖栧伐鏉垮潡",
       "unitname": "姘村巶",
@@ -22,7 +22,7 @@
       "after": "R3(25)M1(10)E1",
       "Longitude": 118.8174111111,
       "Latitude": 32.2429611111,
-      "iconType": 1
+      "riskLevel": 1
     }
   ],[
       {
@@ -35,10 +35,10 @@
         "after": "R3(90)M2(25)E1",
         "Longitude": 113.36571,
         "Latitude": 29.54677,
-        "iconType": 2
+        "riskLevel": 2
       },
       {
-        "no": 2,
+        "no": 1,
         "company": "闀垮箔鐐煎寲",
         "plate": "鍖栧伐鏉垮潡",
         "unitname": "娓彛閮�",
@@ -47,11 +47,11 @@
         "after": "Q3(29)M3(30)E1",
         "Longitude": 113.2917,
         "Latitude": 29.60036,
-        "iconType": 2
+        "riskLevel": 2
       }
   ],[
       {
-        "no": 1,
+        "no": 2,
         "company": "闀垮箔鐐煎寲",
         "plate": "鍖栧伐鏉垮潡",
         "unitname": "娓彛閮�",
@@ -60,7 +60,7 @@
         "after": "Q3(19)M3(30)E1",
         "Longitude": 113.27935,
         "Latitude": 29.59832,
-        "iconType": 3
+        "riskLevel": 3
       },
       {
         "no": 2,
@@ -72,11 +72,11 @@
         "after": "R3(2.1)M3(30)E2",
         "Longitude": 113.28155,
         "Latitude": 29.59842,
-        "iconType": 3
+        "riskLevel": 3
       }
   ],[
       {
-        "no": 1,
+        "no": 3,
         "company": "涓煩鐭冲寲",
         "plate": "鐐兼补鏉垮潡",
         "unitname": "鐐兼补浜岄儴",
@@ -85,7 +85,7 @@
         "after": "R3M2E1",
         "Longitude": 114.44016,
         "Latitude": 30.65305,
-        "iconType": 4
+        "riskLevel": 4
       }
   ]
 ]
diff --git a/src/components/LayerController/logic/EnvironmentRisk.js b/src/components/LayerController/logic/EnvironmentRisk.js
index ae50da3..677e670 100644
--- a/src/components/LayerController/logic/EnvironmentRisk.js
+++ b/src/components/LayerController/logic/EnvironmentRisk.js
@@ -9,7 +9,6 @@
 const echarts = require('echarts/lib/echarts')
 
 module.exports = function () {
-  let animalService = null
   // 鐜舰缁熻鍥炬暟缁�
   let riskLayerGroup = null
 
@@ -18,7 +17,7 @@
    * @param L leaflet瀵硅薄
    */
   this.init = async (layer, L) => {
-    animalService = new AnimalService({
+    this.animalService = new AnimalService({
       L: L,
       layer: layer
     })
@@ -33,7 +32,7 @@
       riskLayerGroup.remove()
       riskLayerGroup = null
     }
-    riskLayerGroup = animalService.L.featureGroup().addTo(animalService.layer)
+    riskLayerGroup = this.animalService.L.featureGroup().addTo(this.animalService.layer)
     const result = await mapApi.getEnvironmentRisk()
     const features = result.features
     for (let i = 0; i < features.length; i++) {
@@ -46,16 +45,16 @@
       if (distract !== '闀挎睙娌跨嚎') {
         continue
       }
-      animalService.L.marker([coordinates[1], coordinates[0]], {
-        icon: animalService.L.divIcon({
+      this.animalService.L.marker([coordinates[1], coordinates[0]], {
+        icon: this.animalService.L.divIcon({
           className: '',
           iconAnchor: [15, 45],
           iconSize: [40, 40],
           html: '<div style="width: 40px; height: 40px; background-color: rgba(255,255,255,1); position: relative; border-radius: 50%;"></div>'
         })
       }).addTo(riskLayerGroup)
-      animalService.L.marker([coordinates[1], coordinates[0]], {
-        icon: animalService.L.divIcon({
+      this.animalService.L.marker([coordinates[1], coordinates[0]], {
+        icon: this.animalService.L.divIcon({
           className: '',
           iconAnchor: [30, 60],
           iconSize: [70, 70],
diff --git a/src/components/LayerController/logic/RiskSource.js b/src/components/LayerController/logic/RiskSource.js
index 2f1f882..6384554 100644
--- a/src/components/LayerController/logic/RiskSource.js
+++ b/src/components/LayerController/logic/RiskSource.js
@@ -2,7 +2,7 @@
  * 鐜椋庨櫓婧�
  */
 // 淇℃伅缁勪欢
-const RiskSourceIndex = require('../../../components/base-page/WasteSolid/WasteSolidIndex.vue').default
+const RiskSourceIndex = require('../../base-page/RiskSource/RiskSourceIndex.vue').default
 const riskRed = '/assets/images/map/environmentRisk/risk_red.png'
 const riskSandybrown = '/assets/images/map/environmentRisk/risk_sandybrown.png'
 const riskYellow = '/assets/images/map/environmentRisk/risk_yellow.png'
@@ -28,7 +28,7 @@
     const data = result[config.level] // 姝ゅ绾у埆瀵瑰簲data鏁扮粍涓嬫爣锛屼綔涓哄弬鏁板彇鏁版爣璇�
     for (let i = 0; i < data.length; i++) {
       const postion = [data[i].Latitude, data[i].Longitude] // 鍧愭爣
-      const iconUrl = this.riskIconUrl(data[i].iconType) // 椋庨櫓婧愬浘鏍�
+      const iconUrl = this.riskIconUrl(data[i].riskLevel) // 椋庨櫓婧愬浘鏍�
       const marker = L.marker(postion, {
         totransferData: data[i],
         icon: L.icon({
@@ -55,9 +55,9 @@
    * @param e
    */
   this.clickListener = (e) => {
-    // 鐐瑰嚮marker鐨刾ulse()鍏夋尝
+    // 鑴夊啿鏁堟灉
     this.animalService.pulseEffect(e.latlng)
-    /* flyTo()寮瑰嚭妗嗗钩绉讳簨浠� */
+    // 淇℃伅寮圭獥骞崇Щ
     setPanTo(e.latlng, 200)
     // 寮规鏍囬
     const title = e.layer.options.totransferData.Name
@@ -66,7 +66,7 @@
         comp: RiskSourceIndex, // 缁勪欢
         parent: this, // 鐖剁粍浠�
         data: { // 浼犻�掔殑鍙傛暟
-          storagePlaceId: e.layer.options.totransferData.StoragePlaceId
+          riskSourceId: e.layer.options.totransferData.no
         }
       },
       title: title // 鏍囬
diff --git a/src/components/base-page/RiskSource/PublicTable.vue b/src/components/base-page/RiskSource/PublicTable.vue
new file mode 100644
index 0000000..b71482e
--- /dev/null
+++ b/src/components/base-page/RiskSource/PublicTable.vue
@@ -0,0 +1,246 @@
+<template>
+  <div class="slotChildTable">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <div class="main-table">
+      <div class="">
+        <ul>
+          <li>椋庨櫓璇勪及杩囩▼</li>
+          <li>鍒濆璇勪环缁撴灉:{{ riskSourceAssess }}</li>
+        </ul>
+      </div>
+      <div>
+        <table border="1">
+          <tr>
+            <th colspan="2">椋庨櫓鎺у埗</th>
+            <th>璇勪及鎸囨爣</th>
+            <th>鍒嗗��</th>
+          </tr>
+          <tr>
+            <td rowspan="3" colspan="2">瀹夊叏绠$悊锛�25鍒嗭級</td>
+            <td>閲嶅ぇ鎴栬緝澶х敓浜у畨鍏ㄤ簨鏁呴殣鎮f湭瀹屾垚鏁存敼鐨勮25鍒嗐��</td>
+            <td rowspan="3">25</td>
+          </tr>
+          <tr>
+            <td>涓�鑸敓浜у畨鍏ㄤ簨鏁呴殣鎮f湭瀹屾垚鏁存敼鐨勶紝姣忎竴椤硅10鍒嗭紝璁版弧25鍒嗕负姝€��</td>
+          </tr>
+          <tr>
+            <td>涓嶅瓨鍦ㄤ笂杩伴棶棰樼殑璁�0鍒嗐��</td>
+          </tr>
+          <tr>
+            <td rowspan="3" colspan="2">璁惧璐ㄩ噺绠$悊锛�25鍒嗭級</td>
+            <td>瀛樺湪涓嬪垪浠绘剰涓�椤圭殑璁�25鍒嗭細
+              锛�1锛夋湭鎸夎瀹氳繘琛岃澶囪鏂芥娴嬨�佹楠岀殑锛�
+              锛�2锛夋娴嬬粨鏋滀笉鑳芥弧瓒宠澶囪鏂借川閲忚姹傜殑锛�
+              锛�3锛夋湭鎸夎璁℃爣鍑嗗缓璁剧殑锛�
+              锛�4锛変娇鐢ㄧ殑璁惧璁炬柦绛夌骇涓嶆弧瓒宠姹傜殑銆�
+            </td>
+            <td rowspan="3">10</td>
+          </tr>
+          <tr>
+            <td>瀛樺湪涓嬪垪鎯呭喌鐨勶紝姣忛」璁�10鍒嗭紝璁版弧25鍒嗕负姝細
+              锛�1锛夎澶囪鏂借秴鏈熶娇鐢ㄤ笖鏈粡杩囪瘎浼扮殑锛�
+              锛�2锛夎澶囪鏂介檷绛夌骇浣跨敤鏈粡璇勪及鐨勶紱
+              锛�3锛夎璁″彉鏇存湭缁忎富绠¢儴闂ㄦ壒鍑嗙殑銆�
+            </td>
+          </tr>
+          <tr>
+            <td>涓嶅瓨鍦ㄤ笂杩伴棶棰樼殑璁�0鍒嗐��</td>
+          </tr>
+          <tr>
+            <td rowspan="9">鐜椋庨櫓闃叉帶鎺柦鏈夋晥鎬э紙50鍒嗭級</td>
+            <td rowspan="2">浜嬫晠绱ф�ュ叧鏂帾鏂斤紙15鍒嗭級</td>
+            <td>鐜椋庨櫓婧愪笉鍏峰鏈夋晥鐨勪簨鏁呯揣鎬ュ叧鏂帾鏂界殑锛堢鍚堢揣鎬ュ叧鏂椂鏁堣锛夎15鍒嗐��</td>
+            <td rowspan="2">15</td>
+          </tr>
+          <tr>
+            <td>鐜椋庨櫓婧愬叿澶囨湁鏁堢殑浜嬫晠绱ф�ュ叧鏂帾鏂界殑锛堢鍚堢揣鎬ュ叧鏂椂鏁堣姹傦級璁�0鍒嗐��</td>
+          </tr>
+          <tr>
+            <td rowspan="3">寤鸿椤圭洰鐜椋庨櫓闃叉帶瑕佹眰钀藉疄锛�10鍒嗭級</td>
+            <td>鏃犱簨鏁呴闄╃墿璐ㄥ缃帾鏂借15鍒嗐��</td>
+            <td rowspan="3">10</td>
+          </tr>
+          <tr>
+            <td>瀛樺湪浠ヤ笅鎯呭喌鐨勶紝姣忛」璁�5鍒嗭紝璁版弧15鍒嗕负姝細
+              锛�1锛変簳鍦烘湭鎸夎姹傝鎺掓按鐩戞帶姹犵殑锛�
+              锛�2锛変簳鍦烘湭鎸夎姹傝鍥村牥鐨勶紱
+              锛�3锛夊瓨鍦ㄤ袱涓強浠ヤ笂闆ㄦ按鎺掓斁鍙g殑銆�
+            </td>
+          </tr>
+          <tr>
+            <td>涓嶅瓨鍦ㄤ笂杩伴棶棰樼殑璁�0鍒嗐��</td>
+          </tr>
+          <tr>
+            <td rowspan="2">寤鸿椤圭洰鐜椋庨櫓闃叉帶瑕佹眰钀藉疄锛�10鍒嗭級</td>
+            <td>寤鸿椤圭洰鐜褰卞搷璇勪环鍙婂叾鎵瑰鎻愬嚭鐨勭幆澧冮闄╅槻鎺ф帾鏂戒笉钀藉疄鐨勮10鍒嗐��</td>
+            <td rowspan="2">0</td>
+          </tr>
+          <tr>
+            <td>涓嶅瓨鍦ㄤ笂杩伴棶棰樼殑璁�0鍒嗐��</td>
+          </tr>
+          <tr>
+            <td rowspan="2">鐜椋庨櫓婧愪簨鏁呯幇鍦哄缃柟妗堬紙10鍒嗭級</td>
+            <td>瀛樺湪浠ヤ笅鎯呭喌鐨勶紝姣忛」璁�5鍒嗭紝璁版弧10鍒嗕负姝細
+              锛�1锛夋棤鐜椋庨櫓婧愪簨鏁呭缃柟妗堢殑鎴栫幆澧冮闄╂簮浜嬫晠澶勭疆鏂规鏃犵幆淇濆唴瀹圭殑锛�
+              锛�2锛夋湭鎸夎姹傚紑灞曟紨缁冨苟璁板綍鐨勶紱
+              锛�3锛夋湭鎸夎姹傝繘琛屽妗堢殑銆�
+            </td>
+            <td rowspan="2">5</td>
+          </tr>
+          <tr>
+            <td>涓嶅瓨鍦ㄤ笂杩伴棶棰樼殑璁�0鍒嗐��</td>
+          </tr>
+        </table>
+      </div>
+      <el-table :data="riskSourceDetail" style="width: 100%" height="200px" :row-class-name="tableRowClassName">
+        <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
+                         :label="item.label" :show-overflow-tooltip="true"></el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import mapApi from '@/api/mapApi'
+
+export default {
+  name: 'PublicTable',
+  data () {
+    return {
+      riskSourceDetail: [],
+      riskSourceAssess: '鏍规嵁椋庨櫓婧愬懆杈圭幆澧冮闄╁彈浣�3绉嶇被鍨嬶紝鎸夌収鐜椋庨櫓鐗╄川閲�(Q/R)銆佺幆澧冮闄╂帶鍒舵按骞�(M)鐭╅樀锛岀‘瀹氱幆澧冮闄╃瓑绾�',
+      listLabel: [
+        {
+          label: '搴忓彿',
+          prop: 'no'
+        },
+        {
+          label: '鍚嶇О',
+          prop: 'riskname'
+        },
+        {
+          label: '璇勪及绛夌骇',
+          prop: 'riskLevel'
+        },
+        {
+          label: '绛夌骇鐗瑰緛',
+          prop: 'after'
+        },
+        {
+          label: 'Q鍊�',
+          prop: 'riskLevel'
+        },
+        {
+          label: 'M鍊�',
+          prop: 'riskLevel'
+        },
+        {
+          label: 'E鍊�',
+          prop: 'riskLevel'
+        }
+      ]
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    async refsRiskDataTable (param) {
+      // 姝ゅ鎺ュ彛涓烘牴鎹闄╂簮ID鑾峰彇椋庨櫓婧愯瘎浼版暟鎹紙鏆傛椂涓烘ā鎷熸暟鎹級
+      const result = await mapApi.getEnvironmentRiskPoint(param)
+      this.riskSourceDetail = result[param.riskSourceId]
+    },
+    // 闅旇棰滆壊璁剧疆
+    tableRowClassName ({
+      row,
+      rowIndex
+    }) {
+      if (rowIndex % 2 === 0) {
+        return 'warning-row'
+      } else if (rowIndex % 2 === 1) {
+        return 'success-row'
+      }
+      return ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+/deep/ .el-table thead tr {
+  color: #02a6b5 !important;
+  //.el-table .has-gutter tr th .cell {
+  //  //color: #fff; 435
+  //}
+}
+
+/deep/ .el-table td {
+  border-bottom: none !important;
+}
+
+/deep/ .el-table .has-gutter tr th {
+  border: none;
+}
+
+/deep/ .el-table th.is-leaf {
+  border-bottom: none !important;
+}
+
+/deep/ .el-table td {
+  height: 30px !important;
+  line-height: 30px !important;
+}
+
+/deep/ .el-table tbody tr:hover > td {
+  background: none !important
+}
+
+.slotChildTable {
+  position: relative;
+  background: rgba(33, 41, 69, 0.9);
+
+  .main-table {
+    border: 1px #396d83 solid;
+  }
+}
+
+.slotChildTable span {
+  padding: 6px;
+  border-style: solid;
+  border-color: #02a6b5;
+}
+
+.slotChildTable span:nth-child(1) {
+  position: absolute;
+  left: -1px;
+  top: -1px;
+  border-width: 1px 0 0 1px;
+}
+
+.slotChildTable span:nth-child(2) {
+  position: absolute;
+  right: -1px;
+  top: -1px;
+  border-width: 1px 1px 0 0;
+}
+
+.slotChildTable span:nth-child(3) {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  border-width: 0 1px 1px 0;
+}
+
+.slotChildTable span:nth-child(4) {
+  position: absolute;
+  left: -1px;
+  bottom: -1px;
+  border-width: 0 0 1px 1px;
+}
+
+</style>
diff --git a/src/components/base-page/RiskSource/PublicTabs.vue b/src/components/base-page/RiskSource/PublicTabs.vue
new file mode 100644
index 0000000..b1beb91
--- /dev/null
+++ b/src/components/base-page/RiskSource/PublicTabs.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="slotChildTabs">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <div class="tabs-content">
+      <ul>
+        <li>椋庨櫓鍚嶇О:{{ riskSourceBaseInfo.riskname }}</li>
+        <li>椋庨櫓绾у埆:{{ riskSourceBaseInfo.riskLevel }}</li>
+        <li>椋庨櫓鎻忚堪:{{ riskSourceBaseInfo.depiction }}</li>
+        <li class="lastli"></li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import mapApi from '@/api/mapApi'
+
+export default {
+  name: 'PublicTabs',
+  data () {
+    return {
+      riskSourceBaseInfo: []
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      // this.refsDataTabs()
+    })
+  },
+  methods: {
+    async refsRiskDataTabs (param) {
+      // 姝ゅ鎺ュ彛涓烘牴鎹闄╂簮ID鑾峰彇椋庨櫓婧愬熀鏈俊鎭紙鏆傛椂涓烘ā鎷熸暟鎹級
+      const result = await mapApi.getEnvironmentRiskPoint(param)
+      this.riskSourceBaseInfo = result[param.riskSourceId][0]
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+.slotChildTabs {
+  position: relative;
+  margin-bottom: 0.1rem;
+  background-color: @background-color;
+
+  .tabs-content {
+    font-size: 0.06rem;
+    font-weight: normal;
+    padding: 0.04rem 0;
+    border: 1px solid #396d83;
+
+    ul {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      flex-wrap: wrap;
+
+      li {
+        margin-bottom: 0.04rem;
+        text-align: center;
+        min-width: 30%;
+        background-color: #243a55;
+        color: #00d0f9;
+        border-radius: 0.02rem;
+        font-size: 0.08rem;
+        line-height: 0.09rem;
+        padding: 0.03rem .5%;
+      }
+
+      .lastli {
+        visibility: hidden
+      }
+    }
+  }
+}
+
+.slotChildTabs span:nth-child(1) {
+  position: absolute;
+  left: -1px;
+  top: -1px;
+  padding: 6px;
+  border-style: solid;
+  border-color: #02a6b5;
+  border-width: 1px 0 0 1px;
+}
+
+.slotChildTabs span:nth-child(2) {
+  position: absolute;
+  right: -1px;
+  top: -1px;
+  padding: 6px;
+  border-style: solid;
+  border-color: #02a6b5;
+  border-width: 1px 1px 0 0;
+}
+
+.slotChildTabs span:nth-child(3) {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  padding: 6px;
+  border-style: solid;
+  border-color: #02a6b5;
+  border-width: 0 1px 1px 0;
+}
+
+.slotChildTabs span:nth-child(4) {
+  position: absolute;
+  left: -1px;
+  bottom: -1px;
+  padding: 6px;
+  border-style: solid;
+  border-color: #02a6b5;
+  border-width: 0 0 1px 1px;
+}
+</style>
diff --git a/src/components/base-page/RiskSource/RiskSourceIndex.vue b/src/components/base-page/RiskSource/RiskSourceIndex.vue
new file mode 100644
index 0000000..11b0a01
--- /dev/null
+++ b/src/components/base-page/RiskSource/RiskSourceIndex.vue
@@ -0,0 +1,100 @@
+<template>
+  <public-sector>
+    <template v-slot:tabs>
+      <public-tabs ref='refsRiskTabsData'></public-tabs>
+    </template>
+    <template v-slot:publicPart>
+      <public-table ref="refsRiskTableData"></public-table>
+    </template>
+<!--    <template v-slot:video>-->
+<!--      <public-video></public-video>-->
+<!--    </template>-->
+  </public-sector>
+</template>
+
+<script>
+
+import PublicTabs from '@components/base-page/RiskSource/PublicTabs'
+import PublicTable from '@components/base-page/RiskSource/PublicTable'
+// import PublicVideo from '@components/base-page/PublicVideo'
+import PublicSector from '@components/base-page/PublicSector'
+
+export default {
+  name: 'RiskSourceIndex',
+  props: ['riskSourceId'],
+  components: {
+    PublicSector,
+    PublicTabs,
+    PublicTable
+    // PublicVideo
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.refsData()
+    })
+  },
+  data () {
+    return {}
+  },
+  methods: {
+    refsData () {
+      const param = {
+        riskSourceId: this.riskSourceId
+      }
+      this.$refs.refsRiskTabsData.refsRiskDataTabs(param)
+      this.$refs.refsRiskTableData.refsRiskDataTable(param)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.public-bounced {
+  z-index: 2000;
+  position: absolute;
+  top: 35%;
+  left: 20%;
+
+  .public-bounced-title {
+    cursor: move;
+    height: 0.1rem;
+    padding: 10px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    span {
+      color: #f4f7ff;
+      margin: 0 15px;
+      font-size: 14px;
+    }
+
+    i {
+      color: #C0C4CC;
+      margin: 0 15px;
+      font-size: 22px;
+      cursor: pointer;
+    }
+
+    i:hover {
+      color: #00fff6;
+    }
+  }
+
+  .public-bounced-content {
+    //padding: 0.1rem;
+    display: flex;
+    //align-items: center;
+    //justify-content: space-around;
+
+    .public-bounced-content-left {
+      //width: 4.8rem;
+    }
+
+    .public-bounced-content-right {
+      //width: 3rem;
+      margin-left: 0.1rem;
+    }
+  }
+}
+</style>

--
Gitblit v1.8.0