561_jiexin/src/views/appliances_standard_exhibition.vue

<template>
    <div class="all">
        <img class="pageBg" src="../assets/productBg.jpg">
        <div class="contentFrame">
            <img class="contentImg" src="../assets/appliances/standard/exhibition.png">
            <img class="pageRedDot pageRedDot1" @click="lookDetail('baozhahua')" src="../assets/pageRedDot.png">
            <img class="pageRedDot pageRedDot2" @click="lookDetail('haibao')" src="../assets/pageRedDot.png">
            <img class="pageRedDot pageRedDot3" @click="lookDetail('kongtiaotiezhi')" src="../assets/pageRedDot.png">
            <img class="pageRedDot pageRedDot4" @click="lookDetail('dianshisanjiaotie')" src="../assets/pageRedDot.png">
        </div>
        <sidebar></sidebar>
        <phoneAppliancesWin v-if="winShow" :product="product" @hiddenWin='winControl' :category="category" :detailName="detailName"></phoneAppliancesWin>
    </div>
</template>

<script>
    import Sidebar from '../components/sidebar'
    import phoneAppliancesWin from './phone_appliances_win'
    export default {
        name: "appliances_standard_exhibition",
        data(){
            return{
                product:"appliances",//产品
                category:"standard",//类别
                detailName:"",//详细名称
                winShow:false,//是否显示弹窗
            }
        },
        components:{
            Sidebar,
            phoneAppliancesWin
        },
        methods:{
            lookDetail(name){//查看详情
                this.detailName = name;
                this.winControl();
            },
            winControl(){//控制弹窗显示状态
                this.winShow = !this.winShow;
            }
        }
    }
</script>

<style scoped>
    .pageBg{
        position: fixed;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 7.5rem;
        height: 15.06rem;
    }
    .contentFrame{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 7.5rem;
        height: 12.06rem;
        display: flex;
        justify-content: center;
        overflow: hidden;
    }
    .contentImg{
        width: 6.93rem;
        height: 11.88rem;
    }
    .pageRedDot{
        position: absolute;
        width: 0.29rem;
        height: 0.29rem;
        animation: dotTwinkle 3s linear infinite;
    }
    @keyframes dotTwinkle {
        0%{opacity: 0.2}
        50%{opacity:1}
        100%{opacity:0.2}
    }
    .pageRedDot1{
        left: 2.26rem;
        top: 5.75rem;
    }
    .pageRedDot2{
        left: 4.15rem;
        top: 5.65rem;
    }
    .pageRedDot3{
        left: 0.6rem;
        top: 6.77rem;
    }
    .pageRedDot4{
        left: 6.78rem;
        top: 5.8rem;
    }
</style>