From 12a7587eb12e3d33809ef9c169dd76b20ac707c4 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期三, 13 十一月 2024 10:23:47 +0800
Subject: [PATCH] 修改
---
src/views/components/loginForm.vue | 288 +++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 196 insertions(+), 92 deletions(-)
diff --git a/src/views/components/loginForm.vue b/src/views/components/loginForm.vue
index e2e2f2a..e6d1833 100644
--- a/src/views/components/loginForm.vue
+++ b/src/views/components/loginForm.vue
@@ -1,72 +1,76 @@
<template>
- <div class="login-panel">
- <div class="login-img">
- <img :src="loginImgPng">
- </div>
- <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
- <h3 class="title">登录系统</h3>
- <el-form-item prop="username">
- <el-input
- v-model="loginForm.username"
- type="text"
- size="large"
- auto-complete="off"
- placeholder="账号"
- >
- <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
- </el-input>
- </el-form-item>
- <el-form-item prop="password">
- <el-input
- v-model="loginForm.password"
- type="password"
- size="large"
- auto-complete="off"
- placeholder="密码"
- @keyup.enter="handleLogin"
- show-password
- >
- <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
- </el-input>
- </el-form-item>
- <el-form-item prop="code" v-if="captchaEnabled">
- <el-input
- v-model="loginForm.code"
- size="large"
- auto-complete="off"
- placeholder="验证码"
- style="width: 63%"
- @keyup.enter="handleLogin"
- >
- <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
- </el-input>
- <div class="login-code">
- <img :src="codeUrl" @click="getCode" class="login-code-img"/>
- </div>
- </el-form-item>
- <el-radio-group v-model="loginForm.role" class="mb5">
- <el-radio :label="0" size="large">监管部门</el-radio>
- <el-radio :label="1" size="large">机构管理员</el-radio>
- </el-radio-group>
- <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px">
-<!-- <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>-->
- <el-button
- :loading="loading"
- size="large"
- type="primary"
- style="width:63%;"
- @click.prevent="handleLogin"
- >
- <span v-if="!loading">登 录</span>
- <span v-else>登 录 中...</span>
- </el-button>
- <div v-if="isRegister">
- <el-button link type="primary" @click="openRegist">立即注册</el-button>
+ <el-row class="login-panel">
+ <el-col :sm="24" :md="12" class="login-img">
+ 新疆维吾尔自治区应急管理厅<br/>专家管理系统
+ </el-col>
+ <el-col :sm="24" :md="12" class="login-box">
+ <div class="login-card">
+ <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+ <h3 class="title">登录系统</h3>
+ <el-form-item prop="username">
+ <el-input
+ v-model="loginForm.username"
+ type="text"
+ size="large"
+ auto-complete="off"
+ placeholder="账号"
+ >
+ <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+ </el-input>
+ </el-form-item>
+ <el-form-item prop="password">
+ <el-input
+ v-model="loginForm.password"
+ type="password"
+ size="large"
+ auto-complete="off"
+ placeholder="密码"
+ @keyup.enter="handleLogin"
+ show-password
+ >
+ <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+ </el-input>
+ </el-form-item>
+ <el-form-item prop="code" v-if="captchaEnabled">
+ <el-input
+ v-model="loginForm.code"
+ size="large"
+ auto-complete="off"
+ placeholder="验证码"
+ style="width: 63%"
+ @keyup.enter="handleLogin"
+ >
+ <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+ </el-input>
+ <div class="login-code">
+ <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+ </div>
+ </el-form-item>
+ <!-- <el-radio-group v-model="loginForm.role" class="mb5">-->
+ <!-- <el-radio :label="0" size="large">监管部门</el-radio>-->
+ <!-- <el-radio :label="1" size="large">机构管理员</el-radio>-->
+ <!-- </el-radio-group>-->
+ <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px">
+ <div class="btn-cont">
+ <button class="login-btn" @click.prevent="handleLogin">
+ <span v-if="!loading">登 录</span>
+ <span v-else>登 录 中...</span>
+ </button>
+ </div>
+ <!-- <div v-if="isRegister">-->
+ <!-- <el-button link type="primary" @click="openRegist">立即注册</el-button>-->
+ <!-- </div>-->
+ </div>
+ </el-form>
+ <div class="other-btns">
+ <el-button link type="primary" style="color: #fff" @click="openApply()">专家申请</el-button>
+ <el-button link type="primary" style="color: #fff" @click="openCheck">专家评定进度查询</el-button>
</div>
</div>
- </el-form>
- </div>
- <register ref="regRef"/>
+ </el-col>
+ </el-row>
+ <expert-form ref="expertFormRef"></expert-form>
+<!-- <register ref="regRef"/>-->
</template>
<script setup>
@@ -78,7 +82,7 @@
import { Register } from "@/layout/components";
import { Base64 } from 'js-base64'
import menu from "@/layout/components/Sidebar/menu";
-import loginImgPng from "@/assets/images/loginImg.png"
+import ExpertForm from "../safetyReview/expertManage/applyRecords/components/expertForm";
const userStore = useUserStore()
const route = useRoute();
@@ -113,7 +117,7 @@
})
const openRegist = ()=>{
- regRef.value.openDialog('add', {});
+ regRef.value.openApply();
}
watch(route, (newRoute) => {
@@ -122,6 +126,27 @@
const sidebarRouters = ref([])
+
+
+
+const expertFormRef = ref()
+const openApply = () => {
+ // expertFormRef.value.openApply(type, value)
+ const routePath = '/fillForm';
+ const resolvedRoute = router.resolve(routePath);
+ const fullPath = resolvedRoute.href
+ window.open(fullPath, '_blank');
+}
+
+
+const openCheck = () => {
+ // expertFormRef.value.openApply(type, value)
+ const routePath = '/checkProgress';
+ const resolvedRoute = router.resolve(routePath);
+ const fullPath = resolvedRoute.href
+ window.open(fullPath, '_blank');
+}
+
function handleLogin() {
proxy.$refs.loginRef.validate(valid => {
if (valid) {
@@ -218,42 +243,83 @@
</script>
<style lang='scss' scoped>
+@font-face {
+ font-family: "AliMa";
+ src: url("@/assets/styles/font/AlimamaShuHeiTi-Bold.ttf");
+ font-style: normal;
+ font-weight: normal;
+}
.login-panel{
width: 100%;
height: 100%;
- display: flex;
+ background: url("@/assets/images/loginBg.jpg") no-repeat center;
+ background-size: cover;
justify-content: center;
align-items: center;
+
}
.login-img{
- flex: 1;
display: flex;
justify-content: center;
align-items: center;
- img{
- width: 100%;
- }
+ font-family: 'AliMa';
+ color: #fff;
+ font-size: 3.2rem;
+ text-align: center;
+ line-height: 1.5;
+ transform: translateY(-80px);
+ text-shadow: -10px 10px 20px rgba(0,0,0,.4);
}
-.login-form {
- flex: 2;
- padding: 10px;
-
- .title{
- margin: 20px 0;
+.login-box{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transform: translateY(-40px);
+ .login-card{
+ width: 500px;
+ padding: 30px;
+ border-radius: 16px;
+ background-color: rgba(255,255,255,.2);
+ backdrop-filter: blur(5px);
+ -webkit-backdrop-filter: blur(5px);
+ border: 1px solid rgba(255,255,255,.4);
+ max-width: 100%;
+ box-sizing: border-box;
+ box-shadow: 0 10px 20px rgba(0,0,0,.05);
}
+ .login-form {
+ width: 100%;
+ box-sizing: border-box;
- .el-input {
- height: 40px;
- input {
- height: 40px;
+ .title{
+ margin: 0 0 30px;
+ text-align: center;
+ color: #fff
+ }
+
+ .el-form-item{
+ margin-bottom: 30px;
+ }
+
+ .el-input {
+ height: 48px;
+ input {
+ height: 48px;
+ }
+ }
+ .input-icon {
+ height: 39px;
+ width: 14px;
+ margin-left: 0px;
}
}
- .input-icon {
- height: 39px;
- width: 14px;
- margin-left: 0px;
+ .other-btns{
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
}
}
+
.login-tip {
font-size: 13px;
text-align: center;
@@ -261,11 +327,12 @@
}
.login-code {
width: 33%;
- height: 40px;
+ height: 48px;
float: right;
- img {
+ .login-code-img {
display: inline-block;
width: 100%;
+ padding-left: 12px;
cursor: pointer;
vertical-align: middle;
}
@@ -279,8 +346,45 @@
display: flex;
justify-content: space-between;
}
-.login-code-img {
- height: 40px;
- padding-left: 12px;
+
+.login-btn {
+ width: 100%;
+ font-size: 1.2em;
+ padding: 0.6em 0.8em;
+ border-radius: 0.5em;
+ border: none;
+ background-color: #2563EB;
+ color: #fff;
+ cursor: pointer;
+ box-shadow: 2px 2px 3px #000000b4;
}
+
+.btn-cont {
+ width: 100%;
+ position: relative;
+ padding: 3px;
+ background: #03a9f4;
+ border-radius: 0.9em;
+ transition: all 0.3s ease;
+}
+
+.btn-cont::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ margin: auto;
+ border-radius: 0.9em;
+ z-index: -10;
+ filter: blur(0);
+ transition: filter 0.4s ease;
+}
+
+.btn-cont:hover::before {
+ background: #2559c9;
+ filter: blur(0.6em);
+}
+.btn-cont:active::before {
+ filter: blur(0.1em);
+}
+
</style>
--
Gitblit v1.9.2