feat: 会议室查看
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
<!-- <script setup lang="ts">
|
||||
import type { ToolbarType } from './types';
|
||||
|
||||
import { preferences, usePreferences } from '@vben/preferences';
|
||||
@@ -34,12 +34,122 @@ withDefaults(defineProps<Props>(), {
|
||||
|
||||
const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
|
||||
usePreferences();
|
||||
</script> -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '../../../../../apps/web-antd/src/store'
|
||||
import { Checkbox } from 'ant-design-vue';
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// 响应式数据
|
||||
const username = ref('admin')
|
||||
const password = ref('admin123')
|
||||
const rememberMe = ref(false)
|
||||
|
||||
// 页面加载时恢复用户名
|
||||
onMounted(() => {
|
||||
const savedUser = localStorage.getItem('rememberedUser')
|
||||
if (savedUser) {
|
||||
username.value = savedUser
|
||||
rememberMe.value = true
|
||||
}
|
||||
})
|
||||
|
||||
// 登录逻辑
|
||||
const login = () => {
|
||||
// 验证输入
|
||||
if (!username.value.trim()) {
|
||||
alert('请输入用户名')
|
||||
return
|
||||
}
|
||||
|
||||
if (!password.value.trim()) {
|
||||
alert('请输入密码')
|
||||
return
|
||||
}
|
||||
|
||||
// 模拟登录请求
|
||||
console.log('正在登录...', { username: username.value, password: password.value })
|
||||
|
||||
setTimeout(() => {
|
||||
alert('登录成功！')
|
||||
|
||||
// 存储用户名
|
||||
if (rememberMe.value) {
|
||||
localStorage.setItem('rememberedUser', username.value)
|
||||
} else {
|
||||
localStorage.removeItem('rememberedUser')
|
||||
}
|
||||
|
||||
// 跳转页面
|
||||
router.push('/navigation')
|
||||
}, 800)
|
||||
}
|
||||
const handleAccountLogin = async () => {
|
||||
try {
|
||||
// const requestParam: any = omit(values, ['code']);
|
||||
// 登录
|
||||
await authStore.authLogin({
|
||||
grantType: "password",
|
||||
password: password.value,
|
||||
tenantId: "000000",
|
||||
username: username.value,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-bg">
|
||||
<div class="login-wapter">
|
||||
<div class="login-wapter1">欢迎登录</div>
|
||||
<div class="login-wapter2">南川区综合服务中心数智平台</div>
|
||||
</div>
|
||||
<div class="login-bg_1">
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
|
||||
<div class="login-form">
|
||||
<h3>用户登录</h3>
|
||||
<!-- 用户名输入 -->
|
||||
<div class="input-group">
|
||||
<img src="../../../../../apps/web-antd/src/assets/my.png" alt="User Icon" class="input-icon">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="请输入您的用户名"
|
||||
v-model="username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 密码输入 -->
|
||||
<div class="input-group">
|
||||
<img src="../../../../../apps/web-antd/src/assets/mima.png" alt="Password Icon" class="input-icon">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="请输入您的密码"
|
||||
v-model="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 记住密码 -->
|
||||
<!-- <div class="remember-me">
|
||||
<Checkbox v-model:checked="rememberMe">记住密码</Checkbox>
|
||||
</div> -->
|
||||
<!-- 登录按钮 -->
|
||||
<button @click="handleAccountLogin">点 击 登 录</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:class="[isDark ? 'dark' : '']"
|
||||
class="flex min-h-full flex-1 select-none overflow-x-hidden"
|
||||
style="display: none;"
|
||||
>
|
||||
<template v-if="toolbar">
|
||||
<slot name="toolbar">
|
||||
@@ -137,7 +247,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<!-- <style scoped>
|
||||
.login-background {
|
||||
background: linear-gradient(
|
||||
154deg,
|
||||
@@ -159,4 +269,148 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
|
||||
filter: blur(100px);
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
<style scoped>
|
||||
.login-bg {
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background:
|
||||
url('../../../../../apps/web-antd/src/assets/juxing.png') no-repeat center center fixed,
|
||||
url('../../../../../apps/web-antd/src/assets/222.gif');
|
||||
background-size: cover, cover;
|
||||
color: #fff;
|
||||
}
|
||||
.login-bg_1 {
|
||||
flex: 1 1 auto;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background: url('../../../../../apps/web-antd/src/assets/from.png') no-repeat center center fixed;
|
||||
}
|
||||
.login-wapter{
|
||||
.login-wapter1 {
|
||||
font-size: 36px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-wapter2 {
|
||||
font-size: 50px;
|
||||
margin-bottom: 38px;
|
||||
color: #ccc;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.login-form {
|
||||
border-radius: 10px;
|
||||
padding: 45px;
|
||||
width: 397px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login-form h3 {
|
||||
font-size: 26px;
|
||||
margin-bottom: 40px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login-form input {
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #fff; /* 设置边框线为白色 */
|
||||
border-radius: 2px;
|
||||
width: 364px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
-webkit-text-fill-color: #fff;
|
||||
}
|
||||
input:-webkit-autofill {
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
.login-form label {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
margin-top: 5px;
|
||||
margin-left: 7px;
|
||||
font-size: 16px;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.login-form button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #19DCF8;
|
||||
color: #0254A5;
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
margin-top: 70px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.login-form button:hover {
|
||||
background-color: #00aaff;
|
||||
}
|
||||
|
||||
.remember-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 25px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 新增 .input-group 样式 */
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
padding: 0px 10px 10px 10px;
|
||||
pointer-events: none; /* 确保用户不能点击图标 */
|
||||
position: absolute;
|
||||
/* top: 17px; */
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.login-form input {
|
||||
height: 40px;
|
||||
line-height: 40px; /* 必须与 height 一致 */
|
||||
padding-left: 33px;
|
||||
border: 0.1px solid rgba(255, 255, 255, 0.44);
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
.login-form input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.42); /* 例如灰色 */
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user