背景优化

Author: clansty

apps/web/src/components/Bg.tsx

@@ -0,0 +1,12 @@
+import { component$ } from "@builder.io/qwik";
+import _ from "lodash";
+
+export default component$(()=>{
+	return <div class="absolute bottom-0 left-0 right-0 w-full h-max z--1 of-hidden">
+		<img src="https://web-assets.c5y.moe/B50/bg.png" class="h-max w-full" />
+		<img src="https://web-assets.c5y.moe/B50/fish.png" class="absolute bottom-0 left-0 right-0 w-full h-max" style={{
+			transform: `translateY(${_.random(-75, 50)}px) translateX(${_.random(-150, 50)}px) rotate(${_.random(-5, 5)}deg)`,
+		}} />
+		<img src="https://web-assets.c5y.moe/B50/overlay.png" class="absolute bottom-0 left-0 right-0 w-full h-max" />
+	</div>
+})

apps/web/src/global.css

@@ -6,7 +6,7 @@ a {
 body {
   padding: 0;
   margin: 0;
-  background: url('https://web-assets.c5y.moe/B50.png') no-repeat bottom center;
+  background: url('https://web-assets.c5y.moe/B502.png') no-repeat bottom center;
   background-size: 100% auto;
   font-family: Quicksand, "Noto Sans SC";
   position: relative;

apps/web/src/routes/layout.tsx

@@ -1,10 +1,16 @@
 import { component$, Slot } from '@builder.io/qwik';
 import Footer from '~/components/Footer';
 import 'virtual:uno.css';
+import { useLocation, useNavigate } from '@builder.io/qwik-city';
+import Bg from '~/components/Bg';
 
 export default component$(() => {
+	const location = useLocation();
+	const isB50 = location.url.pathname.startsWith('/b50');
+
 	return (
 		<>
+			{isB50 && <Bg />}
 			<div style={{ minHeight: 'calc(100vh - 154px)' }}>
 				<Slot />
 			</div>

packages/utils/src/getAssetUrl.ts

@@ -34,5 +34,5 @@ export const getAssetUrl = (type: ASSET_TYPE, id: number | string) => {
 	if (type === ASSET_TYPE.JacketPng) ext = 'png';
 	if (type === ASSET_TYPE.ChuniJacketPng) ext = 'png';
 
-	return `https://maimai-assets.pages.dev/${type}/${id}.${ext}`;
+	return `https://web-assets.c5y.moe/mai-assets/${type}/${id}.${ext}`;
 };