style: 修改视图样式

webNew/public/model.html

@@ -36,8 +36,8 @@
     console.log('ppppppppp',number);
 
     window.autoRotate = true; // 是否自动旋转
-    // fdage.embed( number, {
-    fdage.embed('https://hnbwg.4dage.com' + number, {
+    fdage.embed( number, {
+    // fdage.embed('https://hnbwg.4dage.com' + number, {
       transparentBackground: true,
       width: 800,
       height: 600,

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

@@ -1,17 +1,15 @@
 .Model {
   width: 100%;
   height: 100%;
-  background-image: url('../../assets/img/modelBac.png');
-  background-size: 100% 100%;
-  background-color: #fff;
+  background-color: #f1ebd5;
 
   :global {
     .ifrBox {
       position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
+      top: 20px;
+      left: 20px;
+      width: calc(100% - 40px);
+      height: calc(100% - 40px);
 
       iframe {
         width: 100%;
@@ -19,143 +17,79 @@
       }
     }
 
-    .rightTxt {
+    .logo {
       position: absolute;
-      z-index: 2;
-      top: 60px;
+      top: 50px;
+      left: 50px;
+      z-index: 1;
+    }
+
+    .right-info {
+      position: absolute;
+      top: 50px;
       right: 50px;
-      width: 300px;
-      height: 465px;
-      background-image: url('../../assets//img//txtBac.png');
-      background-size: 100% 100%;
+      display: flex;
+      align-items: flex-start;
+      color: #020101;
+      font-family: '楷体';
+      z-index: 2;
 
       &::before {
-        content: "";
+        content: '';
         position: absolute;
-        left: 17px;
-        top: 76px;
-        width: 1px;
-        height: 327px;
-        background-color: #741A1A;
-      }
-
-      .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: 28px;
-        right: 30px;
-        width: 55px;
-        height: 289px;
-        color: #020101;
-        font-weight: 700;
+        top: 7px;
+        left: -14px;
+        width: 4px;
+        height: 22px;
+        background-color: #BE262B;
+      }
+      &_name {
+        position: relative;
+        padding-bottom: 5px;
         font-size: 24px;
-      }
-
-      .model_txt::-webkit-scrollbar {
-        width: 2px;
-      }
-
-      .model_txt::-webkit-scrollbar-thumb {
-        border-radius: 10px;
-        background-color: #741A1A;
-      }
-
-      .model_txt::-webkit-scrollbar-track {
-        border-radius: 10px;
-      }
-
-      .model_txt {
-        padding-left: 10px;
-        position: absolute;
-        left: 17px;
-        top: 75px;
-        width: 185px;
-        height: 277px;
-        overflow-y: auto;
-        font-size: 14px;
-      }
-
-      .model_floo {
-        position: absolute;
-        top: 360px;
-        right: 6px;
-        font-size: 14px;
-        width: 70px;
-
-        .model_ageRow {
-          &>p {
-            font-size: 12px;
-            margin: 0;
-            padding: 0;
-            line-height: 14px;
-          }
-        }
-
-        .model_sortRow {
-          margin-bottom: 5px;
-
-          &>p {
-            font-size: 12px;
-            margin: 0;
-            padding: 0;
-          }
+        font-weight: 600;
+        
+        &::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          height: 1px;
+          background: linear-gradient(90deg, rgba(190,38,43,.2), rgba(190,38,43) 60%, rgba(190,38,43,.2));
         }
       }
-
-
-
-      .model_size {
-        position: absolute;
-        right: 83px;
-        bottom: 5px;
-        width: 190px;
-        height: 103px;
+      &_line {
+        position: relative;
+        top: 16px;
+        margin-left: 15px;
+        max-width: 220px;
+        word-break: break-all;
         font-size: 14px;
-
-        &>p {
-          font-size: 12px;
-          margin: 0;
-          padding: 0;
-          cursor: pointer;
-          display: -webkit-box;
-          overflow: hidden;
-          white-space: normal !important;
-          text-overflow: ellipsis;
-          word-wrap: break-word;
-          -webkit-line-clamp: 4;
-          -webkit-box-orient: vertical;
-        }
       }
-    }
+      &_btn {
+        position: relative;
+        top: 4px;
+        margin-left: 15px;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        background: url('../../assets/img/icon_left.png');
 
-    .nullRightTxt{
-      background-image: none;
-      &::before{
-        background-color: transparent;
-      }
-      .model_txt{
-        display: none;
-      }
-      .model_size{
-        display: none;
-      }
-      .model_floo{
-        display: none;
+        &.hidden {
+          background: url('../../assets/img/icon_right.png');
+        }
       }
     }
 
     .flootBtnBox {
       position: absolute;
       z-index: 10;
-      bottom: 30px;
-      right: 30px;
+      bottom: 50px;
+      right: 40px;
       display: flex;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #BE262B;
 
       .flootRow {
         width: 38px;
@@ -163,22 +97,50 @@
         cursor: pointer;
         margin-right: 6px;
         background-size: 100% 100%;
+
+        &:last-child {
+          margin-right: 0;
+        }
       }
 
       .flootRow1 {
         background-image: url('../../assets/img/inco1.png');
+
+        &:hover {
+          background-image: url('../../assets/img/inco1Ac.png');
+        }
       }
 
       .flootRow2 {
         background-image: url('../../assets/img/inco2.png');
+
+        &:hover {
+          background-image: url('../../assets/img/inco2Ac.png');
+        }
       }
 
       .flootRow3 {
         background-image: url('../../assets/img/inco3.png');
+
+        &:hover {
+          background-image: url('../../assets/img/inco3Ac.png');
+        }
       }
 
       .flootRow4 {
         background-image: url('../../assets/img/inco4.png');
+
+        &:hover {
+          background-image: url('../../assets/img/inco4Ac.png');
+        }
+      }
+
+      .flootRow5 {
+        background-image: url('../../assets/img/play.png');
+
+        &.active {
+          background-image: url('../../assets/img/pause.png');
+        }
       }
 
       .flootRowM {
@@ -188,5 +150,36 @@
         }
       }
     }
+
+    .modelBorderTop,
+    .modelBorderBottom,
+    .modelBorderLeft,
+    .modelBorderRight {
+      position: absolute;
+      background-repeat: no-repeat;
+      z-index: 1;
+    }
+    .modelBorderLeft,
+    .modelBorderRight {
+      top: 0;
+      height: 100%;
+      z-index: 2;
+    }
+    .modelBorderTop,
+    .modelBorderBottom {
+      left: 0;
+    }
+    .modelBorderTop {
+      top: 0;
+    }
+    .modelBorderBottom {
+      bottom: 0;
+    }
+    .modelBorderLeft {
+      left: 0;
+    }
+    .modelBorderRight {
+      right: 0;
+    }
   }
 }

webNew/src/components/Model/index.tsx

@@ -1,13 +1,18 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
 import { RootState } from "@/store";
 import { modelItem } from "@/types";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, 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 classNames from "classnames";
+import LogoImg from '@/assets/img/logo.png';
+import ModelBacTopImg from '@/assets/img/modelBacTop.png';
+import ModelBacLeftImg from '@/assets/img/modelBacLeft.png';
+import ModelBacRightImg from '@/assets/img/modelBacRight.png';
+import ModelBacBottomImg from '@/assets/img/modelBacBottom.png';
 
 type props = {
   modelId: number;
@@ -17,10 +22,42 @@ export default function Model({ modelId, closeModel }: props) {
   const { modelInfo } = useSelector((state: RootState) => state.homeStore);
   const { list } = modelInfo;
   const [info, setInfo] = useState({} as modelItem);
+  // const [videoPlay, setVideoPlay] = useState(true);
+  const [infoVisible, setInfoVisible] = useState(false);
+  const modelBorderLRef = useRef<any>(null);
+  const modelBorderRRef = useRef<any>(null);
+  const [modelBorderRect, setModelBorderRect] = useState({
+    leftWidth: 0,
+    rightWidth: 0
+  });
+  const modelBorderStyle = useMemo(() => ({
+    left: modelBorderRect.leftWidth + 'px',
+    width: `calc(100% - ${modelBorderRect.leftWidth}px - ${modelBorderRect.rightWidth}px)`,
+    height: modelBorderRect.leftWidth - 1 + 'px'
+  }), [modelBorderRect]);
+
+  useEffect(() => {
+    window.addEventListener('resize', getModelBorderRect);
+
+    return () => {
+      window.removeEventListener('resize', getModelBorderRect);
+    }
+  }, []);
+
+  const getModelBorderRect = () => {
+    if (modelBorderLRef.current && modelBorderRRef.current) {
+      // 获取左右边框宽度
+      setModelBorderRect({
+        leftWidth: modelBorderLRef.current.getBoundingClientRect().width,
+        rightWidth: modelBorderRRef.current.getBoundingClientRect().width
+      })
+    }
+  };
 
   const closeModelFu = () => {
     setInfo({} as modelItem);
     setMusic(false);
+    setInfoVisible(false);
     closeModel();
   };
   useEffect(() => {
@@ -73,6 +110,25 @@ export default function Model({ modelId, closeModel }: props) {
     }
   };
 
+  // 控制模型播放
+  // const handleVideoStatus = useCallback(() => {
+  //   const dom = ifrBoxRef.current;
+  //   if (!dom) return;
+
+  //   const status = !videoPlay;
+  //   if (!status) {
+  //     dom.contentWindow.webview.stopRotate(true);
+  //   } else {
+  //     dom.contentWindow.webview.rotateWhenIdle();
+  //   }
+
+  //   setVideoPlay(status);
+  // }, [videoPlay]);
+
+  const handleInfoVisible = useCallback(() => {
+    setInfoVisible(!infoVisible);
+  }, [infoVisible]);
+
   return (
     <div className={styles.Model}>
       {/* 音频 */}
@@ -89,42 +145,23 @@ export default function Model({ modelId, closeModel }: props) {
           ></iframe>
         ) : null}
       </div>
+
+      <img src={LogoImg} className="logo" />
+
       {/* 右边介绍 */}
-      <div
-        className={classNames(
-          "rightTxt",
-          info.isDetail === 0 ? "nullRightTxt" : ""
-        )}
-      >
-        <div className="model_title">{info.name}</div>
-        {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">
-            尺寸：
-            <p title={info.sizeLength}>
-              {info.sizeLength ? info.sizeLength : "（空）"}
-            </p>
-          </div>
-        }
+      <div className="right-info">
+        <div className="right-info_name">{info.name}</div>
+
+        {infoVisible && <>
+          <div className="right-info_line">类别：{info.dictTextureName || "（空）"}</div>
+          <div className="right-info_line">时代：{info.dictAgeName || "（空）"}</div>
+          <div className="right-info_line">尺寸：{info.sizeLength || "（空）"}</div>
+          {!!info.description && (
+            <div className="right-info_line">说明：{info.description || "（空）"}</div>
+          )}
+        </>}
+
+        {!!info.isDetail && <div className={classNames('right-info_btn', infoVisible && 'hidden')} onClick={handleInfoVisible} />}
       </div>
 
       {/* 底部按钮 */}
@@ -139,6 +176,21 @@ export default function Model({ modelId, closeModel }: props) {
           title="缩小"
           onClick={() => modelChangeFu(2)}
         ></div>
+        {/* <div
+          className={classNames('flootRow', 'flootRow5', videoPlay && 'active')}
+          title={videoPlay ? '暂停' : '播放'}
+          onClick={handleVideoStatus}
+        ></div> */}
+        <div
+          className="flootRow flootRow4"
+          title="重置"
+          onClick={() => modelChangeFu(3)}
+        ></div>
+        <div
+          className="flootRow flootRow3"
+          title="退出"
+          onClick={() => closeModelFu()}
+        ></div>
         {info.audioPath ? (
           <div
             className="flootRow flootRowM"
@@ -151,17 +203,13 @@ export default function Model({ modelId, closeModel }: props) {
             )}
           </div>
         ) : null}
+      </div>
 
-        <div
-          className="flootRow flootRow4"
-          title="重置"
-          onClick={() => modelChangeFu(3)}
-        ></div>
-        <div
-          className="flootRow flootRow3"
-          title="退出"
-          onClick={() => closeModelFu()}
-        ></div>
+      <div style={{opacity: !!modelBorderRect.leftWidth ? 1 : 0}}>
+        <img src={ModelBacTopImg} className="modelBorderTop" style={modelBorderStyle} onLoad={getModelBorderRect} />
+        <img ref={modelBorderLRef} src={ModelBacLeftImg} className="modelBorderLeft" />
+        <img src={ModelBacBottomImg} className="modelBorderBottom" style={modelBorderStyle} />
+        <img ref={modelBorderRRef} src={ModelBacRightImg} className="modelBorderRight" />
       </div>
     </div>
   );

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

@@ -1,17 +1,15 @@
 .Model {
   width: 100%;
   height: 100%;
-  background-image: url('../../assets/img/modelBac.png');
-  background-size: 100% 100%;
-  background-color: #fff;
+  background-color: #f1ebd5;
 
   :global {
     .ifrBox {
       position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
+      top: 20px;
+      left: 20px;
+      width: calc(100% - 40px);
+      height: calc(100% - 40px);
 
       iframe {
         width: 100%;
@@ -19,143 +17,79 @@
       }
     }
 
-    .rightTxt {
+    .logo {
       position: absolute;
-      z-index: 2;
-      top: 60px;
+      top: 50px;
+      left: 50px;
+      z-index: 1;
+    }
+
+    .right-info {
+      position: absolute;
+      top: 50px;
       right: 50px;
-      width: 300px;
-      height: 465px;
-      background-image: url('../../assets//img//txtBac.png');
-      background-size: 100% 100%;
+      display: flex;
+      align-items: flex-start;
+      color: #020101;
+      font-family: '楷体';
+      z-index: 2;
 
       &::before {
-        content: "";
+        content: '';
         position: absolute;
-        left: 17px;
-        top: 76px;
-        width: 1px;
-        height: 327px;
-        background-color: #741A1A;
-      }
-
-      .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: 28px;
-        right: 30px;
-        width: 55px;
-        height: 289px;
-        color: #020101;
-        font-weight: 700;
+        top: 7px;
+        left: -14px;
+        width: 4px;
+        height: 22px;
+        background-color: #BE262B;
+      }
+      &_name {
+        position: relative;
+        padding-bottom: 5px;
         font-size: 24px;
-      }
-
-      .model_txt::-webkit-scrollbar {
-        width: 2px;
-      }
-
-      .model_txt::-webkit-scrollbar-thumb {
-        border-radius: 10px;
-        background-color: #741A1A;
-      }
-
-      .model_txt::-webkit-scrollbar-track {
-        border-radius: 10px;
-      }
-
-      .model_txt {
-        padding-left: 10px;
-        position: absolute;
-        left: 17px;
-        top: 75px;
-        width: 185px;
-        height: 277px;
-        overflow-y: auto;
-        font-size: 14px;
-      }
-
-      .model_floo {
-        position: absolute;
-        top: 360px;
-        right: 6px;
-        font-size: 14px;
-        width: 70px;
-
-        .model_ageRow {
-          &>p {
-            font-size: 12px;
-            margin: 0;
-            padding: 0;
-            line-height: 14px;
-          }
-        }
-
-        .model_sortRow {
-          margin-bottom: 5px;
-
-          &>p {
-            font-size: 12px;
-            margin: 0;
-            padding: 0;
-          }
+        font-weight: 600;
+        
+        &::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          height: 1px;
+          background: linear-gradient(90deg, rgba(190,38,43,.2), rgba(190,38,43) 60%, rgba(190,38,43,.2));
         }
       }
-
-
-
-      .model_size {
-        position: absolute;
-        right: 83px;
-        bottom: 5px;
-        width: 190px;
-        height: 103px;
+      &_line {
+        position: relative;
+        top: 16px;
+        margin-left: 15px;
+        max-width: 220px;
+        word-break: break-all;
         font-size: 14px;
+      }
+      &_btn {
+        position: relative;
+        top: 4px;
+        margin-left: 15px;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        background: url('../../assets/img/icon_left.png');
 
-        &>p {
-          font-size: 12px;
-          margin: 0;
-          padding: 0;
-          cursor: pointer;
-          display: -webkit-box;
-          overflow: hidden;
-          white-space: normal !important;
-          text-overflow: ellipsis;
-          word-wrap: break-word;
-          -webkit-line-clamp: 4;
-          -webkit-box-orient: vertical;
+        &.hidden {
+          background: url('../../assets/img/icon_right.png');
         }
       }
     }
-    .nullRightTxt{
-      background-image: none;
-      &::before{
-        background-color: transparent;
-      }
-      .model_txt{
-        display: none;
-      }
-      .model_size{
-        display: none;
-      }
-      .model_floo{
-        display: none;
-      }
-    }
-
 
     .flootBtnBox {
       position: absolute;
       z-index: 10;
-      bottom: 30px;
-      right: 30px;
+      bottom: 50px;
+      right: 40px;
       display: flex;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #BE262B;
 
       .flootRow {
         width: 38px;
@@ -163,22 +97,50 @@
         cursor: pointer;
         margin-right: 6px;
         background-size: 100% 100%;
+
+        &:last-child {
+          margin-right: 0;
+        }
       }
 
       .flootRow1 {
         background-image: url('../../assets/img/inco1.png');
+
+        &:hover {
+          background-image: url('../../assets/img/inco1Ac.png');
+        }
       }
 
       .flootRow2 {
         background-image: url('../../assets/img/inco2.png');
+
+        &:hover {
+          background-image: url('../../assets/img/inco2Ac.png');
+        }
       }
 
       .flootRow3 {
         background-image: url('../../assets/img/inco3.png');
+
+        &:hover {
+          background-image: url('../../assets/img/inco3Ac.png');
+        }
       }
 
       .flootRow4 {
         background-image: url('../../assets/img/inco4.png');
+
+        &:hover {
+          background-image: url('../../assets/img/inco4Ac.png');
+        }
+      }
+
+      .flootRow5 {
+        background-image: url('../../assets/img/play.png');
+
+        &.active {
+          background-image: url('../../assets/img/pause.png');
+        }
       }
 
       .flootRowM {
@@ -188,5 +150,36 @@
         }
       }
     }
+
+    .modelBorderTop,
+    .modelBorderBottom,
+    .modelBorderLeft,
+    .modelBorderRight {
+      position: absolute;
+      background-repeat: no-repeat;
+      z-index: 1;
+    }
+    .modelBorderLeft,
+    .modelBorderRight {
+      top: 0;
+      height: 100%;
+      z-index: 2;
+    }
+    .modelBorderTop,
+    .modelBorderBottom {
+      left: 0;
+    }
+    .modelBorderTop {
+      top: 0;
+    }
+    .modelBorderBottom {
+      bottom: 0;
+    }
+    .modelBorderLeft {
+      left: 0;
+    }
+    .modelBorderRight {
+      right: 0;
+    }
   }
 }

webNew/src/pages/Model/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import musicImg from "@/assets/img/music.png";
 import musicImgAc from "@/assets/img/musicAc.png";
 import styles from "./index.module.scss";
@@ -9,12 +9,30 @@ import { useDispatch, useSelector } from "react-redux";
 import { getModelInfo } from "@/store/action/home";
 import { RootState } from "@/store";
 import classNames from "classnames";
+import LogoImg from '@/assets/img/logo.png';
+import ModelBacTopImg from '@/assets/img/modelBacTop.png';
+import ModelBacLeftImg from '@/assets/img/modelBacLeft.png';
+import ModelBacRightImg from '@/assets/img/modelBacRight.png';
+import ModelBacBottomImg from '@/assets/img/modelBacBottom.png';
 
 export default function Model() {
   const location = useLocation();
 
   const dispatch = useDispatch();
 
+  const [infoVisible, setInfoVisible] = useState(false);
+  const modelBorderLRef = useRef<any>(null);
+  const modelBorderRRef = useRef<any>(null);
+  const [modelBorderRect, setModelBorderRect] = useState({
+    leftWidth: 0,
+    rightWidth: 0
+  });
+  const modelBorderStyle = useMemo(() => ({
+    left: modelBorderRect.leftWidth + 'px',
+    width: `calc(100% - ${modelBorderRect.leftWidth}px - ${modelBorderRect.rightWidth}px)`,
+    height: modelBorderRect.leftWidth - 1 + 'px'
+  }), [modelBorderRect]);
+
   // 发送请求获取信息，存到仓库
   useEffect(() => {
     const arr = location.search.split("=");
@@ -22,6 +40,24 @@ export default function Model() {
     dispatch(getModelInfo(id));
   }, [dispatch, location.search]);
 
+  useEffect(() => {
+    window.addEventListener('resize', getModelBorderRect);
+
+    return () => {
+      window.removeEventListener('resize', getModelBorderRect);
+    }
+  }, []);
+
+  const getModelBorderRect = () => {
+    if (modelBorderLRef.current && modelBorderRRef.current) {
+      // 获取左右边框宽度
+      setModelBorderRect({
+        leftWidth: modelBorderLRef.current.getBoundingClientRect().width,
+        rightWidth: modelBorderRRef.current.getBoundingClientRect().width
+      });
+    }
+  };
+
   // 从仓库获取信息
   const info = useSelector((state: RootState) => state.homeStore.qrModel);
 
@@ -63,6 +99,10 @@ export default function Model() {
     }
   };
 
+  const handleInfoVisible = useCallback(() => {
+    setInfoVisible(!infoVisible);
+  }, [infoVisible]);
+
   return (
     <div className={styles.Model}>
       {/* 音频 */}
@@ -79,42 +119,23 @@ export default function Model() {
           ></iframe>
         ) : null}
       </div>
+
+      <img src={LogoImg} className="logo" />
+
       {/* 右边介绍 */}
-      <div
-        className={classNames(
-          "rightTxt",
-          info.isDetail === 0 ? "nullRightTxt" : ""
-        )}
-      >
-        <div className="model_title">{info.name}</div>
-        {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">
-            尺寸：
-            <p title={info.sizeLength}>
-              {info.sizeLength ? info.sizeLength : "（空）"}
-            </p>
-          </div>
-        }
+      <div className="right-info">
+        <div className="right-info_name">{info.name}</div>
+
+        {infoVisible && <>
+          <div className="right-info_line">类别：{info.dictTextureName || "（空）"}</div>
+          <div className="right-info_line">时代：{info.dictAgeName || "（空）"}</div>
+          <div className="right-info_line">尺寸：{info.sizeLength || "（空）"}</div>
+          {!!info.description && (
+            <div className="right-info_line">说明：{info.description || "（空）"}</div>
+          )}
+        </>}
+
+        {!!info.isDetail && <div className={classNames('right-info_btn', infoVisible && 'hidden')} onClick={handleInfoVisible} />}
       </div>
 
       {/* 底部按钮 */}
@@ -129,6 +150,11 @@ export default function Model() {
           title="缩小"
           onClick={() => modelChangeFu(2)}
         ></div>
+        <div
+          className="flootRow flootRow4"
+          title="重置"
+          onClick={() => modelChangeFu(3)}
+        ></div>
         {info.audioPath ? (
           <div
             className="flootRow flootRowM"
@@ -141,12 +167,13 @@ export default function Model() {
             )}
           </div>
         ) : null}
+      </div>
 
-        <div
-          className="flootRow flootRow4"
-          title="重置"
-          onClick={() => modelChangeFu(3)}
-        ></div>
+      <div style={{opacity: !!modelBorderRect.leftWidth ? 1 : 0}}>
+        <img src={ModelBacTopImg} className="modelBorderTop" style={modelBorderStyle} onLoad={getModelBorderRect} />
+        <img ref={modelBorderLRef} src={ModelBacLeftImg} className="modelBorderLeft" />
+        <img src={ModelBacBottomImg} className="modelBorderBottom" style={modelBorderStyle} />
+        <img ref={modelBorderRRef} src={ModelBacRightImg} className="modelBorderRight" />
       </div>
     </div>
   );