upp

pc/public/staticData.js

@@ -6,26 +6,17 @@ const staticData = [
       {
         id: 1,
         name: "虎门销烟1-1",
-        info: {
-          title: "视频66666",
-          txt: "撒大苏打撒旦111111111111111111111111111111111111111111撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦11111",
-        },
+        txt: "  撒大苏打撒旦111111111111111111111111111111111111111111撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦11111",
       },
       {
         id: 2,
-        name: "虎门销烟1-1",
-        info: {
-          title: "视频66666",
-          txt: "撒大苏打撒旦11111111111111111111111111111111111111111111111",
-        },
+        name: "虎门销烟1-2",
+        txt: "撒大苏打撒旦11111111111111111111111111111111111111111111111",
       },
       {
         id: 3,
-        name: "虎门销烟1-1",
-        info: {
-          title: "视频66666",
-          txt: "撒大苏打撒旦11111111111111111111111111111111111111111111111",
-        },
+        name: "虎门销烟1-3",
+        txt: "撒大苏打撒旦11111111111111111111111111111111111111111111111",
       },
     ],
   },

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

@@ -13,7 +13,37 @@
 
       .Tab1main1 {
         width: calc(100% - 220px);
-        background-color: #fff;
+        padding: 20px;
+
+        .t1Tit {
+          font-weight: 700;
+          font-size: 24px;
+          color: var(--themeColor);
+          text-align: center;
+        }
+
+        .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 {
@@ -31,6 +61,7 @@
           height: 130px;
           margin-bottom: 30px;
           position: relative;
+          border: 3px solid transparent;
 
           &:last-child {
             margin-bottom: 0;
@@ -47,6 +78,9 @@
             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;
           }
 
 
@@ -54,10 +88,14 @@
             width: 100%;
             height: 100%;
           }
+
+          &:hover {
+            border: 3px solid var(--themeColor);
+          }
         }
 
         .rowAc {
-          border: 2px solid var(--themeColor);
+          border: 3px solid var(--themeColor);
         }
       }
 

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

@@ -6,9 +6,10 @@ import classNames from "classnames";
 
 type Props = {
   data: envDataSonType[];
+  typeId: number;
 };
 
-function Tab1({ data }: Props) {
+function Tab1({ data, typeId }: Props) {
   // 当前选中状态
   const [isAc, setIsAc] = useState(1);
 
@@ -22,16 +23,30 @@ function Tab1({ data }: Props) {
         {/* 左侧视频 */}
         <div className="Tab1main1">
           <div className="t1Tit">{info.name}</div>
+          <div className="videoBox">
+            <video
+              key={isAc}
+              controls
+              autoPlay
+              src={`${envUrl}/swData/1/${info.id}.mp4`}
+            ></video>
+          </div>
+
+          <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={envUrl + `/swData/1/${v.img}`} alt="" />
+              <img src={`${envUrl}/swData/1/${v.id}.jpg`} alt="" />
               <div className="name">{v.name}</div>
             </div>
           ))}

pc/src/pages/A2Main/index.tsx

@@ -65,7 +65,7 @@ function A2Main() {
           </div>
           {/* 轮播图主体 */}
           {type === 1 ? (
-            <Tab1 data={swData} />
+            <Tab1 data={swData} typeId={type}/>
           ) : type === 4 ? (
             <GoodsSw />
           ) : type === 5 ? (

pc/src/utils/env.ts

@@ -2,10 +2,7 @@ export type envDataSonType = {
   id: number;
   name: string;
   path?: string;
-  info: {
-    title: string;
-    txt: string;
-  };
+  txt: string;
 };
 
 export type envDataType = {