fix login
This commit is contained in:
Ironsp
@@ -5,7 +5,7 @@ import { DemoQuery } from './types';
|
||||
* 设备告警分页列表
|
||||
* @param query id、deviceId、分页、时间范围等
|
||||
*/
|
||||
export const listDemo = (query?: DemoQuery) => {
|
||||
export const listDemo = (query?: any) => {
|
||||
return request({
|
||||
url: '/device/deviceAlarm/list',
|
||||
method: 'get',
|
||||
|
||||
@@ -13,7 +13,22 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="报警时间" prop="alarmTime">
|
||||
<el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="报警区域" prop="monitoringArea">
|
||||
<el-input v-model="queryParams.monitoringArea" placeholder="请输入监控区域" clearable @keyup.enter="handleQuery" />
|
||||
@@ -63,7 +78,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
|
||||
<template #default="scope">
|
||||
<el-button v-hasPermi="['demo:demo:edit']" type="primary" link @click="handleUpdate(scope.row)">处理</el-button>
|
||||
<el-button type="primary" @click="handleUpdate(scope.row)">处理</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -91,7 +106,7 @@
|
||||
<span v-else>{{ form.status ?? '-' }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="处理人">
|
||||
<el-input :model-value="form.userName ?? '-'" disabled />
|
||||
<el-input :model-value="form.userId ?? '-'" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="处理时间">
|
||||
<el-input :model-value="form.processingTime ?? '-'" disabled />
|
||||
@@ -160,7 +175,7 @@ const getList = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await listDemo(queryParams.value);
|
||||
demoList.value = res.rows;
|
||||
demoList.value = res.data.rows;
|
||||
total.value = res.total;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
|
||||
@@ -1,6 +1,15 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div>1111</div>
|
||||
<div class="login-cards">
|
||||
<div class="login-brand">
|
||||
<div class="login-brand__inner">
|
||||
<div class="login-brand__logo-wrap">
|
||||
<img class="login-brand__logo" :src="logoUrl" alt="" />
|
||||
</div>
|
||||
<h1 class="login-brand__title">可视化电子围栏管理系统</h1>
|
||||
<p class="login-brand__subtitle">智能安防 · 实时监控 · 高效管理</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<div class="title-box">
|
||||
<h3 class="title">欢迎登录</h3>
|
||||
@@ -45,10 +54,10 @@
|
||||
<img :src="codeUrl" class="login-code-img" @click="getCode" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">记住密码</el-checkbox>
|
||||
<el-form-item style="float: right">
|
||||
<el-button link type="primary" @click="doSocialLogin('github')"> 忘记密码 </el-button>
|
||||
</el-form-item>
|
||||
<div class="login-form__extras">
|
||||
<el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
|
||||
<el-button link type="primary" @click="doSocialLogin('github')">忘记密码</el-button>
|
||||
</div>
|
||||
<el-form-item style="width: 100%">
|
||||
<el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
|
||||
<span v-if="!loading">{{ proxy.$t('login.login') }}</span>
|
||||
@@ -60,6 +69,7 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -70,10 +80,10 @@ import { LoginData, TenantVO } from '@/api/types';
|
||||
import { to } from 'await-to-js';
|
||||
import { HttpStatus } from '@/enums/RespEnum';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import logoUrl from '@/assets/logo/logo.png';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const title = import.meta.env.VITE_APP_TITLE;
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
@@ -221,23 +231,126 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
background-image: url('../assets/images/logbg.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.login-cards {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.login-brand {
|
||||
flex: 0 0 auto;
|
||||
width: min(420px, 90vw);
|
||||
max-width: 420px;
|
||||
height: 450px;
|
||||
max-height: 450px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--app-radius-lg);
|
||||
background: linear-gradient(165deg, #2d60e3 0%, #1a4bb8 55%, #153d9a 100%);
|
||||
box-shadow: 0 24px 48px rgba(30, 64, 175, 0.35);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.login-brand__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 36px 28px;
|
||||
gap: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-brand__logo-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.login-brand__logo {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.login-brand__title {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
color: #fff;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.login-brand__subtitle {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.login-cards {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.login-brand {
|
||||
width: min(420px, 100%);
|
||||
max-width: 420px;
|
||||
height: 450px;
|
||||
max-height: 450px;
|
||||
border-radius: var(--app-radius-lg);
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.title-box {
|
||||
//display: flex;
|
||||
//align-items: center;
|
||||
flex-shrink: 0;
|
||||
gap: 8px;
|
||||
|
||||
.title {
|
||||
margin: 0px auto 26px auto;
|
||||
//text-align: center;
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: #111827;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin: 0 0 28px 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: #9ca3af;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
:deep(.lang-select--style) {
|
||||
@@ -247,15 +360,89 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: var(--app-radius-lg);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
min-height: 0;
|
||||
width: min(420px, 90vw);
|
||||
padding: 32px 30px 12px 30px;
|
||||
height: 450px;
|
||||
max-height: 450px;
|
||||
padding: 44px 48px 36px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #ebebeb;
|
||||
z-index: 1;
|
||||
box-shadow: var(--app-shadow-lg);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
box-shadow:
|
||||
0 12px 40px rgba(15, 23, 42, 0.08),
|
||||
0 2px 10px rgba(15, 23, 42, 0.04);
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
color: #1f2937;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item:last-child) {
|
||||
margin-bottom: 0;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 0 1px #e5e7eb inset;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper:hover) {
|
||||
box-shadow: 0 0 0 1px #d1d5db inset;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper.is-focus) {
|
||||
box-shadow:
|
||||
0 0 0 1px #2d60e3 inset,
|
||||
0 0 0 3px rgba(45, 96, 227, 0.12);
|
||||
}
|
||||
|
||||
:deep(.el-button--primary) {
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.login-form__extras {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
:deep(.login-form__extras .el-checkbox) {
|
||||
margin-right: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
:deep(.login-form__extras .el-checkbox__label) {
|
||||
color: #374151;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.login-form__extras .el-button.is-link) {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
font-size: 14px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
height: 40px;
|
||||
input {
|
||||
@@ -276,19 +463,6 @@ onMounted(() => {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.login-form :deep(.el-input__wrapper) {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.login-form :deep(.el-input__wrapper.is-focus) {
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
//.login-form :deep(.el-button--primary) {
|
||||
// border-radius: var(--app-radius-md);
|
||||
// box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
|
||||
//}
|
||||
|
||||
.login-form :deep(.el-button.is-circle) {
|
||||
background: rgba(15, 23, 42, 0.04);
|
||||
border: 1px solid rgba(15, 23, 42, 0.08);
|
||||
@@ -340,6 +514,11 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
:global(html.dark) {
|
||||
.login-brand {
|
||||
background: linear-gradient(165deg, #2563eb 0%, #1d4ed8 55%, #1e3a8a 100%);
|
||||
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.45);
|
||||
}
|
||||
|
||||
.login-form {
|
||||
background: rgba(17, 24, 39, 0.9);
|
||||
border-color: rgba(148, 163, 184, 0.2);
|
||||
|
||||
Reference in New Issue
Block a user