diff --git a/.umirc.ts b/.umirc.ts index a248593..80fcb44 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -105,6 +105,11 @@ export default defineConfig({ { component: '@/pages/HttpStatus/404' }, ], }, + { + path: '/simulation', + component: '@/pages/Simulation', + exact: true, + }, { component: '@/pages/HttpStatus/404' }, ], }, diff --git a/src/pages/Simulation/index.less b/src/pages/Simulation/index.less new file mode 100644 index 0000000..cbd0f11 --- /dev/null +++ b/src/pages/Simulation/index.less @@ -0,0 +1,38 @@ +.page { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .iframe { + width: 100%; + flex: 1; + } + + .wrap { + height: 300px; + position: relative; + width: 100%; + + .bar { + height: 2px; + width: 100%; + background: #000; + cursor: ns-resize; + position: absolute; + top: -1px; + left: 0; + z-index: 10; + display: flex; + align-items: center; + justify-content: center; + + i { + color: #000000; + font-size: 12px; + margin-top: 4px; + } + } + } +} diff --git a/src/pages/Simulation/index.tsx b/src/pages/Simulation/index.tsx new file mode 100644 index 0000000..55531ef --- /dev/null +++ b/src/pages/Simulation/index.tsx @@ -0,0 +1,87 @@ +import styles from './index.less'; +import { message, Input, Button, Row, Modal, Form, Tabs } from 'antd'; +import Fetch from '@/utils/fetch'; +import { useEffect, useState, FC, Fragment, useRef } from 'react'; +import { cloneDeep } from 'lodash'; + +const Page = () => { + const [data, setData] = useState([]); + const resizeBar = useRef(null); + const resizeBox = useRef(null); + + useEffect(() => { + window.addEventListener('message', getData, false); + return () => { + window.removeEventListener('message', getData, false); + }; + }, []); + + const getData = (e: any) => { + if (e.origin === 'https://edu-xnfz.educoder.net') { + const newData = e.data ? JSON.parse(e.data) : []; + setData(newData); + console.log('111', newData, '222'); + } + }; + + useEffect(() => { + if (resizeBar.current) { + let h = 0; + let dragging = false; + let startY = 0; + function onMouseDown(e: any) { + h = resizeBox.current.offsetHeight; + console.log(h, 2222); + dragging = true; + startY = e.pageY; + document.onselectstart = function () { + return false; + }; + } + function onMouseUp() { + dragging = false; + document.onselectstart = null; + } + function onMouseMove(e: any) { + if (dragging) { + let delta = startY - e.pageY; + let resizeH = h + delta; + if (resizeH < 200) { + resizeH = 200; + } + if (resizeH > window.innerHeight - 130) { + resizeH = window.innerHeight - 130; + } + resizeBox.current.style.height = resizeH + 'px'; + } + } + const dom: any = resizeBar.current; + dom.addEventListener('mousedown', onMouseDown); + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mouseup', onMouseUp); + return () => { + const dom: any = resizeBar.current; + dom.removeEventListener('mousedown', onMouseDown); + document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('mouseup', onMouseUp); + }; + } + }, [resizeBar]); + + return ( +
+ +
+
+ +
+
+
+
+ ); +}; +export default Page; diff --git a/src/styles/iconfont/demo_index.html b/src/styles/iconfont/demo_index.html index ac4fe49..9791687 100644 --- a/src/styles/iconfont/demo_index.html +++ b/src/styles/iconfont/demo_index.html @@ -54,6 +54,12 @@
    +
  • + +
    光标
    +
    &#xe7c4;
    +
    • +
  • 下载
    @@ -360,12 +366,12 @@ 
    @font-face {
   font-family: 'iconfont';
-  src: url('iconfont.eot?t=1660727403452'); /* IE9 */
-  src: url('iconfont.eot?t=1660727403452#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('iconfont.woff2?t=1660727403452') format('woff2'),
-       url('iconfont.woff?t=1660727403452') format('woff'),
-       url('iconfont.ttf?t=1660727403452') format('truetype'),
-       url('iconfont.svg?t=1660727403452#iconfont') format('svg');
+  src: url('iconfont.eot?t=1660800866982'); /* IE9 */
+  src: url('iconfont.eot?t=1660800866982#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('iconfont.woff2?t=1660800866982') format('woff2'),
+       url('iconfont.woff?t=1660800866982') format('woff'),
+       url('iconfont.ttf?t=1660800866982') format('truetype'),
+       url('iconfont.svg?t=1660800866982#iconfont') format('svg');
 }

    第二步：定义使用 iconfont 的样式

    @@ -391,6 +397,15 @@
      +
    • + +
      + 光标 +
      +
      .icon-guangbiao +
      +
      • +
    • @@ -850,6 +865,14 @@
        +
      • + +
        光标
        +
        #icon-guangbiao
        +
        • +