diff --git a/docs/main.js b/docs/main.js index 6616d47..09b9dbc 100644 --- a/docs/main.js +++ b/docs/main.js @@ -1 +1 @@ -(()=>{var e,t,n,a={19944:(e,t,n)=>{"use strict";var a=n(96540),s=n(5338),i=n(84976),r=n(74848);const o=a.createContext({locale:"en-us",setLocale:()=>{},headHeight:0,setHeadHeight:()=>{},menuWidth:0,setMenuWidth:()=>{},scrollTop:0,setScrollTop:()=>{},scrollContentRef:a.createRef(),setScrollContentRef:()=>{}});let c=a.createRef();const l=e=>{const t=localStorage.getItem("language")||"en-us",[n,s]=(0,a.useState)(t),[i,l]=(0,a.useState)(0),[d,m]=(0,a.useState)(0),[u,g]=(0,a.useState)(0),h=(0,a.useCallback)((function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;g(e),c.current&&c.current.scrollTop!==e&&(c.current.scrollTop=e)}),[]);return(0,r.jsx)(o.Provider,{value:{locale:n,headHeight:i,menuWidth:d,scrollTop:u,setLocale:e=>{const t=/^zh\b/.test(e.toLocaleLowerCase())?"zh-cn":"en-us";s(t),localStorage.setItem("language",t)},setHeadHeight:l,setMenuWidth:m,setScrollTop:h,scrollContentRef:c,setScrollContentRef:e=>{e&&(c=e)}},children:e.children})},d=()=>(0,a.useContext)(o);var m=n(47767),u=n(29970);const g={init:function(){u.Ay.initialize("G-N0W492NWD6")},sendEvent:function(e){u.Ay.event(e)},sendPageview:function(e){u.Ay.send({hitType:"pageview",page:e})}};var h=n(6442),p=n(26211),f=n(13545),x=n(60227),A=n(99552);const v=e=>{const t=(0,a.useRef)({screenLeft:window.screenLeft,screenTop:window.screenTop}),n=(0,a.useRef)(0),s=()=>{if(t.current){const{screenLeft:n,screenTop:a}=t.current;if(n!==window.screenLeft||a!==window.screenTop){const n={screenLeft:window.screenLeft,screenTop:window.screenTop};t.current=n,e(n)}}n.current=window.requestAnimationFrame(s)};return(0,a.useEffect)((()=>(n.current=window.requestAnimationFrame(s),()=>{n.current&&window.cancelAnimationFrame(n.current)})),[]),t.current},y=window.location.host.includes("localhost")||window.location.host.includes("127.0.0.1"),w=(e,t,n,s,i)=>{const r=(0,a.useRef)(Math.random().toString(36).substring(2)),[o,c]=(0,a.useState)(null),l=(0,a.useRef)(""),d=(0,a.useRef)(!1),m=(0,a.useRef)(0),u=(0,a.useRef)(0),g=()=>{let e=0,t=0;if(null!=i&&i.current){const{top:n,left:a,width:s,height:r}=i.current.getBoundingClientRect();e=a+window.screenLeft+s/2,t=n+window.screenTop+r/2}else e=window.innerWidth/2+window.screenLeft,t=window.innerHeight/2+window.screenTop;return{pageId:r.current,x:e,y:t}},h=(0,a.useCallback)((()=>{const e=g(),t=window.localStorage.getItem(n);if(t){const a=JSON.parse(t);if(a&&a.length>0){const a=JSON.parse(t).filter((e=>e.pageId!==r.current));a.unshift(e),window.localStorage.setItem(n,JSON.stringify(a))}else window.localStorage.setItem(n,JSON.stringify([e]))}else window.localStorage.setItem(n,JSON.stringify([e]))}),[]),p=(0,a.useCallback)((()=>{const e=window.localStorage.getItem(n);if(e){const t=JSON.parse(e);if(t&&t.length>0){const t=JSON.parse(e).filter((e=>e.pageId===l.current));window.localStorage.setItem(n,JSON.stringify(t))}}}),[]),f=(0,a.useCallback)((()=>{if(e&&d.current){const a=document.getElementById(e);if(a){var n;const e=g();null===(n=a.contentWindow)||void 0===n||n.postMessage(JSON.stringify(e),t)}}}),[]),x=(0,a.useCallback)((()=>{if(e&&d.current){const a=document.getElementById(e);if(a){var n;m.current=0;const e={pageId:r.current,keepAlive:!0,timestamp:(new Date).getTime()};null===(n=a.contentWindow)||void 0===n||n.postMessage(JSON.stringify(e),t),u.current||(u.current=window.setTimeout((()=>{u.current=0,window.localStorage.removeItem(s),l.current="",c(null)}),1500))}}}),[]),A=e=>{if(e){const t=JSON.parse(e);if(t&&t.length>0){let e=!1;for(let n=0,a=t.length;n{if(e){const t=JSON.parse(e);t?(l.current=t.pageId,c(t)):(l.current="",c(null))}else l.current="",c(null)},j=(0,a.useCallback)((e=>{e.origin===t&&(e.data?e.data.includes("keepAlive")?window.localStorage.setItem("keepAliveInfo",e.data):window.localStorage.setItem(s,e.data):(window.localStorage.setItem("keepAliveInfo",""),window.localStorage.setItem(s,"")))}),[]),b=(0,a.useCallback)((e=>{if(e.key===n)A(e.newValue);else if("keepAliveInfo"===e.key){if(e.newValue){const t=JSON.parse(e.newValue);if(l.current)t&&t.pageId===l.current&&u.current&&(window.clearTimeout(u.current),u.current=0);else{u.current&&(window.clearTimeout(u.current),u.current=0);const e={pageId:t.pageId,x:0,y:0};l.current=t.pageId,c(e)}}}else e.key===s&&w(e.newValue)}),[]),_=(0,a.useCallback)((()=>{if(window.self===window.top)if(y){f();const e=window.localStorage.getItem(s);w(e)}else{h();const e=window.localStorage.getItem(n);A(e)}}),[]);return v(_),(0,a.useEffect)((()=>{if(window.self===window.top)if(y){if(e&&null!=i&&i.current){const n=document.createElement("iframe");n.id=e,n.style.visibility="hidden",n.onload=()=>{d.current=!0,_(),window.addEventListener("storage",b),window.addEventListener("resize",_),m.current=window.setInterval((()=>{x()}),600)},n.src=t,i.current.appendChild(n)}}else _(),window.addEventListener("storage",b),window.addEventListener("resize",_),window.addEventListener("beforeunload",p);else y&&window.addEventListener("message",j,!1);return()=>{window.self===window.top?(window.removeEventListener("storage",b),window.removeEventListener("resize",_),m.current&&window.clearInterval(m.current),u.current&&window.clearTimeout(u.current),y||p()):y&&window.removeEventListener("message",j)}}),[]),{interactPageInfo:o,resendMessage:_}},j=["#F2BB00","#16BA79","#2454E6","#5470c6","#ea7ccc","#91cc75","#ee6666","#73c0de","#3ba272","#9a60b4"],b="bIframe",_="http://localhost:3003",D="InteractionEyes_container__nC6-d",M="InteractionEyes_eye__zDx2I",N="InteractionEyes_heart__G9lnP",C="InteractionEyes_eyeball__hK-+b",E=()=>{const{locale:e}=d(),t=(0,a.useRef)(null),{interactPageInfo:n,resendMessage:s}=w(b,_,"selfPageInfoList","bPageInfo",t);(0,a.useEffect)((()=>{s()}),[e]);const i=(0,a.useMemo)((()=>{if(t.current&&n){const{x:e,y:a}=n,{top:s,left:i,width:r,height:o}=t.current.getBoundingClientRect(),c=i+window.screenLeft+r/2,l=s+window.screenTop+o/2,d=Math.hypot(e-c,a-l);if(d>28){return{eyeballLeft:9*(e-c)/d,eyeballTop:9*(a-l)/d}}return{eyeballLeft:0,eyeballTop:0}}return null}),[n]);return(0,r.jsx)("div",{className:D,ref:t,children:i&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{className:M,children:0===i.eyeballLeft&&0===i.eyeballTop?(0,r.jsx)("div",{className:N}):(0,r.jsx)("div",{className:C,style:{transform:"translate(".concat(i.eyeballLeft,"px, ").concat(i.eyeballTop,"px)")}})}),(0,r.jsx)("div",{className:M,children:0===i.eyeballLeft&&0===i.eyeballTop?(0,r.jsx)("div",{className:N}):(0,r.jsx)("div",{className:C,style:{transform:"translate(".concat(i.eyeballLeft,"px, ").concat(i.eyeballTop,"px)")}})})]})})},B=n.p+"images/235f02ed.jpeg",k=e=>(0,r.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",...e,children:(0,r.jsxs)("g",{fill:"#11142D",fillRule:"nonzero",children:[(0,r.jsx)("path",{d:"M2.324 2.323h15.12v15.12H2.324V2.323ZM1.711.999a.71.71 0 0 0-.711.71v16.347c0 .393.318.71.71.71h16.348a.71.71 0 0 0 .71-.71V1.71a.71.71 0 0 0-.71-.71H1.71Z"}),(0,r.jsx)("path",{d:"M10.097 13.383V12.36h-4.63V9.863h4.18V8.84h-4.18V6.552H9.91V5.529H4.267v7.854h5.83Zm2.277 0V9.962c.044-.462.21-.825.473-1.09.242-.241.54-.351.87-.351.88 0 1.33.484 1.33 1.452v3.41h1.166v-3.51c0-1.561-.715-2.331-2.123-2.331a1.98 1.98 0 0 0-.957.22 2.183 2.183 0 0 0-.759.638v-.704h-1.166v5.687h1.166Z"})]})}),S=e=>(0,r.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 21 20",xmlns:"http://www.w3.org/2000/svg",...e,children:(0,r.jsxs)("g",{fill:"#11142D",fillRule:"nonzero",children:[(0,r.jsx)("path",{d:"M2.44 2.323h15.12v15.12H2.44V2.323ZM1.827.999a.71.71 0 0 0-.711.71v16.347c0 .393.318.71.71.71h16.347a.71.71 0 0 0 .711-.71V1.71a.71.71 0 0 0-.71-.71H1.826Z"}),(0,r.jsx)("path",{d:"M10.539 14.593v-3.685h2.87v.627h1.046V6.222h-3.916V4.319H9.46v1.903H5.556v5.313H6.6v-.627h2.86v3.685h1.078ZM9.46 9.885H6.6v-2.64h2.86v2.64Zm3.949 0h-2.871v-2.64h2.87v2.64Z"})]})}),I="Header_container__4tC+Z",T="Header_left__7u7-T",P="Header_title__T9B5R",F="Header_right__qQAPq",R="Header_btn__osEo4",G="Header_rewardModal__LMM8K",Q="Header_closeBtn__p4OnE",L=window.location.host.includes("localhost")||window.location.host.includes("127.0.0.1"),O=()=>{const e=(0,h.A)(),{locale:t,setLocale:n,setHeadHeight:s}=d(),i=(0,a.useRef)(null),[o,c]=(0,a.useState)(!1);return(0,a.useEffect)((()=>{if(i.current){const{height:e}=i.current.getBoundingClientRect();s(e)}}),[]),(0,r.jsxs)("div",{className:I,ref:i,children:[(0,r.jsxs)("div",{className:T,children:[(0,r.jsx)("div",{className:P,onClick:()=>{if(L){const t=document.getElementById(b);var e;if(t)null===(e=t.contentWindow)||void 0===e||e.postMessage("autoSavePassword",_);window.open(_,"_blank","top=200,left=100")}else window.open("https://hepengwei.cn","_blank","top=200,left=100")},children:e.formatMessage({id:"common.logoName"})}),(0,r.jsx)(E,{})]}),(0,r.jsxs)("div",{className:F,children:[(0,r.jsx)(p.A,{placement:"bottomRight",title:e.formatMessage({id:"common.reward"}),children:(0,r.jsx)("div",{className:R,onClick:()=>{c(!0)},children:(0,r.jsx)(x.A,{})})}),(0,r.jsx)(p.A,{placement:"bottomRight",title:e.formatMessage({id:"common.LanguageSwitch"}),children:(0,r.jsx)("div",{className:R,onClick:()=>{n("zh-cn"===t?"en-us":"zh-cn")},children:"zh-cn"===t?(0,r.jsx)(S,{}):(0,r.jsx)(k,{})})})]}),(0,r.jsxs)(f.A,{wrapClassName:G,title:e.formatMessage({id:"common.reward"}),open:o,footer:null,maskClosable:!1,width:320,children:[(0,r.jsx)("div",{className:Q,onClick:()=>{c(!1)},children:(0,r.jsx)(A.A,{})}),(0,r.jsx)("img",{src:B,alt:""}),(0,r.jsx)("p",{children:e.formatMessage({id:"common.reward.tip"})})]})]})};var z=n(40961),H=n(142),U=n(22630),V=n(75132),W=n(84890),Y=n(32977),J=n(87942),q=n(21883),Z=n(76157),K=n(31201),X=n(79045),$=n(68777),ee=n(75816);const te="Menus_container__dz5ma",ne="Menus_topBox__EoJUd",ae="Menus_top__a7CPT",se="Menus_menuLabel__eOdiw",ie="Menus_bottom__dStLR";function re(e,t,n,a,s){return{key:t,icon:n,children:a,label:(0,r.jsx)("p",{className:se,children:e}),type:s}}const oe=()=>{const e=(0,h.A)(),t=(0,m.Zp)(),n=(0,m.zy)(),[s,i]=(0,a.useState)(!1),{setMenuWidth:o}=d(),c=(0,a.useRef)(null),l=[re(e.formatMessage({id:"menu.htmlVision"}),"html",(0,r.jsx)(H.A,{}),[re(e.formatMessage({id:"menu.htmlVision.visualDesign"}),"visualDesign"),re(e.formatMessage({id:"menu.htmlVision.interactiveDesign"}),"interactiveDesign"),re(e.formatMessage({id:"menu.htmlVision.backgroundPattern"}),"backgroundEffect"),re(e.formatMessage({id:"menu.htmlVision.complexLayout"}),"complexLayout"),re(e.formatMessage({id:"menu.htmlVision.applicationPageFrame"}),"appPageFrame"),re(e.formatMessage({id:"menu.htmlVision.utilitarianFunction"}),"utilitarianFunction")]),re(e.formatMessage({id:"menu.cssDynamicEffect"}),"css",(0,r.jsx)(U.A,{}),[re(e.formatMessage({id:"menu.cssDynamicEffect.dynamicEffectButton"}),"dynamicButtons"),re(e.formatMessage({id:"menu.cssDynamicEffect.richDynamicEffect"}),"richDynamicEffect"),re(e.formatMessage({id:"menu.cssDynamicEffect.generateRegularPolygon"}),"generateRegularPolygon"),re(e.formatMessage({id:"menu.cssDynamicEffect.generateShadow"}),"generateShadow")]),re(e.formatMessage({id:"menu.canvasDynamicEffect"}),"canvas",(0,r.jsx)(V.A,{}),[re(e.formatMessage({id:"menu.canvasDynamicEffect.sphereCollisionExample"}),"sphereCollisionExample"),re(e.formatMessage({id:"menu.canvasDynamicEffect.dynamicClock"}),"dynamicClock"),re(e.formatMessage({id:"menu.canvasDynamicEffect.searchlightEffect"}),"searchlight"),re(e.formatMessage({id:"menu.canvasDynamicEffect.sphereCollisionInteraction"}),"globuleInteraction"),re(e.formatMessage({id:"menu.canvasDynamicEffect.destroyThePlanetGame"}),"killPlanetGame"),re(e.formatMessage({id:"menu.canvasDynamicEffect.sphereFreeFallInteraction"}),"freeFallingBody"),re(e.formatMessage({id:"menu.canvasDynamicEffect.coolCountdownAnimation"}),"countDown"),re(e.formatMessage({id:"menu.canvasDynamicEffect.dynamicParticleBackground"}),"particlesBg"),re(e.formatMessage({id:"menu.canvasDynamicEffect.rippleEffect"}),"rippleFloatOnTheWater"),re(e.formatMessage({id:"menu.canvasDynamicEffect.flowerBloomingAnimation"}),"flowerBloom"),re(e.formatMessage({id:"menu.canvasDynamicEffect.codeBackgroundWall"}),"codeBgWall"),re(e.formatMessage({id:"menu.canvasDynamicEffect.wordDance"}),"wordDance"),re(e.formatMessage({id:"menu.canvasDynamicEffect.scratch"}),"scratch"),re(e.formatMessage({id:"menu.canvasDynamicEffect.matchLine"}),"matchLine")]),re(e.formatMessage({id:"menu.echartsInteraction"}),"echarts",(0,r.jsx)(W.A,{}),[re(e.formatMessage({id:"menu.echartsInteraction.barCharts"}),"bar"),re(e.formatMessage({id:"menu.echartsInteraction.pieCharts"}),"pie"),re(e.formatMessage({id:"menu.echartsInteraction.treeCharts"}),"tree")]),re(e.formatMessage({id:"menu.threeJs3D"}),"threejs",(0,r.jsx)(Y.A,{}),[re(e.formatMessage({id:"menu.threeJs3D.appPageFrame"}),"threejsAppPageFrame"),re(e.formatMessage({id:"menu.threeJs3D.carShow"}),"carShow"),re(e.formatMessage({id:"menu.threeJs3D.rubiksCube"}),"rubiksCube"),re(e.formatMessage({id:"menu.threeJs3D.throwDice"}),"throwDice"),re(e.formatMessage({id:"menu.threeJs3D.mapDisplay"}),"mapDisplay"),re(e.formatMessage({id:"menu.threeJs3D.earthDisplay"}),"earthDisplay")]),re(e.formatMessage({id:"menu.AIApplication"}),"AIApplication",(0,r.jsx)(J.A,{}),[re(e.formatMessage({id:"menu.AIApplication.humanPostureDetection"}),"humanPostureDetection"),re(e.formatMessage({id:"menu.AIApplication.notBlockPeopleBarrage"}),"notBlockPeopleBarrage")]),re(e.formatMessage({id:"menu.imageProcessingTool"}),"imageProcessingTool",(0,r.jsx)(q.A,{}))],u=(0,a.useCallback)((0,X.A)((()=>{const e=z.findDOMNode(c.current);e&&o(e.clientWidth)}),{wait:360}).run,[]),g=(0,a.useMemo)((()=>{const{pathname:e}=n,t=[];if(e){const n=e.split("/"),a=n[n.length-1];a&&t.push(a)}return t}),[n]),p=(0,a.useMemo)((()=>{const{pathname:e}=n;if(e){const t=e.split("/");if(t.length>=2&&t[1])return[t[1]]}return["html"]}),[n]);return(0,a.useEffect)((()=>{u()}),[s]),(0,a.useEffect)((()=>(window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)})),[]),(0,r.jsxs)("div",{className:te,ref:c,children:[(0,r.jsxs)("div",{className:ne,children:[(0,r.jsx)("div",{className:ae,children:(0,r.jsx)($.Ay,{type:"primary",onClick:()=>{i(!s)},style:{marginBottom:16},children:s?(0,r.jsx)(Z.A,{}):(0,r.jsx)(K.A,{})})}),(0,r.jsx)(ee.A,{defaultOpenKeys:p,selectedKeys:g,mode:"inline",theme:"dark",inlineCollapsed:s,items:l,onClick:e=>{const{keyPath:n}=e,a=n.reduce(((e,t)=>e="/".concat(t).concat(e)),"");t(a)}})]}),(0,r.jsx)("div",{className:ie,children:!s&&(0,r.jsx)("span",{children:e.formatMessage({id:"common.keepUpdating"})})})]})},ce="Home_container__RMLhs",le="Home_container_body__-OVNZ",de="Home_container_content__q7A-W",me=()=>{(function(){const e=(0,m.zy)();a.useEffect((()=>{g.init()}),[]),a.useEffect((()=>{const t=e.pathname+e.search;g.sendPageview(t)}),[e])})();const{setScrollTop:e,setScrollContentRef:t}=d(),n=(0,m.Ye)(nj),s=(0,m.zy)(),i=(0,m.Zp)(),o=(0,a.useRef)(null);return(0,a.useEffect)((()=>{const{pathname:e}=s;e&&"/"!==e||i("/html/visualDesign")}),[s]),(0,a.useEffect)((()=>{t(o)}),[]),(0,r.jsxs)("div",{className:ce,children:[(0,r.jsx)(O,{}),(0,r.jsxs)("div",{className:le,children:[(0,r.jsx)(oe,{}),(0,r.jsx)("div",{className:de,onScroll:()=>{var t;e(null===(t=o.current)||void 0===t?void 0:t.scrollTop)},ref:o,children:n})]})]})};var ue=n(46942),ge=n.n(ue);const he={container:"GridContent_container__NO4Vk","gt2000-10":"GridContent_gt2000-10__RE2uy",content:"GridContent_content__69gKN","gt2000-9":"GridContent_gt2000-9__VwNg6","gt2000-8":"GridContent_gt2000-8__aZHuR","gt2000-7":"GridContent_gt2000-7__4aOmt","gt2000-6":"GridContent_gt2000-6__MehF3","gt2000-5":"GridContent_gt2000-5__omS8h","gt2000-4":"GridContent_gt2000-4__0cmEO","gt2000-3":"GridContent_gt2000-3__80YFg","gt2000-2":"GridContent_gt2000-2__hUksd","gt2000-1":"GridContent_gt2000-1__JdP9G","eq1700_2000-10":"GridContent_eq1700_2000-10__v-j8J","eq1700_2000-9":"GridContent_eq1700_2000-9__bxTIf","eq1700_2000-8":"GridContent_eq1700_2000-8__1e7ek","eq1700_2000-7":"GridContent_eq1700_2000-7__1mKDg","eq1700_2000-6":"GridContent_eq1700_2000-6__8I1De","eq1700_2000-5":"GridContent_eq1700_2000-5__aZuE+","eq1700_2000-4":"GridContent_eq1700_2000-4__2XNj+","eq1700_2000-3":"GridContent_eq1700_2000-3__Xd2vl","eq1700_2000-2":"GridContent_eq1700_2000-2__eoPvO","eq1700_2000-1":"GridContent_eq1700_2000-1__RvrMQ","eq1400_1700-10":"GridContent_eq1400_1700-10__XQV+M","eq1400_1700-9":"GridContent_eq1400_1700-9__uLvev","eq1400_1700-8":"GridContent_eq1400_1700-8__Rw4q0","eq1400_1700-7":"GridContent_eq1400_1700-7__EoYy7","eq1400_1700-6":"GridContent_eq1400_1700-6__Avlp5","eq1400_1700-5":"GridContent_eq1400_1700-5__yFmoN","eq1400_1700-4":"GridContent_eq1400_1700-4__jEXj+","eq1400_1700-3":"GridContent_eq1400_1700-3__r3QBa","eq1400_1700-2":"GridContent_eq1400_1700-2__ayZbL","eq1400_1700-1":"GridContent_eq1400_1700-1__26hdp","eq1200_1400-10":"GridContent_eq1200_1400-10__OBpag","eq1200_1400-9":"GridContent_eq1200_1400-9__9dEMp","eq1200_1400-8":"GridContent_eq1200_1400-8__d5kk8","eq1200_1400-7":"GridContent_eq1200_1400-7__qwN-x","eq1200_1400-6":"GridContent_eq1200_1400-6__ol1NV","eq1200_1400-5":"GridContent_eq1200_1400-5__B5RI8","eq1200_1400-4":"GridContent_eq1200_1400-4__+SHwZ","eq1200_1400-3":"GridContent_eq1200_1400-3__pjJ9a","eq1200_1400-2":"GridContent_eq1200_1400-2__xdmba","eq1200_1400-1":"GridContent_eq1200_1400-1__6n2l7","eq500_1200-10":"GridContent_eq500_1200-10__EhvGm","eq500_1200-9":"GridContent_eq500_1200-9__Yvosl","eq500_1200-8":"GridContent_eq500_1200-8__Hs4PY","eq500_1200-7":"GridContent_eq500_1200-7__p1yUT","eq500_1200-6":"GridContent_eq500_1200-6__N0+SP","eq500_1200-5":"GridContent_eq500_1200-5__73c-5","eq500_1200-4":"GridContent_eq500_1200-4__SwI71","eq500_1200-3":"GridContent_eq500_1200-3__+b39n","eq500_1200-2":"GridContent_eq500_1200-2__RowGZ","eq500_1200-1":"GridContent_eq500_1200-1__dK0BP","lt500-10":"GridContent_lt500-10__KVc6r","lt500-9":"GridContent_lt500-9__EdDXq","lt500-8":"GridContent_lt500-8__wqwWv","lt500-7":"GridContent_lt500-7__GiMWq","lt500-6":"GridContent_lt500-6__sHgte","lt500-5":"GridContent_lt500-5__WBqou","lt500-4":"GridContent_lt500-4__ucReZ","lt500-3":"GridContent_lt500-3__Ax3Zt","lt500-2":"GridContent_lt500-2__+Pq9U","lt500-1":"GridContent_lt500-1__T7m7X"},pe=e=>{const{differentScreenCols:t,rowSpace:n=0,colSpace:s=0,className:i="",children:o}=e,c=t.map(((e,t)=>e?parseInt(e.toString()).toString():t<=4?"1":""));return(0,r.jsx)("div",{className:ge()({[he.container]:!0,[he["gt2000-".concat(c[0])]]:!0,[he["eq1700_2000-".concat(c[1])]]:!0,[he["eq1400_1700-".concat(c[2])]]:!0,[he["eq1200_1400-".concat(c[3])]]:!0,[he["eq500_1200-".concat(c[4])]]:!0,[he["lt500-".concat(c[5])]]:!!c[5]}),children:(0,r.jsx)("div",{className:"".concat(he.content," ").concat(i),style:{width:"calc(100% + ".concat(s,"px)"),marginLeft:"".concat(-s/2,"px"),marginRight:"".concat(-s/2,"px")},children:"[object Array]"===Object.prototype.toString.call(o)?o.map((e=>a.cloneElement(e,{rowSpace:n,colSpace:s}))):o||null})})};pe.GridBox=e=>{const{key:t,className:n,rowSpace:a=0,colSpace:s=0,children:i}=e;return(0,r.jsx)("div",{style:{boxSizing:"border-box",width:"100%",padding:"".concat(a/2,"px ").concat(s/2,"px")},className:n,children:i},t)};const fe=pe,xe="GlassMimicry1_container__3KhAO",Ae="GlassMimicry1_card__WwxgS",ve="GlassMimicry1_circle__DoolB",ye="GlassMimicry1_rect__Or-6t",we=()=>(0,r.jsxs)("div",{className:xe,children:[(0,r.jsxs)("div",{className:Ae,children:[(0,r.jsx)("h1",{children:"TiKi Platinum"}),(0,r.jsx)("h2",{children:"6228 8076 2232 8768"}),(0,r.jsx)("h3",{children:"van conf banck"}),(0,r.jsx)("h4",{children:"03 / 29"})]}),(0,r.jsx)("div",{className:ve}),(0,r.jsx)("div",{className:ye})]}),je="GlassMimicry2_container__S445M",be="GlassMimicry2_card__3l4Ng",_e="GlassMimicry2_circle__VaL67",De="GlassMimicry2_rect__qdTWE",Me=()=>(0,r.jsxs)("div",{className:je,children:[(0,r.jsxs)("div",{className:be,children:[(0,r.jsx)("h1",{children:"TiKi Platinum"}),(0,r.jsx)("h2",{children:"6228 8076 2232 8768"}),(0,r.jsx)("h3",{children:"van conf banck"}),(0,r.jsx)("h4",{children:"09 / 24"})]}),(0,r.jsx)("div",{className:_e}),(0,r.jsx)("div",{className:De})]}),Ne="MixBlendMode_container__Fh1Tw",Ce="MixBlendMode_content__0uwYQ",Ee=()=>(0,r.jsx)("div",{className:Ne,children:(0,r.jsx)("div",{className:Ce})}),Be=(e,t)=>{const{finalText:n="",textList:s=[],switchingInterval:i=60,duration:o=1500,className:c=""}=e,l=(0,a.useRef)(s.length>0?0:-1),[d,m]=(0,a.useState)(-1===l.current?n:s[l.current]||""),u=(0,a.useRef)(0),g=(0,a.useRef)(0),h=(0,a.useRef)(0),p=(0,a.useCallback)((()=>{const e=(new Date).getTime();if(e-g.current>=o)m(n),l.current=-1,h.current=e;else if(e-h.current>=i){let t=-1===l.current?0:l.current+1;t>=s.length&&(t=0),m(s[t]),l.current=t,h.current=e}u.current=requestAnimationFrame(p)}),[o]),f=(0,a.useCallback)((()=>{const e=(new Date).getTime();g.current=e,h.current=e,u.current=requestAnimationFrame(p)}),[]),x=()=>{u.current&&cancelAnimationFrame(u.current),l.current=0,m(s[0]),f()};return(0,a.useImperativeHandle)(t,(()=>({restart:x}))),(0,a.useEffect)((()=>(f(),()=>{u.current&&cancelAnimationFrame(u.current)})),[]),(0,r.jsx)("span",{className:c,children:d&&d.split("").map(((e,t)=>(0,r.jsx)("span",{children:e},t)))})},ke=a.forwardRef(Be),Se="SwitchingText_container__9ICqS",Ie="SwitchingText_content__6PttP",Te="SwitchingText_btn__9UW9Y",Pe=()=>{const e=(0,a.useRef)(null);return(0,r.jsxs)("div",{className:Se,children:[(0,r.jsx)(ke,{className:Ie,finalText:"Hello World",textList:["Tikiw Plati","Wkslc Wbxsw","Xsodu Qwoev","Dewcz Gewoe","Rsero Bokrs","Ckoex Jwclb","Tikiw Plati","Wkslc Wbxsw","Xsodu Qwoeb","Dewcz Gewoe","Rsero Bokrs","Ckoex Jwclb","Haiiw Pavis","Hwlle Ykels","Helic Wexiw","Heiik Mkdie","Helju Qvold","Helim Xkvlc","Hellw Gewie","Hellv Rkels","Hello Bokis","Hello Ceoix","Hello Wwclb","Hello Wzrlm","Hello Woaic","Hello Woxlm","Hello Woriw","Hello Woriv","Hello Worlc","Hello Worle"],duration:1900,ref:e}),(0,r.jsx)($.Ay,{type:"primary",className:Te,onClick:()=>{var t;null===(t=e.current)||void 0===t||t.restart()},children:"Once Again"})]})};var Fe=n(72902);const Re="Typed1_container__2a+Le",Ge="Typed1_btn__5+jTK",Qe=()=>{const e=(0,a.useRef)(null),t=(0,a.useRef)(null);return(0,a.useEffect)((()=>{const n={strings:["Legends never die"],typeSpeed:60,showCursor:!1};return e.current&&(t.current=new Fe.A(e.current,n)),()=>{var e;null===(e=t.current)||void 0===e||e.destroy()}}),[]),(0,r.jsxs)("div",{className:Re,children:[(0,r.jsx)("p",{ref:e}),(0,r.jsx)($.Ay,{type:"primary",className:Ge,onClick:()=>{var e,n;null===(e=t.current)||void 0===e||e.reset(),null===(n=t.current)||void 0===n||n.start()},children:"Once Again"})]})},Le="Typed2_container__XvJpL",Oe="Typed2_btn__lqx2D",ze=()=>{const e=(0,a.useRef)(null),t=(0,a.useRef)(null);return(0,a.useEffect)((()=>{const n={strings:["Legan","Legends naver","Legends never die"],typeSpeed:60,showCursor:!1,backSpeed:60,backDelay:0};return e.current&&(t.current=new Fe.A(e.current,n)),()=>{var e;null===(e=t.current)||void 0===e||e.destroy()}}),[]),(0,r.jsxs)("div",{className:Le,children:[(0,r.jsx)("p",{ref:e}),(0,r.jsx)($.Ay,{type:"primary",className:Oe,onClick:()=>{var e,n;null===(e=t.current)||void 0===e||e.reset(),null===(n=t.current)||void 0===n||n.start()},children:"Once Again"})]})},He=function(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:400;const a=document.createElement("span");a.style.visibility="hidden",a.style.padding="0",a.style.whiteSpace="nowrap",a.style.overflow="visible",a.style.fontSize=t>12?t+"px":"12px",a.style.fontWeight=n.toString(),a.innerText=e,document.body.appendChild(a);const s=a.offsetWidth;return document.body.removeChild(a),s},Ue=function(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:12,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:400,s=!(arguments.length>4&&void 0!==arguments[4])||arguments[4],i="",r="",o="";if(!e||t12?n+"px":"12px",l.style.fontWeight=a.toString(),document.body.appendChild(l);for(let e=0,n=c.length;et){i=s?r+"...":r;break}}return document.body.removeChild(l),i},Ve=e=>{const{text:t="",lineNum:n=1,buttonText:s,buttonTextSize:i=12,buttonTextWeight:o=400,onClickButton:c,style:l,onTextOverChange:d}=e;let m=12,u=400;l&&(l.fontSize&&(m=parseInt(l.fontSize)),l.textWeight&&(u=Number(l.textWeight)));const g=(0,a.useRef)(null);if(!t)return(0,r.jsx)("div",{ref:g});const[h,p]=(0,a.useState)(0),f=(0,a.useRef)(!1),x=(0,a.useMemo)((()=>{let e=t,a=!1;const r=Math.max(i,12);if(h){if(Ue(t,h*n,m,u).endsWith("...")&&(a=!0),a){const a=He("...",m,u);let i=0;s&&(i=He(s,r,o));e=Ue(t,h*n-a-i-2,m,u)}else e=t}return a!==f.current&&(f.current=a,d&&d(a)),{textStyle:{fontSize:"".concat(m,"px"),fontWeight:u,wordBreak:"break-all",position:"relative",padding:0,...l},finalText:e,isOver:a,buttonStyle:{fontSize:"".concat(r,"px"),fontWeight:o.toString(),color:"#0076FF",cursor:"pointer",padding:0,position:"absolute",right:0}}}),[h,n,t,s,i,l]),A=(0,a.useCallback)((()=>{if(g.current){const e=z.findDOMNode(g.current);p(e?e.offsetWidth:0)}}),[]);return(0,a.useEffect)((()=>{A()}),[]),(0,a.useEffect)((()=>(window.addEventListener("resize",A),()=>{window.removeEventListener("resize",A)})),[]),(0,r.jsxs)("div",{style:x.textStyle,ref:g,children:[x.finalText,s&&x.isOver&&(0,r.jsx)("span",{style:x.buttonStyle,onClick:e=>{c&&c(e)},children:s})]})},We="AutoEllipsisText_container__2dFtS",Ye=()=>{const e=(0,h.A)(),t=e.formatMessage({id:"page.htmlVision.visualDesign.displaysCustomRows"}),n=e.formatMessage({id:"page.htmlVision.visualDesign.displaysCustomRows2"}),[s,i]=(0,a.useState)(!1),o=e=>{i(e)};return(0,r.jsxs)("div",{className:We,children:[s?(0,r.jsx)(p.A,{placement:"top",title:t,children:(0,r.jsx)("div",{style:{width:"100%"},children:(0,r.jsx)(Ve,{text:t,style:{fontSize:"24px"},onTextOverChange:o})})}):(0,r.jsx)(Ve,{text:t,style:{fontSize:"24px"},onTextOverChange:o}),(0,r.jsx)(Ve,{text:n.repeat(4),style:{fontSize:"24px",marginTop:"40px"}}),(0,r.jsx)(Ve,{text:n.repeat(8),lineNum:2,style:{fontSize:"16px",marginTop:"40px"},buttonText:"More",buttonTextSize:16})]})},Je=n.p+"images/c5e4532e.jpg",qe="FilterCSS_container__HnHaW",Ze="FilterCSS_left__dim3U",Ke="FilterCSS_right__MsfmE",Xe=()=>{const e=(0,h.A)();return(0,r.jsxs)("div",{className:qe,children:[(0,r.jsxs)("div",{className:Ze,children:[(0,r.jsx)("span",{children:e.formatMessage({id:"page.htmlVision.visualDesign.brighten"})}),(0,r.jsx)("img",{src:Je,alt:""})]}),(0,r.jsxs)("div",{className:Ke,children:[(0,r.jsx)("span",{children:e.formatMessage({id:"page.htmlVision.visualDesign.grayed"})}),(0,r.jsx)("img",{src:Je,alt:""})]})]})},$e="BgFusion_container__VJAbX",et=()=>(0,r.jsx)("div",{className:$e}),tt={container:"MyLogo_container__KNKdW",box1:"MyLogo_box1__XgNc6",leftTopRect:"MyLogo_leftTopRect__rrMK9",circle:"MyLogo_circle__g+xkt",middleRect:"MyLogo_middleRect__c5wUq",bottomRect:"MyLogo_bottomRect__VJqty",box2:"MyLogo_box2__7wfXg",box3:"MyLogo_box3__d3P-I"},nt=new Array(3).fill(0),at=()=>(0,r.jsx)("div",{className:tt.container,children:nt.map(((e,t)=>(0,r.jsxs)("div",{className:tt["box".concat(t+1)],children:[(0,r.jsx)("div",{className:tt.leftTopRect}),(0,r.jsx)("div",{className:tt.circle}),(0,r.jsx)("div",{className:tt.middleRect}),(0,r.jsx)("div",{className:tt.bottomRect})]},t)))}),st={container:"ShearAngle_container__tRA3S",box1:"ShearAngle_box1__5M-bD",box2:"ShearAngle_box2__n9GvI",box3:"ShearAngle_box3__uaxeG"},it=new Array(3).fill(0),rt=()=>(0,r.jsx)("div",{className:st.container,children:it.map(((e,t)=>(0,r.jsx)("div",{className:st["box".concat(t+1)]},t)))}),ot="AnnulusLoading_container__r9c4O",ct="AnnulusLoading_content__3Beje",lt="AnnulusLoading_item7__AQC4n",dt="AnnulusLoading_item6__+tYBR",mt="AnnulusLoading_item5__PkkRq",ut="AnnulusLoading_item4__C2KqR",gt="AnnulusLoading_item3__sTLBN",ht="AnnulusLoading_item2__29w+l",pt="AnnulusLoading_item1__kaRKn",ft=()=>(0,r.jsx)("div",{className:ot,children:(0,r.jsxs)("div",{className:ct,children:[(0,r.jsx)("div",{className:pt}),(0,r.jsx)("div",{className:ht}),(0,r.jsx)("div",{className:gt}),(0,r.jsx)("div",{className:ut}),(0,r.jsx)("div",{className:mt}),(0,r.jsx)("div",{className:dt}),(0,r.jsx)("div",{className:lt})]})}),xt=n.p+"images/7380e6f7.jpg",At=n.p+"images/ba36f098.jpg",vt=n.p+"images/e7c8df7d.jpg",yt=n.p+"images/06a46209.jpg",wt=n.p+"images/ed6d9a11.jpg",jt=n.p+"images/271a66ed.jpg",bt=n.p+"images/2506df73.jpg",_t="Honeycomb_container__gPdSS",Dt="Honeycomb_content__Dufrz",Mt=()=>(0,r.jsx)("div",{className:_t,children:(0,r.jsxs)("div",{className:Dt,children:[(0,r.jsx)("img",{src:xt,alt:""}),(0,r.jsx)("img",{src:At,alt:""}),(0,r.jsx)("img",{src:vt,alt:""}),(0,r.jsx)("img",{src:yt,alt:""}),(0,r.jsx)("img",{src:wt,alt:""}),(0,r.jsx)("img",{src:jt,alt:""}),(0,r.jsx)("img",{src:bt,alt:""})]})}),Nt="PizzaPie_container__+jqg8",Ct="PizzaPie_content__nr36j",Et=()=>(0,r.jsx)("div",{className:Nt,children:(0,r.jsxs)("div",{className:Ct,children:[(0,r.jsx)("img",{src:xt,alt:""}),(0,r.jsx)("img",{src:At,alt:""}),(0,r.jsx)("img",{src:vt,alt:""}),(0,r.jsx)("img",{src:yt,alt:""}),(0,r.jsx)("img",{src:wt,alt:""}),(0,r.jsx)("img",{src:jt,alt:""})]})}),Bt="AnnulusProgressBar_container__t7uE8",kt="AnnulusProgressBar_content__aiBoG",St="AnnulusProgressBar_box__Wl9L-",It="AnnulusProgressBar_circleOuter__OmSUl",Tt="AnnulusProgressBar_num__CAG59",Pt=()=>{const[,e]=(0,a.useState)(0),t=(0,a.useRef)(0),n=(0,a.useRef)(0),s=()=>{let a=471;const i=document.getElementById("circle");if(t.current>=100){t.current=0,e(0);const n=document.getElementById("circle");n&&(n.style.strokeDashoffset="".concat(a.toString()))}else t.current=Number((t.current+.1).toFixed(2)),e(Number((t.current+.1).toFixed(2))),a=Math.floor(a-a*t.current/100),i&&(i.style.strokeDashoffset="".concat(a.toString()));n.current=window.requestAnimationFrame(s)};return(0,a.useEffect)((()=>(s(),()=>{n.current&&cancelAnimationFrame(n.current)})),[]),(0,r.jsx)("div",{className:Bt,children:(0,r.jsx)("div",{className:kt,children:(0,r.jsxs)("div",{className:St,children:[(0,r.jsx)("div",{className:It}),(0,r.jsxs)("svg",{children:[(0,r.jsx)("defs",{children:(0,r.jsxs)("radialGradient",{id:"gradient",cx:"50%",cy:"50%",r:"60%",fx:"50%",fy:"50%",children:[(0,r.jsx)("stop",{offset:"30%",stopColor:"#3cba92"}),(0,r.jsx)("stop",{offset:"100%",stopColor:"#c1dfc4"})]})}),(0,r.jsx)("circle",{stroke:"url(#gradient)",id:"circle"})]}),(0,r.jsx)("div",{className:Tt,children:"".concat(Math.floor(t.current),"%")})]})})})},Ft={container:"AudioLoading_container__LkPXP",content:"AudioLoading_content__Agk5G",span0:"AudioLoading_span0__e1joN",loading:"AudioLoading_loading__Nvgnt",span1:"AudioLoading_span1__KLPUt",span2:"AudioLoading_span2__gOuZh",span3:"AudioLoading_span3__HO3on",span4:"AudioLoading_span4__rFl95",span5:"AudioLoading_span5__Y6BnT",span6:"AudioLoading_span6__jIPUG",span7:"AudioLoading_span7__LmzsW",span8:"AudioLoading_span8__gZg1m",span9:"AudioLoading_span9__BzF4d",span10:"AudioLoading_span10__-p-zh",span11:"AudioLoading_span11__Zse6t",span12:"AudioLoading_span12__Rxrq8",span13:"AudioLoading_span13__21nbh",span14:"AudioLoading_span14__KHro-"},Rt=new Array(15).fill(0),Gt=()=>(0,r.jsx)("div",{className:Ft.container,children:(0,r.jsx)("div",{className:Ft.content,children:Rt.map(((e,t)=>(0,r.jsx)("span",{className:Ft["span".concat(t)]},t)))})}),Qt={container:"SudokuImageAnimation_container__66i30",content:"SudokuImageAnimation_content__bY8Mn",item:"SudokuImageAnimation_item__XGZRs",item8:"SudokuImageAnimation_item8__WsYmu",item7:"SudokuImageAnimation_item7__QNe8D",item6:"SudokuImageAnimation_item6__YU2jR",item5:"SudokuImageAnimation_item5__wz8hO",item4:"SudokuImageAnimation_item4__uHQZd",item3:"SudokuImageAnimation_item3__HiACA",item2:"SudokuImageAnimation_item2__yf6pT",item1:"SudokuImageAnimation_item1__W23ZS",item0:"SudokuImageAnimation_item0__rk5Me"},Lt=new Array(9).fill(0),Ot=()=>(0,r.jsx)("div",{className:Qt.container,children:(0,r.jsx)("div",{className:Qt.content,children:Lt.map(((e,t)=>(0,r.jsx)("div",{className:Qt["item".concat(t)]},t)))})}),zt="TextWrap_container__vVl1N",Ht="TextWrap_topText__eHwkJ",Ut="TextWrap_poly__EwnPy",Vt="TextWrap_leftFloat__Uo9rJ",Wt="TextWrap_rightFloat__ezXwd",Yt=()=>{const e=(0,h.A)().formatMessage({id:"page.htmlVision.visualDesign.quantumEntanglementTip"});return(0,r.jsxs)("div",{className:zt,children:[(0,r.jsx)("div",{className:Ht,children:e.repeat(40)}),(0,r.jsx)("div",{className:"".concat(Ut," ").concat(Vt)}),(0,r.jsx)("div",{className:"".concat(Ut," ").concat(Wt)}),(0,r.jsx)("span",{children:e.repeat(180)})]})},Jt="WaterDropLogin_container__d6dk7",qt="WaterDropLogin_content__jiIiV",Zt="WaterDropLogin_drop__Nq7iB",Kt="WaterDropLogin_contentBox__nL6ua",Xt="WaterDropLogin_inputBox__2oxY0",$t="WaterDropLogin_btns__Sil7M",en="WaterDropLogin_signup__h0wNv",tn=()=>(0,r.jsx)("div",{className:Jt,children:(0,r.jsxs)("div",{className:qt,children:[(0,r.jsx)("div",{className:Zt,children:(0,r.jsxs)("div",{className:Kt,children:[(0,r.jsx)("h2",{children:"Sign in"}),(0,r.jsxs)("form",{children:[(0,r.jsx)("div",{className:Xt,children:(0,r.jsx)("input",{type:"text",placeholder:"Username"})}),(0,r.jsx)("div",{className:Xt,children:(0,r.jsx)("input",{type:"password",placeholder:"Password"})}),(0,r.jsx)("div",{className:Xt,children:(0,r.jsx)("input",{type:"submit",value:"Login"})})]})]})}),(0,r.jsxs)("div",{className:$t,children:[(0,r.jsx)("span",{children:"Forget"}),(0,r.jsx)("span",{children:"Password"})]}),(0,r.jsx)("div",{className:"".concat($t," ").concat(en),children:"Signup"})]})}),nn="TextShadow_container__3+vOx",an="TextShadow_content__ngpOP",sn=()=>{const e=(0,h.A)().formatMessage({id:"page.htmlVision.visualDesign.textShadow"});return(0,r.jsx)("div",{className:nn,children:(0,r.jsx)("div",{className:an,"data-text":e,children:e})})},rn="HorseRacelamp_container__bVbh9",on="HorseRacelamp_scroll__kRja6",cn=new Array(4).fill(0),ln=()=>{const e=()=>(0,r.jsx)("span",{children:"Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross"});return(0,r.jsx)("div",{className:rn,children:cn.map(((t,n)=>(0,r.jsxs)("div",{className:on,children:[e(),e()]},n)))})},dn="HarmonyLogo_container__uTwnw",mn="HarmonyLogo_content__Azar3",un="HarmonyLogo_top__zSfqW",gn="HarmonyLogo_line__6yj7q",hn="HarmonyLogo_bottom__4ZSOr",pn=()=>(0,r.jsxs)("div",{className:dn,children:[(0,r.jsxs)("div",{className:mn,children:[(0,r.jsx)("div",{className:un,children:(0,r.jsx)("div",{className:gn})}),(0,r.jsx)("div",{className:hn})]}),(0,r.jsx)("svg",{children:(0,r.jsxs)("filter",{id:"fractal",filterUnits:"objectBoundingBox",x:"0%",y:"0%",width:"100%",height:"100%",children:[(0,r.jsx)("feTurbulence",{id:"turbulence",type:"fractalNoise",baseFrequency:"0.005 0.005",numOctaves:"10",children:(0,r.jsx)("animate",{attributeName:"baseFrequency",dur:"30s",values:"0.005 0.005;0.05 0.3;0.005 0.005",repeatCount:"indefinite"})}),(0,r.jsx)("feDisplacementMap",{in:"SourceGraphic",scale:"15"})]})})]}),fn="Preserve3D_container__EZ7l0",xn="Preserve3D_content__yxNQy",An="Preserve3D_cubeInner__oYaXM",vn="Preserve3D_top__6op2D",yn="Preserve3D_bottom__Rmjl+",wn="Preserve3D_front__+CRYT",jn="Preserve3D_back__-ZjU+",bn="Preserve3D_left__YYWAD",_n="Preserve3D_right__R5Aqm",Dn="Preserve3D_cubeOuter__pwwjS",Mn=()=>(0,r.jsx)("div",{className:fn,children:(0,r.jsxs)("div",{className:xn,children:[(0,r.jsxs)("div",{className:An,children:[(0,r.jsx)("div",{className:vn}),(0,r.jsx)("div",{className:yn}),(0,r.jsx)("div",{className:wn}),(0,r.jsx)("div",{className:jn}),(0,r.jsx)("div",{className:bn}),(0,r.jsx)("div",{className:_n})]}),(0,r.jsxs)("div",{className:Dn,children:[(0,r.jsx)("div",{className:vn}),(0,r.jsx)("div",{className:yn}),(0,r.jsx)("div",{className:wn}),(0,r.jsx)("div",{className:jn}),(0,r.jsx)("div",{className:bn}),(0,r.jsx)("div",{className:_n})]})]})}),Nn="RotateAndBgFixed_container__Kc-WW",Cn="RotateAndBgFixed_box__DkROP",En="RotateAndBgFixed_a__Yi0br",Bn="RotateAndBgFixed_b__Vv6J0",kn="RotateAndBgFixed_c__xgerx",Sn="RotateAndBgFixed_d__d9aYT",In="RotateAndBgFixed_e__V1OJc",Tn=()=>(0,r.jsx)("div",{className:Nn,children:(0,r.jsxs)("div",{className:Cn,children:[(0,r.jsx)("div",{className:En,children:(0,r.jsx)("img",{src:xt,alt:""})}),(0,r.jsx)("div",{className:Bn,children:(0,r.jsx)("img",{src:At,alt:""})}),(0,r.jsx)("div",{className:kn,children:(0,r.jsx)("img",{src:vt,alt:""})}),(0,r.jsx)("div",{className:Sn,children:(0,r.jsx)("img",{src:yt,alt:""})}),(0,r.jsx)("div",{className:In,children:(0,r.jsx)("img",{src:wt,alt:""})})]})}),Pn="HexagonalMesh_container__mdJJ9",Fn="HexagonalMesh_item__hVzAo",Rn=new Array(300).fill(0),Gn=()=>(0,r.jsx)("div",{className:Pn,children:Rn.map(((e,t)=>(0,r.jsx)("div",{className:Fn},t)))}),Qn="HexagonalRadar_container__hFck5",Ln="HexagonalRadar_content__sj-0h",On="HexagonalRadar_item__IF+DR",zn="HexagonalRadar_maskBox__SqK8S",Hn=new Array(5).fill(0),Un=()=>(0,r.jsxs)("div",{className:Qn,children:[(0,r.jsx)("div",{className:Ln,children:Hn.map(((e,t)=>(0,r.jsx)("div",{className:On},t)))}),(0,r.jsx)("div",{className:zn})]}),Vn=n.p+"images/d2fa7cd8.png",Wn="HoverEnlargement_container__t9rVI",Yn=()=>(0,r.jsx)("div",{className:Wn,children:(0,r.jsx)("img",{src:Vn,alt:""})}),Jn="ConicGradientRing_container__CU+cz",qn="ConicGradientRing_box__6P5ea",Zn="ConicGradientRing_item__jy15e",Kn="ConicGradientRing_semicircle__-N2Ks",Xn=[{name:"label1",num:23},{name:"label2",num:12},{name:"label3",num:48},{name:"label4",num:37},{name:"label5",num:18}],$n=()=>{const e=(0,a.useMemo)((()=>{const e=Xn.reduce(((e,t)=>e+t.num),0);if((null==Xn?void 0:Xn.length)>0){let t=0;const n=Xn.map(((n,a)=>{const s="".concat(t,"deg"),i=n.num/e*360;return t+=i,{...n,deg:"".concat(i,"deg"),rotate:s,color:j[a]}}));return n}return[]}),[Xn]);return(0,r.jsx)("div",{className:Jn,children:(0,r.jsx)("div",{className:qn,children:e.map((e=>(0,r.jsx)("div",{className:Zn,style:{background:"conic-gradient(".concat(e.color," 0,transparent ").concat(e.deg,")"),transform:"rotate(".concat(e.rotate,")")},children:(0,r.jsx)("div",{className:Kn,style:{backgroundColor:e.color}})},e.name)))})})},ea=n.p+"images/c6bccf3b.png",ta=n.p+"images/71329ec9.jpg",na="GlassDesign1_container__jIg8H",aa="GlassDesign1_glass__x+jsp",sa=()=>(0,r.jsxs)("div",{className:na,children:[(0,r.jsx)("img",{src:ea,alt:""}),(0,r.jsx)("div",{className:aa}),(0,r.jsx)("svg",{style:{display:"none"},children:(0,r.jsx)("defs",{children:(0,r.jsxs)("filter",{id:"glassFilter1",children:[(0,r.jsx)("feImage",{result:"pict1",xlinkHref:ta,x:"0",y:"0",width:"517",height:"517"}),(0,r.jsx)("feDisplacementMap",{scale:"30",xChannelSelector:"R",yChannelSelector:"R",in2:"pict1",in:"SourceGraphic"})]})})})]}),ia=n.p+"images/3ef61d0d.jpg",ra="GlassDesign2_container__BLEzA",oa="GlassDesign2_glass__UZeM9",ca=()=>(0,r.jsxs)("div",{className:ra,children:[(0,r.jsx)("img",{src:ea,alt:""}),(0,r.jsx)("div",{className:oa}),(0,r.jsx)("svg",{style:{display:"none"},children:(0,r.jsx)("defs",{children:(0,r.jsxs)("filter",{id:"glassFilter2",children:[(0,r.jsx)("feImage",{result:"pict1",xlinkHref:ia,x:"0",y:"0",width:"523",height:"330"}),(0,r.jsx)("feDisplacementMap",{scale:"30",xChannelSelector:"R",yChannelSelector:"R",in2:"pict1",in:"SourceGraphic"})]})})})]}),la="Ribbon_container__ZOkiq",da="Ribbon_ribbon__wI2K8",ma=()=>(0,r.jsxs)("div",{className:la,children:[(0,r.jsx)("div",{className:da,style:{"--fontSize":"34px",fontWeight:600},children:"Visualization Collection"}),(0,r.jsxs)("div",{className:da,style:{"--fontSize":"28px","--background":"#8A9B0F",fontWeight:500},children:["Visualization Collection ",(0,r.jsx)("br",{})," Visualization Collection"]}),(0,r.jsxs)("div",{className:da,style:{"--background":"#45ADA8"},children:["Visualization Collection",(0,r.jsx)("br",{})," Visualization Collection",(0,r.jsx)("br",{})," Visualization Collection"]})]});var ua=n(21524),ga=n(70653);function ha(e){return e.toString().padStart(2,"0")}const pa=e=>{if(e){const t=e.slice(0,19).replace(/-/g,"/");return e.endsWith("+0000 UTC")?(0,ga.A)((0,ua.A)(new Date(t),8),"YYYY/MM/DD HH:mm:ss"):t}return""},fa="ActivityCountDown_container__z9J8Y",xa="ActivityCountDown_num__F1ysh",Aa="ActivityCountDown_unit__X1r8-",va=e=>{const{countParams:t,overCallback:n,style:s={}}=e,{day:i=59,hour:o=59,minute:c=59,seconds:l=59}=t,[d,m]=(0,a.useState)({d:i,h:o,m:c,s:l}),u=(0,a.useRef)(d),g=(0,a.useRef)(!0),h=(0,a.useRef)(0),p=()=>{if(g.current)return;const e=u.current,{d:t,h:a,m:s,s:i}=e,r=0===a&&0===s&&0===i,o=0===s&&0===i,c=0===i;if(0===t&&0===a&&0===s&&0===i)g.current=!0,n&&n();else if(r){const e={d:t-1,h:23,m:59,s:59};u.current=e,m(e)}else if(o){const e={d:t,h:a-1,m:59,s:59};u.current=e,m(e)}else if(c){const e={d:t,h:a,m:s-1,s:59};u.current=e,m(e)}else{const e={d:t,h:a,m:s,s:i-1};u.current=e,m(e)}};return(0,a.useEffect)((()=>{const{day:e=59,hour:a=59,minute:s=59,seconds:i=59}=t,r={d:e,h:a,m:s,s:i};u.current=r,m(r);0===r.d&&0===r.h&&0===r.m&&0===r.s?g.current||(g.current=!0,n&&n(),h.current&&(window.clearInterval(h.current),h.current=0)):g.current&&(g.current=!1,h.current=window.setInterval(p,1e3))}),[t]),(0,a.useEffect)((()=>()=>{h.current&&window.clearInterval(h.current)}),[]),(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)("div",{className:fa,style:s,children:[(0,r.jsx)("div",{className:xa,children:ha(d.d)}),(0,r.jsx)("div",{className:Aa,children:"天"}),(0,r.jsx)("div",{className:xa,children:ha(d.h)}),(0,r.jsx)("div",{className:Aa,children:"时"}),(0,r.jsx)("div",{className:xa,children:ha(d.m)}),(0,r.jsx)("div",{className:Aa,children:"分"}),(0,r.jsx)("div",{className:xa,children:ha(d.s)}),(0,r.jsx)("div",{className:Aa,children:"秒"})]})})},ya="ActivityCountDown_container__Nw3or",wa="ActivityCountDown_title__5HUMy",ja=()=>{const e=(e=>{let{type:t="ms",startTime:n="",serverTime:a=0}=e;const s="s"===t?1e3*Number(a):a;if(!n)return{day:0,hour:0,minute:0,seconds:0,timeRemaining:0};const i="string"==typeof n?pa(n):n,r=new Date(i).getTime()-s;return{day:Math.floor(r/1e3/60/60/24),hour:Math.floor(r/1e3/60/60%24),minute:Math.floor(r/1e3/60%60),seconds:Math.floor(r/1e3%60),timeRemaining:r}})({type:"ms",startTime:(0,ua.A)(new Date,2).getTime(),serverTime:(new Date).getTime()}),[t,n]=(0,a.useState)(!1);return(0,r.jsxs)("div",{className:ya,children:[(0,r.jsx)("div",{className:wa,children:t?"活动正在进行中":"距离活动开始剩余："}),!t&&(0,r.jsx)(va,{countParams:e,overCallback:()=>{n(!0)},style:{marginTop:"16px"}})]})},ba="VisualDesign_container__oN2JR",_a="VisualDesign_box__-TYNG",{GridBox:Da}=fe,Ma=[{element:(0,r.jsx)(we,{})},{element:(0,r.jsx)(Me,{})},{element:(0,r.jsx)(Ee,{})},{element:(0,r.jsx)(Pe,{})},{element:(0,r.jsx)(Qe,{})},{element:(0,r.jsx)(ze,{})},{element:(0,r.jsx)(Ye,{})},{element:(0,r.jsx)(Yt,{})},{element:(0,r.jsx)(et,{})},{element:(0,r.jsx)(at,{})},{element:(0,r.jsx)(rt,{})},{element:(0,r.jsx)(ft,{})},{element:(0,r.jsx)(Mt,{})},{element:(0,r.jsx)(Et,{})},{element:(0,r.jsx)(Pt,{})},{element:(0,r.jsx)(Gt,{})},{element:(0,r.jsx)(Xe,{})},{element:(0,r.jsx)(Ot,{})},{element:(0,r.jsx)(tn,{})},{element:(0,r.jsx)(sn,{})},{element:(0,r.jsx)(ln,{})},{element:(0,r.jsx)(pn,{})},{element:(0,r.jsx)(Mn,{})},{element:(0,r.jsx)(Tn,{})},{element:(0,r.jsx)(Gn,{})},{element:(0,r.jsx)(Un,{})},{element:(0,r.jsx)(Yn,{})},{element:(0,r.jsx)($n,{})},{element:(0,r.jsx)(sa,{})},{element:(0,r.jsx)(ca,{})},{element:(0,r.jsx)(ma,{})},{element:(0,r.jsx)(ja,{})}],Na=()=>{const{setScrollTop:e}=d();return(0,a.useEffect)((()=>{e(0)}),[]),(0,r.jsx)("div",{className:ba,children:(0,r.jsx)(fe,{differentScreenCols:[2,2,2,1,1],rowSpace:4,colSpace:4,children:Ma.map(((e,t)=>(0,r.jsx)(Da,{children:(0,r.jsx)("div",{className:_a,children:e.element})},t)))})})},Ca="ModuleTitle_container__7ZCMv",Ea=e=>{const t=(0,h.A)(),{intlTitle:n,style:a={}}=e;return(0,r.jsx)("div",{className:Ca,style:a,children:t.formatMessage({id:n})})},Ba=n.p+"images/6765fa3b.png",ka="MagnifyingGlass_container__z7+HK",Sa="MagnifyingGlass_content__csBAU",Ia="MagnifyingGlass_smallBox__1rC23",Ta="MagnifyingGlass_mask__kbQ6H",Pa="MagnifyingGlass_floatBox__Msmv9",Fa="MagnifyingGlass_bigBox__dtenq",Ra=()=>{const{scrollTop:e,headHeight:t}=d(),n=(0,a.useRef)(null),s=(0,a.useRef)(null),i=(0,a.useRef)(null),[o,c]=(0,a.useState)(!1);return(0,r.jsx)("div",{className:ka,children:(0,r.jsxs)("div",{className:Sa,children:[(0,r.jsxs)("div",{className:Ia,ref:n,children:[(0,r.jsx)(Ea,{intlTitle:"page.htmlVision.interactiveDesign.magnifyingGlass",style:{top:"-80px",left:"114%"}}),(0,r.jsx)("div",{className:Ta,onMouseOver:()=>{c(!0)},onMouseMove:a=>{const r=z.findDOMNode(n.current),o=z.findDOMNode(s.current),{offsetWidth:c,offsetHeight:l}=r,{offsetWidth:d,offsetHeight:m}=o;let u=a.clientX-r.offsetLeft-d/2,g=0;g=ec-d&&(u=c-d),g<0?g=0:g>l-m&&(g=l-m),o.style.left=u+"px",o.style.top=g+"px";const h=u/(c-d),p=g/(l-m),f=z.findDOMNode(i.current),x=f.children[0];x.style.left=-h*(x.offsetWidth-f.offsetWidth)+"px",x.style.top=-p*(x.offsetHeight-f.offsetHeight)+"px"},onMouseLeave:()=>{c(!1)}}),(0,r.jsx)("div",{className:Pa,style:{visibility:o?"visible":"hidden"},ref:s}),(0,r.jsx)("img",{src:Ba})]}),(0,r.jsx)("div",{className:Fa,ref:i,children:(0,r.jsx)("img",{src:Ba,style:{visibility:o?"visible":"hidden"}})})]})})},Ga="CropImage_container__agQZ5",Qa="CropImage_leftBox__rxH+K",La="CropImage_img1__vvyEU",Oa="CropImage_img2__CuOAQ",za="CropImage_cropBox__A4fdb",Ha="CropImage_dot__TnuYQ",Ua="CropImage_leftUp__RO+TV",Va="CropImage_up__fR18N",Wa="CropImage_rightUp__5Btk7",Ya="CropImage_right__nbAwk",Ja="CropImage_rightDown__8vsgu",qa="CropImage_down__0RD60",Za="CropImage_leftDown__Ssc21",Ka="CropImage_left__qEy8B",Xa="CropImage_rightBox__tH7SB";var $a=function(e){return e[e.leftUp=0]="leftUp",e[e.up=1]="up",e[e.rightUp=2]="rightUp",e[e.right=3]="right",e[e.rightDown=4]="rightDown",e[e.down=5]="down",e[e.leftDown=6]="leftDown",e[e.left=7]="left",e}($a||{});const es=()=>{const{scrollTop:e}=d(),t=(0,a.useRef)(0),n=(0,a.useRef)(0),s=(0,a.useRef)(!1),i=(0,a.useRef)(),o=(0,a.useRef)(!1),c=(0,a.useRef)(null),l=(0,a.useRef)(null),m=(0,a.useRef)(null),u=(0,a.useRef)(null),g=(0,a.useRef)(null),h=(0,a.useRef)(0),p=(0,a.useRef)(0),f=(0,a.useRef)(0),x=(0,a.useRef)(0),A=e=>{var t=e.offsetLeft,n=e.offsetTop;let a=e.offsetParent;for(;null!=a;)t+=a.offsetLeft,n+=a.offsetTop,a=a.offsetParent;return{left:t,top:n}},v=e=>{let n=e.clientX;const a=z.findDOMNode(l.current),{left:s}=A(a),i=s,r=i+t.current-4;n>r?n=r:n{let n=t.clientY+e;const a=z.findDOMNode(l.current),{top:s}=A(a),i=s,r=z.findDOMNode(u.current),o=A(r).top,c=o+r.offsetHeight-4;nc&&(n=c);const d=r.offsetHeight;r.style.height=d+o-n+"px",r.style.top=r.offsetTop+n-o+"px"},w=e=>{let t=e.clientX;const n=z.findDOMNode(l.current),{left:a}=A(n),s=a,i=z.findDOMNode(u.current),r=A(i).left,o=r+i.offsetWidth-4;to&&(t=o);const c=i.offsetWidth;i.style.width=c+r-t+"px",i.style.left=i.offsetLeft+t-r+"px"},j=t=>{let a=t.clientY+e;const s=z.findDOMNode(l.current),{top:i}=A(s),r=i,o=r+n.current-4;ao&&(a=o);const c=z.findDOMNode(u.current),d=c.offsetHeight-2,m=a-d-A(c).top;c.style.height=d+m+"px"},b=()=>{const e=z.findDOMNode(u.current),{offsetWidth:t,offsetHeight:n,offsetLeft:a,offsetTop:s}=e,i=a+t,r=s+n;z.findDOMNode(m.current).style.clip="rect(".concat(s,"px,").concat(i,"px,").concat(r,"px,").concat(a,"px)")},_=()=>{const e=z.findDOMNode(u.current),{offsetWidth:t,offsetHeight:n,offsetLeft:a,offsetTop:s}=e,i=a+t,r=s+n,o=z.findDOMNode(g.current);o.style.top="".concat(-s,"px"),o.style.left="".concat(-a,"px"),o.style.clip="rect(".concat(s,"px,").concat(i,"px,").concat(r,"px,").concat(a,"px)")},D=(e,t)=>{e.stopPropagation(),s.current=!0,i.current=t},M=()=>{s.current=!1,o.current=!1};return(0,a.useEffect)((()=>{const e=z.findDOMNode(l.current),{offsetWidth:a,offsetHeight:s}=e;t.current=a,n.current=s}),[]),(0,r.jsxs)("div",{className:Ga,onMouseMove:e=>{if(o.current){const a=z.findDOMNode(u.current),{offsetWidth:s,offsetHeight:i}=a,r=e.clientX-h.current,o=e.clientY-p.current,c=x.current+o,l=f.current+r;c<0?a.style.top="0px":c>n.current-i-2?a.style.top="".concat(n.current-i-2,"px"):a.style.top="".concat(c,"px"),l<0?a.style.left="0px":l>t.current-s-2?a.style.left="".concat(t.current-s-2,"px"):a.style.left="".concat(l,"px"),b(),_()}if(s.current){switch(i.current){case $a.right:v(e);break;case $a.up:y(e);break;case $a.left:w(e);break;case $a.down:j(e);break;case $a.leftUp:w(e),y(e);break;case $a.leftDown:w(e),j(e);break;case $a.rightUp:v(e),y(e);break;case $a.rightDown:v(e),j(e)}b(),_()}},onMouseUp:M,onMouseLeave:M,ref:c,children:[(0,r.jsx)(Ea,{intlTitle:"page.htmlVision.interactiveDesign.dragAndDropClipBox"}),(0,r.jsxs)("div",{className:Qa,ref:l,children:[(0,r.jsx)("img",{src:Je,className:La}),(0,r.jsx)("img",{src:Je,className:Oa,ref:m}),(0,r.jsxs)("div",{className:za,onMouseDown:e=>{h.current=e.clientX,p.current=e.clientY;const t=z.findDOMNode(u.current);x.current=t.offsetTop,f.current=t.offsetLeft,o.current=!0},ref:u,children:[(0,r.jsx)("div",{className:"".concat(Ha," ").concat(Ua),onMouseDown:e=>D(e,$a.leftUp)}),(0,r.jsx)("div",{className:"".concat(Ha," ").concat(Va),onMouseDown:e=>D(e,$a.up)}),(0,r.jsx)("div",{className:"".concat(Ha," ").concat(Wa),onMouseDown:e=>D(e,$a.rightUp)}),(0,r.jsx)("div",{className:"".concat(Ha," ").concat(Ya),onMouseDown:e=>D(e,$a.right)}),(0,r.jsx)("div",{className:"".concat(Ha," ").concat(Ja),onMouseDown:e=>D(e,$a.rightDown)}),(0,r.jsx)("div",{className:"".concat(Ha," ").concat(qa),onMouseDown:e=>D(e,$a.down)}),(0,r.jsx)("div",{className:"".concat(Ha," ").concat(Za),onMouseDown:e=>D(e,$a.leftDown)}),(0,r.jsx)("div",{className:"".concat(Ha," ").concat(Ka),onMouseDown:e=>D(e,$a.left)})]})]}),(0,r.jsx)("div",{className:Xa,children:(0,r.jsx)("img",{src:Je,ref:g})})]})},ts=n.p+"images/e55cd06c.jpg",ns=n.p+"images/f44f33e9.jpg",as=n.p+"images/ccd69096.jpg",ss=n.p+"images/dbd623e3.jpg",is=n.p+"images/d327c52a.jpg",rs=n.p+"images/f160c0ae.jpg",os={container:"DragShopping_container__IbTIV",content:"DragShopping_content__VVnMY",bookBox:"DragShopping_bookBox__SDdDi",shoppingBox:"DragShopping_shoppingBox__3DBFv",tableHead:"DragShopping_tableHead__lYIfd",tableCell:"DragShopping_tableCell__6tWCA",tableRow:"DragShopping_tableRow__6Qo3x",total:"DragShopping_total__+sd3-",tip:"DragShopping_tip__vp+8T"},{GridBox:cs}=fe,ls=[{id:"1",name:"一个星期学会吉他弹唱",price:68,imgUrl:ts},{id:"2",name:"柳公权楷书教程入门",price:45,imgUrl:ns},{id:"3",name:"世说新语",price:52,imgUrl:as},{id:"4",name:"名人传",price:124,imgUrl:ss},{id:"5",name:"骆驼祥子",price:168,imgUrl:is},{id:"6",name:"阅微堂笔记",price:56,imgUrl:rs}],ds=()=>{const e=(0,h.A)(),[t,n]=(0,a.useState)([]),[s,i]=(0,a.useState)(!1),[o,c]=(0,a.useState)(0);return(0,r.jsxs)("div",{className:os.container,children:[(0,r.jsx)(Ea,{intlTitle:"page.htmlVision.interactiveDesign.dragAndDropShopping"}),(0,r.jsxs)("div",{className:os.content,children:[(0,r.jsx)(fe,{differentScreenCols:[6,6,3,3,3],rowSpace:0,colSpace:0,children:ls.map(((e,t)=>{const{id:n,name:a,price:s,imgUrl:i}=e;return(0,r.jsx)(cs,{children:(0,r.jsxs)("div",{className:os.bookBox,draggable:"true",onDragStart:e=>((e,t)=>{e=e||window.event;const n=ls[t];e.dataTransfer.setData("id",n.id),e.dataTransfer.effectAllowed="copy"})(e,t),children:[(0,r.jsx)("img",{src:i,draggable:"false"}),(0,r.jsx)("p",{children:a}),(0,r.jsx)("p",{children:"￥".concat(s)})]})},n)}))}),(0,r.jsxs)("div",{className:os.shoppingBox,style:s?{border:"1px solid #DD5044",color:"#DD5044"}:{},onDragOver:e=>{e.preventDefault(),s||i(!0)},onDragLeave:e=>{e.preventDefault(),s&&i(!1)},onDrop:e=>{e.preventDefault();const a=e.dataTransfer.getData("id");let s=!1,r=0;const l=t.map((e=>e.id===a?(s=!0,r=e.price,{...e,num:e.num+1}):e));if(!s){let e;for(let t=ls.length-1;t>=0;t--){const n=ls[t];if(n.id===a){r=n.price,e=n;break}}e&&l.unshift({...e,num:1})}n(l),i(!1),c(o+r)},children:[(0,r.jsxs)("div",{className:os.tableHead,children:[(0,r.jsx)("div",{className:os.tableCell,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.title"})}),(0,r.jsx)("div",{className:os.tableCell,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.price"})}),(0,r.jsx)("div",{className:os.tableCell,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.count"})})]}),t.map((e=>{const{id:t,num:n,name:a,price:s}=e;return(0,r.jsxs)("div",{className:os.tableRow,children:[(0,r.jsx)("div",{className:os.tableCell,children:a}),(0,r.jsx)("div",{className:os.tableCell,children:"￥".concat(s)}),(0,r.jsx)("div",{className:os.tableCell,children:n})]},t)})),t.length>0&&(0,r.jsx)("div",{className:os.total,children:(0,r.jsxs)("span",{className:os.totalMoney,children:[e.formatMessage({id:"page.htmlVision.interactiveDesign.total"}),"：￥",(0,r.jsx)("span",{children:o})]})}),(0,r.jsx)("div",{className:os.tip,children:s?e.formatMessage({id:"page.htmlVision.interactiveDesign.addingToCart"}):e.formatMessage({id:"page.htmlVision.interactiveDesign.dragToThisToBuy"})})]})]})]})},ms=function(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:10,s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:40,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:.12;const{scrollTop:r}=d(),[o,c]=(0,a.useState)(!1),[l,m]=(0,a.useState)("default"),u=(0,a.useRef)({mouseX:null,mouseY:null}),g=(0,a.useRef)(0);return(0,a.useEffect)((()=>{const e=()=>{const{mouseX:a,mouseY:r}=u.current;if(null!==a&&null!==r){let e=n;"big"===l&&(e=s);const o=z.findDOMNode(t.current),c=o.style.left?parseFloat(o.style.left):null,d=o.style.top?parseFloat(o.style.top):null;if(null!==c&&null!==d){const t=a-(c+e),n=r-(d+e),s=Math.hypot(t,n);if(s>0)if(s<=.1)o.style.left="".concat(c,"px"),o.style.top="".concat(d,"px");else{const e=t*i,a=n*i;o.style.left="".concat(c+e,"px"),o.style.top="".concat(d+a,"px")}}}g.current=window.requestAnimationFrame(e)};return g.current=window.requestAnimationFrame(e),()=>{g.current&&window.cancelAnimationFrame(g.current)}}),[l]),{showCursor:o,cursorSize:l,cursorDefaultRadius:n,cursorBigRadius:s,setCursorSize:m,onMouseEnter:a=>{const{clientX:s,clientY:i}=a;c(!0);const o=z.findDOMNode(e.current),{offsetLeft:l=0,offsetTop:d=0}=o;u.current={mouseX:s-l,mouseY:i-(d-r)};const m=z.findDOMNode(t.current);m.style.left="".concat((u.current.mouseX||0)-n,"px"),m.style.top="".concat((u.current.mouseY||0)-n,"px")},onMouseMove:t=>{const{clientX:n,clientY:a}=t,s=z.findDOMNode(e.current),{offsetLeft:i=0,offsetTop:o=0}=s;u.current={mouseX:n-i,mouseY:a-(o-r)}},onMouseLeave:t=>{const{clientX:n,clientY:a}=t;c(!1);const s=z.findDOMNode(e.current),{offsetLeft:i=0,offsetTop:o=0}=s;u.current={mouseX:n-i,mouseY:a-(o-r)}}}},us=n.p+"images/70af4d01.jpg",gs="MouseHover_container__QIdL2",hs="MouseHover_content__L5hzm",ps="MouseHover_title__617kC",fs="MouseHover_bottom__jjGyr",xs="MouseHover_right__Aviwn",As="MouseHover_cursor__IcpdN",vs=[{name:"两个跨域页面进行跳转传参的终极方案",href:"https://juejin.cn/post/7134967869326458916"},{name:"面试秘籍之手写系列",href:"https://juejin.cn/post/7134975263707758606"},{name:"一款将打包后的Chrome插件自动化加载到浏览器的webpack插件",href:"https://juejin.cn/post/7134991167095062565"},{name:"全网最全AutoIt3基础教程及实战案例",href:"https://juejin.cn/post/7134952028870017060"}],ys=()=>{const e=(0,h.A)(),t=(0,a.useRef)(null),n=(0,a.useRef)(null),{showCursor:s,cursorSize:i,cursorDefaultRadius:o,cursorBigRadius:c,setCursorSize:l,onMouseEnter:d,onMouseMove:m,onMouseLeave:u}=ms(t,n),g=()=>{l("big")},p=()=>{l("default")};return(0,r.jsxs)("div",{className:gs,onMouseEnter:d,onMouseMove:m,onMouseLeave:u,ref:t,children:[(0,r.jsxs)("div",{className:hs,children:[(0,r.jsx)("p",{className:ps,onMouseEnter:g,onMouseLeave:p,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.personalArticle"})}),(0,r.jsxs)("div",{className:fs,children:[(0,r.jsx)("img",{src:us,alt:"",onMouseEnter:g,onMouseLeave:p}),(0,r.jsx)("div",{className:xs,children:vs.map(((e,t)=>(0,r.jsx)("a",{href:e.href,target:"_blank",onMouseEnter:g,onMouseLeave:p,children:e.name},t)))})]})]}),(0,r.jsx)("div",{className:As,style:{visibility:s?"visible":"hidden",width:"".concat("big"===i?2*c:2*o,"px"),height:"".concat("big"===i?2*c:2*o,"px")},ref:n})]})},ws="SlideButtonTab_container__eT4SM",js="SlideButtonTab_content__6sIYs",bs="SlideButtonTab_btn__tD8IC",_s="SlideButtonTab_actived__RWXqG",Ds=new Array(4).fill(0),Ms=()=>{const e=(0,a.useRef)(null),[t,n]=(0,a.useState)(0),s=(0,a.useRef)(0);return(0,a.useEffect)((()=>{if(e.current){const{width:t}=e.current.getBoundingClientRect(),n=(t-32-8*(2*Ds.length-2))/Ds.length;e.current.style.setProperty("--btnWidth","".concat(n,"px")),s.current=n}}),[]),(0,r.jsxs)("div",{className:ws,children:[(0,r.jsx)(Ea,{intlTitle:"page.htmlVision.interactiveDesign.swipeTab"}),(0,r.jsx)("div",{className:js,ref:e,children:Ds.map(((a,i)=>(0,r.jsxs)("div",{className:"".concat(bs," ").concat(t===i?_s:""),onClick:()=>(a=>{if(e.current&&t!==a){const i="".concat(16+s.current*a+8*a*2,"px");e.current.style.setProperty("--groove-left",i);let r="0deg";r=a{e.current&&e.current.style.setProperty("--wraper-rotate","0deg")}),600),n(a)}})(i),children:["Button",i+1]},i)))})]})},Ns=n.p+"images/a601ac6c.png",Cs=n.p+"images/d1a0696c.png",Es=n.p+"images/e430aae1.png",Bs=n.p+"images/b2b0669d.png",ks=n.p+"images/f354e378.png",Ss=n.p+"images/c6c82aab.png",Is=n.p+"images/7075d257.png",Ts=n.p+"images/b637b49e.png",Ps="FlipBook_container__bOMio",Fs="FlipBook_pages__Ls1i4",Rs="FlipBook_paper__qnIh0",Gs="FlipBook_page__5K+Jz",Qs="FlipBook_left-show-front-page__I3ToF",Ls="FlipBook_right-show-back-page__crJO-",Os="FlipBook_left-show-back-page__yRt8k",zs="FlipBook_right-show-front-page__pTHC0",Hs="FlipBook_left-hide-front-page__kQs3M",Us="FlipBook_left-hide-back-page__lMGif",Vs="FlipBook_right-hide-front-page__8XaW9",Ws="FlipBook_btns__9Cs+L",Ys="FlipBook_btn__QmvzH",Js=[[Ns,Cs],[Es,Bs],[ks,Ss],[Is,Ts]],qs=[Qs,Os,zs,Ls,Hs,Us,Vs,"FlipBook_right-hide-back-page__56D1v"],Zs=()=>{const e=(0,h.A)(),t=(0,a.useRef)(null),n=(0,a.useRef)(0),s=(0,a.useRef)(!1),i=()=>{if(t.current){const{children:e}=t.current;Array.prototype.forEach.call(e,((e,t)=>{if(e.attributes&&e.attributes.length){var a,s;if(e.attributes.getNamedItem("data-left"))null===(a=e.attributes)||void 0===a||a.removeNamedItem("data-left");if(e.attributes.getNamedItem("data-right"))null===(s=e.attributes)||void 0===s||s.removeNamedItem("data-right")}const{children:i}=e;if(t===n.current){var r,o,c,l;const t=document.createAttribute("data-left");t.nodeValue="true",e.attributes.setNamedItem(t),e.style.transform="perspective(1000px) rotateY(-180deg)",e.style.zIndex="4",null===(r=i[0].classList)||void 0===r||r.remove(...qs),null===(o=i[0].classList)||void 0===o||o.add(Os),null===(c=i[1].classList)||void 0===c||c.remove(...qs),null===(l=i[1].classList)||void 0===l||l.add(Qs)}else if(t===n.current+1){var d,m,u,g;const t=document.createAttribute("data-right");t.nodeValue="true",e.attributes.setNamedItem(t),e.style.transform="perspective(1000px) rotateY(0deg)",e.style.zIndex="4",null===(d=i[0].classList)||void 0===d||d.remove(...qs),null===(m=i[0].classList)||void 0===m||m.add(zs),null===(u=i[1].classList)||void 0===u||u.remove(...qs),null===(g=i[1].classList)||void 0===g||g.add(Ls)}else if(t{const e=document.styleSheets[0];e.insertRule("@keyframes flip-to-left {\n from {\n transform: perspective(1000px) rotateY(0);\n }\n to {\n transform: perspective(1000px) rotateY(-180deg);\n }\n }"),e.insertRule("@keyframes flip-to-right {\n from {\n transform: perspective(1000px) rotateY(-180deg);\n }\n to {\n transform: perspective(1000px) rotateY(0);\n }\n }"),s.current=!0,i()}),[]),(0,r.jsxs)("div",{className:Ps,children:[(0,r.jsx)(Ea,{intlTitle:"page.htmlVision.interactiveDesign.flipBoook"}),(0,r.jsx)("div",{className:Fs,ref:t,children:Js.map(((e,t)=>(0,r.jsxs)("div",{className:Rs,children:[(0,r.jsx)("div",{className:Gs,children:(0,r.jsx)("img",{src:e[0],alt:""})}),(0,r.jsx)("div",{className:Gs,children:(0,r.jsx)("img",{src:e[1],alt:""})})]},t)))}),(0,r.jsxs)("div",{className:Ws,children:[(0,r.jsx)($.Ay,{type:"primary",className:Ys,onClick:()=>{if(!(n.current<=-1||s.current)){if(s.current=!0,t.current){const{children:e}=t.current,a=e[n.current];a.style.animation="flip-to-right 2s ease-in-out forwards",setTimeout((()=>{a.style.zIndex="5"}),1e3)}setTimeout((()=>{n.current=n.current-1,i()}),2e3)}},children:e.formatMessage({id:"page.htmlVision.interactiveDesign.previousPage"})}),(0,r.jsx)($.Ay,{type:"primary",className:Ys,onClick:()=>{if(!(n.current>=Js.length-1||s.current)){if(s.current=!0,t.current){const{children:e}=t.current,a=e[n.current+1];a.style.animation="flip-to-left 2s ease-in-out forwards",setTimeout((()=>{a.style.zIndex="5"}),1e3)}setTimeout((()=>{n.current=n.current+1,i()}),2e3)}},children:e.formatMessage({id:"page.htmlVision.interactiveDesign.nextPage"})})]})]})},Ks="switch_container__i9Gh6",Xs="switch_box__M6wl2",$s="switch_icon__AQIrn",ei=e=>{const{open:t,width:n=90,height:s=40,openIcon:i,closeIcon:o,onChange:c,style:l={},className:d=""}=e,[m,u]=(0,a.useState)(void 0!==t&&t);return(0,r.jsxs)("div",{className:"".concat(Ks," ").concat(d),style:{width:"".concat(n,"px"),height:"".concat(s,"px"),borderRadius:"".concat(s/2,"px"),backgroundColor:void 0!==t&&t||void 0===t&&m?"#e4e4e4":"#1a1c20",...l},onClick:()=>{void 0!==t?c&&c(!t):u(!m)},children:[(0,r.jsx)("div",{className:Xs,style:void 0!==t&&t||void 0===t&&m?{width:"".concat(.8*s,"px"),height:"".concat(.8*s,"px"),borderRadius:"50%",top:"".concat(.1*s,"px"),left:"".concat(.1*s,"px")}:{width:"".concat(.2*s,"px"),height:"".concat(.7*s,"px"),borderRadius:"".concat(.2*s/2,"px"),top:"".concat(.15*s,"px"),left:"".concat(n-s/2,"px")}}),o&&(0,r.jsx)("div",{className:$s,style:{width:"".concat(.8*s,"px"),height:"".concat(.8*s,"px"),top:"".concat(.1*s,"px"),left:"".concat(.1*s,"px"),opacity:void 0!==t&&t||void 0===t&&m?0:1,display:"flex",alignItems:"center"},children:o}),i&&(0,r.jsx)("div",{className:$s,style:{width:"".concat(.8*s,"px"),height:"".concat(.8*s,"px"),top:"".concat(.1*s,"px"),left:"".concat(n-.9*s,"px"),opacity:void 0!==t&&t||void 0===t&&m?1:0,display:"flex",alignItems:"center",justifyContent:"flex-end"},children:i})]})},ti=n.p+"images/16a09882.png",ni=n.p+"images/58bbf8ef.png",ai="Switchs_container__pX5RV",si=()=>(0,r.jsxs)("div",{className:ai,children:[(0,r.jsx)(Ea,{intlTitle:"page.htmlVision.interactiveDesign.switchButton"}),(0,r.jsx)(ei,{width:66,height:30}),(0,r.jsx)(ei,{width:76,height:34,openIcon:(0,r.jsx)("span",{style:{color:"#333",marginRight:"2px"},children:"ON"}),closeIcon:(0,r.jsx)("span",{style:{color:"#fff",marginLeft:"4px"},children:"OFF"}),style:{margin:"0 60px"}}),(0,r.jsx)(ei,{openIcon:(0,r.jsx)("img",{src:ti,alt:"",width:26,height:26}),closeIcon:(0,r.jsx)("img",{src:ni,alt:"",width:26,height:26})})]}),ii=n.p+"images/0e3fc4a1.png",ri=n.p+"images/036f3b2c.png",oi=n.p+"images/de961e69.png",ci=n.p+"images/77eff419.png",li=n.p+"images/bae3b2af.png",di=n.p+"images/641be512.png",mi=n.p+"images/bb4c7aec.png",ui=n.p+"images/95259d51.png",gi=n.p+"images/a3f5bcd3.png",hi="animation_container__bfyEi",pi="animation_content__H8vdL",fi="animation_people__3G2ps",xi="animation_giftBox__06Ghv",Ai="animation_coin__9Ei6m",vi="animation_gift__fEEYc";let yi=600;const wi=80;let ji="CCW";let bi=0,_i=0,Di=0,Mi=!1,Ni=!1;const Ci={icon1:{top:60,left:32,vx:-4.5},icon2:{top:30,left:34,vx:-3},icon3:{top:50,left:36,vx:0},icon4:{top:80,left:38,vx:1},icon5:{top:36,left:40,vx:3},icon6:{top:60,left:42,vx:2},icon7:{top:90,left:44,vx:5}},Ei={icon1:{top:Ci.icon1.top,left:Ci.icon1.left,vx:-4.5,vy:0,g:.2,opacity:0,isMoving:!1},icon2:{top:Ci.icon2.top,left:Ci.icon2.left,vx:-3,vy:0,g:.3,opacity:0,isMoving:!1},icon3:{top:Ci.icon3.top,left:Ci.icon3.left,vx:0,vy:0,g:.2,opacity:0,isMoving:!1},icon4:{top:Ci.icon4.top,left:Ci.icon4.left,vx:1,vy:0,g:.3,opacity:0,isMoving:!1},icon5:{top:Ci.icon5.top,left:Ci.icon5.left,vx:3,vy:0,g:.4,opacity:0,isMoving:!1},icon6:{top:Ci.icon6.top,left:Ci.icon6.left,vx:2,vy:0,g:.5,opacity:0,isMoving:!1},icon7:{top:Ci.icon7.top,left:Ci.icon7.left,vx:5,vy:0,g:.3,opacity:0,isMoving:!1}};function Bi(e,t,n){let a=0;return n>-e&&n{const{noDropCoins:t=!1,clickNoDropCoins:n=!1}=e,s=(0,a.useRef)(null),i=(0,a.useRef)(null);return(0,a.useLayoutEffect)((()=>{let e=0,n=64,a=Bi(wi,40,n);return e=window.requestAnimationFrame((function r(){if(s.current){const e=function(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,i=e,r=t;return 0!==n&&(i=e*Math.cos(n)+t*Math.sin(n)+a,r=-e*Math.sin(n)+t*Math.cos(n)+s),{transitionX:i,transitionY:r}}(n,a,bi,_i,Di),{transitionX:r,transitionY:o}=e,c=z.findDOMNode(s.current);if(!c)return;c.offsetWidth<350?yi=500:c.offsetWidth<400&&(yi=550),c.style.left="".concat(r,"px"),c.style.top="".concat(-o,"px");let l=1.5;n>=wi?("CCW"===ji?(bi=0,_i=0,Di=0):(bi=120,_i=17,Di=49),t||(Mi=!0,Ni=!0)):n<=-wi&&(ji="CCW"===ji?"CW":"CCW",t||(Mi=!0,Ni=!0)),Math.abs(n)>16&&(l=1.5*Math.pow(Math.cos(n/wi),2));const d=function(e,t,n,a,s){let i=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1,r=a,o=s;return r=a>=e?a-i:a<=-e?a+i:"CCW"===n?s>0?a-i:a+i:s<0?a-i:a+i,r>e?r=e:r<-e&&(r=-e),o=Bi(e,t,r),o>0&&(a>=e?"CCW"!==n&&(o=-o):a<=-e?"CCW"===n&&(o=-o):s<0&&(o=-o)),{nextX:r,nextY:o}}(wi,40,ji,n,a,l),{nextX:m,nextY:u}=d;n=m,a=u;let g=null;i&&i.current&&(g=z.findDOMNode(i.current));let h=!0;g&&Object.keys(Ei).forEach(((e,t)=>{const n=g.childNodes[t];if(n){const t=Ei[e],{top:a,left:s,vx:i,vy:r,g:o,opacity:c,isMoving:l}=t;if(l||Mi){const d=Ci[e];let m=a+r,u=s+i,g=i;g=Math.abs(i)>.1?i>0?i-.1:i+.1:0;let p=m-d.top;const f=yi-d.top,x=f/2*.45;let A=c;p/f>.55&&(p=x-(m-.55*f)),A=(p/x).toFixed(2),A>1&&(A=1);let v=r+o,y=l;0===m?(m=d.top,u=d.left,g=d.vx,y=!0):m>=yi?(m=0,u=0,A=0,g=0,v=0,y=!1):(h=!1,Mi&&(y=!0)),n.style.top="".concat(m,"px"),n.style.left="".concat(u,"px"),n.style.opacity=A,Object.assign(t,{top:m,left:u,vx:g,vy:v,isMoving:y})}}})),Mi&&(Mi=!1),h&&(Ni=!1)}e=window.requestAnimationFrame(r)})),()=>{e&&window.cancelAnimationFrame(e)}}),[]),(0,r.jsx)("div",{className:hi,children:(0,r.jsxs)("div",{className:pi,ref:s,children:[(0,r.jsx)("img",{src:ii,alt:"",className:fi}),(0,r.jsxs)("div",{className:xi,onClick:()=>{n||Ni||(Mi=!0,Ni=!0)},ref:i,children:[(0,r.jsx)("img",{src:oi,alt:"",className:Ai}),(0,r.jsx)("img",{src:ci,alt:"",className:Ai}),(0,r.jsx)("img",{src:li,alt:"",className:Ai}),(0,r.jsx)("img",{src:di,alt:"",className:Ai}),(0,r.jsx)("img",{src:mi,alt:"",className:Ai}),(0,r.jsx)("img",{src:ui,alt:"",className:Ai}),(0,r.jsx)("img",{src:gi,alt:"",className:Ai}),(0,r.jsx)("img",{src:ri,alt:"",className:vi})]})]})})},Si="PeopleAnimation_container__P9IRI",Ii=()=>(0,r.jsx)("div",{className:Si,children:(0,r.jsx)(ki,{})}),Ti={container:"TweakCube_container__chHsQ",content:"TweakCube_content__rXgCM",cube:"TweakCube_cube__c9JMo",changeColor:"TweakCube_changeColor__SsQtL",column0:"TweakCube_column0__0ANAL",span0:"TweakCube_span0__kaIxY",span1:"TweakCube_span1__RA+mL",span2:"TweakCube_span2__BzTLy",column1:"TweakCube_column1__9Hhyi",column2:"TweakCube_column2__EbxfC"},Pi=new Array(3).fill(0),Fi=()=>(0,r.jsxs)("div",{className:Ti.container,children:[(0,r.jsx)(Ea,{intlTitle:"page.htmlVision.interactiveDesign.pseudo3DRubikCube"}),(0,r.jsx)("div",{className:Ti.content,children:Pi.map(((e,t)=>(0,r.jsx)("div",{className:Ti.cube,children:Pi.map(((e,t)=>(0,r.jsx)("div",{className:Ti["column".concat(t)],children:Pi.map(((e,t)=>(0,r.jsx)("span",{className:Ti["span".concat(t)]},t)))},t)))},t)))})]}),Ri="Preserve3dBox_container__S8Nkn",Gi="Preserve3dBox_content__OkpkD",Qi="Preserve3dBox_box__xhigG",Li="Preserve3dBox_side1__OlfJ5",Oi="Preserve3dBox_side2__N20GX",zi="Preserve3dBox_side3__t1Hxo",Hi="Preserve3dBox_side4__7YzMw",Ui="Preserve3dBox_side5__38WMJ",Vi="Preserve3dBox_side6__pWRYS",Wi="Preserve3dBox_light__8ms1v",Yi=()=>{const e=(0,a.useRef)(null),t=(0,a.useRef)(null),n=(0,a.useRef)(null),s=()=>{if(n.current=null,t.current){const{children:e}=t.current;Array.prototype.forEach.call(e,(e=>{Array.prototype.includes.call(e.classList,Wi)&&e.classList.remove(Wi)}));document.styleSheets[0].insertRule("@keyframes preserve3dRotate {\n 100% {\n transform: rotate3d(1, 1, 1, 360deg);\n }\n }"),t.current.style.animation="preserve3dRotate 10s linear infinite"}},i=e=>{null==e||e.classList.add(Wi)};return(0,r.jsxs)("div",{className:Ri,onMouseDown:e=>{const{clientX:a,clientY:s}=e,{transform:i}=window.getComputedStyle(z.findDOMNode(t.current));if(i&&"none"!==i){const e=i.match(/matrix(3d)?((.+))/);if(e&&e.length>=3){const t=e[2].split(", ")||[],i=180*Math.acos(Number(t[5]))/Math.PI,r=180*Math.acos(Number(t[10]))/Math.PI;n.current={x:a,y:s,rotateX:i,rotateY:r}}}},onMouseMove:e=>{if(t.current&&n.current){const{clientX:a,clientY:s}=e,{x:i,y:r,rotateX:o,rotateY:c}=n.current,l=2*(r-s),d=(a-i)/2;t.current&&(t.current.style.animation="none"),t.current.style.transform="rotateX(".concat(o+l,"deg) rotateY(").concat(c+d,"deg)")}},onMouseUp:s,onMouseLeave:s,ref:e,children:[(0,r.jsx)(Ea,{intlTitle:"page.htmlVision.interactiveDesign.3DRubikCube"}),(0,r.jsx)("div",{className:Gi,children:(0,r.jsxs)("div",{className:Qi,ref:t,children:[(0,r.jsx)("div",{className:Li,onClick:e=>{t.current&&(t.current.style.transform="rotateX(360deg) rotateY(360deg)",t.current.style.animation="none",i(e.target))}}),(0,r.jsx)("div",{className:Oi,onClick:e=>{t.current&&(t.current.style.transform="rotateX(0deg) rotateY(180deg)",t.current.style.animation="none",i(e.target))}}),(0,r.jsx)("div",{className:zi,onClick:e=>{t.current&&(t.current.style.transform="rotateX(270deg) rotateY(0deg)",t.current.style.animation="none",i(e.target))}}),(0,r.jsx)("div",{className:Hi,onClick:e=>{t.current&&(t.current.style.transform="rotateX(90deg) rotateY(180deg)",t.current.style.animation="none",i(e.target))}}),(0,r.jsx)("div",{className:Ui,onClick:e=>{t.current&&(t.current.style.transform="rotateX(0deg) rotateY(90deg)",t.current.style.animation="none",i(e.target))}}),(0,r.jsx)("div",{className:Vi,onClick:e=>{t.current&&(t.current.style.transform="rotateX(0deg) rotateY(270deg)",t.current.style.animation="none",i(e.target))}})]})})]})},Ji="OrientationSenseCard_container__wM4Og",qi="OrientationSenseCard_content__nHHlN",Zi="OrientationSenseCard_card__kb1rR",Ki=[Es,Bs,Ss,Is,Ts],Xi=()=>(0,r.jsxs)("div",{className:Ji,children:[(0,r.jsx)(Ea,{intlTitle:"page.htmlVision.interactiveDesign.automaticIdentificationOfMouseDirection"}),(0,r.jsx)("div",{className:qi,children:Ki.map(((e,t)=>(0,r.jsx)("div",{className:Zi,children:(0,r.jsx)("img",{src:e,alt:""})},t)))})]}),$i="HexagonalMesh1_container__4Mauo",er="HexagonalMesh1_item__uupv2",tr=new Array(800).fill(0),nr=()=>{const e=(0,a.useRef)(null),t=()=>{if(e.current){const{width:t,height:n}=e.current.getBoundingClientRect(),a=t/2,s=n/2;e.current.style.setProperty("--xPos","".concat(a,"px")),e.current.style.setProperty("--yPos","".concat(s,"px"))}};return(0,a.useEffect)((()=>{t()}),[]),(0,r.jsx)("div",{className:$i,onMouseMove:t=>{if(e.current){const{left:n,top:a}=e.current.getBoundingClientRect(),s=t.pageX-n,i=t.pageY-a;window.requestAnimationFrame((function(){e.current&&(e.current.style.setProperty("--xPos","".concat(s,"px")),e.current.style.setProperty("--yPos","".concat(i,"px")))}))}},onMouseLeave:t,ref:e,children:tr.map(((e,t)=>(0,r.jsx)("div",{className:er},t)))})},ar="HexagonalMesh2_container__7Eq5-",sr="HexagonalMesh2_item__RBkZx",ir=new Array(800).fill(0),rr=()=>{const e=(0,a.useRef)(null),t=()=>{if(e.current){const{width:t,height:n}=e.current.getBoundingClientRect(),a=t/2,s=n/2;e.current.style.setProperty("--xPos","".concat(a,"px")),e.current.style.setProperty("--yPos","".concat(s,"px"))}};return(0,a.useEffect)((()=>{t()}),[]),(0,r.jsx)("div",{className:ar,onMouseMove:t=>{if(e.current){const{left:n,top:a}=e.current.getBoundingClientRect(),s=t.pageX-n,i=t.pageY-a;window.requestAnimationFrame((function(){e.current&&(e.current.style.setProperty("--xPos","".concat(s,"px")),e.current.style.setProperty("--yPos","".concat(i,"px")))}))}},onMouseLeave:t,ref:e,children:ir.map(((e,t)=>(0,r.jsx)("div",{className:sr},t)))})},or="HexagonalMesh3_container__7cOnb",cr="HexagonalMesh3_item__JnppT",lr=new Array(800).fill(0),dr=()=>{const e=(0,a.useRef)(null);return(0,r.jsx)("div",{className:or,ref:e,children:lr.map(((e,t)=>(0,r.jsx)("div",{className:cr},t)))})};var mr=n(70792),ur=n(75846),gr=n(69877),hr=n(2266),pr=n(92136),fr=n(3766),xr=n(17122),Ar=n(80002),vr=n(68456),yr=n(90580),wr=n(1399),jr=n(46061),br=n(790),_r=n(87104),Dr=n(18406),Mr=n(76517),Nr=n(66480),Cr=n(53422),Er=n(51600),Br=n(46221),kr=n(16125),Sr=n(58676),Ir=n(80069),Tr=n(29566),Pr=n(73576),Fr=n(6516),Rr=n(82138),Gr=n(72226),Qr=n(91046),Lr=n(87851),Or=n(94131),zr=n(11033),Hr=n(4716),Ur=n(77584),Vr=n(43965),Wr=n(41546),Yr=n(86405),Jr=n(25167),qr=n(73142),Zr=n(86706),Kr=n(84032),Xr=n(44663),$r=n(77639),eo=n(99328),to=n(31942),no=n(13740),ao=n(41723),so=n(1372),io=n(43348),ro=n(95718),oo=n(43450),co=n(84145),lo=n(76371),mo=n(3674),uo=n(40562),go=n(51711),ho=n(83762),po=n(97189),fo=n(66893),xo=n(58937),Ao=n(56679),vo=n(26362),yo=n(24089),wo=n(3105),jo=n(24423),bo=n(67345),_o=n(82510),Do=n(138),Mo=n(13255),No=n(90888),Co=n(30074),Eo=n(82463),Bo=n(46802),ko=n(43774),So=n(7079),Io=n(48990),To=n(80088),Po=n(88668),Fo=n(44627),Ro=n(53578),Go=n(78602),Qo=n(6490);const Lo="IconScroll_container__pHJbN",Oo="IconScroll_row__ueyux",zo=new Array(40).fill(0),Ho=()=>{const e=()=>(0,r.jsxs)("div",{children:[(0,r.jsx)(mr.A,{}),(0,r.jsx)(ur.A,{}),(0,r.jsx)(gr.A,{}),(0,r.jsx)(hr.A,{}),(0,r.jsx)(pr.A,{}),(0,r.jsx)(fr.A,{}),(0,r.jsx)(xr.A,{}),(0,r.jsx)(Ar.A,{}),(0,r.jsx)(vr.A,{}),(0,r.jsx)(yr.A,{}),(0,r.jsx)(wr.A,{}),(0,r.jsx)(jr.A,{}),(0,r.jsx)(br.A,{}),(0,r.jsx)(_r.A,{}),(0,r.jsx)(Dr.A,{}),(0,r.jsx)(Mr.A,{}),(0,r.jsx)(Nr.A,{}),(0,r.jsx)(Cr.A,{}),(0,r.jsx)(Er.A,{}),(0,r.jsx)(Br.A,{}),(0,r.jsx)(kr.A,{}),(0,r.jsx)(Sr.A,{}),(0,r.jsx)(Ir.A,{}),(0,r.jsx)(Tr.A,{}),(0,r.jsx)(Pr.A,{}),(0,r.jsx)(Fr.A,{}),(0,r.jsx)(Rr.A,{}),(0,r.jsx)(Gr.A,{}),(0,r.jsx)(Qr.A,{}),(0,r.jsx)(Lr.A,{}),(0,r.jsx)(Or.A,{}),(0,r.jsx)(zr.A,{}),(0,r.jsx)(Hr.A,{}),(0,r.jsx)(Ur.A,{}),(0,r.jsx)(Vr.A,{}),(0,r.jsx)(Wr.A,{}),(0,r.jsx)(Yr.A,{}),(0,r.jsx)(Jr.A,{}),(0,r.jsx)(qr.A,{}),(0,r.jsx)(Zr.A,{}),(0,r.jsx)(Kr.A,{}),(0,r.jsx)(Xr.A,{}),(0,r.jsx)($r.A,{}),(0,r.jsx)(eo.A,{}),(0,r.jsx)(to.A,{}),(0,r.jsx)(no.A,{}),(0,r.jsx)(ao.A,{}),(0,r.jsx)(so.A,{}),(0,r.jsx)(io.A,{}),(0,r.jsx)(ro.A,{}),(0,r.jsx)(oo.A,{}),(0,r.jsx)(co.A,{}),(0,r.jsx)(lo.A,{}),(0,r.jsx)(mo.A,{}),(0,r.jsx)(uo.A,{}),(0,r.jsx)(go.A,{}),(0,r.jsx)(ho.A,{}),(0,r.jsx)(po.A,{}),(0,r.jsx)(fo.A,{}),(0,r.jsx)(H.A,{}),(0,r.jsx)(xo.A,{}),(0,r.jsx)(Ao.A,{}),(0,r.jsx)(vo.A,{}),(0,r.jsx)(yo.A,{}),(0,r.jsx)(wo.A,{}),(0,r.jsx)(jo.A,{}),(0,r.jsx)(bo.A,{}),(0,r.jsx)(_o.A,{}),(0,r.jsx)(Do.A,{}),(0,r.jsx)(x.A,{}),(0,r.jsx)(Mo.A,{}),(0,r.jsx)(No.A,{}),(0,r.jsx)(Co.A,{}),(0,r.jsx)(Eo.A,{}),(0,r.jsx)(Bo.A,{}),(0,r.jsx)(ko.A,{}),(0,r.jsx)(So.A,{}),(0,r.jsx)(Io.A,{}),(0,r.jsx)(To.A,{}),(0,r.jsx)(Po.A,{}),(0,r.jsx)(Fo.A,{}),(0,r.jsx)(Ro.A,{}),(0,r.jsx)(Go.A,{}),(0,r.jsx)(Qo.A,{})]});return(0,r.jsx)("div",{className:Lo,children:zo.map(((t,n)=>(0,r.jsxs)("div",{className:Oo,children:[e(),e()]},n)))})};var Uo=n(50329),Vo=n(68e3);const Wo="WipeSwitchover_container__zA+wD",Yo="WipeSwitchover_mask1__efwWk",Jo="WipeSwitchover_mask2__bTFbb",qo="WipeSwitchover_mask3__Gaobg",Zo="WipeSwitchover_mask4__ZERnA",Ko="WipeSwitchover_mask5__MkpDg",Xo="WipeSwitchover_page1__ex092",$o="WipeSwitchover_page2__S7sFb",ec="WipeSwitchover_page3__JtV7t",tc="WipeSwitchover_page4__9G6Y9",nc="WipeSwitchover_page5__uBeX2",ac="WipeSwitchover_prevBtn__6vW6Q",sc="WipeSwitchover_icon__Z3ryB",ic="WipeSwitchover_nextBtn__sVZkG",rc=.006,oc=[8,8,8,7,30],cc=[.72,.7,1,1,.32],lc=()=>{const e=(0,a.useRef)(null),t=(0,a.useRef)(null),n=(0,a.useRef)(null),[s,i]=(0,a.useState)(oc.length-1),o=(0,a.useRef)(oc.length-1),c=(0,a.useRef)(!1),l=(0,a.useRef)(0),d=(e,t)=>{if(e){c.current=!0;const{strokeDashoffset:n}=e.style;let a=0;if(n)if("0"===n)a=Number((oc[o.current]*rc).toFixed(2));else if(n.includes("px")){const s=Number(n.substring(0,n.length-2));if(t=oc[o.current])return c.current=!1,o.current=t,void i(t);a=Number((oc[o.current]*rc+s).toFixed(2))}else if(t>o.current){if(s>=2*oc[t])return e.style.strokeDashoffset="0px",c.current=!1,o.current=t,void i(t);a=Number((oc[t]*rc+s).toFixed(2))}}else{const s=Number(n);if(t=oc[o.current])return c.current=!1,o.current=t,void i(t);a=Number((oc[o.current]*rc+s).toFixed(2))}else if(t>o.current){if(s>=2*oc[t])return e.style.strokeDashoffset="0px",c.current=!1,o.current=t,void i(t);a=Number((oc[t]*rc+s).toFixed(2))}}else a=Number((oc[o.current]*rc).toFixed(2));e.style.strokeDashoffset="".concat(a,"px"),l.current=window.requestAnimationFrame((()=>d(e,t)))}},m=()=>{if(e.current&&n.current){const{clientWidth:a}=e.current,s=Math.ceil(600+.1*(a-1140));Array.prototype.forEach.call(n.current.children,((e,t)=>{let n=window.getComputedStyle(e.children[0],null).getPropertyValue("transform");if(n&&n.startsWith("matrix")){const e=n.split(", ");e[0]="".concat(e[0].substring(0,7)).concat(Math.ceil(cc[t]*a)),n=e.join(", ")}e.children[0].style.transform=n})),t.current&&(e.current.style.height="".concat(s,"px"),Array.prototype.forEach.call(t.current.children,(e=>{if("g"===e.tagName){e.style.height="".concat(s,"px"),e.children[0].style.height="".concat(s,"px"),e.children[0].style.transform="".concat(s,"px");const t=Math.floor(a/2-240-40),n=Math.floor((s-340)/2);e.children[1].style.transform="translate(".concat(t,"px, ").concat(n,"px)")}})))}};return(0,a.useEffect)((()=>(m(),()=>{l.current&&cancelAnimationFrame(l.current)})),[]),(0,a.useEffect)((()=>(window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m)})),[]),(0,r.jsxs)("div",{className:Wo,ref:e,children:[(0,r.jsx)(Ea,{intlTitle:"page.htmlVision.interactiveDesign.wipeTheEffect"}),(0,r.jsxs)("svg",{ref:t,children:[(0,r.jsxs)("defs",{ref:n,children:[(0,r.jsx)("mask",{id:"mask1",className:Yo,children:(0,r.jsx)("path",{d:"M0.712-0.263\r c0,0-0.009,0.466-0.001,0.593c0.002,0.033,0.013,0.098-0.149,0.098c-0.157,0-0.16-0.049-0.161-0.08\r C0.398,0.245,0.395,0.04,0.399-0.063c0.001-0.035,0.009-0.105-0.162-0.102C0.088-0.163,0.091-0.093,0.09-0.059\r C0.09,0.04,0.08,0.238,0.09,0.337C0.093,0.368,0.107,0.42-0.058,0.42c-0.162,0-0.136-0.05-0.139-0.079\r C-0.21,0.234-0.207,0.033-0.2-0.069c0.002-0.035,0.015-0.103-0.16-0.102C-0.521-0.171-0.511-0.1-0.509-0.066\r C-0.502,0.046-0.51,0.379-0.51,0.379"})}),(0,r.jsx)("mask",{id:"mask2",className:Jo,children:(0,r.jsx)("path",{d:"M-0.305,0.045\r c0,0,1.262-0.007,1.36-0.007c0.231,0,0.229,0.224-0.001,0.224c-0.14,0.001-0.929-0.002-1.042,0c-0.174,0.003-0.17,0.224-0.021,0.23\r c0.288,0.011,0.87-0.005,1.055-0.011C1.223,0.475,1.228,0.71,1.071,0.71C0.779,0.723,0.09,0.705-0.038,0.712\r s-0.148,0.223,0.031,0.234s0.233,0.011,0.233,0.011"})}),(0,r.jsx)("mask",{id:"mask3",className:qo,children:(0,r.jsx)("path",{d:"M1.15844,0.36167L1.08063,0.40111C0.95906,0.528330.94358,0.771430.87938,0.95278C0.81605,1.131660.65918,1.069850.71313,0.88778C0.75751,0.737960.89903,0.356360.93094,0.16944C0.95119,0.050820.84113,-0.056650.77563,0.12056C0.70882,0.301290.46792,1.203240.32092,0.97256C0.23658,0.840220.60869,0.261270.58134,0.05953C0.56686,-0.047280.49508,-0.06670.43749,0.0378C0.32377,0.244160.27639,0.451050.17792,0.71504C0.07944,0.979030.00295,0.842150.01094,0.75333C0.03758,0.457110.31406,0.1150.23375,-0.01111C0.15331,-0.137420.09392,0.21887-0.0325,0.23722"})}),(0,r.jsx)("mask",{id:"mask4",className:Zo,children:(0,r.jsx)("path",{d:"M0.559-0.226L0.535-0.16\r c-0.196,0.171,0.09,0.27-0.022,0.436C0.49,0.31,0.384,0.312,0.344,0.202c-0.035-0.097-0.033-0.195,0.014-0.26\r c0.105-0.143,0.209-0.079,0.264,0.003c0.061,0.09,0.066,0.192,0.047,0.265c-0.093,0.35-0.537,0.162-0.49-0.159\r c0.019-0.129,0.095-0.202,0.196-0.228c0.13-0.034,0.289-0.028,0.373,0.063c0.083,0.09,0.094,0.349-0.014,0.466\r C0.64,0.452,0.178,0.502,0.077,0.256C-0.05-0.055,0.18-0.217,0.373-0.227c0.224-0.012,0.463-0.017,0.535,0.128\r C0.993,0.072,0.978,0.29,0.813,0.427"})}),(0,r.jsx)("mask",{id:"mask5",className:Ko,children:(0,r.jsx)("path",{d:"M1.854-1.746L1.537-1.042\r c0.01,0.123-1.79,0.327-2.269,0.467C-1.433-0.37-1.427,0.309-0.835,0.209c0.464-0.078,3.077-0.572,3.921-0.742\r C3.714-0.66,3.81-0.043,3.364,0.102C2.423,0.406-0.153,0.795-1.188,1.026c-0.494,0.11-0.409,0.646,0.107,0.629\r c0.76-0.025,3.983-0.752,4.594-0.793c0.399-0.045,0.967,0.403-0.091,0.66C3.028,1.685,1,2.067,0.612,2.239\r C0.225,2.411,0.27,2.982,1.007,2.833l2.979-0.615"})})]}),(0,r.jsxs)("g",{className:Xo,mask:"url(#mask1)",children:[(0,r.jsx)("rect",{fill:"#e3e4e5"}),(0,r.jsx)("image",{xlinkHref:Ns}),(0,r.jsx)("text",{fill:"#757576",children:"Book5"})]}),(0,r.jsxs)("g",{className:$o,mask:"url(#mask2)",children:[(0,r.jsx)("rect",{fill:"#7e7f83"}),(0,r.jsx)("image",{xlinkHref:Cs}),(0,r.jsx)("text",{fill:"#dedede",children:"Book4"})]}),(0,r.jsxs)("g",{className:ec,mask:"url(#mask3)",children:[(0,r.jsx)("rect",{fill:"#f8d3cc"}),(0,r.jsx)("image",{xlinkHref:Es}),(0,r.jsx)("text",{fill:"#b0304e",children:"Book3"})]}),(0,r.jsxs)("g",{className:tc,mask:"url(#mask4)",children:[(0,r.jsx)("rect",{fill:"#d2e4ce"}),(0,r.jsx)("image",{xlinkHref:Bs}),(0,r.jsx)("text",{fill:"#04756e",children:"Book2"})]}),(0,r.jsxs)("g",{className:nc,mask:"url(#mask5)",children:[(0,r.jsx)("rect",{fill:"#cad9e5"}),(0,r.jsx)("image",{xlinkHref:ks}),(0,r.jsx)("text",{fill:"#142864",children:"Book1"})]})]}),(0,r.jsx)("div",{className:ac,style:s>=oc.length-1?{pointerEvents:"none"}:{},onClick:()=>{if(!c.current&&n.current){const e=s+1,t=n.current.children[e].children[0];d(t,e)}},children:(0,r.jsx)("div",{className:sc,children:(0,r.jsx)(Uo.A,{})})}),(0,r.jsx)("div",{className:ic,style:s<=0?{pointerEvents:"none"}:{},onClick:()=>{if(!c.current&&n.current){const e=s-1,t=n.current.children[s].children[0];d(t,e)}},children:(0,r.jsx)("div",{className:sc,children:(0,r.jsx)(Vo.A,{})})})]})},dc="AutoCompletePunctuation_container__EjYmN",mc="AutoCompletePunctuation_content__PIXsh",uc={"'":"'",'"':'"',"(":")","（":"）","【":"】","[":"]","《":"》","「":"」","『":"』","{":"}","“":"”","‘":"’"},gc=()=>{const e=(0,a.useRef)(null),t=(0,a.useRef)(null),n=(0,a.useCallback)((e=>{const t=uc[e.data];if(t&&("insertText"===e.inputType||"compositionend"===e.type))if(["TEXTAREA","INPUT"].includes(e.target.tagName))e.target.setRangeText(t);else{const e=document.createTextNode(t),n=document.getSelection();if(n){const t=n.getRangeAt(0);t.insertNode(e),t.setEndBefore(e),t.commonAncestorContainer.normalize()}}}),[]);return(0,a.useEffect)((()=>(e.current&&(e.current.addEventListener("input",n),e.current.addEventListener("compositionend",n)),t.current&&(t.current.addEventListener("input",n),t.current.addEventListener("compositionend",n)),()=>{e.current&&(e.current.removeEventListener("input",n),e.current.removeEventListener("compositionend",n)),t.current&&(t.current.removeEventListener("input",n),t.current.removeEventListener("compositionend",n))})),[]),(0,r.jsxs)("div",{className:dc,children:[(0,r.jsx)(Ea,{intlTitle:"page.htmlVision.interactiveDesign.autoCompletePunctuation"}),(0,r.jsxs)("div",{className:mc,children:[(0,r.jsx)("textarea",{rows:5,placeholder:"maxLength is 100",maxLength:100,ref:e}),(0,r.jsx)("div",{contentEditable:"true",ref:t})]})]})},hc="StackedImages_container__Hnz74",pc="StackedImages_content__bZLt4",fc=[xt,yt,wt,jt],xc=()=>(0,r.jsxs)("div",{className:hc,children:[(0,r.jsx)(Ea,{intlTitle:"page.htmlVision.interactiveDesign.stackedImages"}),(0,r.jsx)("div",{className:pc,children:fc.map(((e,t)=>(0,r.jsx)("img",{src:e,alt:""},t)))})]});var Ac=n(6531);const vc="AutoTagNum_container__QT5I1",yc="AutoTagNum_content__vOcjX",wc="AutoTagNum_box__72EkE",jc="AutoTagNum_tags__JR1eT",bc="AutoTagNum_tag__K9uBF",_c="AutoTagNum_slider__W5bpu",Dc=()=>{const[e,t]=(0,a.useState)(500);return(0,r.jsxs)("div",{className:vc,children:[(0,r.jsx)(Ea,{intlTitle:"page.htmlVision.interactiveDesign.autoTagNum"}),(0,r.jsxs)("div",{className:yc,children:[(0,r.jsx)("div",{className:wc,style:{width:"".concat(e,"px")},children:(0,r.jsxs)("div",{className:jc,children:[(0,r.jsx)("span",{className:bc,children:"HTML"}),(0,r.jsx)("span",{className:bc,children:"CSS"}),(0,r.jsx)("span",{className:bc,children:"JAVASCRIPT"}),(0,r.jsx)("span",{className:bc,children:"REACT"}),(0,r.jsx)("span",{className:bc,children:"VUE"}),(0,r.jsx)("span",{className:bc,children:"CANVAS"}),(0,r.jsx)("span",{className:bc,children:"THREEJS"}),(0,r.jsx)("span",{className:bc,children:"NODE"}),(0,r.jsx)("span",{className:bc,children:"NESTJS"})]})}),(0,r.jsx)(Ac.A,{className:_c,min:200,max:1e3,step:10,value:e,onChange:e=>{t(e)}})]})]})},Mc="InteractiveDesign_container__oK3No",Nc="InteractiveDesign_box__+Trza",Cc=[{element:(0,r.jsx)(Ra,{})},{element:(0,r.jsx)(es,{})},{element:(0,r.jsx)(ds,{})},{element:(0,r.jsx)(ys,{})},{element:(0,r.jsx)(Ms,{})},{element:(0,r.jsx)(Zs,{})},{element:(0,r.jsx)(si,{})},{element:(0,r.jsx)(Ii,{})},{element:(0,r.jsx)(Fi,{})},{element:(0,r.jsx)(Yi,{})},{element:(0,r.jsx)(Xi,{})},{element:(0,r.jsx)(nr,{})},{element:(0,r.jsx)(rr,{})},{element:(0,r.jsx)(dr,{})},{element:(0,r.jsx)(Ho,{})},{element:(0,r.jsx)(lc,{})},{element:(0,r.jsx)(gc,{})},{element:(0,r.jsx)(xc,{})},{element:(0,r.jsx)(Dc,{})}],Ec=()=>{const{setScrollTop:e}=d();return(0,a.useEffect)((()=>{e(0)}),[]),(0,r.jsx)("div",{className:Mc,children:Cc.map(((e,t)=>(0,r.jsx)("div",{className:Nc,children:e.element},t)))})},Bc={container:"BackgroundEffect_container__u+IDp",box:"BackgroundEffect_box__k+mFh",bg1:"BackgroundEffect_bg1__klRoc",bg2:"BackgroundEffect_bg2__kPZ6M",bg3:"BackgroundEffect_bg3__82UV-",bg4:"BackgroundEffect_bg4__z430k",bg5:"BackgroundEffect_bg5__YkL6Y",bg6:"BackgroundEffect_bg6__zUQqR",bg7:"BackgroundEffect_bg7__thgM1",bg8:"BackgroundEffect_bg8__YdGMF",bg9:"BackgroundEffect_bg9__19R3E",bg10:"BackgroundEffect_bg10__htocf",bg11:"BackgroundEffect_bg11__CcLwl",bg12:"BackgroundEffect_bg12__eJxJM",bg13:"BackgroundEffect_bg13__mpoDJ",bg14:"BackgroundEffect_bg14__xnExu",bg15:"BackgroundEffect_bg15__F3Wrj",bg16:"BackgroundEffect_bg16__OBNeN",bg17:"BackgroundEffect_bg17__pb8bY",bg18:"BackgroundEffect_bg18__UKapy",bg19:"BackgroundEffect_bg19__obRK1",bg20:"BackgroundEffect_bg20__mnQic",bg21:"BackgroundEffect_bg21__qF-7f",bg22:"BackgroundEffect_bg22__Fcy+J",bg23:"BackgroundEffect_bg23__HJ4I5",bg24:"BackgroundEffect_bg24__qQdYv",bg25:"BackgroundEffect_bg25__h4HDo",bg26:"BackgroundEffect_bg26__PsQZC",bg27:"BackgroundEffect_bg27__U89Ls",bg28:"BackgroundEffect_bg28__2fShs",bg29:"BackgroundEffect_bg29__hiev7"},{GridBox:kc}=fe,Sc=new Array(29).fill("1"),Ic=()=>{const{setScrollTop:e}=d();return(0,a.useEffect)((()=>{e(0)}),[]),(0,r.jsx)("div",{className:Bc.container,children:(0,r.jsx)(fe,{differentScreenCols:[4,3,3,2,2],rowSpace:8,colSpace:8,children:Sc.map(((e,t)=>(0,r.jsx)(kc,{children:(0,r.jsx)("div",{className:Bc.box,children:(0,r.jsx)("div",{className:Bc["bg".concat(t+1)]})})},t)))})})},Tc="LineCombination_container__toPmq",Pc="LineCombination_blackBox__P5fH8",Fc="LineCombination_blackBoxPoint__87aDR",Rc="LineCombination_whiteBox__-MGXi",Gc="LineCombination_whiteBoxPoint__Tz8Uh",Qc="LineCombination_name__E7QvH",Lc="LineCombination_value__5BYd0";let Oc=0,zc=0;const Hc=()=>{const e=(0,a.useRef)(null),t=()=>{if(e.current){const i=z.findDOMNode(e.current);if(i){const{length:e}=i.children,r=i.children[zc],o=null==r?void 0:r.children[0],{clientWidth:c,clientHeight:l}=r,{style:d}=o;if(zc%2==0){let t=8;d.left&&(t=parseFloat(d.left));let s=t+4;if(s>=c-8-8)if(o.style.visibility="hidden",zc>=e-1){var n;zc=0;const e=null===(n=i.children[zc])||void 0===n?void 0:n.firstChild;e.style.left="".concat(8,"px"),e.style.visibility="visible"}else{var a;zc+=1;const e=null===(a=i.children[zc])||void 0===a?void 0:a.firstChild;e.style.left="-1px",e.style.visibility="visible"}else o.style.left="".concat(s,"px"),"visible"!==o.style.visibility&&(o.style.visibility="visible")}else{let e=-1,t=8;if(d.left&&(e=parseFloat(d.left)),d.bottom&&(t=parseFloat(d.bottom)),e>=c){let e=t-4;if(e<=8){var s;o.style.visibility="hidden",zc+=1;const e=null===(s=i.children[zc])||void 0===s?void 0:s.firstChild;e.style.left="".concat(8,"px"),e.style.visibility="visible"}else o.style.bottom="".concat(e,"px")}else if(e<=-1){let e=t+4;e>l-8-8&&(e=l,o.style.width="".concat(8,"px"),o.style.height="1px",o.style.left="".concat(8,"px")),o.style.bottom="".concat(e,"px")}else{let t=e+4;t>c-8-8&&(t=c,o.style.width="1px",o.style.height="".concat(8,"px"),o.style.bottom="".concat(l-8-8)),o.style.left="".concat(t,"px")}}Oc=requestAnimationFrame(t)}}};return(0,a.useEffect)((()=>(e.current&&(Oc=requestAnimationFrame(t)),()=>{Oc&&cancelAnimationFrame(Oc)})),[]),(0,r.jsxs)("div",{className:Tc,ref:e,children:[(0,r.jsx)("div",{className:Pc,children:(0,r.jsx)("div",{className:Fc})}),(0,r.jsxs)("div",{className:Rc,children:[(0,r.jsx)("div",{className:Gc}),(0,r.jsx)("p",{className:Qc,children:"Price"}),(0,r.jsx)("p",{className:Lc,children:"$656"})]}),(0,r.jsx)("div",{className:Pc,children:(0,r.jsx)("div",{className:Fc})}),(0,r.jsxs)("div",{className:Rc,children:[(0,r.jsx)("div",{className:Gc}),(0,r.jsx)("p",{className:Qc,children:"Quantity"}),(0,r.jsx)("p",{className:Lc,children:"84351"})]}),(0,r.jsx)("div",{className:Pc,children:(0,r.jsx)("div",{className:Fc})}),(0,r.jsxs)("div",{className:Rc,children:[(0,r.jsx)("div",{className:Gc}),(0,r.jsx)("p",{className:Qc,children:"Number of partners"}),(0,r.jsx)("p",{className:Lc,children:"64"})]}),(0,r.jsx)("div",{className:Pc,children:(0,r.jsx)("div",{className:Fc})}),(0,r.jsxs)("div",{className:Rc,children:[(0,r.jsx)("div",{className:Gc}),(0,r.jsx)("p",{className:Qc,children:"Date of establishment"}),(0,r.jsx)("p",{className:Lc,children:"2008-10-01"})]}),(0,r.jsx)("div",{className:Pc,children:(0,r.jsx)("div",{className:Fc})}),(0,r.jsxs)("div",{className:Rc,children:[(0,r.jsx)("div",{className:Gc}),(0,r.jsx)("p",{className:Qc,children:"Transaction Analyzed"}),(0,r.jsx)("p",{className:Lc,children:"70Bn"})]}),(0,r.jsx)("div",{className:Pc,children:(0,r.jsx)("div",{className:Fc})})]})};var Uc=n(47523),Vc=n(36802),Wc=n(89740),Yc=n(6754),Jc=n(95147),qc=n(42953),Zc=n(89027),Kc=n(52629),Xc=n(14103),$c=n(83853),el=n(29248),tl=n(90911),nl=n(17836),al=n(68388),sl=n(59445),il=n(47826),rl=n(78854),ol=n(92446),cl=n(75965);const ll=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;if(0===e)return"0 Bytes";const n=t<0?0:t,a=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,a)).toFixed(n))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][a]},dl=(e,t)=>{if(!e)return void t(null);const{type:n}=e,a=n.split("/");if("image"!==a[0])return void t(null);let s=a[1].toUpperCase();var i=new FileReader;i.onload=function(n){const a=n.target.result,i=ml(a);i&&(s=i);const r=new Blob([a]);ul(r,(function(n){if(n){const a=new Image;a.onload=function(){const i=a.width,o=a.height,c=hl(n,i,o);if(c){const a={name:e.name,fileType:s,size:e.size,width:i,height:o,imgUrl:n,imageData:c,blob:r};t(a)}else t(null)},a.onerror=function(){t(null)},a.src=n}else t(null)}))},i.readAsArrayBuffer(e)},ml=e=>{let t="";if(e){const n=new DataView(e).getUint32(0,!1);switch(Number(n).toString(16).toUpperCase()){case"FFD8FFDB":t="JPG";break;case"FFD8FFE0":case"FFD8FFE1":case"FFD8FFE2":case"FFD8FFE3":t="JPEG";break;case"89504E47":t="PNG";break;case"47494638":t="GIF";break;case"49492A00":t="TIF";break;case"52494646":t="WEBP";break;case"25504446":case"AC9EBD8F":t="PDF";break;case"3C3F786D":t="XML";break;case"68746D6C":t="HTML";break;case"4D546864":t="MID";break;case"38425053":t="PSD";break;case"504B0304":t="ZIP";break;case"52617221":t="RAR";break;case"57415645":t="WAV";break;case"41564920":t="AVI";break;case"6d6f6f76":t="MOV"}}return t},ul=(e,t)=>{if(!e)return void t(null);const n=new FileReader;n.readAsDataURL(e),n.onload=function(e){e.target?t(e.target.result):t(null)}},gl=e=>{if(!e)return null;const{width:t,height:n}=e,a=document.createElement("canvas"),s=a.getContext("2d");a.width=t,a.height=n,s.putImageData(e,0,0,0,0,t,n);return a.toDataURL("image/png")},hl=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;if(e&&t&&n){const a=new Image;a.src=e;const s=document.createElement("canvas"),i=s.getContext("2d");s.width=t,s.height=n,i.drawImage(a,0,0,t,n);return i.getImageData(0,0,t,n)}return null},pl=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;if(e&&t&&n){const a=document.createElement("canvas"),s=a.getContext("2d");a.width=t,a.height=n,s.drawImage(e,0,0,t,n);return s.getImageData(0,0,t,n)}return null},fl=(e,t)=>{if(!e)return;var n=document.createElement("a");n.style.visibility="hidden",document.body.appendChild(n),n.download=t;const a=window.URL.createObjectURL(e);n.href=a,n.click(),document.body.removeChild(n),window.URL.revokeObjectURL(a)},xl=e=>{const t=document.getElementById("attach_image");if(t){const n=t.height/t.width;0===e?(t.style.width="".concat(t.clientWidth-50,"px"),t.style.height="".concat(t.clientHeight-50*n,"px")):(t.style.width="".concat(t.clientWidth+50,"px"),t.style.height="".concat(t.clientHeight+50*n,"px"))}},Al=()=>{const e=document.getElementById("attach_image");if(e){let t=!1,n=null,a=null;e.onmousewheel=e=>{e.stopPropagation(),e.preventDefault();const t=e.wheelDelta||e.detail;xl(t>0?1:0)},e.onmousedown=e=>{e.stopPropagation(),e.preventDefault(),t=!0,n=e.clientX,a=e.clientY},e.onmouseup=e=>{e.stopPropagation(),e.preventDefault(),t=!1},e.onmousemove=s=>{if(s.stopPropagation(),s.preventDefault(),t){const t=s.clientX,i=s.clientY,r=t-n,o=i-a,c=document.getElementById("attach_imgDiv");if(c){let s=parseFloat(e.style.left)+r,l=parseFloat(e.style.top)+o;const d=-.75*parseFloat(e.style.width),m=parseFloat(c.style.width)-.25*parseFloat(e.style.width),u=-.75*parseFloat(e.style.height),g=parseFloat(c.style.height)-.25*parseFloat(e.style.height);sm&&(s=m),lg&&(l=g),e.style.left="".concat(s,"px"),e.style.top="".concat(l,"px"),n=t,a=i}}}}},vl="FileView_container__SyQN4",yl="FileView_tableLy__kaeXq",wl="FileView_viewContainer__n0Kg6",jl="FileView_progress__GtmqC",bl="FileView_imgDiv__ErTpj",_l="FileView_downLoadTip__FIvRY",Dl="FileView_emptyTip__OW2E4",Ml="FileView_arrowIcon__2JeuW",Nl="FileView_leftArrow__IeXsk",Cl="FileView_rightArrow__HPiMt",El="FileView_imgInfo__Z2qPj",Bl="FileView_imgOperate__h-UFp",kl="FileView_iconDiv__GUb18",Sl="FileView_left__Erhr-",Il="FileView_xiangXia__cm3bW",Tl="FileView_xiangShang__2ATuW",Pl="FileView_fileContainer__rbVnb",Fl="FileView_draggerBox__GNF2g",Rl="FileView_draggerTextBoxHover__6Z8I-",Gl="FileView_draggerTextBox__2soxW",Ql="FileView_firstLine__5trSy",Ll="FileView_linkBtn__n-sJb",Ol="FileView_secondLine__9YFcw",zl="FileView_moreOperate__e+uIL",Hl="FileView_poperSpan__8roYR",{Option:Ul}=Uc.A,{Dragger:Vl}=Vc.A,Wl={isProgress:!1,percent:0,progressTimer:null},Yl={imgSrc:"",imgScale:0,userName:"",fileName:"",updateTime:"",imgOrigin:{width:0,height:0},imgRotate:0},Jl=e=>{const{id:t,disabled:n=!1,style:s={}}=e,[i,o]=(0,a.useState)(Wl),c=(0,a.useRef)(Wl),[l,d]=(0,a.useState)(!1),[m,u]=(0,a.useState)((0,cl.A)(Yl)),g=(0,a.useRef)((0,cl.A)(Yl)),[h,p]=(0,a.useState)(!1),[x,A]=(0,a.useState)([]),v=(0,a.useRef)([]),[y,w]=(0,a.useState)(null),j=(0,a.useRef)(null),b=(0,a.useRef)(null),_=e=>{b.current=j.current,j.current=e,w(e);let t=(0,cl.A)(Yl);if(e){const n=document.getElementById("attach_image");n&&(n.style.webkitTransform="rotate(0deg)",n.style.top="0px",n.style.left="0px",n.style.width="unset",n.style.height="unset",n.removeAttribute("width"),n.removeAttribute("height"));const a=e.value.split("?fileId");t=a.length>1?{...t,imgSrc:"data:image/jpg;base64,".concat(a[1])}:{...t,imgSrc:"data:image/jpg;base64,".concat(e.value)}}g.current=t,u(t)},D=e=>{if(e){const t=e.substring(e.lastIndexOf(".")+1);if(t)return t.toLowerCase()}return""};(0,a.useEffect)((()=>{c.current=Wl,o(Wl),p(!1),d(!1),v.current=[],A([]),_(null),t&&(async e=>{})()}),[t]),(0,a.useEffect)((()=>{!b.current&&y&&Al()}),[y]);const M=e=>{const t=document.getElementsByClassName("ant-upload-drag");t&&t.length>0&&t[0].classList.remove(Rl)},N=e=>{let t="";return t="left"===e?v.current[0].fileId:v.current[v.current.length-1].fileId,j.current&&t===j.current.fileId?"#d8d8d8":"#666666"},C=e=>{const t=document.getElementById("attach_image");switch(e){case 0:t&&g.current&&(t.style.width="700px",t.style.height="".concat(700*g.current.imgScale,"px"),t.style.top="0px",t.style.left="0px");break;case 1:t&&g.current&&(t.style.width="".concat(t.clientWidth+50,"px"),t.style.height="".concat(t.clientHeight+50*g.current.imgScale,"px"));break;case 2:t&&g.current&&(t.style.width="".concat(t.clientWidth-50,"px"),t.style.height="".concat(t.clientHeight-50*g.current.imgScale,"px"));break;case 3:t&&g.current&&(t.style.width="".concat(g.current.imgOrigin.width,"px"),t.style.height="".concat(g.current.imgOrigin.height,"px"),t.style.top="0px",t.style.left="0px");break;case 4:if(t&&g.current){const e={...g.current,imgRotate:g.current.imgRotate+1};g.current=e,u(e),t.style.webkitTransform="rotate(".concat(-90*g.current.imgRotate,"deg)")}break;case 5:(async e=>{let t=e||y;t?n?Wc.Ay.warning("目前状态不允许删除"):f.A.confirm({title:"删除文件提示",content:"确认删除【".concat(t.fileName,"】文件？"),icon:(0,r.jsx)(Kc.A,{}),centered:!0,onOk:async()=>{Wc.Ay.warning("删除中..."),setTimeout((()=>{const e={code:200,data:{},msg:""};if(e&&200===e.code){Wc.Ay.success("删除文件成功");const e=v.current.filter((e=>e.fileId!==t.fileId));v.current=e,A(e),b.current=j.current,e.length>0?_(e[0]):_(null)}else Wc.Ay.error(e.msg)}),2e3)}}):Wc.Ay.warning("无文件可进行删除")})();break;case 6:(async()=>{y&&(Wc.Ay.warning("下载中..."),setTimeout((()=>{Wc.Ay.success("下载成功")}),2e3))})();break;case 7:for(let e=0,t=v.current.length;e0){_(v.current[e-1]);break}}}};return(0,r.jsx)("div",{className:vl,style:s,children:(0,r.jsx)("div",{className:yl,children:(0,r.jsxs)("div",{style:{width:"860px"},children:[(0,r.jsx)("div",{style:{width:"100%",height:"87vh",minHeight:"700px",backgroundImage:"linear-gradient(135deg, #224141, #162a2a)"},children:(0,r.jsxs)("div",{className:wl,children:[i.isProgress&&(0,r.jsxs)("div",{className:jl,children:[(0,r.jsx)(Yc.A,{style:{width:"400px"},percent:i.percent,showInfo:!1}),(0,r.jsxs)("span",{style:{marginTop:"16px"},children:["上传中，请稍候...",i.percent>100?100:i.percent,"%"]})]}),(0,r.jsxs)("div",{id:"attach_imgDiv",className:bl,children:[y&&(0,r.jsxs)("div",{children:[["jpg","jpeg","png","gif"].includes((null==y?void 0:y.fileType)||"")&&(0,r.jsx)("img",{id:"attach_image",src:null==m?void 0:m.imgSrc,style:{position:"absolute",top:0,left:0},onLoad:()=>{const e=document.getElementById("attach_image");if(e){const t={...g.current,imgScale:e.clientHeight/e.clientWidth,imgOrigin:{width:e.clientWidth,height:e.clientHeight}};g.current=t,u(t),e.style.width="700px",e.style.height="".concat(700*t.imgScale,"px")}},alt:""}),["pdf","doc","cocx","xls","xlsx","rar","zip","7z","wim","tar"].includes((null==y?void 0:y.fileType)||"")&&(0,r.jsxs)("div",{className:_l,children:["如果想要浏览该文件，您可以",(0,r.jsx)($.Ay,{type:"link",onClick:()=>C(6),children:"点击下载"})]})]}),!y&&!i.isProgress&&(0,r.jsxs)("div",{className:Dl,children:[(0,r.jsx)("div",{style:{width:"100%",color:"#333333"},children:"请上传文件"}),(0,r.jsxs)("div",{style:{width:"100%",color:"#ababab",marginTop:"10px",lineHeight:"20px"},children:["不超过30M,",(0,r.jsx)("br",{}),"支持jpg,jpeg,png,gif格式的文件"]})]}),y&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{className:"".concat(Ml," ").concat(Nl),style:{backgroundColor:N("left")},onClick:()=>C(8),children:(0,r.jsx)(Uo.A,{})}),(0,r.jsx)("span",{className:"".concat(Ml," ").concat(Cl),style:{backgroundColor:N("right")},onClick:()=>C(7),children:(0,r.jsx)(Vo.A,{})})]})]}),l&&(0,r.jsx)("div",{className:El,children:(0,r.jsxs)(Jc.A,{children:[(0,r.jsx)(qc.A,{span:24,children:(0,r.jsxs)("span",{style:{fontSize:"14px"},children:["文件名：",null==y?void 0:y.fileName]})}),(0,r.jsx)(qc.A,{span:16,children:(0,r.jsxs)("span",{style:{fontSize:"14px"},children:["上传者：",null==y?void 0:y.userName]})}),(0,r.jsx)(qc.A,{span:8,children:(0,r.jsxs)("span",{style:{fontSize:"14px"},children:["上传时间：",null==y?void 0:y.upTime]})})]})}),y&&(0,r.jsxs)("div",{className:Bl,children:[(0,r.jsxs)("div",{className:Sl,children:[(0,r.jsx)(Uc.A,{placeholder:"请选择",style:{width:"300px"},size:"small",value:y.fileId,loading:h,onChange:e=>{let t=null;for(let n=0,a=v.current.length;n(0,r.jsx)(Ul,{value:e.fileId,children:"".concat(t+1,"/").concat(x.length,"：").concat(e.fileName)},e.fileId)))}),(0,r.jsx)("span",{onClick:()=>C(7),className:"".concat(kl," ").concat(Il),children:(0,r.jsx)(Xc.A,{})}),(0,r.jsx)("span",{onClick:()=>C(8),className:"".concat(kl," ").concat(Tl),children:(0,r.jsx)($c.A,{})})]}),(0,r.jsxs)("div",{style:{display:"flex",justifyContent:"flex-end"},children:[(0,r.jsx)("span",{className:kl,onClick:()=>d(!l),children:(0,r.jsx)(el.A,{})}),(0,r.jsx)("span",{className:kl,onClick:()=>C(0),children:(0,r.jsx)(tl.A,{})}),(0,r.jsx)("span",{className:kl,onClick:()=>C(3),children:(0,r.jsx)(nl.A,{})}),(0,r.jsx)("span",{className:kl,onClick:()=>C(4),children:(0,r.jsx)(al.A,{})}),(0,r.jsx)("span",{className:kl,onClick:()=>C(1),children:(0,r.jsx)(sl.A,{})}),(0,r.jsx)("span",{className:kl,onClick:()=>C(2),children:(0,r.jsx)(il.A,{})}),(0,r.jsx)(Zc.A,{style:{width:"80px"},content:(0,r.jsxs)("div",{className:zl,children:[(0,r.jsx)("span",{className:Hl,onClick:()=>C(6),children:"下载文件"}),(0,r.jsx)("span",{className:Hl,onClick:()=>C(5),children:"删除文件"})]}),children:(0,r.jsx)("span",{className:kl,children:(0,r.jsx)(rl.A,{})})})]})]})]})}),(0,r.jsx)("div",{className:Pl,children:(0,r.jsx)(Vl,{className:Fl,multiple:!0,showUploadList:!1,disabled:n,beforeUpload:e=>{if(n)return Wc.Ay.warning("目前状态不允许修改"),!1;const t=D(e.name);return["jpg","jpeg","png","gif","pdf","doc","cocx","xls","xlsx","rar","zip","7z","wim","tar"].includes(t)?e.size>31457280?(Wc.Ay.warning("单个文件大小不能超过30M"),!1):void 0:(Wc.Ay.warning("请上传符合格式要求的文件"),!1)},customRequest:()=>{},onDrop:e=>e.preventDefault(),onChange:async e=>{if(e.event&&e.event.preventDefault(),n)return;if(c.current.isProgress)return void Wc.Ay.warning("有文件正在上传，请稍侯");const t={...Wl,isProgress:!0};t.progressTimer=window.setInterval((()=>{if(c.current.percent<90){const e={...c.current,percent:c.current.percent+Math.floor(20*Math.random())};c.current=e,o(e)}}),800),c.current=t,o(t);try{setTimeout((()=>{c.current.progressTimer&&window.clearInterval(c.current.progressTimer);const t={...Wl};c.current=t,o(t);const n={code:200,data:{fileId:Number(Math.random().toString().substring(3,8)+Date.now()).toString(36),fileName:e.file.name,createTime:(new Date).getTime(),uploadUserName:"userName",uploadUser:"000001"},msg:""};n&&200===n.code?((e,t)=>{if(!e)return;const n=D(e.fileName);if(["jpg","jpeg","png","gif"].includes(n)){if(t){const a=new FileReader;a.readAsArrayBuffer(t),a.onload=a=>{var s;const i=window.btoa(new Uint8Array(null===(s=a.target)||void 0===s?void 0:s.result).reduce(((e,t)=>e+String.fromCharCode(t)),"")),r={...e};r.fileId=e.fileId,r.fileName=e.fileName,r.fileType=n,r.value=i,r.size=ll(t.size),r.upTime=(0,ga.A)(e.createTime,"yyyy-MM-dd HH:mm:ss"),r.userNmae="".concat(e.uploadUserName,"/").concat(e.uploadUser);const o=[...v.current,r];v.current=o,A(o),_(r)}}}else{const a={...e};a.fileId=e.fileId,a.fileName=e.fileName,a.fileType=n,a.value="",a.size=ll(t.size),a.upTime=(0,ga.A)(e.createTime,"yyyy-MM-dd HH:mm:ss"),a.userNmae="".concat(e.uploadUserName,"/").concat(e.uploadUser);const s=[...v.current,a];v.current=s,A(s),_(a)}})(n.data,e.file.originFileObj):Wc.Ay.error("上传".concat(e.file.name,"失败"))}),2e3)}catch(t){c.current.progressTimer&&window.clearInterval(c.current.progressTimer);const n={...Wl};c.current=n,o(n),Wc.Ay.error("上传".concat(e.file.name,"失败"))}},children:(0,r.jsxs)("div",{className:Gl,onDragOver:e=>{const t=document.getElementsByClassName("ant-upload-drag");t&&t.length>0&&t[0].classList.add(Rl)},onDragLeave:M,onDrop:M,children:[(0,r.jsxs)("div",{className:Ql,children:[(0,r.jsx)(ol.A,{}),(0,r.jsx)("span",{children:"将文件拖拽到此处，或"}),(0,r.jsx)("span",{className:n?"":Ll,children:"点击上传"})]}),(0,r.jsx)("div",{className:Ol,children:"系统支持的格式为jpg,jpeg,png,gif,pdf,doc,docx,xls,xlsx,rar,zip,7z,wim,tar的文件"})]})})})]})})})},ql="ComplexLayout_container__xqRV5",Zl="ComplexLayout_box__Hjeq7",Kl=[{element:(0,r.jsx)(Hc,{})},{element:(0,r.jsx)(Jl,{})}],Xl=()=>{const{setScrollTop:e}=d();return(0,a.useEffect)((()=>{e(0)}),[]),(0,r.jsx)("div",{className:ql,children:Kl.map(((e,t)=>(0,r.jsx)("div",{className:Zl,children:e.element},t)))})};var $l=n(75862);const ed="Page1_container__8IHn6",td="Page1_content__zgPdQ",nd="Page1_top__Tik59",ad="Page1_title__qIkYy",sd="Page1_author__EVTso",id="Page1_appoint__gEum0",rd="Page1_articleContent__STpiB",od="Page1_subTitle__g0Ill",cd="Page1_codeBox__hf4Aw",ld="Page1_strong__Um16S",dd=e=>{const t=(0,h.A)(),{showPageIndex:n}=e;return(0,r.jsx)("div",{className:ed,children:(0,r.jsxs)("div",{className:td,children:[(0,r.jsxs)("div",{className:nd,children:[(0,r.jsx)("div",{className:ad,children:t.formatMessage({id:"page.htmlVision.applicationPageFrame.title"})}),(0,r.jsx)("div",{className:sd,children:"".concat(t.formatMessage({id:"page.htmlVision.applicationPageFrame.author"}),": River")})]}),(0,r.jsxs)("div",{className:id,children:[(0,r.jsx)("div",{children:"".concat(t.formatMessage({id:"page.htmlVision.applicationPageFrame.appoint"}),":")}),(0,r.jsx)("div",{children:t.formatMessage({id:"page.htmlVision.applicationPageFrame.appointText1"})}),(0,r.jsx)("div",{children:t.formatMessage({id:"page.htmlVision.applicationPageFrame.appointText2"})})]}),(0,r.jsxs)("div",{className:rd,children:[(0,r.jsx)("div",{className:od,children:t.formatMessage({id:"page.htmlVision.applicationPageFrame.subTitle1"})}),(0,r.jsx)("div",{children:"".concat(t.formatMessage({id:"page.htmlVision.applicationPageFrame.des1"}),":")}),(0,r.jsxs)("div",{className:cd,children:[(0,r.jsx)("div",{children:"// ".concat(t.formatMessage({id:"page.htmlVision.applicationPageFrame.codeBox1.text"}))}),(0,r.jsx)("div",{children:''})]}),(0,r.jsxs)("div",{className:cd,children:[(0,r.jsx)("div",{children:"// ".concat(t.formatMessage({id:"page.htmlVision.applicationPageFrame.codeBox2.text"}))}),(0,r.jsx)("div",{children:"