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">
        <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>
              电厂
            </div>
            <div class="cardleft1Content">Power<br>Plant</div>
          </div>
        </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>
              合成气
            </div>
            <div class="cardleft1Content">Syngas</div>
          </div>
        </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>
              D900
            </div>
          </div>
        </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>
              C900
            </div>
          </div>
        </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(106)" style="color: #02B151; font-size: 18px;"></i>
              B900
            </div>
          </div>
        </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>
              聚苯乙烯包装库房
            </div>
            <div class="cardleft1Content">PS Storage<br>A900 A800</div>
          </div>
        </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>
              D800
            </div>
          </div>
        </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>
              C800
            </div>
            <div class="cardleft1Content">乙苯/苯乙烯<br>EB/SM</div>
          </div>
        </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>
              聚苯乙烯
            </div>
            <div class="cardleft1Content">PS<br>B800</div>
          </div>
        </div>
      </div>

      <!-- 中间 -->
      <div class="bot-center">
        <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>
              火炬BCC Flare
            </div>
          </div>
        </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>
              裂解<br>罐区<br>SCTF
            </div>
          </div>
        </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>
              蒸汽裂解
            </div>
            <div class="cardleft1Content">EU<br>D100/200</div>
          </div>
        </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>
              芳烃抽提<br>汽油加氢
            </div>
            <div class="cardleft1Content">AEU/PGU<br>D300</div>
          </div>
        </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>
              异丁烯/聚异丁烯/丁二烯
            </div>
            <div class="cardleft1Content">IB/PIB/BD<br>C100/200</div>
          </div>
        </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>
              公用工程
            </div>
            <div class="cardleft1Content">U1<br>C300</div>
          </div>
        </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>
              低密度聚乙烯醋<br>酸乙烯共聚物
            </div>
            <div class="cardleft1Content">LDPE<br>B100/200</div>
          </div>
        </div>

        <div class="card card2 cardleft17" @click="handleClickPlant(115)">
          <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(115)" style="color: #02B151; font-size: 18px;"></i>
              醇类联合
            </div>
            <div class="cardleft1Content">OXO<br>B300</div>
          </div>
        </div>

        <div class="card card2 cardleft18" @click="handleClickPlant(115)">
          <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(115)" style="color: #02B151; font-size: 18px;"></i>
              聚乙烯仓库
            </div>
            <div class="cardleft1Content">LDPE/EVA<br>Storage A100/200</div>
          </div>
        </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>
              危险品仓库
            </div>
            <div class="cardleft1Content">Hazard Chemical<br>Storage A300</div>
          </div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="bot-right">
        <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>
              氧化炉
            </div>
            <div class="cardleft1Content">TO</div>
          </div>
        </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>
              中央罐区
            </div>
            <div class="cardleft1Content">CLTF</div>
          </div>
        </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>
              环氧乙烷/<br>乙二醇
            </div>
            <div class="cardleft1Content"> EO/EG<br>D400</div>
          </div>
        </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>
              非离子表面<br>活性剂
            </div>
            <div class="cardleft1Content">NIS<br>500</div>
          </div>
        </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>
              超吸水聚合物
            </div>
            <div class="cardleft1Content">SAP<br>D600</div>
          </div>
        </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>
              办公区<br>维修中心
            </div>
            <div class="cardleft1Content">中心库房<br>D700</div>
          </div>
        </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>
              公用工程
            </div>
            <div class="cardleft1Content">U2<br>C400</div>
          </div>
        </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>
              精丙烯酸
            </div>
            <div class="cardleft1Content">GAA<br>C500</div>
          </div>
        </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>
              醇胺联合<br>NPG
            </div>
            <div class="cardleft1Content">ACN<br>C600</div>
          </div>
        </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>
              公路终端
            </div>
            <div class="cardleft1Content">RTTF<br>C700</div>
          </div>
        </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>
              丙烯酸/丙烯酸酯
            </div>
            <div class="cardleft1Content">AA/AE<br>B400/B500</div>
          </div>
        </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>
              碳一联合
            </div>
            <div class="cardleft1Content">C1<br>B600</div>
          </div>
        </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>
              B700
            </div>
          </div>
        </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>
              物流库房
            </div>
            <div class="cardleft1Content">Logistical storage<br>A400/A500</div>
          </div>
        </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>
              碳一联合库房
            </div>
            <div class="cardleft1Content">C1 complex<br>Storage<br>A600</div>
          </div>
        </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>
              铁路控制室
            </div>
            <div class="cardleft1Content">Rail Control<br>Room<br>A700</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

  export default {
    data() {
      return {
        homeData1: 0,
        homeData2: 0,
        homeData3: 0,
        homeData4: 0,
        auditDeptList: [],
      }
    },
    created() {
      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().then(response => {
        this.auditDeptList = [];
        let data = response.data;
        for (let i = 0; i < data.length; i++) {
          this.auditDeptList.push(data[i].deptId);
        }
        console.log(this.auditDeptList)
      });
    },
    methods: {
      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>