2 years ago · bf8831af21
--- a/pc/public/favicon.ico
+++ b/pc/public/favicon.ico
--- a/pc/public/goodsData/1-wenwu.png
+++ b/pc/public/goodsData/1-wenwu.png
--- a/pc/public/goodsData/1.png
+++ b/pc/public/goodsData/1.png
--- a/pc/public/goodsData/10-wenwu.png
+++ b/pc/public/goodsData/10-wenwu.png
--- a/pc/public/goodsData/10.png
+++ b/pc/public/goodsData/10.png
--- a/pc/public/goodsData/11-wenwu.png
+++ b/pc/public/goodsData/11-wenwu.png
--- a/pc/public/goodsData/11.png
+++ b/pc/public/goodsData/11.png
--- a/pc/public/goodsData/12-wenwu.png
+++ b/pc/public/goodsData/12-wenwu.png
--- a/pc/public/goodsData/12.png
+++ b/pc/public/goodsData/12.png
--- a/pc/public/goodsData/13-wenwu.png
+++ b/pc/public/goodsData/13-wenwu.png
--- a/pc/public/goodsData/13.png
+++ b/pc/public/goodsData/13.png
--- a/pc/public/goodsData/14-wenwu.png
+++ b/pc/public/goodsData/14-wenwu.png
--- a/pc/public/goodsData/14.png
+++ b/pc/public/goodsData/14.png
--- a/pc/public/goodsData/15-wenwu.png
+++ b/pc/public/goodsData/15-wenwu.png
--- a/pc/public/goodsData/15.png
+++ b/pc/public/goodsData/15.png
--- a/pc/public/goodsData/16-wenwu.png
+++ b/pc/public/goodsData/16-wenwu.png
--- a/pc/public/goodsData/16.png
+++ b/pc/public/goodsData/16.png
--- a/pc/public/goodsData/17-wenwu.png
+++ b/pc/public/goodsData/17-wenwu.png
--- a/pc/public/goodsData/17.png
+++ b/pc/public/goodsData/17.png
--- a/pc/public/goodsData/18-wenwu.png
+++ b/pc/public/goodsData/18-wenwu.png
--- a/pc/public/goodsData/18.png
+++ b/pc/public/goodsData/18.png
--- a/pc/public/goodsData/19-wenwu.png
+++ b/pc/public/goodsData/19-wenwu.png
--- a/pc/public/goodsData/19.png
+++ b/pc/public/goodsData/19.png
--- a/pc/public/goodsData/2-wenwu.png
+++ b/pc/public/goodsData/2-wenwu.png
--- a/pc/public/goodsData/2.png
+++ b/pc/public/goodsData/2.png
--- a/pc/public/goodsData/20-wenwu.png
+++ b/pc/public/goodsData/20-wenwu.png
--- a/pc/public/goodsData/20.png
+++ b/pc/public/goodsData/20.png
--- a/pc/public/goodsData/3-wenwu.png
+++ b/pc/public/goodsData/3-wenwu.png
--- a/pc/public/goodsData/3.png
+++ b/pc/public/goodsData/3.png
--- a/pc/public/goodsData/4-wenwu.png
+++ b/pc/public/goodsData/4-wenwu.png
--- a/pc/public/goodsData/4.png
+++ b/pc/public/goodsData/4.png
--- a/pc/public/goodsData/5-wenwu.png
+++ b/pc/public/goodsData/5-wenwu.png
--- a/pc/public/goodsData/5.png
+++ b/pc/public/goodsData/5.png
--- a/pc/public/goodsData/6-wenwu.png
+++ b/pc/public/goodsData/6-wenwu.png
--- a/pc/public/goodsData/6.png
+++ b/pc/public/goodsData/6.png
--- a/pc/public/goodsData/7-wenwu.png
+++ b/pc/public/goodsData/7-wenwu.png
--- a/pc/public/goodsData/7.png
+++ b/pc/public/goodsData/7.png
--- a/pc/public/goodsData/8-wenwu.png
+++ b/pc/public/goodsData/8-wenwu.png
--- a/pc/public/goodsData/8.png
+++ b/pc/public/goodsData/8.png
--- a/pc/public/goodsData/9-wenwu.png
+++ b/pc/public/goodsData/9-wenwu.png
--- a/pc/public/goodsData/9.png
+++ b/pc/public/goodsData/9.png
--- a/pc/public/index.html
+++ b/pc/public/index.html
@@ -24,7 +24,7 @@
 
				       work correctly both with client-side routing and a non-root public URL.
			
 
				       Learn how to configure a non-root public URL by running `npm run build`.
			
 
				     -->
			
 
				-    <title>React App</title>
			
 
				+    <title>务川县仡佬文化博物馆</title>
			
 
				   </head>
			
 
				   <body>
			
 
				     <noscript>You need to enable JavaScript to run this app.</noscript>
			
