嗨购后台管理系统 - 首页

<template>
    <div class='common-layout'>
      <el-container>
        <el-aside width='300px'>
<pre><code>        &lt;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'
        &gt;   
            &lt;h1&gt;嗨购后台管理系统&lt;/h1&gt;
            &lt;el-menu-item index='1'  route='/index/home'&gt;
            &lt;el-icon&gt;&lt;icon-menu /&gt;&lt;/el-icon&gt;
            &lt;span&gt;&lt;el-icon&gt;&lt;House /&gt;&lt;/el-icon&gt;首页&lt;/span&gt;
            &lt;/el-menu-item&gt;
            &lt;el-sub-menu index='2' &gt;
            &lt;template #title&gt;
                &lt;span&gt;&lt;el-icon&gt;&lt;Message /&gt;&lt;/el-icon&gt;轮播图管理&lt;/span&gt;
            &lt;/template&gt;
            &lt;el-menu-item-group&gt;
                &lt;el-menu-item index='2-1' route='/index/lbt'&gt;轮播图列表&lt;/el-menu-item&gt;
            &lt;/el-menu-item-group&gt;
            &lt;/el-sub-menu&gt;
            &lt;el-sub-menu index='3' &gt;
            &lt;template #title&gt;
                &lt;el-icon&gt;&lt;UserFilled /&gt;&lt;/el-icon&gt;
                &lt;span&gt;账号管理&lt;/span&gt;
            &lt;/template&gt;
            &lt;el-menu-item-group&gt;
                &lt;el-menu-item index='3-1'&gt;管理员列表&lt;/el-menu-item&gt;
            &lt;/el-menu-item-group&gt;
            &lt;/el-sub-menu&gt;
            &lt;el-sub-menu index='4'&gt;
            &lt;template #title&gt;
                &lt;el-icon&gt;&lt;Setting /&gt;&lt;/el-icon&gt;
                &lt;span&gt;产品管理&lt;/span&gt;
            &lt;/template&gt;
            &lt;el-menu-item-group&gt;
                &lt;el-menu-item index='4-1'&gt;产品列表&lt;/el-menu-item&gt;
            &lt;/el-menu-item-group&gt;
            &lt;el-menu-item-group&gt;
                &lt;el-menu-item index='4-2'&gt;秒杀列表&lt;/el-menu-item&gt;
            &lt;/el-menu-item-group&gt;
            &lt;el-menu-item-group&gt;
                &lt;el-menu-item index='4-3'&gt;推荐列表&lt;/el-menu-item&gt;
            &lt;/el-menu-item-group&gt;
            &lt;el-menu-item-group&gt;
                &lt;el-menu-item index='4-4'&gt;筛选列表&lt;/el-menu-item&gt;
            &lt;/el-menu-item-group&gt;
            &lt;/el-sub-menu&gt;
            &lt;el-sub-menu index='5'&gt;
            &lt;template #title&gt;
                &lt;el-icon&gt;&lt;TrendCharts /&gt;&lt;/el-icon&gt;
                &lt;span&gt;数据可视化&lt;/span&gt;
            &lt;/template&gt;
            &lt;el-menu-item-group&gt;
                &lt;el-menu-item index='5-1'&gt;echarts使用&lt;/el-menu-item&gt;
            &lt;/el-menu-item-group&gt;
            &lt;/el-sub-menu&gt;
            &lt;el-sub-menu index='6'&gt;
            &lt;template #title&gt;
                &lt;el-icon&gt;&lt;EditPen /&gt;&lt;/el-icon&gt;
                &lt;span&gt;编译器&lt;/span&gt;
            &lt;/template&gt;
            &lt;el-menu-item-group&gt;
                &lt;el-menu-item index='6-1'&gt;编译器使用&lt;/el-menu-item&gt;
            &lt;/el-menu-item-group&gt;
            &lt;/el-sub-menu&gt;
            &lt;el-sub-menu index='7'&gt;
            &lt;template #title&gt;
                &lt;el-icon&gt;&lt;Failed /&gt;&lt;/el-icon&gt;
                &lt;span&gt;excel管理&lt;/span&gt;
            &lt;/template&gt;
            &lt;el-menu-item-group&gt;
                &lt;el-menu-item index='7-1'&gt;excel使用&lt;/el-menu-item&gt;
            &lt;/el-menu-item-group&gt;
            &lt;/el-sub-menu&gt;
            &lt;el-sub-menu index='8'&gt;
            &lt;template #title&gt;
                &lt;el-icon&gt;&lt;DeleteLocation /&gt;&lt;/el-icon&gt;
                &lt;span&gt;地图管理&lt;/span&gt;
            &lt;/template&gt;
            &lt;el-menu-item-group&gt;
                &lt;el-menu-item index='8-1'&gt;百度地图&lt;/el-menu-item&gt;
            &lt;/el-menu-item-group&gt;
            &lt;/el-sub-menu&gt;
        &lt;/el-menu&gt;
    
    
    
  &lt;/el-aside&gt;
    &lt;el-container&gt;
      &lt;el-header class='header'&gt;
       &lt;div class='left'&gt;
        &lt;el-icon&gt;&lt;Fold /&gt;&lt;/el-icon&gt;
       &lt;/div&gt;
       &lt;div class='right'&gt;
       欢迎：{{ userInfoStore.userinfo.adminname }}
       &lt;/div&gt;
       &lt;/el-header&gt;

      &lt;el-main&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/el-main&gt;
    &lt;/el-container&gt;
  &lt;/el-container&gt;
&lt;/div&gt;
</code></pre>
  </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;
    }
</style>