vue开发的计算机课程页面

速易达网络2025-08-11 9:44

课程信息展示页面设计与实现

我将设计一个美观且实用的课程信息展示页面，重点展示计算机网络应用课程的相关信息。

设计思路

  • 使用卡片式布局清晰展示课程各模块信息

  • 采用科技感配色方案，符合计算机网络课程主题

  • 添加动画效果增强用户体验

  • 响应式设计确保在各种设备上的良好显示

下面是完整的实现代码：

复制代码 
<!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>

页面功能与特点

  1. 现代化UI设计

    • 科技感渐变背景（深蓝色系）

    • 玻璃拟态效果卡片设计

    • 清晰的信息层次结构

    • 响应式布局适配各种设备

  2. 动态效果

    • 滚动触发的卡片渐入动画

    • 卡片悬停上浮效果

    • 平滑的过渡动画

  3. 内容组织

    • 顶部课程基本信息展示区

    • 三个核心卡片（必备知识、后续课程提供、课程标准）

    • 三个目标卡片（知识目标、能力目标、素质目标）

    • 底部考核办法区域

  4. 特色设计

    • 每个卡片顶部的彩色标识条

    • 使用图标增强可读性

    • 重点信息高亮显示

    • "补全知识"要求特殊样式突出

  5. 响应式设计

    • 在移动设备上自动调整布局

    • 小屏幕设备优化显示效果

    • 字体大小自适应

这个页面清晰地展示了计算机网络应用课程的所有关键信息，包括课程基本信息、教学目标、考核方式等，并通过现代化的UI设计增强了可读性和视觉吸引力。

热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02[已解决]VSCode右键菜单消失恢复03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04UV安装并设置国内源05🚀Cursor CLI+GPT-5保姆级教程+编程能力测评！Cursor CLI零成本免费使用GPT-5！Claude Code的劲敌来了！从安装到实战演示06GPT-5 使用限制与国内升级全攻略（免费 / Plus / Pro）【2025 最新】07KGG转MP3工具|非KGM文件|解密音频08OpenAI重返开源！GPT-OSS本地部署完全指南092025年华数杯C题超详细解题思路10Cursor 终端“卡死/无响应”问题的解法