EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/my/myPage.vue

<template>
    <div class="my-page app_content">
        <!-- 顶部蓝色背景区域 -->
        <div class="header-bg">
            <div class="user-info">
                <div class="avatar-wrapper">
                    <img
                        class="avatar"
                        src="https://picsum.photos/120/120?random=avatar"
                        alt="avatar"
                    />
                </div>
                <div class="user-name">{{ useCommon.enterpriseName || '胡小鹏' }}</div>
                <div class="user-phone">电话：{{ useCommon.phonenumber || '13800138000' }}</div>
            </div>
            <!-- 城市剪影装饰 -->
            <div class="cityscape-decoration"></div>
        </div>

        <!-- 内容区域 -->
        <div class="content-area">
            <!-- 菜单列表 -->
            <div class="menu-list">
                <div class="menu-item" @click="toComplaintSuggestion">
                    <div class="menu-icon icon-blue">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"/>
                        </svg>
                    </div>
                    <div class="menu-text">投诉建议</div>
                    <van-icon name="arrow" class="menu-arrow" />
                </div>

                <div class="menu-item" @click="toSettings">
                    <div class="menu-icon icon-purple">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.488.488 0 0 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.58 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
                        </svg>
                    </div>
                    <div class="menu-text">设置</div>
                    <van-icon name="arrow" class="menu-arrow" />
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="footer_body">
            <footer-nav></footer-nav>
        </div>
    </div>
</template>

<script setup name="myPage">
const { useCommon } = $globalStore;
const router = useRouter();

// ========== 跳转投诉建议 ==========
const toComplaintSuggestion = () => {
    router.push({
        path: '/enterprise/complaintList',
    });
};

// ========== 跳转设置 ==========
const toSettings = () => {
    router.push({
        path: '/enterprise/settings',
    });
};
</script>

<style lang="less" scoped>
.my-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #f0f6ff;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ===== 顶部蓝色背景区域 ===== */
.header-bg {
    background: linear-gradient(180deg, #2b7de9 0%, #5ba3f5 40%, #a0cdf8 70%, #dceefb 90%, #eef5ff 100%);
    padding: 40px 20px 50px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 3;

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(180deg, transparent, rgba(255,255,255,0.3));
    }
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.avatar-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 12px;

    .avatar {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.user-name {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 6px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.user-phone {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

/* 城市剪影装饰 */
.cityscape-decoration {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    opacity: 0.12;

    &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 8%;
        width: 10%;
        height: 50px;
        background: rgba(255,255,255,0.5);
        border-radius: 2px 2px 0 0;
    }

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 12%;
        width: 8%;
        height: 70px;
        background: rgba(255,255,255,0.4);
        border-radius: 2px 2px 0 0;
        box-shadow:
            -25px 15px 0 rgba(255,255,255,0.3),
            -50px 30px 0 rgba(255,255,255,0.2),
            25px 20px 0 rgba(255,255,255,0.25);
    }
}

/* ===== 内容区域 ===== */
.content-area {
    flex: 1;
    overflow-y: auto;
    position: relative;
    z-index: 2;
    // margin-top: -10px;
    background: #fff;
    border-radius: 28px 28px 0 0;
    padding: 16px;
}

/* ===== 菜单列表 ===== */
.menu-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    &:active {
        background: #f5f5f5;
    }
}

.menu-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;

    svg {
        width: 22px;
        height: 22px;
        color: #fff;
    }
}

.icon-blue {
    background: linear-gradient(135deg, #4a9eff, #2d94fa);
}

.icon-purple {
    background: linear-gradient(135deg, #9b7cf5, #7c5cfb);
}

.menu-text {
    flex: 1;
    font-size: 16px;
    color: #1a1a1a;
    font-weight: 500;
}

.menu-arrow {
    font-size: 16px;
    color: #ccc;
}

/* ===== 底部导航 ===== */
.footer_body {
    flex-shrink: 0;
}
</style>