<template>
  <!-- 背景 -->
  <div class="bg">
    <!-- 顶部 -->
    <div class="top">
      <div class="top_title">临湘高新区智慧园区平台</div>
      <div class="headerRight" @click="handleOut()">
          <span>退出系统</span>
        </div>
    </div>
    <!-- 卡片 -->
    <div class="card">
      <div class="card1">
        <div class="Content">
          <div class="photo"></div>
          <div class="title">安全生产管控平台</div>
          <div
            class="btn"
            @click="handleUrl('http://61.240.213.212:5000/Home/Index')"
          >
            <div>点击进入</div>
          </div>
        </div>
      </div>
      <div class="card2">
        <div class="Content">
          <div class="photo1"></div>
          <div class="title">数字地图</div>
          <div class="btn" @click="handleUrl('zhihui')">
            <div>点击进入</div>
            <!-- <a href=http://61.240.213.11:19085/zhihui target="_blank">
              点击进入
            </a> -->
            <!-- <a href="http://61.240.213.11:19082/gailan" target="_blank">
              点击进入
            </a> -->
          </div>
        </div>
      </div>
      <div class="card2">
        <div class="Content">
          <div class="photo2"></div>
          <div class="title">生态环保监测平台</div>
          <div class="btn">
            <a href="http://61.240.213.11:19082/index" target="_blank"
              >点击进入</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";

export default {
  data() {
    return {};
  },
  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%;
}
.bg {
  background-image: url(../assets/images/bg.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  min-width: 1200px;
  margin: 0;
  height: 100%;
}
.top {
  background-image: url("../assets/images/top.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 83px;
  position: relative;
}
.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;
  }
}
.top_title {
  text-align: center;
  font-size: 32px;
  line-height: 87.25px;
  color: #fff;
  letter-spacing: 8px;
}
.card {
  display: flex;
  // background-color: pink;
  margin-top: 160px;
  height: 620px;
}
.card1 {
  position: relative;
  height: 630px;
  width: 430px;
  margin-left: 396px;
  background-image: url(../assets/images/blueBg-small.png);
  background-size: 84%;
  background-repeat: no-repeat;
}
.card2 {
  height: 630px;
  width: 430px;
  margin-left: -9px;
  background-image: url(../assets/images/blueBg-small.png);
  background-size: 84%;
  background-repeat: no-repeat;
}
.photo {
  width: 300px;
  height: 200px;
  background-image: url(../assets/images/1.png);
  margin-left: 13px;
  margin-top: 50px;
  background-size: 84%;
  background-repeat: no-repeat;
}
.photo1 {
  width: 300px;
  height: 200px;
  background-image: url(../assets/images/2.png);
  margin-left: 13px;
  margin-top: 50px;
  background-size: 84%;
  background-repeat: no-repeat;
}
.photo2 {
  width: 300px;
  height: 200px;
  background-image: url(../assets/images/3.png);
  margin-left: 13px;
  margin-top: 50px;
  background-size: 84%;
  background-repeat: no-repeat;
}
.Content {
  margin-left: 25px;
  margin-top: 25px;
  width: 313px;
  height: 410px;
  // background-color: pink;
}
.title {
  text-align: center;
  font-size: 36px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 68px;
}
.btn {
  color: #fff;
  text-align: center;
  margin-left: 75px;
  margin-top: 60px;
  height: 36px;
  width: 135px;
  background-image: url(../assets/images/small.png);
  background-repeat: no-repeat;
  line-height: 33px;
  cursor: pointer;
}
</style>
