shaogen1995 2 năm trước cách đây
mục cha
commit
7b81fc82b8

+ 6 - 33
文物展示系统/vueapp/src/views/home.vue

@@ -99,33 +99,6 @@ let list = three.data.concat(
 
 console.log("result:", list);
 
-let timeRef = -1;
-
-const resizeFu = () => {
-  const width = window.innerWidth;
-  const height = window.innerHeight;
-  const dom = document.querySelector(".toHengBox");
-  if (width >= height) {
-    // 横屏
-    dom.style.opacity = 0;
-    dom.style.pointerEvents = "none";
-  } else {
-    // 竖屏
-    dom.style.opacity = 1;
-    dom.style.pointerEvents = "auto";
-  }
-};
-
-onMounted(() => {
-  resizeFu();
-  window.addEventListener("resize", () => {
-    clearTimeout(timeRef);
-    timeRef = window.setTimeout(() => {
-      resizeFu();
-    }, 500);
-  });
-});
-
 const isMouseDown = ref(false);
 const lastMoveEventTimeStamp = ref(0);
 const moveSpeed = ref(0);
@@ -434,10 +407,10 @@ onBeforeUnmount(() => {
   }
 }
 /*竖屏*/
-// @media screen and (orientation: portrait) {
-//   .toHengBox {
-//     opacity: 1;
-//     pointer-events: auto;
-//   }
-// }
+@media screen and (orientation: portrait) {
+  .toHengBox {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
 </style>

+ 392 - 6
重写子系统/package-lock.json

@@ -16,6 +16,7 @@
         "@types/react": "^18.0.24",
         "@types/react-dom": "^18.0.8",
         "antd": "^5.5.2",
+        "antd-mobile": "^5.30.0",
         "axios": "^1.1.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -2229,6 +2230,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.2.6.tgz",
+      "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.2.9.tgz",
+      "integrity": "sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.2.6"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.7",
       "resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -3176,6 +3190,69 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/@react-spring/animated": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmmirror.com/@react-spring/animated/-/animated-9.6.1.tgz",
+      "integrity": "sha512-ls/rJBrAqiAYozjLo5EPPLLOb1LM0lNVQcXODTC1SMtS6DbuBCPaKco5svFUQFMP2dso3O+qcC4k9FsKc0KxMQ==",
+      "dependencies": {
+        "@react-spring/shared": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmmirror.com/@react-spring/core/-/core-9.6.1.tgz",
+      "integrity": "sha512-3HAAinAyCPessyQNNXe5W0OHzRfa8Yo5P748paPcmMowZ/4sMfaZ2ZB6e5x5khQI8NusOHj8nquoutd6FRY5WQ==",
+      "dependencies": {
+        "@react-spring/animated": "~9.6.1",
+        "@react-spring/rafz": "~9.6.1",
+        "@react-spring/shared": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmmirror.com/@react-spring/rafz/-/rafz-9.6.1.tgz",
+      "integrity": "sha512-v6qbgNRpztJFFfSE3e2W1Uz+g8KnIBs6SmzCzcVVF61GdGfGOuBrbjIcp+nUz301awVmREKi4eMQb2Ab2gGgyQ=="
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmmirror.com/@react-spring/shared/-/shared-9.6.1.tgz",
+      "integrity": "sha512-PBFBXabxFEuF8enNLkVqMC9h5uLRBo6GQhRMQT/nRTnemVENimgRd+0ZT4yFnAQ0AxWNiJfX3qux+bW2LbG6Bw==",
+      "dependencies": {
+        "@react-spring/rafz": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmmirror.com/@react-spring/types/-/types-9.6.1.tgz",
+      "integrity": "sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q=="
+    },
+    "node_modules/@react-spring/web": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmmirror.com/@react-spring/web/-/web-9.6.1.tgz",
+      "integrity": "sha512-X2zR6q2Z+FjsWfGAmAXlQaoUHbPmfuCaXpuM6TcwXPpLE1ZD4A1eys/wpXboFQmDkjnrlTmKvpVna1MjWpZ5Hw==",
+      "dependencies": {
+        "@react-spring/animated": "~9.6.1",
+        "@react-spring/core": "~9.6.1",
+        "@react-spring/shared": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmmirror.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3847,6 +3924,11 @@
         "pretty-format": "^27.0.0"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmmirror.com/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -4220,6 +4302,22 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@use-gesture/core": {
+      "version": "10.2.20",
+      "resolved": "https://registry.npmmirror.com/@use-gesture/core/-/core-10.2.20.tgz",
+      "integrity": "sha512-4lFhHc8so4yIHkBEs641DnEsBxPyhJ5GEjB4PURFDH4p/FcZriH6w99knZgI63zN/MBFfylMyb8+PDuj6RIXKQ=="
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.2.20",
+      "resolved": "https://registry.npmmirror.com/@use-gesture/react/-/react-10.2.20.tgz",
+      "integrity": "sha512-KnJq9ZSqprWA6uNhWTUHZqTCh+rfa0j8ehTzqeBhktUPrmTj7yVOBvEQ/vSFU/7d72cGgWSsJ0f5T6GQCHXnvg==",
+      "dependencies": {
+        "@use-gesture/core": "10.2.20"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -4485,6 +4583,34 @@
         "node": ">= 6.0.0"
       }
     },
+    "node_modules/ahooks": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmmirror.com/ahooks/-/ahooks-3.7.7.tgz",
+      "integrity": "sha512-5e5WlPq81Y84UnTLOKIQeq2cJw4aa7yj8fR2Nb/oMmXPrWMjIMCbPS1o+fpxSfCaNA3AzOnnMc8AehWRZltkJQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@types/js-cookie": "^2.x.x",
+        "ahooks-v3-count": "^1.0.0",
+        "dayjs": "^1.9.1",
+        "intersection-observer": "^0.12.0",
+        "js-cookie": "^2.x.x",
+        "lodash": "^4.17.21",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.0.0",
+        "tslib": "^2.4.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/ahooks-v3-count": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz",
+      "integrity": "sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ=="
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
@@ -4636,6 +4762,65 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/antd-mobile": {
+      "version": "5.30.0",
+      "resolved": "https://registry.npmmirror.com/antd-mobile/-/antd-mobile-5.30.0.tgz",
+      "integrity": "sha512-M42VrDvFNzTr1OovLa9HezkD2oXmkDERolha9292FNNTvF1QikIcLZA/o1PDP9+0oWvuz59PW1ZfhjTNx6rUyg==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.2.6",
+        "@rc-component/mini-decimal": "^1.0.1",
+        "@react-spring/web": "~9.6.1",
+        "@use-gesture/react": "10.2.20",
+        "ahooks": "^3.7.6",
+        "antd-mobile-icons": "^0.3.0",
+        "antd-mobile-v5-count": "^1.0.1",
+        "classnames": "^2.3.2",
+        "dayjs": "^1.11.7",
+        "lodash": "^4.17.21",
+        "rc-field-form": "~1.27.4",
+        "rc-util": "^5.30.0",
+        "react-is": "^18.2.0",
+        "runes2": "^1.1.2",
+        "staged-components": "^1.1.3",
+        "tslib": "^2.5.0",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/antd-mobile-icons": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/antd-mobile-icons/-/antd-mobile-icons-0.3.0.tgz",
+      "integrity": "sha512-rqINQpJWZWrva9moCd1Ye695MZYWmqLPE+bY8d2xLRy7iSQwPsinCdZYjpUPp2zL/LnKYSyXxP2ut2A+DC+whQ=="
+    },
+    "node_modules/antd-mobile-v5-count": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/antd-mobile-v5-count/-/antd-mobile-v5-count-1.0.1.tgz",
+      "integrity": "sha512-YGsiEDCPUDz3SzfXi6gLZn/HpeSMW+jgPc4qiYUr1fSopg3hkUie2TnooJdExgfiETHefH3Ggs58He0OVfegLA=="
+    },
+    "node_modules/antd-mobile/node_modules/rc-field-form": {
+      "version": "1.27.4",
+      "resolved": "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.27.4.tgz",
+      "integrity": "sha512-PQColQnZimGKArnOh8V2907+VzDCXcqtFvHgevDLtqWc/P7YASb/FqntSmdS8q3VND5SHX3Y1vgMIzY22/f/0Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "async-validator": "^4.1.0",
+        "rc-util": "^5.8.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/antd-mobile/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.2.tgz",
@@ -10852,6 +11037,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "node_modules/js-sdsl": {
       "version": "4.1.5",
       "resolved": "https://registry.npmmirror.com/js-sdsl/-/js-sdsl-4.1.5.tgz",
@@ -14691,6 +14881,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/runes2": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/runes2/-/runes2-1.1.2.tgz",
+      "integrity": "sha512-v6XIdRpUKdFLNhgF2AC9XvntZsDzxyTpVlpQ8HD592XD6vHiW8jEcHFnTV5ztUjWJC5cGOcdi9YKIwxWVh0f9w=="
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -14802,6 +14997,14 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/scroll-into-view-if-needed": {
       "version": "3.0.10",
       "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.0.10.tgz",
@@ -15162,6 +15365,14 @@
       "resolved": "https://registry.npmmirror.com/stackframe/-/stackframe-1.3.4.tgz",
       "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
     },
+    "node_modules/staged-components": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/staged-components/-/staged-components-1.1.3.tgz",
+      "integrity": "sha512-9EIswzDqjwlEu+ymkV09TTlJfzSbKgEnNteUnZSTxkpMgr5Wx2CzzA9WcMFWBNCldqVPsHVnRGGrApduq2Se5A==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/statuses/-/statuses-2.0.1.tgz",
@@ -15786,9 +15997,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "version": "2.5.3",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.5.3.tgz",
+      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -18440,6 +18651,19 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.2.6.tgz",
+      "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg=="
+    },
+    "@floating-ui/dom": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.2.9.tgz",
+      "integrity": "sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ==",
+      "requires": {
+        "@floating-ui/core": "^1.2.6"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.7",
       "resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -19143,6 +19367,56 @@
         "rc-util": "^5.33.0"
       }
     },
+    "@react-spring/animated": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmmirror.com/@react-spring/animated/-/animated-9.6.1.tgz",
+      "integrity": "sha512-ls/rJBrAqiAYozjLo5EPPLLOb1LM0lNVQcXODTC1SMtS6DbuBCPaKco5svFUQFMP2dso3O+qcC4k9FsKc0KxMQ==",
+      "requires": {
+        "@react-spring/shared": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      }
+    },
+    "@react-spring/core": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmmirror.com/@react-spring/core/-/core-9.6.1.tgz",
+      "integrity": "sha512-3HAAinAyCPessyQNNXe5W0OHzRfa8Yo5P748paPcmMowZ/4sMfaZ2ZB6e5x5khQI8NusOHj8nquoutd6FRY5WQ==",
+      "requires": {
+        "@react-spring/animated": "~9.6.1",
+        "@react-spring/rafz": "~9.6.1",
+        "@react-spring/shared": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      }
+    },
+    "@react-spring/rafz": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmmirror.com/@react-spring/rafz/-/rafz-9.6.1.tgz",
+      "integrity": "sha512-v6qbgNRpztJFFfSE3e2W1Uz+g8KnIBs6SmzCzcVVF61GdGfGOuBrbjIcp+nUz301awVmREKi4eMQb2Ab2gGgyQ=="
+    },
+    "@react-spring/shared": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmmirror.com/@react-spring/shared/-/shared-9.6.1.tgz",
+      "integrity": "sha512-PBFBXabxFEuF8enNLkVqMC9h5uLRBo6GQhRMQT/nRTnemVENimgRd+0ZT4yFnAQ0AxWNiJfX3qux+bW2LbG6Bw==",
+      "requires": {
+        "@react-spring/rafz": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      }
+    },
+    "@react-spring/types": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmmirror.com/@react-spring/types/-/types-9.6.1.tgz",
+      "integrity": "sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q=="
+    },
+    "@react-spring/web": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmmirror.com/@react-spring/web/-/web-9.6.1.tgz",
+      "integrity": "sha512-X2zR6q2Z+FjsWfGAmAXlQaoUHbPmfuCaXpuM6TcwXPpLE1ZD4A1eys/wpXboFQmDkjnrlTmKvpVna1MjWpZ5Hw==",
+      "requires": {
+        "@react-spring/animated": "~9.6.1",
+        "@react-spring/core": "~9.6.1",
+        "@react-spring/shared": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmmirror.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -19691,6 +19965,11 @@
         "pretty-format": "^27.0.0"
       }
     },
