feat(*): 定制开发

public/css/oldVer/main0.css

@@ -1,222 +1,285 @@
-.sidecontent{position:fixed;left:-750px;width:auto;display:none;background:rgba(0,0,0,0.8);top:70px;height: 100%;color: rgba(255,255,255,1);}
-.sidecontent h1{font-size:14px;width:90%;margin:0px auto;text-align:center;height:50px;line-height:50px;position:relative;}
-.sidecontent h1 span{font-size:12px;font-weight:normal;position:absolute;right:-10px;cursor:pointer;border:#ebebeb solid 1px;width:40px;height:40px;line-height:40px;border-radius:20px;text-align:center;}
-#text
-{
-    float:left;
-	width:auto;
-	font-size:18px;
-	letter-spacing:2px;
-	margin:30px;
-	max-width:600px;
-	height:500px;
-	max-height:630px;
-	line-height:22px;
-	font-family:"宋体";
-}
-#sideimg{margin:5px 20px 30px 10px;float:left;}
-
-#gui-modes-map div img
-{
-	width:48px;
-	height:48px;
+.sidecontent {
+  position: fixed;
+  left: -750px;
+  width: auto;
+  display: none;
+  background: rgba(0, 0, 0, 0.8);
+  top: 70px;
+  height: 100%;
+  color: rgba(255, 255, 255, 1);
+}
+.sidecontent h1 {
+  font-size: 14px;
+  width: 90%;
+  margin: 0px auto;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+}
+.sidecontent h1 span {
+  font-size: 12px;
+  font-weight: normal;
+  position: absolute;
+  right: -10px;
+  cursor: pointer;
+  border: #ebebeb solid 1px;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  border-radius: 20px;
+  text-align: center;
+}
+#text {
+  float: left;
+  width: auto;
+  font-size: 18px;
+  letter-spacing: 2px;
+  margin: 30px;
+  max-width: 600px;
+  height: 500px;
+  max-height: 630px;
+  line-height: 22px;
+  font-family: '宋体';
+}
+#sideimg {
+  margin: 5px 20px 30px 10px;
+  float: left;
 }
 
- 
-
-iframe{
-	border: none;
+#gui-modes-map div img {
+  width: 48px;
+  height: 48px;
 }
 
+iframe {
+  border: none;
+}
 
 #popup {
- 
-	text-align: center;
-	padding: 0;
-	position: relative;
-	width: 100%;
-	height: 100%;
-	/* margin: 80px auto; */
-	display: none;
-	z-index: 999999;
-	background:  rgba(0,0,0,0.6);
-}
-.popup-content{
-	position: relative;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-}
-#id1{ width: 100%; height: 100%;}
-#popup.wait{
-	opacity:0.1; 
+  text-align: center;
+  padding: 0;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  /* margin: 80px auto; */
+  display: none;
+  z-index: 999999;
+  background: rgba(0, 0, 0, 0.6);
+}
+.popup-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+#id1 {
+  width: 100%;
+  height: 100%;
+}
+#popup.wait {
+  opacity: 0.1;
 }
 #closepop {
