科技星球项目的设计与实现
目录
科技星球项目的设计与实现 1
一、 实验目的 1
二、 实验环境 1
三、 实验项目需求 1
四、 实验报告内容 2
第一个页面 2
第二个页面 4
第三个页面 6
import router from "@/router"; 10
router.push('/scientists') 11
最后一个页面 12
一、实验目的
1、科技星球项目的设计与实现；
二、实验环境
个人笔记本电脑，win10操作系统，编译器为IntelliJ IDEA 2020.3.1
三、实验项目需求
1、首页有一个背景视频，中心有一个按钮，不断点击可以出现不同的文字，最后会跳转到下一个页面
2、这个为视频展示页面，在页面底下有一个走马灯，通过可以通过鼠标进行切换视频，在鼠标移出去之后这个框会变得比较透明，方便观看，移上去又变得不透明，方便选择不同的视频
3、左上角有一个按钮可以返回第一个页面，右下角也有一个按钮可以进入下一个页面
4、第三个页面是人物资料馆，有几个不同的主题，通过点击不同的主题可以跳转进不同的页面，里面展示的是这个领域的一些杰出科学家的资料
5、不同人物的资料卡可以直接手动进行切换，如果不点击，一定的时间间隔之后也可以自行切换，实现自动播放
6、背景用了一些粒子效果，可以通过鼠标进行互动。更具有科技感
7、最后一个页面是鸣谢公告，通过文字轮播的形式，文字从下面缓缓地滑到上面去
8、通过css 或者一些 ui 框架实现自己想要的样式