From 043a37b51d5da0c8762a6a28e649bc87d60bf0a7 Mon Sep 17 00:00:00 2001
From: hwh <332078369@qq.com>
Date: 星期四, 12 九月 2024 16:42:08 +0800
Subject: [PATCH] ·
---
Web/src/views/login/index.vue | 63 +++++++++++++++++++++++++------
1 files changed, 51 insertions(+), 12 deletions(-)
diff --git a/Web/src/views/login/index.vue b/Web/src/views/login/index.vue
index ae2a32e..9d09601 100644
--- a/Web/src/views/login/index.vue
+++ b/Web/src/views/login/index.vue
@@ -8,7 +8,7 @@
<span class="login-left-logo-text-msg">{{ getThemeConfig.globalViceTitleMsg }}</span>
</div>
</div>
- <el-carousel height="500px" class="login-carousel">
+ <!-- <el-carousel height="500px" class="login-carousel">
<el-carousel-item>
<img :src="loginIconTwo" class="login-icon-group-icon" />
</el-carousel-item>
@@ -18,7 +18,7 @@
<el-carousel-item>
<img :src="loginIconTwo2" class="login-icon-group-icon" />
</el-carousel-item>
- </el-carousel>
+ </el-carousel> -->
</div>
<div class="login-right flex">
<div class="login-right-warp flex-margin">
@@ -32,16 +32,16 @@
<el-tab-pane :label="$t('message.label.one1')" name="account">
<Account />
</el-tab-pane>
- <el-tab-pane :label="$t('message.label.two2')" name="mobile">
+ <!-- <el-tab-pane :label="$t('message.label.two2')" name="mobile">
<Mobile />
- </el-tab-pane>
+ </el-tab-pane> -->
</el-tabs>
</div>
<Scan v-if="state.isScan" />
- <div class="login-content-main-scan" @click="state.isScan = !state.isScan">
+ <!-- <div class="login-content-main-scan" @click="state.isScan = !state.isScan">
<i class="iconfont" :class="state.isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
<div class="login-content-main-scan-delta"></div>
- </div>
+ </div> -->
</div>
</div>
</div>
@@ -88,16 +88,21 @@
.login-container {
height: 100%;
background-color: rgba(53, 62, 84);
+
.login-left {
- width: 50%;
+ width: 20%;
+ position: fixed;
+ z-index: 100;
height: 100%;
- float: left;
+ // float: left;
justify-content: center;
+
.login-carousel {
position: relative;
top: 50%;
transform: translateY(-50%);
}
+
.login-left-logo {
display: flex;
align-items: center;
@@ -106,19 +111,23 @@
left: 30px;
z-index: 1;
animation: logoAnimation 0.3s ease;
+
img {
// width: 100px;
height: 64px;
}
+
.login-left-logo-text {
display: flex;
flex-direction: column;
+
span {
margin-left: 20px;
font-size: 28px;
font-weight: 700;
color: var(--el-color-white);
}
+
.login-left-logo-text-msg {
padding-top: 5px;
font-size: 14px;
@@ -126,6 +135,7 @@
}
}
}
+
.login-icon-group-icon {
width: 85%;
height: 85%;
@@ -135,15 +145,19 @@
transform: translateY(-50%) translate3d(0, 0, 0);
}
}
+
.login-right {
- width: 50%;
- float: right;
+ width: 60%;
+ // float: right;
+ margin-left: auto;
+ margin-right: auto;
background: var(--el-color-white);
background-image: url('../../assets/bg.svg');
background-size: 100% auto;
background-position: 50% calc(50% - 15px);
background-attachment: fixed;
background-repeat: no-repeat;
+
.login-right-warp {
border: 1px solid var(--el-color-primary-light-3);
border-radius: 3px;
@@ -151,12 +165,14 @@
position: relative;
overflow: hidden;
background-color: var(--el-color-white);
+
.login-right-warp-one,
.login-right-warp-two {
position: absolute;
display: block;
width: inherit;
height: inherit;
+
&::before,
&::after {
content: '';
@@ -164,6 +180,7 @@
z-index: 1;
}
}
+
.login-right-warp-one {
&::before {
filter: hue-rotate(0deg);
@@ -174,6 +191,7 @@
background: linear-gradient(90deg, transparent, var(--el-color-primary));
animation: loginLeft 3s linear infinite;
}
+
&::after {
filter: hue-rotate(0deg);
top: -100%;
@@ -185,6 +203,7 @@
animation-delay: 0.7s;
}
}
+
.login-right-warp-two {
&::before {
filter: hue-rotate(0deg);
@@ -196,6 +215,7 @@
animation: loginRight 3s linear infinite;
animation-delay: 1.4s;
}
+
&::after {
filter: hue-rotate(0deg);
bottom: -100%;
@@ -207,10 +227,12 @@
animation-delay: 2.1s;
}
}
+
.login-right-warp-main {
display: flex;
flex-direction: column;
height: 100%;
+
.login-right-warp-main-title {
height: 130px;
line-height: 130px;
@@ -222,9 +244,11 @@
animation-delay: 0.3s;
color: var(--el-color-primary);
}
+
.login-right-warp-main-form {
flex: 1;
padding: 0 50px 50px;
+
.login-content-main-scan {
position: absolute;
top: 0;
@@ -235,6 +259,7 @@
cursor: pointer;
transition: all ease 0.3s;
color: var(--el-color-primary);
+
&-delta {
position: absolute;
width: 35px;
@@ -245,11 +270,13 @@
background: var(--el-color-white);
transform: rotate(-45deg);
}
+
&:hover {
opacity: 1;
transition: all ease 0.3s;
color: var(--el-color-primary) !important;
}
+
i {
width: 47px;
height: 50px;
@@ -263,6 +290,7 @@
}
}
}
+
/* 鍦ㄨ繖閲屽彲浠ユ坊鍔犱竴涓吉鍏冪礌鏉ヨ鐩栧師鍐呭锛屽疄鐜扮（鐮傛晥鏋� */
.login-right-warp::before {
content: '';
@@ -272,17 +300,19 @@
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 1);
- filter: blur(4px); /* 璋冩暣妯＄硦鍗婂緞浠ユ敼鍙樼（鐮傛晥鏋滃己搴� */
+ filter: blur(4px);
+ /* 璋冩暣妯＄硦鍗婂緞浠ユ敼鍙樼（鐮傛晥鏋滃己搴� */
z-index: 1;
}
/* 淇濇寔鍘熸湁鍐呭鍙锛屾斁缃湪浼厓绱犱笅鏂� */
- .login-right-warp > * {
+ .login-right-warp>* {
position: relative;
z-index: 2;
}
}
}
+
.copyright,
.icp {
position: absolute;
@@ -290,39 +320,48 @@
transform: translateX(-50%);
white-space: nowrap;
}
+
@media screen and (min-width: 1200px) {
.login-right-warp {
width: 500px;
}
+
.copyright,
.icp {
left: 75%;
color: var(--el-text-color-secondary);
}
+
.icp {
.el-link {
color: var(--el-text-color-secondary);
}
}
}
+
@media screen and (max-width: 1200px) {
+
.copyright,
.icp {
left: 50%;
color: var(--el-color-white);
}
+
.icp {
.el-link {
color: var(--el-color-white);
}
}
}
+
@media screen and (max-width: 580px) {
+
.copyright,
.icp {
left: 50%;
color: var(--el-text-color-secondary);
}
+
.icp {
.el-link {
color: var(--el-text-color-secondary);
--
Gitblit v1.8.0