+    "@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmmirror.com/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+    },
     "@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -20001,6 +20280,19 @@
         "eslint-visitor-keys": "^3.3.0"
       }
     },
+    "@use-gesture/core": {
+      "version": "10.2.20",
+      "resolved": "https://registry.npmmirror.com/@use-gesture/core/-/core-10.2.20.tgz",
+      "integrity": "sha512-4lFhHc8so4yIHkBEs641DnEsBxPyhJ5GEjB4PURFDH4p/FcZriH6w99knZgI63zN/MBFfylMyb8+PDuj6RIXKQ=="
+    },
+    "@use-gesture/react": {
+      "version": "10.2.20",
+      "resolved": "https://registry.npmmirror.com/@use-gesture/react/-/react-10.2.20.tgz",
+      "integrity": "sha512-KnJq9ZSqprWA6uNhWTUHZqTCh+rfa0j8ehTzqeBhktUPrmTj7yVOBvEQ/vSFU/7d72cGgWSsJ0f5T6GQCHXnvg==",
+      "requires": {
+        "@use-gesture/core": "10.2.20"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -20233,6 +20525,28 @@
         "debug": "4"
       }
     },
+    "ahooks": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmmirror.com/ahooks/-/ahooks-3.7.7.tgz",
+      "integrity": "sha512-5e5WlPq81Y84UnTLOKIQeq2cJw4aa7yj8fR2Nb/oMmXPrWMjIMCbPS1o+fpxSfCaNA3AzOnnMc8AehWRZltkJQ==",
+      "requires": {
+        "@babel/runtime": "^7.21.0",
+        "@types/js-cookie": "^2.x.x",
+        "ahooks-v3-count": "^1.0.0",
+        "dayjs": "^1.9.1",
+        "intersection-observer": "^0.12.0",
+        "js-cookie": "^2.x.x",
+        "lodash": "^4.17.21",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.0.0",
+        "tslib": "^2.4.1"
+      }
+    },
+    "ahooks-v3-count": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz",
+      "integrity": "sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ=="
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
@@ -20357,6 +20671,57 @@
         "throttle-debounce": "^5.0.0"
       }
     },
