jiangchengfeiyi-Web/src/layout/components/Aside.vue

<template>
  <el-aside :width="sideWidth + 'px'" style="position: sticky; bottom: 0; left: 0; height: auto; background-color: rgb(170, 113, 81); box-shadow: rgba(0, 21, 155, 0.35) 2px 0 6px">
   <el-aside :style="AsideObj">
        <el-menu
            style=" overflow-y: auto; overflow-x: hidden"
            background-color="rgb(170, 113, 81)"
            :collapse="isCollapse"
            :collapse-transition="false"
            text-color="#fff"
            router
            active-text-color="#ffd04b">
          <div style="height: 80px; color: white; font-weight: bold;
           display: flex; align-items: center; justify-content: center">
            <img src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FypVcAOGV-Snipaste_2024-10-11_15-03-12.png" alt="" style="height: 30px">
            <span style="margin-left: 5px" v-show="isShow">泠泷水月阁管理系统</span>
          </div>

          <el-sub-menu index="1">
            <template #title>
              <el-icon><HomeFilled /></el-icon>
                <span>用户管理</span>
            </template>

            <el-menu-item index="/PersonalCenter">
              <el-icon><UserFilled /></el-icon>
              <span slot="title">个人中心</span>
            </el-menu-item>

            <el-menu-item index="/UserManagement">
              <el-icon><List /></el-icon>
              <span slot="title">用户列表</span>
            </el-menu-item>

            <el-menu-item index="/Upload">
              <el-icon><List /></el-icon>
              <span slot="title">图片上传</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon><HomeFilled /></el-icon>
              <span>实体类商品管理</span>
            </template>

            <el-menu-item index="/AddProduct">
              <el-icon><Menu /></el-icon>
              <span slot="title">添加商品</span>
            </el-menu-item>

            <el-menu-item index="/MerchandiseCenter">
              <el-icon><UserFilled /></el-icon>
              <span slot="title">商品中心</span>
            </el-menu-item>

            <el-menu-item index="/TypeManagement">
              <el-icon><Menu /></el-icon>
              <span slot="title">类别管理</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon><HomeFilled /></el-icon>
              <span>服务类商品管理</span>
            </template>
            <el-menu-item index="/AddServiceProduct">
              <el-icon><Menu /></el-icon>
              <span slot="title">添加服务类商品</span>
            </el-menu-item>
            <el-menu-item index="/ProductCenter">
              <el-icon><Menu /></el-icon>
              <span slot="title">服务类商品中心</span>
            </el-menu-item>
          </el-sub-menu>
          
          <el-sub-menu index="4">
            <template #title>
              <el-icon><HomeFilled /></el-icon>
              <span>优惠券管理</span>
            </template>
            <el-menu-item index="/AddCoupons">
              <el-icon><Menu /></el-icon>
              <span slot="title">添加优惠券</span>
            </el-menu-item>
            <el-menu-item index="/CouponCenter">
              <el-icon><Menu /></el-icon>
              <span slot="title">优惠券中心</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="5">
            <template #title>
              <el-icon><HomeFilled/></el-icon>
              <span>商品订单管理</span>
            </template>
            <el-menu-item index="/OrderList">
              <el-icon><Menu /></el-icon>
              <span slot="title">实体商品订单列表</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="6">
            <template #title>
              <el-icon><HomeFilled/></el-icon>
              <span>写真预约管理</span>
            </template>
            <el-menu-item index="/ClothingGrade">
              <el-icon><Menu /></el-icon>
              <span slot="title">服装等级管理</span>
            </el-menu-item>
            <el-menu-item index="/CostumeDetails">
              <el-icon><Menu /></el-icon>
              <span slot="title">服装详情</span>
            </el-menu-item>
            <el-menu-item index="/AddCostumes">
              <el-icon><Menu /></el-icon>
              <span slot="title">添加服装</span>
            </el-menu-item>
            <el-menu-item index="/AppointmentOrder">
              <el-icon><Menu /></el-icon>
              <span slot="title">预约订单</span>
            </el-menu-item>
            <el-menu-item index="/ReservationInstructions">
              <el-icon><Menu /></el-icon>
              <span slot="title">预约须知</span>
            </el-menu-item>
            <el-menu-item index="/CostExplanation">
              <el-icon><Menu /></el-icon>
              <span slot="title">费用说明</span>
            </el-menu-item>
            <el-menu-item index="/timeManagement">
              <el-icon><Menu /></el-icon>
              <span slot="title">时间管理</span>
            </el-menu-item>
            <el-menu-item index="/TimeCenter">
              <el-icon><Menu /></el-icon>
              <span slot="title">预约时间中心</span>
            </el-menu-item>
          </el-sub-menu>


          <el-sub-menu index="7">
            <template #title>
              <el-icon><Switch /></el-icon>
              <span>退款管理</span>
            </template>

            <el-menu-item index="/refund">
              <el-icon><Operation /></el-icon>
              <span slot="title">退款中心</span>
            </el-menu-item>

          </el-sub-menu>
          
        </el-menu>
      </el-aside>
    </el-aside>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import { defineProps } from 'vue';
import emitter from '@/utils/emitter'
import router from '@/router';
import {List} from "@element-plus/icons-vue";
defineProps(['send-data'])

const showLog = ref(true)

const isCollapse = ref(false)
const isShow = ref(true)
const sideWidth = ref(200)
const AsideObj = ref({
  width: '200px'
})

emitter.on('Aside', (value:any) => {
  showLog.value = value
  if(showLog.value){
    AsideObj.value.width = '64px'
    isCollapse.value = true
    isShow.value = false
    sideWidth.value = 64
  }else{
    AsideObj.value.width = '200px'
    isCollapse.value = false
    isShow.value = true
    sideWidth.value = 200
  }

})




</script>
<style scoped>

</style>