-	background: url(../../images/close1.png) no-repeat;
-	width: 60px;
-	height: 60px;
-	cursor: pointer;
-	position: absolute;
-	right: 30px;
-	top: 30px;
-	text-indent: -999em;
-	background-size: 100% 100%;
-}
-.specialTitle{bottom:65%;
-    width: 100%;
-    padding: 0 25px;
-    display: block;
-    font-family: OpenSans,'Helvetica Neue',sans-serif;
-    text-align: center;
-    font-size: 40px;
-    font-weight: 100;
-    letter-spacing: .75px;
-    text-shadow: 0 0 10px rgba(15,16,17,1);
-    color: rgba(255,255,255,1);
-    margin: 0;
-    position: absolute;
-    hyphens: auto;
-    word-wrap: break-word;
-    line-height: 45px;}
-	.dropdown {position: relative;display: inline-block;float: right;height: 40px;line-height: 40px;right: 10px;}
-    .floor{ width: 100px;text-align: center;display: block;height: 30px;background: rgba(0,0,0,0.4);line-height: 30px;margin-top: 10px;cursor: pointer;}
-    .dropdown-content {display: none;position: absolute;background: rgba(0,0,0,0.6);min-width: 100px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);text-align:center;}
-    .dropdown:hover .dropdown-content {display: block;}
-    a{text-decoration:none;}
-	#YY,#SZZ{display:none;}
- @media only screen and (max-width:487px){
-           .dropdown {height: 30px;line-height: 30px;right:5px;}
-           .floor {width: 80px;height: 20px;line-height: 20px;margin-top: 5px;}
-          .dropdown-content{min-width: 80px;}	
-           }
+  background: url(../../images/close1.png) no-repeat;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  position: absolute;
+  right: 405px;
+  top: 185px;
+  text-indent: -999em;
+  background-size: 100% 100%;
+}
+.specialTitle {
+  bottom: 65%;
+  width: 100%;
+  padding: 0 25px;
+  display: block;
+  font-family: OpenSans, 'Helvetica Neue', sans-serif;
+  text-align: center;
+  font-size: 40px;
+  font-weight: 100;
+  letter-spacing: 0.75px;
+  text-shadow: 0 0 10px rgba(15, 16, 17, 1);
+  color: rgba(255, 255, 255, 1);
+  margin: 0;
+  position: absolute;
+  hyphens: auto;
+  word-wrap: break-word;
+  line-height: 45px;
+}
+.dropdown {
+  position: relative;
+  display: inline-block;
+  float: right;
+  height: 40px;
+  line-height: 40px;
+  right: 10px;
+}
+.floor {
+  width: 100px;
+  text-align: center;
+  display: block;
+  height: 30px;
+  background: rgba(0, 0, 0, 0.4);
+  line-height: 30px;
+  margin-top: 10px;
+  cursor: pointer;
+}
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background: rgba(0, 0, 0, 0.6);
+  min-width: 100px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  text-align: center;
+}
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+a {
+  text-decoration: none;
+}
+#YY,
+#SZZ {
+  display: none;
+}
+@media only screen and (max-width: 487px) {
+  .dropdown {
+    height: 30px;
+    line-height: 30px;
+    right: 5px;
+  }
+  .floor {
+    width: 80px;
+    height: 20px;
+    line-height: 20px;
+    margin-top: 5px;
+  }
+  .dropdown-content {
+    min-width: 80px;
+  }
+}
 @media screen and (max-width: 1600px) {
- 
-	/*#popup {
+  /*#popup {
 		width: 816px;
 		height: 510px;
 		margin: -255px auto auto -408px;
 	}*/
-	.specialTitle{
-	bottom:65%;
+  .specialTitle {
+    bottom: 65%;
     font-size: 34px;
-	}
+  }
 }
 
 @media screen and (max-width: 1400px) {
- 
-	/*#popup {
+  /*#popup {
 		width: 714px;
 		height: 446px;
 		margin: -223px auto auto -357px;
 	}*/
-	.specialTitle {
+  .specialTitle {
     bottom: 65%;
     font-size: 30px;
-    }
+  }
 }
 
 @media screen and (max-width: 1200px) {
- 
-	#closepop{
-		width: 40px;
-		height: 40px;
-		top: 20px;
-		right: 20px;
-	}
-	.specialTitle {
+  #closepop {
+    width: 40px;
+    height: 40px;
+    top: 20px;
+    right: 20px;
+  }
+  .specialTitle {
     bottom: 66%;
     font-size: 26px;
-    }
+  }
 }
- 
-@media screen and (max-width: 768px) {
- 
-	.specialTitle {
-     bottom: 62%;
-     font-size: 26px;
-	 line-height:40px;
-    }
-	#special-gui-name{display:none;}
-}
-@media screen and  (max-width: 736px){
-
-	
-	#title-toggle{
-		padding-top: 18px;
-		height: 42px;
-	}
-
-
-	.pinTop{top:8px;}
-}
-@media screen and  (max-width:667px){
-	#closepop{
-		width: 36px;
-		height: 36px;
-		top: 0px;
-		right: 0px;
-	}
-
-	#title-toggle{
-		padding-top: 17px;
-		height: 40px;
-	}
-
-	#musicImg .fa-2x {
-        font-size: 1.5em;
-    }
-	.pinTop{top:8px;}
 
+@media screen and (max-width: 768px) {
+  .specialTitle {
+    bottom: 62%;
+    font-size: 26px;
+    line-height: 40px;
+  }
+  #special-gui-name {
+    display: none;
+  }
 }
-@media screen and  (max-width:568px){
-
-	
-	#title-toggle{
-		padding-top: 17px;
-		height: 38px;
-	}
-	
-	#musicImg .fa-2x {
-        font-size: 1.5em;
-    }
-	.pinTop{top:8px;}
+@media screen and (max-width: 736px) {
+  #title-toggle {
+    padding-top: 18px;
+    height: 42px;
+  }
 
+  .pinTop {
+    top: 8px;
+  }
 }
-@media screen and (max-width:414px) {
+@media screen and (max-width: 667px) {
+  #closepop {
+    width: 20px;
+    height: 20px;
+    top: 105px;
+    right: 30px;
+  }
 
-	
-	#title-toggle{
-		padding-top: 17px;
-		height: 40px;
-	}
-	
+  #title-toggle {
+    padding-top: 17px;
+    height: 40px;
+  }
 
+  #musicImg .fa-2x {
+    font-size: 1.5em;
+  }
+  .pinTop {
+    top: 8px;
+  }
 }
