el-menu实现侧边栏

<template></template>

<el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#FFF"
    >
      <div class="one-submenu">
        <div class="tltle-menu">
          <div class="span-one">全颌曲面断层片</div>
        </div>
      </div>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><location /></el-icon>
          <span class="span-two">头颅侧位定位片</span>
          <iconpark-icon name="HOT" class="hot"></iconpark-icon>
        </template>
        <el-menu-item index="1-1">头影分析</el-menu-item>
        <el-menu-item index="1-2">骨龄分析</el-menu-item>
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2" class="submenu-two">
        <template #title>
          <span class="span-three">口内照</span>
        </template>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon><location /></el-icon>
          <span class="span-two">面像照片</span>
          <iconpark-icon name="HOT" class="hot"></iconpark-icon>
        </template>
        <el-menu-item index="3-1">侧面照分析</el-menu-item>
        <el-menu-item index="3-2">正面照分析</el-menu-item>
        <el-menu-item index="3-3">微笑照分析</el-menu-item>
      </el-sub-menu>
    </el-menu>

.el-menu-vertical-demo {
    border: none;
  }

.submenu-two .el-sub-menu__icon-arrow{
    display: none;
}

  .el-sub-menu .el-sub-menu__icon-arrow{
    width: 24px;
    height: 24px;
    left: 12PX !important;
  }
  .span-two {
    color: #333;
    font-family: PingFang SC;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px; /* 157.143% */
  }
  .el-sub-menu .span-three {
    color: #333;
    font-family: PingFang SC;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px; /* 157.143% */
  }
  .el-sub-menu .el-menu-item {
    width: 258PX;
    height: 46PX;
    margin-left: 24PX;
    padding-bottom: 15px !important;
    padding-top: 17px !important;
    color: #666;
  }
  .el-menu-item:hover{
    outline: 0 !important;
    color: #666!important;
    background: var(--background-2-b-2-b-2-b-7, rgba(43, 43, 43, 0.07));
  }
  .el-menu-item.is-active {
    color: #333!important;
    border-radius: 4px;
    background: var(--background-2-b-2-b-2-b-7, rgba(43, 43, 43, 0.07));
  }