HTML部分
<div class="TimeVideo">
<!-- 实时视频 -->
<div class="title-btn">
<div
v-for="(item, index) in data"
:key="index"
:class="i == index ? 'title-active' : 'title'"
>
<div>{{ item.name }}</div>
</div>
</div>
<div class="video-cencer">
<div class="video-list" v-if="i == 0">
<div class="video-box">1</div>
<div class="video-box">1</div>
</div>
<div class="video-list" v-if="i == 1">
<div class="video-box">2</div>
<div class="video-box">2</div>
</div>
<div class="video-list" v-if="i == 2">
<div class="video-box">3</div>
<div class="video-box">3</div>
</div>
<div class="video-list" v-if="i == 3">
<div class="video-box">4</div>
<div class="video-box">4</div>
</div>
</div>
</div>
JS部分
data() {
return {
i: 0,
data: [],
timer: null, // 定时器
};
},
created() {},
mounted() {
this.getData();
this.timer = setInterval(() => {
this.i += 1;
if (this.i > 3) {
this.i = 0; // 循环
}
}, 1000);
},
// 销毁定时器
destroyed() {
clearInterval(this.timer);
this.timer = null;
},
methods: {
async getData() {
this.data = [
{ name: "标题一一" },
{ name: "标题一二" },
{ name: "标题一三" },
{ name: "标题一四" },
];
},
},
CSS部分
.TimeVideo {
padding: 10px;
.title-active {
// color: red;
letter-spacing: 2px;
background: #0b59b0;
}
.title {
letter-spacing: 2px;
color: aliceblue;
}
.title-btn {
color: aliceblue;
font-size: 20px;
line-height: 40px;
display: flex;
text-align: center;
justify-content: center;
div {
width: 170px;
border: 1px solid #275f8a;
border-left: none;
}
div:nth-child(1) {
border-left: 1px solid #275f8a;
// background: #0b59b0;
}
}
.video-cencer {
display: flex;
}
.video-list {
display: flex;
padding-top: 10px;
flex-wrap: wrap;
justify-content: space-evenly;
.video-box {
width: 330px;
height: 250px;
// background: #08385d;
margin: 1% 0;
position: relative;
.video-name {
position: absolute;
right: 2%;
top: 10px;
width: 80px;
height: 30px;
background: #000000;
opacity: 0.5;
border-radius: 19px;
color: #ffffff;
font-size: 16px;
text-align: center;
}
video {
width: 330px;
height: 250px;
}
}
}
}
完整代码
<template>
<div class="TimeVideo">
<!-- 实时视频 -->
<div class="title-btn">
<div
v-for="(item, index) in data"
:key="index"
:class="i == index ? 'title-active' : 'title'"
>
<div>{{ item.name }}</div>
</div>
</div>
<div class="video-cencer">
<div class="video-list" v-if="i == 0">
<div class="video-box">1</div>
<div class="video-box">1</div>
</div>
<div class="video-list" v-if="i == 1">
<div class="video-box">2</div>
<div class="video-box">2</div>
</div>
<div class="video-list" v-if="i == 2">
<div class="video-box">3</div>
<div class="video-box">3</div>
</div>
<div class="video-list" v-if="i == 3">
<div class="video-box">4</div>
<div class="video-box">4</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "TimeVideo",
data() {
return {
i: 0,
data: [],
timer: null, // 定时器
};
},
created() {},
mounted() {
this.getData();
this.timer = setInterval(() => {
this.i += 1;
if (this.i > 3) {
this.i = 0; // 循环
}
}, 1000);
},
// 销毁定时器
destroyed() {
clearInterval(this.timer);
this.timer = null;
},
methods: {
async getData() {
this.data = [
{ name: "标题一一" },
{ name: "标题一二" },
{ name: "标题一三" },
{ name: "标题一四" },
];
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.TimeVideo {
padding: 10px;
.title-active {
// color: red;
letter-spacing: 2px;
background: #0b59b0;
}
.title {
letter-spacing: 2px;
color: aliceblue;
}
.title-btn {
color: aliceblue;
font-size: 20px;
line-height: 40px;
display: flex;
text-align: center;
justify-content: center;
div {
width: 170px;
border: 1px solid #275f8a;
border-left: none;
}
div:nth-child(1) {
border-left: 1px solid #275f8a;
// background: #0b59b0;
}
}
.video-cencer {
display: flex;
}
.video-list {
display: flex;
padding-top: 10px;
flex-wrap: wrap;
justify-content: space-evenly;
.video-box {
width: 330px;
height: 250px;
// background: #08385d;
margin: 1% 0;
position: relative;
.video-name {
position: absolute;
right: 2%;
top: 10px;
width: 80px;
height: 30px;
background: #000000;
opacity: 0.5;
border-radius: 19px;
color: #ffffff;
font-size: 16px;
text-align: center;
}
video {
width: 330px;
height: 250px;
}
}
}
}
</style>