炫酷登录页（Vue2+Vue3）-- 附代码

1. 效果图

（代码在最后，请务必看完）有帮助记得点个赞

 2. 注意事项

需要的安装包

（1）在项目中安装 three.js 依赖  

npm install three@0.134.0

（2）在项目中安装 Vanta JS 依赖

npm i vanta

（3）ElementPlus

npm install element-plus --save

Vanta.js官网：可自己DIY

Vanta.js - Animated 3D Backgrounds For Your Website (vantajs.com)

3. Vue3代码

Login.vue

<template>
  <div style="height: 100%;">
    <div ref="login" class="login">
      <div class="content-top">
        <div class="left">
          <div class="texts">
            <div>
              <h1>基 于 c n n 黑 色 素 瘤 识 别 与 防 控</h1>
              <h3>Identification and prevention of melanoma based on c n n N</h3>
            </div>
          </div>
        </div>
        <div class="right">
          <el-card shadow="hover">
            <el-tabs v-model="activeTab">
              <el-tab-pane label="登录" name="login">
                <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="auto" status-icon>
                  <el-form-item prop="userAccount" style="margin-top: 20px;">
                    <el-input v-model="loginForm.userAccount" placeholder="请输入用户名" :prefix-icon="User" />
                  </el-form-item>
                  <el-form-item prop="userPassword">
                    <el-input v-model="loginForm.userPassword" placeholder="请输入密码" :prefix-icon="Lock" show-password
                      type="password" />
                  </el-form-item>
                  <el-form-item>
                    <button class="getfiles" type='button' @click="onLogin"><span>登录</span></button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="注册" name="register">
                <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" label-width="auto"
                  status-icon>
                  <el-form-item prop="userAccount">
                    <el-input v-model="registerForm.userAccount" :prefix-icon="User" placeholder="请输入用户名" />
                  </el-form-item>
                  <el-form-item prop="userPassword">
                    <el-input v-model="registerForm.userPassword" placeholder="请输入密码" :prefix-icon="Lock"
                      type="password" show-password />
                  </el-form-item>
                  <el-form-item prop="userPassword">
                    <el-input v-model="registerForm.rePassword" placeholder="请重复密码" :prefix-icon="Lock" type="password"
                      show-password />
                  </el-form-item>
                  <el-form-item>
                    <button class="getfiles" type='button' @click="onRegister"><span>注册</span></button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>

          </el-card>
        </div>
      </div>
    </div>
    <div class="content-bottom">
      <div class="header-txt">主 要 功 能</div>
      <el-divider>
        <el-icon><star-filled /></el-icon>
      </el-divider>
      <div class="tabs">
        <div class="tabs-div">
          <img src="@/assets/images/data.png" class="imgs">
          <div class="txt">在 线 识 别</div>
        </div>
        <div class="tabs-div">
          <img src="@/assets/images/analyse.png" class="imgs">
          <div class="txt">精 准 判 别</div>
        </div>
        <div class="tabs-div">
          <img src="@/assets/images/identify.png" class="imgs">
          <div class="txt">快 速 可 靠</div>
        </div>
      </div>
      <div class="header-txt" style="margin-top: 50px;">项 目 描 述</div>
      <el-divider>
        <el-icon><star-filled /></el-icon>
      </el-divider>
      <div>
        <div class="card">
          <p>&nbsp;&nbsp;
            基于 CNN
            的黑色素瘤识别与防控项目是利用深度学习技术来帮助医疗领域进行黑色素瘤的自动识别与预防控制的项目。通过采集的皮肤图像数据集作为训练集，利用卷积神经网络(CNN)算法来构建模型进行黑色素瘤的图像识别。
          </p>
          <p style="margin-top: 10px;">&nbsp;&nbsp;
            在项目中，我们将使用
            Python 编程语言结合 TensorFlow 或 PyTorch 框架来实现整个流程。
            该项目的主要流程包括数据的采集与预处理、模型的训练与优化、以及识别结果的展示与可视化。通过对大量黑色素瘤图像进行训练，模型可以准确地识别黑色素瘤的特征，帮助医生们进行更快速、更准确的诊断。同时，项目还可以结合其他医疗数据和信息，提供黑色素瘤的预防控制建议，帮助人们及时发现并预防黑色素瘤的发生。
          </p>
        </div>
      </div>
      <div class="header-txt" style="margin-top: 50px;">案 例 展 示</div>
      <el-divider>
        <el-icon><star-filled /></el-icon>
      </el-divider>

      <div style="width: 100%; margin-top: 60px;">
        <div style="margin: 0 auto; width: 80%;">
        </div>
      </div>
      <el-backtop :right="100" :bottom="100" />
      <div style="height: 400px;"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from "vue";
import { useStore } from "vuex";
import { useRouter } from 'vue-router';
import axios from "@/http/http";

import * as THREE from "three";
import WAVES from "vanta/dist/vanta.birds.min";
const store = useStore();