-@media screen and (max-width:375px) {
+@media screen and (max-width: 568px) {
+  #title-toggle {
+    padding-top: 17px;
+    height: 38px;
+  }
 
-	
-	#title-toggle{
-		padding-top: 17px;
-		height: 38px;
-	}
+  #musicImg .fa-2x {
+    font-size: 1.5em;
+  }
+  .pinTop {
+    top: 8px;
+  }
+}
+@media screen and (max-width: 414px) {
+  #title-toggle {
+    padding-top: 17px;
+    height: 40px;
+  }
+}
+@media screen and (max-width: 375px) {
+  #title-toggle {
+    padding-top: 17px;
+    height: 38px;
+  }
 
-	
-	.pinTop{top:5px;}	
-	
+  .pinTop {
+    top: 5px;
+  }
 }
-@media screen and (max-width:320px) {
-	/*#popup {
+@media screen and (max-width: 320px) {
+  /*#popup {
 		width: 200px;
         height: 380px;
         margin: -200px auto auto -100px;
 	}*/
-	
-	#title-toggle{
-		padding-top: 16px;
-		height: 36px;
-	}
 
-	
-	.pinTop{top:0px;}
-	
-}
+  #title-toggle {
+    padding-top: 16px;
+    height: 36px;
+  }
+
+  .pinTop {
+    top: 0px;
+  }
+}

public/js/Hot.js

