vue 简约 大气登录页“附源码”

1. 效果图

2. 环境

        ElementPlus

        Vue3

        Less

3. 源码

附上代码：

Login.vue

<template>
  <div style="height: 100%;">
    <div ref="login" class="login">
      <div class="sanjiao">
      </div>
      <div class="mouse">
        <el-icon>
          <Mouse />
        </el-icon>
      </div>
      <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%;">
          <img src="@/assets/images/eg1.jpg" style="width: 100%; height: 300px; margin: 0 auto;">
        </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 { User, Lock, Mouse, StarFilled } from '@element-plus/icons-vue'
const router = useRouter();
let activeTab = ref('login');
const registerFormRef = ref(null);
const loginFormRef = ref(null);

const loginForm = reactive({});
const registerForm = reactive({
  userRole: 'user'
});

</script>

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

  .sanjiao {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-bottom: 48px solid rgb(239, 225, 241);
    z-index: 10;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -100%);

  }

  .mouse {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 100%;
    font-size: 28px;
    transform: translate(-50%, -100%);
    color: #1c3b67;
    animation: myfirst 3s linear;
    animation-iteration-count: infinite;
  }

  @keyframes myfirst {
    from {
      margin-top: 0;
    }

    to {
      margin-top: 8px;
    }
  }

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

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

    .left {
      position: relative;
      width: 50%;
      background-color: #f4f6fa;

      .texts {
        box-shadow: 0 0 28px 15px rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 20%;
        width: 70%;
        height: 60%;
        border-top-left-radius: 5%;
        border-bottom-left-radius: 5%;
        right: 0;
        color: #646363;
        user-select: none;
        font-family: "FZShuTi";
        // font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";

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

          h1 {
            font-size: 25px;
          }

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

    .right {
      width: 50%;
      position: relative;
      height: 100%;
      background-color: #1c3b67;

      .el-card {
        width: 70%;
        background-color: #21436e;
        border: 0;
        width: 70%;
        box-shadow: 15px 15px 18px 10px rgba(0, 0, 0, 0.2), 15px -15px 18px 10px rgba(0, 0, 0, 0.2);
        border-top-right-radius: 5%;
        border-bottom-right-radius: 5%;
        position: absolute;
        left: 0;
        top: 20%;
        height: 60%;

        .el-tabs {
          width: 80%;
          margin: 0 auto;
          margin-top: 20%;

          /deep/.el-tabs__item {
            color: #fff;
          }

          .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: 5%;
            }

            .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: 20px;
      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: 28px;
    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>