ckt-kanban/src/views/Home.vue

<template>
  <div class="container">
    <div style="width:100%;height: 25%;text-align:center;">
      <TimeC></TimeC>
    </div>
    <div class="tv_home">

      <!--      <router-link class="list1" :to="{ path: '/welcome'}">-->
      <!--        <span>{{ row2 }}</span>-->
      <!--      </router-link>-->
      <!--      <router-link class="list2" :to="{ path: '/welcome'}">-->
      <!--        <span>功能1</span>-->
      <!--      </router-link>-->
      <!--      <router-link class="list3" :to="{ path: '/welcome'}">-->
      <!--        <span>功能1</span>-->
      <!--      </router-link>-->
      <!--      <router-link class="list4" :to="{ path: '/welcome'}">-->
      <!--        <span>功能1</span>-->
      <!--      </router-link>-->
      <!--      <router-link class="list5" :to="{ path: '/welcome'}">-->
      <!--        <span>功能1</span>-->
      <!--      </router-link>-->
      <!--      <router-link class="list6" :to="{ path: '/welcome'}">-->
      <!--        <span>功能1</span>-->
      <!--      </router-link>-->
      <!--      <router-link class="list7" :to="{ path: '/welcome'}">-->
      <!--        <span>功能1</span>-->
      <!--      </router-link>-->
      <!--      <router-link class="list8" :to="{ path: '/welcome'}">-->
      <!--        <span>功能1</span>-->
      <!--      </router-link>-->
      <!--       <router-link class="list9" :to="{ path: '/welcome'}">-->
      <!--        <span>功能1</span>-->
      <!--      </router-link>-->
      <!--      <router-link class="list10" :to="{ path: '/welcome'}">-->
      <!--        <span>功能1</span>-->
      <!--      </router-link>-->
      <!--      <a class="list11" href="javascript:void(0);" @click="play">-->
      <!--        <span>功能1</span>-->
      <!--      </a>-->

      <!--<router-link class="list12" :to="{ path: '/welcome'}">-->
      <!--        <span>功能1</span>-->
      <!--      </router-link>-->

      <!--      <router-link class="list13" :to="{ path: '/welcome'}">-->
      <!--        <span>功能1</span>-->
      <!--      </router-link>-->

      <!-- <router-link class="list14" :to="{ path: '/welcome'}">-->
      <!--        <span>功能1</span>-->
      <!--        -->
      <!--      </router-link>-->
    </div>
    <p class="clientCode">{{ clientCode }}</p>

  </div>
</template>

<script>
  import TimeC from "./time"
export default {
  name: 'Home',
  data() {
    return {
      row: "",
      row2: "",
      nextPage: null,
      countTimer: null,
      countTimer2: null,
      jumper:null,
    }
  },
  components: {
    TimeC
  },
  methods: {
    //查询跳转配置并定时跳转
    play() {
      let ip=localStorage.getItem("tvIP")
      let that = this;
      $.ajax({
        url: "/board/getJumpConfig",
        type: "post",
        data: {"boardName": 'home',"ip":ip},
        dataType: "json",
        success: (data) => {
          if (data.rows2 != "" && data.rows2 != null) {
            that.nextPage = data.rows2;
            if (data.rows != "" && data.rows != null) {
              let jumpTime = Number(data.rows);
              if (jumpTime > 0) {
                that.countTimer = window.setTimeout(() => {
                  that.jump();
                }, 1000 * jumpTime);
              }
            }
          }
        }
      })
    },
    toPlay(){
      this.countTimer2=window.setInterval(() => {
        this.play();
      }, 5000 );
    },
    getIp(){
      $.ajax({
        url: "/board/getIpFirst",
        type: "post",
        data: {},
        dataType: "json",
        success: (data) => {
          localStorage.setItem("tvIP",data.row)

        }
      }).fail(() => {
        localStorage.setItem("tvIP","1.1.1.1")

      })
    },
    jump() {
        $.ajax({
          url: "/board/kanKanYouMeiYouDiaoXian",
          type: "post",
          data: {},
          dataType: "json",
          success: (data) => {
            this.$router.push(this.nextPage);
          }
        }).fail(() => {
          this.$router.push("/")
        })

    },
    // doThis(){
    //   let that = this;
    //   this.jumper = window.setTimeout(() => {that.play()},1000*4.9);
    // }
  },
  mounted() {
    this.getIp();
    this.play();
    this.toPlay();
  },
  beforeDestroy() {
    clearTimeout(this.countTimer);
    clearInterval(this.countTimer2);
    // console.log("触发钩子函数")
  },
};
</script>

<style scoped>
/*.container {*/
/*  background: url("http://gnmro-img.oss-cn-shanghai.aliyuncs.com/tvimg/vmi_tv_bg1.jpg!ora")*/
/*    #000 no-repeat center center;*/
/*  background-size: cover;*/
/*  height: 100vh;*/
/*  width: 100vw;*/
/*  font-size: 16px;*/
/*}*/

.clientCode {
  position: absolute;
  right: 0;
  bottom: 0;
  color: white;
  font-size: 13px;
  padding: 5px;
}

