vue 手风琴+分页

 

<template>
    <div class="boxItem">
        <div class="box">
            <ul v-for="(item, i) in list.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :key="i">
                <li :class="{ active: currentIndex == i }"  @mouseover="tabList(i)">
                    <div class="imgbox" @click="imgClick(i)">
                        <div class="equip-box">
                            <div class="equip-info1">
                                <div class="equip-item1">
                                    <div class="label">设备编号:</div>
                                    {{item.equipNum}}
                                </div>
                            </div>
                            <div class="equip-info2">
                                <div class="equip-item2">
                                    <div class="label">害虫种类:</div>
                                    {{item.type}}
                                </div>
                                <div class="equip-item2">
                                    <div class="label">害虫数量:</div>
                                    {{item.insectNum}}只
                                </div>
                                <div class="equip-item2">
                                    <div class="label">拍摄时间:</div>
                                    {{item.time}}
                                </div>
                            </div>
                        </div>
                        <img :src=item.img>
                    </div>
                    <div class="equip-info">
                        <div class="equip-item">
                            <div class="label">设备编号:</div>
                            {{item.equipNum}}
                        </div>
                        <div class="equip-item">
                            <div class="label">拍摄时间:</div>
                            {{item.time}}
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="boxBottom">
            <el-pagination
                    background
                    :current-page="currentPage"
                    :page-size='pageSize'
                    layout="total, prev, pager, next"
                    :total="list.length"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            >
            </el-pagination>

        </div>
    </div>
</template>

<script>
    import chartBox1 from '@/components/agriculturalServiceResource/chartBox1';
    import bus from "@/utils/bus";
    export default {
        name: "insect",
        components: {
            chartBox1,
        },
        data(){
            return{
                currentIndex:0,
                list: [
                    {
                        rank: '1',
                        img: require('../../../../img/planting/siqing/insect1.png'),
                        equipNum: "023",
                        type:'菜虫',
                        insectNum:160,
                        time:'2023-05-21'
                    },{
                        rank: '2',
                        img: require('../../../../img/planting/siqing/insect1.png'),
                        equipNum: "024",
                        type:'菜虫',
                        insectNum:160,
                        time:'2023-05-21'
                    },{
                        rank: '3',
                        img: require('../../../../img/planting/siqing/insect1.png'),
                        equipNum: "025",
                        type:'菜虫',
                        insectNum:160,
                        time:'2023-05-21'
                    },{
                        rank: '4',
                        img: require('../../../../img/planting/siqing/insect1.png'),
                        equipNum: "026",
                        type:'菜虫',
                        insectNum:160,
                        time:'2023-05-21'
                    },{
                        rank: '5',
                        img: require('../../../../img/planting/siqing/insect1.png'),
                        equipNum: "027",
                        type:'菜虫',
                        insectNum:160,
                        time:'2023-05-21'
                    },{
                        rank: '6',
                        img: require('../../../../img/planting/siqing/insect1.png'),
                        equipNum: "028",
                        type:'菜虫',
                        insectNum:160,
                        time:'2023-05-21'
                    },
                ],
                currentPage: 1, //初始页
                pageSize: 3, //    每页的数据

            }
        },
        methods:{
            tabList(i){
                this.currentIndex = i
            },
            imgClick(i){
                // console.log(this.list[i].proInfo,'2222')
                //bus.$emit("showCompanyDialog", this.list[i].proInfo);
            },
            handleSizeChange(val) {
                this.pageSize = val
            },
            handleCurrentChange(val) {
                this.currentPage = val
            },

        }
    }
</script>

