|
@@ -6,6 +6,8 @@ import { baseURL, isPc } from '@/utils/http'
|
|
import classNames from 'classnames'
|
|
import classNames from 'classnames'
|
|
import { ImageViewer } from 'antd-mobile'
|
|
import { ImageViewer } from 'antd-mobile'
|
|
import { Image } from 'antd'
|
|
import { Image } from 'antd'
|
|
|
|
+import { useSelector } from 'react-redux'
|
|
|
|
+import { RootState } from '@/store'
|
|
|
|
|
|
type Props = {
|
|
type Props = {
|
|
closeFu: () => void
|
|
closeFu: () => void
|
|
@@ -25,6 +27,26 @@ function HotInfo({ closeFu, info }: Props) {
|
|
|
|
|
|
const [imgLook, setImgLook] = useState('')
|
|
const [imgLook, setImgLook] = useState('')
|
|
|
|
|
|
|
|
+ // 模型的缩放问题
|
|
|
|
+ const [modelSize, setModelSize] = useState({ ww: 0, hh: 0, wwB: 0, hhB: 0 })
|
|
|
|
+
|
|
|
|
+ const rootStyle = useSelector((state: RootState) => state.A0Layout.style)
|
|
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ if (info.type === 'model') {
|
|
|
|
+ // 模型重定义尺寸
|
|
|
|
+ const dom = document.querySelector('.S3modelBox')
|
|
|
|
+ if (dom) {
|
|
|
|
+ setModelSize({
|
|
|
|
+ ww: Number((dom.clientWidth * rootStyle.sizeW).toFixed(2)),
|
|
|
|
+ hh: Number((dom.clientHeight * rootStyle.sizeH).toFixed(2)),
|
|
|
|
+ wwB: dom.clientWidth,
|
|
|
|
+ hhB: dom.clientHeight
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }, [info.type, rootStyle.sizeH, rootStyle.sizeW])
|
|
|
|
+
|
|
return (
|
|
return (
|
|
<div id='HotOpCss' className={styles.HotInfo}>
|
|
<div id='HotOpCss' className={styles.HotInfo}>
|
|
{/* 移动端查看图片 */}
|
|
{/* 移动端查看图片 */}
|
|
@@ -65,11 +87,27 @@ function HotInfo({ closeFu, info }: Props) {
|
|
x5-video-player-type='h5'
|
|
x5-video-player-type='h5'
|
|
></video>
|
|
></video>
|
|
) : (
|
|
) : (
|
|
- <iframe
|
|
|
|
- title={info.name}
|
|
|
|
- src={`${baseURL}modelLoding/model.html?u=${info.inSrc}`}
|
|
|
|
- frameBorder='0'
|
|
|
|
- ></iframe>
|
|
|
|
|
|
+ <div
|
|
|
|
+ className='S3modelBox'
|
|
|
|
+ style={
|
|
|
|
+ isPc && Object.keys(rootStyle).length && modelSize.ww
|
|
|
|
+ ? {
|
|
|
|
+ position: 'relative',
|
|
|
|
+ width: modelSize.ww + 'px',
|
|
|
|
+ height: modelSize.hh + 'px',
|
|
|
|
+ transform: `translate(${-(modelSize.ww - modelSize.wwB) / 2}px, ${
|
|
|
|
+ -(modelSize.hh - modelSize.hhB) / 2
|
|
|
|
+ }px) scale(${1 / rootStyle.sizeW}, ${1 / rootStyle.sizeH})`
|
|
|
|
+ }
|
|
|
|
+ : { width: '100%', height: '100%' }
|
|
|
|
+ }
|
|
|
|
+ >
|
|
|
|
+ <iframe
|
|
|
|
+ title={info.name}
|
|
|
|
+ src={`${baseURL}modelLoding/model.html?u=${info.inSrc}`}
|
|
|
|
+ frameBorder='0'
|
|
|
|
+ ></iframe>
|
|
|
|
+ </div>
|
|
)}
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
|