--- a/pc/src/assets/img/goods/cur.png
+++ b/pc/src/assets/img/goods/cur.png
--- a/pc/src/assets/img/goods/curAc.png
+++ b/pc/src/assets/img/goods/curAc.png
--- a/pc/src/assets/img/goods/infoBac.jpg
+++ b/pc/src/assets/img/goods/infoBac.jpg
--- a/pc/src/assets/img/goods/logo.png
+++ b/pc/src/assets/img/goods/logo.png
--- a/pc/src/assets/img/goods/toHome.png
+++ b/pc/src/assets/img/goods/toHome.png
--- a/pc/src/assets/img/goods/wenli1.jpg
+++ b/pc/src/assets/img/goods/wenli1.jpg
--- a/pc/src/assets/img/goods/wenli2.jpg
+++ b/pc/src/assets/img/goods/wenli2.jpg
--- a/pc/src/assets/img/goods/wenli3.jpg
+++ b/pc/src/assets/img/goods/wenli3.jpg
--- a/pc/src/assets/img/goods/wenli4.jpg
+++ b/pc/src/assets/img/goods/wenli4.jpg
--- a/pc/src/pages/A1_Home/index.tsx
+++ b/pc/src/pages/A1_Home/index.tsx
@@ -1,6 +1,5 @@
 
				 import React, { useCallback, useEffect, useState } from "react";
			
 
				 import styles from "./index.module.scss";
			
 
				-import { MessageFu } from "@/utils/message";
			
 
				 import history from "@/utils/history";
			
 
				 import classNames from "classnames";
			
 
				 import logoImg from "@/assets/img/home/title-home.png";
			
