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

up

shaogen1995 vor 2 Monaten
Ursprung
64da3fee80
Commit
fced67277a
5 geänderte Dateien mit 58 neuen und 46 gelöschten Zeilen
Gesamtansicht Diff-Statistik anzeigen
  1. 2 24
      展示端/public/index.html
  2. 26 10
      展示端/src/pages/C1map/index.module.scss
  3. 28 11
      展示端/src/pages/C1map/index.tsx
  4. 1 0
      展示端/src/types/declaration.d.ts
  5. 1 1
      展示端首页入口/src/utils/http.ts

+ 2 - 24
展示端/public/index.html
Datei anzeigen 

@@ -18,37 +18,15 @@
 
       // const weiXinLoginBackUrlTemp = 'https://sit-hqbooking.4dage.com'
 
       // const weiXinLoginBackUrlTemp = 'https://sit-hqbooking.4dage.com'
 
       // 甲方域名
 
       // 甲方域名
 
       const weiXinLoginBackUrlTemp = 'https://healthy.hengqin.gov.cn'
 
       const weiXinLoginBackUrlTemp = 'https://healthy.hengqin.gov.cn'
 
-    </script>
 
-
 
-    <!--
 
-      manifest.json provides metadata used when your web app is installed on a
 
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 
-    -->
 
 
 
-    <!--
 
-      Notice the use of %PUBLIC_URL% in the tags above.
 
-      It will be replaced with the URL of the `public` folder during the build.
 
-      Only files inside the `public` folder can be referenced from the HTML.
 
+      const mapImgArr = ['map.jpg']
 
+    </script>
 
 
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
 
-      work correctly both with client-side routing and a non-root public URL.
 
-      Learn how to configure a non-root public URL by running `npm run build`.
 
-    -->
 
     <title>琴澳儿童健康生活科普馆</title>
 
     <title>琴澳儿童健康生活科普馆</title>
 
   </head>
 
   </head>
 
 
 
   <body>
 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id="root"></div>
 
     <div id="root"></div>
 
-    <!--
 
-      This HTML file is a template.
 
-      If you open it directly in the browser, you will see an empty page.
 
-
 
-      You can add webfonts, meta tags, or analytics to this file.
 
-      The build step will place the bundled scripts into the <body> tag.
 
-
 
-      To begin the development, run `npm start` or `yarn start`.
 
-      To create a production bundle, use `npm run build` or `yarn build`.
 
-    -->
 
   </body>
 
   </body>
 
 </html>
 
 </html>

+ 26 - 10
展示端/src/pages/C1map/index.module.scss
Datei anzeigen 

@@ -10,23 +10,39 @@
 
       left: 34px;
 
       left: 34px;
 
     }
 
     }
 
     .C1tit {
 
     .C1tit {
 
-      margin-top: 20px;
 
-    }
 
-    .C1imgBox {
 
+      position: absolute;
 
+      top: 30px;
 
+      left: 0;
 
       width: 100%;
 
       width: 100%;
 
-      height: auto;
 
+      pointer-events: none;
 
+      font-size: 16px;
 
+      text-align: center;
 
+      margin-bottom: 15px;
 
+      color: var(--themeColor);
 
+      z-index: 10;
 
+    }
 
+
 
+    .C1img {
 
       position: absolute;
 
       position: absolute;
 
-      top: 45%;
 
+      top: 50%;
 
       left: 0;
 
       left: 0;
 
+      width: 100%;
 
       transform: translateY(-50%);
 
       transform: translateY(-50%);
 
-      & > p {
 
-        font-size: 16px;
 
-        text-align: center;
 
-        margin-bottom: 15px;
 
+      .adm-image-tip {
 
+        min-height: 280px;
 
+      }
 
+      .imgLoding1 {
 
+        width: 100%;
 
+        min-height: 280px;
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
         color: var(--themeColor);
 
         color: var(--themeColor);
 
       }
 
       }
 
-      & > img {
 
+      img {
 
         width: 100%;
 
         width: 100%;
 
+        height: 280px;
 
+        object-fit: contain !important;
 
       }
 
       }
 
     }
 
     }
 
   }
 
   }

+ 28 - 11
展示端/src/pages/C1map/index.tsx
Datei anzeigen 

@@ -1,28 +1,45 @@
 
 import React, { useCallback } from 'react'
 
 import React, { useCallback } from 'react'
 
 import styles from './index.module.scss'
 
 import styles from './index.module.scss'
 
-
 
+import { Image } from 'antd-mobile'
 
 import backImg from '@/assets/img/back.png'
 
 import backImg from '@/assets/img/back.png'
 
-import { ImageViewer } from 'antd-mobile'
 
+import { ImageViewer, Swiper } from 'antd-mobile'
 
 
 
 function C1map() {
 
 function C1map() {
 
   const toHomeHtml = useCallback(() => {
 
   const toHomeHtml = useCallback(() => {
 
     window.location.href = '/web/home.html'
 
     window.location.href = '/web/home.html'
 
   }, [])
 
   }, [])
 
+
 
+  const lookImg = useCallback((index: number) => {
 
+    ImageViewer.Multi.show({
 
+      images: mapImgArr.map(v => `${process.env.PUBLIC_URL}/home/${v}`),
 
+      defaultIndex: index
 
+    })
 
+  }, [])
 
+
 
   return (
 
   return (
 
     <div className={styles.C1map}>
 
     <div className={styles.C1map}>
 
       <img className='C1bgBack' src={backImg} alt='' onClick={toHomeHtml} />
 
       <img className='C1bgBack' src={backImg} alt='' onClick={toHomeHtml} />
 
 
 
-      <div className='C1imgBox'>
 
+      <div className='C1tit'>
 
         <p>点击图片可放大缩小查看</p>
 
         <p>点击图片可放大缩小查看</p>
 
         <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 className='C1img'>
 
+        <Swiper>
 
+          {mapImgArr.map((item, index) => (
 
+            <Swiper.Item key={item}>
 
+              <div>
 
+                <Image
 
+                  onClick={() => lookImg(index)}
 
+                  lazy
 
+                  src={`${process.env.PUBLIC_URL}/home/${item}`}
 
+                  placeholder={<div className='imgLoding1'>加载中...</div>}
 
+                />
 
+              </div>
 
+            </Swiper.Item>
 
+          ))}
 
+        </Swiper>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
   )
 
   )

+ 1 - 0
展示端/src/types/declaration.d.ts
Datei anzeigen 

@@ -8,3 +8,4 @@ declare module 'js-export-excel'
 
 declare module 'braft-utils'
 
 declare module 'braft-utils'
 
 declare module 'weixin-js-sdk'
 
 declare module 'weixin-js-sdk'
 
 declare const weiXinLoginBackUrlTemp: string
 
 declare const weiXinLoginBackUrlTemp: string
 
+declare const mapImgArr: string[]

+ 1 - 1
展示端首页入口/src/utils/http.ts
Datei anzeigen 

@@ -27,7 +27,7 @@ declare module 'axios' {
 
 // 创建 axios 实例
 
 // 创建 axios 实例
 
 const http = axios.create({
 
 const http = axios.create({
 
   baseURL: `${baseURL}${baseFlag ? '/api/' : ''}`,
 
   baseURL: `${baseURL}${baseFlag ? '/api/' : ''}`,
 
-  timeout: 10000
 
+  timeout: 30000
 
 })
 
 })
 
 
 
 let axajInd = 0
 
 let axajInd = 0