软件工程实践————结对作业二

这个作业属于哪个课程	软件工程实践2022年春-F班
这个作业要求在哪里	软件工程实践————结对作业二
结对学号	221900418 221900403
这个作业的目标	实现上次作业的原型中的部分功能
其他参考文献	CSDN 、BiliBili 、博客园、GitHub

一、博客链接

221900403
221900418

---

二、代码规范参考

前端代码规范

---

三、代码仓库

代码仓库地址

---

四、 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	45
• Estimate	• 估计这个任务需要多少时间	30	45
Development	开发	370	660
• Analysis	• 需求分析 (包括学习新技术)	90	200
• Medal map design	• 奖牌地图设计	60	60
•Medal list design	•奖牌总榜设计	30	30
• Daily schedule design	• 每日赛程设计	60	200
•Learn more about design	•了解更多设计	30	30
•Detailed schedule design	• 详细赛程设计	20	50
•Beautification design	• 美化设计	20	90
Reporting	报告	30	60
• Size Measurement	• 计算工作量	10	20
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	20	40
	合计	430	765

---

五、项目展示

1、项目部署地址

项目地址

2、项目展示

• 初始界面&了解更多：主要进行了对吉祥物的介绍、三个运动项目和冬奥会图片，主要实现了文字图片的排版、雪花动画和走马灯
  
  

• 奖牌总榜：可以查看获奖各国的具体奖牌数，高亮了中国，表格使用斑马纹样式，可以分开各国，当鼠标移到上方时，背景色会变透明
  
• 每日赛程：通过表格展示各项目的详细赛程，显示比赛时间、大项名称、比赛名称、场馆等信息，同时支持通过选择、切换比赛日期、项目、场馆的形式来筛选用户希望查看的赛程
  
• 详细赛况：目前只实现了三个项目详细赛况，通过表格展示
  
• 奖牌地图：以世界地图的形式直观地展示各个参赛国家的奖牌数，在地图上使用不同的颜色代表大致的奖牌数区间，颜色深浅表示奖牌数的多少，鼠标点击或移动到每个国家会高亮显示奖牌信息
  

六、结对讨论过程描述

结对队友为舍友，主要通过线下沟通，线上主要用来分享网站和学习素材

七、设计实现过程

设计初期我们本来是想选择使用vue3.0框架来实现，但后来我们选择了纯前端进行开发，就认为使用vue太麻烦了，直接引入需要的js文件和css样式表，就可以直接实现。

八、代码说明

页眉栏

<img src="src/img/tou.png" style="margin:0 auto;width:100%">
        <el-row style="background-color: #b5dfff">
            <el-col :span="4"></el-col>
            <el-col :span="4" style="text-align:center"><el-button size="large" type="primary" plain><a href="index.html">冬奥知识</a></el-button></el-col>
            <el-col :span="4" style="text-align:center"><el-button size="large" type="primary" plain><a href="奖牌总榜.html">奖牌总榜</a></el-button></el-button></el-col>
            <el-col :span="4" style="text-align:center"><el-button size="large" type="primary" plain><a href="每日赛程.html">每日赛程</a></el-button></el-col>
            <el-col :span="4" style="text-align:center"><el-button size="large" type="primary" plain><a href="奖牌地图.html">奖牌地图</a></el-button></el-col>
            <el-col :span="4"></el-col>
        </el-row>

每日赛程的样例示范

    <el-row>
        <el-col :span