561_jiexin/src/views/phone_standard_outside.vue

<template>
    <div class="all">
        <img class="pageBg" src="../assets/productBg.jpg">
        <div class="contentFrame">
            <img class="contentImg" src="../assets/phone/standard/outside.png">
            <img class="pageRedDot pageRedDot1" @click="lookDetail('hengfu')" src="../assets/pageRedDot.png">
            <img class="pageRedDot pageRedDot2" @click="lookDetail('mentie')" src="../assets/pageRedDot.png">
            <img class="pageRedDot pageRedDot3" @click="lookDetail('yimitie')" src="../assets/pageRedDot.png">
        </div>
        <img class="arrow" src="../assets/pageArrow.png"/>
        <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_standard_outside",
        data(){
            return{
                product:"phone",//产品
                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: fixed;
        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.21rem;
    }
    .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: 5.86rem;
        top: 4.58rem;
    }
    .pageRedDot2{
        left: 2.22rem;
        top: 6.68rem;
    }
    .pageRedDot3{
        left: 4.55rem;
        top: 7.1rem;
    }
    .sidebarSty{
        position: fixed!important;
        top:0.3rem;
        left: 0.3rem;
    }
    .arrow{
        position: absolute;
        bottom: 0.3rem;
        left: 50%;
        transform: translateX(-50%);
        width: 0.37rem;
        height: 0.33rem;
        animation: arrowAni 1s linear infinite;
    }
    @keyframes arrowAni {
        0%{bottom: 0.3rem}
        50%{bottom: 0.1rem}
        100%{bottom: 0.3rem}
    }
</style>