<!-- 典型后台骨架：整体竖向，中间那一横条里再左右分 -->
<el-container>
  <el-header>顶栏</el-header>
  <el-container>
    <el-aside width="200px">侧栏</el-aside>
    <el-main>内容区</el-main>
  </el-container>
  <el-footer>底栏</el-footer>
</el-container>

<el-col :xs="24" :sm="12" :md="8" :lg="6">
  <!-- 手机 1 列 → 平板 2 列 → 小屏 3 列 → 大屏 4 列 -->
</el-col>

<el-row :gutter="16">
  <el-col v-for="i in 8" :key="i" :xs="24" :sm="12" :md="8" :lg="6">
    <el-card>{{ i }}</el-card>
  </el-col>
</el-row>

<script setup>
import { ref, computed } from 'vue'
import {
  ElConfigProvider, ElContainer, ElHeader, ElAside, ElMain, ElFooter,
  ElRow, ElCol, ElCard, ElButton, ElTag, ElAvatar, ElDivider,
  ElMenu, ElMenuItem, ElRadioGroup, ElRadioButton, ElAlert, ElSpace, ElIcon
} from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'

const collapsed = ref(false)
const activeMenu = ref('1')
const density = ref('lg')     // 控制栅格密度，方便对比

// 不同密度下的响应式配置
const colProps = computed(() => {
  if (density.value === 'xl') return { xs: 24, sm: 12, md: 8, lg: 6, xl: 4 }
  if (density.value === 'lg') return { xs: 24, sm: 12, md: 8, lg: 6 }
  return { xs: 24, sm: 24, md: 12, lg: 12 }
})

const cards = [
  { title: '今日访问量', value: '1,280', type: 'success' },
  { title: '新增学员', value: '36', type: 'primary' },
  { title: '待批作业', value: '12', type: 'warning' },
  { title: '异常请求', value: '3', type: '' },
  { title: '在线人数', value: '208', type: 'success' },
  { title: '课程总数', value: '46', type: 'primary' },
  { title: '已完成课时', value: '12', type: 'info' },
  { title: '平均完成率', value: '76%', type: 'warning' }
]

const winWidth = ref(window.innerWidth)
window.addEventListener('resize', () => { winWidth.value = window.innerWidth })
</script>

<template>
  <el-config-provider :locale="zhCn">
    <el-container class="layout">
      <el-header class="hd">
        <div class="hd-left">
          <el-button text @click="collapsed = !collapsed">{{ collapsed ? '展开' : '收起' }}</el-button>
          <b>Vue 3 教学后台</b>
        </div>
        <div class="hd-right">
          <el-tag size="small" type="success">在线</el-tag>
          <el-avatar :size="28">管</el-avatar>
        </div>
      </el-header>

      <el-container>
        <el-aside :width="collapsed ? '64px' : '200px'" class="aside">
          <el-menu :default-active="activeMenu" :collapse="collapsed" @select="k => activeMenu = k">
            <el-menu-item index="1">概览</el-menu-item>
            <el-menu-item index="2">学员管理</el-menu-item>
            <el-menu-item index="3">课程管理</el-menu-item>
            <el-menu-item index="4">数据统计</el-menu-item>
            <el-menu-item index="5">系统设置</el-menu-item>
          </el-menu>
        </el-aside>

        <el-main class="main">
          <el-card class="mb">
            <template #header>栅格响应式演示（拉动浏览器窗口宽度观察）</template>
            <div class="bar">
              <span class="label">每列最小宽度：</span>
              <el-radio-group v-model="density">
                <el-radio-button value="xl">更密（xl 提前生效）</el-radio-button>
                <el-radio-button value="lg">默认</el-radio-button>
                <el-radio-button value="md">更宽（较晚换行）</el-radio-button>
              </el-radio-group>
              <span class="label">当前窗口宽度：{{ winWidth }}px</span>
            </div>
            <el-alert
              title="当前 span 配置：见下方代码。窗口 <576 时一行 1 列，≥992 时一行 4 列（默认配置）。"
              type="info" :closable="false" show-icon style="margin-top: 10px"
            />
          </el-card>

          <el-row :gutter="16">
            <el-col v-for="c in cards" :key="c.title" v-bind="colProps">
              <el-card class="stat" shadow="hover">
                <p class="stat-title">{{ c.title }}</p>
                <p class="stat-value">{{ c.value }}</p>
                <el-tag v-if="c.type" :type="c.type" size="small">状态</el-tag>
              </el-card>
            </el-col>
          </el-row>

          <el-card class="mb" style="margin-top: 16px">
            <template #header>两栏布局（6 + 18）</template>
            <el-row :gutter="16">
              <el-col :xs="24" :md="6">
                <div class="box">左侧窄栏 span=6</div>
              </el-col>
              <el-col :xs="24" :md="18">
                <div class="box">右侧宽栏 span=18</div>
              </el-col>
            </el-row>

            <el-divider />

            <p class="label">居中一块（8 + offset 8）</p>
            <el-row :gutter="16">
              <el-col :span="8" :offset="8">
                <div class="box center">span=8，offset=8</div>
              </el-col>
            </el-row>
          </el-card>
        </el-main>
      </el-container>

      <el-footer class="ft">© 2026 Vue 3 教学后台 · 布局容器与栅格演示</el-footer>
    </el-container>
  </el-config-provider>
