upp

houtai/src/views/tab2/add.vue

@@ -89,8 +89,8 @@
           </el-form-item>
         </div>
         <!-- 尺寸 -->
-        <el-form-item label="尺寸：">
-          <el-input v-model="chang" maxlength="100"></el-input>
+        <el-form-item label="尺寸：" class="sizeInput">
+          <el-input v-model="chang" maxlength="100" show-word-limit></el-input>
         </el-form-item>
 
         <!-- 图片 -->
@@ -633,6 +633,11 @@ export default {
       }
     }
   }
+  .sizeInput{
+    /deep/input{
+      padding-right: 70px !important;
+    }
+  }
 
   /deep/.el-upload-list {
     margin-top: -12px;

webNew/package-lock.json

@@ -16,6 +16,7 @@
         "@types/react": "^18.0.24",
         "@types/react-dom": "^18.0.8",
         "antd": "^4.24.2",
+        "antd-mobile": "^5.25.1",
         "axios": "^1.1.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -2201,6 +2202,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.0.2.tgz",
+      "integrity": "sha512-Skfy0YS3NJ5nV9us0uuPN0HDk1Q4edljaOhRBJGDWs9EBa7ZVMYBHRFlhLvvmwEoaIM9BlH6QJFn9/uZg0bACg=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.0.6.tgz",
+      "integrity": "sha512-kt/tg1oip9OAH1xjCTcx1OpcUpu9rjDw3GKJ/rEhUqhO7QyJWfrHU0DpLTNsH67+JyFL5Kv9X1utsXwKFVtyEQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.2"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.7",
       "resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -3052,6 +3066,69 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/@react-spring/animated": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmmirror.com/@react-spring/animated/-/animated-9.5.5.tgz",
+      "integrity": "sha512-glzViz7syQ3CE6BQOwAyr75cgh0qsihm5lkaf24I0DfU63cMm/3+br299UEYkuaHNmfDfM414uktiPlZCNJbQA==",
+      "dependencies": {
+        "@react-spring/shared": "~9.5.5",
+        "@react-spring/types": "~9.5.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmmirror.com/@react-spring/core/-/core-9.5.5.tgz",
+      "integrity": "sha512-shaJYb3iX18Au6gkk8ahaF0qx0LpS0Yd+ajb4asBaAQf6WPGuEdJsbsNSgei1/O13JyEATsJl20lkjeslJPMYA==",
+      "dependencies": {
+        "@react-spring/animated": "~9.5.5",
+        "@react-spring/rafz": "~9.5.5",
+        "@react-spring/shared": "~9.5.5",
+        "@react-spring/types": "~9.5.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmmirror.com/@react-spring/rafz/-/rafz-9.5.5.tgz",
+      "integrity": "sha512-F/CLwB0d10jL6My5vgzRQxCNY2RNyDJZedRBK7FsngdCmzoq3V4OqqNc/9voJb9qRC2wd55oGXUeXv2eIaFmsw=="
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmmirror.com/@react-spring/shared/-/shared-9.5.5.tgz",
+      "integrity": "sha512-YwW70Pa/YXPOwTutExHZmMQSHcNC90kJOnNR4G4mCDNV99hE98jWkIPDOsgqbYx3amIglcFPiYKMaQuGdr8dyQ==",
+      "dependencies": {
+        "@react-spring/rafz": "~9.5.5",
+        "@react-spring/types": "~9.5.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmmirror.com/@react-spring/types/-/types-9.5.5.tgz",
+      "integrity": "sha512-7I/qY8H7Enwasxr4jU6WmtNK+RZ4Z/XvSlDvjXFVe7ii1x0MoSlkw6pD7xuac8qrHQRm9BTcbZNyeeKApYsvCg=="
+    },
+    "node_modules/@react-spring/web": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmmirror.com/@react-spring/web/-/web-9.5.5.tgz",
+      "integrity": "sha512-+moT8aDX/ho/XAhU+HRY9m0LVV9y9CK6NjSRaI+30Re150pB3iEip6QfnF4qnhSCQ5drpMF0XRXHgOTY/xbtFw==",
+      "dependencies": {
+        "@react-spring/animated": "~9.5.5",
+        "@react-spring/core": "~9.5.5",
+        "@react-spring/shared": "~9.5.5",
+        "@react-spring/types": "~9.5.5"
+      },
+      "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",
@@ -3723,6 +3800,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",
@@ -4096,6 +4178,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",
@@ -4361,6 +4459,32 @@
         "node": ">= 6.0.0"
       }
     },
+    "node_modules/ahooks": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmmirror.com/ahooks/-/ahooks-3.7.2.tgz",
+      "integrity": "sha512-nJPsQJcmJnGaNXiqgZdfO7UMs+o926LQg6VyDYt2vzKhXU8Ze/U87NsA/FeIvlIZB0rQr/j7uotFb1bGPp627A==",
+      "dependencies": {
+        "@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"
+      },
+      "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",
@@ -4507,6 +4631,50 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/antd-mobile": {
+      "version": "5.25.1",
+      "resolved": "https://registry.npmmirror.com/antd-mobile/-/antd-mobile-5.25.1.tgz",
+      "integrity": "sha512-uQnF56R5eM5w4TF4UAnTrkdxaswSb9SjB5M/hz7cdOevQKJ1hbIqKqrUfyvq8S9tnw2VqXMVbyBMB6R6jtCVAg==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0",
+        "@react-spring/web": "^9.4.5",
+        "@use-gesture/react": "10.2.20",
+        "ahooks": "^3.7.0",
+        "antd-mobile-icons": "^0.3.0",
+        "antd-mobile-v5-count": "^1.0.1",
+        "big.js": "^6.2.1",
+        "classnames": "^2.3.1",
+        "dayjs": "^1.11.4",
+        "lodash": "^4.17.21",
+        "rc-field-form": "~1.27.0",
+        "react-is": "^17.0.2",
+        "runes": "^0.4.3",
+        "staged-components": "^1.1.3",
+        "tslib": "^2.4.0",
+        "use-sync-external-store": "^1.1.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/big.js": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-6.2.1.tgz",
+      "integrity": "sha512-bCtHMwL9LeDIozFn+oNhhFoq+yQ3BNdnsLSASUxLciOb1vgvpHsIO1dsENiGMgbb4SkP5TrzWzRiLddn8ahVOQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.2.tgz",
@@ -8466,6 +8634,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/intersection-observer": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmmirror.com/intersection-observer/-/intersection-observer-0.12.2.tgz",
+      "integrity": "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg=="
+    },
     "node_modules/ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -10726,6 +10899,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",
