<template>
  <div class="core">
    <div class="core-header"></div>
    <div class="core-box">
      <div @click="goTo(1)" style="margin-left: 0px">
        <img src="../../assets/img/core/1.png">
        <div>河道水务</div>
      </div>
      <div>
        <img class="zhihui" src="../../assets/img/core/2.png">
        <div>城市违建</div>
      </div>
      <div>
        <img class="zhihui" src="../../assets/img/core/3.png">
        <div>电力检修</div>
      </div>
      <div>
        <img class="zhihui" src="../../assets/img/core/4.png">
        <div>水质监测</div>
      </div>
    </div>
    <div class="core-foot">
      <a data-v-42b89d7e="" href="http://www.beian.miit.gov.cn" target="_blank">@2019-2021-拓恒航空 -苏ICP备19054947号-2 版权所有 @南京拓恒航空科技有限公司</a>
    </div>
  </div>
</template>

<script>
  export default {
    name: "core",
    created() {
    },
    methods: {
      goTo(type){
        if(type==1){
          this.$router.push({path:'/login'})
        }
      }
    }
  }
</script>

<style lang="less">
  .core {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: #ffffff;

    .core-header {
      background-image: url('../../assets/img/core/shouye.jpg');
      background-repeat: round;
      background-size: cover;
      background-position: inherit;
      width: 100%;
    }

    @media screen and (max-width: 1800px) {
      .core-header {
        height: 230px;
      }
    }

    @media screen and (min-width: 1800px) {
      .core-header {
        height: 323px;
      }
    }

    .core-box {
      display: flex;
      justify-content: center;

      > div {
        cursor:pointer;
        > img {
          width: 100%;
          background-color: #ffffff;
        }

        .zhihui{
          -webkit-filter: grayscale(100%);
          -moz-filter: grayscale(100%);
          -ms-filter: grayscale(100%);
          -o-filter: grayscale(100%);

          filter: grayscale(100%);

          filter: gray;
        }


        > div {
          margin-top: 20px;
          font-family: PingFangSC-Regular;
          color: #333333;
          text-align: center;
        }
      }
    }

    @media screen and (max-width: 1800px) {
      .core-box {
        margin-top: 76px;

        > div {
          text-align: center;
          width: 123px;
          margin-left: 70px;

          > img {
            height: 135px;
          }

          > div {
            font-size: 20px;
            line-height: 28px;
          }
        }
      }
    }

    @media screen and (min-width: 1800px) {
      .core-box {
        margin-top: 115px;

        > div {
          width: 154px;
          margin-left: 139px;

          > img {
            height: 177px;
          }

          > div {
            font-size: 22px;
            line-height: 30px;
          }
        }
      }
    }

    .core-foot {
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #666666;
      line-height: 50px;
      position: absolute;
      bottom: 0px;
      background: #EEEEEE;
      text-align: center;
      width: 100%;
    }
  }
</style>
