rcaudit/ruoyi-ui/src/views/home1.vue

<template>
  <div>
    <div class="top">
      <div class="topItem itembg1" @click="handleClickTopItem1">
        <div class="icon">
          <img src="../assets/images/index/index2-2-1.png" alt="">
        </div>
        <div class="word">
          <div class="topItemTitle">本年待审装置数量</div>
          <div class="topItemContent">{{homeData1}}</div>
        </div>

      </div>
      <div class="topItem itembg2" @click="handleClickTopItem2">
        <div class="icon">
          <img src="../assets/images/index/index2-2-2.png" alt="">
        </div>
        <div class="word">
          <div class="topItemTitle">历年装置审计绿区通过率</div>
          <div class="topItemContent">{{homeData2}}</div>
        </div>
      </div>
      <div class="topItem itembg3" @click="handleClickTopItem3">
        <div class="icon">
          <img src="../assets/images/index/index2-2-3.png" alt="">
        </div>
        <div class="word">
          <div class="topItemTitle">待审装置开项问题汇总</div>
          <div class="topItemContent">{{homeData3}}</div>
        </div>
      </div>
      <div class="topItem itembg4" @click="handleClickTopItem4">
        <div class="icon">
          <img src="../assets/images/index/index2-2-4.png" alt="">
        </div>
        <div class="word">
          <div class="topItemTitle">待审装置开项问题处理完成数量</div>
          <div class="topItemContent">{{homeData4}}</div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <!-- 左边 -->
      <div class="bot-left">
        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.powerPlant == null ? '暂无': auditTimeList.powerPlant}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.powerPlantNext == null ? '暂无': auditTimeList.powerPlantNext}}</div>
          <div class="card cardleft1" @click="handleClickPlant(101)">
            <div class="cardword">
              <div class="cardleft1Title">
                <!--&lt;!&ndash;<svg-icon v-if="hasAudit(101)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>&ndash;&gt;-->
                <i class="el-icon-s-flag" v-if="hasAudit(101)" style="color: #02B151; font-size: 18px;"></i>
                <span v-if="!hasAudit(101)">电厂</span>
                <span v-if="hasAudit(101)" style="color: #02B151;">电厂</span>
              </div>
              <div class="cardleft1Content">
                <span v-if="!hasAudit(101)">Power<br>Plant</span>
                <span v-if="hasAudit(101)" style="color: #02B151;">Power<br>Plant</span>
              </div>
            </div>
          </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.syngas == null ? '暂无': auditTimeList.syngas}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.syngasNext == null ? '暂无': auditTimeList.syngasNext}}</div>
          <div class="card cardleft2" @click="handleClickPlant(102)">
            <div class="cardword">
              <div class="cardleft1Title">
                <!--&lt;!&ndash;<svg-icon v-if="hasAudit(102)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>&ndash;&gt;-->
                <i class="el-icon-s-flag" v-if="hasAudit(102)" style="color: #02B151; font-size: 18px;"></i>
                <span v-if="!hasAudit(102)">合成气</span>
                <span v-if="hasAudit(102)" style="color: #02B151;">合成气</span>
              </div>
              <div class="cardleft1Content">
                <span v-if="!hasAudit(102)">Syngas</span>
                <span v-if="hasAudit(102)" style="color: #02B151;">Syngas</span>
              </div>
            </div>
          </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.d900 == null ? '暂无': auditTimeList.d900}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.d900Next == null ? '暂无': auditTimeList.d900Next}}</div>
          <div class="card cardleft3" @click="handleClickPlant(104)">
            <div class="cardword">
              <div class="cardleft1Title">
                <!--&lt;!&ndash;<svg-icon v-if="hasAudit(104)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>&ndash;&gt;-->
                <i class="el-icon-s-flag" v-if="hasAudit(104)" style="color: #02B151; font-size: 18px;"></i>
                <span v-if="!hasAudit(104)">D900</span>
                <span v-if="hasAudit(104)" style="color: #02B151;">D900</span>
              </div>
            </div>
          </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.c900 == null ? '暂无': auditTimeList.c900}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.c900Next == null ? '暂无': auditTimeList.c900Next}}</div>
          <div class="card cardleft4" @click="handleClickPlant(105)">
            <div class="cardword">
              <div class="cardleft1Title">
                <!--&lt;!&ndash;<svg-icon v-if="hasAudit(105)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>&ndash;&gt;-->
                <i class="el-icon-s-flag" v-if="hasAudit(105)" style="color: #02B151; font-size: 18px;"></i>
                <span v-if="!hasAudit(105)">C900</span>
                <span v-if="hasAudit(105)" style="color: #02B151;">C900</span>
              </div>
            </div>
          </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.b900 == null ? '暂无': auditTimeList.b900}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.b900Next == null ? '暂无': auditTimeList.b900Next}}</div>
          <div class="card cardleft5" @click="handleClickPlant(106)">
            <div class="cardword">
              <div class="cardleft1Title">
                <!--<svg-icon v-if="hasAudit(106)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
                <i class="el-icon-s-flag" v-if="hasAudit()" style="color: #02B151; font-size: 18px;"></i>
                <span v-if="!hasAudit(106)">B900</span>
                <span v-if="hasAudit(106)" style="color: #02B151;">B900</span>
              </div>
            </div>
          </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.psStorage == null ? '暂无': auditTimeList.psStorage}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.psStorageNext == null ? '暂无': auditTimeList.psStorageNext}}</div>
          <div class="card card2 cardleft6" @click="handleClickPlant(107)">
            <div class="cardword">
              <div class="cardleft1Title">
                <!--<svg-icon v-if="hasAudit(107)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
                <i class="el-icon-s-flag" v-if="hasAudit(107)" style="color: #02B151; font-size: 18px;"></i>
                <span v-if="!hasAudit(107)">聚苯乙烯包装库房</span>
                <span v-if="hasAudit(107)" style="color: #02B151;">聚苯乙烯包装库房</span>
              </div>
              <div class="cardleft1Content">
                <span v-if="!hasAudit(107)">PS Storage<br>A900 A800</span>
                <span v-if="hasAudit(107)" style="color: #02B151;">PS Storage<br>A900 A800</span>
              </div>
            </div>
          </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.d800 == null ? '暂无': auditTimeList.d800}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.d800Next == null ? '暂无': auditTimeList.d800Next}}</div>
          <div class="card cardleft7" @click="handleClickPlant(108)">
            <div class="cardword">
              <div class="cardleft1Title">
                <!--<svg-icon v-if="hasAudit(108)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
                <i class="el-icon-s-flag" v-if="hasAudit(108)" style="color: #02B151; font-size: 18px;"></i>
                <span v-if="!hasAudit(108)">D800</span>
                <span v-if="hasAudit(108)" style="color: #02B151;">D800</span>
              </div>
            </div>
          </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.c800 == null ? '暂无': auditTimeList.c800}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.c800Next == null ? '暂无': auditTimeList.c800Next}}</div>
          <div class="card cardleft8" @click="handleClickPlant(109)">
            <div class="cardword">
              <div class="cardleft1Title">
                <!--<svg-icon v-if="hasAudit(109)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
                <i class="el-icon-s-flag" v-if="hasAudit(109)" style="color: #02B151; font-size: 18px;"></i>
                <span v-if="!hasAudit(109)">C800</span>
                <span v-if="hasAudit(109)" style="color: #02B151;">C800</span>
              </div>
              <div class="cardleft1Content">
                <span v-if="!hasAudit(109)">乙苯/苯乙烯<br>EB/SM</span>
                <span v-if="hasAudit(109)" style="color: #02B151;">乙苯/苯乙烯<br>EB/SM</span>
              </div>
            </div>
          </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.b800 == null ? '暂无': auditTimeList.b800}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.b800Next == null ? '暂无': auditTimeList.b800Next}}</div>
          <div class="card cardleft9" @click="handleClickPlant(110)">
            <div class="cardword">
              <div class="cardleft1Title">
                <!--<svg-icon v-if="hasAudit(110)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
                <i class="el-icon-s-flag" v-if="hasAudit(110)" style="color: #02B151; font-size: 18px;"></i>
                <span v-if="!hasAudit(110)">聚苯乙烯</span>
                <span v-if="hasAudit(110)" style="color: #02B151;">聚苯乙烯</span>
              </div>
              <div class="cardleft1Content">
                <span v-if="!hasAudit(110)">PS<br>B800</span>
                <span v-if="hasAudit(110)" style="color: #02B151;">PS<br>B800</span>
              </div>
            </div>
          </div>
        </el-tooltip>
      </div>

      <!-- 中间 -->
      <div class="bot-center">
        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.bcc == null ? '暂无': auditTimeList.bcc}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.bcc == nullNext ? '暂无': auditTimeList.bccNext}}</div>
        <div class="card card2 cardleft10" @click="handleClickPlant(103)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(103)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(103)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(103)">火炬BCC Flare</span>
              <span v-if="hasAudit(103)" style="color: #02B151;">火炬BCC Flare</span>
            </div>
          </div>
        </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.bcc == null ? '暂无': auditTimeList.bcc}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.bccNext == null ? '暂无': auditTimeList.bccNext}}</div>
        <div class="card card2 cardleft11" @click="handleClickPlant(103)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(103)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(103)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(103)">裂解<br>罐区<br>SCTF</span>
              <span v-if="hasAudit(103)" style="color: #02B151;">裂解<br>罐区<br>SCTF</span>
            </div>
          </div>
        </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.bcc == null ? '暂无': auditTimeList.bcc}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.bccNext == null ? '暂无': auditTimeList.bccNext}}</div>
        <div class="card card2 cardleft12" @click="handleClickPlant(103)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(103)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(103)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(103)">蒸汽裂解</span>
              <span v-if="hasAudit(103)" style="color: #02B151;">蒸汽裂解</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(103)">EU<br>D100/200</span>
              <span v-if="hasAudit(103)" style="color: #02B151;">EU<br>D100/200</span>
            </div>
          </div>
        </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.aeuPgu == null ? '暂无': auditTimeList.aeuPgu}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.aeuPguNext == null ? '暂无': auditTimeList.aeuPguNext}}</div>
        <div class="card card2 cardleft13" @click="handleClickPlant(111)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(111)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(111)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(111)">芳烃抽提<br>汽油加氢</span>
              <span v-if="hasAudit(111)" style="color: #02B151;">芳烃抽提<br>汽油加氢</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(111)">AEU/PGU<br>D300</span>
              <span v-if="hasAudit(111)" style="color: #02B151;">AEU/PGU<br>D300</span>
            </div>
          </div>
        </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.c100200 == null ? '暂无': auditTimeList.c100200}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.c100200Next == null ? '暂无': auditTimeList.c100200Next}}</div>
        <div class="card card2 cardleft14" @click="handleClickPlant(112)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(112)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(112)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(112)">异丁烯/聚异丁烯/丁二烯</span>
              <span v-if="hasAudit(112)" style="color: #02B151;">异丁烯/聚异丁烯/丁二烯</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(112)">IB/PIB/BD<br>C100/200</span>
              <span v-if="hasAudit(112)" style="color: #02B151;">IB/PIB/BD<br>C100/200</span>
            </div>
          </div>
        </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.c300 == null ? '暂无': auditTimeList.c300}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.c300Next == null ? '暂无': auditTimeList.c300Next}}</div>
        <div class="card card2 cardleft15" @click="handleClickPlant(113)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(113)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(113)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(113)">公用工程</span>
              <span v-if="hasAudit(113)" style="color: #02B151;">公用工程</span>
            </div>
            <div class="cardleft1Content">U1<br>
              <span v-if="!hasAudit(113)">C300</span>
              <span v-if="hasAudit(113)" style="color: #02B151;">C300</span>
            </div>
          </div>
        </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.ldpe == null ? '暂无': auditTimeList.ldpe}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.ldpeNext == null ? '暂无': auditTimeList.ldpeNext}}</div>
        <div class="card card2 cardleft16" @click="handleClickPlant(114)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(114)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(114)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(114)">低密度聚乙烯醋<br>酸乙烯共聚物</span>
              <span v-if="hasAudit(114)" style="color: #02B151;">低密度聚乙烯醋<br>酸乙烯共聚物</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(114)">LDPE<br>B100/200</span>
              <span v-if="hasAudit(114)" style="color: #02B151;">LDPE<br>B100/200</span>
            </div>
          </div>
        </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.ldpe == null ? '暂无': auditTimeList.ldpe}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.ldpeNext == null ? '暂无': auditTimeList.ldpeNext}}</div>
        <div class="card card2 cardleft17" @click="handleClickPlant(114)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(115)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(114)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(114)">醇类联合</span>
              <span v-if="hasAudit(114)" style="color: #02B151;">醇类联合</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(114)">OXO<br>B300</span>
              <span v-if="hasAudit(114)" style="color: #02B151;">OXO<br>B300</span>
            </div>
          </div>
        </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.ldpe == null ? '暂无': auditTimeList.ldpe}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.ldpeNext == null ? '暂无': auditTimeList.ldpeNext}}</div>
        <div class="card card2 cardleft18" @click="handleClickPlant(114)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(115)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(114)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(114)">聚乙烯仓库</span>
              <span v-if="hasAudit(114)" style="color: #02B151;">聚乙烯仓库</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(114)">LDPE/EVA<br>Storage A100/200</span>
              <span v-if="hasAudit(114)" style="color: #02B151;">LDPE/EVA<br>Storage A100/200</span>
            </div>
          </div>
        </div>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.a300 == null ? '暂无': auditTimeList.a300}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.a300Next == null ? '暂无': auditTimeList.a300Next}}</div>
        <div class="card card2 cardleft19" @click="handleClickPlant(117)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(117)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(117)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(117)">危险品仓库</span>
              <span v-if="hasAudit(117)" style="color: #02B151;">危险品仓库</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(117)">Hazard Chemical<br>Storage A300</span>
              <span v-if="hasAudit(117)" style="color: #02B151;">Hazard Chemical<br>Storage A300</span>
            </div>
          </div>
        </div>
        </el-tooltip>
      </div>

      <!-- 右边 -->
      <div class="bot-right">
        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.to == null ? '暂无': auditTimeList.to}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.toNext == null ? '暂无': auditTimeList.toNext}}</div>
        <div class="card cardleft20" @click="handleClickPlant(118)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(118)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(118)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(118)">氧化炉</span>
              <span v-if="hasAudit(118)" style="color: #02B151;">氧化炉</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(118)">TO</span>
              <span v-if="hasAudit(118)" style="color: #02B151;">TO</span>
            </div>
          </div>
        </div></el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.cltf == null ? '暂无': auditTimeList.cltf}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.cltfNext == null ? '暂无': auditTimeList.cltfNext}}</div>
        <div class="card card2 cardleft21" @click="handleClickPlant(119)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(119)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(119)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(119)">中央罐区</span>
              <span v-if="hasAudit(119)" style="color: #02B151;">中央罐区</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(119)">CLTF</span>
              <span v-if="hasAudit(119)" style="color: #02B151;">CLTF</span>
            </div>
          </div>
        </div></el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.d400 == null ? '暂无': auditTimeList.d400}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.d400Next == null ? '暂无': auditTimeList.d400Next}}</div>
        <div class="card cardleft22" @click="handleClickPlant(120)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(120)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(120)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(120)">环氧乙烷/<br>乙二醇</span>
              <span v-if="hasAudit(120)" style="color: #02B151;">环氧乙烷/<br>乙二醇</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(120)">EO/EG<br>D400</span>
              <span v-if="hasAudit(120)" style="color: #02B151;">EO/EG<br>D400</span>
            </div>
          </div>
        </div></el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.nis500 == null ? '暂无': auditTimeList.nis500}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.nis500Next == null ? '暂无': auditTimeList.nis500Next}}</div>
        <div class="card cardleft23" @click="handleClickPlant(121)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(121)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(121)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(121)">非离子表面<br>活性剂</span>
              <span v-if="hasAudit(121)" style="color: #02B151;">非离子表面<br>活性剂</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(121)">NIS<br>500</span>
              <span v-if="hasAudit(121)" style="color: #02B151;">NIS<br>500</span>
            </div>
          </div>
        </div></el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.d600 == null ? '暂无': auditTimeList.d600}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.d600Next == null ? '暂无': auditTimeList.d600Next}}</div>
        <div class="card cardleft24" @click="handleClickPlant(122)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(122)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(122)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(122)">超吸水聚合物</span>
              <span v-if="hasAudit(122)" style="color: #02B151;">超吸水聚合物</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(122)">SAP<br>D600</span>
              <span v-if="hasAudit(122)" style="color: #02B151;">SAP<br>D600</span>
            </div>
          </div>
        </div></el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.d700 == null ? '暂无': auditTimeList.d700}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.d700Next == null ? '暂无': auditTimeList.d700Next}}</div>
        <div class="card cardleft25" @click="handleClickPlant(123)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(123)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(123)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(123)">办公区<br>维修中心</span>
              <span v-if="hasAudit(123)" style="color: #02B151;">办公区<br>维修中心</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(123)">中心库房<br>D700</span>
              <span v-if="hasAudit(123)" style="color: #02B151;">中心库房<br>D700</span>
            </div>
          </div>
        </div></el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.c400 == null ? '暂无': auditTimeList.c400}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.c400Next == null ? '暂无': auditTimeList.c400Next}}</div>
        <div class="card cardleft26" @click="handleClickPlant(124)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(124)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(124)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(124)">公用工程</span>
              <span v-if="hasAudit(124)" style="color: #02B151;">公用工程</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(124)">U2<br>C400</span>
              <span v-if="hasAudit(124)" style="color: #02B151;">U2<br>C400</span>
            </div>
          </div>
        </div></el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.c500 == null ? '暂无': auditTimeList.c500}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.c500Next == null ? '暂无': auditTimeList.c500Next}}</div>
        <div class="card cardleft27" @click="handleClickPlant(125)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(125)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(125)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(125)">精丙烯酸</span>
              <span v-if="hasAudit(125)" style="color: #02B151;">精丙烯酸</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(125)">GAA<br>C500</span>
              <span v-if="hasAudit(125)" style="color: #02B151;">GAA<br>C500</span>
            </div>
          </div>
        </div></el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.c600 == null ? '暂无': auditTimeList.c600}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.c600Next == null ? '暂无': auditTimeList.c600Next}}</div>
        <div class="card cardleft28" @click="handleClickPlant(126)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(126)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(126)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(126)">醇胺联合<br>NPG</span>
              <span v-if="hasAudit(126)" style="color: #02B151;">醇胺联合<br>NPG</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(126)">ACN<br>C600</span>
              <span v-if="hasAudit(126)" style="color: #02B151;">ACN<br>C600</span>
            </div>
          </div>
        </div></el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.c700 == null ? '暂无': auditTimeList.c700}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.c700Next == null ? '暂无': auditTimeList.c700Next}}</div>
        <div class="card cardleft29" @click="handleClickPlant(127)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(127)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(127)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(127)">公路终端</span>
              <span v-if="hasAudit(127)" style="color: #02B151;">公路终端</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(127)">RTTF<br>C700</span>
              <span v-if="hasAudit(127)" style="color: #02B151;">RTTF<br>C700</span>
            </div>
          </div>
        </div></el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.b400500 == null ? '暂无': auditTimeList.b400500}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.b400500Next == null ? '暂无': auditTimeList.b400500Next}}</div>
        <div class="card card2 cardleft30" @click="handleClickPlant(128)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(128)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(128)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(128)">丙烯酸/丙烯酸酯</span>
              <span v-if="hasAudit(128)" style="color: #02B151;">丙烯酸/丙烯酸酯</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(128)">AA/AE<br>B400/B500</span>
              <span v-if="hasAudit(128)" style="color: #02B151;">AA/AE<br>B400/B500</span>
            </div>
          </div>
        </div></el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.b600 == null ? '暂无': auditTimeList.b600}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.b600Next == null ? '暂无': auditTimeList.b600Next}}</div>
        <div class="card cardleft31" @click="handleClickPlant(129)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(129)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(129)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(129)">碳一联合</span>
              <span v-if="hasAudit(129)" style="color: #02B151;">碳一联合</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(129)">C1<br>B600</span>
              <span v-if="hasAudit(129)" style="color: #02B151;">C1<br>B600</span>
            </div>
          </div>
        </div></el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.b700 == null ? '暂无': auditTimeList.b700}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.b700Next == null ? '暂无': auditTimeList.b700Next}}</div>
        <div class="card cardleft32" @click="handleClickPlant(130)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(130)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(130)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(130)">B700</span>
              <span v-if="hasAudit(130)" style="color: #02B151;">B700</span>
            </div>
          </div>
        </div></el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.a400500 == null ? '暂无': auditTimeList.a400500}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.a400500Next == null ? '暂无': auditTimeList.a400500Next}}</div>
        <div class="card card2 cardleft33" @click="handleClickPlant(131)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(131)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(131)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(131)">物流库房</span>
              <span v-if="hasAudit(131)" style="color: #02B151;">物流库房</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(131)">Logistical storage<br>A400/A500</span>
              <span v-if="hasAudit(131)" style="color: #02B151;">Logistical storage<br>A400/A500</span>
            </div>
          </div>
        </div></el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.a600 == null ? '暂无': auditTimeList.a600}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.a600Next == null ? '暂无': auditTimeList.a600Next}}</div>
        <div class="card cardleft34" @click="handleClickPlant(132)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(132)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(132)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(132)">碳一联合库房</span>
              <span v-if="hasAudit(132)" style="color: #02B151;">碳一联合库房</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(132)">C1 complex<br>Storage<br>A600</span>
              <span v-if="hasAudit(132)" style="color: #02B151;">C1 complex<br>Storage<br>A600</span>
            </div>
          </div>
        </div></el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">上次审计时间：<br/>{{auditTimeList.a700 == null ? '暂无': auditTimeList.a700}}</div>
          <div slot="content">下次审计时间：<br/>{{auditTimeList.a700Next == null ? '暂无': auditTimeList.a700Next}}</div>
        <div class="card cardleft35" @click="handleClickPlant(133)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--&lt;!&ndash;<svg-icon v-if="hasAudit(133)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>&ndash;&gt;-->
              <i class="el-icon-s-flag" v-if="hasAudit(133)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(133)">铁路控制室</span>
              <span v-if="hasAudit(133)" style="color: #02B151;">铁路控制室</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(133)">Rail Control<br>Room<br>A700</span>
              <span v-if="hasAudit(133)" style="color: #02B151;">Rail Control<br>Room<br>A700</span>
            </div>
          </div>
        </div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
  import { getHomeData, getAuditDeptList, getLastAuditTimeList, getNextAuditTimeList } from "@/api/rc/audit";

  export default {
    data() {
      return {
        homeData1: 0,
        homeData2: 0,
        homeData3: 0,
        homeData4: 0,
        auditDeptList: [],
        auditTimeList: {
          powerPlant: null,
          syngas: null,
          d900: null,
          c900: null,
          b900: null,
          psStorage: null,
          d800: null,
          c800: null,
          b800: null,
          bcc: null,
          aeuPgu: null,
          c100200: null,
          c300: null,
          ldpe: null,
          a300: null,
          to: null,
          cltf: null,
          d400: null,
          nis500: null,
          d600: null,
          d700: null,
          c400: null,
          c500: null,
          c600: null,
          c700: null,
          b400500: null,
          b600: null,
          b700: null,
          a400500: null,
          a600: null,
          a700: null,
          powerPlantNext: null,
          syngasNext: null,
          d900Next: null,
          c900Next: null,
          b900Next: null,
          psStorageNext: null,
          d800Next: null,
          c800Next: null,
          b800Next: null,
          bccNext: null,
          aeuPguNext: null,
          c100200Next: null,
          c300Next: null,
          ldpeNext: null,
          a300Next: null,
          toNext: null,
          cltfNext: null,
          d400Next: null,
          nis500Next: null,
          d600Next: null,
          d700Next: null,
          c400Next: null,
          c500Next: null,
          c600Next: null,
          c700Next: null,
          b400500Next: null,
          b600Next: null,
          b700Next: null,
          a400500Next: null,
          a600Next: null,
          a700Next: null,
        },
      }
    },
    created() {
      this.getHomeData();
      this.getAuditDeptList();
      this.getLastAuditTimeList();
      this.getNextAuditTimeList();
    },
    methods: {
      getLastAuditTimeList() {
        getLastAuditTimeList().then(response => {
          let map = new Map(Object.entries(response.data));
          map.forEach((value, key) => {
            switch(key) {
              case '101':
                this.auditTimeList.powerPlant = value;
                break;
              case '102':
                this.auditTimeList.syngas = value;
                break;
              case '103':
                this.auditTimeList.bcc = value;
                break;
              case '104':
                this.auditTimeList.d900 = value;
                break;
              case '105':
                this.auditTimeList.c900 = value;
                break;
              case '106':
                this.auditTimeList.b900 = value;
                break;
              case '107':
                this.auditTimeList.psStorage = value;
                break;
              case '108':
                this.auditTimeList.d800 = value;
                break;
              case '109':
                this.auditTimeList.c800 = value;
                break;
              case '110':
                this.auditTimeList.b800 = value;
                break;
              case '111':
                this.auditTimeList.aeuPgu = value;
                break;
              case '112':
                this.auditTimeList.c100200 = value;
                break;
              case '113':
                this.auditTimeList.c300 = value;
                break;
              case '114':
                this.auditTimeList.ldpe = value;
                break;
              case '117':
                this.auditTimeList.a300 = value;
                break;
              case '118':
                this.auditTimeList.to = value;
                break;
              case '119':
                this.auditTimeList.cltf = value;
                break;
              case '120':
                this.auditTimeList.d400 = value;
                break;
              case '121':
                this.auditTimeList.nis500 = value;
                break;
              case '122':
                this.auditTimeList.d600 = value;
                break;
              case '123':
                this.auditTimeList.d700 = value;
                break;
              case '124':
                this.auditTimeList.c400 = value;
                break;
              case '125':
                this.auditTimeList.c500 = value;
                break;
              case '126':
                this.auditTimeList.c600 = value;
                break;
              case '127':
                this.auditTimeList.c700 = value;
                break;
              case '128':
                this.auditTimeList.b400500 = value;
                break;
              case '129':
                this.auditTimeList.b600 = value;
                break;
              case '130':
                this.auditTimeList.b700 = value;
                break;
              case '131':
                this.auditTimeList.a400500 = value;
                break;
              case '132':
                this.auditTimeList.a600 = value;
                break;
              case '133':
                this.auditTimeList.a700 = value;
                break;
            }
          })
        });
      },
      getNextAuditTimeList() {
        getNextAuditTimeList().then(response => {
          let map = new Map(Object.entries(response.data));
          map.forEach((value, key) => {
            switch(key) {
              case '101':
                this.auditTimeList.powerPlantNext = value;
                break;
              case '102':
                this.auditTimeList.syngasNext = value;
                break;
              case '103':
                this.auditTimeList.bccNext = value;
                break;
              case '104':
                this.auditTimeList.d900Next = value;
                break;
              case '105':
                this.auditTimeList.c900Next = value;
                break;
              case '106':
                this.auditTimeList.b900Next = value;
                break;
              case '107':
                this.auditTimeList.psStorageNext = value;
                break;
              case '108':
                this.auditTimeList.d800Next = value;
                break;
              case '109':
                this.auditTimeList.c800Next = value;
                break;
              case '110':
                this.auditTimeList.b800Next = value;
                break;
              case '111':
                this.auditTimeList.aeuPguNext = value;
                break;
              case '112':
                this.auditTimeList.c100200Next = value;
                break;
              case '113':
                this.auditTimeList.c300Next = value;
                break;
              case '114':
                this.auditTimeList.ldpeNext = value;
                break;
              case '117':
                this.auditTimeList.a300Next = value;
                break;
              case '118':
                this.auditTimeList.toNext = value;
                break;
              case '119':
                this.auditTimeList.cltfNext = value;
                break;
              case '120':
                this.auditTimeList.d400Next = value;
                break;
              case '121':
                this.auditTimeList.nis500Next = value;
                break;
              case '122':
                this.auditTimeList.d600Next = value;
                break;
              case '123':
                this.auditTimeList.d700Next = value;
                break;
              case '124':
                this.auditTimeList.c400Next = value;
                break;
              case '125':
                this.auditTimeList.c500Next = value;
                break;
              case '126':
                this.auditTimeList.c600Next = value;
                break;
              case '127':
                this.auditTimeList.c700Next = value;
                break;
              case '128':
                this.auditTimeList.b400500Next = value;
                break;
              case '129':
                this.auditTimeList.b600Next = value;
                break;
              case '130':
                this.auditTimeList.b700Next = value;
                break;
              case '131':
                this.auditTimeList.a400500Next = value;
                break;
              case '132':
                this.auditTimeList.a600Next = value;
                break;
              case '133':
                this.auditTimeList.a700Next = value;
                break;
            }
          })
        });
      },
      getHomeData() {
        getHomeData().then(response => {
          if (response.data != null) {
            this.homeData1 = response.data.homeData1;
            this.homeData2 = (response.data.homeData2 * 100) + "%";
            this.homeData3 = response.data.homeData3;
            this.homeData4 = response.data.homeData4;
          }
        });
      },
      getAuditDeptList() {
        getAuditDeptList().then(response => {
          this.auditDeptList = [];
          let data = response.data;
          for (let i = 0; i < data.length; i++) {
            this.auditDeptList.push(data[i].deptId);
          }
        });
      },
      hasAudit(deptId) {
        let auditDeptList = this.auditDeptList;
        let hasAudit = false;
        for (let i = 0; i < auditDeptList.length; i++) {
          if (deptId == auditDeptList[i]) {
            hasAudit = true;
          }
        }
        return hasAudit;
      },
      handleClickTopItem1() {
        this.$router.push("/rc/audit");
      },
      handleClickTopItem2() {
        this.$router.push("/rc/audit");
      },
      handleClickTopItem3() {
        this.$router.push("/rc/openitem");
      },
      handleClickTopItem4() {
        this.$router.push("/rc/openitem");
      },
      handleClickPlant(deptId) {
        this.$router.push({
          path: "/rc/audit",
          query: {
            deptId: deptId
          }
        });
      },
    },
  };
