jili2-screen/src/apps/home/components/smodule/smodule102.vue

<template>
    <div class="module-main">
        <div class="module-box">
            <div class="main-top-box">
                <div class="module-public module-bottom-box">
                    <div class="header">巡更现场照片</div>
                    <div class="bottom-content-box">
                        <div v-for="(item,index) in imgs.slice(0, Math.ceil(imgs.length / 2))" :key="index" class="imgbox">
                            <img :src="item.images" alt="" @click="img(item.images)">
                            <div class="name">{{item.addr}}</div>
                        </div>
                    </div>
                    <div class="bottom-content-box">
                        <div v-for="(item2,index2) in imgs.slice(Math.ceil(imgs.length / 2))" :key="index2" class="imgbox">
                            <img :src="item2.images" alt="" @click="img(item2.images)">
                            <div class="name">{{item2.addr}}</div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div></template>

<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import api from '../../api';

@Component({
    props: {
        data: {
            type: Object,
            default: null,
        },
    },
})
export default class Echarts extends Vue {
    imgs = []

    created() {
        this.getPatrolImg3();

        setInterval(() => {
            this.getPatrolImg3();
        }, 15000);
    }   

    getPatrolImg3() {
        api.getPatrolImg3().then((res) => {
            this.imgs = res.data;
        }).catch(() => {}).finally(() => {
        });
    }

    img(val) {
        this.$alert(`<div style="width:100%;height:80%"><img src="${val}" style="width:100%;height:80%"></div>`, '图片详情', {
            dangerouslyUseHTMLString: true,
            closeOnClickModal: true,
            showConfirmButton: false,
        });
    }
}
</script>

<style scoped lang="scss">
    .module-box{
        width: 100%;
        height: 100%;
        background-image: url(../../images/screen-tem13/bg4.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .main-top-box{
        width: 100%;
        height: 50%;
    }
    .module-box .header{
        width: 97%;
        height: 35px;
        line-height: 35px;
        font-weight: bold;
        font-size: 15px;
        color: #0BE2DF;
        padding-left: 10px;

        .pull-right{
            float: right;
            font-size: 12px;
            color: #fff;
            font-weight: 400;
            .font-color{
                color: #0BE2DF;
            }
            .font-color1{
                color: #FF0000;
            }
        }

    }
    .module-bottom-box{
        width: 100%;
        height: 100%;
        // margin-top: 2.38%;
        position: relative;
    }
    .module-bottom-box .bottom-content-box{
        width: 100%;
        height: calc(100% - 35px);
        overflow: hidden;
        margin-top: 15px;
    }
   .main-top-box .bottom-content-box .imgbox{
        width: 16%;
        height: 100%;
        margin-left: 0.6%;
        display: inline-block;
        float: left;
        img{
            width: 100%;
            height: calc(100% - 30px);
            border-radius: 10px;
        }
        .name{
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 13px;
        }
    }   

</style>