+    "antd-mobile": {
+      "version": "5.30.0",
+      "resolved": "https://registry.npmmirror.com/antd-mobile/-/antd-mobile-5.30.0.tgz",
+      "integrity": "sha512-M42VrDvFNzTr1OovLa9HezkD2oXmkDERolha9292FNNTvF1QikIcLZA/o1PDP9+0oWvuz59PW1ZfhjTNx6rUyg==",
+      "requires": {
+        "@floating-ui/dom": "^1.2.6",
+        "@rc-component/mini-decimal": "^1.0.1",
+        "@react-spring/web": "~9.6.1",
+        "@use-gesture/react": "10.2.20",
+        "ahooks": "^3.7.6",
+        "antd-mobile-icons": "^0.3.0",
+        "antd-mobile-v5-count": "^1.0.1",
+        "classnames": "^2.3.2",
+        "dayjs": "^1.11.7",
+        "lodash": "^4.17.21",
+        "rc-field-form": "~1.27.4",
+        "rc-util": "^5.30.0",
+        "react-is": "^18.2.0",
+        "runes2": "^1.1.2",
+        "staged-components": "^1.1.3",
+        "tslib": "^2.5.0",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "dependencies": {
+        "rc-field-form": {
+          "version": "1.27.4",
+          "resolved": "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.27.4.tgz",
+          "integrity": "sha512-PQColQnZimGKArnOh8V2907+VzDCXcqtFvHgevDLtqWc/P7YASb/FqntSmdS8q3VND5SHX3Y1vgMIzY22/f/0Q==",
+          "requires": {
+            "@babel/runtime": "^7.18.0",
+            "async-validator": "^4.1.0",
+            "rc-util": "^5.8.0"
+          }
+        },
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmmirror.com/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
+    "antd-mobile-icons": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/antd-mobile-icons/-/antd-mobile-icons-0.3.0.tgz",
+      "integrity": "sha512-rqINQpJWZWrva9moCd1Ye695MZYWmqLPE+bY8d2xLRy7iSQwPsinCdZYjpUPp2zL/LnKYSyXxP2ut2A+DC+whQ=="
+    },
+    "antd-mobile-v5-count": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/antd-mobile-v5-count/-/antd-mobile-v5-count-1.0.1.tgz",
+      "integrity": "sha512-YGsiEDCPUDz3SzfXi6gLZn/HpeSMW+jgPc4qiYUr1fSopg3hkUie2TnooJdExgfiETHefH3Ggs58He0OVfegLA=="
+    },
     "anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.2.tgz",
@@ -25235,6 +25600,11 @@
         }
       }
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-sdsl": {
       "version": "4.1.5",
       "resolved": "https://registry.npmmirror.com/js-sdsl/-/js-sdsl-4.1.5.tgz",
@@ -27985,6 +28355,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "runes2": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/runes2/-/runes2-1.1.2.tgz",
+      "integrity": "sha512-v6XIdRpUKdFLNhgF2AC9XvntZsDzxyTpVlpQ8HD592XD6vHiW8jEcHFnTV5ztUjWJC5cGOcdi9YKIwxWVh0f9w=="
+    },
     "safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -28060,6 +28435,11 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="
+    },
     "scroll-into-view-if-needed": {
       "version": "3.0.10",
       "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.0.10.tgz",
@@ -28369,6 +28749,12 @@
       "resolved": "https://registry.npmmirror.com/stackframe/-/stackframe-1.3.4.tgz",
       "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
     },
+    "staged-components": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/staged-components/-/staged-components-1.1.3.tgz",
+      "integrity": "sha512-9EIswzDqjwlEu+ymkV09TTlJfzSbKgEnNteUnZSTxkpMgr5Wx2CzzA9WcMFWBNCldqVPsHVnRGGrApduq2Se5A==",
+      "requires": {}
+    },
     "statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/statuses/-/statuses-2.0.1.tgz",
@@ -28867,9 +29253,9 @@
       }
     },
     "tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "version": "2.5.3",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.5.3.tgz",