</script>
<style scoped>
 .top{
    display: flex;
    margin-left: 35px;
    margin-top: 10px;
    margin-right: 15px;
    justify-content: space-between;
 }
  .topItem{
    padding: 50px 20px 50px 60px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .topItem .icon{
    width: 40px;
    height: 40px;
    margin-right: 20px;
  }
  .topItem .icon img{
   width: 40px;
    height: 40px;
  }
  .topItem .word{
    font-size: 16px;
    color: #fff;
    font-weight: bold;
  }
 .topItem.itembg1{
    background: url(../assets/images/index/index2-1-1.png) no-repeat;
    background-size: 100% 100%;
    width: 23.4%;
    height: 120px;
    margin-right: 10px;
 }

 .topItem.itembg2{
    background: url(../assets/images/index/index2-1-2.png) no-repeat;
    background-size: 100% 100%;
    width: 23.4%;
    height: 120px;
    margin-right: 10px;
 }

 .topItem.itembg3{
    background: url(../assets/images/index/index2-1-3.png) no-repeat;
    background-size: 100% 100%;
    width: 23.4%;
    height: 120px;
    margin-right: 10px;
 }

 .topItem.itembg4{
    background: url(../assets/images/index/index2-1-4.png) no-repeat;
    background-size: 100% 100%;
    width: 23.4%;
    height: 120px;
    margin-left: 10px;
 }

 .bottom{
    background: url(../assets/images/index/index2-bg.png) no-repeat;
    width: 98%;
    height: 698px;
    background-size: 100% 100%;
    margin-left: 25px;
    margin-right: 10px;
    display: flex;
    position: relative;
 }

 .bottom .card{
  background: url(../assets/images/index/index2-3-2.png) no-repeat;
  width: 6.55%;
  height: 14.6%;
  background-size: 100% 100%;
  /* padding: 20px; */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  cursor: pointer;
 }

 .bottom .card.card2{
  background: url(../assets/images/index/index2-3-1.png) no-repeat;
  width: 14.5%;
  height: 14.789%;
  background-size: 100% 100%;
 }

 .cardword{
  color: #1971FF;
  font-size: 12px;
 }

 .cardleft1Title{
  font-weight: bold;
 }
 .cardleft1Content{
  font-size: 11px;
 }

 .cardleft1{
    top: 27.556%;
    left: 3.76%;
 }

 .cardleft2{
    top: 47.11%;
    left: 3.76%;
 }

 .cardleft3{
    top: 26.8%;
    left: 14.285%;
 }

 .cardleft4{
    top: 44.6%;
    left: 14.285%;
 }

 .cardleft5{
    top: 61.4%;
    left: 14.285%;
 }

 .cardleft6{
    top: 78.6967%;
    left: 14.285%;
 }

 .cardleft7{
    top: 26.8%;
    left: 23.07%;
 }

 .cardleft8{
    top: 44.6%;
    left: 23.07%;
 }

 .cardleft9{
    top: 61.4%;
    left: 23.07%;
 }

 .cardleft10{
    top: 8.897%;
    left: 33.05%;
 }
 .cardleft11{
    top: 8.897%;
    left: 49.05%;
 }

 .cardleft12{
    top: 26.897%;
    left: 33.05%;
 }

 .cardleft13{
    top: 26.897%;
    left: 49.05%;
 }

 .cardleft14{
    top: 44.897%;
    left: 33.05%;
 }

 .cardleft15{
    top: 44.897%;
    left: 49.05%;
 }

 .cardleft16{
    top: 61.897%;
    left: 33.05%;
 }
 .cardleft17{
    top: 61.897%;
    left: 49.05%;
 }

 .cardleft18{
    top: 78.6967%;
    left: 33.05%;
 }
 .cardleft19{
    top: 78.6967%;
    left: 49.05%;
 }

 .cardleft20{
    top: 8.897%;
    left: 75.05%;
 }

 .cardleft21{
  top: 8.897%;
  left: 83.05%;
 }

 .cardleft22{
  top: 26.897%;
  left: 67.05%;
 }
 .cardleft23{
  top: 26.897%;
  left: 75.05%;
 }
 .cardleft24{
  top: 26.897%;
  left: 83.05%;
 }
 .cardleft25{
  top: 26.897%;
  left: 91.05%;
 }
 .cardleft26{
  top: 44.897%;
  left: 67.05%;
 }
 .cardleft27{
  top: 44.897%;
  left: 75.05%;
 }
 .cardleft28{
  top: 44.897%;
  left: 83.05%;
 }
 .cardleft29{
  top: 44.897%;
  left: 91.05%;
 }

 .cardleft30{
  top: 61.897%;
  left: 67.05%;
 }

 .cardleft31{
  top: 61.897%;
  left: 83.05%;
 }

 .cardleft32{
  top: 61.897%;
  left: 91.05%;
 }

 .cardleft33{
  top: 78.6967%;
  left: 67.05%;
 }

 .cardleft34{
  top: 78.6967%;
  left: 83.05%;
 }

 .cardleft35{
  top: 78.6967%;
  left: 91.05%;
 }
</style>