gold_vue/vue/gold-system/src/views/index.vue

<script setup>
import { ref, onMounted, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import ElementPlus from "element-plus";
import { VscGlobe } from 'vue-icons-plus/vsc'

const router = useRouter();

// 用户对象假的
const admin = ref({
    adminId: 1,
    name:'客服A',
    area:'新加坡'
})

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside style="width: 250px;">
        <div class="logo">
          <img src="../assets/金币管理系统logo.png" alt="logo" style="width: 30px;height: 30px;" />
          <div style="font-size: 16px; font-weight: bold;">海外金币管理系统</div>
        </div>
        <el-menu router="true" background-color="#08193d" active-text-color="#ffd04b" text-color="white"
          class="el-menu-vertical-demo" default-active="2" @open="handleOpen" @close="handleClose">
          <el-menu-item index="/workspace">
            <el-icon>
              <Folder />
            </el-icon>
            工作台
          </el-menu-item>

          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Folder />
              </el-icon>
              <span>财务审核</span>
            </template>
            <el-menu-item index="/rechargeAudit">充值审核</el-menu-item>
            <el-menu-item index="/refundAudit">退款审核</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <Folder />
              </el-icon>
              <span>充值管理</span>
            </template>
            <el-menu-item index="/activity">活动管理</el-menu-item>
            <el-menu-item index="/rate">汇率管理</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <Folder />
              </el-icon>
              <span>金币充值</span>
            </template>
            <el-menu-item index="/addRecharge">新增充值</el-menu-item>
            <el-menu-item index="/adminRecharge">客服充值明细</el-menu-item>
            <el-menu-item index="/allRecharge">所有充值明细</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="5">
            <template #title>
              <el-icon>
                <Folder />
              </el-icon>
              <span>金币消费</span>
            </template>
            <el-menu-item index="/addConsume">新增消费</el-menu-item>
            <el-menu-item index="/allConsume">所有消费明细</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="6">
            <template #title>
              <el-icon>
                <Folder />
              </el-icon>
              <span>金币退款</span>
            </template>
            <el-menu-item index="/addRefund">新增退款</el-menu-item>
            <el-menu-item index="/allRefund">退款明细</el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/usergold">
            <el-icon>
              <Folder />
            </el-icon>
            客户金币明细
          </el-menu-item>

        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
            @select="handleSelect">
            <el-sub-menu index="1" class="admin">
              <template #title>
                <img style="width: 30px;height: 30px; border-radius: 50%;" src="../assets/金币管理系统logo.png" alt="出错了" />
                <span style="margin-left: 10px;">{{ admin.name }}</span>
              </template>
              <el-menu-item index="1-1">查看个人信息</el-menu-item>
              <el-menu-item index="1-2">退出登录</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="2">
              <VscGlobe />
            </el-menu-item>
          </el-menu>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.admin {
  margin-left: auto;
}

.el-aside {
  background-color: #08193d;
  min-height: 100vh;
  width: 200px;
}

.logo {
  color: white;
  margin: 20px 0px 20px 20px;
  display: flex;
}
</style>