Startseite Erkunden Hilfe
Registrieren Anmelden
shaogen1995
/
HQ_yueYue
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

增加交通指南

shaogen1995 vor 6 Monaten
Ursprung
61b24a32ba
Commit
916302c292
5 geänderte Dateien mit 85 neuen und 3 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 17 3
      展示端/public/home.html
  2. BIN
      展示端/public/home/map.jpg
  3. 2 0
      展示端/src/components/RouterOrder.tsx
  4. 33 0
      展示端/src/pages/C1map/index.module.scss
  5. 33 0
      展示端/src/pages/C1map/index.tsx

+ 17 - 3
展示端/public/home.html
Datei anzeigen 

@@ -28,13 +28,13 @@
 
       height: auto;
 
     }
 
     .tit {
 
-      padding: 30px 35px;
 
+      padding: 5px 35px;
 
       font-size: 24px;
 
     }
 
     .txt {
 
       width: calc(100% - 70px);
 
       margin: 0 auto 15px;
 
-      padding: 30px 0;
 
+      padding: 12px 0;
 
       font-size: 24px;
 
       font-weight: 700;
 
       color: #7dbe2b;
 
@@ -44,13 +44,18 @@
 
     }
 
     .txt p {
 
       text-align: center;
 
-      margin-bottom: 5px;
 
     }
 
     .txt2 {
 
       color: #0d79d9;
 
       border-color: #0d79d9;
 
       background: rgba(13, 121, 217, 0.1);
 
     }
 
+    .txt3 {
 
+      color: #f18101;
 
+      background: rgba(241, 129, 1, 0.1);
 
+      border-radius: 5px 5px 5px 5px;
 
+      border: 2px solid #f18101;
 
+    }
 
   </style>
 
 
   <body>
 
@@ -67,6 +72,9 @@
 
         <p>琴澳儿童健康教育</p>
 
         <p>课堂预约</p>
 
       </div>
 
+      <div class="txt txt3" id="url3">
 
+        <p>交通指南</p>
 
+      </div>
 
       <br />
 
       <br />
 
     </div>
 
@@ -82,5 +90,11 @@
 
     url2Dom.onclick = () => {
 
       window.location.href = '/web/#/'
 
     }
 
+
 
+    const url3Dom = document.querySelector('#url3')
 
+
 
+    url3Dom.onclick = () => {
 
+      window.location.href = '/web/#/map'
 
+    }
 
   </script>
 
 </html>

BIN
展示端/public/home/map.jpg
Datei anzeigen


+ 2 - 0
展示端/src/components/RouterOrder.tsx
Datei anzeigen 

@@ -8,6 +8,7 @@ import AuthRoute from './AuthRoute'
 
 const A1home = React.lazy(() => import('@/pages/A1home'))
 
 const B1exhibit = React.lazy(() => import('@/pages/B1exhibit'))
 
 const Login = React.lazy(() => import('@/pages/Z1login'))
 
+const C1map = React.lazy(() => import('@/pages/C1map'))
 
 
 // 2个不同的首页路由设置
 
 let homeFlag: '课堂' | '展馆' = '课堂'
 
@@ -113,6 +114,7 @@ function RouterOrder() {
 
           <Route path='/' component={homeFlag === '课堂' ? A1home : B1exhibit} exact={true} />
 
           <Route path='/exhi' component={B1exhibit} exact={true} />
 
           <Route path='/login/:key' component={Login} exact={true} />
 
+          <Route path='/map' component={C1map} exact={true} />
 
           {routerArr.map(v => (
 
             <AuthRoute key={v.id} path={v.path} exact={v.exact} component={v.Com} />
 
           ))}

+ 33 - 0
展示端/src/pages/C1map/index.module.scss
Datei anzeigen 

@@ -0,0 +1,33 @@
 
+.C1map {
 
+  position: relative;
 
+  background-image: url('../../assets/img/notice/bg03.jpg');
 
+  background-size: cover;
 
+  :global {
 
+    .C1bgBack {
 
+      position: absolute;
 
+      pointer-events: auto;
 
+      top: 30px;
 
+      left: 34px;
 
+    }
 
+    .C1tit {
 
+      margin-top: 20px;
 
+    }
 
+    .C1imgBox {
 
+      width: 100%;
 
+      height: auto;
 
+      position: absolute;
 
+      top: 45%;
 
+      left: 0;
 
+      transform: translateY(-50%);
 
+      & > p {
 
+        font-size: 16px;
 
+        text-align: center;
 
+        margin-bottom: 15px;
 
+        color: var(--themeColor);
 
+      }
 
+      & > img {
 
+        width: 100%;
 
+      }
 
+    }
 
+  }
 
+}

+ 33 - 0
展示端/src/pages/C1map/index.tsx
Datei anzeigen 

@@ -0,0 +1,33 @@
 
+import React, { useCallback } from 'react'
 
+import styles from './index.module.scss'
 
+
 
+import backImg from '@/assets/img/back.png'
 
+import { ImageViewer } from 'antd-mobile'
 
+
 
+function C1map() {
 
+  const toHomeHtml = useCallback(() => {
 
+    window.location.href = '/web/home.html'
 
+  }, [])
 
+  return (
 
+    <div className={styles.C1map}>
 
+      <img className='C1bgBack' src={backImg} alt='' onClick={toHomeHtml} />
 
+
 
+      <div className='C1imgBox'>
 
+        <p>点击图片可放大缩小查看</p>
 
+        <p>长按图片可保存</p>
 
+        <img
 
+          className='C1img'
 
+          src={`${process.env.PUBLIC_URL}/home/map.jpg`}
 
+          alt=''
 
+          onClick={() => {
 
+            ImageViewer.Multi.show({ images: [`${process.env.PUBLIC_URL}/home/map.jpg`] })
 
+          }}
 
+        />
 
+      </div>
 
+    </div>
 
+  )
 
+}
 
+
 
+const MemoC1map = React.memo(C1map)
 
+
 
+export default MemoC1map