.tv_home {
  position: relative;
  color: #fff;

  font-weight: bold;
  text-align: center;
  width: 41.5rem;
  height: 22.9rem;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  transform: translateY(-50%);
}

.tv_home a {
  display: block;
  position: absolute;
  border-radius: 2px;
  transition: transform 0.3s, box-shadow 0.3s;

  overflow: hidden;
  color: #fff;
  text-decoration: none;
  box-shadow: 0px 0px 1rem rgba(255, 213, 51, 0);
}

.tv_home a:hover::before,
.tv_home a:focus::before,
.tv_home a:active::before {
  background-color: #fff;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  animation: light 0.3s alternate forwards;
  -webkit-animation: light 0.3s alternate forwards;
}

@keyframes light {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes light {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    opacity: 0;
  }
}

.tv_home a span {
  position: absolute;
  top: 50%;
  color: #fff;
  transform: translateY(-50%);
  display: block;
  text-align: center;
  width: 100%;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}

.tv_home a:focus,
.tv_home a:hover,
.tv_home a:active {
  transform: scale(1.15);
  /* transition: all 0.2s; */
  z-index: 999;
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 1);
  border: 2px solid #fff;
  color: #fff;
  text-decoration: none !important;
}

.list1 {
  width: 10rem;
  height: 9.5rem;
  /* background-color: #de4d4d; */
  left: 0;
  top: 0;
  line-height: 1.4;
  font-size: 1.4rem;
  background: -webkit-linear-gradient(120deg, #de4d4d, #cf3a3c);
  background: linear-gradient(120deg, #de4d4d, #cf3a3c);
}

.list2 {
  width: 10rem;
  height: 9.5rem;
  background-color: #c050a0;
  background: -webkit-linear-gradient(120deg, #c050a0, #aa378a);
  background: linear-gradient(120deg, #c050a0, #aa378a);
  left: 10.5rem;
  top: 0;
  line-height: 1.4;
  font-size: 1.4rem;
}

.list3,
.list4,
.list5,
.list6 {
  width: 10rem;
  height: 4.5rem;
  line-height: 1.2;
  font-size: 1rem;
}

.list3 {
  background: -webkit-linear-gradient(120deg, #4bca99, #39b686);
  background: linear-gradient(120deg, #4bca99, #39b686);
  /* background-color: #4bca99; */
  left: 21rem;
  top: 0;
}

.list4 {
  /* background-color: #47cc76; */
  background: -webkit-linear-gradient(120deg, #47cc76, #31b05e);
  background: linear-gradient(120deg, #47cc76, #31b05e);
  left: 31.5rem;
  top: 0;
}

.list5 {
  /* background-color: #4fb251; */
  background: -webkit-linear-gradient(120deg, #4fb251, #369a39);
  background: linear-gradient(120deg, #4fb251, #369a39);
  left: 21rem;
  top: 5rem;
}

.list6 {
  /* background-color: #66b72a; */
  background: -webkit-linear-gradient(120deg, #66b72a, #59a520);
  background: linear-gradient(120deg, #66b72a, #59a520);
  left: 31.5rem;
  top: 5rem;
}

.list7,
.list8,
.list9,
.list10,
.list11 {
  width: 7.9rem;
  height: 8rem;
  top: 10rem;
  line-height: 1.4;
  font-size: 1.15rem;
}

.list12,
.list13, .list14 {
  width: 13.5rem;
  height: 4.5rem;
  top: 18.5rem;
  line-height: 1.4;
  font-size: 1.15rem;
}

.list12 {
  background: -webkit-linear-gradient(120deg, #3694f8, #704afb);
  background: linear-gradient(120deg, #3694f8, #704afb);


  left: 0;
}

.list13 {
  background: -webkit-linear-gradient(120deg, #704afb, #3694f8);
  background: linear-gradient(120deg, #704afb, #3694f8);
  left: 14rem;
}

.list14 {
  background: -webkit-linear-gradient(120deg, #1cc0f6, #20d9b8);
  background: linear-gradient(120deg, #1cc0f6, #20d9b8);
  right: 0;
}

.list7 {
  /* background-color: #0c5782; */
  background: -webkit-linear-gradient(120deg, #1d6c98, #0c5782);
  background: linear-gradient(120deg, #1d6c98, #0c5782);
  left: 0;
}

.list8 {
  /* background-color: #2293d5; */
  background: -webkit-linear-gradient(120deg, #2293d5, #0f78b4);
  background: linear-gradient(120deg, #2293d5, #0f78b4);
  left: 8.4rem;
}

.list9 {
  /* background-color: #e8af27; */
  background: -webkit-linear-gradient(120deg, #e8af27, #cc9513);
  background: linear-gradient(120deg, #e8af27, #cc9513);
  left: 16.8rem;
}

.list10 {
  /* background-color: #ea8921; */
  left: 25.2rem;
  background: -webkit-linear-gradient(120deg, #ea8921, #cf7413);
  background: linear-gradient(120deg, #ea8921, #cf7413);
}

.list11 {
  /* background-color: #4f99b1; */
  background: -webkit-linear-gradient(120deg, #4f99b1, #38859e);
  background: linear-gradient(120deg, #4f99b1, #38859e);
  left: 33.6rem;
}
</style>