feat: 资产管理-概览 修复

src/views/assetManagement/assetOverView.vue

+<template>
+  <div id="sylog-container" class="realTime-container">
+    <div style="padding: 10px;text-align: right">
+      <el-button type="primary" @click="refresh">刷新</el-button>
+      <el-button id="fullScreen" type="primary">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
+    </div>
+    <div class="placeholder" />
+    <div class="app-container-realTime">
+      <el-row :gutter="10">
+        <el-col :span="6">
+          <el-card>
+            <el-row :gutter="10">
+              <el-col :span="12">
+                <div id="echarts-one" class="span_1">
+                  <div id="dataCharts_one" ref="chart_one" style="height: 230px" />
+                </div>
+                <div style="width: 100%;text-align: center">
+                  <el-button type="primary">资产总数</el-button>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div style="width: 100%;font-size: 14px;margin-bottom: 3px;margin-top: 50px">
+                  <span>资产总数</span>
+                  <span style="float: right">181个</span>
+                </div>
+                <el-progress :percentage="100" :show-text="false" style="margin-bottom: 15px"></el-progress>
+                <div style="width: 100%;font-size: 14px">
+                  <span>在用</span>
+                  <span style="float: right">22个</span>
+                </div>
+                <el-progress :percentage="12" :show-text="false"></el-progress>
+                <div style="width: 100%;font-size: 14px;margin-bottom: 10px">
+                  <span>12.15%</span>
+                </div>
+                <div style="width: 100%;font-size: 14px">
+                  <span>闲置</span>
+                  <span style="float: right">0个</span>
+                </div>
+                <el-progress :percentage="0" :show-text="false"></el-progress>
+                <div style="width: 100%;font-size: 14px;margin-bottom: 10px">
+                  <span>0%</span>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card>
+            <el-row :gutter="10">
+              <el-col :span="12">
+                <div id="echarts-two" class="span_1">
+                  <div id="dataCharts_two" ref="chart_one" style="height: 230px" />
+                </div>
+                <div style="width: 100%;text-align: center">
+                  <el-button type="primary">故障总数</el-button>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div style="width: 100%;font-size: 14px;margin-bottom: 3px;margin-top: 50px">
+                  <span>故障总数</span>
+                  <span style="float: right">10个</span>
+                </div>
+                <el-progress :percentage="100" :show-text="false" style="margin-bottom: 15px"></el-progress>
+                <div style="width: 100%;font-size: 14px">
+                  <span>已处理</span>
+                  <span style="float: right">4个</span>
+                </div>
+                <el-progress :percentage="40" :show-text="false"></el-progress>
+                <div style="width: 100%;font-size: 14px;margin-bottom: 10px">
+                  <span>40.00%</span>
+                </div>
+                <div style="width: 100%;font-size: 14px">
+                  <span>未处理</span>
+                  <span style="float: right">6个</span>
+                </div>
+                <el-progress :percentage="60" :show-text="false"></el-progress>
+                <div style="width: 100%;font-size: 14px;margin-bottom: 10px">
+                  <span>60.00%</span>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card>
+            <el-row :gutter="10">
+              <el-col :span="12">
+                <div id="echarts-three" class="span_1">
+                  <div id="dataCharts_three" ref="chart_one" style="height: 230px" />
+                </div>
+                <div style="width: 100%;text-align: center">
+                  <el-button type="primary">报修总数</el-button>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div style="width: 100%;font-size: 14px;margin-bottom: 3px;margin-top: 50px">
+                  <span>报修总数</span>
+                  <span style="float: right">3个</span>
+                </div>
+                <el-progress :percentage="66.67" :show-text="false" style="margin-bottom: 15px"></el-progress>
+                <div style="width: 100%;font-size: 14px">
+                  <span>已处理</span>
+                  <span style="float: right">2个</span>
+                </div>
+                <el-progress :percentage="66.67" :show-text="false"></el-progress>
+                <div style="width: 100%;font-size: 14px;margin-bottom: 10px">
+                  <span>66.67%</span>
+                </div>
+                <div style="width: 100%;font-size: 14px">
+                  <span>未处理</span>
+                  <span style="float: right">1个</span>
+                </div>
+                <el-progress :percentage="33.33" :show-text="false"></el-progress>
+                <div style="width: 100%;font-size: 14px;margin-bottom: 10px">
+                  <span>33.33%</span>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card>
+            <el-row :gutter="10">
+              <el-col :span="12">
+                <div id="echarts-four" class="span_1">
+                  <div id="dataCharts_four" ref="chart_one" style="height: 230px" />
+                </div>
+                <div style="width: 100%;text-align: center">
+                  <el-button type="primary">维修到期总数</el-button>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div style="width: 100%;font-size: 14px;margin-bottom: 3px;margin-top: 50px">
+                  <span>资产总数</span>
+                  <span style="float: right">6个</span>
+                </div>
+                <el-progress :percentage="33.33" :show-text="false" style="margin-bottom: 15px"></el-progress>
+                <div style="width: 100%;font-size: 14px">
+                  <span>已处理</span>
+                  <span style="float: right">2个</span>
+                </div>
+                <el-progress :percentage="33.33" :show-text="false"></el-progress>
+                <div style="width: 100%;font-size: 14px;margin-bottom: 10px">
+                  <span>33.33%</span>
+                </div>
+                <div style="width: 100%;font-size: 14px">
+                  <span>未处理</span>
+                  <span style="float: right">4个</span>
+                </div>
+                <el-progress :percentage="66.67" :show-text="false"></el-progress>
+                <div style="width: 100%;font-size: 14px;margin-bottom: 10px">
+                  <span>66.67%</span>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <el-collapse>
+        <el-collapse-item title="服务器(174)" name="1">
+          <el-card style="width: 250px">
+            <el-row :gutter="10">
+              <el-col :span="8">
+                <el-icon class="el-icon-refrigerator" style="font-size: 40px" />
+              </el-col>
+              <el-col :span="16">
+                <span>服务器(174)</span>
+                <div style="width: 100%">
+                  <el-button size="small" @click="toAdd">新增</el-button>
+                  <el-button size="small" @click="toList">清单</el-button>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-collapse-item>
+        <el-collapse-item title="物联(1)" name="2">
+          <el-card style="width: 250px">
+            <el-row :gutter="10">
+              <el-col :span="8">
+                <el-icon class="el-icon-refrigerator" style="font-size: 40px" />
+              </el-col>
+              <el-col :span="16">
+                <span>物联(1)</span>
+                <div style="width: 100%">
+                  <el-button size="small" @click="toAdd">新增</el-button>
+                  <el-button size="small" @click="toList">清单</el-button>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-collapse-item>
+        <el-collapse-item title="网络(3)" name="3">
+          <el-card style="width: 250px">
+            <el-row :gutter="10">
+              <el-col :span="8">
+                <el-icon class="el-icon-refrigerator" style="font-size: 40px" />
+              </el-col>
+              <el-col :span="16">
+                <span>网络(3)</span>
+                <div style="width: 100%">
+                  <el-button size="small" @click="toAdd">新增</el-button>
+                  <el-button size="small" @click="toList">清单</el-button>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-collapse-item>
+        <el-collapse-item title="dvr(0)" name="4">
+          <el-card style="width: 250px">
+            <el-row :gutter="10">
+              <el-col :span="8">
+                <el-icon class="el-icon-refrigerator" style="font-size: 40px" />
+              </el-col>
+              <el-col :span="16">
+                <span>dvr(0)</span>
+                <div style="width: 100%">
+                  <el-button size="small" @click="toAdd">新增</el-button>
+                  <el-button size="small" @click="toList">清单</el-button>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-collapse-item>
+      </el-collapse>
+
+      <el-dialog :visible.sync="open" title="添加报告" width="700px">
+        <el-form label-width="110px">
+          <el-form-item label="报告标题">
+            <el-input />
+          </el-form-item>
+          <el-form-item label="每页显示报告数">
+            <el-input />
+          </el-form-item>
+          <el-form-item label="选择设备列表">
+            <div class="equipmentDiv">
+              <el-tree
+                :data="treeData"
+                show-checkbox
+                node-key="id"
+                :default-expanded-keys="[2, 3]"
+                :default-checked-keys="[5]"
+              />
+            </div>
+          </el-form-item>
+          <el-form-item label="选择监测点类型">
+            <span style="font-weight: bold;width: 100%">监测点类型</span>
+            <br>
+            <el-select />
+            <br>
+            <span style="font-weight: bold">监测指标</span>
+            <br>
+            <el-select placeholder="请选择" />
+          </el-form-item>
+        </el-form>
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="open = false">取消</el-button>
+          <el-button type="primary" @click="open = false">确定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import screenfull from 'screenfull'
+import * as echarts from 'echarts'
+
+export default {
+  name: 'Sylog',
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 总条数
+      total: 0,
+      // 表格数据
+      list: [],
+      // 是否显示弹出层
+      open: false,
+      // 表单参数
+      form: {},
+      // 表单参数
+      isScreen: false,
+      // 查询参数
+      queryParams: {
+        page: 1,
+        rows: 10,
+        status: 1,
+        startTime: '',
+        endTime: '',
+        ipAddress: '',
+        logContent: ''
+      },
+      currentTab: '1',
+      data: [
+        {
+          path: '路径：设备列表\\\\本机容器\\网络设备\\常用网络设备\\光环新网',
+          monitorObject: '',
+          monitorName: 'NetWork CPU',
+          cpuRate: '1.000'
+        },
+        {
+          path: '路径：设备列表\\\\本机容器\\网络设备\\常用网络设备\\光环新网',
+          monitorObject: '总部24F-机柜1-31U-23F出口核心路由器',
+          monitorName: '',
+          cpuRate: '5.000'
+        },
+        {
+          path: '路径：设备列表\\本机容器\\网络设备\\常用网络设备\\光环新网',
+          monitorObject: '西安交换出口',
+          monitorName: 'NetWork CPU',
+          cpuRate: '1.000'
+        },
+        {
+          path: '路径：设备列表\\本机容器\\网络设备\\常用网络设备\\光环新网',
+          monitorObject: '核心交换_192.168.6.155',
+          monitorName: 'NetWork CPU',
+          cpuRate: '4.000'
+        },
+        {
+          path: '路径：设备列表\\本机容器\\网络设备\\常用网络设备\\光环新网',
+          monitorObject: '1网段虚拟设备',
+          monitorName: 'NetWork CPU',
+          cpuRate: '2.000'
+        },
+        {
+          path: '路径：设备列表\\本机容器\\网络设备\\常用网络设备\\光环新网',
+          monitorObject: '核心交换机主',
+          monitorName: 'NetWork CPU',
+          cpuRate: '6.000'
+        },
+        {
+          path: '路径：设备列表\\本机容器\\网络设备\\常用网络设备\\光环新网',
+          monitorObject: '24F-机柜2-',
+          monitorName: 'NetWork CPU',
+          cpuRate: '1.000'
+        },
+        {
+          path: '路径：设备列表\\本机容器\\网络设备\\常用网络设备\\光环新网',
+          monitorObject: '24F-机柜7-40U-电信出口路由器',
+          monitorName: 'NetWork CPU',
+          cpuRate: '8.000'
+        },
+        {
+          path: '路径：设备列表\\本机容器\\网络设备\\常用网络设备\\光环新网',
+          monitorObject: '总部24F-机柜2-37U-去外网联通的交',
+          monitorName: 'NetWork CPU',
+          cpuRate: '6.000'
+        },
+        {
+          path: '路径：设备列表\\本机容器\\网络设备\\常用网络设备\\光环新网',
+          monitorObject: '3网段-10.1.1',
+          monitorName: 'NetWork CPU',
+          cpuRate: '2.000'
+        }
+      ],
+      initialData: [
+        {
+          name: 'cpu使用率',
+          max: '29.000',
+          min: '0.000',
+          average: '14.021'
+        },
+        {
+          name: '内存使用率',
+          max: '77.000',
+          min: '0.000',
+          average: '34.021'
+        },
+        {
+          name: '显存使用率',
+          max: '55.000',
+          min: '0.000',
+          average: '24.021'
+        },
+        {
+          name: '网络使用率',
+          max: '33.000',
+          min: '0.000',
+          average: '55.021'
+        },
+        {
+          name: '磁盘使用率',
+          max: '55.000',
+          min: '0.000',
+          average: '5.021'
+        },
+        {
+          name: '风扇转速',
+          max: '777.000',
+          min: '0.000',
+          average: '666.021'
+        },
+        {
+          name: 'cpu温度',
+          max: '456.000',
+          min: '0.000',
+          average: '55.021'
+        },
+        {
+          name: 'cpu频率',
+          max: '29.000',
+          min: '0.000',
+          average: '14.021'
+        },
+        {
+          name: '磁盘读写速度',
+          max: '1000.000',
+          min: '0.000',
+          average: '800.021'
+        },
+        {
+          name: '访问数',
+          max: '29.000',
+          min: '0.000',
+          average: '14.021'
+        }
+      ],
+      treeData: [{
+        id: 1,
+        label: '本机容器',
+        children: [{
+          id: 4,
+          label: '虚拟化平台',
+          children: [{
+            id: 9,
+            label: '虚拟设备'
+          }, {
+            id: 10,
+            label: '三级 1-1-2'
+          }]
+        }]
+      }, {
+        id: 2,
+        label: '服务器硬件',
+        children: [{
+          id: 5,
+          label: '云打印服务器'
+        }, {
+          id: 6,
+          label: '服务器'
+        }]
+      }, {
+        id: 3,
+        label: '一级 3',
+        children: [{
+          id: 7,
+          label: '二级 3-1'
+        }, {
+          id: 8,
+          label: '二级 3-2'
+        }]
+      }]
+    }
+  },
+  /** 路由离开前存储筛选条件*/
+  beforeRouteLeave(to, from, next) {
+    this.$store.dispatch('searchSave/searchParamsSet', {
+      path: this.$route.path,
+      param: {
+        ...this.queryParams
+      }
+    })
+    next()
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {
+    this.handleExpand()
+    this.genderStatistics1()
+    this.genderStatistics2()
+    this.genderStatistics3()
+    this.genderStatistics4()
+    window.onresize = () => {
+      this.isScreen = screenfull.isFullscreen
+    }
+    var elementResizeDetectorMaker = require('element-resize-detector')
+    var erd = elementResizeDetectorMaker()
+    var that = this
+    erd.listenTo(document.getElementById('echarts-two'), function(element) {
+      var width = element.offsetWidth
+      var height = element.offsetHeight
+      self.tableHeight = height // 将监听到的宽高进行赋值
+      self.tableWidth = width
+      that.$nextTick(function() {
+        console.log('Size: ' + width + 'x' + height)
+        // 使echarts尺寸重置
+        echarts.init(document.getElementById('dataCharts_two')).resize()
+      })
+    })
+    erd.listenTo(document.getElementById('echarts-one'), function(element) {
+      var width = element.offsetWidth
+      var height = element.offsetHeight
+      self.tableHeight = height // 将监听到的宽高进行赋值
+      self.tableWidth = width
+      that.$nextTick(function() {
+        console.log('Size: ' + width + 'x' + height)
+        // 使echarts尺寸重置
+        echarts.init(document.getElementById('dataCharts_one')).resize()
+      })
+    })
+    erd.listenTo(document.getElementById('echarts-three'), function(element) {
+      var width = element.offsetWidth
+      var height = element.offsetHeight
+      self.tableHeight = height // 将监听到的宽高进行赋值
+      self.tableWidth = width
+      that.$nextTick(function() {
+        console.log('Size: ' + width + 'x' + height)
+        // 使echarts尺寸重置
+        echarts.init(document.getElementById('dataCharts_three')).resize()
+      })
+    })
+    erd.listenTo(document.getElementById('echarts-four'), function(element) {
+      var width = element.offsetWidth
+      var height = element.offsetHeight
+      self.tableHeight = height // 将监听到的宽高进行赋值
+      self.tableWidth = width
+      that.$nextTick(function() {
+        console.log('Size: ' + width + 'x' + height)
+        // 使echarts尺寸重置
+        echarts.init(document.getElementById('dataCharts_four')).resize()
+      })
+    })
+  },
+  methods: {
+    toAdd() {
+      this.$router.push({
+        path: '/assetManagement/addAsset'
+      })
+    },
+    toList() {
+      this.$router.push({
+        path: '/assetManagement/assetList'
+      })
+    },
+    genderStatistics1() {
+      const myChartGender = echarts.init(document.getElementById('dataCharts_one'))
+      var optionEnter3 = {
+        tooltip: {
+          trigger: 'item'
+        },
+        title: {
+          text: '181',
+          left: 'center',
+          top: 'center',
+          textStyle: {
+            textAlign: 'center',
+            fill: '#333',
+            fontSize: 20,
+            fontWeight: 600
+          }
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '161',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 22, name: '在用' },
+              { value: 0, name: '闲置' }
+            ]
+          }
+        ]
+      }
+      myChartGender.setOption(optionEnter3)
+    },
+    genderStatistics2() {
+      const myChartGender = echarts.init(document.getElementById('dataCharts_two'))
+      var optionEnter3 = {
+        tooltip: {
+          trigger: 'item'
+        },
+        title: {
+          text: '0',
+          left: 'center',
+          top: 'center',
+          textStyle: {
+            textAlign: 'center',
+            fill: '#333',
+            fontSize: 20,
+            fontWeight: 600
+          }
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '161',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 4, name: '已处理' },
+              { value: 6, name: '未处理' }
+            ]
+          }
+        ]
+      }
+      myChartGender.setOption(optionEnter3)
+    },
+    genderStatistics3() {
+      const myChartGender = echarts.init(document.getElementById('dataCharts_three'))
+      var optionEnter3 = {
+        tooltip: {
+          trigger: 'item'
+        },
+        title: {
+          text: '3',
+          left: 'center',
+          top: 'center',
+          textStyle: {
+            textAlign: 'center',
+            fill: '#333',
+            fontSize: 20,
+            fontWeight: 600
+          }
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '161',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 2, name: '已处理' },
+              { value: 1, name: '未处理' }
+            ]
+          }
+        ]
+      }
+      myChartGender.setOption(optionEnter3)
+    },
+    genderStatistics4() {
+      const myChartGender = echarts.init(document.getElementById('dataCharts_four'))
+      var optionEnter3 = {
+        tooltip: {
+          trigger: 'item'
+        },
+        title: {
+          text: '181',
+          left: 'center',
+          top: 'center',
+          textStyle: {
+            textAlign: 'center',
+            fill: '#333',
+            fontSize: 20,
+            fontWeight: 600
+          }
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '161',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 2, name: '已处理' },
+              { value: 4, name: '未处理' }
+            ]
+          }
+        ]
+      }
+      myChartGender.setOption(optionEnter3)
+    },
+    handleExpand() {
+      const element = document.getElementById('sylog-container')// 指定全屏区域元素
+      document.getElementById('fullScreen').addEventListener('click', () => {
+        if (screenfull.isEnabled && this.isScreen === false) {
+          screenfull.request(element)
+        } else {
+          screenfull.exit()
+        }
+      })// 实现模块全屏
+    },
+    refresh() {
+      window.location.reload() // 刷新页面
+    },
+    handleDelete() {
+      const h = this.$createElement
+      this.$confirm(h('p', null, [
+        h('span', null, '确定删除本报告吗？ '),
+        h('br', null),
+        h('span', { style: 'font-size: 8px' }, '提示：该操作无法恢复')
+      ]), '', {
+        customClass: 'custom-confirm',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+    },
+    handleExport() {
+      window.location.href = process.env.BASE_URL + 'exportFile.xls'
+    },
+    /** 查询登录日志 */
+    getList() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 500)
+    },
+    /** 查询按钮操作 */
+    changeTime() {
+      this.open = !this.open
+    },
+    /** 查询按钮操作 */
+    handleQuery() {
+      this.queryParams.page = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = ''
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.operId)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.realTime-container{
+  .warnHead{
+    height: 58px;
+    padding: 15px 20px 10px 20px;
+    background-color: #edeef3 !important;
+    border-bottom: 1px solid #DBDDE3;
+    .warnBtns{
+      float: right;
+      .headBtn{
+        line-height: 10px;
+        color: #fff;
+        border-color: #768398;
+        background-color: #768398;
+      }
+      .headBtnW{
+        border-radius: 4px;
+        line-height: 22px;
+        font-size: 12px;
+        padding: 0 10px;
+        margin: 0 5px;
+      }
+    }
+  }
+  .arrowTransform{
+    transition: 0.2s;
+    transform-origin: center;
+    transform: rotateZ(180deg);
+  }
+  .arrowTransformReturn{
+    transition: 0.2s;
+    transform-origin: center;
+    transform: rotateZ(0deg);
+  }
+  .placeholder{
+    height:14px;
+    background-color: #F4F4F4;
+    margin-bottom:10px
+  }
+  .app-container-realTime {
+    padding: 0 20px;
+    font-size: 18px;
+    .equipmentDiv{
+      max-height: 200px;
+      height: 200px;
+      overflow: auto;
+      border: 1px solid #d2d6de;
+      padding: 10px 0;
+      border-radius: 4px;
+    }
+    .st-square{
+      cursor: pointer;
+      margin-right: 6px;
+      width: 9px;
+      height: 9px;
+      display: inline-block;
+    }
+  }
+}
+</style>
+