561_jiexin/src/views/phone_high_counter.vue

<template>
    <div class="all">
        <img class="pageBg" src="../assets/productBg.jpg">
        <div class="contentFrame">
            <img class="contentImg" src="../assets/phone/high/counter.png">
            <img class="pageRedDot pageRedDot1" @click="lookDetail('guitailika')" src="../assets/pageRedDot.png">
            <img class="pageRedDot pageRedDot2" @click="lookDetail('shoujibeitie')" src="../assets/pageRedDot.png">
            <img class="pageRedDot pageRedDot3" @click="lookDetail('guitaitie')" src="../assets/pageRedDot.png">
        </div>
        <sidebar class="sidebarSty"></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: "phone_high_counter",
        data(){
            return{
                product:"phone",//产品
                category:"high",//类别
                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;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .contentImg{
        width: 6.93rem;
        height: 11.85rem;
    }
    .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: 0.97rem;
        top: 5.17rem;
    }
    .pageRedDot2{
        left: 0.88rem;
        top: 8.13rem;
    }
    .pageRedDot3{
        left: 6.32rem;
        top: 6.73rem;
    }
    .sidebarSty{
        position: fixed;
        top:0.3rem;
        left: 0.3rem;
    }
</style>