561_jiexin/src/views/phone_appliances_win.vue

<template>
    <div class="all">
        <img class="pageBg" src="../assets/win/winBg.png">
        <div class="contentFrame">
            <img :class="product+'_'+category+'_'+detailName" :src="require('../assets/win/'+product+'/'+category+'/'+detailName+'.png')">
            <img class="pageClose" @click="closeWin" src="../assets/win/winClose.png">
        </div>
    </div>
</template>

<script>
    export default {
        name: "phone_appliances_win",
        props:['product','category','detailName'],
        methods:{
            closeWin(){
                this.$store.state.commonWin = false;
                this.$emit('hiddenWin');
            }
        },
        mounted() {
            this.$store.state.commonWin = true;
        }
    }
</script>

<style scoped>
    .pageBg{
        position: fixed;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 7.5rem;
        height: 15.06rem;
    }
    .contentFrame{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 7.5rem;
        height: 12.06rem;
        display: flex;
        justify-content: center;
        overflow: hidden;
    }
    .phone_high_guitailika{
        width: 6.63rem;
        height: 9.22rem;
    }
    .phone_high_guitaitie{
        width: 6.6rem;
        height: 8.09rem;
    }
    .phone_high_haibao{
        width: 5.84rem;
        height: 9.89rem;
    }
    .phone_high_hengfu{
        width: 6.94rem;
        height: 6.43rem;
    }
    .phone_high_mentiedaban{
        width: 4.43rem;
        height: 10.34rem;
    }
    .phone_high_pvclipai{
        width: 5.12rem;
        height: 9.32rem;
    }
    .phone_high_shoujibeitie{
        width: 2.92rem;
        height: 10.15rem;
    }
    .phone_high_yilabao{
        width: 4.68rem;
        height: 10.77rem;
    }
    .phone_high_zhizhitaika{
        width: 5.84rem;
        height: 9.89rem;
    }
    .phone_standard_baozhahua{
        width: 2.92rem;
        height: 10.15rem;
    }
    .phone_standard_guitaitie{
        width: 6.6rem;
        height: 8.09rem;
    }
    .phone_standard_haibao{
        width: 5.84rem;
        height: 9.89rem;
    }
    .phone_standard_hengfu{
        width: 6.94rem;
        height: 6.43rem;
    }
    .phone_standard_mentie{
        width: 6.95rem;
        height: 8.04rem;
    }
    .phone_standard_sanjiaolipai{
        width: 6.6rem;
        height: 8.05rem;
    }
    .phone_standard_yimitie{
        width: 6.94rem;
        height: 6.43rem;
    }
    .phone_standard_zhizhitaika{
        width: 5.84rem;
        height: 9.89rem;
    }
    .appliances_high_baozhahua{
        width: 2.92rem;
        height: 10.15rem;
    }
    .appliances_high_haibao{
        width: 5.84rem;
        height: 9.89rem;
    }
    .appliances_high_hengfu{
        width: 6.94rem;
        height: 6.43rem;
    }
    .appliances_high_jiadiansanjiaolipai{
        width: 3rem;
        height: 9.06rem;
    }
    .appliances_high_mentiedaban{
        width: 4.43rem;
        height: 10.34rem;
    }
    .appliances_high_pvclipai{
        width: 5.12rem;
        height: 9.32rem;
    }
    .appliances_high_yilabao{
        width: 4.68rem;
        height: 10.77rem;
    }
    .appliances_standard_baozhahua{
        width: 2.92rem;
        height: 10.15rem;
    }
    .appliances_standard_dianshisanjiaotie{
        width: 2.92rem;
        height: 9.64rem;
    }
    .appliances_standard_haibao{
        width: 5.84rem;
        height: 9.89rem;
    }
    .appliances_standard_hengfu{
        width: 6.94rem;
        height: 6.43rem;
    }
    .appliances_standard_kongtiaotiezhi{
        width: 2.92rem;
        height: 9.64rem;
    }
    .appliances_standard_mentie{
        width: 6.95rem;
        height: 8.04rem;
    }
    .appliances_standard_yimitie{
        width: 6.94rem;
        height: 6.43rem;
    }
    .appliances_standard_zhizhitaika{
        width: 5.84rem;
        height: 9.89rem;
    }
    .pageClose{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: 0.8rem;
        height: 0.8rem;
    }
</style>