<template>
  <div class="entry">
    <div class="entry-title">应急联动综合管理服务平台</div>
    <div class="entry-con">
      <el-row :gutter="36">
        <el-col :span="8">
          <div
            class="cubes item01"
            @click="$toPush(titleArray[0].path, titleArray[0].meta.selected)"
          >
            <span>{{titleArray[0].meta.title}}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div
            class="cubes item02"
            @click="$toPush(titleArray[1].path, titleArray[1].meta.selected)"
          >
            <span>{{titleArray[1].meta.title}}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div
            class="cubes item03"
            @click="$toPush(titleArray[2].path,  titleArray[2].meta.selected)"
          >
            <span>{{titleArray[2].meta.title}}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="36">
        <el-col :span="8">
          <div
            class="cubes item04"
            @click="$toPush(titleArray[3].path, titleArray[3].meta.selected)"
          >
            <span>{{titleArray[3].meta.title}}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div
            class="cubes item05"
            @click="$toPush(titleArray[4].path, titleArray[4].meta.selected)"
          >
            <span>{{titleArray[4].meta.title}}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div
                  class="cubes item010"
                  @click="$toPush(titleArray[9].path, titleArray[9].meta.selected)"
          >
            <span>{{titleArray[9].meta.title}}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="36">
        <el-col :span="8">
          <div
            class="cubes item06"
            @click="$toPush(titleArray[5].path, titleArray[5].meta.selected)"
          >
            <span>{{titleArray[5].meta.title}}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div
            class="cubes item07"
            @click="$toPush(titleArray[6].path,  titleArray[6].meta.selected)"
          >
            <span>{{titleArray[6].meta.title}}</span>
          </div>
        </el-col>
        <!--<el-col :span="6">
          <div
            class="cubes item08"
            @click="$toPush(titleArray[7].path,  titleArray[7].meta.selected)"
          >
            <span>{{titleArray[7].meta.title}}</span>
          </div>
        </el-col>-->
        <el-col :span="8">
          <div
            class="cubes item09"
            @click="$toPush(titleArray[8].path, titleArray[8].meta.selected)"
          >
            <span>{{titleArray[8].meta.title}}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import "@/utils/default.scss";
.entry {
  width: 100%;
  height: 100vh;
  overflow:hidden;
  /*background: linear-gradient(
    to bottom,
    #191689,
    #0e1241,
    #091223,
    #0e1241,
    #191689
  );*/
  background-image: url("../assets/leftbackground.png");
}
.entry-con {
  width: 1300px;
  margin: 0 auto;
  .el-row {
    margin-bottom: 36px;
  }
}
.entry-title {
  font-size: 55px;
  font-family: "黑体";
  color: #ffffff;
  width: 100%;
  text-align: center;
  padding-top: 20px;
  line-height: 2;
}
.cubes {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-position: 95% 85%;
  background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
  &:hover {
    box-shadow: 1px 1px 7px 6px #c6ddf4;
    span {
      font-size: 40px;
    }
  }
  span {
    font-size: 30px;
    font-family: "黑体";
    color: #ffffff;
    position: absolute;
    top: 30px;
    left: 30px;
  }
}

@for $num from 1 through 10 {
  $cl: nth($colors, $num);
  .item0#{$num} {
    background-image: url("../assets/sicon#{$num}.png"),
      linear-gradient(130deg, $cl, lighten($cl, 30%));
  }
}
</style>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import Layout from "../views/Layout/index.vue";
import METHOD from "@/utils/methods";

@Component({
  components: {}
})
export default class All extends Vue {
  @Getter("moudleArr") getModuleArr: any;
  @Provide() titleArray: any = [];

  beforeCreate() {
    // let token = localStorage.getitleem('token');
    //     if (token == undefined ||token == null || token == '') {
    //        this.$message.error('未登录,即将返回登录页！')
    //        window.open(window.location.origin + process.env.BASE_path  + 'login','_self')
    //        return false
    //     }
  }
  created() {
    if( this.getModuleArr.length > 0) this.titleArray = [...this.getModuleArr]
    else this.titleArray = [...METHOD.titleArray];
  }
}
</script>
