From b5ad10130f124e15c39f6da341f3d093aceda7a1 Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Mon, 10 Oct 2022 17:10:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E5=9F=BA=E7=A1=80=E8=AE=BE?=
 =?UTF-8?q?=E6=96=BD--=E5=B7=A6=E4=BE=A7=E6=A0=91=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E4=BB=A5=E5=8F=8A=E5=8F=96=E6=B6=88=E9=80=89?=
 =?UTF-8?q?=E4=B8=AD=EF=BC=88=E6=B2=A1=E5=8C=BA=E5=88=86=E8=A5=BF=E6=B5=B7?=
 =?UTF-8?q?=E5=B2=B8=E5=92=8C=E5=B8=82=E5=B1=80=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/detailsPageInfrastructureTree.vue    | 699 ++++++------------
 1 file changed, 231 insertions(+), 468 deletions(-)

diff --git a/front/src/views/home/detailsPageInfrastructureTree.vue b/front/src/views/home/detailsPageInfrastructureTree.vue
index 1e2a6875..0adb69d9 100644
--- a/front/src/views/home/detailsPageInfrastructureTree.vue
+++ b/front/src/views/home/detailsPageInfrastructureTree.vue
@@ -2,14 +2,7 @@
   <div class="wrapper">
     <div class="wrapper-title-left-tree" :key="showKey">
       <div v-for="item in treeData" :key="item.id" class="primaryNode">
-        <!-- <div v-if="!item.children || item.children.length == 0">
-          {{ item.title }}
-        </div> -->
-        <div
-          class="top"
-          @click="showBottom(item)"
-          :class="item.show ? 'topSelect' : ''"
-        >
+        <div class="top" @click="showBottom(item)" :class="item.show ? 'topSelect' : ''">
           {{ item.name }}
           ({{ item.channelCount }})
           <DownOutlined v-show="!item.show" />
@@ -17,28 +10,13 @@
         </div>
         <div class="bottom" v-show="item.show">
           <div v-for="val in item.children" :key="val.id" class="item">
-            <div
-              class="up"
-              :class="selectId == val.id ? 'select' : ''"
-              @click="showDown(item, val), onSelect(item, val)"
-            >
+            <div class="up" :class="selectId == val.id ? 'select' : ''"
+              @click="showDown(item, val), onSelect(item, val)">
               <div>
-                <svg
-                  t="1654068878091"
-                  class="icon"
-                  viewBox="0 0 1024 1024"
-                  version="1.1"
-                  xmlns="http://www.w3.org/2000/svg"
-                  p-id="2156"
-                  width="0.25rem"
-                  height="0.25rem"
-                  v-show="selectId == val.id"
-                >
-                  <path
-                    d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
-                    p-id="2157"
-                    fill="#0058e1"
-                  ></path>
+                <svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                  xmlns="http://www.w3.org/2000/svg" p-id="2156" width="0.25rem" height="0.25rem"
+                  v-show="selectId == val.id">
+                  <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157" fill="#0058e1"></path>
                 </svg>
                 <span class="name">{{ val.name }}({{ val.channelCount }})</span>
               </div>
@@ -49,30 +27,13 @@
               </span>
             </div>
             <div class="down" v-show="val.show">
-              <div
-                v-for="child in val.children"
-                :key="child.id"
-                class="child"
-                :class="selectId == child.id ? 'select2' : ''"
-                @click="onSelect(item, child, child)"
-              >
+              <div v-for="child in val.children" :key="child.id" class="child"
+                :class="selectId == child.id ? 'select2' : ''" @click="onSelect(item, child, child)">
                 <div>