@@ -57,7 +57,8 @@ window.initHot = function (model) {
       ? (src = link + '?time=' + randomTime().getTime() + '&id=' + window.number + o)
       : (src = link + '&time=' + randomTime().getTime() + '&id=' + window.number + o)
 
-    return src
+    return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'http://localhost:8080')
+    // return src
   }
   var removeSrcPostMark = function (url) {
     //去除texture.load时自动加上的'?'

src/assets/styles/base.css

@@ -9,9 +9,14 @@ html {
   user-select: none;
 }
 body {
-  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
+  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
+    'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   height: 100%;
 }
+@font-face {
+  font-family: 'fzFont'; /* 自定义字体名称 */
+  src: url('../font/fzFont.TTF') format('truetype');
+}
 a {
   text-decoration: none;
   outline: none;

src/components/RouterOrder.tsx

@@ -3,8 +3,7 @@ import React from 'react'
 import { Route, Router, Switch } from 'react-router-dom'
 import SpinLoding from './SpinLoding'
 import NotFound from '@/components/NotFound'
-
-const A1home = React.lazy(() => import('@/pages/A1home'))
+import A0base from '@/pages/A0base'
 
 const routerArr = [
   {
@@ -12,7 +11,14 @@ const routerArr = [
     name: '首页',
     path: '/',
     exact: true,
-    Com: A1home
+    Com: React.lazy(() => import('@/pages/A0base'))
+  },
+  {
+    id: 2,
+    name: '主页',
+    path: '/home',
+    exact: true,
+    Com: React.lazy(() => import('@/pages/A1home'))
   },
 
   {

src/pages/A0base/index.module.scss

@@ -0,0 +1,4 @@
+.A0base {
+  :global {
+  }
+}

src/pages/A0base/index.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react'
+import isMobile from '../../utils/isMobile'
+import A5Mobile from '../A5Mobile'
+import A4base from '../A4base'
+import styles from './index.module.scss'
+function A0base() {
+  const [show, setShow] = useState(true)
+  return (
+    <>
+      {/* 初始封面 */}
+      {isMobile() ? (
+        <A5Mobile show={show} setShow={setShow} />
+      ) : (
+        <A4base show={show} setShow={setShow} />
+      )}
+    </>
+  )
+}
+
+const MemoA0base = React.memo(A0base)
+
+export default MemoA0base

src/pages/A1home/index.tsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import A2main from '../A2main'
-import A4base from '../A4base'
-
 const scriptArr = [
   './js/manage.js',
   './js/Hot.js?m=1',
@@ -28,9 +26,6 @@ function A1home() {
 
   return (
     <div className={styles.A1home}>
-      {/* 初始封面 */}
-      <A4base />
-
       <div id='hot'> </div>
       <div className='widgets-doll-labels'> </div>
       <div id='popup'>

src/pages/A2main/index.module.scss

@@ -9,18 +9,16 @@
     .hoveImg {
       pointer-events: none;
       transition: all 0.5s;
-      opacity: 0;
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      top: -40px;
+      top: 45px;
       width: 80px;
       height: 37px;
       line-height: 30px;
       text-align: center;
-      background-image: url('../../assets/img/hoverTit.png');
-      background-size: 100% 100%;
       font-size: 14px;
+      font-family: 'fzFont';
       color: #fff;
     }
 
@@ -30,28 +28,10 @@
       left: 20px;
     }
 
-    #play,
-    #pause {
-      width: var(--pcIconWidth);
-      height: var(--pcIconWidth);
-      background-color: transparent !important;
-      position: relative;
-      a {
-        width: 100%;
-        height: 100%;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      &:hover {
-        .hoveImg {
-          opacity: 1;
-        }
-      }
-    }
-
     #gui-modes-map {
+      #play,
+      #pause,
+      #next,
       #pullTab,
       .A2hotIcon,
       #gui-modes-inside,
@@ -59,43 +39,43 @@
       #gui-modes-floorplan {
         width: var(--pcIconWidth);
         height: var(--pcIconWidth);
-        margin-left: 18px;
+        margin-left: 38px;
         background-color: transparent !important;
         position: relative;
         img {
-          width: 100%;
-          height: 100%;
-        }
-        &:hover {
-          .hoveImg {
-            opacity: 1;
-          }
+          width: 48px;
+          height: 48px;
         }
       }
+
+      //针对第一个按钮
+      #play,
+      #pause {
+        margin-left: 18px;
+      }
     }
 
-    .likeBox,
-    #volume,
-    #gui-fullscreen,
-    #gui-fullscreen-exit {
-      width: var(--pcIconWidth);
-      height: var(--pcIconWidth);
-      margin-right: 18px;
-      background-color: transparent !important;
-      position: relative;
-      a {
-        width: 100%;
-        height: 100%;
+    .rightViewContainer {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 38px;
+      .likeBox,
+      #volume,
+      #gui-fullscreen,
+      #gui-fullscreen-exit,
+      .A2_share_box,
+      .A2_view_box {
+        width: 48px;
+        height: 48px;
+        margin: 0;
+        background-color: transparent !important;
+        position: relative;
         img {
           width: 100%;
           height: 100%;
         }
       }
-      &:hover {
-        .hoveImg {
-          opacity: 1;
-        }
-      }
     }
 
     // 底部的位置
@@ -114,11 +94,6 @@
 
     // 只有在全景漫游下其他按钮才能点
     .pinBottom-containerNo {
-      // #pullTab,
-      // .likeBox,
-      // #volume,
-      // #gui-fullscreen,
-      // #gui-fullscreen-exit
       #play,
       #pause,
       .A2hotIcon {
@@ -137,13 +112,6 @@
         height: 100%;
       }
 
-      .likeNum {
-        position: absolute;
-        bottom: -16px;
-        width: 100%;
-        text-align: center;
-        text-shadow: 1px 1px 1px #fcda99;
-      }
       .likeMove {
         position: absolute;
         z-index: 100;
@@ -156,11 +124,6 @@
       .likeMoveAc {
         opacity: 1;
       }
-      &:hover {
-        .hoveImg {
-          opacity: 1;
-        }
-      }
     }
 
     .pinBottom-container.drawerOpen {
@@ -169,26 +132,36 @@
 
     // 展开的导览样式
     .darkGlass {
-      background-color: red;
+      background-color: rgba(0, 0, 0, 0.5);
     }
     #drawer.open {
       height: 140px !important;
       #scrollFrame {
-        height: 107px;
+        height: 130px;
       }
     }
     #thumb-container {
+      width: 100% !important;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 10px;
       .thumbImg {
-        width: 122px;
+        width: 140px;
+        height: 130px;
+        margin: 0;
         & > img {
-          height: 86px;
+          height: 100%;
           &:hover {
-            border-color: yellow;
+            border-color: rgba(142, 103, 68, 1);
           }
         }
         .overlay {
-          background-color: transparent;
-          bottom: -24px;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, 220%);
+          width: 100%;
+          background-color: rgba(0, 0, 0, 0.5);
           font-weight: 700;
           color: #fff;
         }
@@ -225,66 +198,111 @@
     }
 
     // 移动端
-    @media screen and (max-width: 1000px) {
+
+    @media screen and (max-width: 600px) {
       .hoveImg {
-        display: none !important;
-      }
-      #play,
-      #pause {
-        width: var(--appIconWidthH);
-        height: var(--appIconWidthH);
+        height: 20px;
+        top: 30px;
+        font-size: 10px;
       }
       #gui-modes-map {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        flex-direction: column;
+        gap: 20px;
+        #play,
+        #pause,
+        #next,
         #pullTab,
         .A2hotIcon,
         #gui-modes-inside,
         #gui-modes-dollhouse,
         #gui-modes-floorplan {
-          width: var(--appIconWidthH);
-          height: var(--appIconWidthH);
+          margin: 0;
+          width: 35px;
+          height: 35px;
+          background-color: transparent !important;
+          position: relative;
+          img {
+            width: 35px;
+            height: 35px;
+          }
         }
       }
-      .likeBox,
-      #volume,
-      #gui-fullscreen,
-      #gui-fullscreen-exit {
-        width: var(--appIconWidthH);
-        height: var(--appIconWidthH);
+
+      .pinBottom {
+        right: 20px;
+      }
+
+      .rightViewContainer {
+        display: flex;
+        justify-content: flex-end;
+        flex-direction: column;
+        align-items: center;
+        gap: 20px;
+        .likeBox,
+        #volume,
+        #gui-fullscreen,
+        #gui-fullscreen-exit,
+        .A2_share_box,
+        .A2_view_box {
+          width: 35px;
+          height: 35px;
+          margin: 0;
+          background-color: transparent !important;
+          position: relative;
+          a {
+            width: 35px;
+            height: 35px;
+            img {
+              width: 35px;
+              height: 35px;
+            }
+          }
+        }
+      }
+
+      .darkGlass {
+        background-color: rgba(0, 0, 0, 0.5);
       }
       #drawer.open {
-        height: 130px !important;
+        height: 100px !important;
+        #scrollFrame {
+          height: 90px;
+        }
       }
+
       #thumb-container {
+        width: fit-content !important;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 10px;
         .thumbImg {
+          width: 100px;
+          height: 80px;
+          margin: 0;
           & > img {
+            height: 100%;
             &:hover {
-              border-color: transparent;
+              border-color: rgba(142, 103, 68, 1);
             }
           }
+          .overlay {
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, 120%);
+            width: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            font-weight: 700;
+            color: #fff;
+          }
         }
