示例代码：

<template>  
    <view ref="body">  
        <view class="d-flex a-center j-center" style="scrollIndicator:none">  
            <image src="../../static/images/ziyouhui/home.png" style="width: 750rpx" :style="{ height: backgroundImageHeight }">  
                <view class="start-design-btn " @click="openScenes"></view>  
                <view class="my-design-btn " @click="openMyDesign"></view>  
                <view class="personal-center-btn" @click="openDrawer"></view>  
            </image>  
        </view>  

        <CommonButtomPopup :ref="scenesPopupName" :title="popupTitle" :showClose="false">  
            <view v-if="indexPagePopup.scenesPopupName == currentPopuName" class="d-flex j-around" style="width: 100%;height: 100%;">  
                <view @click="closePopup" class="fab-left-view"></view>  
                <image class="fab-left-top" :src="backgroundImageUrl"></image>  
                <view class="d-flex j-around" style="margin-top: 85rpx;">  
                    <view class="scenes-img real d-flex a-center j-center" @click="startDesign"><view>设计真实户型</view></view>  
                    <view class="scenes-img area  d-flex a-center j-center" @click="toRegion"><view>逛逛样板区域</view></view>  
                </view>  
            </view>  
            <Houses v-else-if="indexPagePopup.housePopupName == currentPopuName || indexPagePopup.houseDetailPopupName == currentPopuName"></Houses>  
            <DesignScheme @openDrawer="openDrawer" v-else-if="indexPagePopup.designSchemePopupName == currentPopuName"></DesignScheme>  
            <Region v-else-if="indexPagePopup.regionPopupName == currentPopuName"></Region>  
            <MyDesign v-else-if="indexPagePopup.myDesignPopupName == currentPopuName" ref="myDesign"></MyDesign>  
        </CommonButtomPopup>  

        <!-- 提示框 -->  
        <Login @registerCallBack="registerCallBack" :ref="loginDrawerName"></Login>  
        <Personal :ref="personalDrawerName"></Personal>  

        <!-- 居中弹窗 -->  
        <WToast ref="toastCenter"></WToast>  
    </view>  
</template>  

<script>  
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';  
import CommonButtomPopup from '@/components/common/common-bottom-popup.vue';  
import Login from '@/pages/login/login.vue';  
import Personal from '@/pages/personal/personal.vue';  
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';  
import Region from '@/pages/region/region.vue';  
import Houses from '@/pages/houses/houses.vue';  
import DesignScheme from '@/pages/design-scheme/design-scheme.vue';  
import MyDesign from '@/pages/my-design/my-design.vue';  

