Home Explore Help
Register Sign In
shaogen1995
/
HNBWY_Model
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

up

shaogen1995 2 years ago
parent
6719c6258a
commit
b2d04ccede
10 changed files with 6912 additions and 60 deletions
Unified View Show Diff Stats
  1. 1 1
      houtai/src/views/tab2/index.vue
  2. 6539 0
      webNew/public/4dage.js
  3. 34 0
      webNew/public/model.html
  4. BIN
      webNew/src/assets/img/modelBac.png
  5. BIN
      webNew/src/assets/img/txtBac.png
  6. 4 8
      webNew/src/assets/styles/base.css
  7. 130 0
      webNew/src/components/Model/index.module.scss
  8. 67 0
      webNew/src/components/Model/index.tsx
  9. 100 36
      webNew/src/pages/Home/index.module.scss
  10. 37 15
      webNew/src/pages/Home/index.tsx

+ 1 - 1
houtai/src/views/tab2/index.vue
View File 

@@ -78,7 +78,7 @@
 
 
 
           <span class="search_k">创建时间：</span>
 
           <span class="search_k">创建时间：</span>
 
           <el-date-picker
 
           <el-date-picker
 
-            style="width: 240px"
 
+            style="width: 257px;padding-right: 0px;"
 
             v-model="time"
 
             v-model="time"
 
             type="daterange"
 
             type="daterange"
 
             range-separator="-"
 
             range-separator="-"

File diff suppressed because it is too large
+ 6539 - 0
webNew/public/4dage.js


+ 34 - 0
webNew/public/model.html
View File 

@@ -0,0 +1,34 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <script src="./4dage.js"></script>
 
+  <title>Document</title>
 
+  <style>
 
+    html {
 
+      overflow: hidden;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="ui">
 
+  </div>
 
+  <script>
 
+    let number = getQueryVariable("m");
 
+    window.autoRotate = true; // 是否自动旋转
 
+    fdage.embed('http://hnbwg.4dage.com/goods/model/' + number, {
 
+      transparentBackground: true,
 
+      width: 800,
 
+      height: 600,
 
+      autoStart: true,
 
+      fullFrame: true,
 
+      pagePreset: false
 
+    });
 
+  </script>
 
+</body>
 
+
 
+</html>

BIN
webNew/src/assets/img/modelBac.png
View File


BIN
webNew/src/assets/img/txtBac.png
View File


+ 4 - 8
webNew/src/assets/styles/base.css
View File 

@@ -43,31 +43,27 @@ ul {
 
 }
 
 }
 
 
 
 /*修改提示文字的颜色*/
 
 /*修改提示文字的颜色*/
 
-.ant-input::-webkit-input-placeholder {
 
-  /* WebKit browsers */
 
+/* .ant-input::-webkit-input-placeholder {
 
   color: rgba(0, 0, 0, 0.6);
 
   color: rgba(0, 0, 0, 0.6);
 
 }
 
 }
 
 
 
 .ant-input:-moz-placeholder {
 
 .ant-input:-moz-placeholder {
 
-  /* Mozilla Firefox 4 to 18 */
 
   color: rgba(0, 0, 0, 0.6);
 
   color: rgba(0, 0, 0, 0.6);
 
 }
 
 }
 
 
 
 .ant-input::-moz-placeholder {
 
 .ant-input::-moz-placeholder {
 
-  /* Mozilla Firefox 19+ */
 
   color: rgba(0, 0, 0, 0.6);
 
   color: rgba(0, 0, 0, 0.6);
 
 }
 
 }
 
 
 
 .ant-input:-ms-input-placeholder {
 
 .ant-input:-ms-input-placeholder {
 
-  /* Internet Explorer 10+ */
 
   color: rgba(0, 0, 0, 0.6);
 
   color: rgba(0, 0, 0, 0.6);
 
-}
 
+} */
 
 
 
 
 
