<template>
  <el-row style="background-color: rgb(241, 242, 246);height: calc(100vh - 84px);">
    <el-row>
      <el-image :src="Background" />
    </el-row>
    <!--    <el-row class="routerCardPar">-->
    <!--      <template v-for="(system, index) in systemList">-->
    <!--        &lt;!&ndash;        <el-card :key="system.id" :body-style="{ padding: '0px' }" class="routerCard"  @click.native="sso(system.systemUrl)">&ndash;&gt;-->
    <!--        &lt;!&ndash;          <img :src="system.storage.url" class="image">&ndash;&gt;-->
    <!--        &lt;!&ndash;          <div class="content">&ndash;&gt;-->
    <!--        &lt;!&ndash;            <span>{{ system.systemName }}</span>&ndash;&gt;-->
    <!--        &lt;!&ndash;          </div>&ndash;&gt;-->
    <!--        &lt;!&ndash;        </el-card>&ndash;&gt;-->
    <!--        <el-card :key="system.id" class="routerCard" @click.native="sso(system.systemUrl)">-->
    <!--          <img :src="system.storage.url">-->
    <!--          &lt;!&ndash;          <img src="@/assets/images/hyxt.png" />&ndash;&gt;-->
    <!--          <span>{{ system.systemName }}</span>-->
    <!--        </el-card>-->
    <!--      </template>-->
    <!--    </el-row>-->
  </el-row>
</template>

<script>
import { mapGetters } from 'vuex'
import Background from '@/assets/images/bg.png'
export default {
  data() {
    return {
      systemList: [],
      Background: Background
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'baseApi',
      'userPassword'
    ])
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
  >>> .el-col:nth-child(5n + 1) {
    margin-left: 0;
  }
  >>> .el-col:nth-child(n + 6) {
    margin-top: 20px;
  }
  .routerCardPar {
    /*padding: 0 20%;*/
    width: 900px;
    margin: 20px auto 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .routerCard {
      cursor: pointer;
      width: 200px;
      display: inline-block;
      margin-bottom: 20px;
      &:not(:nth-child(4n)) {
        margin-right: 30px;
      }

      ::v-deep .el-card__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 60px;
        }
        span {
          display: block;
          margin-top: 15px;
        }
      }
    }
  }

  .content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    span {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
    }
    ::v-deep .el-button {
      width: 60%;
    }
  }

  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