+      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
     },
     "tsutils": {
       "version": "3.21.0",

+ 1 - 0
重写子系统/package.json

@@ -11,6 +11,7 @@
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "antd": "^5.5.2",
+    "antd-mobile": "^5.30.0",
     "axios": "^1.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

+ 0 - 17
重写子系统/public/index.html

@@ -25,23 +25,6 @@
   <title>乐山大佛文物子系统</title>
 </head>
 
-<script>
-  // 移动端和pc端的切换
-  if (
-    window.navigator.userAgent.match(
-      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
-    )
-  ) {
-    // 移动端
-    if (window.location.href.includes("web")) {
-      window.location.href = window.location.href.replace("web", "webM");
-      setTimeout(() => {
-        location.reload(true);
-      }, 200);
-    }
-  }
-</script>
-
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>

+ 64 - 0
重写子系统/src/AppM.tsx

@@ -0,0 +1,64 @@
+import "@/assets/styles/base.css";
+
+import React, { useEffect, useRef, useState } from "react";
+import SpinLoding from "./components/SpinLoding";
+import AsyncSpinLoding from "./components/AsyncSpinLoding";
+import { Router, Route, Switch } from "react-router-dom";
+import history from "./utils/history";
+import landtipImg from "@/assets/img/M/landtip.png";
+
+// 使用 React.lazy 懒加载页面
+const A1HomeM = React.lazy(() => import("./pages/A1HomeM"));
+const A2GoodsM = React.lazy(() => import("./pages/A2GoodsM"));
+
+const NotFound = React.lazy(() => import("@/components/NotFound"));
+
+function App() {
+  const timeRef = useRef(-1);
+
+  // 屏幕高度
+  const [scrH, setScrH] = useState(window.innerHeight);
+
+  useEffect(() => {
+    window.addEventListener(
+      "resize",
+      () => {
+        clearTimeout(timeRef.current);
+        timeRef.current = window.setTimeout(() => {
+          setScrH(window.innerHeight);
+        }, 500);
+      },
+      true
+    );
+  }, []);
+  return (
+    <div id="appM" style={{ height: scrH }}>
+      {/* 关于路由 */}
+      <Router history={history}>
+        <React.Suspense fallback={<SpinLoding />}>
+          <Switch>
+            {/* 封面页 */}
+            <Route path="/" exact component={A1HomeM} />
+            <Route path="/goods" component={A2GoodsM} />
+
+            {/* 找不到页面 */}
+            <Route path="*" component={NotFound} />
+          </Switch>
+        </React.Suspense>
+      </Router>
+
+      {/* 发送请求的加载组件 */}
+      <AsyncSpinLoding />
+
+      {/* 竖屏浏览 */}
+      <div className="SscrHBox">
+        <img src={landtipImg} alt="" />
+        <p>请竖屏浏览</p>
+      </div>
+    </div>
+  );
+}
+
+const MemoApp = React.memo(App);
+
+export default MemoApp;

BIN
重写子系统/src/assets/img/M/bac.jpg


BIN
重写子系统/src/assets/img/M/back.png


BIN
重写子系统/src/assets/img/M/home.png


BIN
重写子系统/src/assets/img/M/landtip.png


+ 49 - 7
重写子系统/src/assets/styles/base.css

@@ -61,12 +61,8 @@ textarea {
   transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 #root {
-  width: 100vw;
-  height: 100vh;
-  min-width: 1600px;
-  min-height: 900px;
-  overflow: auto;
-  overflow-y: overlay;
+  width: 100%;
+  height: 100%;
 }
 #root a {
   color: var(--themeColor);
@@ -74,12 +70,58 @@ textarea {
 #root #app {
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  min-width: 1600px;
+  min-height: 900px;
+  overflow: auto;
+}
+#root #app > .ant-image {
+  display: none;
 }
 #root #app > div {
   width: 100%;
   height: 100%;
 }
+#root #appM {
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+#root #appM .SscrHBox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  opacity: 0;
+  transition: all 0.2s;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+#root #appM .SscrHBox > img {
+  max-width: 80%;
+  max-height: 80%;
+}
+#root #appM .SscrHBox > p {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #fff;
+}
+@media screen and (orientation: landscape) {
+  #root #appM .SscrHBox {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+#root #appM > div {
+  width: 100%;
+  height: 100%;
+}
 #root .myscroll::-webkit-scrollbar {
   /*滚动条整体样式*/
   width: 3px;

+ 63 - 10
重写子系统/src/assets/styles/base.less

