From 78e65956484813cc6227fc64724e5ef922c2824e Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Wed, 1 Dec 2021 17:24:46 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E8=B5=9E=E8=B5=8F=E7=A0=81=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/RewardButton.js | 23 +++++++++--------------
 pages/article/[slug].js    | 13 +++++--------
 2 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/components/RewardButton.js b/components/RewardButton.js
index 3726710f..8e92c1b8 100644
--- a/components/RewardButton.js
+++ b/components/RewardButton.js
@@ -6,13 +6,15 @@ import React from 'react'
  * @constructor
  */
 const RewardButton = () => {
-  const [popoverShow, setPopoverShow] = React.useState(false)
-
   const openPopover = () => {
-    setPopoverShow(true)
+    if (window) {
+      document.getElementById('reward-qrcode').classList.remove('hidden')
+    }
   }
   const closePopover = () => {
-    setPopoverShow(false)
+    if (window) {
+      document.getElementById('reward-qrcode').classList.add('hidden')
+    }
   }
   return (
     <div onMouseEnter={openPopover} onMouseLeave={closePopover} className='justify-center py-10'>
@@ -21,16 +23,9 @@ const RewardButton = () => {
           <span>打赏一杯咖啡</span>
       </div>
 
-      <div className={ `${(popoverShow ? ' block ' : ' hidden ')} transform block z-50 font-normal`}>
-        <div
-          className='flex space-x-10 animate__animated animate__fadeIn duration-200 my-5 px-5 py-6 justify-center bg-white dark:bg-black dark:text-gray-200'>
-         <div>
-            <img className='md:w-72 m-auto' src='/reward_code_alipay.png' />
-          </div>
-          <div>
-            <img className='md:w-72 m-auto' src='/reward_code_wechat.png' />
-          </div>
-        </div>
+      <div id='reward-qrcode' className='hidden flex space-x-10 animate__animated animate__fadeIn duration-200 my-5 px-5 mx-auto py-6 justify-center bg-white dark:bg-black dark:text-gray-200'>
+          <img className='md:w-72' src='/reward_code_alipay.png' />
+          <img className='md:w-72' src='/reward_code_wechat.png' />
       </div>
     </div>
   )
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index 28d4da7e..db9ecfef 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -47,20 +47,17 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
   return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={posts} categories={categories}>
     <Progress targetRef={targetRef} />
 
-    <div id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-200 dark:bg-black pt-16'>
+    <article id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-200 dark:bg-black pt-16'>
       {/* 中央区域 wrapper */}
       {post.type && !post.type.includes('Page') && (<>
-        <header
-          className='hover:shadow-2xl hover:scale-105 transform duration-200 mx-auto max-w-5xl mb-2 md:flex-shrink-0 animate__fadeIn animate__animated'>
           {/* 封面图 */}
           {post.page_cover && post.page_cover.length > 1 && (
-            <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }} loading='lazy'
+            <img className='bg-center object-cover w-full hover:shadow-2xl hover:scale-105 transform duration-200 mx-auto max-w-5xl mb-2 md:flex-shrink-0 animate__fadeIn animate__animated' style={{ maxHeight: '40rem' }} loading='lazy'
                  src={post.page_cover} alt={post.title} />
           )}
-        </header>
       </>)}
 
-      <article
+      <div
         className='hover:shadow-2xl duration-200 shadow-card mb-20 w-screen md:w-full overflow-x-auto md:px-10 px-5 pt-10 max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-900'>
 
         {post.type && !post.type.includes('Page') && (<>
@@ -153,7 +150,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
             </Link>
           </div>
         </div>
-      </article>
+      </div>
 
       {/* 评论互动 */}
       <div
@@ -161,7 +158,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
         <Comment frontMatter={post} />
       </div>
 
-    </div>
+    </article>
 
     {/* 悬浮目录按钮 */}
     <div className='block lg:hidden'>