export default {  
    components: {  
        CommonButtomPopup,  
        Login,  
        Personal,  
        uniDrawer,  
        Region,  
        Houses,  
        DesignScheme,  
        MyDesign  
    },  
    mounted() {  
        this.$store.commit('initUser');  
    },  
    watch: {  
        currentPopuName: function(val, oldVal) {  
            console.log('watch currentPopuName' + val);  
            if (val == '') {  
                this.$refs[this.$store.state.indexPagePopup.scenesPopupName].close();  
            }  
        }  
    },  
    computed: {  
        ...mapState({  
            indexPagePopup: state => state.indexPagePopup  
        }),  
        ...mapGetters({  
            currentPopuName: 'getCurrentPopuName',  
            backPopupName: 'getBackPopupName'  
        }),  
        estateList() {  
            let estateList = [];  
            this.names.map((item, index) => {  
                estateList.push({  
                    codeName: item.name,  
                    codeValue: item.id  
                });  
            });  
            return estateList;  
        },  
        popupTitle() {  
            switch (this.currentPopuName) {  
                case this.$store.state.indexPagePopup.scenesPopupName:  
                    return '选择场景';  
                case this.$store.state.indexPagePopup.regionPopupName:  
                    return '选择区域';  
                case this.$store.state.indexPagePopup.housePopupName:  
                    return '选择户型';  
                case this.$store.state.indexPagePopup.reformHouseTypePopupName:  
                    return '选择改造户型';  
                case this.$store.state.indexPagePopup.designSchemePopupName:  
                    return '选择风格套餐';  
                case this.$store.state.indexPagePopup.houseDetailPopupName:  
                    return '户型平面图';  
                case this.$store.state.indexPagePopup.myDesignPopupName:  
                    return '我的方案';  
                case this.$store.state.indexPagePopup.designSchemeDetailPopupName:  
                    return this.ccDesignScheme.name;  
                default:  
                    return '';  
            }  
        }  
    },  
    data() {  
        return {  
            backgroundImageHeight: '834px',  
            mode: 'right',  
            drawerComponent: 'Login',  
            backgroundImageUrl: '../../static/images/ziyouhui/left-top-close.png',  
            loginDrawerName: 'login',  
            personalDrawerName: 'personal',  
            scenesPopupName: 'scenesPopup',  
            housePopupName: 'housePopup',  
            reformHouseTypePopupName: 'reformHouseTypePopup',  
            designSchemePopupName: 'designSchemePopup',  
            dialogPopupName: 'dialogPopup',  
            houseDetailPopupName: 'houseDetailPopup',  
            regionPopupName: 'regionPopup',  
            designSchemeDetailPopupName: 'designSchemeDetailPopup'  
        };  
    },  
    methods: {  
        registerCallBack() {  
            this.$refs[this.personalDrawerName].open();  
        },  
        alertCenter(content) {  
            let alertCenter = this.$refs.toastCenter;  
            alertCenter.show({  
                title: content  
            });  
        },  
        toRegion() {  
            this.$store.commit('setOutFromDesignType', '01');  
            this.$store.commit('setCurrentPopupName', this.$store.state.indexPagePopup.regionPopupName);  
        },  
        async startDesign() {  
            this.designFilter = {};  
            this.names = [];  
            this.$store.commit('setOutFromDesignType', '01');  
            this.$store.commit('setCurrentPopupName', this.$store.state.indexPagePopup.housePopupName);  
        },  
        openPopup(refName) {  
            this.$refs[refName].open();  
        },  
        closePopup() {  
            // 返回上一个页面只要不为空，则继续返回  
            if (this.backPopupName != '') {  
                this.$store.commit('popupStackBack');  
            } else {  
                this.$refs[this.$store.state.indexPagePopup.scenesPopupName].close();  
            }  
        },  
        async clickCardForReforHouse(house) {  
            // 改造后的户型  
            this.designPopupHouse = house;  
            let queryParam = {  
                queryParam: {  
                    houseTypeId: house.id  
                }  
            };  
            let {  
                data: { items: designSchemes }  
            } = await this.$api.apiStyle.getStyleList(queryParam);  
            this.designSchemes = designSchemes;  
            this.openPopup(this.designSchemePopupName);  
        },  
        enlarge(data) {  
            this.ccHouse = data;  
            this.openPopup(this.houseDetailPopupName);  
        },  
        clickCardForDesignCard(data) {  
            this.ccDesignScheme = data;  
            this.openPopup(this.dialogPopupName);  
        },  
        enlargeDesignScheme(data) {  
            this.ccDesignScheme = data;  
            this.openPopup(this.designSchemeDetailPopupName);  
        },  
        openScenes() {  
            this.$store.commit('setPopupStack', []);  
            this.$store.commit('setCurrentPopupName', this.$store.state.indexPagePopup.scenesPopupName);  
            this.openPopup(this.scenesPopupName);  
        },  
        openDrawer() {  
            if (this.loginStatus) {  
                this.$refs[this.personalDrawerName].open();  
                this.$refs[this.loginDrawerName].close();  
                this.drawerComponent = 'Personal';  
            } else {  
                this.$refs[this.personalDrawerName].close();  
                this.$refs[this.loginDrawerName].open();  
                this.drawerComponent = 'Login';  
            }  
        },  
        openMyDesign() {  
            let that = this;  
            if (!this.loginStatus) {  
                uni.showModal({  
                    content: '你还未登录，无法进入方案场景',  
                    confirmText: '去登录',  
                    success(res) {  
                        if (res.confirm) {  
                            that.openDrawer();  
                            return;  
                        } else if (res.cancel) {  
                            return;  
                        }  
                    }  
                });  
                return;  
            }  
            this.$store.commit('setOutFromDesignType', '02');  
            console.log('openMyDesign');  
            this.$store.commit('setPopupStack', []);  
            this.$store.commit('setCurrentPopupName', this.$store.state.indexPagePopup.myDesignPopupName);  
            this.openPopup(this.scenesPopupName);  
        }  
    },  
    onLoad() {  
        // 当前系统信息  
        let systemObject = uni.getSystemInfoSync();  
        // 获取屏幕高度  
        this.backgroundImageHeight = systemObject.screenHeight + 'px';  

        console.log('当前系统信息' + JSON.stringify(systemObject));  
        // #ifdef APP-PLUS  
        // 设置全屏显示，隐藏状态栏  
        plus.navigator.setFullscreen(true);  
        // #endif  

        uni.$on('alertCenter', this.alertCenter);  
    }  
};  
</script>  

