<template>
  <div class="container">
    <header>
      <div class="logo">
        <img src="@/assets/SL.png" alt="圣龙logo" />
        <span>圣龙股份</span>
      </div>
      <div class="title">生产看板</div>
    </header>
    <main>
      <div id="cj1" tabindex="1" @keydown="setData($event,2)">
        <span>机加车间1</span>
      </div>
      <div id="cj2" tabindex="2" @keydown="setData($event,1)">
        <span>机加车间2</span>
      </div>
      <div id="cj3" tabindex="3" @keydown="setData($event,3)">
        <span>装配车间1</span>
      </div>
      <div id="cj4" tabindex="4" @keydown="setData($event,4)">
        <span>装配车间2</span>
      </div>
      <div id="cj5" tabindex="5" @keydown="setData($event,5)">
        <span>装配车间3</span>
      </div>
      <div id="cj6" tabindex="6" @keydown="setData($event,6)">
        <span>装配车间4</span>
      </div>
    </main>
  </div>
</template>
<script>
  export default {
    mounted() {},
    data() {
      return {}
    },
    methods:{
      setData(e,id){
        console.log(e,id);
      }
    }
  }

</script>
<style lang="less" scoped>
  .container {
    width: 100%;
    height: 100%;
    background-color: rgb(8, 31, 72);
    color: white;
    display: grid;
    grid-template-rows: 10% 40% 50%;
    box-sizing: border-box;

    header {
      width: 100%;
      box-shadow: rgb(24 78 135) 0px 0px 3rem inset;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 2rem;

      .logo {
        display: flex;
        align-items: center;
        font-size: 4rem;
        position: absolute;
        left: 10px;

        img {
          height: 6rem;
          width: 6rem;
        }

        span {
          margin-left: 1rem;
        }
      }

      .title {
        font-size: 5rem;
      }

      article {
        font-size: 2rem;
      }
    }

    main {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);

      justify-items: center;



      >div {
        position: relative;
        z-index: 0;
        width: 40rem;
        height: 30rem;
        margin: 20px;
        border-radius: 10px;
        overflow: hidden;
        padding: 2rem;
        display: flex;

        span {
          margin: auto;
          font-size: 7rem;
          color: orange;
          cursor: pointer;



        }


        &::before {
          content: '';
          position: absolute;
          z-index: -2;
          left: -50%;
          top: -50%;
          width: 200%;
          height: 200%;
          background-color: #082049;
          background-repeat: no-repeat;
          background-position: 0 0;
          background-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
          animation: rotate 4s linear infinite;
        }

        &::after {
          content: '';
          position: absolute;
          z-index: -1;
          left: 6px;
          top: 6px;
          width: calc(100% - 12px);
          height: calc(100% - 12px);
          background: #0f2c5d;
          border-radius: 5px;
        }

        &:focus,&:hover,&:focus-visible {
          span {
            color: #fff;
            animation: orange 1.5s ease-in-out infinite alternate;
          }

        }
      }



      @keyframes orange {
        to {
          text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff5722, 0 0 70px #ff5722, 0 0 80px #ff5722, 0 0 100px #ff5722, 0 0 150px #ff5722;

        }

        from {
          filter: brightness(110%);
          text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff5722, 0 0 35px #ff5722, 0 0 40px #ff5722, 0 0 50px #ff5722, 0 0 75px #ff5722;
        }
      }

      @keyframes opacityChange {
        50% {
          opacity: .5;
        }

        100% {
          opacity: 1;
        }
      }

      @keyframes rotate {
        100% {
          transform: rotate(1turn);
        }
      }

    }


  }

</style>
