VUE Node模式下，如何改变菜单的颜色，如何将超长文字缩略显示，在鼠标进入后展开全部显示，鼠标移出则恢复缩略显示

<template>
<div >
<div class="expense-left">
    <p class="left-titles">费用中心</p>
    <ul class="order-con">
        <router-link to="/control-home/expense-center/my-order ">   <li class="default-color" @mouseenter="oneLeverenter(0)" @mouseleave="oneLeverleave(0)"     :class="clickedIndex==0?‘click-color‘:‘default-color‘">你的订单可以在这里查询包括明细数据</li></router-link>
        <router-link to="/control-home/expense-center/renew-manage"><li class="default-color" @mouseenter="oneLeverenter(1)"  @mouseleave="oneLeverleave(0)"    :class="clickedIndex==1?‘click-color‘:‘default-color‘">续费</li></router-link>
                                                                    <li class="default-color" @mouseenter="twoLeverenter(2)" @click="twoLeverclick(2)"          :class="clickedIndex==2?‘click-color‘:‘default-color‘">你的发票在这里可以查询明细</li>
                                                                            <ul class="order-child" v-show="oneLeverMenuClicked" >
                                                                            <li>发票索取</li>
                                                                            <li>发票列表</li>
                                                                            <li>发票信息管理</li>
                                                                            <li>发票寄送地址管理</li>
                                                                            </ul>
        
                                                                    <li class="default-color" @mouseenter="twoLeverenter(3)" @click="twoLeverclick(3)"          :class="clickedIndex==3?‘click-color‘:‘default-color‘">合同管理</li>
                                                                            <div >
                                                                                <ul class="order-child" v-show="twoLeverMenuClicked">
                                                                                <li>合同申请</li>
                                                                                <li>合同管理</li>
                                                                                </ul>
                                                                            </div>
       
    </ul>
</div>


</div>
</template>

<script>
export default {
    data() {
        return {
            oneLeverMenuClicked:false,//点击子列表显示隐藏
            twoLeverMenuClicked:false,
            clickedIndex:100,//点击对应的颜色
            }
    },
    methods: {
        oneLeverenter:function(index){                
                    this.clickedIndex=index;                   
            },
        oneLeverleave:function(index){                
                    this.clickedIndex=100; 
            },
        twoLeverenter:function(index){            
            this.clickedIndex=index;
            },
        twoLeverclick:function(index){
            if (index==2){
                    this.oneLeverMenuClicked=!this.oneLeverMenuClicked;
                    this.clickedIndex=index;
                };
            if (index==3){
                    this.twoLeverMenuClicked=!this.twoLeverMenuClicked;
                    this.clickedIndex=index;
                };            
            }
    }
};
</script>

<style>
.left-titles{
height:70px;
line-height:70px;
text-align:center;
font-size:18px;
color:#171f2a;
}
.expense-left{
background: #f1f1f1;
}
.order-con{
text-align:left;
line-height:40px;
font-size:14px;
color:#171f2a;
}
.default-color{
width:80px;
color:#171f2a;
background: #f1f1f1;
overflow:hidden;           
word-break: keep-all;            
text-overflow: ellipsis;
}
.click-color{
color:#42aeec;
background:rgb(52, 51, 59);
overflow:visible;           
word-break: keep-all;            
text-overflow:clip;
}
.order-child{
width:160px;
font-size:12px;
line-height:40px;
text-align:left;
color:#666;
}
</style>