--- a/pc/src/pages/A2_Goods/GoodsInfo/index.module.scss
+++ b/pc/src/pages/A2_Goods/GoodsInfo/index.module.scss
@@ -0,0 +1,72 @@
 
				+.GoodsInfo {
			
 
				+  position: absolute;
			
 
				+  z-index: 4;
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  opacity: 0;
			
 
				+  pointer-events: none;
			
 
				+  transition: all .3s;
			
 
				+
			
 
				+  :global {
			
 
				+    .close {
			
 
				+      position: absolute;
			
 
				+      top: 40px;
			
 
				+      right: 30px;
			
 
				+      width: 50px;
			
 
				+      height: 50px;
			
 
				+      cursor: pointer;
			
 
				+      background-image: url('../../../assets/img/home/icon-close.png');
			
 
				+      background-size: 100% 100%;
			
 
				+    }
			
 
				+
			
 
				+    .infoMain {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      display: flex;
			
 
				+
			
 
				+
			
 
				+      .infoL {
			
 
				+        width: 60%;
			
 
				+        background-color: #584c4c;
			
 
				+
			
 
				+        iframe {
			
 
				+          width: 100%;
			
 
				+          height: 100%;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .infoR {
			
 
				+        width: 40%;
			
 
				+        padding: 300px 0 0 160px;
			
 
				+        background-image: url('../../../assets/img/goods/infoBac.jpg');
			
 
				+        background-size: 100% 100%;
			
 
				+
			
 
				+        .title {
			
 
				+          font-size: 22px;
			
 
				+          font-weight: 700;
			
 
				+          color: var(--themeColor);
			
 
				+          margin-bottom: 24px;
			
 
				+        }
			
 
				+
			
 
				+        .infoP {
			
 
				+          font-size: 16px;
			
 
				+          font-weight: 700;
			
 
				+          margin-bottom: 15px;
			
 
				+        }
			
 
				+
			
 
				+        .infoTxt {
			
 
				+          margin-top: 34px;
			
 
				+          font-size: 12px;
			
 
				+        }
			
 
				+
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.GoodsInfoAc {
			
 
				+  opacity: 1;
			
 
				+  pointer-events: auto;
			
 
				+}
			
--- a/pc/src/pages/A2_Goods/GoodsInfo/index.tsx
+++ b/pc/src/pages/A2_Goods/GoodsInfo/index.tsx
@@ -0,0 +1,44 @@
 
				+/* eslint-disable jsx-a11y/iframe-has-title */
			
 
				+import React from "react";
			
 
				+import styles from "./index.module.scss";
			
 
				+import { GoodsType } from "@/utils/data";
			
 
				+import classNames from "classnames";
			
 
				+
			
 
				+type Props = {
			
 
				+  data: GoodsType;
			
 
				+  closePageFu: () => void;
			
 
				+};
			
 
				+
			
 
				+function GoodsInfo({ data, closePageFu }: Props) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      className={classNames(
			
 
				+        styles.GoodsInfo,
			
 
				+        data.id ? styles.GoodsInfoAc : ""
			
 
				+      )}
			
 
				+    >
			
 
				+      {/* 关闭按钮 */}
			
 
				+      <div className="close" onClick={() => closePageFu()}></div>
			
 
				+      {data.id ? (
			
 
				+        <div className="infoMain">
			
 
				+          {/* 左边模型 */}
			
 
				+          <div className="infoL">
			
 
				+            <iframe src={data.link} frameBorder="0"></iframe>
			
 
				+          </div>
			
 
				+          {/* 右边信息 */}
			
 
				+          <div className="infoR">
			
 
				+            <div className="title">{data.name}</div>
			
 
				+            <div className="infoP">年代：{data.age}</div>
			
 
				+            <div className="infoP">类别：{data.sort}</div>
			
 
				+            <div className="infoP">尺寸：{data.size}</div>
			
 
				+            <div className="infoTxt">{data.intro}</div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      ) : null}
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+const MemoGoodsInfo = React.memo(GoodsInfo);
			
 
				+
			
 
				+export default MemoGoodsInfo;
			
--- a/pc/src/pages/A2_Goods/index.module.scss
+++ b/pc/src/pages/A2_Goods/index.module.scss
@@ -1,6 +1,277 @@
 
				-.A2_Goods{
			
 
				-  
			
 
				-  :global{
			
 
				-    
			
 
				+.A2_Goods {
			
 
				+  position: relative;
			
 
				+
			
 
				+  :global {
			
 
				+    .logo {
			
 
				+      position: absolute;
			
 
				+      top: 20px;
			
 
				+      left: 50px;
			
 
				+      z-index: 3;
			
 
				+      width: 150px;
			
 
				+      pointer-events: none;
			
 
				+    }
			
 
				+
			
 
				+    .toHomeBox {
			
 
				+      position: absolute;
			
 
				+      z-index: 3;
			
 
				+      right: 20px;
			
 
				+      bottom: 20px;
			
 
				+      cursor: pointer;
			
 
				+      width: 60px;
			
 
				+      height: 60px;
			
 
				+      background-image: url('../../assets/img/goods/toHome.png');
			
 
				+      background-size: 100% 100%;
			
 
				+    }
			
 
				+
			
 
				+    .goodsMain {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      overflow-x: auto;
			
 
				+      overflow-y: hidden;
			
 
				+
			
 
				+      &::-webkit-scrollbar {
			
 
				+        /*滚动条整体样式*/
			
 
				+        width: 0px;
			
 
				+        /*高宽分别对应横竖滚动条的尺寸*/
			
 
				+        height: 0px;
			
 
				+      }
			
 
				+
			
 
				+      .goodsBox {
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+        display: flex;
			
 
				+        position: relative;
			
 
				+
			
 
				+
			
 
				+
			
 
				+        .goodsRow {
			
 
				+          border-right: 2px solid #c09e87;
			
 
				+          height: 100%;
			
 
				+          background-size: 100% 100%;
			
 
				+          position: relative;
			
 
				+
			
 
				+          .rowShow {
			
 
				+            opacity: 1;
			
 
				+            pointer-events: auto;
			
 
				+            transition: all .5s;
			
 
				+            position: absolute;
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+            background-color: rgba(236, 215, 167, 0.6);
			
 
				+
			
 
				+            .rowName {
			
 
				+              position: absolute;
			
 
				+              bottom: 150px;
			
 
				+              left: 60px;
			
 
				+              writing-mode: vertical-lr;
			
 
				+              font-size: 18px;
			
 
				+              letter-spacing: 4px;
			
 
				+
			
 
				+              &::before {
			
 
				+                content: '';
			
 
				+                position: absolute;
			
 
				+                top: -30px;
			
 
				+                left: 50%;
			
 
				+                transform: translateX(-50%);
			
 
				+                width: 15px;
			
 
				+                height: 15px;
			
 
				+                background-image: url('../../assets/img/home/Ldian.png');
			
 
				+                background-size: 100% 100%;
			
 
				+              }
			
 
				+
			
 
				+            }
			
 
				+
			
 
				+            .rowImg {
			
 
				+              position: absolute;
			
 
				+              bottom: 120px;
			
 
				+              right: 0;
			
 
				+              width: calc(100% - 100px);
			
 
				+              text-align: center;
			
 
				+              cursor: pointer;
			
 
				+
			
 
				+
			
 
				+              &>img {
			
 
				+                max-height: 450px;
			
 
				+                pointer-events: none;
			
 
				+              }
			
 
				+            }
			
 
				+          }
			
 
				+
			
 
				+          .rowHover {
			
 
				+            opacity: 0;
			
 
				+            pointer-events: none;
			
 
				+            transition: all .5s;
			
 
				+            position: absolute;
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+            background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
			
 
				+
			
 
				+            .rowName {
			
 
				+              color: #fff;
			
 
				+              position: absolute;
			
 
				+              bottom: 150px;
			
 
				+              left: 60px;
			
 
				+              writing-mode: vertical-lr;
			
 
				+              font-size: 18px;
			
 
				+              letter-spacing: 4px;
			
 
				+
			
 
				+              &::before {
			
 
				+                content: '';
			
 
				+                position: absolute;
			
 
				+                top: -30px;
			
 
				+                left: 50%;
			
 
				+                transform: translateX(-50%);
			
 
				+                width: 15px;
			
 
				+                height: 15px;
			
 
				+                background-image: url('../../assets/img/home/Ldian.png');
			
 
				+                background-size: 100% 100%;
			
 
				+              }
			
 
				+
			
 
				+            }
			
 
				+
			
 
				+            .rowImg {
			
 
				+              position: absolute;
			
 
				+              bottom: 120px;
			
 
				+              right: 0;
			
 
				+              width: calc(100% - 100px);
			
 
				+              text-align: center;
			
 
				+              cursor: pointer;
			
 
				+
			
 
				+              &>img {
			
 
				+                max-height: 450px;
			
 
				+                pointer-events: none;
			
 
				+              }
			
 
				+            }
			
 
				+
			
 
				+            .rowTxt {
			
 
				+              color: #fff;
			
 
				+              position: absolute;
			
 
				+              top: 100px;
			
 
				+              left: 0;
			
 
				+              padding: 0 55px;
			
 
				+
			
 
				+              .rowTxtRow {
			
 
				+                font-weight: 700;
			
 
				+                margin-bottom: 6px;
			
 
				+              }
			
 
				+
			
 
				+              .rowTxtRowZ {
			
 
				+                font-size: 12px;
			
 
				+                margin-top: 20px;
			
 
				+              }
			
 
				+            }
			
 
				+          }
			
 
				+
			
 
				+          &:nth-of-type(1n) {
			
 
				+            background-image: url('../../assets/img/goods/wenli1.jpg');
			
 
				+          }
			
 
				+
			
 
				+          &:nth-of-type(2n) {
			
 
				+            background-image: url('../../assets/img/goods/wenli2.jpg');
			
 
				+
			
 
				+            .rowImg {
			
 
				+              bottom: auto;
			
 
				+              top: 120px;
			
 
				+            }
			
 
				+
			
 
				+            .rowHover {
			
 
				+              .rowName {
			
 
				+                bottom: auto;
			
 
				+                top: 120px;
			
 
				+              }
			
 
				+
			
 
				+              .rowTxt {
			
 
				+                top: auto;
			
 
				+                bottom: 100px;
			
 
				+                left: 0;
			
 
				+                padding: 0 55px;
			
 
				+
			
 
				+
			
 
				+              }
			
 
				+            }
			
 
				+
			
 
				+          }
			
 
				+
			
 
				+          &:nth-of-type(3n) {
			
 
				+            background-image: url('../../assets/img/goods/wenli3.jpg');
			
 
				+          }
			
 
				+
			
 
				+          &:nth-of-type(4n) {
			
 
				+            background-image: url('../../assets/img/goods/wenli4.jpg');
			
 
				+          }
			
 
				+
			
 
				+          &:last-child {
			
 
				+            border: none;
			
 
				+          }
			
 
				+
			
 
				+          &:nth-of-type(4) {
			
 
				+            .rowImg {
			
 
				+              bottom: auto;
			
 
				+              top: 200px;
			
 
				+            }
			
 
				+          }
			
 
				+
			
 
				+
			
 
				+          // 输入移入的效果
			
 
				+          &:hover {
			
 
				+            .rowShow {
			
 
				+              opacity: 0;
			
 
				+              pointer-events: none;
			
 
				+            }
			
 
				+
			
 
				+            .rowHover {
			
 
				+              opacity: 1;
			
 
				+              pointer-events: auto;
			
 
				+            }
			
 
				+          }
			
 
				+
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    .curTitBox {
			
 
				+      border-radius: 0 0 4px 4px;
			
 
				+      border-top: 3px solid #b6ab97;
			
 
				+      position: absolute;
			
 
				+      top: 50%;
			
 
				+      left: 50%;
			
 
				+      transform: translate(-50%, -50%);
			
 
				+      width: 300px;
			
 
				+      height: 370px;
			
 
				+      background-color: #726b56;
			
 
				+
			
 
				+      .curClose {
			
 
				+        position: absolute;
			
 
				+        right: 15px;
			
 
				+        top: 15px;
			
 
				+        cursor: pointer;
			
 
				+        color: #98856f;
			
 
				+        font-size: 24px;
			
 
				+      }
			
 
				+
			
 
				+      .curImg {
			
 
				+        margin: 70px auto 30px;
			
 
				+        width: 213px;
			
 
				+        height: 213px;
			
 
				+        position: relative;
			
 
				+
			
 
				+        &>img {
			
 
				+          position: absolute;
			
 
				+          top: 0;
			
 
				+          left: 0;
			
 
				+          width: 100%;
			
 
				+          height: 100%;
			
 
				+          opacity: 1;
			
 
				+          transition: all 2s;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      &>p {
			
 
				+        font-size: 14px;
			
 
				+        color: #fff;
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+    }
			
 
				   }
			
 
				 }
			
--- a/pc/src/pages/A2_Goods/index.tsx
+++ b/pc/src/pages/A2_Goods/index.tsx
@@ -1,12 +1,126 @@
 
				-import React from "react";
			
 
				+import React, { useEffect, useMemo, useRef, useState } from "react";
			
 
				 import styles from "./index.module.scss";
			
 
				- function A2_Goods() {
			
 
				-  
			
 
				+import logoImg from "@/assets/img/goods/logo.png";
			
 
				+import { GoodsType, goodsArr } from "@/utils/data";
			
 
				+import history, { envUrl } from "@/utils/history";
			
 
				+import { CloseOutlined } from "@ant-design/icons";
			
 
				+import curImg from "@/assets/img/goods/cur.png";
			
 
				+import curAcImg from "@/assets/img/goods/curAc.png";
			
 
				+import GoodsInfo from "./GoodsInfo";
			
 
				+
			
 
				+function A2_Goods() {
			
 
				+  // 一个藏品的宽度
			
 
				+  const goodsWidth = useMemo(() => {
			
 
				+    const fullWidth = window.innerWidth <= 1600 ? 1600 : window.innerWidth;
			
 
				+    const oneWidth = fullWidth / 3.4;
			
 
				+    return oneWidth;
			
 
				+  }, []);
			
 
				+
			
 
				+  // 滚轮提示
			
 
				+  const [curTit, setCurTit] = useState(true);
			
 
				+  const curTimeRef = useRef(0);
			
 
				+  const [curCut, setCurCut] = useState(true);
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    if (!curTit) {
			
 
				+      localStorage.setItem("WCBWG_CUR", "1");
			
 
				+      clearInterval(curTimeRef.current);
			
 
				+    }
			
 
				+  }, [curTit]);
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    // 开启滚轮提示 图片更换 定时器
			
 
				+    clearInterval(curTimeRef.current);
			
 
				+    curTimeRef.current = window.setInterval(() => {
			
 
				+      setCurCut(!curCut);
			
 
				+    }, 2000);
			
 
				+  }, [curCut]);
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    const isFlag = localStorage.getItem("WCBWG_CUR");
			
 
				+    if (isFlag) setCurTit(false);
			
 
				+    return () => {
			
 
				+      clearInterval(curTimeRef.current);
			
 
				+    };
			
 
				+  }, []);
			
 
				+
			
 
				+  // 滚轮滑动事件
			
 
				+  useEffect(() => {
			
 
				+    const dom = document.querySelector("#goddsSwBox") as HTMLDivElement;
			
 
				+    dom.onwheel = (e) => {
			
 
				+      // 使用过滚轮
			
 
				+      setCurTit(false);
			
 
				+      const num = dom.scrollLeft;
			
 
				+      dom.scrollLeft = num + e.deltaY;
			
 
				+    };
			
 
				+  }, []);
			
 
				+
			
 
				+  // 查看文物详情
			
 
				+  const [info, setInfo] = useState({} as GoodsType);
			
 
				+
			
 
				   return (
			
 
				     <div className={styles.A2_Goods}>
			
 
				-      <h1>A2_Goods</h1>
			
 
				+      {/* 馆藏鉴赏图片 */}
			
 
				+      <div className="logo">
			
 
				+        <img src={logoImg} alt="" />
			
 
				+      </div>
			
 
				+
			
 
				+      {/* 回到首页 */}
			
 
				+      <div className="toHomeBox" onClick={() => history.push("/")}></div>
			
 
				+      {/* 文物主体 */}
			
 
				+      <div className="goodsMain" id="goddsSwBox">
			
 
				+        <div
			
 
				+          className="goodsBox"
			
 
				+          style={{ width: goodsWidth * goodsArr.length + "px" }}
			
 
				+        >
			
 
				+          {goodsArr.map((v) => (
			
 
				+            <div
			
 
				+              style={{ width: goodsWidth + "px" }}
			
 
				+              className="goodsRow"
			
 
				+              key={v.id}
			
 
				+            >
			
 
				+              {/* 正常显示的 */}
			
 
				+              <div className="rowShow">
			
 
				+                <div className="rowName">{v.name}</div>
			
 
				+                <div className="rowImg">
			
 
				+                  <img src={`${envUrl}/${v.id}.png`} alt="" />
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              {/* 鼠标移入的 */}
			
 
				+              <div className="rowHover">
			
 
				+                <div className="rowName">{v.name}</div>
			
 
				+                <div className="rowImg" onClick={() => setInfo(v)}>
			
 
				+                  <img src={`${envUrl}/${v.id}-wenwu.png`} alt="" />
			
 
				+                </div>
			
 
				+                <div className="rowTxt">
			
 
				+                  <div className="rowTxtRow">年代：{v.age}</div>
			
 
				+                  <div className="rowTxtRow">类别：{v.sort}</div>
			
 
				+                  <div className="rowTxtRow">尺寸：{v.size}</div>
			
 
				+                  <div className="rowTxtRowZ">{v.intro}</div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          ))}
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      {/* 滚轮提示 */}
			
 
				+      {curTit ? (
			
 
				+        <div className="curTitBox" hidden={!!info.id}>
			
 
				+          <div className="curClose" onClick={() => setCurTit(false)}>
			
 
				+            <CloseOutlined />
			
 
				+          </div>
			
 
				+          <div className="curImg">
			
 
				+            <img src={curImg} alt="" style={{ opacity: curCut ? 1 : 0 }} />
			
 
				+            <img src={curAcImg} alt="" style={{ opacity: curCut ? 0 : 1 }} />
			
 
				+          </div>
			
 
				+          <p>鼠标滚轮可控制图片滚动</p>
			
 
				+        </div>
			
 
				+      ) : null}
			
 
				+
			
 
				+      {/* 查看文物详情 */}
			
 
				+      <GoodsInfo data={info} closePageFu={() => setInfo({} as GoodsType)} />
			
 
				     </div>
			
 
				-  )
			
 
				+  );
			
 
				 }
			
 
				 
			
 
				 const MemoA2_Goods = React.memo(A2_Goods);
			
--- a/pc/src/utils/data.ts
+++ b/pc/src/utils/data.ts
@@ -0,0 +1,191 @@
 
				+export type GoodsType = {
			
 
				+  id: number;
			
 
				+  name: string;
			
 
				+  age: string;
			
 
				+  sort: string;
			
 
				+  size: string;
			
 
				+  intro: string;
			
 
				+  link: string;
			
 
				+};
			
 
				+export const goodsArr = [
			
 
				+  {
			
 
				+    id: 1,
			
 
				+    name: "蒜头口铜壶",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高38×长23.3×宽23.3（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc1",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 2,
			
 
				+    name: "铜钲",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高6×长31.5×宽21（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc2",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 3,
			
 
				+    name: "提梁带盖铜鼎",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高20.5×长18×宽9.8（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc3",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 4,
			
 
				+    name: "铜甑",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高17×长16.5×宽16.5（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc4",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 5,
			
 
				+    name: "穿索钱串",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "暂无尺寸信息",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc5",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 6,
			
 
				+    name: "绿釉红胎陶壶",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高45×长19×宽27（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc6",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 7,
			
 
				+    name: "铜钫",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高43.5×长21.5×宽11.4（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc7",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 8,
			
 
				+    name: "双鱼纹铜洗",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高14.3×长30.3×宽30.3（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc8",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 9,
			
 
				+    name: "铜釜",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高13×长28×宽28（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc9",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 10,
			
 
				+    name: "单鱼纹铜洗",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高16.5×长34.5×宽34.5（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc10",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 11,
			
 
				+    name: "双耳铜壶",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高18.5×长10.1×宽10.1（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc11",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 12,
			
 
				+    name: "蒜头口铜扁壶",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高29×长36.5×宽6.3（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc12",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 13,
			
 
				+    name: "盘口折腹陶罐",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高16×长21×宽21（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc13",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 14,
			
 
				+    name: "陶博山炉盖",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高11×长14.3×宽14.3（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc14",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 15,
			
 
				+    name: "陶辟邪摇钱树座",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高39.5×长42×宽28.5（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc15",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 16,
			
 
				+    name: "陶厕模型",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高16.3×长30×宽21（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc16",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 17,
			
 
				+    name: "陶屋模型",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高34×长33×宽16.7（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc17",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 18,
			
 
				+    name: "蒜头口铜壶 · 短颈",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高15.9×长21×宽21（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc18",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 19,
			
 
				+    name: "提梁铜壶",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高27.5×长20.8×宽20.8（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc19",
			
 
				+  },
			
 
				+  {
			
 
				+    id: 20,
			
 
				+    name: "陶摇钱树座",
			
 
				+    age: "暂无年代信息",
			
 
				+    sort: "暂无类别信息",
			
 
				+    size: "高14.5×长15×宽6.6（厘米）",
			
 
				+    intro: "暂无简介",
			
 
				+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model2.html?m=wc20",
			
 
				+  },
			
 
				+];
			
--- a/pc/src/utils/history.ts
+++ b/pc/src/utils/history.ts
@@ -1,9 +1,9 @@
 
				 // createBrowserHistory 和 createHashHistory。
			
 
				 // 这里我们简单说一下 createBrowserHistory地址栏不带#； createHashHistory 带#
			
 
				 // 根据公司要求自己选择，createBrowserHistory在项目上线的时候需要服务器映射等处理。
			
 
				-import { createHashHistory  } from 'history'
			
 
				-const history = createHashHistory()
			
 
				-export default history
			
 
				+import { createHashHistory } from "history";
			
 
				+const history = createHashHistory();
			
 
				+export default history;
			
 
				 
			
 
				 export const urlParameter = (data: string) => {
			
 
				   if (data) {
			
@@ -19,4 +19,7 @@ export const urlParameter = (data: string) => {
 
				   } else return {};
			
 
				 };
			
 
				 
			
 
				-export const envUrl = window.location.origin
			
 
				+export const envUrl =
			
 
				+  process.env.NODE_ENV === "development"
			
 
				+    ? window.location.origin + "/goodsData/"
			
 
				+    : window.location.origin + "/gzswc/pc/goodsData/";