Browse Source

首页背景修改

skyline 4 tuần trước cách đây
mục cha
commit
63052a8dbf

+ 52 - 0
haha-admin-web/src/assets/login/bg.svg

@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#A8C8F0"/>
+      <stop offset="30%" stop-color="#C8DCF8"/>
+      <stop offset="100%" stop-color="#FFFFFF"/>
+    </linearGradient>
+    <linearGradient id="waveA" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#2B7CF5" stop-opacity="0.45"/>
+      <stop offset="100%" stop-color="#60A5FA" stop-opacity="0.15"/>
+    </linearGradient>
+    <linearGradient id="waveB" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#2563EB" stop-opacity="0.35"/>
+      <stop offset="100%" stop-color="#4A90D9" stop-opacity="0.10"/>
+    </linearGradient>
+    <linearGradient id="waveC" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#60A5FA" stop-opacity="0.30"/>
+      <stop offset="100%" stop-color="#60A5FA" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <rect width="1920" height="1080" fill="url(#bgGrad)"/>
+  <path fill="url(#waveA)" d="M0,0 L1920,0 L1920,360 C1600,480 1280,580 960,460 C640,340 320,460 0,560 Z"/>
+  <path fill="url(#waveB)" d="M0,480 C240,400 500,320 800,440 C1100,560 1500,480 1920,380 L1920,1080 L0,1080 Z"/>
+  <path fill="url(#waveC)" d="M1920,0 L800,0 C1050,120 1350,200 1920,280 Z"/>
+  <g fill="#3B82F0" opacity="0.07">
+    <circle cx="150" cy="200" r="4"/>
+    <circle cx="350" cy="90" r="2.5"/>
+    <circle cx="550" cy="160" r="3.5"/>
+    <circle cx="750" cy="80" r="2"/>
+    <circle cx="950" cy="220" r="3"/>
+    <circle cx="1150" cy="120" r="2.5"/>
+    <circle cx="1350" cy="180" r="4"/>
+    <circle cx="1550" cy="100" r="2"/>
+    <circle cx="1750" cy="240" r="3"/>
+    <circle cx="1850" cy="140" r="2.5"/>
+    <circle cx="250" cy="480" r="3"/>
+    <circle cx="500" cy="580" r="2"/>
+    <circle cx="750" cy="420" r="3.5"/>
+    <circle cx="1050" cy="550" r="2.5"/>
+    <circle cx="1350" cy="460" r="3"/>
+    <circle cx="1600" cy="600" r="2"/>
+    <circle cx="1850" cy="520" r="3"/>
+    <circle cx="200" cy="750" r="2.5"/>
+    <circle cx="450" cy="850" r="3"/>
+    <circle cx="700" cy="720" r="2"/>
+    <circle cx="950" cy="880" r="3.5"/>
+    <circle cx="1250" cy="760" r="2.5"/>
+    <circle cx="1500" cy="920" r="3"/>
+    <circle cx="1750" cy="800" r="2"/>
+    <circle cx="1850" cy="950" r="2.5"/>
+  </g>
+</svg>

+ 4 - 2
haha-admin-web/src/style/login.css

@@ -1,10 +1,12 @@
 .wave {
   position: fixed;
   height: 100%;
-  width: 80%;
+  width: 100%;
   left: 0;
-  bottom: 0;
+  top: 0;
   z-index: -1;
+  object-fit: cover;
+  object-position: center;
 }
 
 .login-container {

+ 1 - 1
haha-admin-web/src/views/login/utils/static.ts

@@ -1,4 +1,4 @@
-import bg from "@/assets/login/bg.png";
+import bg from "@/assets/login/bg.svg?url";
 import avatar from "@/assets/login/avatar.svg?component";
 import illustration from "@/assets/login/illustration.svg?component";