hsq-pro/src/views/sys/login/LoginDataCenter.vue

<template>
  <div class="login-container">
    <!-- 标题 -->
    <h1 class="title">数据管理中心</h1>

    <!-- 登录框（切图外框） -->
    <div class="login-frame">
      <div class="flex center">
        <LoginForm />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import LoginForm from './LoginFormDataCenter.vue';
// 响应式数据
const username = ref('');
const password = ref('');

// 登录方法
const handleLogin = () => {
  if (!username.value) {
    alert('请输入用户名');
    return;
  }
  if (!password.value) {
    alert('请输入密码');
    return;
  }
  // 这里可对接接口，示例仅打印
  console.log('登录信息：', { username: username.value, password: password.value });
};

// 忘记密码
const handleForgotPwd = () => {
  alert('跳转到忘记密码页面');
};
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/vent/loginDataCenter/dataCenterBg.png') no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;
}

/* 标题样式 */
.title {
  position: absolute;
  top: 24vh;
  left: 20%;
  transform: translateX(-50%);
  color: #e2e8f0;
  font-size: 24px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 5px;
  margin: 0;
}

/* 登录框外框（切图） */
.login-frame {
  position: absolute;
  top: 55%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: 38%;
  height: 40%;
  background: url('@/assets/images/vent/loginDataCenter/loginForm.png') no-repeat center;
  background-size: 100% 100%;
}

/* 登录表单 */
.login-form {
  width: 80%;
  display: flex;
  flex-direction: column;
}

.input-item {
  width: 100%;
}

.input-item:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.input-item::placeholder {
  color: #94a3b8;
}

.forgot-pwd {
  text-align: right;
}

.forgot-pwd a {
  color: #94a3b8;
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.3s;
}

.forgot-pwd a:hover {
  color: #3b82f6;
}

.login-btn {
  width: 100%;
  padding: 0.8rem;
  background: #3b82f6;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

.login-btn:hover {
  background: #2563eb;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}
</style>