upp

houtai/src/pages/B2Goods/GoodsAdd/index.tsx

@@ -138,9 +138,9 @@ function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
           return MessageFu.warning("只支持jpg、png格式!");
         }
         // 校验大小
-        if (filesInfo.size > 20 * 1024 * 1024) {
+        if (filesInfo.size > 2 * 1024 * 1024) {
           e.target.value = "";
-          return MessageFu.warning("最大支持20M!");
+          return MessageFu.warning("最大支持2M!");
         }
         // 创建FormData对象
         const fd = new FormData();
@@ -555,7 +555,7 @@ function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
                 </Popconfirm>
               </div>
               <div className="fileBoxRow_r_tit">
-                支持png、jpg和jpeg的图片格式；最大支持20M。
+                支持png、jpg和jpeg的图片格式；最大支持2M。
                 <br />
                 <div
                   className={classNames(

pc/src/pages/A2Main/GoodsInfo/RightFile/index.module.scss

@@ -37,6 +37,8 @@
         background-color: #211c19;
         width: 100%;
         height: 100%;
+        max-width: 100%;
+        max-height: 100%;
       }
     }
 

pc/src/pages/A2Main/GoodsInfo/RightFile/index.tsx

@@ -41,7 +41,7 @@ function RightFile({ list }: Props) {
         >
           {v.type === "model" ? (
             <iframe src={`model.html?m=${v.filePath}`} frameBorder="0"></iframe>
-          ) : v.type === "video" ? (
+          ) : v.type === "video" && i === showInd ? (
             <video src={baseURL + v.filePath} controls></video>
           ) : v.type === "img" ? (
             <ImageLazy src={v.filePath} width="100%" height="100%" />

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

@@ -81,6 +81,7 @@
               position: relative;
 
               &::before {
+                pointer-events: none;
                 content: '';
                 position: absolute;
                 bottom: -80px;
@@ -92,6 +93,7 @@
               }
 
               img {
+                pointer-events: none;
                 object-fit: contain;
               }
             }
@@ -253,5 +255,49 @@
       opacity: 1;
       pointer-events: auto;
     }
+
+    .curTitBox {
+      border-radius: 0 0 4px 4px;
+      border-top: 3px solid #b6ab97;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 300px;
+      height: 370px;
+      background-color: #726b56;
+
+      .curClose {
+        position: absolute;
+        right: 15px;
+        top: 15px;
+        cursor: pointer;
+        color: #98856f;
+        font-size: 24px;
+      }
+
+      .curImg {
+        margin: 70px auto 30px;
+        width: 213px;
+        height: 213px;
+        position: relative;
+
+        &>img {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          opacity: 1;
+          transition: all 2s;
+        }
+      }
+
+      &>p {
+        font-size: 14px;
+        color: #fff;
+        text-align: center;
+      }
+    }
   }
 }

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

@@ -14,8 +14,37 @@ import ImageLazy from "@/ImageLazy";
 import { Input, Select } from "antd";
 import classNames from "classnames";
 import GoodsInfo from "../GoodsInfo";