@@ -14559,6 +14737,14 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/runes": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/runes/-/runes-0.4.3.tgz",
+      "integrity": "sha512-K6p9y4ZyL9wPzA+PMDloNQPfoDGTiFYDvdlXznyGKgD10BJpcAosvATKrExRKOrNLgD8E7Um7WGW0lxsnOuNLg==",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -14670,6 +14856,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": "2.2.29",
       "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz",
@@ -15035,6 +15229,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",
@@ -18276,6 +18478,19 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.0.2.tgz",
+      "integrity": "sha512-Skfy0YS3NJ5nV9us0uuPN0HDk1Q4edljaOhRBJGDWs9EBa7ZVMYBHRFlhLvvmwEoaIM9BlH6QJFn9/uZg0bACg=="
+    },
+    "@floating-ui/dom": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.0.6.tgz",
+      "integrity": "sha512-kt/tg1oip9OAH1xjCTcx1OpcUpu9rjDw3GKJ/rEhUqhO7QyJWfrHU0DpLTNsH67+JyFL5Kv9X1utsXwKFVtyEQ==",
+      "requires": {
+        "@floating-ui/core": "^1.0.2"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.7",
       "resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -18915,6 +19130,56 @@
         "rc-util": "^5.24.4"
       }
     },
+    "@react-spring/animated": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmmirror.com/@react-spring/animated/-/animated-9.5.5.tgz",
+      "integrity": "sha512-glzViz7syQ3CE6BQOwAyr75cgh0qsihm5lkaf24I0DfU63cMm/3+br299UEYkuaHNmfDfM414uktiPlZCNJbQA==",
+      "requires": {
+        "@react-spring/shared": "~9.5.5",
+        "@react-spring/types": "~9.5.5"
+      }
+    },
+    "@react-spring/core": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmmirror.com/@react-spring/core/-/core-9.5.5.tgz",
+      "integrity": "sha512-shaJYb3iX18Au6gkk8ahaF0qx0LpS0Yd+ajb4asBaAQf6WPGuEdJsbsNSgei1/O13JyEATsJl20lkjeslJPMYA==",
+      "requires": {
+        "@react-spring/animated": "~9.5.5",
+        "@react-spring/rafz": "~9.5.5",
+        "@react-spring/shared": "~9.5.5",
+        "@react-spring/types": "~9.5.5"
+      }
+    },
+    "@react-spring/rafz": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmmirror.com/@react-spring/rafz/-/rafz-9.5.5.tgz",
+      "integrity": "sha512-F/CLwB0d10jL6My5vgzRQxCNY2RNyDJZedRBK7FsngdCmzoq3V4OqqNc/9voJb9qRC2wd55oGXUeXv2eIaFmsw=="
+    },
+    "@react-spring/shared": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmmirror.com/@react-spring/shared/-/shared-9.5.5.tgz",
+      "integrity": "sha512-YwW70Pa/YXPOwTutExHZmMQSHcNC90kJOnNR4G4mCDNV99hE98jWkIPDOsgqbYx3amIglcFPiYKMaQuGdr8dyQ==",
+      "requires": {
+        "@react-spring/rafz": "~9.5.5",
+        "@react-spring/types": "~9.5.5"
+      }
+    },
+    "@react-spring/types": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmmirror.com/@react-spring/types/-/types-9.5.5.tgz",
+      "integrity": "sha512-7I/qY8H7Enwasxr4jU6WmtNK+RZ4Z/XvSlDvjXFVe7ii1x0MoSlkw6pD7xuac8qrHQRm9BTcbZNyeeKApYsvCg=="
+    },
+    "@react-spring/web": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmmirror.com/@react-spring/web/-/web-9.5.5.tgz",
+      "integrity": "sha512-+moT8aDX/ho/XAhU+HRY9m0LVV9y9CK6NjSRaI+30Re150pB3iEip6QfnF4qnhSCQ5drpMF0XRXHgOTY/xbtFw==",
+      "requires": {
+        "@react-spring/animated": "~9.5.5",
+        "@react-spring/core": "~9.5.5",
+        "@react-spring/shared": "~9.5.5",
+        "@react-spring/types": "~9.5.5"
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmmirror.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -19463,6 +19728,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",
@@ -19773,6 +20043,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",
@@ -20005,6 +20288,26 @@
         "debug": "4"
       }
     },
