el-tree 的样式修改之旅

    此代码为问题3：
                .el-tree-node:focus>.el-tree-node__content {    
                    background-color: transparent ;  //当选中树节点时的颜色改变，默认为白色
                }
                .el-tree-node .is-expanded .is-current .is-focusable{
                    margin-bottom: 10px;
                }

                    .el-tree-node__expand-icon {
                        position: absolute;  //设置倒三角的位置  目前我设置的是让倒三角在右侧显示
                        right: 6%;  
                    }
                    //一级节点选择器
                    .el-tree-node .el-tree-node__content {
                        background-image: linear-gradient(to right, rgba(0,136,210, 0.5), rgba(0,25,46, 0.5));
                        font-weight: bold;
                        margin-bottom: 3px;
                        color: #00eaff;
                        font-size: 16px;  
                    }
                    .el-tree-node__content > label.el-checkbox {
                        margin-left: 20px;  //checkbox 距离左侧的位置
                    }
                    //二级节点选择器
                     .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__content{
                        margin: 0px !important;
                        font-weight: 100;
                        background-image: linear-gradient(to right, rgba(0,136,210, 0.2), rgba(0,25,46, 0.2)) !important;
                        //设置二级节点渐变背景颜色透明度为20%
                    }
                    .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__content .el-tree-node__label{
                        font-size: 14px; //设置二级节点文字大小
                        color: #00eaff;//设置二级节点文字颜色
                    }
                    .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__content .el-checkbox__inner{
                        width: 14px;   //设置二级节点checkbox大小
                        height: 14px;
                    }
                    .el-checkbox__input.is-checked .el-checkbox__inner{
                        background: #00eaff; //修改选中时checkbox背景颜色
                        &::after {
                            border-color: #002237; //修改checkbox对钩颜色
                        }
                    }
                    .el-tree-node__expand-icon {
                        color: #0095A8;  //修改el-tree树结构自带的三角图标的颜色
                    }
                    .el-tree-node__expand-icon.is-leaf::before {
                        display: none;   //修改el-tree树结构自带的三角图标的颜色,之后会出现一个问题,会将叶子节点(没有子节点的)也给添加了三角图标,审查元素发现所有节点的图标都带有一样的类名,只要修改样式就会更改所有图标,不管是否是叶子节点.所以还要加上下面的代码,隐藏叶子节点的三角图标才能行.
                    }