vue开发的计算机课程页面
课程信息展示页面设计与实现
我将设计一个美观且实用的课程信息展示页面，重点展示计算机网络应用课程的相关信息。
设计思路
使用卡片式布局清晰展示课程各模块信息
采用科技感配色方案，符合计算机网络课程主题
添加动画效果增强用户体验
响应式设计确保在各种设备上的良好显示
下面是完整的实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算机网络应用课程信息</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;}body {background: linear-gradient(135deg, #1a2a6c, #2c3e50, #1a2a6c);color: #fff;min-height: 100vh;padding: 20px;line-height: 1.6;}.container {max-width: 1200px;margin: 0 auto;padding: 20px;}header {text-align: center;padding: 30px 0;margin-bottom: 30px;animation: fadeInDown 1s ease-out;}.header-content {background: rgba(255, 255, 255, 0.08);backdrop-filter: blur(10px);border-radius: 15px;padding: 25px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);border: 1px solid rgba(255, 255, 255, 0.1);position: relative;overflow: hidden;}.header-content::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 5px;background: linear-gradient(90deg, #3498db, #2ecc71, #3498db);}h1 {font-size: 2.8rem;font-weight: 700;margin-bottom: 15px;background: linear-gradient(90deg, #3498db, #2ecc71);-webkit-background-clip: text;-webkit-text-fill-color: transparent;position: relative;}.course-info {display: flex;flex-wrap: wrap;justify-content: center;gap: 25px;margin: 20px 0;}.info-item {background: rgba(255, 255, 255, 0.1);border-radius: 10px;padding: 15px 20px;min-width: 200px;text-align: center;}.info-label {font-size: 0.9rem;opacity: 0.8;margin-bottom: 5px;}.info-value {font-size: 1.3rem;font-weight: 600;color: #2ecc71;}.card-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 30px;margin-bottom: 40px;}.card {background: rgba(255, 255, 255, 0.08);backdrop-filter: blur(12px);border-radius: 15px;padding: 30px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);transition: all 0.4s ease;border: 1px solid rgba(255, 255, 255, 0.1);opacity: 0;transform: translateY(30px);}.card.visible {opacity: 1;transform: translateY(0);}.card:hover {transform: translateY(-10px);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);background: rgba(255, 255, 255, 0.12);}.card h2 {font-size: 1.8rem;margin-bottom: 25px;color: #3498db;display: flex;align-items: center;padding-bottom: 15px;border-bottom: 2px solid rgba(52, 152, 219, 0.3);}.card h2 i {margin-right: 12px;font-size: 1.5rem;}.card-content {font-size: 1.1rem;margin-bottom: 20px;font-weight: 300;line-height: 1.8;}.target-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 25px;margin-top: 30px;}.target-card {background: rgba(255, 255, 255, 0.08);border-radius: 12px;padding: 25px;position: relative;overflow: hidden;transition: all 0.3s ease;}.target-card:hover {transform: translateY(-5px);background: rgba(255, 255, 255, 0.12);}.target-card h3 {font-size: 1.4rem;margin-bottom: 15px;color: #2ecc71;display: flex;align-items: center;}.target-card h3 i {margin-right: 10px;}.target-card ul {padding-left: 25px;}.target-card li {margin-bottom: 10px;position: relative;}.target-card li::before {content: '•';color: #3498db;font-weight: bold;position: absolute;left: -20px;}.assessment {background: rgba(255, 255, 255, 0.08);backdrop-filter: blur(12px);border-radius: 15px;padding: 30px;margin-top: 40px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);border: 1px solid rgba(255, 255, 255, 0.1);position: relative;overflow: hidden;}.assessment::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 5px;background: linear-gradient(90deg, #e74c3c, #f39c12, #e74c3c);}.assessment h2 {font-size: 1.8rem;margin-bottom: 25px;color: #f39c12;display: flex;align-items: center;}.assessment h2 i {margin-right: 12px;}.assessment-content {font-size: 1.1rem;line-height: 1.8;padding: 0 10px;}footer {text-align: center;padding: 40px 0 20px;margin-top: 50px;border-top: 1px solid rgba(255, 255, 255, 0.1);font-weight: 300;opacity: 0.8;}@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }}@keyframes fadeInDown {from {opacity: 0;transform: translateY(-30px);}to {opacity: 1;transform: translateY(0);}}@media (max-width: 768px) {h1 { font-size: 2.2rem; }.course-info {flex-direction: column;align-items: center;}.info-item {width: 100%;}.card {padding: 25px;}}</style>
</head>
<body><div id="app"><div class="container"><header><div class="header-content"><h1>计算机网络应用课程信息</h1><div class="course-info"><div class="info-item"><div class="info-label">班级</div><div class="info-value">应电五贯21-1班</div></div><div class="info-item"><div class="info-label">课程周数</div><div class="info-value">1-8周</div></div><div class="info-item"><div class="info-label">学期学时</div><div class="info-value">32.0</div></div><div class="info-item"><div class="info-label">周学时</div><div class="info-value">4.0/周</div></div></div><div class="info-item" style="width:100%;margin-top:15px;"><div class="info-label">学期</div><div class="info-value">2025-2026(1)</div></div></div></header><div class="card-grid"><div class="card" :class="{visible: card1Visible}" ref="card1"><h2><i class="fas fa-book"></i> 必备知识与技能</h2><div class="card-content"><p>学习本课程需要具备以下基础知识和技能：</p><ul><li>计算机基础操作能力</li><li>基本的数学逻辑思维</li><li>操作系统基础概念</li><li>互联网基本应用能力</li><li>问题分析与解决能力</li></ul></div></div><div class="card" :class="{visible: card2Visible}" ref="card2"><h2><i class="fas fa-graduation-cap"></i> 为后续课程提供</h2><div class="card-content"><h3>知识体系：</h3><p>本课程的学习为后续课程提供计算机技术的基本知识体系，掌握计算机网络基础，让学生更好理解计算机技术的相关课程。</p><h3 style="margin-top:25px;">技能培养：</h3><ul><li>网络配置与管理能力</li><li>网络故障诊断技能</li><li>网络安全基础防护</li><li>网络协议分析能力</li><li>网络应用开发基础</li></ul></div></div><div class="card" :class="{visible: card3Visible}" ref="card3"><h2><i class="fas fa-file-alt"></i> 课程标准</h2><div class="card-content"><p>本课程采用最新版《计算机网络应用》课程标准，结合行业最新发展动态，注重理论与实践相结合。</p><ul><li>版本：2025修订版</li><li>主编：教育部计算机专业教指委</li><li>出版社：高等教育出版社</li><li>ISBN：978-7-04-058888-8</li></ul></div></div></div><div class="target-grid"><div class="target-card" :class="{visible: target1Visible}" ref="target1"><h3><i class="fas fa-brain"></i> 知识目标</h3><ul><li>掌握计算机网络的基本概念和体系结构</li><li>理解TCP/IP协议栈及各层功能</li><li>熟悉常见网络设备的工作原理</li><li>了解网络安全的基本原理和技术</li><li>掌握网络服务配置与管理方法</li><li>了解云计算和物联网网络基础</li></ul></div><div class="target-card" :class="{visible: target2Visible}" ref="target2"><h3><i class="fas fa-laptop-code"></i> 能力目标</h3><ul><li>能够配置和管理中小型企业网络</li><li>能够诊断和解决常见网络故障</li><li>能够使用网络监控和分析工具</li><li>能够配置基本网络安全防护措施</li><li>能够部署常见网络服务与应用</li><li>具备网络方案设计初步能力</li></ul></div><div class="target-card" :class="{visible: target3Visible}" ref="target3"><h3><i class="fas fa-users"></i> 素质目标</h3><ul><li>培养网络安全意识和责任感</li><li>提升团队协作与沟通能力</li><li>养成严谨细致的工程素养</li><li>增强创新思维和问题解决能力</li><li>培养职业道德和行业规范意识</li><li>树立科技报国的理想信念</li></ul></div></div><div class="assessment" :class="{visible: assessmentVisible}" ref="assessment"><h2><i class="fas fa-clipboard-check"></i> 课程考核办法</h2><div class="assessment-content"><p>本课程采用多元化考核方式，全面评价学生学习成效：</p><ul><li><strong>平时成绩 (30%)</strong>：出勤、课堂参与、平时作业</li><li><strong>实验实践 (30%)</strong>：网络配置实验、故障排查任务、项目实践</li><li><strong>期末考试 (40%)</strong>：理论知识考核与应用能力测试</li></ul><p style="margin-top:20px;background:rgba(231,76,60,0.2);padding:15px;border-radius:8px;"><i class="fas fa-lightbulb"></i> <strong>补全知识要求</strong>：学生需通过补充学习材料、课后实践和小组讨论等方式，完善课程知识体系，特别是对网络协议、安全防护等核心概念的深入理解。</p></div></div><footer><p>应电五贯21-1班 | 计算机网络应用课程 | 2025-2026学年第一学期</p><p>© 2025 电子信息工程学院 - 保留所有权利</p></footer></div></div><script>const { createApp, ref, onMounted } = Vue;createApp({setup() {// 创建可见性引用const card1Visible = ref(false);const card2Visible = ref(false);const card3Visible = ref(false);const target1Visible = ref(false);const target2Visible = ref(false);const target3Visible = ref(false);const assessmentVisible = ref(false);// 元素引用const card1 = ref(null);const card2 = ref(null);const card3 = ref(null);const target1 = ref(null);const target2 = ref(null);const target3 = ref(null);const assessment = ref(null);// 检查元素是否可见const checkVisibility = (element, visibilityRef) => {if (!element || visibilityRef.value) return;const rect = element.getBoundingClientRect();const isVisible = (rect.top <= (window.innerHeight * 0.85) && rect.bottom >= (window.innerHeight * 0.15));if (isVisible) {visibilityRef.value = true;}};// 滚动监听const handleScroll = () => {checkVisibility(card1.value, card1Visible);checkVisibility(card2.value, card2Visible);checkVisibility(card3.value, card3Visible);checkVisibility(target1.value, target1Visible);checkVisibility(target2.value, target2Visible);checkVisibility(target3.value, target3Visible);checkVisibility(assessment.value, assessmentVisible);};onMounted(() => {// 添加滚动监听window.addEventListener('scroll', handleScroll);// 初始检查handleScroll();});return {card1Visible,card2Visible,card3Visible,target1Visible,target2Visible,target3Visible,assessmentVisible,card1,card2,card3,target1,target2,target3,assessment};}}).mount('#app');</script>
</body>
</html>页面功能与特点
现代化UI设计
科技感渐变背景（深蓝色系）
玻璃拟态效果卡片设计
清晰的信息层次结构
响应式布局适配各种设备
动态效果
滚动触发的卡片渐入动画
卡片悬停上浮效果
平滑的过渡动画
内容组织
顶部课程基本信息展示区
三个核心卡片（必备知识、后续课程提供、课程标准）
三个目标卡片（知识目标、能力目标、素质目标）
底部考核办法区域
特色设计
每个卡片顶部的彩色标识条
使用图标增强可读性
重点信息高亮显示
"补全知识"要求特殊样式突出
响应式设计
在移动设备上自动调整布局
小屏幕设备优化显示效果
字体大小自适应
这个页面清晰地展示了计算机网络应用课程的所有关键信息，包括课程基本信息、教学目标、考核方式等，并通过现代化的UI设计增强了可读性和视觉吸引力。