基于html和vue的科技星球展示网页设计

﹏ヽ暗。殇╰゛Y 2024-04-06 13:57 89阅读 0赞

科技星球项目的设计与实现  
目录  
科技星球项目的设计与实现 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、最后一个页面是鸣谢公告，本文转载自http://www.biyezuopin.vip/onews.asp?id=14776通过文字轮播的形式，文字从下面缓缓地滑到上面去  
8、通过css 或者一些 ui 框架实现自己想要的样式

<template>
      <div>
        <h1>科技星球</h1>
        <video id='bgVideo' autoplay loop muted src="@/assets/img/video/开头视频.mp4"></video>
        
        <button id="btn1" @click="changeText">{
        {
        text[now]}}</button>
      </div>
    </template>
    
    <script>
    export default {
        
      name: "Planet",
      data() {
        
        return {
        
          modal1: false,
          now : 0,
          text : ["亲爱的，你好。欢迎来到科技星球","这里是2021年","在过去的一年里，我们经历了严峻的疫情，每个人都不能独善其身",
            "我们同心协力，共同战胜了这场与病毒的战役","2021在万物复苏中迎面走来，也同样迎来了中国共产党成立100周年的时间节点",
            "历史车轮滚滚向前，新时代潮流浩浩荡荡","我们踏着先人的肩膀，才站到了今天的位置","追溯到100年前",
            "你是否知晓，中国科技道路经历了怎样的艰难险阻？","又是否知晓，如今的中国，已经取得了怎样的伟大成就？",
            "一张张照片档案、一件件实物、一册册史志","谱写出一代代劳动人民的故事，留下了无数革命先辈的足迹，承载了数以万计大通人的记忆",
            "历史见证百年党史的春华秋实、岁物丰成，它留住最真实、最宝贵、最朴实的奋斗经验和抗争经验","让我们一起见证中国科技奇迹","点击进入科技星球","点击进入科技星球","点击进入科技星球"],
        }
      },
      methods: {
        
        changeText() {
        
          if (this.now >= 14) {
        
            this.$router.push({
        
              name:'main'
            })
          }
          else
            this.now++;
        }
      }
    }
    </script>
    
    <style scoped>
    @font-face
    {
        
      font-family: 汉仪雪君体简;
      /* src: url('https://partykeji.oss-cn-beijing.aliyuncs.com/%E6%B1%89%E4%BB%AA%E9%9B%AA%E5%90%9B%E4%BD%93%E7%AE%80.TTF') */
      src: url('../../assets/font/汉仪雪君体简.TTF')
    }
    h1
    {
        
      font-family:汉仪雪君体简;
    }
    button
    {
        
      font-family: 汉仪雪君体简;
    }
    * {
        
      padding: 0;
      margin: 0;
    }
    
    h1{
        
      background: rgba(0, 0, 0, 0);
      position: absolute;
      color: rgb(10, 87, 99);
      /* left: 46%; */
      top: 3%;
      left: 50%;
      transform: translateX(-50%);
      text-shadow: 2px 2px 2px #16abf0;
    }
    
    button {
        
      margin-left: 50%;
      margin-top: 40vh;
      transform: translateX(-50%);
      font-variation-settings: 'wght' 400,'slnt' 0;
      border: rgb(130,240,251) 2px solid;
      appearance: none;
      font-size: 20px;
      line-height: 30px;
      padding: 10px 30px;
      border-radius: 9999px;
      background: rgb(10, 87, 99);
      color: rgb(216, 216, 216);
      transition: color .4s ease-out,background .4s ease-out;
      cursor: pointer;
      /* -webkit-writing-mode: horizontal-tb !important; */
      text-rendering: auto;
      letter-spacing: normal;
      word-spacing: normal;
      text-transform: none;
      text-indent: 0px;
      text-shadow: none;
      display: inline-block;
      text-align: center;
      align-items: flex-start;
      /*font: 400 13.3333px Arial;*/
      font-size: 2.3em;
      transition: 1s;
    }
    
    button:hover{
        
      background-color: rgba(0, 55, 64,0.7);
    }
    
    #bgVideo {
          
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    </style>

![在这里插入图片描述][61ec6c25110d4235a23851dce57c74bb.png_pic_center]  
![在这里插入图片描述][80d75717583f4b3c8e57ac22fecbbd79.png_pic_center]  
![在这里插入图片描述][ca342e03d8944841b69b1d58c70c05f0.png_pic_center]  
![在这里插入图片描述][8abf51686dbf44c4b0cacf6bc5b592ab.png_pic_center]  
![在这里插入图片描述][5bd98d3b9a8d4ac78d1dc9b2cb22eb2f.png_pic_center]  
![在这里插入图片描述][51360cfbd6e7462590805eb7d559bae8.png_pic_center]  
![在这里插入图片描述][4e9189910dff426bab30f45f27aa8eb4.png_pic_center]  
![在这里插入图片描述][133c22fb7a9a4a84bbee33dbb362bfce.png_pic_center]  
![在这里插入图片描述][71d64d9b63774d779d445d0ad7673105.png_pic_center]  
![在这里插入图片描述][c4e3827e79264c42a1ac6beed6c5125f.png_pic_center]

[61ec6c25110d4235a23851dce57c74bb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/65433155ad4d464bae4b9f941da03b87.png
[80d75717583f4b3c8e57ac22fecbbd79.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2dad73219b8045248c534496a289d91f.png
[ca342e03d8944841b69b1d58c70c05f0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/25f862ee4e4b409d96d9716cf9dde2a9.png
[8abf51686dbf44c4b0cacf6bc5b592ab.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/8c279f40f1dd4e7f90f571d3171c903f.png
[5bd98d3b9a8d4ac78d1dc9b2cb22eb2f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7c081bfd1ba44aaa82ab5d6b06dea4c5.png
[51360cfbd6e7462590805eb7d559bae8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/90cb403da60f4a7484a29165ff062941.png
[4e9189910dff426bab30f45f27aa8eb4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/dee8f8e2c8314db0a328ac63dc0fc83e.png
[133c22fb7a9a4a84bbee33dbb362bfce.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1aaa1a8d30364e77bb37014b50770b4b.png
[71d64d9b63774d779d445d0ad7673105.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/bdb33e56ae8a49018b4be348a71663e3.png
[c4e3827e79264c42a1ac6beed6c5125f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2dbd49043ce2484b940a486092ee9ba0.png