废话不多说,直接上代码
效果图如下
点击右上角按钮,即可切换4宫格,9宫格,16宫格
html部分
<!-- 切换按钮 --><div class="center"><div id="video"><label class="label1"><input type="radio" class="one" value=4 v-model="isActive"/><div class="option1"></div></label><label class="label2"><input type="radio" class="four" value=9 v-model="isActive"/><div class="option2"></div></label><label class="label3"><input type="radio" class="nine" value=16 v-model="isActive"/><div class="option3"></div></label><h1>{{isActive}}</h1><!--图片切换--><div class="main2"><div v-bind:class="[isActive == 4 ? 'quarter-div': '',isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9': '', 'yellow']"><!-- <img :src="selectImg?selectImg:require('../../assets/videoSurveillance/1.png')" alt=""> --><img src='../../assets/videoSurveillance/1.png' alt=""></div><div v-bind:class="[isActive == 4 ? 'quarter-div': '',isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9': '', 'yellow']"><img src="../../assets/videoSurveillance/2.png" alt=""></div><div v-bind:class="[isActive == 4 ? 'quarter-div': '',isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9': '', 'yellow']"><img src="../../assets/videoSurveillance/3.png" alt=""></div><div v-bind:class="[isActive == 4 ? 'quarter-div': '',isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9': '', 'yellow']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 9 || isActive == 16" v-bind:class="[isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9':'']"><img src="../../assets/videoSurveillance/1.png" alt=""></div><div v-show="isActive == 9 || isActive == 16" v-bind:class="[isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9':'']"><img src="../../assets/videoSurveillance/2.png" alt=""></div><div v-show="isActive == 9 || isActive == 16" v-bind:class="[isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9':'']"><img src="../../assets/videoSurveillance/3.png" alt=""></div><div v-show="isActive == 9 || isActive == 16" v-bind:class="[isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 9 || isActive == 16" v-bind:class="[isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/1.png" alt=""></div><div v-show="isActive == 16" v-bind:class="[isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 16" v-bind:class="[isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 16" v-bind:class="[isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 16" v-bind:class="[isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 16" v-bind:class="[isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 16" v-bind:class="[isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 16" v-bind:class="[isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div></div></div></div>
css部分
.center{width: 14.7rem;height: 8.4rem;position: relative;margin-top: 0.8rem;margin-left: 0.3rem;}/* #video{width: 100%;height: 100%;} */.center div{object-fit: initial;}.center .mains {width: 100%;height: 100%;position: absolute;}#video p input{position: absolute;top: -.56rem;right: 1.52rem;/* width: .5rem;height: .5rem; */}#video .four{position: absolute;top: -.56rem;right: .80rem;background: url('../../assets/videoSurveillance/four.png') no-repeat 100%!important;background-size:.50rem .50rem; }#video .nine{position: absolute;top: -.56rem;right: 0.06rem;}.center .main2 {width: 100%;height: 100%;position: absolute;top: 0;}.center .quarter-div9 {width: 25%;height: 25%;float: left;}.center .quarter-div4 {width: 33.33%;height: 33.33%;float: left;}.center .quarter-div {float: left;width: 50%;height: 50%;}#video .main2 div img{width: 100%;height: 100%;}/* 修改input样式 */#video .label1 {position: absolute;width: .70rem;height: .58rem;top: -.60rem;right: 1.25rem;width: .36rem;height: .36rem;}#video .label2 {position: absolute;width: .70rem;height: .58rem;top: -.60rem;right: .67rem;width: .36rem;height: .36rem;}#video .label3 {position: absolute;width: .70rem;height: .58rem;top: -.60rem;right: .06rem;width: .36rem;height: .36rem;}/* 第一个按钮图片 */#video .option1 {width: .36rem;height: .36rem;position: absolute;top: .10rem;left: 0rem;background-size: cover;background: url('../../assets/videoSurveillance/four.png') no-repeat;background-size: cover;}#video .one[type="radio"] {display: inline-block;margin-right: -0.03rem;opacity: 0;width: .36rem;height: .36rem;}#video .one[type="radio"]:checked+.option1 {background: url('../../assets/videoSurveillance/four.png') no-repeat;background-size: cover;}/* 第二个按钮图片 */#video .option2 {width: .36rem;height: .36rem;position: absolute;top: .10rem;left: 0rem;background-size: cover;background: url('../../assets/videoSurveillance/six.png') no-repeat;background-size: cover;}#video .four[type="radio"] {display: inline-block;margin-right: -.03rem;opacity: 0;width: .36rem;height: .36rem;}#video .four[type="radio"]:checked+.option2 {background: url('../../assets/videoSurveillance/six.png') no-repeat;background-size: cover;}/* 第三个按钮图片 */#video .option3 {width: .36rem;height: .36rem;position: absolute;top: .10rem;left: 0rem;background-size: cover;background: url('../../assets/videoSurveillance/nine.png') no-repeat;background-size: cover;}#video .nine[type="radio"] {display: inline-block;margin-right: -0.03rem;opacity: 0;width: .36rem;height: .36rem;}#video .nine[type="radio"]:checked+.option3 {background: url('../../assets/videoSurveillance/nine.png') no-repeat;background-size: cover;}
js部分
export default {// el: '#video',// data: {isActive : 1},name: "videoSurveillance",data() {return {}}```
