Beginner Blender 4.0 Tutorial - Part 3: Modelling the Icing

根据你的描述，你希望设计一个展示React课程的页面，并且需要对页面进行美化。以下是一个基于Vue的实现方案，包含数据渲染和基本的样式美化。 ### Vue代码实现 ```vue <template> <div class="course-container"> <h1 class="course-title">{{ course.title }}</h1> <p class="course-description">{{ course.description }}</p> <p><strong>目标：</strong>{{ course.objective }}</p> <p><strong>难度级别：</strong>{{ course.difficultyLevel }}</p> <p><strong>预计时长：</strong>{{ course.estimatedDuration }} 分钟</p> <p><strong>创建者：</strong>{{ course.createdByUsername }}</p> <h2 class="activities-title">课程活动</h2> <ul class="activities-list"> <li v-for="(activity, index) in activities" :key="activity.id" class="activity-item"> <div class="activity-header"> <span class="activity-order">{{ index + 1 }}.</span> <span class="activity-title">{{ activity.title }}</span> </div> <p class="activity-description">{{ activity.description }}</p> <p><strong>类型：</strong>{{ activity.activityType }}</p> <p v-if="activity.resourceTitle"><strong>资源：</strong>{{ activity.resourceTitle }}</p> <p><strong>预计时间：</strong>{{ activity.estimatedTime }} 分钟</p> <p><strong>是否必修：</strong>{{ activity.isRequired ? &#39;是&#39; : &#39;否&#39; }}</p> </li> </ul> </div> </template> <script> export default { data() { return { course: { id: 4, title: "React前端开发入门", description: "从零开始学习React前端开发", objective: "掌握React框架及相关生态", difficultyLevel: "BEGINNER", estimatedDuration: 1500, isPublished: true, createdById: 13, createdByUsername: "teacher2", createdAt: "2025-05-23T23:00:00", updatedAt: "2025-05-23T23:00:00", activitiesCount: 7 }, activities: [ { id: 9, title: "JavaScript ES6+基础", description: "JavaScript ES6+基础", activityType: "LEARNING", resourceId: 1, resourceTitle: "JavaScript基础教程", sequenceOrder: 1, estimatedTime: 120, isRequired: true, createdAt: "2025-05-24T00:00:00", updatedAt: "2025-05-24T00:00:00" }, { id: 10, title: "React基础入门", description: "React基础概念和组件", activityType: "LEARNING", resourceId: 6, resourceTitle: "React实战教程", sequenceOrder: 2, estimatedTime: 150, isRequired: true, createdAt: "2025-05-24T00:01:00", updatedAt: "2025-05-24T00:01:00" }, { id: 11, title: "React实战练习", description: "创建一个简单的React应用", activityType: "PRACTICE", resourceId: null, resourceTitle: null, sequenceOrder: 3, estimatedTime: 180, isRequired: true, createdAt: "2025-05-24T00:02:00", updatedAt: "2025-05-24T00:02:00" }, { id: 12, title: "React Router", description: "React Router路由管理", activityType: "LEARNING", resourceId: null, resourceTitle: null, sequenceOrder: 4, estimatedTime: 120, isRequired: true, createdAt: "2025-05-24T00:03:00", updatedAt: "2025-05-24T00:03:00" }, { id: 13, title: "Redux状态管理", description: "Redux状态管理", activityType: "LEARNING", resourceId: null, resourceTitle: null, sequenceOrder: 5, estimatedTime: 150, isRequired: true, createdAt: "2025-05-24T00:04:00", updatedAt: "2025-05-24T00:04:00" }, { id: 14, title: "React项目实战", description: "开发一个完整的React应用", activityType: "PROJECT", resourceId: null, resourceTitle: null, sequenceOrder: 6, estimatedTime: 240, isRequired: true, createdAt: "2025-05-24T00:05:00", updatedAt: "2025-05-24T00:05:00" }, { id: 15, title: "React技能评估", description: "React开发技能测评", activityType: "ASSESSMENT", resourceId: null, resourceTitle: null, sequenceOrder: 7, estimatedTime: 60, isRequired: true, createdAt: "2025-05-24T00:06:00", updatedAt: "2025-05-24T00:06:00" } ] }; } }; </script> <style scoped> .course-container { max-width: 800px; margin: 0 auto; padding: 20px; font-family: Arial, sans-serif; } .course-title { font-size: 28px; color: #333; margin-bottom: 10px; } .course-description { font-size: 16px; color: #666; margin-bottom: 20px; } .activities-title { font-size: 24px; margin-top: 30px; margin-bottom: 10px; } .activities-list { list-style: none; padding: 0; } .activity-item { border: 1px solid #ddd; border-radius: 5px; padding: 15px; margin-bottom: 15px; background-color: #f9f9f9; } .activity-header { display: flex; align-items: center; margin-bottom: 10px; } .activity-order { font-size: 18px; font-weight: bold; color: #007bff; margin-right: 10px; } .activity-title { font-size: 18px; font-weight: bold; color: #333; } .activity-description { font-size: 14px; color: #666; margin-bottom: 10px; } </style> ``` ### 解释 1. **数据绑定**：通过`v-for`指令遍历`activities`数组，将每个活动的详细信息展示出来。 2. **样式美化**：使用CSS对页面进行了布局和颜色调整，使其更加美观。 3. **响应式设计**：设置了`max-width`和居中对齐，确保在不同设备上都能正常显示。