const login = ref();
let vantaEffect;

import { User, Lock, StarFilled } from '@element-plus/icons-vue'

const router = useRouter();
let activeTab = ref('login');

const loginForm = reactive({});
const registerForm = reactive({});
const onLogin = () => {
  loginFormRef.value.validate(async (vaild) => {
    if (!vaild) return ElMessage({
      message: '请填写必要表单项',
      type: 'error',
    })
    const { data: res } = await axios.post('/user/login', loginForm);
    if (res.code != 200) return ElMessage({
      message: "账号或密码错误",
      type: 'error',
    })
    store.commit('changeUserInfo', res.data);
    window.sessionStorage.setItem("token", res.data.token);
    ElMessage({
      message: '登陆成功',
      type: 'success',
    })
    router.push('/home');
  })
}



onMounted(() => {
  vantaEffect = WAVES({
    el: login.value,
    THREE: THREE,
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.00,
    minWidth: 200.00,
    scale: 1.00,
    scaleMobile: 1.00,
    backgroundColor: 0x75caaf,
    color1: 0x4d705f,
    color2: 0x2d8e8e,
  });
});

onUnmounted(() => {
  if (vantaEffect) {
    vantaEffect.destroy();
  }
});


</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 84vh;


  /deep/.el-input__prefix-inner {
    color: #70C1B3;
  }

  .content-top {
    display: flex;
    width: 100%;
    height: 100%;

    .left {
      flex: 1;

      .texts {
        width: 100%;
        height: 60%;
        color: #fff;
        user-select: none;
        font-family: "FZShuTi";

        div {
          text-align: center;
          margin-top: 25%;

          h1 {
            font-size: 38px;
          }

          h3 {
            margin-top: 20px;
            font-size: 28px;
          }
        }
      }
    }

    .right {
      width: 50%;
      position: relative;
      height: 100%;

      .el-card {
        width: 60%;
        background-color: #fff;
        border-radius: 15px;
        position: absolute;
        left: 20%;
        top: 20%;
        height: 37%;

        .el-tabs {
          width: 100%;
          margin: 0 auto;

          .el-form {


            .getfiles {
              transform: scale(0.7);
              display: inline-block;
              border-radius: 20px;
              background-color: #78e6bc;
              border: none;
              color: #ffff;
              text-align: center;
              font-size: 20px;
              font-weight: 400;
              padding: 18px;
              width: 200px;
              transition: all 0.5s;
              cursor: pointer;
              vertical-align: middle;
              margin: 0 auto;
              margin-top: 10px;
            }

            .getfiles span {
              cursor: pointer;
              display: inline-block;
              position: relative;
              transition: 0.5s;
            }

            .getfiles span::after {
              content: ">";
              position: absolute;
              opacity: 0;
              top: 4px;
              right: -20px;
              transition: 0.5s;
            }

            .getfiles:hover span {
              padding-right: 30px;
            }

            .getfiles:hover span::after {
              opacity: 1;
              right: 0;
            }

          }
        }


        /deep/.el-tabs__item {
          width: 100% !important;
          --el-color-primary: #70C1B3;
        }

        /deep/.el-tabs__nav {
          width: 100%;
        }

        /deep/.el-tabs__active-bar {
          background-color: #70C1B3;
        }

        /deep/.el-tabs__item.is-active {
          color: #70C1B3;
        }
      }


    }
  }


}

.content-bottom {
  .tabs {
    display: flex;
    justify-content: space-around;

    .tabs-div {
      box-shadow: 0 0 18px 10px rgba(0, 0, 0, 0.2);
      transition: 0.3s;

      &:hover {
        box-shadow: 0 0 28px 15px #78e6bc;
      }
    }

    .imgs {
      width: 400px;
      height: 300px;
    }

    .txt {
      width: 100%;
      padding-bottom: 10px;
      text-align: center;
      font-size: 28px;
      font-family: "FZShuTi";
      color: #032d38;
    }
  }

  .el-divider--horizontal {
    border-top: 1px #78e6bc var(--el-border-style);

    .el-icon {
      color: #78e6bc;
    }
  }

  .header-txt {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    font-size: 35px;
    color: #78e6bc;
    font-style: italic;
    font-family: "FZShuTi";
  }

  .card {
    width: 70%;
    margin: 0 auto;
    margin-top: 40px;
    font-size: 25px;
    box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    padding: 25px 30px;
    padding-bottom: 200px;
    border-radius: 10px;
    font-family: "FZShuTi";

    &:hover {
      box-shadow: 14px 14px 14px 15px rgb(168, 236, 210);
    }
  }
}

.el-backtop {
  width: 44px;
  height: 44px;
  box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.2);
  color: #70C1B3;
}
</style>

4. Vue2代码

<template>
  <div ref='vantaRef'>
    Foreground content here
  </div>
</template>
 
<script>
import * as THREE from 'three'
import BIRDS from 'vanta/src/vanta.birds'
export default {
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}
</script>