You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
405 lines
9.1 KiB
405 lines
9.1 KiB
<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>
|