From d0f98ad8e1047e3161a458399ad3005404ed87b8 Mon Sep 17 00:00:00 2001
From: whychdw <496960745@qq.com>
Date: 星期五, 06 六月 2025 15:52:15 +0800
Subject: [PATCH] 标准参数管理
---
src/views/login/index.vue | 145 ++++++++++++++++++++++++++++++++++++------------
1 files changed, 108 insertions(+), 37 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 25d1150..bfa10ad 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,7 +1,7 @@
<template>
<div class="login-container">
<div class="site-title">
- <svg-icon icon-class="lock1"></svg-icon>{{ platformName }}
+ <div class="logo"><img :src="logUrl" alt=""></div>{{ platformName }}
</div>
<div class="img-hm"></div>
<div class="login-wrap">
@@ -61,8 +61,11 @@
</el-form-item>
</el-tooltip>
<el-form-item>
- <el-row :gutter="8">
- <el-col :span="14">
+ <el-row class="el_row" :gutter="0">
+ <span class="svg-container pos">
+ <svg-icon icon-class="dun" />
+ </span>
+ <el-col :span="16">
<el-input
class="input"
placeholder="楠岃瘉鐮�"
@@ -70,7 +73,7 @@
@keyup.enter="handleLogin"
></el-input>
</el-col>
- <el-col :span="10">
+ <el-col :span="8">
<v-sidentify
:identifyCode="verifyCode"
@click="changeVerifyCode"
@@ -81,7 +84,7 @@
<el-button
:loading="loading"
type="primary"
- style="width:100%; height:50px; margin-bottom:40px;"
+ style="width:100%; height:50px; background: #40CFF7; color: #070E28; font-size:20px; margin-bottom:40px;"
@click.prevent="handleLogin"
>鐧诲綍</el-button
>
@@ -106,6 +109,8 @@
import defaultSettings from '@/settings';
import VSidentify from './components/verifyComponent.vue';
+import gjdw from '@/assets/images/gjdw-log.png';
+
const platformName = defaultSettings.title;
const route = useRoute();
@@ -120,6 +125,8 @@
const verifyCode = ref('');
const verify = ref('');
+
+const logUrl = ref(gjdw);
const validateUsername = (_rule, value, callback) => {
@@ -296,11 +303,11 @@
/* 淇input 鑳屾櫙涓嶅崗璋� 鍜屽厜鏍囧彉鑹� */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-$bg: #283443;
-$light_gray: #fff;
+// $bg: #283443;
+// $light_gray: #fff;
$cursor: #999;
-$input_bg: rgba(0, 0, 0, 0.1);
-$input_color: #000;
+// $input_bg: rgba(0, 0, 0, 0.1);
+// $input_color: #000;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
.login-container .el-input input {
@@ -325,21 +332,21 @@
input {
padding: 12px 5px 12px 15px;
- color: $input_color;
+ color: #fff;
height: 47px;
caret-color: $cursor;
&:-webkit-autofill {
- box-shadow: 0 0 0px 1000px $input_bg inset !important;
- -webkit-text-fill-color: $input_color !important;
+ box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.1) inset !important;
+ -webkit-text-fill-color: #fff !important;
}
}
}
.el-form-item {
- border: 1px solid rgba(255, 255, 255, 0.1);
+ border: 1px solid #247CF7;
background: rgba(0, 0, 0, 0.1);
- border-radius: 5px;
+ // border-radius: 5px;
color: #454545;
}
}
@@ -351,45 +358,95 @@
$light_gray: #eee;
.login-container {
- min-height: 100%;
+ height: 100%;
width: 100%;
- background-image: url("@/assets/images/login-bg.jpg");
+ background: url("@/assets/images/bg-login1.png"),
+ url("@/assets/images/bg-login0.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
overflow: hidden;
+ // &::before {
+ // content: "";
+ // position: absolute;
+ // top: 0;
+ // left: 0;
+ // width: 100%;
+ // height: 100%;
+ // background: url("@/assets/images/bg-login1.png");
+ // }
.login-wrap {
- // display: none;
position: relative;
- width: 520px;
- max-width: 100%;
+ // width: 80vh;
+ width: 450px;
+ height: 47vh;
+ left: 50%;
+ top: 50%;
+ transform: translate(-51%, -58%);
+
+ // max-width: 100%;
// margin: 260px 10% 0 auto;
- margin: 260px auto 0;
- transform: translate(clamp(0px, calc(36vw - 50%), 50vw), 0);
+ // margin: 260px auto 0;
+ // transform: translate(clamp(0px, calc(36vw - 50%), 50vw), 0);
padding: 8px;
overflow: hidden;
// background-color: #1d4167;
- background: rgba(255, 255, 255, 0.2);
- border: 2px solid #0d3c68;
-
+ // background: rgba(255, .255, 255, 0.2);
+ // border: 2px solid #0d3c68;
+ display: flex;
+ justify-content: center;
+ align-items: center;
.login-form {
- background: #fff;
- padding: 36px 70px 36px;
- border: 2px solid #064ec3;
+ // display: none;
+ // background: #fff;
+ // width: 46vh;
+ width: 100%;
+ // padding: 36px 70px 36px;
+ // border: 2px solid #064ec3;
}
.input-item {
margin-bottom: 28px;
}
}
+ .el_row {
+ width: 100%;
+ }
.site-title {
- font-size: 30px;
+ font-size: 46px;
font-weight: 700;
- color: #07fcff;
+ color: #0ff;
position: absolute;
left: 0;
top: 12%;
- transform: translate(clamp(0px, calc(18vw - 50%), 50vw), -50%);
+ transform: translate(clamp(0px, calc(24vw - 50%), 50vw), -50%);
+ display: flex;
+ align-items: center;
+
+ .logo {
+ position: relative;
+ width: 5.5rem;
+ height: 2.5rem;
+ margin-right: 24px;
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ // mask-image: linear-gradient(#fff, #fff);
+ // mask-size: cover;
+ // mask-repeat: no-repeat;
+ }
+ &::after {
+ position: absolute;
+ content: '';
+ top: 50%;
+ right: -12px;
+ width: 2px;
+ height: 80%;
+ transform: translateY(-50%);
+ background: #0ff;
+ }
+ }
}
.tips {
@@ -416,21 +473,35 @@
.svg-container {
padding: 6px 5px 6px 15px;
- color: $dark_gray;
+ color: #fff;
vertical-align: middle;
width: 30px;
display: inline-block;
+ &.pos {
+ position: absolute;
+ left: 0;
+ top: 0;
+ font-size: 20px;
+ padding-left: 10px;
+ & + :deep(.el-col .el-input__wrapper) {
+ padding-left: 41px;
+ }
+ }
}
.title-container {
position: relative;
.title {
- font-size: 18px;
- color: #0296f3;
- margin: 0px auto 40px auto;
- // text-align: center;
- font-weight: bold;
+ font-size: 38px;
+ color: #fff;
+ // margin: 0px auto 40px auto;
+ margin-bottom: 30px;
+ margin-top: 0;
+ text-align: center;
+ letter-spacing: 0.2em;
+ // font-weight: bold;
+ font-weight: normal;
}
}
@@ -439,7 +510,7 @@
right: 10px;
top: 7px;
font-size: 16px;
- color: $dark_gray;
+ color: #fff;
cursor: pointer;
user-select: none;
}
--
Gitblit v1.9.1