2 년 전 · 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/";