-                  <svg
-                    t="1654068878091"
-                    class="icon"
-                    viewBox="0 0 1024 1024"
-                    version="1.1"
-                    xmlns="http://www.w3.org/2000/svg"
-                    p-id="2156"
-                    width="0.25rem"
-                    height="0.25rem"
-                    v-show="selectId == child.id"
-                  >
-                    <path
-                      d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
-                      p-id="2157"
-                      fill="#0058e1"
-                    ></path>
+                  <svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                    xmlns="http://www.w3.org/2000/svg" p-id="2156" width="0.25rem" height="0.25rem"
+                    v-show="selectId == child.id">
+                    <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157" fill="#0058e1"></path>
                   </svg>
                   <span class="name">
                     {{ child.name }}
@@ -84,407 +45,251 @@
           </div>
         </div>
       </div>
-      <!-- <a-directory-tree
-        class="draggable-tree"
-        block-node
-        :tree-data="treeData"
-        @select="onSelect"
-      ></a-directory-tree> -->
     </div>
   </div>
 </template>
 <script>
-  import { defineComponent, ref, watch } from 'vue'
-  import { getCameraAllOrgan } from '@/api/videoSurveillance'
-  import { getCameraInfoByAreaId } from '@/api/file'
-  import mybus from '@/myplugins/mybus'
-  import { useRouter } from 'vue-router'
-  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
-  import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
-  
-  export default defineComponent({
-    setup() {
-      const selectedKeys = ref([])
-      const checkedKeys = ref([])
-      const router = useRouter()
-      const fieldNames = {
-        children: 'children',
-        title: 'name',
+import { defineComponent, ref, watch } from 'vue'
+import { getCameraAllOrgan } from '@/api/videoSurveillance'
+import { getCameraInfoByAreaId } from '@/api/file'
+import mybus from '@/myplugins/mybus'
+import { useRouter } from 'vue-router'
+import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
+
+export default defineComponent({
+  setup() {
+    const router = useRouter()
+    const whoShow1 = ref(whoShow)
+    const showKey = ref(0)
+    const treeData = ref([])
+    const selectId = ref('')
+
+    // 初始化
+    const init = async () => {
+      treeData.value = []
+      console.log(
+        'router.currentRoute.value.query.select',
+        router.currentRoute.value.query.select
+      )
+      let select = router.currentRoute.value.query.select || DETAIL_PAGE_CONTENT_DEFAULT_TAB
+      if (select === '123') {
+        select = ''
       }
-      const whoShow1 = ref(whoShow)
-      const showKey = ref(0)
-      const treeData = ref([])
-      const init = () => {
-        treeData.value = []
-        console.log(
-          'router.currentRoute.value.query.select',
-          router.currentRoute.value.query.select
-        )
-        let select = router.currentRoute.value.query.select || DETAIL_PAGE_CONTENT_DEFAULT_TAB
-        if (select === '123') {
-          select = ''
-        }
-        console.log(
-          '获取url中的select=====================>',
-          router.currentRoute.value.query.select
-        )
-        if (select == '基础设施') {
-          if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
-            getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
-              (res) => {
-                treeData.value = res.data.data
-              }
-            )
-          } else {
-            getCameraInfoByAreaId({
-              areaId: '70be8c5b664f4bcf869d82f2e8335051',
-            }).then((res) => {
-              treeData.value = res.data.data
-            })
-          }
-          // selectDeptList({ type: select }).then((res) => {
-          //   // console.log('区划数据=========================>', res.data.data)
-          //   res.data.data.forEach((val) => {
-          //     if (val.type !== '全部能力目录') {
-          //       let obj = {
-          //         title: val.type,
-          //         total: val.total,
-          //         show: val.type === '市级' ? true : false,
-          //         select: false,
-          //         key: val.type,
-          //         children: [],
-          //       }
-          //       switch (val.type) {
-          //         case '市级':
-          //         case '其他':
-          //           generateChildren(val, obj)
-          //           break
-          //         case '区级':
-          //           generateChildren2(val, obj)
-          //           break
-          //       }
-          //       treeData.value.push(obj)
-          //     }
-          //   })
-          //   // 排序
-          //   const sortArr = ['全部能力目录', '市级', '区级', '企业', '其他']
-          //   treeData.value.sort((a, b) => {
-          //     return sortArr.indexOf(a.key) - sortArr.indexOf(b.key)
-          //   })
-          //   console.log('左侧树结构数据======================>', treeData.value)
-          //   showKey.value++
-          // })
-        }
-      }
-      mybus.on('getDeptList', () => {
-        init()
-      })
-      // 生成children
-      const generateChildren = (val, obj) => {
-        if (val.dataList.length > 0) {
-          val.dataList.forEach((child) => {
-            let children = {
-              title: child.deptName,
-              show: false,
-              select: false,
-              total: child.deptCount,
-              key: child.deptId,
-            }
-            obj.children.push(children)
-          })
-        }
-      }
-      // 区级特殊处理
-      const generateChildren2 = (val, obj) => {
-        if (val.dataList.length > 0) {
-          val.dataList.forEach((dis) => {
-            let children = {
-              title: dis.type,
-              total: dis.total,
-              show: false,
-              select: false,
-              key: dis.dataList[0].districtId,
-              children: [],
-            }
-            if (dis.dataList.length > 0) {
-              dis.dataList.forEach((child) => {
-                let children2 = {
-                  title: child.deptName,
-                  total: child.deptCount,
-                  show: false,
-                  select: false,
-                  key: child.deptId,
-                }
-                children.children.push(children2)
-              })
-            }
-            obj.children.push(children)
-          })
-        }
-      }
-      // const onSelect = (event, node, dragNode, dragNodesKeys) => {
-      //   console.log(event[0], node.node.children, dragNode, dragNodesKeys)
-      //   if (!node.node.children) {
-      //     mybus.emit('paramsGetResources', [event[0]])
-      //   } else {
-      //     let arr = []
-      //     switch (event[0]) {
-      //       case '全部能力目录':
-      //         mybus.emit('paramsGetResources', [])
-      //         break
-      //       case '区级':
-      //         node.node.children.forEach((dis) => {
-      //           dis.children.forEach((val) => {
-      //             arr.push(val.key)
-      //           })
-      //         })
-      //         mybus.emit('paramsGetResources', arr)
-      //         break
-      //       default:
-      //         node.node.children.forEach((val) => {
-      //           arr.push(val.key)
-      //         })
-      //         mybus.emit('paramsGetResources', arr)
-      //         break
-      //     }
-      //   }
-      // }
-      const selectId = ref('')
-      const onSelect = (item, val, child) => {
-        console.log('item, val, child', child)
-        mybus.emit('getCameraByParentId', val.id)
-        mybus.emit('getListByParentId', val.id)
+      console.log(
+        '获取url中的select=====================>',
+        router.currentRoute.value.query.select
+      )
+      if (select == '基础设施') {
+        let res = {};
         if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
-          getCameraAllOrgan({ parentId: val.id }).then((res) => {
-            treeData.value.map((treeDataItem, index) => {
-              if (item.id == treeDataItem.id) {
-                treeData.value[index].children.map((childItem, childIndex) => {
-                  if (childItem.id == val.id) {
-                    treeData.value[index].children[childIndex].children =
-                      res.data.data
-                  }
-                })
-                console.log('treeData.value.[index]', treeData.value[index])
-              }
-            })
-          })
+          res = await getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' })
         } else {
-          getCameraInfoByAreaId({
-            areaId: val.id,
-          }).then((res) => {
-            treeData.value.map((treeDataItem, index) => {
-              if (item.id == treeDataItem.id) {
-                treeData.value[index].children.map((childItem, childIndex) => {
-                  if (childItem.id == val.id) {
-                    treeData.value[index].children[childIndex].children =
-                      res.data.data
-                  }
-                })
-                console.log('treeData.value.[index]', treeData.value[index])
-              }
-            })
+          // 西海岸
+          res = await getCameraInfoByAreaId({
+            areaId: '70be8c5b664f4bcf869d82f2e8335051',
           })
         }
-        if (child) {
-          selectId.value = child.id
-        }
+        treeData.value = res.data && res.data.data || []
       }
-      watch(selectedKeys, () => {
-        console.log('selectedKeys', selectedKeys)
+    }
+    mybus.on('getDeptList', () => {
+      init()
+    })
+
+    const onSelect = async (item, val, child) => {
+      console.log('item--------onSelect---->', item);
+      console.log('val------onSelect------>', val);
+      console.log('child-----onSelect------->', child);
+      mybus.emit('getCameraByParentId', val.id)
+      mybus.emit('getListByParentId', val.id)
+      let res = {}
+      if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
+        res = await getCameraAllOrgan({ parentId: val.id })
+      } else {
+        // 西海岸
+        res = await getCameraInfoByAreaId({ areaId: val.id })
+      }
+      treeData.value.map((treeDataItem, index) => {
+        if (item.id == treeDataItem.id) {
+          treeData.value[index].children.map((childItem, childIndex) => {
+            if (childItem.id == val.id) {
+              treeData.value[index].children[childIndex].children =
+                res.data.data
+            }
+          })
+        }
       })
-      watch(checkedKeys, (val) => {
-        if (val.checked.length > 1) {
-          val.checked.halfChecked = val.checked.shift()
+      if (child) {
+        selectId.value = child.id
+      }
+    }
+
+    watch(selectId, (newVal) => {
+      if (newVal == '') {
+        mybus.emit('getCameraByParentId', '')
+        mybus.emit('getListByParentId', '')
+      }
+    })
+
+    const showBottom = async (item) => {
+      item.show = !item.show;
+      let res = {};
+      if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
+        res = await getCameraAllOrgan({ parentId: item.id })
+      } else {
+        // 西海岸
+        res = await getCameraInfoByAreaId({ areaId: item.id })
+      }
+
+      treeData.value.map((treeDataItem, index) => {
+        if (item.id == treeDataItem.id) {
+          treeData.value[index].children = res.data && res.data.data || []
+          console.log('treeData.value.[index]', treeData.value[index])
         }
-        console.log('onCheck', val)
       })
-      const value = ref('')
-      const onSearch = (searchValue) => {
-        console.log('use value', searchValue)
-        console.log('or use this.value', value.value.child)
-      }
-      // checkedKeys, checkedNodes, node, event
-      function xuanzeshijian(checkedKeys) {
-        checkedKeys.value.checked = []
-        checkedKeys.value.checked[0] =
-          checkedKeys.checked[checkedKeys.checked.length - 1]
-        // console.log('checkedKeys1', checkedNodes)
-        console.log('checkedKeys', checkedKeys)
-      }
-      let quxiaoshijian = ''
-      function dianjisousuo(selectedKeys, selectedNodes, node, event) {
-        if (quxiaoshijian == selectedNodes.node.id) {
-          quxiaoshijian = ''
-          mybus.emit('paramsGetResources', quxiaoshijian)
-        } else {
-          quxiaoshijian = selectedNodes.node.id
-          mybus.emit('paramsGetResources', selectedNodes.node.id.trim())
-        }
-        console.log(
-          'dianjisousuo',
-          selectedKeys,
-          'dianjisousuo',
-          selectedNodes,
-          'dianjisousuo',
-          node,
-          'dianjisousuo',
-          event
-        )
-      }
-      const showBottom = (item) => {
-        item.show = !item.show
-        if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
-          getCameraAllOrgan({ parentId: item.id }).then((res) => {
-            treeData.value.map((treeDataItem, index) => {
-              if (item.id == treeDataItem.id) {
-                treeData.value[index].children = res.data.data
-                console.log('treeData.value.[index]', treeData.value[index])
-              }
-            })
-          })
-        } else {
-          getCameraInfoByAreaId({
-            areaId: item.id,
-          }).then((res) => {
-            treeData.value.map((treeDataItem, index) => {
-              if (item.id == treeDataItem.id) {
-                treeData.value[index].children = res.data.data
-                console.log('treeData.value.[index]', treeData.value[index])
-              }
-            })
-          })
+    }
+    const showDown = (item, val) => {
+      selectId.value = val.id
+      console.log('item---showDown--------->', item);
+      console.log('val----showDown-------->', val);
+      if (item.children) {
+        val.show = !val.show;
+        // 取消选中
+        if (!val.show) {
+          selectId.value = ''
         }
       }
-      const showDown = (item, val) => {
-        console.log('showDown', val)
-        if (item.children) {
-          val.show = !val.show
-        }
-      }
-      return {
-        value,
-        onSearch,
-        selectedKeys,
-        checkedKeys,
-        fieldNames,
-        treeData,
-        dianjisousuo,
-        quxiaoshijian,
-        xuanzeshijian,
-        showKey,
-        onSelect,
-        showBottom,
-        showDown,
-        selectId,
-      }
-    },
-    beforeUnmount() {
-      mybus.off('getDeptList')
-      console.log('getDeptList销毁~~~~~~~~~~~~~~~~~~~')
-    },
-    components: {
-      UpOutlined,
-      DownOutlined,
-    },
-  })
+    }
+    return {
+      treeData,
+      showKey,
+      onSelect,
+      showBottom,
+      showDown,
+      selectId,
+    }
+  },
+  beforeUnmount() {
+    mybus.off('getDeptList')
+    console.log('getDeptList销毁~~~~~~~~~~~~~~~~~~~')
+  },
+  components: {
+    UpOutlined,
+    DownOutlined,
+  },
+})
 </script>
 <style lang="less" scoped>
-  // .wrapper {
-  //   height: 100%;
-  //   width: 100%;
-  //   padding: .2rem;
-  //   .wrapper-title {
-  //     height: .28rem;
-  //     width: 100%;
-  //     margin-bottom: .25rem;
-  //     .wrapper-title-name {
-  //       width: 100%;
-  //       height: .17rem;
-  //       font-size: .18rem;
-  //       font-family: 'AlibabaPuHuiTiR';
-  //       font-weight: 400;
-  //       color: #0058e1;
-  //       line-height: .34rem;
-  //     }
-  //     .wrapper-title-yangshi {
-  //       width: .4rem;
-  //       height: .03rem;
-  //       background: #0058e1;
-  //       border-radius: .02rem;
-  //       margin-top: .2rem;
-  //       margin-left: .15rem;
-  //     }
-  //   }
-  //   .wrapper-title-left-tree {
-  //     overflow-y: auto;
-  //     height: 80%;
-  //     width: 2.1rem;
-  //   }
-  //   .wrapper-title-left-tree::-webkit-scrollbar {
-  //     width: .05rem;
-  //     height: .05rem;
-  //   }
-  //   .wrapper-title-left-tree::-webkit-scrollbar-thumb {
-  //     border-radius: .05rem;
-  //     background-color: #0058e1;
-  //   }
-  //   .wrapper-title-left-tree::-webkit-scrollbar-track {
-  //     background-color: transparent;
-  //   }
-  //   :deep(.ant-tree-treenode) {
-  //     margin-top: .1rem;
-  //     height: .23rem;
-  //     overflow: hidden;
-  //     text-overflow: ellipsis;
-  //     display: -webkit-box;
-  //     -webkit-line-clamp: 1;
-  //     -webkit-box-orient: vertical;
-  //   }
-  // }
-  .primaryNode {
-    .top {
-      width: 100%;
+.primaryNode {
+  .top {
+    width: 100%;
+    height: 0.4rem;
+    background: rgba(0, 135, 225, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 0.1rem;
+    margin-top: 0.08rem;
+  }
+
+  .top:hover {
+    cursor: pointer;
+    // 0058e1 透明度 0.5
+    background: rgba(0, 88, 225, 0.8);
+    color: white;
+
+    :deep(.anticon) {
+      color: white;
+    }
+  }
+
+  .topSelect {
+    background: #0058e1;
+    color: white;
+
+    :deep(.anticon) {
+      color: white;
+    }
+  }
+
+  .bottom {
+    width: 100%;
+    background: rgba(244, 245, 248, 0.8);
+    padding: 0 0.1rem;
+
+    // margin-bottom: .08rem;
+    .up {
+      cursor: pointer;
       height: 0.4rem;
-      background: rgba(0, 135, 225, 0.1);
       display: flex;
       justify-content: space-between;
       align-items: center;
+      border-top: 0.01rem solid #ccc;
       padding: 0 0.1rem;
-      margin-top: 0.08rem;
-    }
-    .top:hover {
-      cursor: pointer;
-      // 0058e1 透明度 0.5
-      background: rgba(0, 88, 225, 0.8);
-      color: white;
-      :deep(.anticon) {
-        color: white;
+
+      &>div {
+        display: flex;
+        justify-content: flex-start;
+      }
+
+      .name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
       }
     }
-    .topSelect {
-      background: #0058e1;
-      color: white;
-      :deep(.anticon) {
-        color: white;
+
+    .up:hover {
+      .name {
+        color: #0058e1;
+        font-weight: 600;
+      }
+
+      span {
+        color: #0058e1;
+        font-weight: 600;
       }
     }
-    .bottom {
+
+    .select {
+      padding: 0 0.1rem 0 0;
+
+      .name {
+        width: 1.7rem;
+        color: #0058e1 !important;
+        font-weight: 600;
+      }
+
+      span {
+        color: #0058e1;
+        font-weight: 600;
+      }
+    }
+
+    .item:nth-of-type(1) .up {
+      border-top: none;
+    }
+
+    .down {
       width: 100%;
-      background: rgba(244, 245, 248, 0.8);
-      padding: 0 0.1rem;
-      // margin-bottom: .08rem;
-      .up {
+
+      .child {
         cursor: pointer;
         height: 0.4rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
-        border-top: 0.01rem solid #ccc;
         padding: 0 0.1rem;
-        & > div {
+
+        &>div {
           display: flex;
           justify-content: flex-start;
         }
+
         .name {
           overflow: hidden;
           text-overflow: ellipsis;
@@ -494,76 +299,34 @@
           word-break: break-all;
         }
       }
-      .up:hover {
+
+      .child:hover {
         .name {
           color: #0058e1;
           font-weight: 600;
         }
+
         span {
           color: #0058e1;
           font-weight: 600;
         }
       }
-      .select {
-        padding: 0 0.1rem 0 0;
+
+      .select2 {
         .name {
           width: 1.7rem;
           color: #0058e1;
           font-weight: 600;
         }
+
         span {
           color: #0058e1;
           font-weight: 600;
         }
-      }
-      .item:nth-of-type(1) .up {
-        border-top: none;
-      }
-      .down {
-        width: 100%;
-        .child {
-          cursor: pointer;
-          height: 0.4rem;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 0 0.1rem;
-          & > div {
-            display: flex;
-            justify-content: flex-start;
-          }
-          .name {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
-            word-break: break-all;
-          }
-        }
-        .child:hover {
-          .name {
-            color: #0058e1;
-            font-weight: 600;
-          }
-          span {
-            color: #0058e1;
-            font-weight: 600;
-          }
-        }
-        .select2 {
-          .name {
-            width: 1.7rem;
-            color: #0058e1;
-            font-weight: 600;
-          }
-          span {
-            color: #0058e1;
-            font-weight: 600;
-          }
-          padding: 0 0.1rem 0 0;
-        }
+
+        padding: 0 0.1rem 0 0;
       }
     }
   }
+}
 </style>