+    "ahooks": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmmirror.com/ahooks/-/ahooks-3.7.2.tgz",
+      "integrity": "sha512-nJPsQJcmJnGaNXiqgZdfO7UMs+o926LQg6VyDYt2vzKhXU8Ze/U87NsA/FeIvlIZB0rQr/j7uotFb1bGPp627A==",
+      "requires": {
+        "@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"
+      }
+    },
+    "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",
@@ -20124,6 +20427,46 @@
         "scroll-into-view-if-needed": "^2.2.25"
       }
     },
+    "antd-mobile": {
+      "version": "5.25.1",
+      "resolved": "https://registry.npmmirror.com/antd-mobile/-/antd-mobile-5.25.1.tgz",
+      "integrity": "sha512-uQnF56R5eM5w4TF4UAnTrkdxaswSb9SjB5M/hz7cdOevQKJ1hbIqKqrUfyvq8S9tnw2VqXMVbyBMB6R6jtCVAg==",
+      "requires": {
+        "@floating-ui/dom": "^1.0.0",
+        "@react-spring/web": "^9.4.5",
+        "@use-gesture/react": "10.2.20",
+        "ahooks": "^3.7.0",
+        "antd-mobile-icons": "^0.3.0",
+        "antd-mobile-v5-count": "^1.0.1",
+        "big.js": "^6.2.1",
+        "classnames": "^2.3.1",
+        "dayjs": "^1.11.4",
+        "lodash": "^4.17.21",
+        "rc-field-form": "~1.27.0",
+        "react-is": "^17.0.2",
+        "runes": "^0.4.3",
+        "staged-components": "^1.1.3",
+        "tslib": "^2.4.0",
+        "use-sync-external-store": "^1.1.0"
+      },
+      "dependencies": {
+        "big.js": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmmirror.com/big.js/-/big.js-6.2.1.tgz",
+          "integrity": "sha512-bCtHMwL9LeDIozFn+oNhhFoq+yQ3BNdnsLSASUxLciOb1vgvpHsIO1dsENiGMgbb4SkP5TrzWzRiLddn8ahVOQ=="
+        }
+      }
+    },
+    "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",
@@ -23249,6 +23592,11 @@
         "side-channel": "^1.0.4"
       }
     },
