beelink/src/components/Menu.vue

<template>
    <div class="menu">
        <div class="user" style="overflow: hidden;">
            <div class="user" :class="{'seltop': selnum == 0}">
                <img src="" alt="" class="head">
                <div class="name">name</div>
            </div>
        </div>
        
        <div class="list">
            <div v-for="(i,j) in list" :key="j" style="overflow: hidden;" @click="routeto(j)">
                <div class="item" :class="{'selitem': j == selnum, 'seltop': j == selnum - 1, 'selbottom': j == selnum + 1}">
                    <div class="route">
                        <img src="" alt="" class="icon">
                        <div class="title">{{i.name}}</div>
                    </div>
                    <img src="" alt="" class="right">
                </div>
            </div>
            <div style="overflow: hidden;">
                <div class="item" :class="{'selbottom': selnum == list.length - 1}"></div>
            </div>
            <div class="item loginout">
                <div class="route">
                    <img src="" alt="" class="icon">
                    <div class="title">
                        帐号退出
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.menu{
    user-select: none;
    width: 171px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(0deg, #0EDCC2, #50DF98, #7EE278, #A2E562);
    .user{
        width: 100%;
        height: 150px;
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .head{
            width: 57px;
            height: 57px;
            background-color: #0f0;
            margin-bottom: 15px;
            border-radius: 50%;
        }
        .name{
            font-size: 15rpx;
            line-height: 1;
            color: #fff;
        }

    }
    .list{
        position: relative;
        display: flex;
        height: 100%;
        padding-left: 6px;
        display: flex;
        flex-direction: column;
        .item{
            display: flex;
            align-items: center;
            height: 50px;
            padding: 0 18px;
            justify-content: space-between;
            .route{
                display: flex;
                .icon{
                    width: 15px;
                    height: 15px;
                    background-color: #0f0;
                }
                .title{
                    font-size: 13px;
                    color: #fff;
                    line-height: 1;
                    margin-left: 6px;
                }
            }
            .right{
                width: 5px;
                height: 10px;
                background-color: #0f0;
            }
        }
        .loginout{
            position: absolute;
            bottom: 10px;
        }
    }
    .seltop{
        border-radius: 0 0 25px 0;
        box-shadow: 0 0 0 30px #f5f5f5 ;
    }
    .selbottom{
        border-radius: 0 25px 0 0;
        box-shadow: 0 0 0 30px #f5f5f5 ;
    }
    .selitem{
        border-radius: 25px 0 0 25px;
        background-color: #F5F5F5;
        .title{
            color: #08AE98 !important;    
            font-weight: bold;
        }
    }
}
</style>
<script lang="ts">
import { defineComponent, ref } from 'vue';


export default defineComponent({
    setup(){
        interface MenuItem {
            icon: string;
            name: string;
            route: string;
        }
        const list: Array<MenuItem> = [
            {  
                icon: "",
                name: "我的档案",
                route: ""
            },
            {  
                icon: "",
                name: "发布直播",
                route: ""
            },
            {  
                icon: "",
                name: "上传视频",
                route: ""
            },
            {  
                icon: "",
                name: "我的钱包",
                route: ""
            },
            {  
                icon: "",
                name: "列表统计",
                route: ""
            },
            {  
                icon: "",
                name: "关于Beelink",
                route: ""
            }
        ]
        const selnum = ref(0);
        const routeto = (index: number) => {
            console.log(index)
            selnum.value = index;

        }
        return{
            list,
            routeto,
            selnum
        }
    }
})
</script>