智能简历平台Plus——首页制作

我们在前端vue中实现了超炫酷的动态背景

这是vanta.js官网，可以体验一下超级酷炫的背景，可以手动调节物体数量、聚集度等参数来实现不同效果的不同酷炫背景：https://www.vantajs.com/

首先需要下载插件

npm install vanta@0.5.24

npm install three@0.121.0

<div class="firstPage">: 整个页面的容器，设置了相对定位

<div ref="vantaRef" style="width: 100%; height: 300px"></div>: 用于渲染Vanta.js效果的容器，通过ref="vantaRef"引用，在mounted生命周期中初始化

<div class="banner">: 页面顶部的横幅区域，包含标题和进入按钮

<h1>智能简历平台Plus</h1>: 页面标题

<button @click="start" class="start-button">ENTER</button>: 进入按钮，点击后触发start方法

<template>
    <div class="firstPage">
      <div ref="vantaRef" style="width: 100%; height: 300px"></div>
      <div class="banner">
        <h1>智能简历平台Plus</h1>
        <button @click="start" class="start-button">ENTER</button>
      </div>
    </div>
  </template>

import * as THREE from "three";: 导入THREE.js库，用于在Vanta.js中创建和操作3D场景

import CELLS from "vanta/src/vanta.cells";: 导入Vanta.js的CELLS效果，这是一种基于THREE.js的动态背景效果

  import * as THREE from "three";
  import CELLS from "vanta/src/vanta.cells";

methods: Vue组件的方法部分，包含了一个start方法，在点击"ENTER"按钮时触发，用来进行路由导航

    methods: {
    start(){
        this.$router.push('/HomePage');
    }
    },

mounted() { ... }: Vue组件的生命周期钩子，在组件挂载后调用，初始化Vanta.js效果。使用CELLS函数创建了一个动态的细胞背景效果，配置了各种参数如控制方式、最小高度、最小宽度、颜色、大小和速度

    mounted() {
      this.vantaEffect = CELLS({
        el: this.$refs.vantaRef,
        THREE: THREE,
        /*以下为样式配置*/
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 720.0,
        minWidth: 200.0,
        scale: 1.0,
        color1: 0x19cfcf,
        color2: 0xcfca7e,
        size: 2.7,
        speed: 2.5,
      });
    },

beforeUnmount() { ... }: Vue 3.x中的组件生命周期钩子，用来在组件卸载前销毁Vanta.js效果，防止内存泄漏

    beforeUnmount() {
      if (this.vantaEffect) {
        this.vantaEffect.destroy();
      }
    },

定义了按钮（.start-button）的样式，包括背景颜色、字体颜色、边框等，以及悬停时的样式变化

.firstPage和.banner类分别用于页面容器和横幅的定位和样式设置

h1和p元素的样式设定了标题和段落的字体大小和间距

  .start-button{
    padding: 20px 40px;
    background-color: #81b975;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 10px;

    margin-top: 20%;
    bottom: 5%;
    left: 10%;
    font-size: 2rem;
    font-weight: bold; /* 加粗 */
  }
  .start-button:hover{
    background-color: #4a6a43e4;
  }
  .firstPage {
    position: relative;
    .banner {
      z-index: 999;
      position: absolute;
      top: 30%;
      left: 10%;
      color: #fff;
    }
  }
  h1 {
    font-size: 80px;
  }
  p {
    margin-top: 60px;
    font-size: 18px;
  }

最终效果：（实际是动态的，这是二维图片体现不出效果，可以大概想象一下）

参考教程：

前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)_vue 动态背景-CSDN博客