Vue3 布局模板，含 Tab 切换、卡片布局、好看的渐变色搭配

电脑版发表于：2025/7/21 10:31

效果图：

![](https://img.tnblog.net/arcimg/notebook/64e8f52c4c3146d1b3ec2e8bd40a8051.png)


###代码如下，直接复制在vue项目中运行即可：
```
<template>
  <div class="course-page">
    
    <el-tabs v-model="activeTab" class="tab-container">
      <el-tab-pane label="第四学期" name="term4"></el-tab-pane>
      <el-tab-pane label="第三学期" name="term3"></el-tab-pane>
      <el-tab-pane label="第二学期" name="term2"></el-tab-pane>
      <el-tab-pane label="第一学期" name="term1"></el-tab-pane>
    </el-tabs>

    
    <div class="course-list">
      <div 
        v-for="(course, index) in filteredCourses" 
        :key="index" 
        class="course-card"
      >
        
        <div 
          class="card-header" 
          :style="{ background: course.bgColor }"
        >
          <div class="header-content">
            <p class="course-title">{{ course.title }}</p>
            <p class="course-subtitle">{{ course.subtitle }}</p>
          </div>
        </div>

        
        <div class="card-body">
          <p class="course-name">{{ course.name }}</p>
          <p class="course-chapter">当前考评：第12章</p>
          
          <el-progress 
            :percentage="90" 
            stroke-width="6" 
            class="course-progress"
          ></el-progress>
          <p class="total-chapter">共13章</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
// 引入 Element Plus 组件类型（可选，TS 更友好）
import type { TabsPaneContext } from 'element-plus'

// 模拟课程数据（可从接口获取）
interface Course {
  title: string;       // 卡片顶部标题
  subtitle: string;    // 卡片顶部副标题
  name: string;        // 课程名称
  bgColor: string;     // 卡片顶部背景色
}

const termCourses: Record<string, Course[]> = {
  term4: [
    { title: '3D基础与多边形编辑（第二版）', subtitle: '3D基础与多边形编辑〔第二版〕', name: '3D基础与多边形编辑（第二版）', bgColor: 'linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)' },
    { title: '3ds Max场景道具角色', subtitle: '3ds Max场景道具角色', name: '3ds Max场景道具角色', bgColor: 'linear-gradient(120deg, #2c3e50 0%, #3498db 100%)' },
    { title: 'C#程序设计与WinForm基础', subtitle: 'C#程序设计与WinForm基础', name: 'C#程序设计与WinForm基础', bgColor: 'linear-gradient(120deg, #fce38a 0%, #f38181 100%)' },
    { title: 'Java面向对象程序设计', subtitle: 'Java面向对象程序设计', name: 'Java面向对象程序设计', bgColor: 'linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)' },
  ],
  term3: [
    { title: 'Linux服务器配置与应用', subtitle: 'Linux服务器配置与应用', name: 'Linux服务器配置与应用', bgColor: 'linear-gradient(120deg, #87e8de 0%, #9198e5 100%)' },
    { title: 'Photoshop平面设计基础(第二版)', subtitle: 'Photoshop平面设计基础(第二版)', name: 'Photoshop平面设计基础(第二版)', bgColor: 'linear-gradient(120deg, #4facfe 0%, #00f2fe 100%)' },
    { title: 'PPT职场应用实战', subtitle: 'PPT职场应用实战', name: 'PPT职场应用实战', bgColor: 'linear-gradient(120deg, #f6d365 0%, #fda085 100%)' },
    { title: 'Premiere剪辑技术', subtitle: 'Premiere剪辑技术', name: 'Premiere剪辑技术', bgColor: 'linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%)' },
  ],
  term2: [
    { title: '课程1', subtitle: '第二学期课程1', name: '第二学期课程1', bgColor: 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)' },
    { title: '课程2', subtitle: '第二学期课程2', name: '第二学期课程2', bgColor: 'linear-gradient(120deg, #ff9a9e 0%, #fecfef 100%)' },
    // 可继续扩展...
  ],
  term1: [
    { title: '课程A', subtitle: '第一学期课程A', name: '第一学期课程A', bgColor: 'linear-gradient(120deg, #b5fffc 0%, #94f7e5 100%)' },
    { title: '课程B', subtitle: '第一学期课程B', name: '第一学期课程B', bgColor: 'linear-gradient(120deg, #fccb90 0%, #d57eeb 100%)' },
    // 可继续扩展...
  ]
}

// Tab 激活态
const activeTab = ref('term4')

// 根据 Tab 筛选课程
const filteredCourses = computed(() => termCourses[activeTab.value] || [])
</script>

<style scoped>
.course-page {
  padding: 20px;
  background-color: #f9fafb;
}

/* Tab 容器样式 */
.tab-container {
  margin-bottom: 24px;
}

/* 课程列表布局 */
.course-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* 课程卡片样式 */
.course-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.course-card:hover {
  transform: translateY(-4px);
}

/* 卡片顶部渐变色区域 */
.card-header {
  padding: 20px;
  color: #fff;
  border-radius: 12px 12px 0 0;
}

.header-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.course-title {
  font-size: 16px;
  font-weight: 600;
}

.course-subtitle {
  font-size: 14px;
  opacity: 0.9;
}

/* 卡片内容区域 */
.card-body {
  padding: 20px;
}

.course-name {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #333;
}

.course-chapter {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

/* 进度条样式覆盖（Element Plus 默认较宽，可微调） */
.course-progress {
  margin-bottom: 8px;
}

.total-chapter {
  font-size: 13px;
  color: #999;
  text-align: right;
}
</style>
```

TeachingNote

Vue3 布局模板，含 Tab 切换、卡片布局、好看的渐变色搭配

{{item.title}}