</template>

<style>
html, body, #app {
  margin: 0; padding: 0; max-width: none; width: auto; height: auto;
  display: block; place-items: initial; text-align: left; background: #f5f7fa;
}
</style>

<style scoped>
.layout { min-height: 100vh; }
.hd {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; border-bottom: 1px solid #e4e7ed; padding: 0 16px;
}
.hd-left, .hd-right { display: flex; align-items: center; gap: 12px; }
.aside { background: #fff; border-right: 1px solid #e4e7ed; transition: width 0.2s; }
.main { padding: 16px; }
.ft { display: flex; align-items: center; justify-content: center; color: #909399; font-size: 12px; background: #fff; border-top: 1px solid #e4e7ed; }
.mb { margin-bottom: 16px; }
.bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.label { color: #606266; font-size: 13px; }
.stat { text-align: center; }
.stat-title { color: #909399; font-size: 13px; margin: 0 0 6px; }
.stat-value { color: #303133; font-size: 22px; font-weight: 600; margin: 0 0 6px; }
.box {
  background: #ecf5ff; border: 1px dashed #a0cfff; color: #409eff;
  padding: 18px; text-align: center; border-radius: 4px;
}
.box.center { background: #f0f9eb; border-color: #b3e19d; color: #67c23a; }
:deep(.el-col) { margin-bottom: 0; }
</style>

<el-container>
  <el-header>...</el-header>
  <el-container>
    <el-aside>...</el-aside>
    <el-main>...</el-main>
  </el-container>
  <el-footer>...</el-footer>
</el-container>

<el-container>
  <el-header style="background:#fff">顶栏</el-header>
  <el-main style="background:#f5f7fa">内容区</el-main>
</el-container>

<el-container>
  <el-aside width="200px">侧栏</el-aside>
  <el-main>内容区</el-main>
</el-container>

const collapsed = ref(false)

<el-aside :width="collapsed ? '64px' : '200px'">
  <el-menu :collapse="collapsed">...</el-menu>
</el-aside>

<el-row :gutter="16">
  <el-col :span="12"><div class="box">12</div></el-col>
  <el-col :span="12"><div class="box">12</div></el-col>
</el-row>
<el-row :gutter="16">
  <el-col :span="8"><div class="box">8</div></el-col>
  <el-col :span="8"><div class="box">8</div></el-col>
  <el-col :span="8"><div class="box">8</div></el-col>
</el-row>