如何设计一个具有高度科技感的UniApp登录页面代码

设计一个高度科技感的 UniApp 登录页面，可以采用现代、简洁的设计风格，并结合一些动态效果和交互。下面是一个简单的示例，展示如何用 Vue.js 和 Element Plus UI 来构建这样一个登录页面：

<template>
  <div class="login-page">
    <el-card shadow="hover" class="login-card">
      <div class="login-header">
        <img src="logo.png" alt="Logo" class="logo"> <!-- 公司 logo -->
        <h2>未来科技登录</h2>
      </div>
      <form @submit.prevent="handleSubmit">
        <el-input v-model.trim="username" placeholder="请输入用户名" size="medium"></el-input>
        <el-input-password v-model.trim="password" placeholder="请输入密码" size="medium"></el-input-password>
        <el-button type="primary" loading="loading" long>登录</el-button>
        <div class="remember-me">
          <input type="checkbox" :checked="rememberMe">
          <span>记住我</span>
        </div>
        <el-form-item class="forget-password">
          <a href="#">忘记密码?</a>
        </el-form-item>
      </form>
    </el-card>
    <div class="animation-bg">
      <!-- 可能包含动态背景，如渐变色或粒子动画 -->
      <div class="particles"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      rememberMe: false,
      loading: false,
    };
  },
  methods: {
    handleSubmit(event) {
      event.preventDefault();
      this.loading = true; // 加载状态显示
      // 这里假设有一个 API 调用
      login(this.username, this.password)
        .then(() => {
          this.$router.push('/dashboard'); // 登录成功后跳转到主页
          this.loading = false;
        })
        .catch(error => {
          console.error('登录失败:', error);
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped>
.login-page {
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-card {
  width: 350px;
  margin-top: 50px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.animation-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, #00bfa5, #0090d1);
  z-index: -1;
}

.particles {
  /* 颗粒动画样式 */
}
</style>