up-文物/知识/视频-样式统一

pc/src/pages/A2Main/Tab1/index.module.scss

@@ -2,18 +2,15 @@
   width: 100%;
   height: 100%;
   background-color: #837b68;
-  padding: 30px 10px 30px 20px;
 
   :global {
     .Tab1main {
       width: 100%;
       height: 100%;
-      display: flex;
-      justify-content: space-between;
+      padding: 60px 40px 40px;
 
       .Tab1main1 {
-        width: calc(100% - 220px);
-        padding: 20px;
+        height: 100%;
 
         .t1Tit {
           font-weight: 700;
@@ -23,82 +20,86 @@
         }
 
         .videoBox {
-          width: 1200px;
-          margin: 30px auto 15px;
-          height: calc(100% - 150px);
-
-          video {
-            width: 100%;
-            height: 100%;
-            max-width: 100%;
-            max-height: 100%;
-          }
-        }
-
-        .t1Txt {
-          width: 1200px;
-          height: 100px;
-          margin: 0 auto;
-          color: #fff;
-          letter-spacing: 2px;
-          line-height: 20px;
-          overflow-y: auto;
-        }
-      }
-
-      .Tab1main2 {
-        width: 200px;
-        height: 100%;
-        overflow-y: auto;
-        display: flex;
-        flex-direction: column;
-        padding-right: 10px;
-
-        &>div {
-          cursor: pointer;
+          margin-top: 40px;
           width: 100%;
-          height: 130px;
-          margin-bottom: 30px;
-          position: relative;
-          border: 3px solid transparent;
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-
-          .name {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            height: 30px;
-            line-height: 30px;
-            color: #fff;
-            text-align: center;
-            padding: 0 5px;
-            background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .6));
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-
-
-          &>img {
-            width: 100%;
-            height: 100%;
+          height: calc(100% - 160px);
+          display: flex;
+          flex-wrap: wrap;
+
+          .videoRow {
+            flex-shrink: 0;
+            width: calc(20% - 30px);
+            margin: 20px 15px;
+            height: auto;
+            cursor: pointer;
+            display: flex;
+            flex-direction: column;
+            background-color: #fff;
+            padding: 10px;
+            border-radius: 6px;
+
+
+            &>div {
+              width: 100%;
+              height: calc(100% - 40px);
+              position: relative;
+
+              // 阴影
+              .maskPlay {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, .4);
+                color: #fff;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-size: 60px;
+              }
+
+              &>video {
+                position: absolute;
+                // top: 50%;
+                // transform: translateY(-50%);
+                // left: 0;
+                width: 100%;
+                height: 100%;
+                max-width: 100%;
+                max-height: 100%;
+                object-fit: fill;
+              }
+
+              &>img {
+                width: 100%;
+                height: 100%;
+                // object-fit: contain !important;
+              }
+            }
+
+            p {
+              flex: 1;
+              display: inline-block;
+              font-size: 16px;
+              text-align: center;
+              padding: 0 5px;
+              margin-top: 10px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              color: #47392C;
+              // color: #fff;
+            }
+
+            &:hover {
+              box-shadow: 1px 1px 5px 5px rgba(74, 64, 61, .8);
+            }
           }
 
-          &:hover {
-            border: 3px solid var(--themeColor);
-          }
-        }
 
-        .rowAc {
-          border: 3px solid var(--themeColor);
         }
       }
-
-
     }
   }
 }

pc/src/pages/A2Main/Tab1/index.tsx

@@ -1,57 +1,83 @@
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import styles from "./index.module.scss";
-import { envDataSonType, envUrl } from "@/utils/env";
-import classNames from "classnames";
+import { envDataSonType } from "@/utils/env";
+// import classNames from "classnames";
+
+import { CaretRightOutlined } from "@ant-design/icons";
 
 type Props = {
   data: envDataSonType[];
 };
 