-      }
-    }
-
-    @media screen and (max-width: 600px) {
-      #gui-modes-map {
-        #pullTab,
-        .A2hotIcon,
-        #gui-modes-inside,
-        #gui-modes-dollhouse,
-        #gui-modes-floorplan {
-          margin-left: 0;
-          margin-top: 5px;
+        .active > img {
+          border-color: #fff !important;
         }
       }
-      .likeBox,
-      #volume,
-      #gui-fullscreen,
-      #gui-fullscreen-exit {
-        margin-right: 5px;
-      }
-      .pinBottom.right {
-        right: 10px;
-      }
     }
   }
 }

src/pages/A2main/index.tsx

@@ -8,6 +8,7 @@ import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
 import classNames from 'classnames'
 import A3hotList from '../A3hotList'
+import { message } from 'antd'
 
 const imgArrTemp = ['like.png', 'likeAc.png']
 const imgArr = imgArrTemp.map(item => require(`@/assets/img/${item}`))
@@ -33,6 +34,34 @@ function A2main() {
   // 点击热点列表
   const [hotListShow, setHotListShow] = useState(false)
 
+  // 点击分享
+  const copyWithTextarea = (text: string) => {
+    const textArea = document.createElement('textarea')
+    textArea.value = text
+    textArea.style.position = 'fixed'
+    textArea.style.left = '-9999px'
+    textArea.style.top = '-9999px'
+    document.body.appendChild(textArea)
+    textArea.select()
+    const copyTXT = document.execCommand('copy')
+    document.body.removeChild(textArea)
+    return copyTXT
+  }
+  const handleShareClick = () => {
+    if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+      navigator.clipboard.writeText(window.location.href)
+      message.success('链接已复制到剪贴板')
+    } else {
+      copyWithTextarea(window.location.href)
+      message.success('链接已复制到剪贴板')
+    }
+  }
+
+  // 点击浏览量
+  const handleViewClick = () => {
+    console.log('点击浏览量')
+  }
+
   return (
     <div className={styles.A2main} id='gui' style={{ display: 'none' }}>
       <A21vrOff />
@@ -72,35 +101,35 @@ function A2main() {
                 />
               </a>
             </div>
-            <div id='play' className='ui-icon' rel='tooltip' data-original-title='播放'>
-              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-              <a>
-                <img src='images/play.png' alt='' />
-              </a>
-              {/* 鼠标移入 */}
-              <div className='hoveImg'>自动导览</div>
-            </div>
-            <div id='pause' className='ui-icon' style={{ display: 'none' }}>
-              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-              <a>
-                <img rel='tooltip' src='images/pause.png' alt='' />
-              </a>
-              {/* 鼠标移入 */}
-              <div className='hoveImg'>暂停导览</div>
-            </div>
-            <div id='next' className='next desktop-only ui-icon wide' style={{ display: 'none' }}>
-              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-              <a>
-                <i
-                  rel='tooltip'
-                  title=''
-                  className='icon icon-dpad-right'
-                  data-original-title='下一个'
-                ></i>
-              </a>
-            </div>
 
             <div id='gui-modes-map' className='ui-icon double active'>
+              <div id='play' className='ui-icon' rel='tooltip' data-original-title='播放'>
+                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                <a style={{ width: '100%', height: '100%' }}>
+                  <img src='images/play.png' alt='' />
+                </a>
+                {/* 鼠标移入 */}
+                <div className='hoveImg'>开始漫游</div>
+              </div>
+              <div id='pause' className='ui-icon' rel='tooltip' style={{ display: 'none' }}>
+                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                <a style={{ width: '100%', height: '100%' }}>
+                  <img rel='tooltip' src='images/pause.png' alt='' />
+                </a>
+                {/* 鼠标移入 */}
+                <div className='hoveImg'>暂停漫游</div>
+              </div>
+              <div id='next' className='next desktop-only ui-icon wide' style={{ display: 'none' }}>
+                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                <a>
+                  <i
+                    rel='tooltip'
+                    title=''
+                    className='icon icon-dpad-right'
+                    data-original-title='下一个'
+                  ></i>
+                </a>
+              </div>
               <div data-original-title='导览' id='pullTab' rel='tooltip' title=''>
                 <img className='icon icon-inside' src='images/auto.png' alt='' />
                 {/* 鼠标移入 */}
@@ -122,6 +151,21 @@ function A2main() {
                 />
               </div>
 
+              {/* 新的热点列表 */}
+              <div
+                className='A2hotIcon'
+                rel='tooltip'
+                onClick={() => {
+                  // 停止自动导览
+                  window.player.director.stopTour()
+                  setHotListShow(true)
+                }}
+              >
+                <img src='images/hotlist.png' alt='' />
+                {/* 鼠标移入 */}
+                <div className='hoveImg'>热点列表</div>
+              </div>
+
               <div data-original-title='全景漫游' id='gui-modes-inside' rel='tooltip'>
                 <img
                   className='icon icon-inside'
@@ -138,7 +182,7 @@ function A2main() {
                   alt=''
                 />
                 {/* 鼠标移入 */}
-                <div className='hoveImg'>三维视觉</div>
+                <div className='hoveImg'>全景模型</div>
               </div>
               <div data-original-title='俯视图' id='gui-modes-floorplan' rel='tooltip'>
                 <img
@@ -147,9 +191,9 @@ function A2main() {
                   alt=''
                 />
                 {/* 鼠标移入 */}
-                <div className='hoveImg'>平面视觉</div>
+                <div className='hoveImg'>顶部视图</div>
               </div>
-              <div
+              {/* <div
                 data-original-title='VR'
                 id='vr'
                 rel='tooltip'
@@ -157,8 +201,8 @@ function A2main() {
                 style={{ display: 'none' }}
               >
                 <img className='icon icon-inside' src='images/VR.png' title='VR' alt='' />
-              </div>
-              <div
+              </div> */}
+              {/* <div
                 data-original-title='消除外壳'
                 id='gui-remove-face'
                 rel='tooltip'
@@ -166,22 +210,7 @@ function A2main() {
                 style={{ display: 'none', float: 'left' }}
               >
                 <img className='icon icon-inside' src='images/face.jpg' alt='' />
-              </div>
-
-              {/* 新的热点列表 */}
-              <div
-                className='A2hotIcon'
-                rel='tooltip'
-                onClick={() => {
-                  // 停止自动导览
-                  window.player.director.stopTour()
-                  setHotListShow(true)
-                }}
-              >
-                <img src='images/hotlist.png' alt='' />
-                {/* 鼠标移入 */}
-                <div className='hoveImg'>热点列表</div>
-              </div>
+              </div> */}
             </div>
           </div>
         </div>
@@ -207,11 +236,20 @@ function A2main() {
             <div className='likeBox' onClick={likeFu}>
               <img src={like ? imgArr[1] : imgArr[0]} alt='' />
               {/* 鼠标移入 */}
-              <div className='hoveImg'>点赞</div>
-              <div className='likeNum'>{likeNum}</div>
+              <div className='hoveImg'>点赞{likeNum}</div>
               <div className={classNames('likeMove', like ? 'likeMoveAc' : '')}>+1</div>
             </div>
 
+            <div className='A2_share_box' onClick={handleShareClick}>
+              <img src={require('@/assets/img/share.png')} alt='' />
+              <div className='hoveImg'>分享</div>
+            </div>
+
+            <div className='A2_view_box' onClick={handleViewClick}>
+              <img src={require('@/assets/img/view.png')} alt='' />
+              <div className='hoveImg'>浏览量</div>
+            </div>
+
             <div id='vr' className='ui-icon wide hidden' style={{ display: 'none' }}>
               {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               <a>
@@ -259,7 +297,11 @@ function A2main() {
       <A24drawerList />
 
       {/* 热点列表 */}
-      <A3hotList show={hotListShow} closeFu={() => setHotListShow(false)} />
+      <A3hotList
+        show={hotListShow}
+        setShow={setHotListShow}
+        closeFu={() => setHotListShow(false)}
+      />
     </div>
   )
 }

src/pages/A3hotList/index.module.scss

@@ -1,32 +1,110 @@
 .A3hotList {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
+  top: 50%;
+  right: 0;
+  transform: translate(0, -50%);
+  width: 250px;
   height: 100%;
   z-index: 30001;
-  background-color: rgba(255, 255, 255, 0.4);
-  backdrop-filter: blur(4px);
-  padding: 10%;
-  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
   :global {
-    .A3close {
-      position: absolute;
-      top: 20px;
-      right: 20px;
-      cursor: pointer;
-    }
     .A3main {
-      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 10px;
+      width: 250px;
       height: 100%;
-      background-color: red;
-      color: #fff;
+      background: url('../../assets/img/hotlist_bg.png') center center;
+      background-size: 100% 100%;
+      color: rgba(43, 31, 23, 0.9);
+      font-size: 17px;
+      font-weight: 500;
+      font-family: 'fzFont';
       overflow: auto;
-      & > div {
+      padding-bottom: 40px;
+      // 隐藏滚动条
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      .A3title {
+        padding: 40px 0 30px 0;
+        font-size: 24px;
+        font-weight: 400;
+        color: rgba(43, 31, 23, 0.9);
+      }
+      .A3item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: fit-content;
+        padding: 4px 3px;
+        cursor: pointer;
+        &:hover {
+          background-color: rgba(163, 124, 79, 1);
+        }
+      }
+      .A3close {
+        position: fixed;
+        bottom: 0;
+        width: 250px;
+        height: 40px;
+        background-color: rgba(148, 113, 76, 0.9);
+        border-top: 1px solid rgba(43, 31, 23, 0.1);
         cursor: pointer;
-        margin-bottom: 10px;
         &:hover {
-          color: blue;
+          opacity: 1;
+        }
+        img {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 24px;
+          height: 24px;
+          opacity: 0.6;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .A3hotList {
+    width: 100%;
+    height: 50%;
+    transform: translate(0, -100%);
+    :global {
+      .A3main {
+        width: 100%;
+        height: 100%;
+        background: url('../../assets/img/hotlist_bg.png') center center;
+        background-size: 100% 100%;
+        padding-bottom: 20px;
+        .A3title {
+          padding: 20px 0 10px 0;
+          font-size: 16px;
+        }
+        .A3item {
+          font-size: 14px;
+          padding: 10px 3px;
+          &:touch {
+            background-color: rgba(163, 124, 79, 1);
+          }
+        }
+        .A3close {
+          width: 100%;
+          height: 20px;
+          background-color: rgba(148, 113, 76, 0.9);
+          border-top: 1px solid rgba(43, 31, 23, 0.1);
+          img {
+            width: 16px;
+            height: 16px;
+          }
         }
       }
     }

src/pages/A3hotList/index.tsx

@@ -2,15 +2,16 @@ import React, { useCallback, useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import { A3listType } from './type'
 
-const imgArrTemp = ['hotListX.png']
+const imgArrTemp = ['close.png']
 const imgArr = imgArrTemp.map(item => require(`@/assets/img/${item}`))
 
 type Props = {
   show: boolean
+  setShow: (show: boolean) => void
   closeFu: () => void
 }
 
-function A3hotList({ show, closeFu }: Props) {
+function A3hotList({ show, setShow, closeFu }: Props) {
   const [list, setList] = useState<A3listType[]>([])
 
   useEffect(() => {
@@ -28,14 +29,23 @@ function A3hotList({ show, closeFu }: Props) {
       className={styles.A3hotList}
       style={{ opacity: show ? '1' : '0', pointerEvents: show ? 'auto' : 'none' }}
     >
-      <img onClick={closeFu} className='A3close' src={imgArr[0]} alt='' />
-
       <div className='A3main'>
+        <div className='A3title'>热点列表</div>
         {list.map((item, index) => (
-          <div onClick={() => openHot(item)} key={index}>
+          <div
+            className='A3item'
+            onClick={() => {
+              openHot(item)
+              setShow(false)
+            }}
+            key={index}
+          >
             {item.info.title || '热点'}
           </div>
         ))}
+        <div className='A3close' onClick={closeFu}>
+          <img className='A3close' src={imgArr[0]} alt='' />
+        </div>
       </div>
     </div>
   )

src/pages/A4base/index.module.scss

@@ -1,12 +1,72 @@
 .A4base {
-  position: absolute;
-  top: 0;
-  left: 0;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   z-index: 99999;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.6);
   transition: all 0.5s;
-  // :global {
-  // }
+  background: url('./image/bg.png') repeat center center;
+  // background-size: 100% 100%;
+  > div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    img {
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  :global {
+    .A4base-title3 {
+      transform: translate(-50%, -420px);
+      width: 1728px;
+      height: 50px;
+    }
+    .A4base-logo {
+      transform: translate(-865px, -350px);
+      width: 100px;
+      height: 150px;
+    }
+    .A4base-content {
+      width: 1150px;
+      height: 500px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      transform: translate(-50%, -280px);
+      .A4base-title2 {
+        width: 68%;
+        height: 100%;
+      }
+      .A4base-title1 {
+        width: 100%;
+        height: 100%;
+      }
+      .A4base-other {
+        width: 78%;
+        height: 100%;
+      }
+    }
+
+    .A4base-pic1 {
+      transform: translate(650px, -70px);
+      width: 202px;
+      height: 316px;
+    }
+    .A4base-pic2 {
+      transform: translate(-50%, 50%);
+      width: 1920px;
+      height: 325px;
+    }
+    .A4base-button {
+      transform: translate(-50%, 345px);
+      width: 164px;
+      height: 41px;
+      cursor: pointer;
+    }
+  }
 }

src/pages/A4base/index.tsx

@@ -1,20 +1,42 @@
-import React, { useCallback, useState } from 'react'
+import React from 'react'
 import styles from './index.module.scss'
-
-function A4base() {
-  const [show, setShow] = useState(true)
-
-  const baseStart = useCallback(() => {
-    window.manage.switchBgmState(true)
-    setShow(false)
-  }, [])
-
+import { useHistory } from 'react-router-dom'
+function A4base({ show, setShow }: { show: boolean; setShow: (show: boolean) => void }) {
+  const history = useHistory()
   return (
-    <div
-      className={styles.A4base}
-      style={{ opacity: show ? '1' : '0', pointerEvents: show ? 'auto' : 'none' }}
-    >
-      <h1 onClick={baseStart}>A4base</h1>
+    <div className={styles.A4base} style={{ display: show ? 'block' : 'none' }}>
+      <div className={'A4base-title3'}>
+        <img src={require('./image/title_3.png')} alt='' />
+      </div>
+      <div className='A4base-logo'>
+        <img src={require('./image/logo.png')} alt='' />
+      </div>
+      <div className='A4base-content'>
+        <div className='A4base-title1'>
+          <img src={require('./image/title.png')} alt='' />
+        </div>
+        <div className='A4base-title2'>
+          <img src={require('./image/title_2.png')} alt='' />
+        </div>
+        <div className='A4base-other'>
+          <img src={require('./image/other.png')} alt='' />
+        </div>
+      </div>
+      <div className='A4base-pic1'>
+        <img src={require('./image/pic_1.png')} alt='' />
+      </div>
+      <div className='A4base-pic2'>
+        <img src={require('./image/pic_2.png')} alt='' />
+      </div>
+      <div
+        className='A4base-button'
+        onClick={() => {
+          setShow(false)
+          history.push('/home?m=mm-1562')
+        }}
+      >
+        <img src={require('./image/button.png')} alt='' />
+      </div>
     </div>
   )
 }

src/pages/A5Mobile/index.module.scss

@@ -0,0 +1,56 @@
+.A5Mobile {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 99999;
+  width: 100%;
+  height: 100%;
+  transition: all 0.5s;
+  background: url('./image/bg.png') repeat center center;
+  > div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    img {
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  :global {
+    .title {
+      transform: translate(-100px, -340px);
+      width: 155px;
+    }
+    .title2 {
+      transform: translate(-145px, -340px);
+      width: 12px;
+    }
+    .pic1 {
+      transform: translate(70px, -228px);
+      width: 100px;
+    }
+    .pic2 {
+      transform: translate(-150px, -10px);
+      width: 65px;
+    }
+    .pic3 {
+      transform: translate(-50%, 48%);
+      width: 100%;
+    }
+    .other {
+      transform: translate(45px, -30px);
+      width: 100px;
+    }
+    .logo {
+      transform: translate(130px, -320px);
+      width: 37px;
+    }
+    .button {
+      cursor: pointer;
+      transform: translate(-50%, 260px);
+      width: 100px;
+    }
+  }
+}

src/pages/A5Mobile/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { useHistory } from 'react-router-dom'
+function A5Mobile({ show, setShow }: { show: boolean; setShow: (show: boolean) => void }) {
+  const history = useHistory()
+  return (
+    <div className={styles.A5Mobile} style={{ display: show ? 'block' : 'none' }}>
+      <div className='title'>
+        <img src={require('./image/title.png')} alt='' />
+      </div>
+      <div className='title2'>
+        <img src={require('./image/title_2.png')} alt='' />
+      </div>
+      <div className='pic1'>
+        <img src={require('./image/pic_1.png')} alt='' />
+      </div>
+      <div className='pic2'>
+        <img src={require('./image/pic_2.png')} alt='' />
+      </div>
+      <div className='pic3'>
+        <img src={require('./image/pic_3.png')} alt='' />
+      </div>
+      <div className='other'>
+        <img src={require('./image/other.png')} alt='' />
+      </div>
+      <div className='logo'>
+        <img src={require('./image/logo.png')} alt='' />
+      </div>
+      <div
+        className='button'
+        onClick={() => {
+          setShow(false)
+          history.push('/home?m=mm-1562')
+        }}
+      >
+        <img src={require('./image/button.png')} alt='' />
+      </div>
+    </div>
+  )
+}
+
+const MemoA5Mobile = React.memo(A5Mobile)
+
+export default MemoA5Mobile

src/utils/isMobile.ts

@@ -0,0 +1,3 @@
+export default function isMobile() {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+}