upp

webNew/package-lock.json

@@ -28,6 +28,7 @@
         "redux-devtools-extension": "^2.13.9",
         "redux-thunk": "^2.4.1",
         "sass": "^1.55.0",
+        "swiper": "^9.1.0",
         "typescript": "^4.8.4",
         "web-vitals": "^2.1.4"
       },
@@ -15199,6 +15200,11 @@
       "resolved": "https://registry.npmmirror.com/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
     },
+    "node_modules/ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
     "node_modules/stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmmirror.com/stable/-/stable-0.1.8.tgz",
@@ -15553,6 +15559,17 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/swiper": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-9.1.1.tgz",
+      "integrity": "sha512-D1zArOwI6XCXCYBULPA4jTxpqp5SQtvntjinbXNZwXzj6P3KS51zSWuMarCLXq5oRISay4nX+TuShpxz8qhtbw==",
+      "dependencies": {
+        "ssr-window": "^4.0.2"
+      },
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -28489,6 +28506,11 @@
       "resolved": "https://registry.npmmirror.com/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
     },
+    "ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
     "stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmmirror.com/stable/-/stable-0.1.8.tgz",
@@ -28778,6 +28800,14 @@
         }
       }
     },
+    "swiper": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-9.1.1.tgz",
+      "integrity": "sha512-D1zArOwI6XCXCYBULPA4jTxpqp5SQtvntjinbXNZwXzj6P3KS51zSWuMarCLXq5oRISay4nX+TuShpxz8qhtbw==",
+      "requires": {
+        "ssr-window": "^4.0.2"
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",

webNew/package.json

@@ -23,6 +23,7 @@
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.1",
     "sass": "^1.55.0",
+    "swiper": "^9.1.0",
     "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"
   },

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