-interface IMenu extends envDataSonType {
-  img: string;
-}
+// interface IMenu extends envDataSonType {
+//   img: string;
+// }
 
 function Tab1({ data }: Props) {
   // 当前选中状态
-  const [isAc, setIsAc] = useState(1);
+  const [isAc, setIsAc] = useState(0);
+
+  // const info = useMemo(() => {
+  //   return data.find((v) => v.id === isAc) || ({} as envDataSonType);
+  // }, [data, isAc]);
+
+  // 视频点击播放
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  const videoPlayFu = useCallback(
+    (id: number) => {
+      if (isAc === id) return;
+
+      setIsAc(id);
 
-  const info = useMemo(() => {
-    return data.find((v) => v.id === isAc) || ({} as envDataSonType);
-  }, [data, isAc]);
+      setTimeout(() => {
+        const dom = videoRef.current;
+
+        if (dom) {
+          dom.requestFullscreen();
+          dom.play();
+        }
+      }, 100);
+    },
+    [isAc]
+  );
 
   return (
     <div className={styles.Tab1}>
       <div className="Tab1main">
-        {/* 左侧视频 */}
         <div className="Tab1main1">
-          <div className="t1Tit">{info.name}</div>
+          <div className="t1Tit">红色基因库系列视频</div>
           <div className="videoBox">
-            <video
-              key={isAc}
-              controls
-              autoPlay
-              src={`https://houseoss.4dkankan.com/project/ypzz/${info.id}.mp4`}
-            ></video>
-          </div>
+            {data.map((v) => (
+              <div
+                className="videoRow"
+                key={v.id}
+                title={v.name}
+                onClick={() => videoPlayFu(v.id)}
+              >
+                <div>
+                  {isAc === v.id ? (
+                    <video
+                      ref={videoRef}
+                      controls
+                      src={`https://houseoss.4dkankan.com/project/ypzz/${v.id}.mp4`}
+                    ></video>
+                  ) : (
+                    <img
+                      src={`https://houseoss.4dkankan.com/project/ypzz/imgs/${v.id}-min.png`}
+                      alt=""
+                    />
+                  )}
 
-          {/* <div
-            className="t1Txt myscroll"
-            dangerouslySetInnerHTML={{ __html: info.txt }}
-          ></div> */}
-        </div>
-        {/* 右侧列表 */}
-        <div className="Tab1main2 myscroll">
-          {data.map((v) => (
-            <div
-              onClick={() => setIsAc(v.id)}
-              key={v.id}
-              title={v.name}
-              className={classNames(isAc === v.id ? "rowAc" : "")}
-            >
-              <img src={`https://houseoss.4dkankan.com/project/ypzz/imgs/${v.id}-min.png`} alt="" />
-              <div className="name">{v.name}</div>
-            </div>
-          ))}
+                  {/* 阴影和播放按钮 */}
+                  <div className="maskPlay" hidden={isAc === v.id}>
+                    <CaretRightOutlined />
+                  </div>
+                </div>
+                <p>{v.name}</p>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     </div>

pc/src/pages/A2Main/Tab4/index.module.scss

@@ -156,19 +156,20 @@
       height: calc(100% - 200px);
       display: flex;
       flex-wrap: wrap;
+      padding-top: 10px;
 
       .tab4Mrow {
         cursor: pointer;
-        width: 23.5%;
-        height: 46%;
-        margin-right: 2%;
-        margin-bottom: 2%;
+        width: 18.8%;
+        height: 42%;
+        margin-right: 1.5%;
+        // margin-bottom: 2%;
         background-color: #fff;
         padding: 10px;
         border-radius: 6px;
 
 
-        &:nth-of-type(4n) {
+        &:nth-of-type(5n) {
           margin-right: 0;
         }
 
@@ -193,7 +194,8 @@
           color: #47392C;
           font-size: 16px;
         }
-        &:hover{
+
+        &:hover {
           box-shadow: 1px 1px 5px 5px rgba(74, 64, 61, .8);
         }
       }

pc/src/pages/A2Main/Tab4/index.tsx

@@ -21,8 +21,8 @@ import "swiper/css/free-mode";
 import Tab4Info from "../Tab4Info";
 
 const typeArr = [
-  { id: "img", name: "二维文物" },
   { id: "model", name: "三维文物" },
+  { id: "img", name: "二维文物" },
 ];
 
 function Tab4() {
@@ -37,7 +37,7 @@ function Tab4() {
     dictTexture: "",
     searchKey: "",
     pageNum: 1,
-    pageSize: 8,
+    pageSize: 10,
     type: "img",
   });
 
@@ -185,7 +185,7 @@ function Tab4() {
           showQuickJumper
           current={getData.pageNum}
           total={goodsList.total}
-          pageSize={8}
+          pageSize={getData.pageSize}
           hideOnSinglePage={true}
           onChange={(page) => setGetData({ ...getData, pageNum: page })}
           showSizeChanger={false}

pc/src/pages/A2Main/Tab5/index.module.scss

@@ -46,11 +46,15 @@
         cursor: pointer;
         display: flex;
         flex-direction: column;
+        background-color: #fff;
+        padding: 10px;
+        border-radius: 6px;
+
 
         &>div {
           width: 100%;
           height: calc(100% - 40px);
-          background-color: #fff;
+          // background-color: #fff;
         }
 
         p {
@@ -63,17 +67,12 @@
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          color: #fff;
+          color: #47392C;
+          // color: #fff;
         }
 
         &:hover {
-          &>div {
-            box-shadow: 1px 1px 5px 5px rgba(74, 64, 61, .8);
-          }
-
-          &>p {
-            color: var(--themeColor);
-          }
+          box-shadow: 1px 1px 5px 5px rgba(74, 64, 61, .8);
         }
       }
     }