嗨购后台管理系统 - 首页

<template>
  <div class='common-layout'>
    <el-container>
      <el-aside width='300px'>
        <el-menu
          router
          active-text-color='blue'
          background-color='#333'
          class='el-menu-vertical-demo'
          default-active='2'
          text-color='#fff'
          @open='handleOpen'
          @close='handleClose'
        >
          <h1>嗨购后台管理系统</h1>
          <el-menu-item index='1' route='/index/home'>
            <el-icon><icon-menu /></el-icon>
            <span><el-icon><House /></el-icon>首页</span>
          </el-menu-item>
          <el-sub-menu index='2'>
            <template #title>
              <span><el-icon><Message /></el-icon>轮播图管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index='2-1' route='/index/lbt'>轮播图列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index='3'>
            <template #title>
              <el-icon><UserFilled /></el-icon>
              <span>账号管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index='3-1'>管理员列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index='4'>
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>产品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index='4-1'>产品列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index='4-2'>秒杀列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index='4-3'>推荐列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index='4-4'>筛选列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index='5'>
            <template #title>
              <el-icon><TrendCharts /></el-icon>
              <span>数据可视化</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index='5-1'>echarts使用</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index='6'>
            <template #title>
              <el-icon><EditPen /></el-icon>
              <span>编译器</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index='6-1'>编译器使用</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index='7'>
            <template #title>
              <el-icon><Failed /></el-icon>
              <span>excel管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index='7-1'>excel使用</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index='8'>
            <template #title>
              <el-icon><DeleteLocation /></el-icon>
              <span>地图管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index='8-1'>百度地图</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class='header'>
          <div class='left'>
            <el-icon><Fold /></el-icon>
          </div>
          <div class='right'>
            欢迎：{{ userInfoStore.userinfo.adminname }}
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { useUserinfoStore } from '@/stores/userinfo'
var userInfoStore = useUserinfoStore()
var router = useRouter();
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  border: 0;
}
h1 {
  font-size: 30px;
  color: #fff;
  margin-left: 20px;
  padding-top: 20px;
  padding-bottom: 10px;
}
.header {
  width: auto;
  background: #333;
  height: 80px;
}
</styl