gx

Scene/src/pages/A0base/index.tsx

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

Scene/src/pages/A4base/index.module.scss

@@ -0,0 +1,77 @@
+.A4base {
+  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;
+  background-size: 100% 101%;
+  > div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    img {
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  :global {
+    .A4base-title3 {
+      transform: translate(-50%, -89%);
+      width: 900px;
+      height: 340px;
+    }
+    .A4base-logo {
+      transform: translate(-233%, -271%);
+      width: 400px;
+      height: 162px;
+    }
+    .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(-178%, 43%);
+      width: 530px;
+      height: 304px;
+    }
+    .A4base-pic2 {
+      transform: translate(48%, -321%);
+      width: 621px;
+      height: 140px;
+    }
+    .A4base-time {
+      transform: translate(207%, 115%);
+      width: 322px;
+      height: 206px;
+    }
+    .A4base-button {
+      transform: translate(354%, 79%);
+      width: 100px;
+      height: 200px;
+      cursor: pointer;
+    }
+  }
+}

Scene/src/pages/A4base/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import styles from './index.module.scss'
+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={{ display: show ? 'block' : 'none' }}>
+      <div
+        className='A4base-button'
+        onClick={() => {
+          setShow(false)
+          history.push('/home?m=SG-PHYgMHYqGfq-17')
+          window.location.reload()
+        }}
+      >
+        <img src={require('./image/button.png')} alt='' />
+      </div>
+    </div>
+  )
+}
+
+const MemoA4base = React.memo(A4base)
+
+export default MemoA4base

Scene/src/pages/A5Mobile/index.module.scss

@@ -0,0 +1,43 @@
+.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') no-repeat center center;
+  background-size: 102% 100%;
+  > div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    img {
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  :global {
+    .title {
+      top: 90px;
+      transform: translateX(-50%);
+      width: 85%;
+    }
+    .logo {
+      top: 20px;
+      transform: translateX(-50%);
+      width: 85%;
+    }
+    .pic1 {
+      transform: translate(-50%, -20%);
+      width: 85%;
+    }
+    .button {
+      cursor: pointer;
+      transform: translate(-88%, 77px);
+      width: 43px;
+    }
+  }
+}

Scene/src/pages/A5Mobile/index.tsx

@@ -0,0 +1,24 @@
+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='button'
+        onClick={() => {
+          setShow(false)
+          history.push('/home?m=SG-PHYgMHYqGfq-17')
+          window.location.reload()
+        }}
+      >
+        <img src={require('./image/button.png')} alt='' />
+      </div>
+    </div>
+  )
+}
+
+const MemoA5Mobile = React.memo(A5Mobile)
+
+export default MemoA5Mobile