+import { CloseOutlined } from "@ant-design/icons";
+import curImg from "@/assets/img/goods/cur.png";
+import curAcImg from "@/assets/img/goods/curAc.png";
 
 function GoodsSw() {
+  // 滚轮提示
+  const [curTit, setCurTit] = useState(true);
+
+  const curTimeRef = useRef(0);
+  const [curCut, setCurCut] = useState(true);
+
+  useEffect(() => {
+    if (!curTit) {
+      localStorage.setItem("YPZZ_CUR", "1");
+      clearInterval(curTimeRef.current);
+    }
+  }, [curTit]);
+
+  useEffect(() => {
+    // 开启滚轮提升 图片更换 定时器
+    clearInterval(curTimeRef.current);
+    curTimeRef.current = window.setInterval(() => {
+      setCurCut(!curCut);
+    }, 2000);
+  }, [curCut]);
+
+  useEffect(() => {
+    const isFlag = localStorage.getItem("YPZZ_CUR");
+    if (isFlag) setCurTit(false);
+  }, []);
+
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -183,6 +212,9 @@ function GoodsSw() {
       const dom = document.querySelector("#goddsSwBox1") as HTMLDivElement;
       // 监听鼠标滚轮
       dom.onwheel = (e) => {
+        // 使用过滚轮
+        setCurTit(false);
+
         e.preventDefault();
         const num = dom.scrollLeft;
         if (dom.scrollLeft + dom.clientWidth >= dom.scrollWidth)
@@ -204,6 +236,9 @@ function GoodsSw() {
       dom.scrollLeft = dom.scrollWidth - dom.clientWidth;
       // 监听鼠标滚轮
       dom.onwheel = (e) => {
+        // 使用过滚轮
+        setCurTit(false);
+
         e.preventDefault();
         const num = dom.scrollLeft;
         if (num <= 0) dom.scrollLeft = dom.scrollWidth - dom.clientWidth;
@@ -276,13 +311,17 @@ function GoodsSw() {
           >
             <div className="goddsSw" style={{ width: goddsSw1 + "px" }}>
               {list1.map((v, i) => (
-                <div key={i} className="goddsRow" title={v.name}>
+                <div key={i} className="goddsRow">
                   <div className="name">
                     {v.name.length > 10
                       ? v.name.substring(0, 10) + "..."
                       : v.name}
                   </div>
-                  <div className="goddsImg" onClick={() => clickGoodFu(v.id)}>
+                  <div
+                    title={v.name}
+                    className="goddsImg"
+                    onClick={() => clickGoodFu(v.id)}
+                  >
                     <ImageLazy
                       src={v.thumb}
                       width="100%"
@@ -353,7 +392,7 @@ function GoodsSw() {
         </div>
       </div>
 
-      {/* 当个藏品详情盒子 */}
+      {/* 单个藏品详情盒子 */}
       <div className={classNames("goodsInfoBox", open ? "goodsInfoBoxAc" : "")}>
         {open ? (
           <GoodsInfo
@@ -363,6 +402,20 @@ function GoodsSw() {
           />
         ) : null}
       </div>
+
+      {/* 滚轮提示 */}
+      {curTit ? (
+        <div className="curTitBox" hidden={open}>
+          <div className="curClose" onClick={() => setCurTit(false)}>
+            <CloseOutlined />
+          </div>
+          <div className="curImg">
+            <img src={curImg} alt="" style={{ opacity: curCut ? 1 : 0 }} />
+            <img src={curAcImg} alt="" style={{ opacity: curCut ? 0 : 1 }} />
+          </div>
+          <p>鼠标滚轮可控制图片滚动</p>
+        </div>
+      ) : null}
     </div>
   );
 }

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

@@ -75,7 +75,7 @@
           transition: all .2s;
           height: 40px;
           line-height: 40px;
-          background-color: rgba(0, 0, 0, .5);
+          background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
           word-wrap: break-word;
           padding: 0 8px;
           overflow: hidden;

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

@@ -5,8 +5,8 @@
   z-index: 11;
   width: 100%;
   height: 100%;
-  backdrop-filter: blur(4px);
-  background-color: rgba(0, 0, 0, .5);
+  backdrop-filter: blur(10px);
+  background-color: rgba(0, 0, 0, .8);
   opacity: 0;
   pointer-events: none;
   transition: all .3s;
@@ -21,7 +21,7 @@
 
       // transform: scale(0.6);
       &>img {
-        width: 46px;
+        width: 70px;
       }
     }
 
@@ -35,27 +35,45 @@
         max-height: 550px;
 
         video {
-
+          max-width: 100%;
+          max-height: 100%;
           width: 100%;
-          // height: 100%;
+          height: 100%;
         }
       }
 
       .videoTxt {
         width: calc(100% - 1000px);
-        height: calc(100% - 160px);
-        overflow-y: auto;
-        padding: 0 30px;
+        max-height: 550px;
+
+        padding: 0 0px 0 40px;
         color: #fff;
 
         &>h3 {
-          font-size: 24px;
-          margin-bottom: 15px;
+          font-size: 26px;
+          margin-bottom: 25px;
+          color: var(--themeColor);
+          border-bottom: 1px solid var(--themeColor);
+          padding-bottom: 30px;
+          position: relative;
+
+          &::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: -1px;
+            width: 60px;
+            height: 3px;
+            background-color: var(--themeColor);
+          }
         }
 
-        &>p {
-          font-size: 16px;
-          line-height: 24px;
+        .videoTxt_txt {
+          height: calc(100% - 150px);
+          font-size: 14px;
+          line-height: 22px;
+          overflow-y: auto;
+          padding-right: 20px;
         }
       }
     }

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

@@ -5,7 +5,7 @@ import { useSelector } from "react-redux";
 import store, { RootState } from "@/store";
 import { envUrl } from "@/utils/history";
 
-import closeImg from '@/assets/img/close.png'
+import closeImg from "@/assets/img/goods/close.png";
 
 function VideoBox() {
   const { videoInfo } = useSelector((state: RootState) => state.A2Main);
@@ -37,9 +37,13 @@ function VideoBox() {
           <div className="videobox">
             <video src={envUrl + "/swData/1/1.mp4"} autoPlay controls></video>
           </div>
-          <div className="videoTxt myscroll">
+          <div className="videoTxt">
             <h3>{videoInfo.title}</h3>
-            <p dangerouslySetInnerHTML={{ __html: videoInfo.txt }}></p>
+            
+            <div
+              className="videoTxt_txt myscroll"
+              dangerouslySetInnerHTML={{ __html: videoInfo.txt }}
+            ></div>
           </div>
         </div>
       ) : null}