<template>
  <!-- 背景 -->
  <div class="container">
    <!-- 顶部 -->
    <div class="top">
      <div class="top_title">临湘高新区智慧园区平台</div>
      <div class="headerRight" @click="handleOut()">
          <span>退出系统</span>
      </div>
    </div>
    <!-- card -->
    <div class="main">
      <div class="box">
        <div class="div-icon1"></div>
        <div class="title">园区安全风险管控平台</div>
        <div class="btn" @click="handleUrl('http://61.240.213.212:5000/Home/Index')">
            点击进入
        </div>
      </div>
      <div class="box">
        <div class="div-icon2"></div>
        <div class="title">五好园区建设平台</div>
        <div class="btn" @click="handleUrl('zhihui')">
            点击进入
        </div>
      </div>
      <div class="box">
        <div class="div-icon3"></div>
        <div class="title">园区生态环境治理平台</div>
        <div class="btn">
          <a href="http://61.240.213.11:19082/index" target="_blank"
              >点击进入</a
            >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    //此处为了怕不影响其他页面，故单独使用，也还可以在main.js里面放开rem
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt =
          "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 100 * (clientWidth / 1920) + "px";
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener("DOMContentLoaded", recalc, false);
      recalc();
    })(document, window);
    this.token = this.$store.getters.token;
  },
  methods: {
    handleOut() {
      this.$store.dispatch("FedLogOut");
      location.reload();
    },
    handleUrl(url) {
      if (url) {
        window.open(url + `?token=${this.$store.getters.token}`);
      }
    },
    handleUrlHuanbao(url) {
      if (url) {
        window.open(
          `http://61.240.213.11:19082/${url}?token=${this.$store.getters.token}`
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  /* width: 100%; */
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/bg.png);
  background-size: 100% 100%;
}
.top {
  background-image: url("../assets/images/top.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 83px;
  position: relative;
  .top_title {
    text-align: center;
    font-size: .4rem;
    line-height: 87.25px;
    color: #fff;
    letter-spacing: 8px;
    box-sizing: border-box;
  }
  .headerRight {
    font-size: 16px;
    cursor: pointer;
    z-index:9;
    position: absolute;
    right: 2%;
    top:20%;
    color: #fff;
    width:80px;
    text-align: center;
    padding-bottom: 4px;
    border-bottom: 1px solid #409eff;
    :hover{
      color: red;
    }
  }
}

.main{
  width: 100%;
  margin-top: 160px;
  // background: red;
  display: flex;
  justify-content: space-evenly;

  .box{
    width: 20%;
    height: 5.6rem;
    background-image: url(../assets/images/blueBg-small.png);
    background-size:100%;
    background-repeat: no-repeat;
    .div-icon1{
      width: 100%;
      height: 3rem;
      background-image: url(../assets/images/1.png);
      background-size: 80%;
      background-position:center;
      background-repeat: no-repeat;
    }
    .div-icon2{
      width: 100%;
      height: 3rem;
      background-image: url(../assets/images/2.png);
      background-size: 80%;
      background-position:center;
      background-repeat: no-repeat;
    }
    .div-icon3{
      width: 100%;
      height: 3rem;
      background-image: url(../assets/images/3.png);
      background-size: 80%;
      background-position:center;
      background-repeat: no-repeat;
    }
    .title{
      width: 100%;
      color: #fff;
      font-size: .3rem;
      text-align: center;
    }

    .btn{
      width: 45%;
      height: 35%;
      color: #fff;
      text-align: center;
      padding-top:2%;
      background-image: url(../assets/images/small.png);
      background-size: 100%;
      background-repeat: no-repeat;
      cursor: pointer;
      margin: 10% auto;
      font-size: .2rem;
    }
  }
}

</style>
