From 1795ae0f338e2aa57899d3bd72e7afa859fe2049 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期四, 18 六月 2026 10:28:21 +0800
Subject: [PATCH] 登录页面样式修改
---
src/views/login.vue | 348 ++++++++++-----------------------------------------------
1 files changed, 64 insertions(+), 284 deletions(-)
diff --git a/src/views/login.vue b/src/views/login.vue
index 07a6697..cc3d7a1 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,202 +1,6 @@
<template>
- <div class="login-page">
+ <div class="login-page" :style="{ backgroundImage: `url(${backgroundImage})` }">
<main class="page">
- <section class="factory">
- <div class="brand hero-brand">
- <div class="logo hero-logo">
- <img :src="brandLogoUrl"
- :alt="`${companyName} logo`"
- class="logo-image hero-logo-image"
- @error="handleLogoError" />
- </div>
- </div>
- <div class="hero">
- <div class="chip">鏁板瓧宸ュ巶 路 鏅鸿兘鎺掍骇 路 璁惧浜掕仈 路 璐ㄩ噺杩芥函</div>
- <h1>鏁板瓧宸ュ巶<br />MOM 鏅洪�犲钩鍙�</h1>
- <p>
- 浠ュ疄鏃舵暟鎹┍鍔ㄧ敓浜х幇鍦猴紝鎶婂伐鍗曘�佽澶囥�佺墿鏂欍�佽川閲忋�佽兘鑰椾笌浠撳偍杩炴帴鎴愪竴寮犻�忔槑鐨勫埗閫犺繍钀ョ綉缁溿��
- </p>
- </div>
- <div class="scene"
- aria-hidden="true">
- <div class="floor"></div>
- <svg class="factory-svg"
- viewBox="0 0 920 360"
- preserveAspectRatio="xMidYMid meet">
- <defs>
- <linearGradient id="g1"
- x1="0"
- y1="0"
- x2="1"
- y2="1">
- <stop offset="0"
- stop-color="#40e4ff"
- stop-opacity=".9" />
- <stop offset="1"
- stop-color="#1f78ff"
- stop-opacity=".68" />
- </linearGradient>
- <linearGradient id="g2"
- x1="0"
- y1="0"
- x2="1"
- y2="1">
- <stop offset="0"
- stop-color="#ffffff"
- stop-opacity=".28" />
- <stop offset="1"
- stop-color="#ffffff"
- stop-opacity=".06" />
- </linearGradient>
- </defs>
- <path d="M45 255H830"
- stroke="url(#g1)"
- stroke-width="16"
- stroke-linecap="round"
- opacity=".55" />
- <path class="belt"
- d="M45 255H830"
- stroke="#fff"
- stroke-width="3"
- stroke-linecap="round"
- opacity=".75" />
- <g class="box">
- <rect x="60"
- y="212"
- width="54"
- height="42"
- rx="8"
- fill="#ffb15f" />
- <path d="M60 225h54"
- stroke="#fff"
- opacity=".45" />
- </g>
- <g class="box two">
- <rect x="60"
- y="212"
- width="54"
- height="42"
- rx="8"
- fill="#28d9cd" />
- <path d="M60 225h54"
- stroke="#fff"
- opacity=".45" />
- </g>
- <g class="box three">
- <rect x="60"
- y="212"
- width="54"
- height="42"
- rx="8"
- fill="#8b5cf6" />
- <path d="M60 225h54"
- stroke="#fff"
- opacity=".45" />
- </g>
- <g>
- <rect x="120"
- y="112"
- width="138"
- height="128"
- rx="10"
- fill="url(#g2)"
- stroke="rgba(255,255,255,.42)" />
- <path d="M145 185h88M145 210h58"
- stroke="#40e4ff"
- stroke-width="6"
- stroke-linecap="round" />
- <path d="M145 140h88"
- stroke="#fff"
- stroke-opacity=".5"
- stroke-width="4"
- stroke-linecap="round" />
- </g>
- <g>
- <rect x="315"
- y="76"
- width="190"
- height="164"
- rx="12"
- fill="url(#g2)"
- stroke="rgba(255,255,255,.42)" />
- <path d="M350 126h120M350 158h90M350 190h112"
- stroke="#fff"
- stroke-opacity=".5"
- stroke-width="6"
- stroke-linecap="round" />
- <circle class="signal"
- cx="472"
- cy="104"
- r="10"
- fill="#20e0d2" />
- <circle class="signal two"
- cx="448"
- cy="104"
- r="10"
- fill="#1f78ff" />
- <circle class="signal three"
- cx="424"
- cy="104"
- r="10"
- fill="#ff8a3d" />
- </g>
- <g class="arm">
- <path d="M612 124h92"
- stroke="#40e4ff"
- stroke-width="14"
- stroke-linecap="round" />
- <path d="M704 124l42 56"
- stroke="#40e4ff"
- stroke-width="14"
- stroke-linecap="round" />
- <circle cx="612"
- cy="124"
- r="25"
- fill="#1f78ff"
- stroke="#fff"
- stroke-opacity=".45" />
- <circle cx="704"
- cy="124"
- r="18"
- fill="#20e0d2" />
- <path d="M744 180v34M727 214h34"
- stroke="#fff"
- stroke-width="7"
- stroke-linecap="round" />
- </g>
- <g>
- <rect x="690"
- y="82"
- width="148"
- height="158"
- rx="12"
- fill="url(#g2)"
- stroke="rgba(255,255,255,.42)" />
- <path d="M724 206V134M764 206V112M804 206V154"
- stroke="#20e0d2"
- stroke-width="12"
- stroke-linecap="round" />
- <path d="M720 206h92"
- stroke="#fff"
- stroke-opacity=".44"
- stroke-width="5"
- stroke-linecap="round" />
- </g>
- <path d="M190 112C265 42 348 48 410 76C502 118 568 76 612 124C654 170 700 74 764 82"
- fill="none"
- stroke="#20e0d2"
- stroke-width="2"
- stroke-dasharray="8 10"
- opacity=".58">
- <animate attributeName="stroke-dashoffset"
- from="80"
- to="0"
- dur="2s"
- repeatCount="indefinite" />
- </path>
- </svg>
- </div>
- </section>
<section class="login-wrap">
<div class="time">
<span>{{ todayLabel }}</span>
@@ -212,11 +16,8 @@
</div>
<div class="brand-copy card-brand-copy">
<div class="brand-title">{{ companyName }}</div>
- <small>鏁板瓧宸ュ巶缁熶竴鍏ュ彛</small>
</div>
</div>
- <h2>娆㈣繋鐧诲綍</h2>
- <p class="sub">杩涘叆 MOM 鏁板瓧宸ュ巶杩愯惀椹鹃┒鑸�</p>
<div class="form-row">
<label>璐﹀彿</label>
<div class="input">
@@ -276,6 +77,7 @@
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from "@/store/modules/user";
import defaultBrandLogo from "@/assets/logo/logo.png";
+ import backgroundImage from "@/layout/components/Sidebar/KHLView.png";
const userStore = useUserStore();
const route = useRoute();
@@ -472,20 +274,9 @@
position: relative;
min-height: 100vh;
overflow: hidden;
- background: radial-gradient(
- circle at 12% 14%,
- rgba(var(--accent-rgb), 0.14),
- transparent 38%
- ),
- radial-gradient(circle at 92% 8%, rgba(2, 132, 199, 0.12), transparent 36%),
- conic-gradient(
- from 220deg at 24% 18%,
- rgba(var(--accent-rgb), 0.1),
- rgba(56, 189, 248, 0.08),
- rgba(99, 102, 241, 0.08),
- rgba(var(--accent-rgb), 0.1)
- ),
- linear-gradient(180deg, #f7f8fb 0%, #f3f5fa 100%);
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
}
.login-page * {
@@ -565,65 +356,12 @@
.page {
position: relative;
z-index: 1;
- max-width: 1200px;
- margin: 48px auto;
- width: calc(100% - 48px);
- min-height: calc(100vh - 96px);
- display: grid;
- grid-template-columns: 3fr 2fr;
- gap: 0;
- align-items: stretch;
- border-radius: var(--content-radius);
- background: rgba(255, 255, 255, 0.72);
- border: 1px solid rgba(255, 255, 255, 0.72);
- box-shadow: var(--shadow);
- backdrop-filter: blur(18px);
- overflow: hidden;
- }
-
- .page::before {
- content: "";
- position: absolute;
- inset: 0;
- border-radius: inherit;
- background: radial-gradient(
- circle at 22% 22%,
- rgba(var(--accent-rgb), 0.34),
- transparent 58%
- )
- left center / 60% 100% no-repeat,
- radial-gradient(
- circle at 76% 12%,
- rgba(56, 189, 248, 0.22),
- transparent 50%
- )
- left center / 60% 100% no-repeat,
- linear-gradient(
- 135deg,
- rgba(2, 6, 23, 0.96) 0%,
- rgba(15, 35, 57, 0.94) 52%,
- rgba(15, 35, 57, 0.88) 100%
- )
- left center / 60% 100% no-repeat;
- pointer-events: none;
- z-index: 0;
- }
-
- .page::after {
- content: "";
- position: absolute;
- top: 0;
- bottom: 0;
- left: 60%;
- width: 1px;
- background: linear-gradient(
- 180deg,
- transparent,
- rgba(15, 23, 42, 0.16),
- transparent
- );
- pointer-events: none;
- z-index: 0;
+ width: 100%;
+ min-height: 100vh;
+ padding: 48px 72px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.factory {
@@ -727,7 +465,9 @@
display: flex;
align-items: center;
justify-content: center;
- padding: 36px 44px;
+ padding: 0;
+ width: 100%;
+ max-width: 100%;
}
.time {
@@ -752,7 +492,7 @@
}
.login-card {
- width: min(420px, 100%);
+ width: min(520px, 100%);
padding: 38px 34px 34px;
border-radius: var(--radius-lg);
border: 1px solid rgba(15, 23, 42, 0.12);
@@ -1051,9 +791,49 @@
}
:global(html.dark) .page {
- background: rgba(2, 6, 23, 0.46);
- border-color: rgba(226, 232, 240, 0.12);
- box-shadow: 0 38px 96px rgba(0, 0, 0, 0.5);
+ background: transparent;
+ border-color: transparent;
+ box-shadow: none;
+ }
+
+ :global(html.dark) .page::before {
+ background: linear-gradient(
+ 135deg,
+ rgba(var(--accent-rgb), 0.62) 0%,
+ rgba(var(--accent-rgb), 0.42) 52%,
+ rgba(56, 189, 248, 0.28) 100%
+ );
+ box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
+ }
+
+ :global(html.dark) .page::after {
+ background-image: radial-gradient(
+ circle at 16% 22%,
+ rgba(255, 255, 255, 0.16),
+ transparent 56%
+ ),
+ radial-gradient(
+ circle at 76% 16%,
+ rgba(255, 255, 255, 0.1),
+ transparent 52%
+ ),
+ radial-gradient(
+ circle at 78% 72%,
+ rgba(255, 255, 255, 0.12),
+ transparent 58%
+ ),
+ radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
+ repeating-linear-gradient(
+ 132deg,
+ rgba(255, 255, 255, 0.14) 0 1px,
+ transparent 1px 14px
+ ),
+ repeating-linear-gradient(
+ 42deg,
+ rgba(2, 6, 23, 0.26) 0 1px,
+ transparent 1px 18px
+ );
+ opacity: 0.5;
}
:global(html.dark) .page::after {
@@ -1138,12 +918,9 @@
}
.page {
- grid-template-columns: 1fr;
- gap: 18px;
- margin: 18px auto;
- width: calc(100% - 32px);
- min-height: auto;
- max-width: 560px;
+ padding: 18px 16px;
+ min-height: 100vh;
+ justify-content: center;
}
.page::before,
@@ -1157,6 +934,9 @@
.login-wrap {
padding: 0;
+ width: 100%;
+ max-width: 100%;
+ margin-left: 0;
}
.time {
--
Gitblit v1.9.3