前端day1

<template>
  <div class="layout">
    <el-container>
      <el-header class="header">Header</el-header>
      <el-container class="container">
        <el-aside width="200px" 
                  class="left-aside">
          <div>
            <el-button class="post-btn">发布</el-button>
          </div>
          <div class="menu-panel">
            <ul>
            <li v-for="menu in menuList" :key="menu.title">
              <span :class="['iconfont',menu.icon]"></span>
              <span>{{menu.title}}</span>
              <ul>
                <li v-for="subMenu in menu.children" :key="subMenu.title">
                   <span>{{subMenu.title}}</span>
                </li>
              </ul>
            </li>
          </ul>
          </div>
          
        </el-aside>
        
        <el-main class="right-main">Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { ref } from "vue"
const menuList = ref([
  {
    title: "博客",
    icon: "icon-blog",
    open: true,
    children: [
      {
        title: "博客管理",
        path: "/blog/list",
      },
      {
        title: "分类管理",
        path: "/blog/category",
      },
    ],
  },
  {
    title: "专题",
    icon: "icon-zhuanti",
    open: true,
    children: [
      {
        title: "专题管理",
        path: "/special/list",
      },
    ],
  },
  {
    title: "设置",
    icon: "icon-settings",
    open: true,
    children: [
      {
        title: "个人信息设置",
        path: "/settings/my",
      },
      {
        title: "博客成员",
        path: "/settings/user",
      },
      {
        title: "系统设置",
        path: "/settings/sysInfo",
        roleType: 1,
      },
    ],
  },
  {
    title: "回收站",
    icon: "icon-delete",
    open: true,
    children: [
      {
        title: "回收站",
        path: "/recovery/list",
      },
    ],
  },
]);
</script>
<style lang="scss">
.layout{
  .header{
    border-bottom: 1px solid #ddd;
  }
  .container{
    padding: 10px;
    background: #f0f0f0;
    height:calc(100vh - 60px);
    .left-aside{
       padding:0px 15px;
       width: 300px;
      .post-btn{
        background: rgb(5, 116, 219);
        color:#fff;
        height: 40px;
        width:100%
      }
      .menu-panel{
        ul,
        li{
          padding: 0px;
          margin: 0px;
          list-style: none;
        }
      }
    }
    .right-main{
       background: #ffffff;
      
    }
  }
}
</style>