feat: 增加内置的内容页背景图片解决方案,以修复在滚动容器中不好定位的问题

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%);
 

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',
+          'flex flex-auto bg-content-light dark:bg-content-dark relative overflow-hidden'
-          {
-            'overflow-auto': !showMask,
-            'overflow-hidden': showMask,
-          }
         )}
         data-tc-role={props['data-tc-role']}
       >
-        {contentMaskEl}
+        <div
-        {contentEl}
+          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>
     </>
   );

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;