<template>
    <div class="searh-menu-container">
        <el-input prefix-icon="el-icon-search" placeholder="请输入内容"></el-input>
        <ul class="search-menu">
            <li class="cpn-submenu" style="padding: 0;">
                <div class="cpn-submenu_title">
                    <i class="iconfont icon-2zuzhijiagou"></i>
                    <span>品牌一</span>
                </div>
                <ul>
                    <li class="menuitem cpn-submenu-item">
                        <i class="iconfont icon-chengyuan"></i>
                        <span>陈景良</span>
                    </li>
                    <li class="cpn-submenu">
                        <div class="cpn-submenu_title">
                            <i class="iconfont icon-tongshi-zuzhijiagou"></i>
                            <span>人事部</span>
                        </div>
                        <ul>
                            <li class="menuitem cpn-submenu-item">
                                <i class="iconfont icon-chengyuan"></i>
                                <span>陈景良</span>
                            </li>
                            <li class="cpn-submenu">
                                <div class="cpn-submenu_title">
                                    <i class="iconfont icon-tongshi-zuzhijiagou"></i>
                                    <span>人事部</span>
                                </div>
                                <ul>
                                    <li class="menuitem cpn-submenu-item">
                                        <i class="iconfont icon-chengyuan"></i>
                                        <span>陈景良</span>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <!-- <el-menu
            class="search-menu"
            @open="handleOpen"
            @close="handleClose">
            <el-submenu index="1">
                <template slot="title">
                    <i class="iconfont icon-2zuzhijiagou"></i>
                    <span>品牌一</span>
                </template>
                <el-submenu index="1-1">
                    <template slot="title">
                        <i class="icon-tongshi-zuzhijiagou iconfont"></i>
                        <span>选项4</span>
                    </template>
                    <el-menu-item index="1-1-1">
                        <i class="iconfont icon-chengyuan"></i>
                        <span>张三</span>
                    </el-menu-item>
                </el-submenu>
            </el-submenu>
        </el-menu> -->
        
    </div>
</template>
<script>
    export default {
       name: "searchMenu",
       components: {},
       props: {},
       data: {
           data: [
               {
                   brand_name: "江南布衣",
                   brand_code: "001",
                   brand_id: "jnby001",
                   sort: 1,
                   status: 1,

               }
           ]
       },
       created() {},
       metods: {},
       filter: {},
       computed: {},
       watch: {}
    };
</script>
<style lang="scss">
    .searh-menu-container {
        width: 260px;
        background: #eef1f8;
        height: 100%;
        min-height: 600px;
        padding: 20px 15px;
        .search-menu {
            margin-top: 30px;
            color: #606266;
            font-size: 14px;
            background: #EEF1F8;
            .iconfont {
                color: #409EFF;
                font-size: 16px;
                margin-right: 5px;
            }
            .cpn-submenu {
                list-style: none;
                margin: 0;
            }
            .cpn-submenu_title {
                height: 36px;
                line-height: 36px;
                padding: 0 20px;
                &:hover {
                    background:#409EFF;
                    color: #fff;
                    .iconfont {
                        color: #fff;
                    }
                }
            }
            .cpn-submenu-item {
                height: 36px;
                line-height: 36px;
                padding: 0 40px;
                &:hover {
                    background: #409EFF;
                    color: #fff;
                    .iconfont {
                        color: #fff;
                    }
                }
            }
        }
        // .search-menu {
        //     margin-top: 30px;
        //     background: none;
        //     border: none;
        //     .el-submenu__title {
        //         height: 36px;
        //         line-height: 36px;
        //         .iconfont {
        //             font-size: 16px;
        //             color: #409EFF;
        //             margin-right: 5px;
        //         }
        //     }
        //     .el-menu {
        //         background: none;
        //         .el-menu-item {
        //             height: 36px;
        //             line-height: 36px;
        //             .iconfont {
        //                 font-size: 16px;
        //                 color: #409EFF;
        //                 margin-right: 5px;
        //             }
        //         }
        //     }
        // }
    }
</style>


