From 3ac57b34cc9adaedf7af1a6dfcb0b41ca5827ac3 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Thu, 6 Jan 2022 10:43:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=86=85=E7=BD=AE?=
 =?UTF-8?q?=E7=9A=84=E5=86=85=E5=AE=B9=E9=A1=B5=E8=83=8C=E6=99=AF=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E8=A7=A3=E5=86=B3=E6=96=B9=E6=A1=88,=E4=BB=A5?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9C=A8=E6=BB=9A=E5=8A=A8=E5=AE=B9=E5=99=A8?=
 =?UTF-8?q?=E4=B8=AD=E4=B8=8D=E5=A5=BD=E5=AE=9A=E4=BD=8D=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/hutao/theme.less                      | 22 ++-----------------
 web/src/routes/Main/Content/PageContent.tsx   | 22 +++++++++++++------
 web/src/styles/global.less                    |  8 +++++++
 3 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/web/plugins/com.msgbyte.theme.genshin/src/hutao/theme.less b/web/plugins/com.msgbyte.theme.genshin/src/hutao/theme.less
index b5e93752..d04c5656 100644
--- a/web/plugins/com.msgbyte.theme.genshin/src/hutao/theme.less
+++ b/web/plugins/com.msgbyte.theme.genshin/src/hutao/theme.less
@@ -3,6 +3,8 @@
 
   --tc-primary-color: @primary-color;
   --tc-background-image: url(./bg.jpg);
+  --tc-content-background-image: url(./avatar.png);
+  --tc-content-background-image-opacity: 0.15;
 
   .bg-navbar-light {
     background-color: @primary-color;
@@ -20,26 +22,6 @@
     background-color: lighten(@primary-color, 40%);
   }
 
-  [data-tc-role^=content-] {
-    position: relative;
-
-    &::before {
-      content: '';
-      position: absolute;
-      display: block;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      background-image: url(./avatar.png);
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position: right bottom;
-      opacity: 0.15;
-      pointer-events: none;
-    }
-  }
-
   &.dark {
     --tc-primary-color: darken(@primary-color, 10%);
 
diff --git a/web/src/routes/Main/Content/PageContent.tsx b/web/src/routes/Main/Content/PageContent.tsx
index 2aa98516..55226a0c 100644
--- a/web/src/routes/Main/Content/PageContent.tsx
+++ b/web/src/routes/Main/Content/PageContent.tsx
@@ -92,16 +92,24 @@ export const PageContent: React.FC<PageContentProps> = React.memo((props) => {
 
       <div
         className={clsx(
-          'flex flex-auto bg-content-light dark:bg-content-dark relative',
-          {
-            'overflow-auto': !showMask,
-            'overflow-hidden': showMask,
-          }
+          'flex flex-auto bg-content-light dark:bg-content-dark relative overflow-hidden'
         )}
         data-tc-role={props['data-tc-role']}
       >
-        {contentMaskEl}
-        {contentEl}
+        <div
+          className={clsx(
+            'flex flex-auto bg-content-light dark:bg-content-dark relative',
+            {
+              'overflow-auto': !showMask,
+              'overflow-hidden': showMask,
+            }
+          )}
+        >
+          {contentMaskEl}
+          {contentEl}
+        </div>
+
+        <div className="tc-content-background" />
       </div>
     </>
   );
diff --git a/web/src/styles/global.less b/web/src/styles/global.less
index bc80b2d7..9107dc8e 100644
--- a/web/src/styles/global.less
+++ b/web/src/styles/global.less
@@ -2,12 +2,20 @@
   @apply text-typography-light;
 
   --tc-background-image: url(../../assets/images/bg.jpg);
+  --tc-content-background-image: '';
+  --tc-content-background-image-opacity: 0.2;
 
   .tc-background {
     @apply bg-center bg-cover bg-no-repeat;
     background-image: var(--tc-background-image);
   }
 
+  .tc-content-background {
+    @apply absolute block inset-0 bg-contain bg-no-repeat bg-right-bottom pointer-events-none;
+    background-image: var(--tc-content-background-image);
+    opacity: var(--tc-content-background-image-opacity);
+  }
+
   /* 滚动条 */
   ::-webkit-scrollbar {
     width: 16px;