+    "intersection-observer": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmmirror.com/intersection-observer/-/intersection-observer-0.12.2.tgz",
+      "integrity": "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg=="
+    },
     "ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -25002,6 +25350,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",
@@ -27762,6 +28115,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "runes": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/runes/-/runes-0.4.3.tgz",
+      "integrity": "sha512-K6p9y4ZyL9wPzA+PMDloNQPfoDGTiFYDvdlXznyGKgD10BJpcAosvATKrExRKOrNLgD8E7Um7WGW0lxsnOuNLg=="
+    },
     "safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -27837,6 +28195,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": "2.2.29",
       "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz",
@@ -28151,6 +28514,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",

webNew/package.json

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

webNew/public/model.html

@@ -20,7 +20,8 @@
   <script>
     let number = getQueryVariable("m");
     window.autoRotate = true; // 是否自动旋转
-    fdage.embed('/goods/model/' + number, {
+    // fdage.embed('/goods/model/' + number, {
+      fdage.embed('https://hnbwg.4dage.com/goods/model/' + number, {
       transparentBackground: true,
       width: 800,
       height: 600,

webNew/src/App.tsx

@@ -14,7 +14,7 @@ const Model = React.lazy(() => import('./pages/Model'))
 export default function App() {
   // const dispatch = useDispatch()
   return (
-    <div>
+    <div className='App'>
       {/* 关于路由 */}
       <Router history={history}>
         <React.Suspense fallback={<div className='lodingApp'>加载中...</div>}>

webNew/src/AppM.tsx

@@ -0,0 +1,37 @@
+import 'antd/dist/antd.css';
+import '@/assets/styles/base.css'
+// import { useDispatch, useSelector } from 'react-redux'
+// import { RootState } from './store'
+// import { addNunAction } from './store/action/login'
+
+// 关于路由
+import React, { useEffect } from "react"
+import { Router, Route, Switch, Redirect } from "react-router-dom"
+import history from "./utils/history"
+const HomeM = React.lazy(() => import('./pages/HomeM'))
+// const Model = React.lazy(() => import('./pages/Model'))
+
+export default function AppM() {
+
+  useEffect(() => {
+    const dom: any = document.querySelector(".AppM")
+    dom.style.height = window.innerHeight + "px";
+  }, [])
+
+  // const dispatch = useDispatch()
+  return (
+    <div className='AppM'>
+      {/* 关于路由 */}
+      <Router history={history}>
+        <React.Suspense fallback={<div className='lodingApp'>加载中...</div>}>
+          <Switch>
+            <Redirect exact path="/" to="Home" />
+            {/* <Route path="/Model" component={Model} /> */}
+            <Route path="/Home" component={HomeM} />
+          </Switch>
+        </React.Suspense>
+      </Router>
+    </div>
+
+  )
+}

webNew/src/assets/styles/base.css

@@ -4,10 +4,17 @@
   box-sizing: border-box;
 }
 
-#root{
+.App{
   min-width: 1500px;
   min-height: 800px;
   overflow-y: auto;
+
+}
+.AppM{
+  width: 100vw;
+  max-width: 500px;
+  margin: 0 auto;
+  overflow: hidden;
 }
 
 html {

webNew/src/components/ModelM/index.module.scss

@@ -0,0 +1,129 @@
+.ModelM {
+  width: 100%;
+  height: 100%;
+  background-color: #cdbc8c;
+  background-image: url('../../assets/img/modelBacM.png');
+  background-size: 100% 100%;
+  position: relative;
+
+  :global {
+    .ifrBox {
+      position: absolute;
+      top: 2.5%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 92%;
+      height: calc(100% - 175px);
+
+      iframe {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .model_title {
+      background-image: url('../../assets/img/name.png');
+      background-size: 100% 100%;
+      position: absolute;
+      z-index: 10;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 210px;
+      height: 40px;
+      line-height: 40px;
+      font-weight: 700;
+      font-size: 18px;
+      text-align: center;
+    }
+
+    .rightTxt {
+      background-image: url('../../assets/img/txtM.png');
+      background-size: 100% 100%;
+      font-size: 12px;
+      position: absolute;
+      z-index: 10;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 90%;
+      height: 145px;
+      padding: 15px 10px;
+
+
+      .model_txt {
+        padding: 6px 6px 2px 6px;
+        height: 75px;
+        overflow-y: auto;
+      }
+
+
+
+      .model_floo {
+        margin-top: 12px;
+        display: flex;
+        justify-content: center;
+
+        p {
+          margin: 0;
+        }
+
+        &>div {
+          display: flex;
+        }
+
+        .model_sortRow {
+          margin-right: 20px;
+        }
+      }
+
+      .model_size {
+        padding: 0 3px;
+        margin-top: 2px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: center;
+      }
+    }
+
+    .flootBtnBox {
+      position: absolute;
+      z-index: 10;
+      right: 20px;
+      bottom: 170px;
+
+      .flootRow {
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
+        margin-right: 6px;
+        background-size: 100% 100%;
+        margin-top: 8px;
+      }
+
+      .flootRow1 {
+        background-image: url('../../assets/img/inco1.png');
+      }
+
+      .flootRow2 {
+        background-image: url('../../assets/img/inco2.png');
+      }
+
+      .flootRow3 {
+        background-image: url('../../assets/img/inco3.png');
+      }
+
+      .flootRow4 {
+        background-image: url('../../assets/img/inco4.png');
+      }
+
+      .flootRowM {
+        &>img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}

webNew/src/components/ModelM/index.tsx

@@ -0,0 +1,131 @@
+/* eslint-disable jsx-a11y/iframe-has-title */
+import { RootState } from '@/store';
+import { modelItem } from '@/types';
+import { useEffect, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import musicImg from '@/assets/img/music.png'
+import musicImgAc from '@/assets/img/musicAc.png'
+import styles from './index.module.scss'
+import { baseURL } from '@/utils/http';
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
+
+type props = {
+  modelId: number,
+  closeModel: () => void
+}
+export default function ModelM({ modelId, closeModel }: props) {
+
+  const { modelInfo } = useSelector((state: RootState) => state.homeStore)
+  const { list } = modelInfo
+  const [info, setInfo] = useState({} as modelItem)
+
+  const closeModelFu = () => {
+    setInfo({} as modelItem)
+    setMusic(false)
+    closeModel()
+  }
+  useEffect(() => {
+    if (modelId) {
+      const info = list.filter(v => v.id === modelId)[0]
+      setInfo(info)
+      setMusic(true)
+      setTimeout(() => {
+        musicPlayFu(true)
+
+      }, 500);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modelId])
+
+
+  // 控制模型放大缩小和复位
+  const ifrBoxRef = useRef<any>(null)
+  const modelChangeFu = (val: number) => {
+    const dom = ifrBoxRef.current
+
+    if (dom && dom.contentWindow && dom.contentWindow.webview) {
+      if (val === 1) dom.contentWindow.webview.zoomIn()  // 放大
+      else if (val === 2) dom.contentWindow.webview.zoomOut() // 缩小
+      else dom.contentWindow.webview.resetView() // 复位
+    }
+  }
+
+
+  // 控制音乐播放暂停
+  const musicRef = useRef<HTMLAudioElement>(null)
+
+  const [music, setMusic] = useState(false)
+  const musicPlayFu = (flag: boolean) => {
+    const dom = musicRef.current
+    if (dom) {
+      if (flag) {
+
+        // 打开音乐
+        setMusic(true)
+        dom.play()
+        dom.addEventListener('ended', function () {
+          setMusic(false)
+        }, false);
+      } else {
+        // 关闭音乐
+        setMusic(false)
+        dom.pause()
+      }
+    }
+  }
+
+
+  return (
+    <div className={styles.ModelM}>
+      {/* 音频 */}
+      {info.audioPath ? (<audio src={baseURL + info.audioPath} ref={musicRef}></audio>) : null}
+      {/* 模型盒子 */}
+      <div className='ifrBox'>
+        {info.fileName ? (<iframe ref={ifrBoxRef} src={`model.html?m=${info.fileName}`} frameBorder='no'></iframe>) : null}
+
+      </div>
+      {/* 名字 */}
+        <div className='model_title'>{info.name}</div>
+
+      {/* 下边介绍 */}
+      <div className='rightTxt'>
+
+
+        {
+          info.description ? (<div className='model_txt' dangerouslySetInnerHTML={{ __html: info.description }}></div>) : <div className='model_txt'>暂无信息</div>
+        }
+
+        <div className='model_floo'>
+          <div className='model_sortRow'>类别：
+            <p>{info.dictTextureName ? info.dictTextureName : '（空）'}</p>
+          </div>
+          <div className='model_ageRow'>年代：
+            <p>{info.dictAgeName ? info.dictAgeName : '（空）'}</p>
+          </div>
+
+        </div>
+
+
+        {
+          <div className='model_size'>尺寸：{info.sizeLength ? info.sizeLength : '（空）'}
+          </div>
+        }
+
+      </div>
+
+      {/* 底部按钮 */}
+      <div className='flootBtnBox'>
+        <div className='flootRow flootRow1' onClick={() => modelChangeFu(1)}></div>
+        <div className='flootRow flootRow2' onClick={() => modelChangeFu(2)}></div>
+        {info.audioPath ? (<div className='flootRow flootRowM'>
+          {music ? (<img src={musicImgAc} alt="" onClick={() => musicPlayFu(false)} />) :
+            (<img src={musicImg} alt="" onClick={() => musicPlayFu(true)} />)}
+        </div>) : null}
+
+        <div className='flootRow flootRow4' onClick={() => modelChangeFu(3)}></div>
+        <div className='flootRow flootRow3' onClick={() => closeModelFu()}></div>
+      </div>
+
+    </div>
+  )
+}

webNew/src/index.tsx

@@ -1,15 +1,28 @@
 import App from './App'
+import AppM from './AppM'
 import store from './store/index'
 import { Provider } from 'react-redux'
 
 import { createRoot } from 'react-dom/client';
+import { isMobiileFu } from './utils/storage';
 
 
 const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container);
 
-root.render(
-  <Provider store={store}>
-    <App />
-  </Provider>
+
+if (isMobiileFu()) {
+  root.render(
+    <Provider store={store}>
+      <AppM />
+    </Provider>
+  );
+} else {
+  root.render(
+    <Provider store={store}>
+      <App />
+    </Provider>
   );
+}
+
+

webNew/src/pages/HomeM/index.module.scss

@@ -0,0 +1,234 @@
+.HomeM {
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(207, 202, 189, 1));
+  position: relative;
+  :global {
+
+    .modelTxtBox {
+      z-index: 10;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity .3s;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .activeTxtBox {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .title {
+      width: 100%;
+      height: 50px;
+      background-color: #741A1A;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &>img {
+        width: 150px;
+      }
+    }
+
+    .search {
+      background-color: #F8F8F8;
+      width: 96%;
+      margin: 8px auto;
+      height: 60px;
+      border-radius: 3px;
+      border-top: 5px solid #D9D9D9;
+      box-shadow: 0px 1px 3px 1px #ccc;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      position: relative;
+
+      .ant-select-selector {
+        padding: 0;
+        border: none;
+        background-color: transparent;
+        border-color: none !important;
+        box-shadow: none !important;
+      }
+
+      .inputBox {
+        z-index: 10;
+        box-shadow: 0px 1px 2px 1px rgb(53, 50, 50);
+        position: absolute;
+        top: 8px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 94%;
+        height: 40px;
+
+        .ant-input {
+          width: 100%;
+          height: 100%;
+          padding: 0 50px 0 10px;
+        }
+
+        .ant-input:focus,
+        .ant-input-focused {
+          border-color: transparent;
+          box-shadow: none;
+        }
+
+
+        .inputInco {
+          position: absolute;
+          z-index: 2;
+          right: 0;
+          top: 0;
+          width: 40px;
+          height: 40px;
+          font-size: 20px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+
+      &>div {
+        border-radius: 2px;
+        box-shadow: 0px 1px 2px 1px #ccc;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 12px;
+      }
+
+      .sort {
+        padding: 0 10px;
+        width: 35%;
+      }
+
+      .age {
+        padding: 0 10px;
+        width: 35%;
+      }
+
+      .inco {
+        font-size: 20px;
+      }
+
+      @media screen and (max-width: 350px) {
+        .sort {
+          padding: 0 5px;
+        }
+
+        .age {
+          padding: 0 5px;
+        }
+      }
+
+      .inco {
+        width: 10%;
+        justify-content: center;
+      }
+    }
+
+    .main {
+      border-radius: 3px;
+      width: 96%;
+      margin: 0 auto 40px;
+      height: calc(100% - 130px);
+      overflow-y: auto;
+
+      background-color: #F8F8F8;
+      box-shadow: 0px 1px 3px 1px #ccc;
+      padding: 15px 10px;
+
+      .mainBox {
+        width: 100%;
+        display: flex;
+        align-content: flex-start;
+        flex-wrap: wrap;
+      }
+
+      .mainRow {
+        width: 48%;
+        height: 180px;
+        margin-right: 4%;
+        margin-bottom: 4%;
+        background-color: #CFCABD;
+        border-radius: 3px;
+        box-shadow: 0px 1px 2px 1px #ccc;
+        overflow: hidden;
+        position: relative;
+
+        .sortName {
+          color: #741A1A;
+          font-size: 14px;
+          position: absolute;
+          top: 0;
+          right: 0;
+          padding: 0 8px;
+          height: 30px;
+          line-height: 30px;
+          border-radius: 0 0px 0 8px;
+          opacity: .8;
+          background-image: linear-gradient(to bottom, #FFFFFF, #CFCABD);
+
+        }
+
+        &>img {
+          width: 100%;
+          height: 150px;
+          object-fit: cover;
+        }
+
+        &>p {
+          padding: 0 3px;
+          height: 30px;
+          line-height: 30px;
+          font-size: 14px;
+          color: #fff;
+          background-color: #741A1A;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        &:nth-of-type(2n) {
+          margin-right: 0;
+        }
+      }
+
+      .noneList {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        position: relative;
+
+        .incoBox {
+          font-size: 24px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 40px;
+          height: 40px;
+          margin-bottom: 15px;
+          background-color: #BE262B;
+          border-radius: 50%;
+          color: #fff;
+          font-weight: 700;
+        }
+
+        &>p {
+          font-weight: 700;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+}

webNew/src/pages/HomeM/index.tsx

@@ -0,0 +1,171 @@
+import styles from './index.module.scss'
+import logiImg from '@/assets/img/logo.png'
+import classNames from 'classnames'
+import { Input, Select } from 'antd';
+import { SearchOutlined, ExclamationOutlined } from '@ant-design/icons';
+import { useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getAgeAction, getListAction, getSortAction } from '@/store/action/home';
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import { RootState } from '@/store';
+import { baseURL } from '@/utils/http';
+import { InfiniteScroll } from 'antd-mobile'
+import ModelM from '@/components/ModelM';
+export default function HomeM() {
+  const dispatch = useDispatch()
+
+  // 进页面获取后端文物数据
+  useEffect(() => {
+    dispatch(getSortAction())
+    dispatch(getAgeAction())
+  }, [dispatch])
+
+  //输入框的显示和隐藏
+  const [inputShow, setInputShow] = useState(false)
+
+  useEffect(() => {
+    if (inputShow) {
+      const dom: any = document.querySelector('.myInput')
+      dom.focus()
+    }
+  }, [inputShow])
+
+  const [value, setValue] = useState('')
+  const searchKeyUpFu = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') searchBtnFu()
+  }
+  const searchBtnFu = () => {
+    fromData.current.pageNum = 1
+    getModelList()
+    setInputShow(false)
+  }
+
+  // 分类的数据和高亮
+  const { sortList, modelInfo, ageList } = useSelector((state: RootState) => state.homeStore)
+  const { list, total } = modelInfo
+
+  // 分类
+  const [sort, setSort] = useState(-1)
+  // 分类下拉框改变
+  const sortChangeFu = (value: number) => {
+    setSort(value)
+  }
+  useEffect(() => {
+    fromData.current.dictTextureId = sort
+    fromData.current.pageNum = 1
+    getModelList()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sort])
+
+  // 年代
+  const [ageSerach, setAgeSerach] = useState(-1)
+  // 年代下拉框改变
+  const ageChangeFu = (value: number) => {
+    setAgeSerach(value)
+    fromData.current.dictAgeId = value
+    fromData.current.pageNum = 1
+    getModelList()
+  }
+
+  // 上拉加载更多数据
+  const loadMore = async () => {
+    fromData.current.pageNum = fromData.current.pageNum + 1
+    await getModelList(true)
+  }
+
+  //  发送请求相关数据
+  const fromData = useRef({
+    pageNum: 1,
+    pageSize: 6,
+    searchKey: '',
+    dictTextureId: -1,
+    dictAgeId: -1
+  })
+
+
+  // 滚动盒子ref
+  const modelBoxRef = useRef<HTMLDivElement>(null)
+  // 封装一个发送请求获取列表的函数
+  const getModelList = (flag?: boolean) => {
+    if (!flag) {
+      const sroolDom = modelBoxRef.current
+      sroolDom!.scrollTop = 0
+    }
+    dispatch(getListAction({
+      ...fromData.current, dictTextureId: fromData.current.dictTextureId === -1 ? null : fromData.current.dictTextureId, searchKey: value,
+      dictAgeId: fromData.current.dictAgeId === -1 ? null : fromData.current.dictAgeId,
+    }, flag))
+  }
+
+  // 点击每个模型出来的页面
+  const [modelId, setModelId] = useState(0)
+
+  return (
+    <div className={styles.HomeM}>
+
+      {/* 点击单个模型出来的详情页面 */}
+      <div className={classNames('modelTxtBox', modelId ? 'activeTxtBox' : '')}>
+        <ModelM modelId={modelId} closeModel={() => setModelId(0)} />
+      </div>
+
+      <div className='title'>
+        <img src={logiImg} alt="" />
+      </div>
+      {/* 筛选和搜索 */}
+      <div className='search'>
+        {/* 搜索框 */}
+        <div className='inputBox' hidden={!inputShow}>
+          <div className='inputInco' onClick={() => searchBtnFu()}><SearchOutlined /></div>
+          <Input className='myInput' maxLength={10} placeholder="请输入文物名称" value={value} onChange={(e) => setValue(e.target.value)} onKeyUp={(e) => searchKeyUpFu(e)} />
+        </div>
+
+        <div className='sort'>
+          <Select style={{ width: '100%' }} value={sort} onChange={sortChangeFu} options={sortList} />
+        </div>
+        <div className='age'>
+          <Select style={{ width: '100%' }} value={ageSerach} onChange={ageChangeFu} options={ageList} />
+
+        </div>
+        <div className='inco' onClick={() => setInputShow(true)}>
+          <SearchOutlined />
+        </div>
+
+        {/* 展开的全部分类 */}
+      </div>
+
+      {/* 主体内容 */}
+
+      <div className='main' ref={modelBoxRef}>
+
+        {list && list.length > 0 ? <>
+          <div className='mainBox'>
+            {list.map(item => (
+              <div className='mainRow' key={item.id} onClick={() => setModelId(item.id)}>
+                <LazyLoadImage src={baseURL + item.thumb}
+                  width={300} height={260}
+                  alt=""
+                />
+                <p>{item.name}</p>
+                {/* 右上角分类 */}
+                {item.dictTextureName ? <div className='sortName'>
+                  {item.dictTextureName}
+                </div> : null}
+
+              </div>
+            ))}
+          </div>
+          <InfiniteScroll loadMore={loadMore} hasMore={total > list.length} /></>
+
+          :
+          (<div className='noneList'>
+            <div className='incoBox'>
+              <ExclamationOutlined />
+            </div>
+            <p>暂无内容</p>
+          </div>)
+        }
+
+      </div>
+    </div>
+  )
+}

webNew/src/store/action/home.ts

@@ -1,4 +1,4 @@
-import { AppDispatch } from ".."
+import store, { AppDispatch } from ".."
 import http from "@/utils/http"
 import { HomeSortType } from "@/types"
 
@@ -35,11 +35,14 @@ export const getAgeAction = () => {
 
 
 // 获取列表数据
-export const getListAction = (data: any) => {
+export const getListAction = (data: any, flag?: boolean) => {
 
   return async (dispatch: AppDispatch) => {
     const res = await http.post('/api/show/goods/list', data)
-    const list = res.data.records
+    let list
+    if (flag) list = [...store.getState().homeStore.modelInfo.list, ...res.data.records]
+    else list = res.data.records
+
     const total = res.data.total
     dispatch({ type: 'home/setList', payload: { list, total } })
 
@@ -50,7 +53,7 @@ export const getListAction = (data: any) => {
 // 扫码进页面获取的单个文物详情
 export const getModelInfo = (id: string) => {
   return async (dispatch: AppDispatch) => {
-    const res =await http.get(`/api/show/goods/detail/${id}`)
+    const res = await http.get(`/api/show/goods/detail/${id}`)
     dispatch({ type: 'home/Model', payload: res.data })
   }
 }

webNew/src/utils/storage.ts

@@ -32,3 +32,10 @@ export const hasToken = (): boolean => {
   return Boolean(getTokenInfo().token)
 }
 
+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
+}