Merge pull request tangly1024#2255 from tangly1024/feat/decoration-of…

…-theme-game theme-game 主题样式；背景微调
zhynin · Apr 2, 2024 · 2e405a8 · 2e405a8
2 parents 61a64b3 + e8aa2a2
commit 2e405a8
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 35 deletions.
diff --git a/themes/game/components/Footer.js b/themes/game/components/Footer.js
@@ -9,8 +9,8 @@ export const Footer = props => {
 
   return (
     <footer
-      className={`z-10 relative mt-6 flex-shrink-0 m-auto w-full dark:text-gray-200 `}>
-      <hr className='my-2 border-black dark:border-gray-100' />
+      className={`z-10  bg-white p-2 rounded-lg relative mt-6 flex-shrink-0 m-auto w-full dark:text-gray-200 `}>
+      {/* <hr className='my-2 border-black dark:border-gray-100' /> */}
       {/* 页面底部 */}
       <div className='w-full flex justify-between p-4 '>
         <p>

diff --git a/themes/game/components/GameListRecent.js b/themes/game/components/GameListRecent.js
@@ -33,7 +33,7 @@ export const GameListRecent = ({ maxCount = 14 }) => {
   return (
     <>
       <div className='game-list-recent-wrapper w-full max-w-full overflow-x-auto pt-4 px-2'>
-        <div className='game-grid md:flex grid grid-flow-col gap-2'>
+        <div className='game-grid flex gap-2'>
           {components?.map((ItemComponent, index) => {
             return ItemComponent
           })}

diff --git a/themes/game/components/GroupCategory.js b/themes/game/components/GroupCategory.js
@@ -6,11 +6,13 @@ function GroupCategory({ currentCategory, categoryOptions }) {
   }
 
   return (
-    <>
+    <div className='flex items-center'>
       <Link className='mx-2' href='/category'>
         <i className='fas fa-bars' />
       </Link>
-      <div id='category-list' className='dark:border-gray-600 flex flex-wrap py-1'>
+      <div
+        id='category-list'
+        className='dark:border-gray-600 flex flex-wrap py-1'>
         {categoryOptions.map(category => {
           const selected = currentCategory === category.name
           return (
@@ -34,7 +36,7 @@ function GroupCategory({ currentCategory, categoryOptions }) {
           )
         })}
       </div>
-    </>
+    </div>
   )
 }
 

diff --git a/themes/game/components/GroupTag.js b/themes/game/components/GroupTag.js
@@ -11,7 +11,7 @@ import TagItemMini from './TagItemMini'
 function GroupTag({ tagOptions, currentTag }) {
   if (!tagOptions) return <></>
   return (
-    <>
+    <div className='flex items-center'>
       <Link href='/tag'>
         <i className='fas fa-tags p-2' />
       </Link>
@@ -21,7 +21,7 @@ function GroupTag({ tagOptions, currentTag }) {
           return <TagItemMini key={tag.name} tag={tag} selected={selected} />
         })}
       </div>
-    </>
+    </div>
   )
 }
 

diff --git a/themes/game/components/PostInfo.js b/themes/game/components/PostInfo.js
@@ -9,7 +9,7 @@ export default function PostInfo(props) {
   const { post } = props
 
   return (
-    <section className='flex-wrap flex mt-2 text-gray--600 dark:text-gray-400 font-light leading-8'>
+    <section className='flex-wrap flex m-2 text-gray--600 dark:text-gray-400 font-light leading-8'>
       <div>
         <div>
           {post?.type !== 'Page' && (

diff --git a/themes/game/index.js b/themes/game/index.js
@@ -87,7 +87,7 @@ const LayoutBase = props => {
       }}>
       <div
         id='theme-game'
-        className={`${siteConfig('FONT_STYLE')} w-full h-full min-h-screen justify-center bg-[#83FFE7] dark:bg-black dark:text-gray-300 scroll-smooth`}>
+        className={`${siteConfig('FONT_STYLE')} w-full h-full min-h-screen justify-center dark:bg-black dark:bg-opacity-50 dark:text-gray-300 scroll-smooth`}>
         <Style />
 
         {/* 左右布局 */}
@@ -150,7 +150,12 @@ const LayoutIndex = props => {
       {/* 游戏列表 */}
       <LayoutPostList {...props} />
 
-      {/* 主区域下方 */}
+      {/* 广告 */}
+      <div className='w-full'>
+        <AdSlot type='in-article' />
+      </div>
+
+      {/* 主区域下方 导览 */}
       <div className='w-full bg-white dark:bg-hexo-black-gray rounded-lg p-2'>
         {/* 标签汇总             */}
         <GroupCategory
@@ -159,16 +164,8 @@ const LayoutIndex = props => {
         />
         <hr />
         <GroupTag tagOptions={tagOptions} currentTag={currentTag} />
-      </div>
-
-      {/* 广告 */}
-      <div className='w-full'>
-        <AdSlot type='in-article' />
-      </div>
-
-      {/* 站点公告信息 */}
-      <div className='w-full bg-white dark:bg-hexo-black-gray rounded-lg p-2'>
-        <Announcement {...props} />
+        {/* 站点公告信息 */}
+        <Announcement {...props} className='p-2' />
       </div>
     </>
   )
@@ -282,7 +279,7 @@ const LayoutSlug = props => {
     props
   const game = deepClone(post)
   const [loading, setLoading] = useState(true)
-  //   const [url, setUrl] = useState(game?.ext?.href)
+  const url = game?.ext?.href
   const relateGames = recommendPosts
   const randomGames = shuffleArray(deepClone(allNavPages))
 
@@ -369,9 +366,10 @@ const LayoutSlug = props => {
               </div>
             </Draggable>
 
-            <div className='w-full py-1 md:py-4'>
+            <div className={`w-full py-1 md:py-4 `}>
               {/* 游戏区  */}
-              <div className='bg-black w-full xl:h-[calc(100vh-8rem)] h-screen rounded-md relative'>
+              <div
+                className={`${url ? '' : 'hidden'} bg-black w-full xl:h-[calc(100vh-8rem)] h-screen rounded-md relative`}>
                 {/* Loading遮罩 */}
                 {loading && (
                   <div className='absolute z-20 w-full xl:h-[calc(100vh-8rem)] h-screen rounded-md overflow-hidden '>
@@ -397,11 +395,9 @@ const LayoutSlug = props => {
 
                 <iframe
                   id='game-wrapper'
-                  className={`w-full xl:h-[calc(100vh-8rem)] h-screen md:rounded-md overflow-hidden ${game?.ext?.href ? '' : 'hidden'}`}
-                  style={{
-                    position: 'relative'
-                  }}
-                  src={game?.ext?.href}></iframe>
+                  src={url}
+                  className={`relative w-full xl:h-[calc(100vh-8rem)] h-screen md:rounded-md overflow-hidden`}
+                />
 
                 {/* 游戏窗口装饰器 */}
                 {game && !loading && (

diff --git a/themes/game/style.js b/themes/game/style.js
@@ -5,14 +5,21 @@
  * @returns
  */
 const Style = () => {
-  return <style jsx global>{`
-    
-    // 底色
-    .dark body{
+  return (
+    <style jsx global>{`
+      // 底色
+      .dark body {
         background-color: black;
-    }
+      }
 
-  `}</style>
+      body {
+        background-color: #ffffff;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='400' cy='400' r='50%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%230EF'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='400' cy='400' r='70%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%230FF'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='800'/%3E%3Cg fill-opacity='.8'%3E%3Cpath fill='url(%23b)' d='M998.7 439.2c1.7-26.5 1.7-52.7 0.1-78.5L401 399.9c0 0 0-0.1 0-0.1l587.6-116.9c-5.1-25.9-11.9-51.2-20.3-75.8L400.9 399.7c0 0 0-0.1 0-0.1l537.3-265c-11.6-23.5-24.8-46.2-39.3-67.9L400.8 399.5c0 0 0-0.1-0.1-0.1l450.4-395c-17.3-19.7-35.8-38.2-55.5-55.5l-395 450.4c0 0-0.1 0-0.1-0.1L733.4-99c-21.7-14.5-44.4-27.6-68-39.3l-265 537.4c0 0-0.1 0-0.1 0l192.6-567.4c-24.6-8.3-49.9-15.1-75.8-20.2L400.2 399c0 0-0.1 0-0.1 0l39.2-597.7c-26.5-1.7-52.7-1.7-78.5-0.1L399.9 399c0 0-0.1 0-0.1 0L282.9-188.6c-25.9 5.1-51.2 11.9-75.8 20.3l192.6 567.4c0 0-0.1 0-0.1 0l-265-537.3c-23.5 11.6-46.2 24.8-67.9 39.3l332.8 498.1c0 0-0.1 0-0.1 0.1L4.4-51.1C-15.3-33.9-33.8-15.3-51.1 4.4l450.4 395c0 0 0 0.1-0.1 0.1L-99 66.6c-14.5 21.7-27.6 44.4-39.3 68l537.4 265c0 0 0 0.1 0 0.1l-567.4-192.6c-8.3 24.6-15.1 49.9-20.2 75.8L399 399.8c0 0 0 0.1 0 0.1l-597.7-39.2c-1.7 26.5-1.7 52.7-0.1 78.5L399 400.1c0 0 0 0.1 0 0.1l-587.6 116.9c5.1 25.9 11.9 51.2 20.3 75.8l567.4-192.6c0 0 0 0.1 0 0.1l-537.3 265c11.6 23.5 24.8 46.2 39.3 67.9l498.1-332.8c0 0 0 0.1 0.1 0.1l-450.4 395c17.3 19.7 35.8 38.2 55.5 55.5l395-450.4c0 0 0.1 0 0.1 0.1L66.6 899c21.7 14.5 44.4 27.6 68 39.3l265-537.4c0 0 0.1 0 0.1 0L207.1 968.3c24.6 8.3 49.9 15.1 75.8 20.2L399.8 401c0 0 0.1 0 0.1 0l-39.2 597.7c26.5 1.7 52.7 1.7 78.5 0.1L400.1 401c0 0 0.1 0 0.1 0l116.9 587.6c25.9-5.1 51.2-11.9 75.8-20.3L400.3 400.9c0 0 0.1 0 0.1 0l265 537.3c23.5-11.6 46.2-24.8 67.9-39.3L400.5 400.8c0 0 0.1 0 0.1-0.1l395 450.4c19.7-17.3 38.2-35.8 55.5-55.5l-450.4-395c0 0 0-0.1 0.1-0.1L899 733.4c14.5-21.7 27.6-44.4 39.3-68l-537.4-265c0 0 0-0.1 0-0.1l567.4 192.6c8.3-24.6 15.1-49.9 20.2-75.8L401 400.2c0 0 0-0.1 0-0.1L998.7 439.2z'/%3E%3C/g%3E%3C/svg%3E");
+        background-attachment: fixed;
+        background-size: cover;
+      }
+    `}</style>
+  )
 }
 
 export { Style }