-.ant-input-affix-wrapper {
 
+/* .ant-input-affix-wrapper {
 
   background-color: rgba(255, 255, 255, 0.7000);
 
   background-color: rgba(255, 255, 255, 0.7000);
 
   border: none;
 
   border: none;
 
-}
 
+} */
 
 
 
 .ant-input-affix-wrapper:focus,
 
 .ant-input-affix-wrapper:focus,
 
 .ant-input-affix-wrapper-focused {
 
 .ant-input-affix-wrapper-focused {

+ 130 - 0
webNew/src/components/Model/index.module.scss
View File 

@@ -0,0 +1,130 @@
 
+.Model {
 
+  width: 100%;
 
+  height: 100%;
 
+  background-image: url('../../assets/img/modelBac.png');
 
+  background-size: 100% 100%;
 
+  background-color: #fff;
 
+
 
+  :global {
 
+    .ifrBox {
 
+      position: absolute;
 
+      top: 0;
 
+      left: 0;
 
+      width: 100%;
 
+      height: 100%;
 
+
 
+      iframe {
 
+        width: 100%;
 
+        height: 100%;
 
+      }
 
+    }
 
+
 
+    .rightTxt {
 
+      position: absolute;
 
+      z-index: 2;
 
+      top: 60px;
 
+      right: 60px;
 
+      width: 300px;
 
+      height: 465px;
 
+      background-image: url('../../assets//img//txtBac.png');
 
+      background-size: 100% 100%;
 
+
 
+      &::before {
 
+        content: "";
 
+        position: absolute;
 
+        left: 17px;
 
+        top: 98px;
 
+        width: 1px;
 
+        height: 346px;
 
+        background-color: #BE262B;
 
+      }
 
+
 
+      .model_title {
 
+        display: flex;
 
+        flex-direction: column;
 
+        justify-content: center;
 
+        align-items: center;
 
+        text-align: center;
 
+        letter-spacing: 4px;
 
+        writing-mode: tb-rl;
 
+        position: absolute;
 
+        top: 27px;
 
+        right: 30px;
 
+        width: 54px;
 
+        height: 290px;
 
+        color: #020101;
 
+        font-weight: 700;
 
+        font-size: 24px;
 
+      }
 
+
 
+      .model_txt::-webkit-scrollbar {
 
+        width: 3px;
 
+      }
 
+
 
+      .model_txt::-webkit-scrollbar-thumb {
 
+        border-radius: 10px;
 
+        background-color: #a7191e;
 
+      }
 
+
 
+      .model_txt::-webkit-scrollbar-track {
 
+        border-radius: 10px;
 
+      }
 
+
 
+      .model_txt {
 
+        padding-left: 10px;
 
+        position: absolute;
 
+        left: 17px;
 
+        top: 98px;
 
+        width: 176px;
 
+        height: 310px;
 
+        overflow-y: auto;
 
+        font-size: 16px;
 
+      }
 
+
 
+      .model_age {
 
+        text-align: center;
 
+        position: absolute;
 
+        bottom: 14px;
 
+        padding-bottom: 6px;
 
+        border-bottom: 2px solid #a7191e;
 
+        right: 110px;
 
+        font-size: 16px;
 
+        cursor: pointer;
 
+        width: 150px;
 
+        overflow: hidden;
 
+        text-overflow: ellipsis;
 
+        white-space: nowrap;
 
+      }
 
+      .model_size{
 
+        transform: scale(.9);
 
+        position: absolute;
 
+        right: 9px;
 
+        bottom: 15px;
 
+        width: 70px;
 
+        height: 93px;
 
+        font-size: 14px;
 
+        &>div{
 
+          cursor: pointer;
 
+          width: 100%;
 
+          overflow: hidden;
 
+          text-overflow: ellipsis;
 
+          white-space: nowrap;
 
+          margin-bottom: 5px;
 
+        }
 
+      }
 
+    }
 
+    .flootBtnBox{
 
+      position: absolute;
 
+      z-index: 10;
 
+      bottom: 60px;
 
+      right: 60px;
 
+      display: flex;
 
+      .flootRow{
 
+        width: 40px;
 
+        height: 40px;
 
+        cursor: pointer;
 
+        margin-right: 6px;
 
+      }
 
+    }
 
+  }
 
+}

+ 67 - 0
webNew/src/components/Model/index.tsx
View File 

@@ -0,0 +1,67 @@
 
+/* eslint-disable jsx-a11y/iframe-has-title */
 
+import { RootState } from '@/store';
 
+import { modelItem } from '@/types';
 
+import { useEffect, useState } from 'react';
 
+import { useSelector } from 'react-redux';
 
+import styles from './index.module.scss'
 
+
 
+type props = {
 
+  modelId: number,
 
+  closeModel: () => void
 
+}
 
+export default function Model({ modelId, closeModel }: props) {
 
+
 
+  const { modelInfo } = useSelector((state: RootState) => state.homeStore)
 
+  const { list } = modelInfo
 
+  const [info, setInfo] = useState({} as modelItem)
 
+
 
+  const closeModelFu =()=>{
 
+    setInfo({} as modelItem)
 
+    closeModel()
 
+  }
 
+  useEffect(() => {
 
+    if (modelId) {
 
+      // eslint-disable-next-line react-hooks/exhaustive-deps
 
+      const info = list.filter(v => v.id === modelId)[0]
 
+      setInfo(info)
 
+      console.log('-------', info);
 
+    }
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
 
+  }, [modelId])
 
+
 
+  return (
 
+    <div className={styles.Model}>
 
+      <div className='ifrBox'>
 
+        {info.fileName?(<iframe src={`model.html?m=${info.fileName}`} frameBorder='no'></iframe>):null}
 
+        
+      </div>
 
+      <div className='rightTxt'>
 
+        <div className='model_title'>{info.name}</div>
 
+        {
 
+        info.description ? (<div className='model_txt' dangerouslySetInnerHTML={{ __html: info.description }}></div>) : <div className='model_txt'>暂无信息</div>
 
+        }
 
+        {
 
+          info.dictAgeFront ? (<div className='model_age' title={info.dictAgeFront}>年代：{info.dictAgeFront}</div>) : <div className='model_age'>暂无信息</div>
 
+        }
 
+        {
 
+          <div className='model_size'>
 
+            {info.sizeLength||info.sizeWidth||info.sizeHeight?(<div>尺寸</div>):'暂无信息'}
 
+            {info.sizeLength?(<div>长 {info.sizeLength.replace(',','')}</div>):null}
 
+            {info.sizeWidth?(<div>宽 {info.sizeWidth.replace(',','')}</div>):null}
 
+            {info.sizeHeight?(<div>高 {info.sizeHeight.replace(',','')}</div>):null}
 
+          </div>
 
+        }
 
+
 
+      </div>
 
+
 
+        <div className='flootBtnBox'>
 
+        <div className='flootRow'>+</div>
 
+        <div className='flootRow'>-</div>
 
+        <div className='flootRow'>1</div>
 
+        <div className='flootRow'>2</div>
 
+        <div className='flootRow' onClick={() => closeModelFu()}>3</div>
 
+        </div>
 
+          
+    </div>
 
+  )
 
+}

+ 100 - 36
webNew/src/pages/Home/index.module.scss
View File 

@@ -4,6 +4,25 @@
 
   background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(207, 202, 189, 1));
 
   background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(207, 202, 189, 1));
 
 
 
   :global {
 
   :global {
 
+
 
+    .modelTxtBox {
 
+      z-index: 10;
 
+      opacity: 0;
 
+      pointer-events: none;
 
+      transition: opacity .3s;
 
+      position: fixed;
 
+      top: 0;
 
+      left: 0;
 
+      width: 100vw;
 
+      height: 100vh;
 
+    }
 
+
 
+    .activeTxtBox {
 
+      opacity: 1;
 
+      pointer-events: auto;
 
+    }
 
+
 
+
 
     .title {
 
     .title {
 
       width: 100%;
 
       width: 100%;
 
       height: 90px;
 
       height: 90px;
 
@@ -24,43 +43,53 @@
 
 
 
     .mainBox {
 
     .mainBox {
 
       width: 1400px;
 
       width: 1400px;
 
-      margin: 70px auto;
 
+      margin: 10px auto 50px;
 
       height: calc(100% - 170px);
 
       height: calc(100% - 170px);
 
       position: relative;
 
       position: relative;
 
 
 
-      .search {
 
-        position: absolute;
 
-        right: 0px;
 
-        top: -130px;
 
-        width: 270px;
 
-        height: 30px;
 
 
 
-        .searchBtn {
 
-          position: absolute;
 
-          top: 0;
 
-          left: 0;
 
-          cursor: pointer;
 
-          width: 30px;
 
-          height: 30px;
 
-          z-index: 2;
 
-        }
 
-        .searchClear{
 
+
 
+      .screenBox {
 
+        border-radius: 0 0 3px 3px;
 
+        border-top: 6px solid #D9D9D9;
 
+        box-shadow: 0px 0px 5px 3px #ccc;
 
+        padding: 10px 24px;
 
+
 
+        .search {
 
           position: absolute;
 
           position: absolute;
 
-          top: 0;
 
-          right: 0;
 
-          cursor: pointer;
 
-          width: 30px;
 
+          right: 0px;
 
+          top: -75px;
 
+          width: 300px;
 
           height: 30px;
 
           height: 30px;
 
-          z-index: 2;
 
-          display: flex;
 
-          justify-content: center;
 
-          align-items: center;
 
+
 
+          .searchBtn {
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            cursor: pointer;
 
+            width: 30px;
 
+            height: 30px;
 
+            z-index: 2;
 
+          }
 
+
 
+          .searchClear {
 
+            position: absolute;
 
+            top: 0;
 
+            right: 0;
 
+            cursor: pointer;
 
+            width: 30px;
 
+            height: 30px;
 
+            z-index: 2;
 
+            display: flex;
 
+            justify-content: center;
 
+            align-items: center;
 
+          }
 
         }
 
         }
 
       }
 
       }
 
 
 
       .sortBox {
 
       .sortBox {
 
+        background-color: #F8F8F8;
 
         font-size: 18px;
 
         font-size: 18px;
 
-        display: flex;
 
         position: relative;
 
         position: relative;
 
         transition: height .3s;
 
         transition: height .3s;
 
         overflow: hidden;
 
         overflow: hidden;
 
@@ -69,10 +98,10 @@
 
         &::before {
 
         &::before {
 
           position: absolute;
 
           position: absolute;
 
           content: "";
 
           content: "";
 
-          bottom: 0px;
 
+          bottom: 1px;
 
           left: 0;
 
           left: 0;
 
           width: 100%;
 
           width: 100%;
 
-          height: 4px;
 
+          height: 2px;
 
           background-color: rgba(217, 217, 217, 1);
 
           background-color: rgba(217, 217, 217, 1);
 
         }
 
         }
 
 
 
@@ -80,7 +109,7 @@
 
           position: absolute;
 
           position: absolute;
 
           left: 0;
 
           left: 0;
 
           top: 42px;
 
           top: 42px;
 
-          width: 1200px;
 
+          width: 1300px;
 
           height: 2px;
 
           height: 2px;
 
           background-color: rgba(217, 217, 217, 1);
 
           background-color: rgba(217, 217, 217, 1);
 
         }
 
         }
 
@@ -91,6 +120,7 @@
 
           position: absolute;
 
           position: absolute;
 
           top: 10px;
 
           top: 10px;
 
           padding-bottom: 5px;
 
           padding-bottom: 5px;
 
+          font-weight: 700;
 
 
 
           &.activeAll {
 
           &.activeAll {
 
             border-bottom: 4px solid #BE262B;
 
             border-bottom: 4px solid #BE262B;
 
@@ -99,8 +129,8 @@
 
 
 
 
 
         .sortBox_left {
 
         .sortBox_left {
 
-          padding-left: 60px;
 
-          width: 1230px;
 
+          padding-left: 100px;
 
+          width: 1330px;
 
           display: flex;
 
           display: flex;
 
           flex-wrap: wrap;
 
           flex-wrap: wrap;
 
 
 
@@ -143,6 +173,36 @@
 
         }
 
         }
 
       }
 
       }
 
 
 
+
 
+      // 年代
 
+      .ageBox {
 
+        margin-top: 16px;
 
+        font-size: 18px;
 
+        display: flex;
 
+        position: relative;
 
+
 
+        &::before {
 
+          position: absolute;
 
+          content: "";
 
+          bottom: 1px;
 
+          left: 0;
 
+          width: 520px;
 
+          height: 2px;
 
+          background-color: rgba(217, 217, 217, 1);
 
+        }
 
+
 
+        .ageBoxAll {
 
+          cursor: pointer;
 
+          font-weight: 700;
 
+        }
 
+
 
+        .ageRow {
 
+          cursor: pointer;
 
+          margin-left: 26px;
 
+          padding-bottom: 10px;
 
+        }
 
+      }
 
+
 
       .modelBox::-webkit-scrollbar {
 
       .modelBox::-webkit-scrollbar {
 
         width: 6px;
 
         width: 6px;
 
       }
 
       }
 
@@ -157,7 +217,8 @@
 
       }
 
       }
 
 
 
       .modelBox {
 
       .modelBox {
 
-        margin-top: 20px;
 
+        border-radius: 3px 3px 0 0;
 
+        margin-top: 10px;
 
         box-shadow: 0px 0px 5px 3px #ccc;
 
         box-shadow: 0px 0px 5px 3px #ccc;
 
         background-color: rgba(255, 255, 255, 0.5000);
 
         background-color: rgba(255, 255, 255, 0.5000);
 
         width: 100%;
 
         width: 100%;
 
@@ -174,7 +235,7 @@
 
           width: 300px;
 
           width: 300px;
 
           height: 300px;
 
           height: 300px;
 
           background-color: #CFCABD;
 
           background-color: #CFCABD;
 
-          margin: 0 40px 60px 0;
 
+          margin: 0 40px 40px 0;
 
 
 
           &:nth-of-type(4n) {
 
           &:nth-of-type(4n) {
 
             margin-right: 0;
 
             margin-right: 0;
 
@@ -210,14 +271,16 @@
 
             }
 
             }
 
           }
 
           }
 
         }
 
         }
 
-        .noneList{
 
+
 
+        .noneList {
 
           width: 100%;
 
           width: 100%;
 
           height: 100%;
 
           height: 100%;
 
           display: flex;
 
           display: flex;
 
           justify-content: center;
 
           justify-content: center;
 
           align-items: center;
 
           align-items: center;
 
           flex-direction: column;
 
           flex-direction: column;
 
-          .incoBox{
 
+
 
+          .incoBox {
 
             font-size: 24px;
 
             font-size: 24px;
 
             display: flex;
 
             display: flex;
 
             justify-content: center;
 
             justify-content: center;
 
@@ -230,7 +293,8 @@
 
             color: #fff;
 
             color: #fff;
 
             font-weight: 700;
 
             font-weight: 700;
 
           }
 
           }
 
-          &>p{
 
+
 
+          &>p {
 
             font-weight: 700;
 
             font-weight: 700;
 
             font-size: 20px;
 
             font-size: 20px;
 
           }
 
           }

+ 37 - 15
webNew/src/pages/Home/index.tsx
View File 

@@ -9,6 +9,7 @@ import { LazyLoadImage } from "react-lazy-load-image-component";
 
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useDispatch, useSelector } from 'react-redux';
 
 import { getListAction, getSortAction } from '@/store/action/home';
 
 import { getListAction, getSortAction } from '@/store/action/home';
 
 import { RootState } from '@/store';
 
 import { RootState } from '@/store';
 
+import Model from '@/components/Model'
 
 export default function Home() {
 
 export default function Home() {
 
 
 
   const dispatch = useDispatch()
 
   const dispatch = useDispatch()
 
@@ -27,6 +28,8 @@ export default function Home() {
 
   const clearValueFu = () => {
 
   const clearValueFu = () => {
 
     setValue('')
 
     setValue('')
 
     setPageNum(1)
 
     setPageNum(1)
 
+    const sroolDom = modelBoxRef.current
 
+    sroolDom!.scrollTop = 0
 
     dispatch(getListAction({ ...fromData.current, dictTextureId: fromData.current.dictTextureId === -1 ? null : fromData.current.dictTextureId, searchKey: '', pageNum: 1 }))
 
     dispatch(getListAction({ ...fromData.current, dictTextureId: fromData.current.dictTextureId === -1 ? null : fromData.current.dictTextureId, searchKey: '', pageNum: 1 }))
 
 
 
   }
 
   }
 
@@ -64,22 +67,34 @@ export default function Home() {
 
   }
 
   }
 
   useEffect(() => {
 
   useEffect(() => {
 
     fromData.current.dictTextureId = sort
 
     fromData.current.dictTextureId = sort
 
-    fromData.current.pageNum=1
 
+    fromData.current.pageNum = 1
 
     setPageNum(1)
 
     setPageNum(1)
 
     getModelList()
 
     getModelList()
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [sort])
 
   }, [sort])
 
 
 
+  // 点击每个模型出来的页面
 
+  const [modelId, setModelId] = useState(0)
 
+
 
   return (
 
   return (
 
     <div className={styles.Home}>
 
     <div className={styles.Home}>
 
+
 
+      {/* 点击单个模型出来的详情页面 */}
 
+      <div className={classNames('modelTxtBox', modelId ? 'activeTxtBox' : '')}>
 
+        <Model modelId={modelId} closeModel={() => setModelId(0)} />
 
+      </div>
 
+
 
       <div className='title'>
 
       <div className='title'>
 
         <div className='logo'>
 
         <div className='logo'>
 
           <img src={logoImg} alt="" />
 
           <img src={logoImg} alt="" />
 
         </div>
 
         </div>
 
 
 
       </div>
 
       </div>
 
-      {/* 分类选择 */}
 
       <div className='mainBox'>
 
       <div className='mainBox'>
 
+
 
+      {/* 筛选的盒子 */}
 
+        <div className='screenBox'>
 
+
 
         {/* 输入框 */}
 
         {/* 输入框 */}
 
         <div className='search'>
 
         <div className='search'>
 
           <div className='searchBtn' onClick={searchBtnFu}></div>
 
           <div className='searchBtn' onClick={searchBtnFu}></div>
 
@@ -87,22 +102,29 @@ export default function Home() {
 
             <CloseCircleOutlined />
 
             <CloseCircleOutlined />
 
           </div>) : null}
 
           </div>) : null}
 
 
 
-          <Input maxLength={10} placeholder='搜查文物' value={value} onChange={(e) => setValue(e.target.value)} onKeyUp={(e) => searchKeyUpFu(e)} prefix={<SearchOutlined />} />
 
+          <Input maxLength={10} placeholder='请输入文物名称' value={value} onChange={(e) => setValue(e.target.value)} onKeyUp={(e) => searchKeyUpFu(e)} prefix={<SearchOutlined />} />
 
         </div>
 
         </div>
 
 
 
-        {/* 筛选分类 */}
 
-        <div className='sortBox' style={{ height: sortAll ? '90px' : '46px' }}>
 
-          <div className='xian' hidden={!sortAll}></div>
 
-          <div className={classNames('all', sort === -1 ? 'activeAll' : '')} onClick={() => setSort(-1)}>全部</div>
 
-          <div className='sortBox_left'>
 
-            {sortList.map((item) => (
 
-              <div className={classNames(sort === item.id ? 'active' : '')} onClick={() => setSort(item.id)} key={item.id}>{item.name}</div>
 
-            ))}
 
-          </div>
 
-          <div className='sortBox_right' onClick={() => setSortAll(!sortAll)}>
 
-            {sortAll ? <DownOutlined /> : <UpOutlined />}
 
+          {/* <div className='sortBox' style={{ height: sortAll ? '90px' : '46px' }}>
 
+            <div className='xian' hidden={!sortAll}></div>
 
+            <div className={classNames('all', sort === -1 ? 'activeAll' : '')} onClick={() => setSort(-1)}>全部类别</div>
 
+            <div className='sortBox_left'>
 
+              {sortList.map((item) => (
 
+                <div className={classNames(sort === item.id ? 'active' : '')} onClick={() => setSort(item.id)} key={item.id}>{item.name}</div>
 
+              ))}
 
+            </div>
 
+            <div className='sortBox_right' onClick={() => setSortAll(!sortAll)}>
 
+              {sortAll ? <DownOutlined /> : <UpOutlined />}
 
+            </div>
 
 
 
           </div>
 
           </div>
 
+
 
+          <div className='ageBox'>
 
+            <div className='ageBoxAll'>全部年代</div>
 
+            {[1, 2, 3].map(item => (
 
+              <div className='ageRow' key={item}>{'中华明国年代' + item}</div>
 
+            ))}
 
+          </div> */}
 
         </div>
 
         </div>
 
 
 
         {/* 页面渲染主体 */}
 
         {/* 页面渲染主体 */}
 
@@ -110,7 +132,7 @@ export default function Home() {
 
           {
 
           {
 
             list && list.length > 0 ?
 
             list && list.length > 0 ?
 
               list.map(item => (
 
               list.map(item => (
 
-                <div className='modelBox_row' key={item.id}>
 
+                <div className='modelBox_row' key={item.id} onClick={() => setModelId(item.id)}>
 
                   <LazyLoadImage src={baseURL + item.thumb}
 
                   <LazyLoadImage src={baseURL + item.thumb}
 
                     width={300} height={260}
 
                     width={300} height={260}
 
                     alt=""
 
                     alt=""