qw_customer/src/views/Fuzeren/FuzerenView.vue

<template>
  <div id="FuzeRen">
    <!-- 背景渐变 -->
    <div class="top-color"></div>

    <!-- 个人信息模块 -->
    <div class="PersonalInformation">
        <!-- 内块 -->
        <div class="PI-bodyInnerblock">
            <!-- 用户名 -->
            <div class="wx_password">
                <p>{{ wx_password }}</p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return{
            wx_password:"淡忘-zhouzhandui",
        }
    },
    methods:{

    },
    mounted:{

    },
    components:{

    }
}
</script>

<style lang="scss">
    #FuzeRen{
        width: 100vw;
        height: 100vh;
        background-color: #f2f4f8;
        .top-color{
            width: 100vw;
            height: 17vh;
            background-image: linear-gradient(to bottom, #3974c7, #f2f4f8);
            position: fixed;
        }
        .PersonalInformation{
            width: 95vw;
            height: 23vh;
            background-color: #fff;
            border-radius: 1vh;
            position: relative;
            z-index: 1;
            top: 8vh;
            margin: 0 auto;
            .PI-bodyInnerblock{
                width: 90vw;
                height: 20vh;
                background-color: #ffeaea;
                margin: 0 auto;
                padding-top: 3vh;
                .wx_password{
                    p{
                        color: #333;
                        font-size: 1.6rem;
                    }
                }
            }
        }
    }
</style>