sist_web/src/views/index/components/bottom.vue

<template>
  <div class="bottom">
    <el-row>
      <el-col :xs="0" :sm="1" :md="3" :lg="5" :xl="6">
        <div class="grid-content"></div>
      </el-col>
      <el-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">
        <div class="table">
          <table>
            <tr>
              <td rowspan="6">
                <div class="left">
                  <div class="table_img">
                    <img src="@/assets/index/bottom/sy_icon_sjzx.png" alt="">
                  </div>
                  <div class="text">
                    {{ $t('message.data_information') }}
                  </div>
                </div>
              </td>
              <td>
                <div class="right one">
                  <div class="table_tr_left">{{ $t('message.employees') }}</div>
                  <div class="table_tr_right">{{data.worker}}</div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="right tow">
                  <div class="table_tr_left">{{ $t('message.number_students') }}</div>
                  <div class="table_tr_right">{{data.students}}</div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="right three">
                  <div class="table_tr_left">{{ $t('message.graduate_tutor') }}</div>
                  <div class="table_tr_right">{{data.postgraduateTutor}}</div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="right fourth">
                  <div class="table_tr_left">{{ $t('message.research_team') }}</div>
                  <div class="table_tr_right">{{data.scientificTeam}}</div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="right five">
                  <div class="table_tr_left">{{ $t('message.high_level_talents') }}</div>
                  <div class="table_tr_right">{{data.highLevelTalents}}</div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="right six">
                  <div class="table_tr_left">{{ $t('message.major_projects') }}</div>
                  <div class="table_tr_right">{{data.majorProjects}}</div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {getConfig} from "@/api";

export default {
  name: "bottom",
  data(){
    return{
      data:{}
    }
  },
  created() {
    getConfig("statistic").then(res=>{
      this.data = JSON.parse(res.data)
    })
  }
}
</script>

<style scoped lang="scss">

.bottom {
  //margin-top: 2rem;
  background-image: url('../../../assets/index/bottom/sy_bj4.png');
  padding-bottom: 4rem;

  .table {
    //margin: 4rem 0 0 0;
    width: 100%;

    tr {
      width: 100%;
    }

    td {
      width: 50%;
      margin: 0;
      padding: 0;
    }

    .left {
      width: 100%;
      height: 55rem;
      position: relative;

      .table_img {
        //width: 17.6vw;
        text-align: right;
        padding-top: 6rem;
      }
      .text{
        height: 7rem;
        display: flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        padding: 0;
        margin: 0;
        color: #1956BC;
        width: 55%;
        text-align: center;
        font-size: 2.6rem;
        position: absolute;
        top: 42%;
        left: 11%;
      }
    }

    .right {
      width: 123%;
      height: 6.8rem;
      clear: left;
      position: relative;


      .table_tr_left {
        position: absolute;
        font-size: 1.6rem;
        height: 100%;
        line-height: 6.8rem;
        float: left;
        left: 12.5rem;
      }

      .table_tr_right {
        position: absolute;
        font-size: 2.4rem;
        float: left;
        right: 3.3rem;
        height: 100%;
        line-height: 6.8rem;
      }
    }

    .one {
      color: #FFFFFF;
      background-image: url("../../../assets/index/bottom/sy_icon_gzrs.png");
    }
    .one:hover{
      background-image: url("../../../assets/index/bottom/sy_icon_gzrs1.png");
        color:#2E67C8;
    }
    .tow {
      color: #FFFFFF;
      margin-left: 6rem;
      background-image: url("../../../assets/index/bottom/sy_icon_zxxs.png");
    }
    .tow:hover {
      background-image: url("../../../assets/index/bottom/sy_icon_zxxs2.png");
        color:#2E67C8;
    }
    .three {
      color: #FFFFFF;
      margin-left: 12rem;
      background-image: url("../../../assets/index/bottom/sy_icon_yjs.png");
    }
    .three:hover {
      background-image: url("../../../assets/index/bottom/sy_icon_yjs3.png");
        color:#2E67C8;
    }
    .fourth {
      color: #FFFFFF;
      margin-left: 18rem;
      background-image: url("../../../assets/index/bottom/sy_icon_kytd.png");
    }
    .fourth:hover {
      background-image: url("../../../assets/index/bottom/sy_icon_kytd4.png");
        color:#2E67C8;
    }
    .five {
      color: #FFFFFF;
      margin-left: 12rem;
      background-image: url("../../../assets/index/bottom/sy_icon_gccrc.png");
    }
    .five:hover {
      background-image: url("../../../assets/index/bottom/sy_icon_gccrc5.png");
        color:#2E67C8;
    }
    .six {
      color: #FFFFFF;
      margin-left: 6rem;
      background-image: url("../../../assets/index/bottom/sy_icon_zdxm.png");
    }
    .six:hover{
      background-image: url("../../../assets/index/bottom/sy_icon_zdxm6.png");
        color:#2E67C8;
    }
  }

}
</style>