瀏覽代碼

更多模块的图片查看

shaogen1995 11 月之前
父節點
當前提交
976482f9e0

+ 2 - 2
Code/src/App.tsx

@@ -7,7 +7,7 @@ import SpinLoding from './components/SpinLoding'
 
 import NotFound from '@/components/NotFound'
 import store from './store'
-import { baseURL } from './utils/http'
+import { baseURL, myData } from './utils/http'
 // import { isLoc, myData } from './utils/http'
 const A1home = React.lazy(() => import('./pages/A1home'))
 const A1_1base = React.lazy(() => import('./pages/A1_1base'))
@@ -130,7 +130,7 @@ export default function App() {
     window.addEventListener('resize', pageFullChangeFu, false)
 
     // 全局点击都播放背景音乐
-    rootRef.current.addEventListener('click', audioPlayFu)
+    if (myData.isLdong) rootRef.current.addEventListener('click', audioPlayFu)
   }, [audioPlayFu, pageFullChangeFu])
 
   return (

+ 7 - 0
Code/src/assets/styles/base.css

@@ -17,6 +17,7 @@ html {
   user-select: none;
 }
 body {
+  position: relative;
   font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   font-size: var(--fontNum);
   height: 100%;
@@ -190,3 +191,9 @@ textarea {
   object-fit: fill !important;
   pointer-events: none;
 }
+@media screen and (orientation: portrait) {
+  /* 竖屏 */
+  .adm-image-viewer-image-wrapper img {
+    transform: rotate(90deg) !important;
+  }
+}

+ 10 - 0
Code/src/assets/styles/base.less

@@ -20,6 +20,7 @@ html {
 }
 
 body {
+  position: relative;
   font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
     'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   font-size: var(--fontNum);
@@ -231,3 +232,12 @@ textarea {
   object-fit: fill !important;
   pointer-events: none;
 }
+
+// antd mo 查看图片
+
+@media screen and (orientation: portrait) {
+  /* 竖屏 */
+  .adm-image-viewer-image-wrapper img {
+    transform: rotate(90deg) !important;
+  }
+}

+ 9 - 3
Code/src/pages/B1more/S3goods/HotInfo/index.module.scss

@@ -13,12 +13,18 @@
     .S3Ileft {
       width: calc(50% - 20px);
       margin-right: 40px;
-      img {
+      .S3imgBox {
         width: 100%;
         height: 100%;
-        object-fit: contain !important;
-        pointer-events: none;
+        cursor: zoom-in;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain !important;
+          pointer-events: none;
+        }
       }
+
       video {
         object-fit: cover;
         width: 100%;

+ 30 - 3
Code/src/pages/B1more/S3goods/HotInfo/index.tsx

@@ -1,9 +1,11 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import BtnRight from '@/components/BtnRight'
 import { GoodsType } from '@/types'
-import { baseURL } from '@/utils/http'
+import { baseURL, isPc } from '@/utils/http'
 import classNames from 'classnames'
+import { ImageViewer } from 'antd-mobile'
+import { Image } from 'antd'
 
 type Props = {
   closeFu: () => void
@@ -21,12 +23,37 @@ function HotInfo({ closeFu, info }: Props) {
     }
   }, [info.type])
 
+  const [imgLook, setImgLook] = useState('')
+
   return (
     <div id='HotOpCss' className={styles.HotInfo}>
+      {/* 移动端查看图片 */}
+      {isPc ? null : (
+        <ImageViewer
+          getContainer={document.querySelector('body')}
+          image={imgLook}
+          visible={!!imgLook}
+          onClose={() => setImgLook('')}
+        />
+      )}
+
+      {/* pc端查看图片 */}
+      {isPc && imgLook ? (
+        <Image
+          preview={{
+            visible: !!imgLook,
+            src: imgLook,
+            onVisibleChange: () => setImgLook('')
+          }}
+        />
+      ) : null}
+
       {/* 左边主体 */}
       <div className='S3Ileft'>
         {info.type === 'img' ? (
-          <img src={baseURL + info.inSrc} alt='' />
+          <div className='S3imgBox' onClick={() => setImgLook(baseURL + info.inSrc)}>
+            <img src={baseURL + info.inSrc} alt='' />
+          </div>
         ) : info.type === 'video' ? (
           <video
             ref={videoRef}