改一波按钮

Code/src/assets/styles/base.css

@@ -115,3 +115,33 @@ textarea {
     opacity: 1;
   }
 }
+#BtnRight {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+  bottom: 15px;
+  right: 20px;
+}
+#BtnRight > img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: fill !important;
+  opacity: 1;
+  transition: all 0.3s;
+}
+#BtnRight .BtnRight2 {
+  opacity: 0;
+  pointer-events: none;
+}
+#BtnRight:hover .BtnRight1 {
+  opacity: 0;
+  pointer-events: none;
+}
+#BtnRight:hover .BtnRight2 {
+  opacity: 1;
+  pointer-events: auto;
+}

Code/src/assets/styles/base.less

@@ -142,3 +142,37 @@ textarea {
     opacity: 1;
   }
 }
+
+// 右下角的按钮
+#BtnRight {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+  bottom: 15px;
+  right: 20px;
+  & > img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: fill !important;
+    opacity: 1;
+    transition: all 0.3s;
+  }
+  .BtnRight2 {
+    opacity: 0;
+    pointer-events: none;
+  }
+  &:hover {
+    .BtnRight1 {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .BtnRight2 {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}

Code/src/components/BaseImg/index.module.scss

@@ -34,27 +34,29 @@
       transform: translateX(-50%);
       cursor: pointer;
       width: 100px;
-      height: auto;
+      height: 31px;
       z-index: 10;
-      & > img {
-        width: 100%;
-      }
+      background-size: 100% 100%;
+      background-image: url('../../assets/img/btn.png');
+      color: #fffddc;
+      transition: all 0.3s;
 
       .BIBtxt {
         position: absolute;
         top: 0;
         left: 0;
-        color: #fffddc;
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
-        transition: all 0.3s;
-        &:hover {
-          color: #ead98f;
-        }
       }
+
+      &:hover {
+        background-image: url('../../assets/img/btnAc.png');
+        color: #b67150;
+      }
+
       .BIBxian {
         position: absolute;
         bottom: -10px;

Code/src/components/BaseImg/index.tsx

@@ -45,14 +45,15 @@ function BaseImg({ isShow, iconSrc, parentFu, bgImg, num = 30 }: Props) {
       style={{ backgroundImage: `url(${bgImg ? bgImg : ''})` }}
     >
       <img className='BIlogo' src={iconSrc} alt='' />
-      <div className='BIbaseBtn' onClick={btnStartFu}>
+      <div
+        className='BIbaseBtn'
+        onClick={btnStartFu}
+        style={{ pointerEvents: loding >= 100 ? 'auto' : 'none' }}
+      >
         {/* anpg动图 */}
         <div className='BIcon'>
           <img src={`${baseURL}visit/arrow.png`} alt='' />
         </div>
-
-        <img src={`${baseURL}visit/btn.png`} alt='' />
-
         <div className='BIBtxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
         {loding >= 100 ? null : (
           <div className='BIBxian'>

Code/src/components/BtnRight.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { baseURL } from '@/utils/http'
+
+type Props = {
+  imgName: string
+  clickSon: () => void
+  title: '返回' | '跳过'
+}
+
+function BtnRight({ imgName, clickSon, title }: Props) {
+  return (
+    <div title={title} id='BtnRight' onClick={clickSon}>
+      <img className='BtnRight1' src={`${baseURL}btn/${imgName}.png`} alt='' />
+      <img className='BtnRight2' src={`${baseURL}btn/${imgName}Ac.png`} alt='' />
+    </div>
+  )
+}
+
+const MemoBtnRight = React.memo(BtnRight)
+
+export default MemoBtnRight

Code/src/components/CatVideo/index.module.scss

@@ -4,18 +4,9 @@
   position: absolute;
   z-index: 10;
   opacity: 1;
-  :global {
-    // 跳过按钮
-    .CatTiao {
-      position: absolute;
-      width: 50px;
-      height: 50px;
-      cursor: pointer;
-      bottom: 20px;
-      right: 20px;
-      background-size: 100% 100%;
-    }
-  }
+  // :global {
+
+  // }
 }
 .CatVideoHide {
   opacity: 0;

Code/src/components/CatVideo/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef } from 'react'
 import styles from './index.module.scss'
 import classNames from 'classnames'
 import { domDelOwnFu } from '@/utils/utilsSome'
-import { baseURL } from '@/utils/http'
+import BtnRight from '../BtnRight'
 
 type Props = {
   isShow: boolean
@@ -44,13 +44,8 @@ function CatVideo({ isShow, src, parentFu, noBtn }: Props) {
         Your browser does not support the video tag.
       </video>
 
-      <div
-        hidden={noBtn}
-        title='跳过'
-        className='CatTiao hoverD'
-        style={{ backgroundImage: `url(${baseURL}home/tiao.png)` }}
-        onClick={playEndFu}
-      ></div>
+      {/* 右下角的跳过按钮 */}
+      <BtnRight imgName='skip' clickSon={() => playEndFu()} title='跳过' />
     </div>
   )
 }

Code/src/components/EndVideo/index.module.scss

@@ -8,17 +8,9 @@
   opacity: 0;
   pointer-events: none;
   transition: all 1s;
-  :global {
-    .endVdieoBtn {
-      position: absolute;
-      width: 50px;
-      height: 50px;
-      background-size: 100% 100%;
-      cursor: pointer;
-      bottom: 20px;
-      right: 20px;
-    }
-  }
+  // :global {
+
+  // }
 }
 .EndVideoAc {
   opacity: 1;

Code/src/components/EndVideo/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.scss'
 import classNames from 'classnames'
 import { domDelOwnFu } from '@/utils/utilsSome'
 import history from '@/utils/history'
-import { baseURL } from '@/utils/http'
+import BtnRight from '../BtnRight'
 
 type Props = {
   lastVideo: boolean //是否显示
@@ -48,13 +48,8 @@ function EndVideo({ lastVideo, delDom, src, path, noBtn }: Props) {
         Your browser does not support the video tag.
       </video>
 
-      <div
-        hidden={noBtn}
-        title='跳过'
-        className='endVdieoBtn hoverD'
-        style={{ backgroundImage: `url(${baseURL}home/tiao.png)` }}
-        onClick={() => history.push(path)}
-      ></div>
+      {/* 右下角的跳过按钮 */}
+      <BtnRight imgName='skip' clickSon={() => history.push(path)} title='跳过' />
     </div>
   )
 }

Code/src/components/NextPage/index.module.scss

@@ -5,31 +5,29 @@
   transform: translateY(-50%);
   cursor: pointer;
   width: 120px;
-  height: auto;
+  height: 37px;
   z-index: 10;
   :global {
-    .NPimg {
-      width: 100%;
-    }
     .NPdiv {
-      position: absolute;
-      top: 0;
-      left: 0;
       width: 100%;
       height: 100%;
+      background-size: 100% 100%;
+      background-image: url('../../assets/img/btn.png');
+      color: #fffddc;
+      transition: all 0.3s;
+      font-size: 16px;
       display: flex;
       justify-content: center;
       align-items: center;
-      color: #fffddc;
-      font-size: 16px;
-      transition: all 0.3s;
-      &:hover {
-        color: #ead98f;
-      }
+
       & > span {
         padding-left: 5px;
         font-size: 14px;
       }
+      &:hover {
+        background-image: url('../../assets/img/btnAc.png');
+        color: #b67150;
+      }
     }
   }
 }

Code/src/components/NextPage/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import styles from './index.module.scss'
 import { ArrowRightOutlined } from '@ant-design/icons'
-import { baseURL } from '@/utils/http'
 
 type Props = {
   clickSon: () => void
@@ -11,7 +10,6 @@ type Props = {
 function NextPage({ clickSon, txt }: Props) {
   return (
     <div className={styles.NextPage}>
-      <img className='NPimg' src={`${baseURL}visit/btn.png`} alt='' />
       <div className='NPdiv' onClick={clickSon}>
         {txt}
         <ArrowRightOutlined />

Code/src/components/VideoModel/index.module.scss

@@ -8,17 +8,9 @@
   transition: all 1s;
   opacity: 0;
   pointer-events: none;
-  :global {
-    .videoMoBtn {
-      position: absolute;
-      width: 30px;
-      height: 30px;
-      background-size: 100% 100%;
-      cursor: pointer;
-      bottom: 15px;
-      right: 20px;
-    }
-  }
+  // :global {
+
+  // }
 }
 
 .VideoModelShow {

Code/src/components/VideoModel/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import styles from './index.module.scss'
 import classNames from 'classnames'
-import { baseURL } from '@/utils/http'
+import BtnRight from '../BtnRight'
 
 type Props = {
   isShow: boolean
@@ -36,12 +36,8 @@ function VideoModel({ isShow, src, closeFu }: Props) {
         Your browser does not support the video tag.
       </video>
 
-      <div
-        title='返回'
-        className='videoMoBtn hoverD'
-        style={{ backgroundImage: `url(${baseURL}visit/back.png)` }}
-        onClick={closeFu}
-      ></div>
+      {/* 右下角的返回按钮 */}
+      <BtnRight imgName='back' clickSon={() => closeFu()} title='返回' />
     </div>
   )
 }

Code/src/pages/A1home/index.module.scss

@@ -34,12 +34,13 @@
       .A1lodingBtn {
         cursor: pointer;
         width: 100px;
-        height: auto;
+        height: 31px;
         bottom: 4%;
-        & > img {
-          width: 100%;
-          height: auto;
-        }
+        background-size: 100% 100%;
+        background-image: url('../../assets/img/btn.png');
+        color: #fffddc;
+        transition: all 0.3s;
+
         & > div {
           position: absolute;
           top: 0;
@@ -49,12 +50,12 @@
           display: flex;
           justify-content: center;
           align-items: center;
-          color: #fffddc;
           font-size: 16px;
-          transition: all 0.3s;
-          &:hover {
-            color: #ead98f;
-          }
+        }
+        &:hover {
+          background-image: url('../../assets/img/btnAc.png');
+
+          color: #b67150;
         }
       }
 

Code/src/pages/A1home/index.tsx

@@ -88,7 +88,6 @@ function A1home() {
         <img className='A1Vlogo' src={`${baseURL}home/logo.png`} alt='' />
         {loding >= 100 ? (
           <div className='A1loding A1lodingBtn' onClick={btnStartFu}>
-            <img src={`${baseURL}visit/btn.png`} alt='' />
             <div>开始</div>
           </div>
         ) : (

Code/src/pages/A2visit/PanoVideo/Hot1/index.tsx

@@ -101,7 +101,12 @@ function Hot1({ closeFu, data }: Props) {
           </div>
 
           {/* 返回按钮 */}
-          <img className='h1Mback' onClick={closeFu} src={`${baseURL}visit/back.png`} alt='' />
+          <img
+            className='h1Mback hoverD'
+            onClick={closeFu}
+            src={`${baseURL}visit/back.png`}
+            alt=''
+          />
         </div>
 
         {/* 底部 */}

Code/src/pages/A2visit/PanoVideo/Hot2/index.tsx

@@ -75,7 +75,7 @@ function Hot2({ closeFu, data, name }: Props) {
         )}
 
         {/* 返回按钮 */}
-        <div className='h2Back'>
+        <div className='h2Back hoverD'>
           <img onClick={closeFu} src={`${baseURL}visit/back.png`} alt='' />
         </div>
       </div>

Code/src/pages/B2hots/index.module.scss

@@ -146,6 +146,10 @@
       width: 50px;
       height: 50px;
       background-size: 100% 100%;
+      transition: all 0.3s;
+      &:hover {
+        background-image: url('../../assets/img/icon-back1.png');
+      }
     }
   }
 }

Code/src/pages/B2hots/index.tsx

@@ -61,7 +61,7 @@ function B2hots() {
       </div>
 
       {/* 返回按钮 */}
-      <div className='B2back hoverD' title='返回' onClick={() => history.go(-1)}></div>
+      <div className='B2back' title='返回' onClick={() => history.go(-1)}></div>
     </div>
   )
 }

Code/src/pages/B3yun/index.module.scss

@@ -228,13 +228,20 @@
         width: 50px;
         height: 50px;
         background-size: 100% 100%;
+        transition: all 0.3s;
       }
       .yunBtn1 {
         background-image: url('../../assets/img/icon-xuanju.png');
         margin-right: 5px;
+        &:hover {
+          background-image: url('../../assets/img/icon-xuanju1.png');
+        }
       }
       .yunBtn2 {
         background-image: url('../../assets/img/icon-back.png');
+        &:hover {
+          background-image: url('../../assets/img/icon-back1.png');
+        }
       }
     }
   }

Code/src/pages/B3yun/index.tsx

@@ -123,12 +123,8 @@ function B3yun() {
 
       {/* 右下角的图标 */}
       <div className='yunBtn'>
-        <div
-          className='yunBtn1 hoverD'
-          title='仙居世界'
-          onClick={() => history.push('/hots')}
-        ></div>
-        <div className='yunBtn2 hoverD' title='返回' onClick={() => history.go(-1)}></div>
+        <div className='yunBtn1' title='仙居世界' onClick={() => history.push('/hots')}></div>
+        <div className='yunBtn2' title='返回' onClick={() => history.go(-1)}></div>
       </div>
     </div>
   )

Code/src/pages/B4xian/index.module.scss

@@ -1,16 +1,37 @@
 .B4xian {
-  overflow-x: auto;
-  overflow-y: hidden;
-  &::-webkit-scrollbar {
-    display: none;
-  }
+  position: relative;
   :global {
-    img {
-      pointer-events: none;
-      width: auto;
+    .B4main {
+      width: 100%;
       height: 100%;
-      max-width: 100000px;
-      object-fit: fill !important;
+      overflow-x: auto;
+      overflow-y: hidden;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      img {
+        pointer-events: none;
+        width: auto;
+        height: 100%;
+        max-width: 100000px;
+        object-fit: fill !important;
+      }
+    }
+    // 返回按钮
+    .B4back {
+      position: absolute;
+      z-index: 10;
+      right: 25px;
+      bottom: 25px;
+      background-image: url('../../assets/img/icon-back.png');
+      cursor: pointer;
+      width: 50px;
+      height: 50px;
+      background-size: 100% 100%;
+      transition: all 0.3s;
+      &:hover {
+        background-image: url('../../assets/img/icon-back1.png');
+      }
     }
   }
 }

Code/src/pages/B4xian/index.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { baseURL } from '@/utils/http'
+import history from '@/utils/history'
 function B4xian() {
   const [isFlag, setIsFlag] = useState(false)
 
@@ -25,17 +26,22 @@ function B4xian() {
     [isFlag]
   )
   return (
-    <div
-      className={styles.B4xian}
-      style={{ cursor: isFlag ? 'move' : 'default' }}
-      ref={xianRef}
-      onMouseDown={() => setIsFlag(true)}
-      onMouseUp={() => setIsFlag(false)}
-      onMouseLeave={() => setIsFlag(false)}
-      onMouseMove={e => mousemoveFu(e)}
-      onWheel={e => mousemoveFu(e, true)}
-    >
-      <img src={`${baseURL}xian/chang.jpg`} alt='' />
+    <div className={styles.B4xian}>
+      <div
+        className='B4main'
+        style={{ cursor: isFlag ? 'move' : 'default' }}
+        ref={xianRef}
+        onMouseDown={() => setIsFlag(true)}
+        onMouseUp={() => setIsFlag(false)}
+        onMouseLeave={() => setIsFlag(false)}
+        onMouseMove={e => mousemoveFu(e)}
+        onWheel={e => mousemoveFu(e, true)}
+      >
+        <img src={`${baseURL}xian/chang.jpg`} alt='' />
+      </div>
+
+      {/* 返回按钮 */}
+      <div className='B4back' title='返回' onClick={() => history.go(-1)}></div>
     </div>
   )
 }