菜单切换1

src/layout/components/Sidebar/index.vue

@@ -2,7 +2,19 @@
   <div :class="{ 'has-logo': showLogo }">
     <div class="sidebar_box_bottom">
       <div class="arrow-icon_left" @click="arrowBack">
-        <el-icon size="60" color="#0077fa"><ArrowLeft /></el-icon>
+        <el-icon size="60" color="#0077fa">
+          <ArrowLeft />
+        </el-icon>
+        <div class="white_box_left">
+          <el-icon size="30" color="#ffffff">
+            <ArrowLeftBold />
+          </el-icon>
+        </div>
+        <div class="white_box_left_il">
+          <el-icon size="22" color="rgb(25, 148, 219)">
+            <CaretLeft />
+          </el-icon>
+        </div>
       </div>
       <div class="tag-style" ref="tagBox">
         <div class="menu_bottom_box" ref="scrollWrapper">
@@ -32,7 +44,19 @@
         </div>
       </div>
       <div class="arrow-icon_right" @click="arrowForward">
-        <el-icon size="60" color="#0077fa"><ArrowRight /></el-icon>
+        <el-icon size="60" color="#0077fa">
+          <ArrowRight />
+        </el-icon>
+        <div class="white_box">
+          <el-icon size="30" color="#ffffff">
+            <ArrowRightBold />
+          </el-icon>
+        </div>
+        <div class="white_box_il">
+          <el-icon size="22" color="rgb(25, 148, 219)">
+            <CaretRight />
+          </el-icon>
+        </div>
       </div>
     </div>
   </div>
@@ -154,16 +178,49 @@ checkButtonStatus()
   display: flex;
   align-items: center;
 }
-.arrow-icon_left{
+
+.arrow-icon_left {
   position: absolute;
   bottom: 0;
   left: -10px;
+  cursor: pointer;
 }
-.arrow-icon_right{
+
+.white_box_left {
+  position: absolute;
+  top: 15px;
+  left: 12px;
+  z-index: -1;
+}
+
+.white_box_left_il {
+  position: absolute;
+  top: 19px;
+  left: 23px;
+  z-index: -1;
+}
+
+.arrow-icon_right {
   position: absolute;
   bottom: 0;
   right: -10px;
+  cursor: pointer;
+}
+
+.white_box {
+  position: absolute;
+  top: 15px;
+  right: 13px;
+  z-index: -1;
+}
+
+.white_box_il {
+  position: absolute;
+  top: 19px;
+  right: 23px;
+  z-index: -1;
 }
+
 .sidebar_box_bottom::after {
   content: '';
   position: absolute;