dev/dcp-web-gate/src_old/views/conferenceServices/modelView/picture.vue

<template>
  <div>
      <ul>
        <li v-for="(item, i) in imgData" :key="i" @click="previewPic(item.list[0].attachmentSavePath)">
            <img :src="'./api/file/pub/'+item.list[0].attachmentSavePath" alt="" height="240">
            <p class="title">{{lang=='en'? item.titleEn: item.title}}</p>
        </li>
    </ul>
    <div class="mask" v-show="maskShow" @click="closeMask">
        <img :src="currentUrl" alt="">
    </div>
  </div>
</template>

<script>
import { getConfrenceDetail } from "@/api/meeting/meetingOutInfo";
export default {
    data(){
        return {
            imgData: [],
            lang: '',
            currentUrl: '',
            maskShow: false
        }
    },
    created(){
        this.lang = this.$i18n.locale;
    },
    watch: {
        '$i18n.locale'(val){
            this.lang = val;
        }
    },
    mounted(){
        getConfrenceDetail(this.$route.query.key).then((res) => {
            res.data.meetingOutInfo.image.forEach((item) => {
                if(item.photoType == "meeting_pro_img"){
                    this.imgData.push(item)
                }
            });
            
            // console.log('图片数据',res.data.meetingOutInfo.image)
        });
    },
    methods: {
        closeMask(){
            this.maskShow = false;
        },
        previewPic(url){
            this.currentUrl = './api/file/pub/'+ url;
            this.maskShow = true;
        },
    }
}
</script>

<style scoped>
*{
    box-sizing: border-box;
}
ul{
    display: flex;
    flex-wrap: wrap;
    padding: 20px 10px;
}
li{
    width: 30%;
    margin: 0 1.5%;
    cursor: pointer;
}
.title{
    text-align: center;
    margin: 10px 0;
}
.mask{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0 ,0 , 0, 0.7);
    z-index: 9;
}
.mask img{
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>