<style scoped>
    .boxItem{
        height: calc(100% - 2vh);
    }
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 100%;
        height: 86%;
        padding: 0 2vw;
        /*border: 1px solid pink;*/
        overflow: hidden;
    }
    ul {
        list-style: none;
    }
    li {
        position: relative;
        /*width: 100%;*/
        height: 3vh;
        line-height: 3vh;
        color: #fff;
        font-size: 10px;
        transition: all 0.5s;
        background: url("../../../../img/agriculturalServiceResource/main1/bg01.png");
        background-size: 100% 100%;
        margin-top: 0.8vh;
    }

    li>p {
        position: absolute;
        /*width: 100%;*/
        height: 3vh;
        line-height: 3vh;
        bottom: 0;
        z-index: 9;
        opacity: 1;
        padding-left: 0.5vw;
        cursor: pointer;
    }
    li>p span {
        font-weight: 700;
        color: #fff;
        margin-right: 10px;
    }
    .imgbox {
        position: relative;
        width: 100%;
        height: 0;
        /* z-index: 2; */
        border-radius: 8px;
        opacity: 0;
        transition: all 0.5s;
    }
    .imgbox .imgname {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 0;
        opacity: 0;
        line-height: 2.5vh;
        color: #fff;
        cursor: pointer;
        background: rgba(64, 71, 75, 0.65);
    }
    .imgname .name{
        position: absolute;
        left: 0;
        /*padding-left: 0.5vw;*/
    }
    .imgname span{
        display: inline-block;
        width: 1.25vw;
        margin-right: 0.5vw;
        background: url("../../../../img/agriculturalServiceResource/main1/leftIcon.png");
        background-size: 100% 100%;
    }
    .imgbox img {
        width: 100%;
        height: 100%;
    }

    .active {
        height: 10.5vh;
    }
    .active .imgbox {
        height: 10.5vh;
        opacity: 1;
    }
    .active .equip-info {
        height: 0;
        opacity: 0;
    }

    .boxBottom{
        width: 100%;
        height: 3vh;
        /*border: 1px solid red;*/
        padding: 0.4vh 1vw 0;
        box-sizing: border-box;
        text-align: right;
        position: absolute;
        right: 0.8vw;
    }

</style>
<style>
    .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
        min-width: 22px;
    }
    .el-pagination button{
        height: 22px;
        line-height: 22px;
    }
    .el-pagination span:not([class*=suffix]){
        height: 22px;
        line-height: 22px;
        /*width: 3vw;*/
        position: absolute;
        left: 3vw;
    }
    .el-pager li{
        height: 22px;
        line-height: 22px;
    }
    .el-pagination__total{
        margin-right: 6vw;
        color: #3662b1;
    }
    .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
        background-color: transparent;
        background-image: url("../../../../img/agriculturalServiceResource/icon02.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
    }
    .el-pagination.is-background .el-pager li:not(.disabled).active{
        background-color: transparent;
        background-image: url("../../../../img/agriculturalServiceResource/icon01.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .el-pagination.is-background .btn-next.disabled, .el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev.disabled, .el-pagination.is-background .btn-prev:disabled, .el-pagination.is-background .el-pager li.disabled{
        color: #ffffff;
    }
    .el-pagination.is-background .el-pager li{
        color: #2e82d4;
    }
</style>
<style lang="scss" scoped>
    .equip-box{
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        .equip-info1{
            width: 100%;
            height: 7vh;
            margin-top: 0.5vh;
            .equip-item1{
                width: 100%;
                height: 100%;
                display: flex;
                .label{
                    width: 4vw;
                }
            }
        }
        .equip-info2{
            width: 100%;
            height: 3vh;
            background: rgba(11, 11, 11, 0.51);
            display: flex;
            .equip-item2{
                width: auto;
                height: 100%;
                display: flex;
                .label{
                    width: 4vw;
                }
            }
        }
    }
    .equip-info {
        position: absolute;
        line-height: 3vh;
        bottom: 0;
        opacity: 1;
        padding-left: 0.5vw;
        cursor: pointer;
        width: 100%;
        height: 3vh;
        border-radius: 1vh;
        display: flex;
        background: #123981;
        .equip-item{
            width: 50%;
            height: 100%;
            display: flex;
            .label{
                width: 4vw;
            }
        }
    }
</style>