@@ -1,10 +1,29 @@
 .Home {
   width: 100%;
   height: 100vh;
-  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(207, 202, 189, 1));
+
+  // height: 100vh;
+  // background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(207, 202, 189, 1));
+  background-image: url('../../assets/img/bg.png');
+  background-size: 100% 100%;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: #741A1A;
+  }
+
+  &::-webkit-scrollbar-track {
+    border-radius: 10px;
+  }
 
   :global {
 
+
     .modelTxtBox {
       z-index: 10;
       opacity: 0;
@@ -25,14 +44,16 @@
     .title {
       width: 100%;
       height: 90px;
-      background-color: #741A1A;
+      // background-color: #741A1A;
+      background-image: url('../../assets/img/topBg.png');
+      background-size: 100% 100%;
       display: flex;
-      justify-content: center;
       align-items: center;
       position: relative;
 
       .logo {
-        width: 215px;
+        width: 195px;
+        margin-left: 70px;
 
         &>img {
           width: 100%;
@@ -42,85 +63,206 @@
 
     .mainBox {
       width: 1400px;
-      margin: 10px auto 50px;
-      height: calc(100% - 170px);
+      margin: 0px auto 50px;
+      // height: calc(100% - 170px);
       position: relative;
 
+      .searchBox {
+        .searchBoxTop {
+          display: flex;
+          height: 40px;
 
+          &>div {
+            cursor: pointer;
+            height: 40px;
+            line-height: 40px;
+            cursor: pointer;
+            padding-left: 26px;
+            color: #777676;
+            position: relative;
+            margin-right: 40px;
+
+            &::before {
+              content: '';
+              position: absolute;
+              top: 7px;
+              left: 0;
+              width: 20px;
+              height: 20px;
+              background-image: url('../../assets/img/jiantou.png');
+              background-size: 100% 100%;
+            }
 
-      .screenBox {
-        border-radius: 0 0 3px 3px;
-        border-top: 6px solid #D9D9D9;
-        box-shadow: 0px 0px 5px 3px #ccc;
-        padding: 10px 24px;
-        height: 60px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+          }
 
-        &>div {
-          width: 300px;
-          height: 30px;
-        }
+          .active {
+            color: #9F5342;
+            pointer-events: none;
 
-        .search {
-          position: relative;
+            &::before {
+              background-image: url('../../assets/img/jiantouAc.png');
+            }
 
-          .searchBtn {
-            position: absolute;
-            top: 0;
-            left: 0;
-            cursor: pointer;
-            width: 30px;
-            height: 30px;
-            z-index: 2;
+            &::after {
+              content: '';
+              position: absolute;
+              bottom: -10px;
+              left: 43px;
+              width: 20px;
+              height: 20px;
+              background-image: url('../../assets/img/topAc.png');
+              background-size: 100% 100%;
+              z-index: 99;
+            }
           }
+        }
 
-          .searchClear {
-            position: absolute;
-            top: 0;
-            right: 0;
-            cursor: pointer;
-            width: 30px;
-            height: 30px;
-            z-index: 2;
-            display: flex;
-            justify-content: center;
-            align-items: center;
+        .searchBoxAcBox {
+          padding: 0px 0 12px;
+          border-bottom: 1px solid #C7AA68;
+
+          .searchBoxAcMain {
+            width: 100%;
+            overflow-x: auto;
+
+            &::-webkit-scrollbar {
+              width: 6px;
+              height: 6px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+              border-radius: 10px;
+              background-color: #c1a463;
+            }
+
+            &::-webkit-scrollbar-track {
+              border-radius: 10px;
+            }
+
+            .appSw {
+              background-color: #9F5342;
+              // display: flex;
+
+              // flex-wrap: wrap;
+              .swiper-slide {
+                // display: inline-block;
+                width: auto !important;
+
+                .row {
+                  cursor: pointer;
+                  padding: 8px 30px;
+                  color: #E1CEA4;
+                  font-size: 14px;
+                  position: relative;
+
+                  &::before {
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    width: 1px;
+                    height: 16px;
+                    background-color: #E1CEA4;
+                  }
+                }
+
+                &:last-child {
+                  .row {
+                    &::before {
+                      background-color: transparent;
+                    }
+                  }
+                }
+              }
+
+
+
+              .active {
+                background-color: #C1A463;
+                color: #fff;
+                pointer-events: none;
+              }
+            }
           }
         }
 
-        .sortBox {
-          margin: 0 40px;
-        }
-      }
+        .seatchinputBox {
+          height: 40px;
+          margin: 10px 0 15px;
+          display: flex;
 
+          .search {
+            // background-color: #fff;
+            background-image: url('../../assets/img/Union.png');
+            background-size: 100% 100%;
+            position: relative;
+            width: calc(100% - 120px);
+            padding-left: 10px;
+
+            .ant-input-affix-wrapper {
+              background-color: transparent;
+              border: none;
+              height: 40px;
+              line-height: 40px;
+            }
 
+            .ant-input-affix-wrapper-focused,
+            .ant-input-affix-wrapper:focus {
+              box-shadow: none
+            }
 
-      .modelBox::-webkit-scrollbar {
-        width: 6px;
-      }
+            .searchBtn {
+              position: absolute;
+              top: 5px;
+              left: 0;
+              cursor: pointer;
+              width: 30px;
+              height: 30px;
+              z-index: 2;
+            }
 
-      .modelBox::-webkit-scrollbar-thumb {
-        border-radius: 10px;
-        background-color: #741A1A;
-      }
+            .searchClear {
+              position: absolute;
+              top: 5px;
+              right: 0;
+              cursor: pointer;
+              width: 30px;
+              height: 30px;
+              z-index: 2;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+          }
+
+          .rightBtn {
+            width: 120px;
+            height: 100%;
+            cursor: pointer;
+            background-image: url('../../assets/img/Intersect.png');
+            background-size: 100% 100%;
+            color: #fff;
+            font-size: 16px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
 
-      .modelBox::-webkit-scrollbar-track {
-        border-radius: 10px;
       }
 
       .modelBox {
-        border-radius: 3px 3px 0 0;
-        margin-top: 10px;
-        box-shadow: 0px 0px 5px 3px #ccc;
-        background-color: rgba(255, 255, 255, 0.5000);
+        // border-radius: 3px 3px 0 0;
+        // margin-top: 10px;
+        // box-shadow: 0px 0px 5px 3px #ccc;
+        // background-color: rgba(255, 255, 255, 0.5000);
         width: 100%;
-        height: calc(100% - 50px);
-        overflow-y: auto;
+        // height: calc(100% - 300px);
+        // overflow-y: auto;
         display: flex;
         flex-wrap: wrap;
-        padding: 20px 15px 0;
+        // padding: 0px 15px 0;
 
         .modelBox_row {
           border-radius: 6px;
@@ -129,7 +271,7 @@
           width: 264px;
           height: 264px;
           background-color: #CFCABD;
-          margin: 0 10px 10px 0;
+          margin: 0 20px 20px 0;
           position: relative;
 
           .modelBox_row_hover {
@@ -145,7 +287,7 @@
             font-size: 24px;
             line-height: 34px;
             backdrop-filter: blur(4px);
-            background-color: rgba(0,0,0,.8);
+            background-color: rgba(0, 0, 0, .8);
             position: absolute;
             top: 0;
             left: 0;
@@ -155,6 +297,8 @@
           }
 
           &:hover {
+            // background-color: #C1A463;
+
             .modelBox_row_hover {
               opacity: 1;
             }
@@ -198,6 +342,7 @@
         .noneList {
           width: 100%;
           height: 100%;
+          height: 500px;
           display: flex;
           justify-content: center;
           align-items: center;

webNew/src/pages/Home/index.tsx

@@ -2,7 +2,7 @@ import { baseURL } from "@/utils/http";
 import classNames from "classnames";
 import styles from "./index.module.scss";
 import logoImg from "@/assets/img/logo.png";
-import { Input, Pagination, Select } from "antd";
+import { Input, Pagination } from "antd";
 import {
   SearchOutlined,
   ExclamationOutlined,
@@ -18,6 +18,15 @@ import {
 } from "@/store/action/home";
 import { RootState } from "@/store";
 import Model from "@/components/Model";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+
+import { FreeMode, Mousewheel } from "swiper";
+// Import Swiper styles
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/mousewheel";
+
 export default function Home() {
   const dispatch = useDispatch();
   // 进页面获取后端文物数据
@@ -66,12 +75,16 @@ export default function Home() {
   );
   const { list, total } = modelInfo;
 
+  // 选中全部分类 或是年代
+  const [acSelect, setAcSelect] = useState(0);
+
   // 分类
   const [sort, setSort] = useState(-1);
   // 分类下拉框改变
   const sortChangeFu = (value: number) => {
     setSort(value);
   };
+
   // 年代
   const [ageSerach, setAgeSerach] = useState(-1);
   // 年代下拉框改变
@@ -144,48 +157,103 @@ export default function Home() {
         </div>
       </div>
       <div className="mainBox">
-        {/* 筛选的盒子 */}
-        <div className="screenBox">
-          {/* 输入框 */}
-          <div className="search">
-            <div className="searchBtn" onClick={searchBtnFu}></div>
-            {value.length > 0 ? (
-              <div className="searchClear" onClick={clearValueFu}>
-                <CloseCircleOutlined />
-              </div>
-            ) : null}
-
-            <Input
-              maxLength={10}
-              placeholder="请输入文物名称"
-              value={value}
-              onChange={(e) => setValue(e.target.value)}
-              onKeyUp={(e) => searchKeyUpFu(e)}
-              prefix={<SearchOutlined />}
-            />
+        <div className="searchBox">
+          <div className="searchBoxTop">
+            <div
+              className={classNames(acSelect === 0 ? "active" : "")}
+              onClick={() => setAcSelect(0)}
+            >
+              全部分类
+            </div>
+            <div
+              className={classNames(acSelect === 1 ? "active" : "")}
+              onClick={() => setAcSelect(1)}
+            >
+              全部年代
+            </div>
           </div>
+          {/* 选中出来的选项 */}
+          <div className="searchBoxAcBox">
+            <div className="searchBoxAcMain">
+              <Swiper
+                modules={[FreeMode, Mousewheel]}
+                hidden={acSelect !== 0}
+                className="appSw"
+                spaceBetween={0}
+                slidesPerView="auto"
+                freeMode={true}
+                mousewheel={true}
+                // onSlideChange={(e) => console.log("slide change", e)}
+                // onSwiper={(swiper) => (mySwiperRef.current = swiper)}
+              >
+                {sortList.map((v) => (
+                  <SwiperSlide key={v.label}>
+                    <div
+                      onClick={() => sortChangeFu(v.value!)}
+                      className={classNames(
+                        "row",
+                        sort === v.value ? "active" : ""
+                      )}
+                    >
+                      {v.label}
+                    </div>
+                  </SwiperSlide>
+                ))}
+              </Swiper>
 
-          {/* 分类下拉框 */}
-          <div className="sortBox">
-            <Select
-              style={{ width: "100%" }}
-              value={sort}
-              onChange={sortChangeFu}
-              options={sortList}
-            />
-          </div>
+              <Swiper
+                modules={[FreeMode, Mousewheel]}
+                hidden={acSelect !== 1}
+                className="appSw"
+                spaceBetween={0}
+                slidesPerView="auto"
+                freeMode={true}
+                mousewheel={true}
+                // onSlideChange={(e) => console.log("slide change", e)}
+                // onSwiper={(swiper) => (mySwiperRef.current = swiper)}
+              >
+                {ageList.map((v) => (
+                  <SwiperSlide key={v.label}>
+                    <div
+                      onClick={() => ageChangeFu(v.value!)}
+                      className={classNames(
+                        "row",
+                        ageSerach === v.value ? "active" : ""
+                      )}
+                    >
+                      {v.label}
+                    </div>
+                  </SwiperSlide>
+                ))}
+              </Swiper>
 
-          {/* 年代筛选下拉框 */}
-          <div className="ageSeachBox">
-            <Select
-              style={{ width: "100%" }}
-              value={ageSerach}
-              onChange={ageChangeFu}
-              options={ageList}
-            />
+            </div>
+          </div>
+          {/* 输入框 */}
+          <div className="seatchinputBox">
+            <div className="search">
+              <div className="searchBtn" onClick={searchBtnFu}></div>
+              {value.length > 0 ? (
+                <div className="searchClear" onClick={clearValueFu}>
+                  <CloseCircleOutlined />
+                </div>
+              ) : null}
+              <Input
+                maxLength={10}
+                placeholder="搜索关键词"
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                onKeyUp={(e) => searchKeyUpFu(e)}
+                prefix={<SearchOutlined />}
+              />
+            </div>
+            <div className="rightBtn" onClick={searchBtnFu}>
+              搜 索
+            </div>
           </div>
         </div>
 
+
         {/* 页面渲染主体 */}
         <div className="modelBox" ref={modelBoxRef}>
           {list && list.length > 0 ? (

webNew/src/store/action/home.ts

@@ -1,61 +1,57 @@
-import store, { AppDispatch } from ".."
-import http from "@/utils/http"
-import { HomeSortType } from "@/types"
+import store, { AppDispatch } from "..";
+import http from "@/utils/http";
+import { HomeSortType } from "@/types";
 
 // 获取分类
 export const getSortAction = () => {
-
   return async (dispatch: AppDispatch) => {
-    const res = await http.post('/api/show/getTree', { type: 'texture' })
+    const res = await http.post("/api/show/getTree", { type: "texture" });
     let data = res.data.map((v: HomeSortType) => ({
       ...v,
       value: v.id,
-      label: v.name
-    }))
-    data.unshift({ value: -1, label: '全部分类' })
-    dispatch({ type: 'home/setSort', payload: data })
-  }
-}
+      label: v.name,
+    }));
+    data.unshift({ value: -1, label: "全部" });
+    dispatch({ type: "home/setSort", payload: data });
+  };
+};
 
 // 获取年代
 export const getAgeAction = () => {
-
   return async (dispatch: AppDispatch) => {
-    const res = await http.post('/api/show/getTree', { type: 'age' })
+    const res = await http.post("/api/show/getTree", { type: "age" });
 
     let data = res.data.map((v: HomeSortType) => ({
       ...v,
       value: v.id,
-      label: v.name
-    }))
-    data.unshift({ value: -1, label: '全部年代' })
-    dispatch({ type: 'home/setAge', payload: data })
-  }
-}
-
+      label: v.name,
+    }));
+    data.unshift({ value: -1, label: "全部" });
+    dispatch({ type: "home/setAge", payload: data });
+  };
+};
 
 // 获取列表数据
 export const getListAction = (data: any, flag?: boolean) => {
-
   return async (dispatch: AppDispatch) => {
-    const res = await http.post('/api/show/goods/list', data)
-    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 } })
-
-  }
-}
-
+    const res = await http.post("/api/show/goods/list", data);
+    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 } });
+  };
+};
 
 // 扫码进页面获取的单个文物详情
 export const getModelInfo = (id: string) => {
   return async (dispatch: AppDispatch) => {
-    const res = await http.get(`/api/show/goods/detail/${id}`)
-    dispatch({ type: 'home/Model', payload: res.data })
-  }
-}
-
-
+    const res = await http.get(`/api/show/goods/detail/${id}`);
+    dispatch({ type: "home/Model", payload: res.data });
+  };
+};