@@ -78,12 +78,8 @@ textarea {
 
 // 重置antd样式
 #root {
-  width: 100vw;
-  height: 100vh;
-  min-width: 1600px;
-  min-height: 900px;
-  overflow: auto;
-  overflow-y: overlay;
+  width: 100%;
+  height: 100%;
 
   a {
     color: var(--themeColor);
@@ -92,7 +88,63 @@ textarea {
   #app {
     width: 100%;
     height: 100%;
-    overflow: hidden;
+    min-width: 1600px;
+    min-height: 900px;
+    overflow: auto;
+
+    &>.ant-image {
+      display: none;
+    }
+
+    &>div {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  #appM {
+    width: 100%;
+    // height: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+    position: relative;
+
+    // 请竖屏浏览
+    .SscrHBox {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 9999;
+      opacity: 0;
+      transition: all .2s;
+      pointer-events: none;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background-color: rgba(0, 0, 0, .6);
+
+      &>img {
+        max-width: 80%;
+        max-height: 80%;
+      }
+
+      &>p {
+        margin-top: 10px;
+        font-size: 14px;
+        color: #fff;
+      }
+    }
+
+    @media screen and (orientation: landscape) {
+      .SscrHBox {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+
 
     &>div {
       width: 100%;
@@ -145,9 +197,10 @@ body {
     }
   }
 
-    .rc-virtual-list-scrollbar{
-      width: 4px !important;
-    }
+  .rc-virtual-list-scrollbar {
+    width: 4px !important;
+  }
+
   .rc-virtual-list-scrollbar-thumb {
     background-color: #D3B453 !important;
   }

+ 5 - 1
重写子系统/src/index.tsx

@@ -13,11 +13,15 @@ import {
 
 import "dayjs/locale/zh-cn";
 import locale from "antd/locale/zh_CN";
+import { isMobiileFu } from "./utils/tool";
+import AppM from "./AppM";
 
 const container = document.getElementById("root") as HTMLElement;
 
 const root = createRoot(container);
 
+// console.log("----", isMobiileFu());
+
 root.render(
   <ConfigProvider
     locale={locale}
@@ -32,7 +36,7 @@ root.render(
         hashPriority="high"
         transformers={[legacyLogicalPropertiesTransformer]}
       >
-        <App />
+        {isMobiileFu() ? <AppM /> : <App />}
       </StyleProvider>
     </Provider>
   </ConfigProvider>

+ 136 - 0
重写子系统/src/pages/A1HomeM/index.module.scss

@@ -0,0 +1,136 @@
+.A1HomeM {
+  background-image: url('../../assets/img/M/bac.jpg');
+  background-size: 100% 100%;
+  position: relative;
+
+  :global {
+    .homeTop {
+      width: 100%;
+      height: 120px;
+      background-color: var(--themeColor);
+      border-radius: 0 0 10px 10px;
+      padding: 20px;
+
+      .searchBox {
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: space-between;
+
+        .ant-input-affix-wrapper {
+          width: calc(100% - 90px);
+          border-radius: 16px;
+
+          input::-webkit-input-placeholder {
+            /* WebKit browsers */
+            color: #666666;
+          }
+
+          input:-moz-placeholder {
+            /* Mozilla Firefox 4 to 18 */
+            color: #666666;
+          }
+
+          input::-moz-placeholder {
+            /* Mozilla Firefox 19+ */
+            color: #666666;
+          }
+
+          input:-ms-input-placeholder {
+            /* Internet Explorer 10+ */
+            color: #666666;
+          }
+        }
+
+        .rBtn {
+          height: 32px;
+          line-height: 30px;
+          padding: 0 15px;
+          border-radius: 16px;
+          border: 1px solid #fff;
+          color: #fff;
+        }
+      }
+
+      .selectBox {
+        display: flex;
+        justify-content: space-between;
+
+        &>div {
+          width: 46%;
+        }
+      }
+    }
+
+    .noInfo {
+      width: 100%;
+      height: calc(100% - 120px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--themeColor);
+      font-size: 20px;
+
+    }
+
+    .homeMain {
+      margin-top: 30px;
+      width: 100%;
+      height: calc(100% - 180px);
+      overflow-y: auto;
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0px 20px 0;
+      position: relative;
+
+      .homeRow {
+        width: 48%;
+        margin-right: 4%;
+        margin-bottom: 4%;
+        height: 200px;
+        border-radius: 6px;
+        overflow: hidden;
+        content-visibility: auto;
+        contain-intrinsic-size: 48% 200px;
+
+        .adm-image {
+          width: 100%;
+          height: 166px;
+
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover !important;
+          }
+        }
+
+        .txt {
+          height: 34px;
+          line-height: 34px;
+          background-color: #fff;
+          padding: 0 6px;
+          color: #666666;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+        }
+
+        &:nth-of-type(2n) {
+          margin-right: 0;
+        }
+      }
+
+      .allInfoTxt {
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        font-size: 12px;
+        color: #666;
+      }
+
+    }
+
+
+  }
+}

+ 181 - 0
重写子系统/src/pages/A1HomeM/index.tsx

@@ -0,0 +1,181 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import styles from "./index.module.scss";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/store";
+import { A1_APIgetList_M, A1_APIgetSelect } from "@/store/action/A1Home";
+import { Input, Select } from "antd";
+import { SearchOutlined } from "@ant-design/icons";
+import { Image } from "antd-mobile";
+import { baseURL } from "@/utils/http";
+import imgLoding from "@/assets/img/loading.webp";
+import imgErr from "@/assets/img/IMGerror.jpg";
+import A2GoodsM from "../A2GoodsM";
+
+function A1HomeM() {
+  const dispatch = useDispatch();
+  // 从仓库获取下拉列表信息
+  const { list, select, total } = useSelector(
+    (state: RootState) => state.A1Home
+  );
+  // 发送请求的对象信息
+  const [fromObj, setFromObj] = useState({
+    dictGoodsType: "",
+    dictAge: "",
+    searchKey: "",
+    pageNum: 1,
+    pageSize: 10,
+  });
+
+  const flagRef = useRef(false);
+
+  useEffect(() => {
+    if (!flagRef.current) {
+      const dom = myScroBox.current;
+      if (dom) dom.scrollTop = 0;
+    }
+    dispatch(A1_APIgetList_M(fromObj, flagRef.current));
+  }, [dispatch, fromObj]);
+
+  useEffect(() => {
+    dispatch(A1_APIgetSelect());
+  }, [dispatch]);
+
+  // 输入框
+  const nameTime = useRef(-1);
+  const nameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      clearTimeout(nameTime.current);
+      nameTime.current = window.setTimeout(() => {
+        setFromObj({
+          ...fromObj,
+          searchKey: e.target.value,
+          pageNum: 1,
+        });
+      }, 500);
+    },
+    [fromObj]
+  );
+
+  // 点击重置
+  const [inputKey, setInputKey] = useState(1);
+  const resetSelectFu = useCallback(() => {
+    // 把2个输入框和时间选择器清空
+    setInputKey(Date.now());
+    setFromObj({
+      dictGoodsType: "",
+      dictAge: "",
+      searchKey: "",
+      pageNum: 1,
+      pageSize: 10,
+    });
+  }, []);
+
+  // 监听是否滑倒底部
+  const myScroBox = useRef<HTMLDivElement>(null);
+
+  const scrollFu = useCallback(async () => {
+    const dom = myScroBox.current;
+    if (dom) {
+      const clientHeight = dom.clientHeight;
+      const scrollTop = dom.scrollTop;
+      const scrollHeight = dom.scrollHeight;
+      if (clientHeight + scrollTop === scrollHeight) {
+        console.log("竖向滚动条已经滚动到底部");
+        if (total > list.length) {
+          if (!flagRef.current) {
+            flagRef.current = true;
+            setFromObj({ ...fromObj, pageNum: fromObj.pageNum + 1 });
+            setTimeout(() => {
+              flagRef.current = false;
+            }, 300);
+          }
+        }
+      }
+    }
+  }, [fromObj, list.length, total]);
+
+  useEffect(() => {
+    const dom = myScroBox.current;
+    if (dom) {
+      dom.addEventListener("scroll", scrollFu, true);
+    }
+    return () => {
+      dom?.removeEventListener("scroll", scrollFu, true);
+    };
+  }, [scrollFu]);
+
+  // 藏品详情id
+  const [goodsId, setGoodsId] = useState(0);
+
+  return (
+    <div className={styles.A1HomeM}>
+      <div className="homeTop">
+        {/* 输入框 */}
+        <div className="searchBox">
+          <Input
+            key={inputKey}
+            placeholder="请输入文物标题"
+            prefix={<SearchOutlined rev={undefined} />}
+            maxLength={25}
+            onChange={(e) => nameChange(e)}
+          />
+          <div className="rBtn" onClick={resetSelectFu}>
+            重置
+          </div>
+        </div>
+        {/* 下拉框 */}
+        <div className="selectBox">
+          <Select
+            onChange={(val) =>
+              setFromObj({ ...fromObj, dictGoodsType: val, pageNum: 1 })
+            }
+            value={fromObj.dictGoodsType}
+            options={select["type"]}
+          />
+          <Select
+            onChange={(val) =>
+              setFromObj({ ...fromObj, dictAge: val, pageNum: 1 })
+            }
+            value={fromObj.dictAge}
+            options={select["age"]}
+          />
+        </div>
+      </div>
+      {/* 主体 */}
+      {list.length <= 0 ? (
+        <div className="noInfo">暂无信息</div>
+      ) : (
+        <div className="homeMain myscroll" ref={myScroBox}>
+          {list.map((v) => (
+            <div
+              className="homeRow"
+              key={v.id}
+              onClick={() => setGoodsId(v.id)}
+            >
+              <Image
+                lazy
+                src={baseURL + v.thumb}
+                placeholder={<img src={imgLoding} alt="" />}
+                fallback={<img src={imgErr} alt="" />}
+              />
+              <div className="txt">{v.name}</div>
+            </div>
+          ))}
+          {/* 到底了 */}
+          {total === list.length ? (
+            <div className="allInfoTxt">没有更多了...</div>
+          ) : null}
+        </div>
+      )}
+
+      {/* 文物详情页 */}
+      {goodsId ? (
+        <A2GoodsM id={goodsId} closePageFu={() => setGoodsId(0)} />
+      ) : null}
+    </div>
+  );
+}
+
+const MemoA1HomeM = React.memo(A1HomeM);
+
+export default MemoA1HomeM;

+ 2 - 0
重写子系统/src/pages/A2Goods/index.module.scss

@@ -134,6 +134,8 @@
               position: relative;
 
               video {
+                width: 100%;
+                height: 100%;
                 position: absolute;
                 top: 50%;
                 left: 50%;

+ 3 - 7
重写子系统/src/pages/A2Goods/index.tsx

@@ -17,9 +17,9 @@ import musicImgX from "@/assets/img/icon-musicX.png";
 import { baseURL } from "@/utils/http";
 import classNames from "classnames";
 import { LeftOutlined, RightOutlined } from "@ant-design/icons";
-import MemoImageLazy from "@/components/ImageLazy";
 import { urlParameter } from "@/utils/history";
 import { useLocation } from "react-router-dom";
+import ImageLazy from "@/components/ImageLazy";
 
 type Props = {
   id?: number;
@@ -262,11 +262,7 @@ function A2Goods({ id, closePageFu }: Props) {
                     </div>
                   ) : v.type === "img" ? (
                     <div className="imgBox">
-                      <MemoImageLazy
-                        src={v.filePath}
-                        width="100%"
-                        height="100%"
-                      />
+                      <ImageLazy src={v.filePath} width="100%" height="100%" />
                     </div>
                   ) : v.type === "video" && myInd === i ? (
                     <div className="videoBox">
@@ -295,7 +291,7 @@ function A2Goods({ id, closePageFu }: Props) {
                 {info.sizeSpecific}
               </div>
               <div className="ttTop2">
-                {info.description ? info.description : "暂无说明"}
+                {info.description ? "来源:" + info.description : null}
               </div>
             </div>
             {/* 分享,声音按钮 */}

+ 210 - 0
重写子系统/src/pages/A2GoodsM/index.module.scss

@@ -0,0 +1,210 @@
+.A2GoodsM {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-image: url('../../assets/img/M/bac.jpg');
+  background-size: 100% 100%;
+
+  :global {
+    .back {
+      position: absolute;
+      z-index: 99;
+      top: 10px;
+      left: 18px;
+      width: 34px;
+      height: 34px;
+
+      &>img {
+        width: 34px;
+      }
+    }
+
+    .audioIcon {
+      z-index: 99;
+      position: absolute;
+      top: 10px;
+      right: 18px;
+      width: 34px;
+      height: 34px;
+
+      &>img {
+        width: 34px;
+      }
+    }
+
+    .noFileInfo {
+      width: 100%;
+      height: 66%;
+      background-image: linear-gradient(#75736E, #BCBBB8);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 20px;
+      color: #fff;
+    }
+
+    .topMain {
+      width: 100%;
+      height: 66%;
+      background-image: linear-gradient(#75736E, #BCBBB8);
+      position: relative;
+
+      .flooRow {
+        position: absolute;
+        z-index: 99;
+        bottom: 20px;
+        left: 0;
+        width: 100%;
+        justify-content: center;
+        display: flex;
+
+        .row {
+          cursor: pointer;
+          padding: 0 20px;
+          height: 30px;
+          line-height: 28px;
+          border-radius: 15px;
+          border: 1px solid var(--themeColor);
+          color: var(--themeColor);
+          font-size: 12px;
+          background-color: #fff;
+          margin-right: 14px;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+
+        .active {
+          background-color: var(--themeColor);
+          color: #fff;
+          pointer-events: none;
+        }
+      }
+
+      // 左右按钮
+      .iconBtn {
+        position: absolute;
+        z-index: 99;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 14px;
+        width: 34px;
+        height: 34px;
+        cursor: pointer;
+        background-color: var(--themeColor);
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 20px;
+        color: #fff;
+      }
+
+      .R_right {
+        left: auto;
+        right: 14px;
+      }
+
+      .R_arrowNo {
+        opacity: .4;
+        cursor: default;
+      }
+
+      .conMain {
+        opacity: 0;
+        pointer-events: none;
+        transition: all .3s;
+        position: absolute;
+        z-index: 20;
+        width: 100%;
+        height: 100%;
+
+        &>div {
+          width: 100%;
+          height: 100%;
+        }
+
+        .modelBox {
+          iframe {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .imgBox {
+          .adm-image {
+            width: 100%;
+            height: 100%;
+
+            img {
+              object-fit: contain !important;
+            }
+          }
+        }
+
+        .videoBox {
+          position: relative;
+
+          video {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            max-width: 100%;
+            max-height: calc(100% - 140px);
+          }
+        }
+      }
+
+      .conMainAc {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+    }
+
+    .flooMain {
+      margin-top: 20px;
+      width: 100%;
+      height: calc(34% - 40px);
+      overflow-y: auto;
+      padding: 0 15px;
+      position: relative;
+
+      &>h3 {
+        font-size: 22px;
+        font-weight: 700;
+        color: var(--themeColor);
+        margin-bottom: 10px;
+        padding-right: 40px;
+      }
+
+      .ttTop {
+        font-size: 16px;
+        margin-bottom: 4px;
+      }
+
+      .ttTop2 {
+        margin-top: 10px;
+      }
+
+      .shareBox {
+        position: absolute;
+        right: 18px;
+        top: 0;
+        width: 34px;
+        height: 34px;
+
+        &>img {
+          width: 34px;
+        }
+      }
+    }
+  }
+}

+ 316 - 0
重写子系统/src/pages/A2GoodsM/index.tsx

@@ -0,0 +1,316 @@
+/* eslint-disable jsx-a11y/iframe-has-title */
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import styles from "./index.module.scss";
+import history, { urlParameter } from "@/utils/history";
+import { useLocation } from "react-router-dom";
+import { A1_itemType, A2_TabType, A2_fileObjType, A2_fileType } from "@/types";
+import { A2_APIgetInfo } from "@/store/action/A1Home";
+import classNames from "classnames";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import { Image, ImageViewer } from "antd-mobile";
+import { baseURL } from "@/utils/http";
+import imgLoding from "@/assets/img/loading.webp";
+import imgErr from "@/assets/img/IMGerror.jpg";
+import shareImg from "@/assets/img/icon-share.png";
+import musicImg from "@/assets/img/icon-music.png";
+import musicImgX from "@/assets/img/icon-musicX.png";
+import toBackImg from "@/assets/img/M/back.png";
+import toHomeImg from "@/assets/img/M/home.png";
+
+type Props = {
+  id?: number;
+  closePageFu?: () => void;
+};
+
+function A2GoodsM({ id, closePageFu }: Props) {
+  // 从分享链接进来的id
+  const uidRef = useRef("");
+
+  // 获取地址栏参数
+  const location = useLocation();
+  // 底部 tab
+  const botTabTemp = useMemo(() => {
+    const arr: A2_TabType = [
+      { id: 1, type: "model", name: "模型", show: false },
+      { id: 2, type: "img", name: "图片", show: false },
+      { id: 3, type: "video", name: "视频", show: false },
+    ];
+    return arr;
+  }, []);
+  const [botTab, setBotTab] = useState(botTabTemp.filter((v) => v.show));
+
+  // 是否有上传音频
+  const [audioSrc, setAudioSrc] = useState("");
+  // 音频的播放和暂停
+  const [audioSta, setAudioSta] = useState(false);
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  useEffect(() => {
+    const dom = audioRef.current;
+    if (dom) {
+      if (audioSta) {
+        setAudioSta(true);
+        dom.play();
+        dom.onended = () => {
+          // 音频播放结束
+          setAudioSta(false);
+        };
+      } else {
+        setAudioSta(false);
+        dom.pause();
+      }
+    }
+  }, [audioSta]);
+
+  const getInfoFu = useCallback(
+    async (id: number) => {
+      const res = await A2_APIgetInfo(id);
+      if (res.code === 0) {
+        setInfo(res.data.entity);
+        // 处理附件信息
+
+        const tempArr = res.data.file || [];
+        const delAudioArr = tempArr.filter((v: any) => v.type !== "audio");
+
+        if (delAudioArr.length === 0) setNoFile(true);
+
+        const fileArr: A2_fileType[] = res.data.file || [];
+        const obj = {
+          model: [],
+          img: [],
+          video: [],
+          audio: [],
+        } as A2_fileObjType;
+
+        let audioTemp = "";
+
+        // 底部 type 应该高亮 哪一个
+        if (fileArr.find((v) => v.type === "model")) setType("model");
+        else if (fileArr.find((v) => v.type === "img")) setType("img");
+        else if (fileArr.find((v) => v.type === "video")) setType("video");
+
+        fileArr.forEach((v) => {
+          obj[v.type].push(v);
+
+          // 处理音频信息
+          if (v.type === "audio") audioTemp = v.filePath;
+
+          // 底部tab 应该显示 那几个
+          if (v.type === "model") botTabTemp[0].show = true;
+          if (v.type === "img") botTabTemp[1].show = true;
+          if (v.type === "video") botTabTemp[2].show = true;
+        });
+        setAudioSrc(audioTemp);
+
+        setBotTab(botTabTemp.filter((v) => v.show));
+
+        setFile(obj);
+      }
+    },
+    [botTabTemp]
+  );
+
+  // 藏品信息
+  const [info, setInfo] = useState({} as A1_itemType);
+
+  // 藏品附件
+  const [file, setFile] = useState<A2_fileObjType>({
+    model: [],
+    img: [],
+    video: [],
+    audio: [],
+  });
+
+  const [type, setType] = useState("" as "model" | "img" | "video" | "audio");
+
+  const [myInd, setMyInd] = useState(0);
+
+  useEffect(() => {
+    setMyInd(0);
+  }, [type]);
+
+  useEffect(() => {
+    if (id) getInfoFu(id);
+    else {
+      // 从分享的链接单独进来,从地址栏获取id
+      const obj = urlParameter(location.search);
+      if (obj.id) {
+        uidRef.current = obj.id;
+        getInfoFu(obj.id);
+      } else alert("参数错误!");
+    }
+  }, [getInfoFu, id, location.search]);
+
+  // 没有附件信息
+  const [noFile, setNoFile] = useState(false);
+
+  // 在页面展示的数据
+  const data = useMemo(() => {
+    const arr = file[type] || [];
+    return arr;
+  }, [file, type]);
+
+  // 点击返回
+  const backOrToHome = useCallback(() => {
+    if (id) closePageFu!();
+    else history.push("/");
+  }, [closePageFu, id]);
+
+  // 点击分享
+  const shareFu = useCallback(() => {
+    const goodId = id ? id : uidRef.current;
+    let OrderNumber = window.location.origin + "/web/#/goods?id=" + goodId;
+    let newInput = document.createElement("input");
+    newInput.value = OrderNumber;
+    document.body.appendChild(newInput);
+    newInput.select();
+    document.execCommand("Copy");
+    newInput.remove();
+    alert("复制链接成功");
+  }, [id]);
+
+  // 点击左右按钮
+  const cutIndFu = useCallback(
+    (num: number, flag: boolean) => {
+      const numRes = myInd + num;
+      if (flag) return;
+      setMyInd(numRes);
+    },
+    [myInd]
+  );
+
+  // 图片预览
+  const [visible, setVisible] = useState("");
+
+  return (
+    <div className={styles.A2GoodsM}>
+      {/* 图片预览 */}
+      <ImageViewer
+        image={baseURL + visible}
+        visible={!!visible}
+        onClose={() => {
+          setVisible("");
+        }}
+      />
+
+      {audioSrc ? (
+        <audio src={baseURL + audioSrc} ref={audioRef}></audio>
+      ) : null}
+
+      {/* 返回 */}
+      <div className="back" onClick={backOrToHome}>
+        <img src={id ? toBackImg : toHomeImg} alt="" />
+      </div>
+
+      {/* 右上角的音频按钮 */}
+      {audioSrc ? (
+        <div className="audioIcon" onClick={() => setAudioSta(!audioSta)}>
+          <img src={audioSta ? musicImg : musicImgX} alt="" />
+        </div>
+      ) : null}
+
+      {/* 顶部内容 */}
+      {noFile ? (
+        <div className="noFileInfo">暂无信息</div>
+      ) : (
+        <div className="topMain">
+          {/* 底部模块 */}
+          <div className="flooRow">
+            {botTab.map((v) => (
+              <div
+                onClick={() => setType(v.type)}
+                className={classNames("row", type === v.type ? "active" : "")}
+                key={v.id}
+              >
+                {v.name}
+                {type === v.type && data.length > 1 ? myInd + 1 + "/" : null}
+                {file[v.type].length > 1 ? file[v.type].length : null}
+              </div>
+            ))}
+          </div>
+          {/* 左右按钮 */}
+          <div
+            hidden={data.length <= 1}
+            onClick={() => cutIndFu(-1, myInd === 0)}
+            className={classNames(
+              "R_left iconBtn",
+              myInd === 0 ? "R_arrowNo" : ""
+            )}
+          >
+            <LeftOutlined rev={undefined} />
+          </div>
+          <div
+            hidden={data.length <= 1}
+            onClick={() => cutIndFu(1, myInd >= data.length - 1)}
+            className={classNames(
+              "R_right iconBtn",
+              myInd >= data.length - 1 ? "R_arrowNo" : ""
+            )}
+          >
+            <RightOutlined rev={undefined} />
+          </div>
+
+          {/* 内容主体 */}
+          {data.map((v, i) => (
+            <div
+              className={classNames("conMain", myInd === i ? "conMainAc" : "")}
+              key={v.id}
+            >
+              {v.type === "model" && myInd === i ? (
+                <div className="modelBox">
+                  <iframe
+                    src={`model.html?m=${v.filePath}`}
+                    frameBorder="0"
+                  ></iframe>
+                </div>
+              ) : v.type === "img" ? (
+                <div className="imgBox" onClick={() => setVisible(v.filePath)}>
+                  <Image
+                    lazy
+                    src={baseURL + v.filePath}
+                    placeholder={<img src={imgLoding} alt="" />}
+                    fallback={<img src={imgErr} alt="" />}
+                  />
+                </div>
+              ) : v.type === "video" && myInd === i ? (
+                <div className="videoBox">
+                  <video src={baseURL + v.filePath} controls></video>
+                </div>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 底部信息 */}
+      <div className="flooMain myscroll">
+        <h3>{info.name}</h3>
+        <div className="ttTop">
+          年代:
+          {info.dictAge}
+        </div>
+        <div className="ttTop">
+          尺寸:
+          {info.sizeSpecific}
+        </div>
+        <div className="ttTop2">
+          {info.description ? "来源:" + info.description : null}
+        </div>
+        {/* 分享按钮 */}
+        <div className="shareBox" onClick={shareFu}>
+          <img src={shareImg} alt="" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const MemoA2GoodsM = React.memo(A2GoodsM);
+
+export default MemoA2GoodsM;

+ 22 - 1
重写子系统/src/store/action/A1Home.ts

@@ -1,5 +1,5 @@
 import http from "@/utils/http";
-import { AppDispatch } from "..";
+import store, { AppDispatch } from "..";
 import { A1_ListType } from "@/types";
 
 /**
@@ -17,6 +17,27 @@ export const A1_APIgetList = (data: A1_ListType) => {
 };
 
 /**
+ * 获取列表(移动端,下拉加载)
+ */
+export const A1_APIgetList_M = (data: A1_ListType, flag: boolean) => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post("show/ledger/pageList", data);
+
+    if (res.code === 0) {
+      if (flag) {
+        const oldData = store.getState().A1Home.list;
+        const newData = [...oldData, ...res.data.records];
+
+        dispatch({ type: "home/setList", payload: newData });
+      } else {
+        dispatch({ type: "home/setList", payload: res.data.records });
+      }
+      dispatch({ type: "home/setTotal", payload: res.data.total });
+    }
+  };
+};
+
+/**
  * 获取下拉列表
  */
 export const A1_APIgetSelect = () => {

+ 9 - 0
重写子系统/src/utils/tool.ts

@@ -0,0 +1,9 @@
+export const isMobiileFu = () => {
+  if (
+    window.navigator.userAgent.match(
+      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+    )
+  ) {
+    return true;
+  } else return false;
+};