<style scoped lang="scss">  
/deep/.uni-popup__wrapper-box {  
    width: 548.99upx;  
}  
/deep/.fade-out {  
    /* height: 0!important; */  
}  

.uni-icons {  
    width: 0;  
}  

/deep/.iconfont {  
    width: 0;  
}  

/deep/.uni-collapse-cell__title-text {  
    flex: 1;  
    font-size: 8.16upx !important;  
    /* #ifndef APP-NVUE */  
    white-space: nowrap;  
    color: inherit;  
    /* #endif */  
    /* #ifdef APP-NVUE */  
    lines: 1;  
    /* #endif */  
    overflow: hidden;  
    text-overflow: ellipsis;  
}  

.uni-collapse {  
    /* #ifndef APP-NVUE */  
    display: flex;  
    /* #endif */  
    /* #ifdef APP-NVUE */  
    flex: 1;  
    /* #endif */  
    width: 50upx;  
    height: 28.26upx;  
    flex-direction: column;  
    background-color: $uni-bg-color;  
}  

.home {  
    background-image: url(../../static/images/ziyouhui/home.png);  
    hescrollindicator: none;  
    background-size: cover;  
    width: 750rpx;  
}  

.start-design-btn {  
    position: absolute;  
    border: #007aff solid 0rpx;  
    top: 56.4%;  
    left: 75rpx;  
    width: 227rpx;  
    height: 5.4%;  
}  

.my-design-btn {  
    position: absolute;  
    border: #007aff solid 0rpx;  
    top: 64.1%;  
    left: 75rpx;  
    width: 227rpx;  
    height: 5.4%;  
}  
.personal-center-btn {  
    position: absolute;  
    border: #007aff solid 0rpx;  
    top: 3.6%;  
    right: 18rpx;  
    width: 30rpx;  
    height: 5.8%;  
}  

.scenes-img {  
    background-size: contain;  
    width: 361rpx;  
    height: 280rpx;  
    background-repeat: no-repeat;  
}  

.scenes-img view {  
    font-family: PingFangSC-Semibold;  
    font-size: 15rpx;  
    color: #ffffff;  
    letter-spacing: 0;  
    width: 92rpx;  
}  

.real {  
    background-image: url(../../static/images/ziyouhui/scenes-real-house.png);  
}  

.area {  
    background-image: url(../../static/images/ziyouhui/scenes-area-model.png);  
}  
</style>

操作步骤：

运行即复现

预期结果：

按钮在正常位置可以点击。
点击后样式正常展示

实际结果：

样式全部混乱