ucard-person-app-front/components/cwg-submenu.vue

<template>
    <view class="cwg-submenu">
        <view class="cwg-submenu-title">
            <text>
                CWG Markets
            </text>
        </view>
        <view class="submenu">
            <view class="cwg-submenu-item" v-for="item in items" :key="item.key" @click="handleClick(item)">
                <text>{{ item.label }}</text>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
interface MenuItem {
    key: string;
    label: string;
    icon?: string;
    children?: MenuItem[];
}
const props = defineProps<{ items: MenuItem[] }>();
const emit = defineEmits(['submenu-click']);
function handleClick(item: MenuItem) {
    emit('submenu-click', item);
}
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.cwg-submenu {
    background: #fff;
    position: relative;
    z-index: 11;

    padding: 0;
    margin: 0;
    box-shadow: 4px 0 12px rgba(15, 23, 43, 0.08);
    border-left: 1px solid #E2E8F0;

    .cwg-submenu-title {
        padding: 20px;
        font-size: 16px;
        font-weight: 700;
        border-bottom: 1px solid #E2E8F0;
        color: #0F172B;
    }

    .submenu {
        margin: 0 px2rpx(20);
        width: px2rpx(200);
    }

    .cwg-submenu-item {
        padding: 20px 0px;
        cursor: pointer;
        color: #0F172B;
        font-weight: 600;
        transition: background 0.2s;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        border-bottom: 1px solid #E2E8F0;
    }

    .cwg-submenu-item:hover {
        // background: #f0f0f0;
    }
}
</style>