bwj_web/Desktop/buwanjia/src/components/HomePage/UserHomePage.vue

<template>
    <div class="userhome">
        <!-- 头部区域 -->
        <AccountCenterTop/>
        <!-- 主体区域 -->
        <el-container class="userhome_main">
            <!-- 轮播区域 -->
            <el-header class="userhome_main_header">
                <el-carousel height="38rem">
                    <el-carousel-item v-for="item in 3" :key="item">
                        <img src="../../assets/images/UserHomepage/carousel.png" alt="">
                    </el-carousel-item>
                </el-carousel>
            </el-header>
            <!-- 主体中心区域 -->
            <el-container class="userhome_main_center">
                <!-- 左边 -->
                <el-aside>
                    <!-- 我的应用区域 -->
                    <MyApps/>
                    <!-- 通告区域 -->
                    <Circular/>
                    <!-- 最新供需 -->
                    <LastSupply/>
                </el-aside>
                <!-- 右边 -->
                <el-main>
                    <!-- 系统消息 -->
                    <SystemNotice/>
                    <!-- 最新聊天 -->
                    <LastChatting/>
                    <!-- 合作商家 -->
                    <PartnerAgents/>
                    <!-- 联系客服 -->
                    <div class="contact">
                        <div class="contact_item">
                            <img src="../../assets/images/UserHomepage/erweima.png" alt="erweima">
                            <span class="contact_item_type">布万家小程序</span>
                            <p class="contact_item_des">随时随地移动应用更有效，更快捷</p>
                        </div>
                        <div class="contact_item">
                            <img src="../../assets/images/UserHomepage/erweima.png" alt="erweima">
                            <span class="contact_item_type">布万家小程序</span>
                            <p class="contact_item_des">13899938756</p>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
        <SystemLoginCopyBottom bgc_blue="background: #4DC2D4"/>
    </div>
</template>
<script type="text/javascript">
    import AccountCenterTop from '../../commonCmp/AccountCenter/AccountCenterTop.vue'
    import MyApps from "../../progressCmp/UserHomepage/MyApps.vue"
    import Circular from "../../progressCmp/UserHomepage/Circular.vue"
    import LastSupply from '../../progressCmp/UserHomepage/LastSupply.vue'
    import SystemNotice from "../../progressCmp/UserHomepage/SystemNotice.vue"
    import LastChatting from "../../progressCmp/UserHomepage/LastChatting.vue"
    import PartnerAgents from "../../progressCmp/UserHomepage/PartnerAgents.vue"
    import SystemLoginCopyBottom from "../../commonCmp/WesiteInherentInfo/SystemLoginCopyBottom.vue"

    export default  {
        name: "UserHomePage",
        components: {
            AccountCenterTop, 
            MyApps, 
            Circular, 
            LastSupply, 
            SystemNotice,
            LastChatting,
            PartnerAgents,
            SystemLoginCopyBottom
        }
    }
</script>
<style lang="scss" scoped>
    .userhome {
        position: relative;
        width: 156.8rem;

        left: 50%;
        transform: translate(-50%);
        .userhome_main {
            width: 100%;
            margin: 0;
            padding: 0;
                // 设置圆点导航样式
    /deep/ .el-carousel__indicator--horizontal {
        padding: 0;
        width: 4rem;
        height: .6rem;
        margin-left: 1.5rem;
        margin-bottom: 1rem;
        background: rgba(255, 255, 255, .8);
        .el-carousel__button {
            width: 100%;
            height: .6rem;
            background-color: rgba(255, 255, 255, 0.8);
        }
    }
    /deep/ .is-active .el-carousel__button {
        background-color: rgba(77, 194, 212, 0.9);
    }
    // 隐藏轮播左右箭头按钮
    /deep/ .el-carousel__arrow {
        display: none;
    }
        }
        .el-header {
            width: 100%;
            padding: 0;
            margin-top: 2.5rem;
            height: 38rem !important;
            overflow: hidden;
            border-radius: 1rem !important;

            .el-carousel {
                height: 100%;
                width: 100%;
            }
            img {
                height: 100%;
                width: 100%;
            }
        }

        // 主体
        .userhome_main_center {
            margin-top: 3rem;
            // 左边
            .el-aside {
                width: 95.3rem !important;
            }
            // 右边
            .el-main {
                width: 59.5rem;
                margin-left: 2rem;

                .contact {
                    width: 100%;
                    height: 31rem;
                    margin: 2rem 0 14rem 0;

                    display: flex;
                    justify-content: space-evenly;
                    .contact_item {
                        width: 14.4rem;
                        height: 25rem;
                        width: 14.5rem;
                        margin-top: 6rem;

                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        img {
                            height: 13rem;
                            width: 13rem;
                        }
                        .contact_item_type {
                            margin: 1rem 0;
                        }
                        .contact_item_des {
                            text-align: center;
                        }
                    }
                }
            }


        }

    }
</style>