更多模块的懒加载

Code/public/myData/myData.js

@@ -3,7 +3,7 @@ window.isHH = document.documentElement.clientWidth >= document.documentElement.c
 const isPcTemp = document.documentElement.clientWidth >= 1200
 
 // 本地开发静态资源目录
-const baseUrlLoc = 'http://192.168.0.18:8080/staticData/'
+const baseUrlLoc = 'http://192.168.20.55:8080/staticData/'
 
 // 发送请求基地址
 const apiUrlTemp = 'https://sit-handaizy.4dage.com/api/'

Code/src/pages/B1more/S2mien/index.tsx

@@ -99,31 +99,33 @@ function S2mien({ hidden }: Props) {
       </div>
 
       {/* 物-----------右侧 */}
-      <div className='S2right'>
-        {/* 热点图标 */}
-        {hotArr.right
-          .filter(v => v.locMore)
-          .map((item, index) => (
-            <HotIcon
-              isModel={item.tubiao === '文物' ? true : false}
-              key={index}
-              index={index}
-              clickSon={() => setAcName(item.name)}
-              hoverSrc={item.hoverSrc}
-              style={{
-                top: item.locMore.top,
-                left: item.locMore.left
-              }}
-              zIndex={item.zIndex}
-              // 这个模块特有的参数
-              // hoverFu={val => setHotInd(val)}
-              // isHoverAc={hotInd === index}
-              // isZhan={true}
-              isXiao={0.6}
-              // isXiao={isPc ? 0.6 : 0}
-            />
-          ))}
-      </div>
+      {hidden ? null : (
+        <div className='S2right'>
+          {/* 热点图标 */}
+          {hotArr.right
+            .filter(v => v.locMore)
+            .map((item, index) => (
+              <HotIcon
+                isModel={item.tubiao === '文物' ? true : false}
+                key={index}
+                index={index}
+                clickSon={() => setAcName(item.name)}
+                hoverSrc={item.hoverSrc}
+                style={{
+                  top: item.locMore.top,
+                  left: item.locMore.left
+                }}
+                zIndex={item.zIndex}
+                // 这个模块特有的参数
+                // hoverFu={val => setHotInd(val)}
+                // isHoverAc={hotInd === index}
+                // isZhan={true}
+                isXiao={0.6}
+                // isXiao={isPc ? 0.6 : 0}
+              />
+            ))}
+        </div>
+      )}
 
       {/* 打开热点页面 */}
       {acName ? (

Code/src/pages/B1more/S3goods/index.module.scss

@@ -80,6 +80,15 @@
                 height: 100%;
                 width: auto;
               }
+              .lodingTxt {
+                width: 40px;
+                font-size: 10px;
+                writing-mode: vertical-rl;
+                position: relative;
+                left: -10px;
+                top: -55px;
+                letter-spacing: 0px;
+              }
             }
             // 3d标识
             .tDbiao {

Code/src/pages/B1more/S3goods/index.tsx

@@ -5,6 +5,7 @@ import { GoodsKeyType, GoodsType } from '@/types'
 import classNames from 'classnames'
 import HotInfo from './HotInfo'
 import tDimg from '@/assets/img/more/3D.png'
+import LazyImg from '@/components/LazyImg'
 
 const txtBg = {
   全部: 'more/txtBg/1quanbu.png',
@@ -118,72 +119,77 @@ function S3goods({ hidden }: Props) {
       className={styles.S3goods}
       style={{ backgroundImage: `url(${baseURL + data.bg})`, zIndex: openInfo.name ? 50 : 1 }}
     >
-      <div className='S3main' hidden={!!openInfo.name}>
-        {listAll.map((item1, index1) => (
-          <div className={classNames('S3row', key === item1.name ? 'S3rowShow' : '')} key={index1}>
-            {/* 一直有的 */}
+      {hidden ? null : (
+        <div className='S3main' hidden={!!openInfo.name}>
+          {listAll.map((item1, index1) => (
             <div
-              onClick={() => setKey(item1.name)}
-              className='S3rowTit'
-              style={{ backgroundImage: `url(${baseURL + Reflect.get(txtBg, item1.name)})` }}
+              className={classNames('S3row', key === item1.name ? 'S3rowShow' : '')}
+              key={index1}
             >
-              <div>{item1.name}</div>
-            </div>
-            {/* 展开的 */}
-            <div
-              className='S3rowZhan'
-              style={{ cursor: isFlag ? 'move' : 'pointer' }}
-              ref={key === item1.name ? sroolRef : null}
-              onMouseDown={e => {
-                pageXRef.current = e.pageX
-                setIsFlag(true)
-              }}
-              onMouseUp={onMouseUpFu}
-              onMouseLeave={() => setIsFlag(false)}
-              onMouseMove={e => mousemoveFu(e)}
-              onWheel={e => mousemoveFu(e, true)}
-            >
-              <div className='S3rowZhanSon' style={{ width: item1.info.length * 38 + 'px' }}>
-                {item1.info.map((item2, index2) => (
-                  <div
-                    onClick={() => {
-                      if (clickFlag.current) setOpenInfo(item2)
-                    }}
-                    className='S3zRow sizeNo'
-                    key={index2}
-                    style={{ backgroundImage: `url(${row2Bac(index2)})` }}
-                  >
-                    {nmaeResFu(item2.name)}
-                    {item2.type === 'model' ? <img className='tDbiao' src={tDimg} alt='' /> : ''}
-
-                    {/* 上下的线 */}
-                    {index2 < item1.info.length - 1 ? (
-                      <>
-                        <img className='S3zRxian' src={baseURL + 'more/moreXian.png'} alt='' />
-                        <img
-                          className='S3zRxian S3zRxian2'
-                          src={baseURL + 'more/moreXian.png'}
-                          alt=''
-                        />
-                      </>
-                    ) : null}
-
-                    {/* 右下角图片 */}
-
-                    <div className='S3zRimg'>
-                      {item2.type === 'img' ? (
-                        <img src={baseURL + item2.inSrc} alt='' />
-                      ) : (
-                        <img src={baseURL + item2.suoSrc} alt='' />
-                      )}
+              {/* 一直有的 */}
+              <div
+                onClick={() => setKey(item1.name)}
+                className='S3rowTit'
+                style={{ backgroundImage: `url(${baseURL + Reflect.get(txtBg, item1.name)})` }}
+              >
+                <div>{item1.name}</div>
+              </div>
+              {/* 展开的 */}
+              <div
+                className='S3rowZhan'
+                style={{ cursor: isFlag ? 'move' : 'pointer' }}
+                ref={key === item1.name ? sroolRef : null}
+                onMouseDown={e => {
+                  pageXRef.current = e.pageX
+                  setIsFlag(true)
+                }}
+                onMouseUp={onMouseUpFu}
+                onMouseLeave={() => setIsFlag(false)}
+                onMouseMove={e => mousemoveFu(e)}
+                onWheel={e => mousemoveFu(e, true)}
+              >
+                <div className='S3rowZhanSon' style={{ width: item1.info.length * 38 + 'px' }}>
+                  {item1.info.map((item2, index2) => (
+                    <div
+                      onClick={() => {
+                        if (clickFlag.current) setOpenInfo(item2)
+                      }}
+                      className='S3zRow sizeNo'
+                      key={index2}
+                      style={{ backgroundImage: `url(${row2Bac(index2)})` }}
+                    >
+                      {nmaeResFu(item2.name)}
+                      {item2.type === 'model' ? <img className='tDbiao' src={tDimg} alt='' /> : ''}
+
+                      {/* 上下的线 */}
+                      {index2 < item1.info.length - 1 ? (
+                        <>
+                          <img className='S3zRxian' src={baseURL + 'more/moreXian.png'} alt='' />
+                          <img
+                            className='S3zRxian S3zRxian2'
+                            src={baseURL + 'more/moreXian.png'}
+                            alt=''
+                          />
+                        </>
+                      ) : null}
+
+                      {/* 右下角图片 */}
+
+                      <div className='S3zRimg'>
+                        {item2.type === 'img' ? (
+                          <LazyImg src={baseURL + item2.inSrc} />
+                        ) : (
+                          <LazyImg src={baseURL + item2.suoSrc} />
+                        )}
+                      </div>
                     </div>
-                  </div>
-                ))}
+                  ))}
+                </div>
               </div>
             </div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      )}
 
       {/* 打开热点详情 */}
       {openInfo.name ? (