commerce-footer样式微调

themes/commerce/components/Footer.js

@@ -18,7 +18,7 @@ const Footer = props => {
   return (
     <footer
       id='footer-wrapper'
-      className='relative bg-[#2A2A2A] justify-center w-full leading-6 text-gray-300 text-sm p-10'>
+      className='relative bg-[#2A2A2A] justify-center w-full leading-6 text-gray-300 text-sm md:p-10'>
       <div id='footer-container' className='w-full mx-auto max-w-screen-xl'>
         <div className='flex'>
           {/* 页脚左侧菜单组 */}
@@ -72,97 +72,108 @@ const Footer = props => {
             </div>
           </div>
 
-          {/* 页脚中部联系方式 */}
+          {/* 页脚右侧联系方式 */}
           {
-            <div className='md:border-l pl-4 border-gray-600 my-6 whitespace-pre-line text-left flex-grow'>
-              <div className='font-bold text-l text-white mb-6'>
-                {siteConfig('COMMERCE_TEXT_FOOTER_TITLE', 'Contact US', CONFIG)}
-              </div>
-              <div className='space-y-4'>
-                <div className='flex space-x-4 text-2xl'>
-                  {JSON.parse(
-                    siteConfig('COMMERCE_CONTACT_WHATSAPP_SHOW', null, CONFIG),
-                    true
-                  ) && (
-                    <div>
-                      {
-                        <a
-                          target='_blank'
-                          rel='noreferrer'
-                          href={siteConfig('CONTACT_WHATSAPP', '#', CONFIG)}
-                          title={'telegram'}>
-                          <i className='transform hover:scale-125 duration-150 fa-brands fa-whatsapp dark:hover:text-red-400 hover:text-red-600' />
-                        </a>
-                      }
-                    </div>
-                  )}
-
-                  {JSON.parse(
-                    siteConfig('COMMERCE_CONTACT_TELEGRAM_SHOW', true, CONFIG)
-                  ) && (
-                    <div>
-                      {
-                        <a
-                          target='_blank'
-                          rel='noreferrer'
-                          href={siteConfig('CONTACT_TELEGRAM', '#', CONFIG)}
-                          title={'telegram'}>
-                          <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-red-400 hover:text-red-600' />
-                        </a>
-                      }
-                    </div>
-                  )}
-                </div>
-                <div className='text-lg'>
-                  {' '}
-                  {siteConfig('CONTACT_EMAIL') && (
-                    <a
-                      target='_blank'
-                      rel='noreferrer'
-                      title={'email'}
-                      href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
-                      <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-red-400 hover:text-red-600' />{' '}
-                      {siteConfig('CONTACT_EMAIL')}
-                    </a>
-                  )}
-                </div>
-                <div className='text-lg'>
-                  {' '}
-                  {siteConfig('CONTACT_PHONE', null) && (
-                    <div>
-                      <i className='transform hover:scale-125 duration-150 fas fa-user dark:hover:text-red-400 hover:text-red-600' />{' '}
-                      {siteConfig('CONTACT_PHONE', null)}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          }
-
-          {/* 页脚右侧图片二维码和文字描述 */}
-          {
-            <div className='pl-4 border-gray-600 my-6 whitespace-pre-line text-center flex-grow'>
-              <div className='font-bold text-l text-white mb-6 text-center'>
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img
-                  className='h-36'
-                  src={siteConfig(
-                    'COMMERCE_FOOTER_RIGHT_IMG_URL',
-                    null,
+            <div className='md:border-l pl-8 space-x-8 border-gray-600 flex flex-grow'>
+              {/* 电话邮箱等 */}
+              <div className='my-6 whitespace-pre-line text-left'>
+                <div className='font-bold text-l text-white mb-6'>
+                  {siteConfig(
+                    'COMMERCE_TEXT_FOOTER_TITLE',
+                    'Contact US',
                     CONFIG
-                  )}></img>
-              </div>
-              <div className='space-y-4'>
-                <div
-                  className='flex space-x-4 text-center'
-                  dangerouslySetInnerHTML={{
-                    __html: siteConfig(
-                      'COMMERCE_FOOTER_RIGHT_TEXT',
-                      null,
-                      CONFIG
-                    )
-                  }}></div>
+                  )}
+                </div>
+                <div className='space-y-4'>
+                  <div className='flex space-x-4 text-2xl'>
+                    {JSON.parse(
+                      siteConfig(
+                        'COMMERCE_CONTACT_WHATSAPP_SHOW',
+                        null,
+                        CONFIG
+                      ),
+                      true
+                    ) && (
+                      <div>
+                        {
+                          <a
+                            target='_blank'
+                            rel='noreferrer'
+                            href={siteConfig('CONTACT_WHATSAPP', '#', CONFIG)}
+                            title={'telegram'}>
+                            <i className='transform hover:scale-125 duration-150 fa-brands fa-whatsapp dark:hover:text-red-400 hover:text-red-600' />
+                          </a>
+                        }
+                      </div>
+                    )}
+
+                    {JSON.parse(
+                      siteConfig('COMMERCE_CONTACT_TELEGRAM_SHOW', true, CONFIG)
+                    ) && (
+                      <div>
+                        {
+                          <a
+                            target='_blank'
+                            rel='noreferrer'
+                            href={siteConfig('CONTACT_TELEGRAM', '#', CONFIG)}
+                            title={'telegram'}>
+                            <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-red-400 hover:text-red-600' />
+                          </a>
+                        }
+                      </div>
+                    )}
+                  </div>
+                  <div className='text-lg'>
+                    {' '}
+                    {siteConfig('CONTACT_EMAIL') && (
+                      <a
+                        target='_blank'
+                        rel='noreferrer'
+                        title={'email'}
+                        href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+                        <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-red-400 hover:text-red-600' />{' '}
+                        {siteConfig('CONTACT_EMAIL')}
+                      </a>
+                    )}
+                  </div>
+                  <div className='text-lg'>
+                    {' '}
+                    {siteConfig('CONTACT_PHONE', null) && (
+                      <div>
+                        <i className='transform hover:scale-125 duration-150 fas fa-user dark:hover:text-red-400 hover:text-red-600' />{' '}
+                        {siteConfig('CONTACT_PHONE', null)}
+                      </div>
+                    )}
+                  </div>
+                </div>
               </div>
+
+              {/* 页脚右侧图片二维码和文字描述 */}
+              {
+                <div className=' border-gray-600 my-6 whitespace-pre-line text-center'>
+                  <div className='font-bold text-l text-white mb-6 text-center'>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      className='h-36'
+                      src={siteConfig(
+                        'COMMERCE_FOOTER_RIGHT_IMG_URL',
+                        null,
+                        CONFIG
+                      )}></img>
+                  </div>
+                  <div className='space-y-4'>
+                    <div
+                      className='flex space-x-4 text-center'
+                      dangerouslySetInnerHTML={{
+                        __html: siteConfig(
+                          'COMMERCE_FOOTER_RIGHT_TEXT',
+                          null,
+                          CONFIG
+                        )
+                      }}></div>
+                  </div>
+                </div>
+              }
             </div>
           }
         </div>
@@ -170,7 +181,7 @@ const Footer = props => {
         {/* 底部版权相关 */}
         <div
           id='footer-copyright-wrapper'
-          className='flex flex-col md:flex-row justify-between border-t border-gray-600 pt-8'>
+          className='flex flex-col md:flex-row justify-between border-t border-gray-600 pt-8 px-4 md:px-0'>
           <div className='text-start space-y-1'>
             {/* 网站所有者 */}
             <div>

themes/commerce/components/ProductCenter.js

@@ -16,7 +16,7 @@ export default function ProductCenter(props) {
   )
 
   return (
-    <div className='w-full my-4 mx-4'>
+    <div className='w-full'>
       <div className='w-full text-center text-4xl font-bold'>
         {siteConfig('COMMERCE_TEXT_CENTER_TITLE', 'Product Center', CONFIG)}
       </div>
@@ -29,7 +29,7 @@ export default function ProductCenter(props) {
       <div className='flex'>
         <ProductCategories {...props} />
 
-        <div className='w-full p-4 mx-2'>
+        <div className='w-full px-4'>
           {/* 文章列表 */}
           <div className='grid md:grid-cols-3 grid-cols-2 gap-5'>
             {posts?.map(post => (

themes/commerce/index.js

@@ -129,7 +129,7 @@ const LayoutIndex = props => {
 
       {/* 首页企业/品牌介绍 这里展示公告 */}
       {notice && (
-        <div id='brand-introduction' className='w-full my-4 mx-4'>
+        <div id='brand-introduction' className='w-full'>
           <div className='w-full text-center text-4xl font-bold pt-12'>
             {notice.title}
           </div>