From badbbf2e098726a9c8c18a9dd49e208356b4c7a9 Mon Sep 17 00:00:00 2001 From: River <1007941801@qq.com> Date: Thu, 23 Nov 2023 09:14:32 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/main.js | 2 +- .../ResourceManager.ts} | 34 +++--- src/pages/threejs/EarthDisplay/index.tsx | 104 ++++++++++-------- 3 files changed, 74 insertions(+), 66 deletions(-) rename src/{pages/threejs/EarthDisplay/Resources.ts => constants/ResourceManager.ts} (54%) diff --git a/docs/main.js b/docs/main.js index 383cb1d..c57bbc7 100644 --- a/docs/main.js +++ b/docs/main.js @@ -1 +1 @@ -!function(){var e,t,n,r={15205:function(e,t,n){"use strict";var r=n(67294),a=n(20745),i=n(79655),o=n(29439),s=n(85893),c=r.createContext({locale:"en-us",setLocale:function(){},headHeight:0,setHeadHeight:function(){},menuWidth:0,setMenuWidth:function(){},scrollTop:0,setScrollTop:function(){},scrollContentRef:r.createRef(),setScrollContentRef:function(){}}),l=r.createRef(),u=function(e){var t=localStorage.getItem("language")||"en-us",n=(0,r.useState)(t),a=(0,o.Z)(n,2),i=a[0],u=a[1],d=(0,r.useState)(0),m=(0,o.Z)(d,2),f=m[0],g=m[1],h=(0,r.useState)(0),p=(0,o.Z)(h,2),v=p[0],x=p[1],y=(0,r.useState)(0),A=(0,o.Z)(y,2),w=A[0],b=A[1],j=(0,r.useCallback)((function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;b(e),l.current&&l.current.scrollTop!==e&&(l.current.scrollTop=e)}),[]);return(0,s.jsx)(c.Provider,{value:{locale:i,headHeight:f,menuWidth:v,scrollTop:w,setLocale:function(e){var t=/^zh\b/.test(e.toLocaleLowerCase())?"zh-cn":"en-us";u(t),localStorage.setItem("language",t)},setHeadHeight:g,setMenuWidth:x,setScrollTop:j,scrollContentRef:l,setScrollContentRef:function(e){e&&(l=e)}},children:e.children})},d=function(){return(0,r.useContext)(c)},m=n(89250),f=n(49089);var g={init:function(){f.ZP.initialize("G-N0W492NWD6")},sendEvent:function(e){f.ZP.event(e)},sendPageview:function(e){f.ZP.send({hitType:"pageview",page:e})}};var h=n(86896),p=n(39525),v=n(61032),x=n(812),y=n(73218),A=n.p+"images/235f02ed.jpeg",w=n(4942);function b(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function j(e){for(var t=1;t=2&&t[1])return[t[1]]}return["html"]}),[n]);return(0,r.useEffect)((function(){p()}),[c]),(0,r.useEffect)((function(){return window.addEventListener("resize",p),function(){window.removeEventListener("resize",p)}}),[]),(0,s.jsxs)("div",{className:J,ref:f,children:[(0,s.jsxs)("div",{className:q,children:[(0,s.jsx)("div",{className:K,children:(0,s.jsx)(W.Z,{type:"primary",onClick:function(){l(!c)},style:{marginBottom:16},children:c?(0,s.jsx)(U.Z,{}):(0,s.jsx)(H.Z,{})})}),(0,s.jsx)(Y.Z,{defaultOpenKeys:x,selectedKeys:v,mode:"inline",theme:"dark",inlineCollapsed:c,items:g,onClick:function(e){var n=e.keyPath.reduce((function(e,t){return e="/".concat(t).concat(e)}),"");t(n)}})]}),(0,s.jsx)("div",{className:$,children:!c&&(0,s.jsx)("span",{children:e.formatMessage({id:"common.keepUpdating"})})})]})},ne="Home_container__RMLhs",re="Home_container_body__-OVNZ",ae="Home_container_content__q7A-W",ie=function(){(function(){var e=(0,m.TH)();r.useEffect((function(){g.init()}),[]),r.useEffect((function(){var t=e.pathname+e.search;g.sendPageview(t)}),[e])})();var e=d(),t=e.setScrollTop,n=e.setScrollContentRef,a=(0,m.V$)(Bw),i=(0,m.TH)(),o=(0,m.s0)(),c=(0,r.useRef)(null);return(0,r.useEffect)((function(){var e=i.pathname;e&&"/"!==e||o("/html/visualDesign")}),[i]),(0,r.useEffect)((function(){n(c)}),[]),(0,s.jsxs)("div",{className:ne,children:[(0,s.jsx)(I,{}),(0,s.jsxs)("div",{className:re,children:[(0,s.jsx)(te,{}),(0,s.jsx)("div",{className:ae,onScroll:function(){var e;t(null===(e=c.current)||void 0===e?void 0:e.scrollTop)},ref:c,children:a})]})]})},oe=n(94184),se=n.n(oe),ce={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"},le=function(e){var t,n=e.differentScreenCols,a=e.rowSpace,i=void 0===a?0:a,o=e.colSpace,c=void 0===o?0:o,l=e.className,u=void 0===l?"":l,d=e.children,m=n.map((function(e,t){return e?parseInt(e.toString()).toString():t<=4?"1":""}));return(0,s.jsx)("div",{className:se()((t={},(0,w.Z)(t,ce.container,!0),(0,w.Z)(t,ce["gt2000-".concat(m[0])],!0),(0,w.Z)(t,ce["eq1700_2000-".concat(m[1])],!0),(0,w.Z)(t,ce["eq1400_1700-".concat(m[2])],!0),(0,w.Z)(t,ce["eq1200_1400-".concat(m[3])],!0),(0,w.Z)(t,ce["eq500_1200-".concat(m[4])],!0),(0,w.Z)(t,ce["lt500-".concat(m[5])],!!m[5]),t)),children:(0,s.jsx)("div",{className:"".concat(ce.content," ").concat(u),style:{width:"calc(100% + ".concat(c,"px)"),marginLeft:"".concat(-c/2,"px"),marginRight:"".concat(-c/2,"px")},children:"[object Array]"===Object.prototype.toString.call(d)?d.map((function(e){return r.cloneElement(e,{rowSpace:i,colSpace:c})})):d||null})})};le.GridBox=function(e){var t=e.key,n=e.className,r=e.rowSpace,a=void 0===r?0:r,i=e.colSpace,o=void 0===i?0:i,c=e.children;return(0,s.jsx)("div",{style:{boxSizing:"border-box",width:"100%",padding:"".concat(a/2,"px ").concat(o/2,"px")},className:n,children:c},t)};var ue=le,de="GlassMimicry1_container__3KhAO",me="GlassMimicry1_card__WwxgS",fe="GlassMimicry1_circle__DoolB",ge="GlassMimicry1_rect__Or-6t",he=function(){return(0,s.jsxs)("div",{className:de,children:[(0,s.jsxs)("div",{className:me,children:[(0,s.jsx)("h1",{children:"TiKi Platinum"}),(0,s.jsx)("h2",{children:"6228 8076 2232 8768"}),(0,s.jsx)("h3",{children:"van conf banck"}),(0,s.jsx)("h4",{children:"03 / 29"})]}),(0,s.jsx)("div",{className:fe}),(0,s.jsx)("div",{className:ge})]})},pe="GlassMimicry2_container__S445M",ve="GlassMimicry2_card__3l4Ng",xe="GlassMimicry2_circle__VaL67",ye="GlassMimicry2_rect__qdTWE",Ae=function(){return(0,s.jsxs)("div",{className:pe,children:[(0,s.jsxs)("div",{className:ve,children:[(0,s.jsx)("h1",{children:"TiKi Platinum"}),(0,s.jsx)("h2",{children:"6228 8076 2232 8768"}),(0,s.jsx)("h3",{children:"van conf banck"}),(0,s.jsx)("h4",{children:"09 / 24"})]}),(0,s.jsx)("div",{className:xe}),(0,s.jsx)("div",{className:ye})]})},we="MixBlendMode_container__Fh1Tw",be="MixBlendMode_content__0uwYQ",je=function(){return(0,s.jsx)("div",{className:we,children:(0,s.jsx)("div",{className:be})})},De=function(e,t){var n=e.finalText,a=void 0===n?"":n,i=e.textList,c=void 0===i?[]:i,l=e.switchingInterval,u=void 0===l?60:l,d=e.duration,m=void 0===d?1500:d,f=e.className,g=void 0===f?"":f,h=(0,r.useRef)(c.length>0?0:-1),p=(0,r.useState)(-1===h.current?a:c[h.current]||""),v=(0,o.Z)(p,2),x=v[0],y=v[1],A=(0,r.useRef)(0),w=(0,r.useRef)(0),b=(0,r.useRef)(0),j=(0,r.useCallback)((function(){var e=(new Date).getTime();if(e-w.current>=m)y(a),h.current=-1,b.current=e;else if(e-b.current>=u){var t=-1===h.current?0:h.current+1;t>=c.length&&(t=0),y(c[t]),h.current=t,b.current=e}A.current=requestAnimationFrame(j)}),[m]),D=(0,r.useCallback)((function(){var e=(new Date).getTime();w.current=e,b.current=e,A.current=requestAnimationFrame(j)}),[]),_=function(){A.current&&cancelAnimationFrame(A.current),h.current=0,y(c[0]),D()};return(0,r.useImperativeHandle)(t,(function(){return{restart:_}})),(0,r.useEffect)((function(){return D(),function(){A.current&&cancelAnimationFrame(A.current)}}),[]),(0,s.jsx)("span",{className:g,children:x&&x.split("").map((function(e,t){return(0,s.jsx)("span",{children:e},t)}))})},_e=r.forwardRef(De),Me="SwitchingText_container__9ICqS",ke="SwitchingText_content__6PttP",Ee="SwitchingText_btn__9UW9Y",Ce=function(){var e=(0,r.useRef)(null);return(0,s.jsxs)("div",{className:Me,children:[(0,s.jsx)(_e,{className:ke,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,s.jsx)(W.Z,{type:"primary",className:Ee,onClick:function(){var t;null===(t=e.current)||void 0===t||t.restart()},children:"Once Again"})]})},Ne=n(13614),Se=n.n(Ne),Be="Typed1_container__2a+Le",Pe="Typed1_btn__5+jTK",Ie=function(){var e=(0,r.useRef)(null),t=(0,r.useRef)(null);return(0,r.useEffect)((function(){return e.current&&(t.current=new(Se())(e.current,{strings:["Legends never die"],typeSpeed:60,showCursor:!1})),function(){var e;null===(e=t.current)||void 0===e||e.destroy()}}),[]),(0,s.jsxs)("div",{className:Be,children:[(0,s.jsx)("p",{ref:e}),(0,s.jsx)(W.Z,{type:"primary",className:Pe,onClick:function(){var e,n;null===(e=t.current)||void 0===e||e.reset(),null===(n=t.current)||void 0===n||n.start()},children:"Once Again"})]})},Te="Typed2_container__XvJpL",Re="Typed2_btn__lqx2D",Fe=function(){var e=(0,r.useRef)(null),t=(0,r.useRef)(null);return(0,r.useEffect)((function(){return e.current&&(t.current=new(Se())(e.current,{strings:["Legan","Legends naver","Legends never die"],typeSpeed:60,showCursor:!1,backSpeed:60,backDelay:0})),function(){var e;null===(e=t.current)||void 0===e||e.destroy()}}),[]),(0,s.jsxs)("div",{className:Te,children:[(0,s.jsx)("p",{ref:e}),(0,s.jsx)(W.Z,{type:"primary",className:Re,onClick:function(){var e,n;null===(e=t.current)||void 0===e||e.reset(),null===(n=t.current)||void 0===n||n.start()},children:"Once Again"})]})},Oe=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:400,r=document.createElement("span");r.style.visibility="hidden",r.style.padding="0",r.style.whiteSpace="nowrap",r.style.overflow="visible",r.style.fontSize=t>12?t+"px":"12px",r.style.fontWeight=n.toString(),r.innerText=e,document.body.appendChild(r);var a=r.offsetWidth;return document.body.removeChild(r),a},Ge=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:12,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:400,a=!(arguments.length>4&&void 0!==arguments[4])||arguments[4],i="",o="",s="";if(!e||t12?n+"px":"12px",l.style.fontWeight=r.toString(),document.body.appendChild(l);for(var u=0,d=c.length;ut){i=a?o+"...":o;break}}return document.body.removeChild(l),i};function Qe(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Ze(e){for(var t=1;t=100){n.current=0,t(0);var o=document.getElementById("circle");o&&(o.style.strokeDashoffset="".concat(r.toString()))}else n.current=Number((n.current+.1).toFixed(2)),t(Number((n.current+.1).toFixed(2))),r=Math.floor(r-r*n.current/100),i&&(i.style.strokeDashoffset="".concat(r.toString()));a.current=window.requestAnimationFrame(e)};return(0,r.useEffect)((function(){return i(),function(){a.current&&cancelAnimationFrame(a.current)}}),[]),(0,s.jsx)("div",{className:kt,children:(0,s.jsx)("div",{className:Et,children:(0,s.jsxs)("div",{className:Ct,children:[(0,s.jsx)("div",{className:Nt}),(0,s.jsxs)("svg",{children:[(0,s.jsx)("defs",{children:(0,s.jsxs)("radialGradient",{id:"gradient",cx:"50%",cy:"50%",r:"60%",fx:"50%",fy:"50%",children:[(0,s.jsx)("stop",{offset:"30%",stopColor:"#3cba92"}),(0,s.jsx)("stop",{offset:"100%",stopColor:"#c1dfc4"})]})}),(0,s.jsx)("circle",{stroke:"url(#gradient)",id:"circle"})]}),(0,s.jsx)("div",{className:St,children:"".concat(Math.floor(n.current),"%")})]})})})},Pt={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-"},It=new Array(15).fill(0),Tt=function(){return(0,s.jsx)("div",{className:Pt.container,children:(0,s.jsx)("div",{className:Pt.content,children:It.map((function(e,t){return(0,s.jsx)("span",{className:Pt["span".concat(t)]},t)}))})})},Rt={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"},Ft=new Array(9).fill(0),Ot=function(){return(0,s.jsx)("div",{className:Rt.container,children:(0,s.jsx)("div",{className:Rt.content,children:Ft.map((function(e,t){return(0,s.jsx)("div",{className:Rt["item".concat(t)]},t)}))})})},Gt="TextWrap_container__vVl1N",Qt="TextWrap_topText__eHwkJ",Zt="TextWrap_poly__EwnPy",Lt="TextWrap_leftFloat__Uo9rJ",zt="TextWrap_rightFloat__ezXwd",Ut=function(){var e=(0,h.Z)().formatMessage({id:"page.htmlVision.visualDesign.thisIsText"});return(0,s.jsxs)("div",{className:Gt,children:[(0,s.jsx)("div",{className:Qt,children:e.repeat(40)}),(0,s.jsx)("div",{className:"".concat(Zt," ").concat(Lt)}),(0,s.jsx)("div",{className:"".concat(Zt," ").concat(zt)}),(0,s.jsx)("span",{children:e.repeat(180)})]})},Ht="WaterDropLogin_container__d6dk7",Vt="WaterDropLogin_content__jiIiV",Wt="WaterDropLogin_drop__Nq7iB",Yt="WaterDropLogin_contentBox__nL6ua",Jt="WaterDropLogin_inputBox__2oxY0",qt="WaterDropLogin_btns__Sil7M",Kt="WaterDropLogin_signup__h0wNv",Xt=function(){return(0,s.jsx)("div",{className:Ht,children:(0,s.jsxs)("div",{className:Vt,children:[(0,s.jsx)("div",{className:Wt,children:(0,s.jsxs)("div",{className:Yt,children:[(0,s.jsx)("h2",{children:"Sign in"}),(0,s.jsxs)("form",{children:[(0,s.jsx)("div",{className:Jt,children:(0,s.jsx)("input",{type:"text",placeholder:"Username"})}),(0,s.jsx)("div",{className:Jt,children:(0,s.jsx)("input",{type:"password",placeholder:"Password"})}),(0,s.jsx)("div",{className:Jt,children:(0,s.jsx)("input",{type:"submit",value:"Login"})})]})]})}),(0,s.jsxs)("div",{className:qt,children:[(0,s.jsx)("span",{children:"Forget"}),(0,s.jsx)("span",{children:"Password"})]}),(0,s.jsx)("div",{className:"".concat(qt," ").concat(Kt),children:"Signup"})]})})},$t="TextShadow_container__3+vOx",en="TextShadow_content__ngpOP",tn=function(){var e=(0,h.Z)().formatMessage({id:"page.htmlVision.visualDesign.textShadow"});return(0,s.jsx)("div",{className:$t,children:(0,s.jsx)("div",{className:en,"data-text":e,children:e})})},nn="HorseRacelamp_container__bVbh9",rn="HorseRacelamp_scroll__kRja6",an=new Array(4).fill(0),on=function(){var e=function(){return(0,s.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,s.jsx)("div",{className:nn,children:an.map((function(t,n){return(0,s.jsxs)("div",{className:rn,children:[e(),e()]},n)}))})},sn="HarmonyLogo_container__uTwnw",cn="HarmonyLogo_content__Azar3",ln="HarmonyLogo_top__zSfqW",un="HarmonyLogo_line__6yj7q",dn="HarmonyLogo_bottom__4ZSOr",mn=function(){return(0,s.jsxs)("div",{className:sn,children:[(0,s.jsxs)("div",{className:cn,children:[(0,s.jsx)("div",{className:ln,children:(0,s.jsx)("div",{className:un})}),(0,s.jsx)("div",{className:dn})]}),(0,s.jsx)("svg",{children:(0,s.jsxs)("filter",{id:"fractal",filterUnits:"objectBoundingBox",x:"0%",y:"0%",width:"100%",height:"100%",children:[(0,s.jsx)("feTurbulence",{id:"turbulence",type:"fractalNoise",baseFrequency:"0.005 0.005",numOctaves:"10",children:(0,s.jsx)("animate",{attributeName:"baseFrequency",dur:"30s",values:"0.005 0.005;0.05 0.3;0.005 0.005",repeatCount:"indefinite"})}),(0,s.jsx)("feDisplacementMap",{in:"SourceGraphic",scale:"15"})]})})]})},fn="Preserve3D_container__EZ7l0",gn="Preserve3D_content__yxNQy",hn="Preserve3D_cubeInner__oYaXM",pn="Preserve3D_top__6op2D",vn="Preserve3D_bottom__Rmjl+",xn="Preserve3D_front__+CRYT",yn="Preserve3D_back__-ZjU+",An="Preserve3D_left__YYWAD",wn="Preserve3D_right__R5Aqm",bn="Preserve3D_cubeOuter__pwwjS",jn=function(){return(0,s.jsx)("div",{className:fn,children:(0,s.jsxs)("div",{className:gn,children:[(0,s.jsxs)("div",{className:hn,children:[(0,s.jsx)("div",{className:pn}),(0,s.jsx)("div",{className:vn}),(0,s.jsx)("div",{className:xn}),(0,s.jsx)("div",{className:yn}),(0,s.jsx)("div",{className:An}),(0,s.jsx)("div",{className:wn})]}),(0,s.jsxs)("div",{className:bn,children:[(0,s.jsx)("div",{className:pn}),(0,s.jsx)("div",{className:vn}),(0,s.jsx)("div",{className:xn}),(0,s.jsx)("div",{className:yn}),(0,s.jsx)("div",{className:An}),(0,s.jsx)("div",{className:wn})]})]})})},Dn="RotateAndBgFixed_container__Kc-WW",_n="RotateAndBgFixed_box__DkROP",Mn="RotateAndBgFixed_a__Yi0br",kn="RotateAndBgFixed_b__Vv6J0",En="RotateAndBgFixed_c__xgerx",Cn="RotateAndBgFixed_d__d9aYT",Nn="RotateAndBgFixed_e__V1OJc",Sn=function(){return(0,s.jsx)("div",{className:Dn,children:(0,s.jsxs)("div",{className:_n,children:[(0,s.jsx)("div",{className:Mn,children:(0,s.jsx)("img",{src:gt,alt:""})}),(0,s.jsx)("div",{className:kn,children:(0,s.jsx)("img",{src:ht,alt:""})}),(0,s.jsx)("div",{className:En,children:(0,s.jsx)("img",{src:pt,alt:""})}),(0,s.jsx)("div",{className:Cn,children:(0,s.jsx)("img",{src:vt,alt:""})}),(0,s.jsx)("div",{className:Nn,children:(0,s.jsx)("img",{src:xt,alt:""})})]})})},Bn="HexagonalMesh_container__mdJJ9",Pn="HexagonalMesh_item__hVzAo",In=new Array(300).fill(0),Tn=function(){return(0,s.jsx)("div",{className:Bn,children:In.map((function(e,t){return(0,s.jsx)("div",{className:Pn},t)}))})},Rn="HexagonalRadar_container__hFck5",Fn="HexagonalRadar_content__sj-0h",On="HexagonalRadar_item__IF+DR",Gn="HexagonalRadar_maskBox__SqK8S",Qn=new Array(5).fill(0),Zn=function(){return(0,s.jsxs)("div",{className:Rn,children:[(0,s.jsx)("div",{className:Fn,children:Qn.map((function(e,t){return(0,s.jsx)("div",{className:On},t)}))}),(0,s.jsx)("div",{className:Gn})]})},Ln=n.p+"images/d2fa7cd8.png",zn="HoverEnlargement_container__t9rVI",Un=function(){return(0,s.jsx)("div",{className:zn,children:(0,s.jsx)("img",{src:Ln,alt:""})})},Hn=n(78343),Vn=n(79501);function Wn(e){return e.toString().padStart(2,"0")}var Yn,Jn=function(e){if(e){var t=e.slice(0,19).replace(/-/g,"/");return e.endsWith("+0000 UTC")?(0,Vn.Z)((0,Hn.Z)(new Date(t),8),"YYYY/MM/DD HH:mm:ss"):t}return""},qn="ActivityCountDown_container__z9J8Y",Kn="ActivityCountDown_num__F1ysh",Xn="ActivityCountDown_unit__X1r8-",$n=function(e){var t=e.countParams,n=e.overCallback,a=e.style,i=void 0===a?{}:a,c=t.day,l=void 0===c?59:c,u=t.hour,d=void 0===u?59:u,m=t.minute,f=void 0===m?59:m,g=t.seconds,h=void 0===g?59:g,p=(0,r.useState)({d:l,h:d,m:f,s:h}),v=(0,o.Z)(p,2),x=v[0],y=v[1],A=(0,r.useRef)(x),w=(0,r.useRef)(!0),b=(0,r.useRef)(0),j=function(){if(!w.current){var e=A.current,t=e.d,r=e.h,a=e.m,i=e.s,o=0===r&&0===a&&0===i,s=0===a&&0===i,c=0===i;if(0===t&&0===r&&0===a&&0===i)w.current=!0,n&&n();else if(o){var l={d:t-1,h:23,m:59,s:59};A.current=l,y(l)}else if(s){var u={d:t,h:r-1,m:59,s:59};A.current=u,y(u)}else if(c){var d={d:t,h:r,m:a-1,s:59};A.current=d,y(d)}else{var m={d:t,h:r,m:a,s:i-1};A.current=m,y(m)}}};return(0,r.useEffect)((function(){var e=t.day,r=void 0===e?59:e,a=t.hour,i=void 0===a?59:a,o=t.minute,s=void 0===o?59:o,c=t.seconds,l={d:r,h:i,m:s,s:void 0===c?59:c};A.current=l,y(l),0===l.d&&0===l.h&&0===l.m&&0===l.s?w.current||(w.current=!0,n&&n(),b.current&&(window.clearInterval(b.current),b.current=0)):w.current&&(w.current=!1,b.current=window.setInterval(j,1e3))}),[t]),(0,r.useEffect)((function(){return function(){b.current&&window.clearInterval(b.current)}}),[]),(0,s.jsx)(s.Fragment,{children:(0,s.jsxs)("div",{className:qn,style:i,children:[(0,s.jsx)("div",{className:Kn,children:Wn(x.d)}),(0,s.jsx)("div",{className:Xn,children:"天"}),(0,s.jsx)("div",{className:Kn,children:Wn(x.h)}),(0,s.jsx)("div",{className:Xn,children:"时"}),(0,s.jsx)("div",{className:Kn,children:Wn(x.m)}),(0,s.jsx)("div",{className:Xn,children:"分"}),(0,s.jsx)("div",{className:Kn,children:Wn(x.s)}),(0,s.jsx)("div",{className:Xn,children:"秒"})]})})},er="ActivityCountDown_container__Nw3or",tr="ActivityCountDown_title__5HUMy",nr=function(){var e=function(e){var t=e.type,n=void 0===t?"ms":t,r=e.startTime,a=void 0===r?"":r,i=e.serverTime,o=void 0===i?0:i,s="s"===n?1e3*Number(o):o;if(!a)return{day:0,hour:0,minute:0,seconds:0,timeRemaining:0};var c="string"==typeof a?Jn(a):a,l=new Date(c).getTime()-s;return{day:Math.floor(l/1e3/60/60/24),hour:Math.floor(l/1e3/60/60%24),minute:Math.floor(l/1e3/60%60),seconds:Math.floor(l/1e3%60),timeRemaining:l}}({type:"ms",startTime:(0,Hn.Z)(new Date,2).getTime(),serverTime:(new Date).getTime()}),t=(0,r.useState)(!1),n=(0,o.Z)(t,2),a=n[0],i=n[1];return(0,s.jsxs)("div",{className:er,children:[(0,s.jsx)("div",{className:tr,children:a?"活动正在进行中":"距离活动开始剩余："}),!a&&(0,s.jsx)($n,{countParams:e,overCallback:function(){i(!0)},style:{marginTop:"16px"}})]})},rr="Ribbon_container__ZOkiq",ar="Ribbon_ribbon__wI2K8",ir=function(){return(0,s.jsxs)("div",{className:rr,children:[(0,s.jsx)("div",{className:ar,style:{"--fontSize":"34px",fontWeight:600},children:"Visualization Collection"}),(0,s.jsxs)("div",{className:ar,style:{"--fontSize":"28px","--background":"#8A9B0F",fontWeight:500},children:["Visualization Collection ",(0,s.jsx)("br",{})," Visualization Collection"]}),(0,s.jsxs)("div",{className:ar,style:{"--background":"#45ADA8"},children:["Visualization Collection",(0,s.jsx)("br",{})," Visualization Collection",(0,s.jsx)("br",{})," Visualization Collection"]})]})},or="VisualDesign_container__oN2JR",sr="VisualDesign_box__-TYNG",cr=ue.GridBox,lr=[{element:(0,s.jsx)(he,{})},{element:(0,s.jsx)(Ae,{})},{element:(0,s.jsx)(je,{})},{element:(0,s.jsx)(Ce,{})},{element:(0,s.jsx)(Ie,{})},{element:(0,s.jsx)(Fe,{})},{element:(0,s.jsx)(Ue,{})},{element:(0,s.jsx)(Ut,{})},{element:(0,s.jsx)(Ke,{})},{element:(0,s.jsx)(et,{})},{element:(0,s.jsx)(rt,{})},{element:(0,s.jsx)(ft,{})},{element:(0,s.jsx)(jt,{})},{element:(0,s.jsx)(Mt,{})},{element:(0,s.jsx)(Bt,{})},{element:(0,s.jsx)(Tt,{})},{element:(0,s.jsx)(Je,{})},{element:(0,s.jsx)(Ot,{})},{element:(0,s.jsx)(Xt,{})},{element:(0,s.jsx)(tn,{})},{element:(0,s.jsx)(on,{})},{element:(0,s.jsx)(mn,{})},{element:(0,s.jsx)(jn,{})},{element:(0,s.jsx)(Sn,{})},{element:(0,s.jsx)(Tn,{})},{element:(0,s.jsx)(Zn,{})},{element:(0,s.jsx)(Un,{})},{element:(0,s.jsx)(nr,{})},{element:(0,s.jsx)(ir,{})}],ur=function(){var e=d().setScrollTop;return(0,r.useEffect)((function(){e(0)}),[]),(0,s.jsx)("div",{className:or,children:(0,s.jsx)(ue,{differentScreenCols:[2,2,2,1,1],rowSpace:4,colSpace:4,children:lr.map((function(e,t){return(0,s.jsx)(cr,{children:(0,s.jsx)("div",{className:sr,children:e.element})},t)}))})})},dr=[],mr=function(e){e.data,(0,h.Z)();return null},fr="ModuleTitle_container__7ZCMv",gr=function(e){var t=(0,h.Z)(),n=e.intlTitle,r=e.style,a=void 0===r?{}:r;return(0,s.jsx)("div",{className:fr,style:a,children:t.formatMessage({id:n})})},hr=n.p+"images/6765fa3b.png",pr="MagnifyingGlass_container__z7+HK",vr="MagnifyingGlass_content__csBAU",xr="MagnifyingGlass_smallBox__1rC23",yr="MagnifyingGlass_mask__kbQ6H",Ar="MagnifyingGlass_floatBox__Msmv9",wr="MagnifyingGlass_bigBox__dtenq",br=function(){var e=d(),t=e.scrollTop,n=e.headHeight,a=(0,r.useRef)(null),i=(0,r.useRef)(null),c=(0,r.useRef)(null),l=(0,r.useState)(!1),u=(0,o.Z)(l,2),m=u[0],f=u[1];return(0,s.jsx)("div",{className:pr,children:(0,s.jsxs)("div",{className:vr,children:[(0,s.jsxs)("div",{className:xr,ref:a,children:[(0,s.jsx)(gr,{intlTitle:"page.htmlVision.interactiveDesign.magnifyingGlass",style:{top:"-80px",left:"114%"}}),(0,s.jsx)("div",{className:yr,onMouseOver:function(){f(!0)},onMouseMove:function(e){var r=T.findDOMNode(a.current),o=T.findDOMNode(i.current),s=r.offsetWidth,l=r.offsetHeight,u=o.offsetWidth,d=o.offsetHeight,m=e.clientX-r.offsetLeft-u/2,f=0;m<0?m=0:m>s-u&&(m=s-u),(f=tl-d&&(f=l-d),o.style.left=m+"px",o.style.top=f+"px";var g=m/(s-u),h=f/(l-d),p=T.findDOMNode(c.current),v=p.children[0];v.style.left=-g*(v.offsetWidth-p.offsetWidth)+"px",v.style.top=-h*(v.offsetHeight-p.offsetHeight)+"px"},onMouseLeave:function(){f(!1)}}),(0,s.jsx)("div",{className:Ar,style:{visibility:m?"visible":"hidden"},ref:i}),(0,s.jsx)("img",{src:hr})]}),(0,s.jsx)("div",{className:wr,ref:c,children:(0,s.jsx)("img",{src:hr,style:{visibility:m?"visible":"hidden"}})})]})})},jr="CropImage_container__agQZ5",Dr="CropImage_leftBox__rxH+K",_r="CropImage_img1__vvyEU",Mr="CropImage_img2__CuOAQ",kr="CropImage_cropBox__A4fdb",Er="CropImage_dot__TnuYQ",Cr="CropImage_leftUp__RO+TV",Nr="CropImage_up__fR18N",Sr="CropImage_rightUp__5Btk7",Br="CropImage_right__nbAwk",Pr="CropImage_rightDown__8vsgu",Ir="CropImage_down__0RD60",Tr="CropImage_leftDown__Ssc21",Rr="CropImage_left__qEy8B",Fr="CropImage_rightBox__tH7SB";!function(e){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"}(Yn||(Yn={}));var Or=function(){var e=d().scrollTop,t=(0,r.useRef)(0),n=(0,r.useRef)(0),a=(0,r.useRef)(!1),i=(0,r.useRef)(),o=(0,r.useRef)(!1),c=(0,r.useRef)(null),l=(0,r.useRef)(null),u=(0,r.useRef)(null),m=(0,r.useRef)(null),f=(0,r.useRef)(null),g=(0,r.useRef)(0),h=(0,r.useRef)(0),p=(0,r.useRef)(0),v=(0,r.useRef)(0),x=function(e){for(var t=e.offsetLeft,n=e.offsetTop,r=e.offsetParent;null!=r;)t+=r.offsetLeft,n+=r.offsetTop,r=r.offsetParent;return{left:t,top:n}},y=function(e){var n=e.clientX,r=T.findDOMNode(l.current),a=x(r).left,i=a+t.current-4;n>i?n=i:ns&&(n=s);var c=i.offsetHeight;i.style.height=c+o-n+"px",i.style.top=i.offsetTop+n-o+"px"},w=function(e){var t=e.clientX,n=T.findDOMNode(l.current),r=x(n).left,a=T.findDOMNode(m.current),i=x(a).left,o=i+a.offsetWidth-4;to&&(t=o);var s=a.offsetWidth;a.style.width=s+i-t+"px",a.style.left=a.offsetLeft+t-i+"px"},b=function(t){var r=t.clientY+e,a=T.findDOMNode(l.current),i=x(a).top,o=i+n.current-4;ro&&(r=o);var s=T.findDOMNode(m.current),c=s.offsetHeight-2,u=r-c-x(s).top;s.style.height=c+u+"px"},j=function(){var e=T.findDOMNode(m.current),t=e.offsetWidth,n=e.offsetHeight,r=e.offsetLeft,a=e.offsetTop,i=r+t,o=a+n;T.findDOMNode(u.current).style.clip="rect(".concat(a,"px,").concat(i,"px,").concat(o,"px,").concat(r,"px)")},D=function(){var e=T.findDOMNode(m.current),t=e.offsetWidth,n=e.offsetHeight,r=e.offsetLeft,a=e.offsetTop,i=r+t,o=a+n,s=T.findDOMNode(f.current);s.style.top="".concat(-a,"px"),s.style.left="".concat(-r,"px"),s.style.clip="rect(".concat(a,"px,").concat(i,"px,").concat(o,"px,").concat(r,"px)")},_=function(e,t){e.stopPropagation(),a.current=!0,i.current=t},M=function(){a.current=!1,o.current=!1};return(0,r.useEffect)((function(){var e=T.findDOMNode(l.current),r=e.offsetWidth,a=e.offsetHeight;t.current=r,n.current=a}),[]),(0,s.jsxs)("div",{className:jr,onMouseMove:function(e){if(o.current){var r=T.findDOMNode(m.current),s=r.offsetWidth,c=r.offsetHeight,l=e.clientX-g.current,u=e.clientY-h.current,d=v.current+u,f=p.current+l;d<0?r.style.top="0px":d>n.current-c-2?r.style.top="".concat(n.current-c-2,"px"):r.style.top="".concat(d,"px"),f<0?r.style.left="0px":f>t.current-s-2?r.style.left="".concat(t.current-s-2,"px"):r.style.left="".concat(f,"px"),j(),D()}if(a.current){switch(i.current){case Yn.right:y(e);break;case Yn.up:A(e);break;case Yn.left:w(e);break;case Yn.down:b(e);break;case Yn.leftUp:w(e),A(e);break;case Yn.leftDown:w(e),b(e);break;case Yn.rightUp:y(e),A(e);break;case Yn.rightDown:y(e),b(e)}j(),D()}},onMouseUp:M,onMouseLeave:M,ref:c,children:[(0,s.jsx)(gr,{intlTitle:"page.htmlVision.interactiveDesign.dragAndDropClipBox"}),(0,s.jsxs)("div",{className:Dr,ref:l,children:[(0,s.jsx)("img",{src:He,className:_r}),(0,s.jsx)("img",{src:He,className:Mr,ref:u}),(0,s.jsxs)("div",{className:kr,onMouseDown:function(e){g.current=e.clientX,h.current=e.clientY;var t=T.findDOMNode(m.current);v.current=t.offsetTop,p.current=t.offsetLeft,o.current=!0},ref:m,children:[(0,s.jsx)("div",{className:"".concat(Er," ").concat(Cr),onMouseDown:function(e){return _(e,Yn.leftUp)}}),(0,s.jsx)("div",{className:"".concat(Er," ").concat(Nr),onMouseDown:function(e){return _(e,Yn.up)}}),(0,s.jsx)("div",{className:"".concat(Er," ").concat(Sr),onMouseDown:function(e){return _(e,Yn.rightUp)}}),(0,s.jsx)("div",{className:"".concat(Er," ").concat(Br),onMouseDown:function(e){return _(e,Yn.right)}}),(0,s.jsx)("div",{className:"".concat(Er," ").concat(Pr),onMouseDown:function(e){return _(e,Yn.rightDown)}}),(0,s.jsx)("div",{className:"".concat(Er," ").concat(Ir),onMouseDown:function(e){return _(e,Yn.down)}}),(0,s.jsx)("div",{className:"".concat(Er," ").concat(Tr),onMouseDown:function(e){return _(e,Yn.leftDown)}}),(0,s.jsx)("div",{className:"".concat(Er," ").concat(Rr),onMouseDown:function(e){return _(e,Yn.left)}})]})]}),(0,s.jsx)("div",{className:Fr,children:(0,s.jsx)("img",{src:He,ref:f})})]})},Gr=n.p+"images/e55cd06c.jpg",Qr=n.p+"images/f44f33e9.jpg",Zr=n.p+"images/ccd69096.jpg",Lr=n.p+"images/dbd623e3.jpg",zr=n.p+"images/d327c52a.jpg",Ur=n.p+"images/f160c0ae.jpg",Hr={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"};function Vr(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Wr(e){for(var t=1;t=0;c--){var l=Jr[c];if(l.id===t){r=l.price,s=l;break}}s&&o.unshift(Wr(Wr({},s),{},{num:1}))}i(o),d(!1),p(g+r)},children:[(0,s.jsxs)("div",{className:Hr.tableHead,children:[(0,s.jsx)("div",{className:Hr.tableCell,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.title"})}),(0,s.jsx)("div",{className:Hr.tableCell,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.price"})}),(0,s.jsx)("div",{className:Hr.tableCell,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.count"})})]}),a.map((function(e){var t=e.id,n=e.num,r=e.name,a=e.price;return(0,s.jsxs)("div",{className:Hr.tableRow,children:[(0,s.jsx)("div",{className:Hr.tableCell,children:r}),(0,s.jsx)("div",{className:Hr.tableCell,children:"￥".concat(a)}),(0,s.jsx)("div",{className:Hr.tableCell,children:n})]},t)})),a.length>0&&(0,s.jsx)("div",{className:Hr.total,children:(0,s.jsxs)("span",{className:Hr.totalMoney,children:[e.formatMessage({id:"page.htmlVision.interactiveDesign.total"}),"：￥",(0,s.jsx)("span",{children:g})]})}),(0,s.jsx)("div",{className:Hr.tip,children:u?e.formatMessage({id:"page.htmlVision.interactiveDesign.addingToCart"}):e.formatMessage({id:"page.htmlVision.interactiveDesign.dragToThisToBuy"})})]})]})]})},Kr=n.p+"images/70af4d01.jpg",Xr="MouseHover_container__QIdL2",$r="MouseHover_content__L5hzm",ea="MouseHover_title__617kC",ta="MouseHover_bottom__jjGyr",na="MouseHover_right__Aviwn",ra="MouseHover_cursor__IcpdN",aa=[{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"}],ia=function(){var e=(0,h.Z)(),t=d().scrollTop,n=(0,r.useRef)(null),a=(0,r.useRef)(null),i=(0,r.useState)(!1),c=(0,o.Z)(i,2),l=c[0],u=c[1],m=(0,r.useState)("default"),f=(0,o.Z)(m,2),g=f[0],p=f[1],v=(0,r.useRef)({mouseX:null,mouseY:null}),x=(0,r.useRef)(0),y=function(){p("big")},A=function(){p("default")};return(0,r.useEffect)((function(){return x.current=window.requestAnimationFrame((function e(){var t=v.current,n=t.mouseX,r=t.mouseY;if(null!==n&&null!==r){var i=10;"big"===g&&(i=40);var o=T.findDOMNode(a.current),s=o.style.left?parseFloat(o.style.left):null,c=o.style.top?parseFloat(o.style.top):null;if(null!==s&&null!==c){var l=n-(s+i),u=r-(c+i),d=Math.hypot(l,u);if(d>0)if(d<=.1)o.style.left="".concat(s,"px"),o.style.top="".concat(c,"px");else{var m=.12*l,f=.12*u;o.style.left="".concat(s+m,"px"),o.style.top="".concat(c+f,"px")}}}x.current=window.requestAnimationFrame(e)})),function(){x.current&&window.cancelAnimationFrame(x.current)}}),[g]),(0,s.jsxs)("div",{className:Xr,onMouseEnter:function(e){var r=e.clientX,i=e.clientY;u(!0);var o=T.findDOMNode(n.current),s=o.offsetLeft,c=void 0===s?0:s,l=o.offsetTop,d=void 0===l?0:l;v.current={mouseX:r-c,mouseY:i-(d-t)};var m=T.findDOMNode(a.current);m.style.left="".concat((v.current.mouseX||0)-10,"px"),m.style.top="".concat((v.current.mouseY||0)-10,"px")},onMouseMove:function(e){var r=e.clientX,a=e.clientY,i=T.findDOMNode(n.current),o=i.offsetLeft,s=void 0===o?0:o,c=i.offsetTop,l=void 0===c?0:c;v.current={mouseX:r-s,mouseY:a-(l-t)}},onMouseLeave:function(e){var r=e.clientX,a=e.clientY;u(!1);var i=T.findDOMNode(n.current),o=i.offsetLeft,s=void 0===o?0:o,c=i.offsetTop,l=void 0===c?0:c;v.current={mouseX:r-s,mouseY:a-(l-t)}},ref:n,children:[(0,s.jsxs)("div",{className:$r,children:[(0,s.jsx)("p",{className:ea,onMouseEnter:y,onMouseLeave:A,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.personalArticle"})}),(0,s.jsxs)("div",{className:ta,children:[(0,s.jsx)("img",{src:Kr,alt:"",onMouseEnter:y,onMouseLeave:A}),(0,s.jsx)("div",{className:na,children:aa.map((function(e,t){return(0,s.jsx)("a",{href:e.href,target:"_blank",onMouseEnter:y,onMouseLeave:A,children:e.name},t)}))})]})]}),(0,s.jsx)("div",{className:ra,style:{visibility:l?"visible":"hidden",width:"".concat("big"===g?80:20,"px"),height:"".concat("big"===g?80:20,"px")},ref:a})]})},oa="SlideButtonTab_container__eT4SM",sa="SlideButtonTab_content__6sIYs",ca="SlideButtonTab_btn__tD8IC",la="SlideButtonTab_actived__RWXqG",ua=new Array(4).fill(0),da=function(){var e=(0,r.useRef)(null),t=(0,r.useState)(0),n=(0,o.Z)(t,2),a=n[0],i=n[1],c=(0,r.useRef)(0);return(0,r.useEffect)((function(){if(e.current){var t=(e.current.getBoundingClientRect().width-32-8*(2*ua.length-2))/ua.length;e.current.style.setProperty("--btnWidth","".concat(t,"px")),c.current=t}}),[]),(0,s.jsxs)("div",{className:oa,children:[(0,s.jsx)(gr,{intlTitle:"page.htmlVision.interactiveDesign.swipeTab"}),(0,s.jsx)("div",{className:sa,ref:e,children:ua.map((function(t,n){return(0,s.jsxs)("div",{className:"".concat(ca," ").concat(a===n?la:""),onClick:function(){return function(t){if(e.current&&a!==t){var n="".concat(16+c.current*t+8*t*2,"px");e.current.style.setProperty("--groove-left",n);var r="0deg";r=t=Pa.length-1||a.current)){if(a.current=!0,t.current){var e=t.current.children[n.current+1];e.style.animation="flip-to-left 2s ease-in-out forwards",setTimeout((function(){e.style.zIndex="5"}),1e3)}setTimeout((function(){n.current=n.current+1,i()}),2e3)}},children:e.formatMessage({id:"page.htmlVision.interactiveDesign.nextPage"})})]})]})},Ra="switch_container__i9Gh6",Fa="switch_box__M6wl2",Oa="switch_icon__AQIrn";function Ga(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Qa(e){for(var t=1;t-e&&n2&&void 0!==arguments[2]?arguments[2]:0,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,i=e,o=t;return 0!==n&&(i=e*Math.cos(n)+t*Math.sin(n)+r,o=-e*Math.sin(n)+t*Math.cos(n)+a),{transitionX:i,transitionY:o}}(t,r,ui,di,mi),s=i.transitionX,l=i.transitionY,u=T.findDOMNode(o.current);if(!u)return;u.offsetWidth<350?si=500:u.offsetWidth<400&&(si=550),u.style.left="".concat(s,"px"),u.style.top="".concat(-l,"px");var d=1.5;t>=ci?("CCW"===li?(ui=0,di=0,mi=0):(ui=120,di=17,mi=49),n||(fi=!0,gi=!0)):t<=-ci&&(li="CCW"===li?"CW":"CCW",n||(fi=!0,gi=!0)),Math.abs(t)>16&&(d=1.5*Math.pow(Math.cos(t/ci),2));var m=function(e,t,n,r,a){var i=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1,o=r,s=a;return(o=r>=e?r-i:r<=-e?r+i:"CCW"===n?a>0?r-i:r+i:a<0?r-i:r+i)>e?o=e:o<-e&&(o=-e),(s=vi(e,t,o))>0&&(r>=e?"CCW"!==n&&(s=-s):r<=-e?"CCW"===n&&(s=-s):a<0&&(s=-s)),{nextX:o,nextY:s}}(ci,40,li,t,r,d),f=m.nextX,g=m.nextY;t=f,r=g;var h=null;c&&c.current&&(h=T.findDOMNode(c.current));var p=!0;h&&Object.keys(pi).forEach((function(e,t){var n=h.childNodes[t];if(n){var r=pi[e],a=r.top,i=r.left,o=r.vx,s=r.vy,c=r.g,l=r.opacity,u=r.isMoving;if(u||fi){var d=hi[e],m=a+s,f=i+o,g=o;g=Math.abs(o)>.1?o>0?o-.1:o+.1:0;var v=m-d.top,x=si-d.top,y=x/2*.45,A=l;v/x>.55&&(v=y-(m-.55*x)),(A=(v/y).toFixed(2))>1&&(A=1);var w=s+c,b=u;0===m?(m=d.top,f=d.left,g=d.vx,b=!0):m>=si?(m=0,f=0,A=0,g=0,w=0,b=!1):(p=!1,fi&&(b=!0)),n.style.top="".concat(m,"px"),n.style.left="".concat(f,"px"),n.style.opacity=A,Object.assign(r,{top:m,left:f,vx:g,vy:w,isMoving:b})}}})),fi&&(fi=!1),p&&(gi=!1)}e=window.requestAnimationFrame(a)})),function(){e&&window.cancelAnimationFrame(e)}}),[]),(0,s.jsx)("div",{className:ti,children:(0,s.jsxs)("div",{className:ni,ref:o,children:[(0,s.jsx)("img",{src:Va,alt:"",className:ri}),(0,s.jsxs)("div",{className:ai,onClick:function(){i||gi||(fi=!0,gi=!0)},ref:c,children:[(0,s.jsx)("img",{src:Ya,alt:"",className:ii}),(0,s.jsx)("img",{src:Ja,alt:"",className:ii}),(0,s.jsx)("img",{src:qa,alt:"",className:ii}),(0,s.jsx)("img",{src:Ka,alt:"",className:ii}),(0,s.jsx)("img",{src:Xa,alt:"",className:ii}),(0,s.jsx)("img",{src:$a,alt:"",className:ii}),(0,s.jsx)("img",{src:ei,alt:"",className:ii}),(0,s.jsx)("img",{src:Wa,alt:"",className:oi})]})]})})},Ai="PeopleAnimation_container__P9IRI",wi=function(){return(0,s.jsx)("div",{className:Ai,children:(0,s.jsx)(yi,{})})},bi={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"},ji=new Array(3).fill(0),Di=function(){return(0,s.jsxs)("div",{className:bi.container,children:[(0,s.jsx)(gr,{intlTitle:"page.htmlVision.interactiveDesign.pseudo3DRubikCube"}),(0,s.jsx)("div",{className:bi.content,children:ji.map((function(e,t){return(0,s.jsx)("div",{className:bi.cube,children:ji.map((function(e,t){return(0,s.jsx)("div",{className:bi["column".concat(t)],children:ji.map((function(e,t){return(0,s.jsx)("span",{className:bi["span".concat(t)]},t)}))},t)}))},t)}))})]})},_i="Preserve3dBox_container__S8Nkn",Mi="Preserve3dBox_content__OkpkD",ki="Preserve3dBox_box__xhigG",Ei="Preserve3dBox_side1__OlfJ5",Ci="Preserve3dBox_side2__N20GX",Ni="Preserve3dBox_side3__t1Hxo",Si="Preserve3dBox_side4__7YzMw",Bi="Preserve3dBox_side5__38WMJ",Pi="Preserve3dBox_side6__pWRYS",Ii="Preserve3dBox_light__8ms1v",Ti=function(){var e=(0,r.useRef)(null),t=(0,r.useRef)(null),n=(0,r.useRef)(null),a=function(){if(n.current=null,t.current){var e=t.current.children;Array.prototype.forEach.call(e,(function(e){Array.prototype.includes.call(e.classList,Ii)&&e.classList.remove(Ii)})),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=function(e){null==e||e.classList.add(Ii)};return(0,s.jsxs)("div",{className:_i,onMouseDown:function(e){var r=e.clientX,a=e.clientY,i=window.getComputedStyle(T.findDOMNode(t.current)).transform;if(i&&"none"!==i){var o=i.match(/matrix(3d)?((.+))/);if(o&&o.length>=3){var s=o[2].split(", ")||[],c=180*Math.acos(Number(s[5]))/Math.PI,l=180*Math.acos(Number(s[10]))/Math.PI;n.current={x:r,y:a,rotateX:c,rotateY:l}}}},onMouseMove:function(e){if(t.current&&n.current){var r=e.clientX,a=e.clientY,i=n.current,o=i.x,s=i.y,c=i.rotateX,l=i.rotateY,u=2*(s-a),d=(r-o)/2;t.current&&(t.current.style.animation="none"),t.current.style.transform="rotateX(".concat(c+u,"deg) rotateY(").concat(l+d,"deg)")}},onMouseUp:a,onMouseLeave:a,ref:e,children:[(0,s.jsx)(gr,{intlTitle:"page.htmlVision.interactiveDesign.3DRubikCube"}),(0,s.jsx)("div",{className:Mi,children:(0,s.jsxs)("div",{className:ki,ref:t,children:[(0,s.jsx)("div",{className:Ei,onClick:function(e){t.current&&(t.current.style.transform="rotateX(360deg) rotateY(360deg)",t.current.style.animation="none",i(e.target))}}),(0,s.jsx)("div",{className:Ci,onClick:function(e){t.current&&(t.current.style.transform="rotateX(0deg) rotateY(180deg)",t.current.style.animation="none",i(e.target))}}),(0,s.jsx)("div",{className:Ni,onClick:function(e){t.current&&(t.current.style.transform="rotateX(270deg) rotateY(0deg)",t.current.style.animation="none",i(e.target))}}),(0,s.jsx)("div",{className:Si,onClick:function(e){t.current&&(t.current.style.transform="rotateX(90deg) rotateY(180deg)",t.current.style.animation="none",i(e.target))}}),(0,s.jsx)("div",{className:Bi,onClick:function(e){t.current&&(t.current.style.transform="rotateX(0deg) rotateY(90deg)",t.current.style.animation="none",i(e.target))}}),(0,s.jsx)("div",{className:Pi,onClick:function(e){t.current&&(t.current.style.transform="rotateX(0deg) rotateY(270deg)",t.current.style.animation="none",i(e.target))}})]})})]})},Ri="OrientationSenseCard_container__wM4Og",Fi="OrientationSenseCard_content__nHHlN",Oi="OrientationSenseCard_card__kb1rR",Gi=[ga,ha,va,xa,ya],Qi=function(){return(0,s.jsxs)("div",{className:Ri,children:[(0,s.jsx)(gr,{intlTitle:"page.htmlVision.interactiveDesign.automaticIdentificationOfMouseDirection"}),(0,s.jsx)("div",{className:Fi,children:Gi.map((function(e,t){return(0,s.jsx)("div",{className:Oi,children:(0,s.jsx)("img",{src:e,alt:""})},t)}))})]})},Zi="HexagonalMesh1_container__4Mauo",Li="HexagonalMesh1_item__uupv2",zi=new Array(800).fill(0),Ui=function(){var e=(0,r.useRef)(null),t=function(){if(e.current){var t=e.current.getBoundingClientRect(),n=t.width/2,r=t.height/2;e.current.style.setProperty("--xPos","".concat(n,"px")),e.current.style.setProperty("--yPos","".concat(r,"px"))}};return(0,r.useEffect)((function(){t()}),[]),(0,s.jsx)("div",{className:Zi,onMouseMove:function(t){if(e.current){var n=e.current.getBoundingClientRect(),r=n.left,a=n.top,i=t.pageX-r,o=t.pageY-a;window.requestAnimationFrame((function(){e.current&&(e.current.style.setProperty("--xPos","".concat(i,"px")),e.current.style.setProperty("--yPos","".concat(o,"px")))}))}},onMouseLeave:t,ref:e,children:zi.map((function(e,t){return(0,s.jsx)("div",{className:Li},t)}))})},Hi="HexagonalMesh2_container__7Eq5-",Vi="HexagonalMesh2_item__RBkZx",Wi=new Array(800).fill(0),Yi=function(){var e=(0,r.useRef)(null),t=function(){if(e.current){var t=e.current.getBoundingClientRect(),n=t.width/2,r=t.height/2;e.current.style.setProperty("--xPos","".concat(n,"px")),e.current.style.setProperty("--yPos","".concat(r,"px"))}};return(0,r.useEffect)((function(){t()}),[]),(0,s.jsx)("div",{className:Hi,onMouseMove:function(t){if(e.current){var n=e.current.getBoundingClientRect(),r=n.left,a=n.top,i=t.pageX-r,o=t.pageY-a;window.requestAnimationFrame((function(){e.current&&(e.current.style.setProperty("--xPos","".concat(i,"px")),e.current.style.setProperty("--yPos","".concat(o,"px")))}))}},onMouseLeave:t,ref:e,children:Wi.map((function(e,t){return(0,s.jsx)("div",{className:Vi},t)}))})},Ji="HexagonalMesh3_container__7cOnb",qi="HexagonalMesh3_item__JnppT",Ki=new Array(800).fill(0),Xi=function(){var e=(0,r.useRef)(null);return(0,s.jsx)("div",{className:Ji,ref:e,children:Ki.map((function(e,t){return(0,s.jsx)("div",{className:qi},t)}))})},$i=n(34262),eo=n(39464),to=n(12304),no=n(24406),ro=n(4333),ao=n(83428),io=n(78874),oo=n(59401),so=n(73566),co=n(98059),lo=n(48107),uo=n(5698),mo=n(97998),fo=n(75013),go=n(14294),ho=n(18152),po=n(36108),vo=n(98522),xo=n(77093),yo=n(55017),Ao=n(67753),wo=n(26223),bo=n(98261),jo=n(93017),Do=n(77125),_o=n(79728),Mo=n(93366),ko=n(98587),Eo=n(2905),Co=n(11013),No=n(44251),So=n(94506),Bo=n(49434),Po=n(38419),Io=n(1627),To=n(20720),Ro=n(6355),Fo=n(892),Oo=n(49688),Go=n(78823),Qo=n(80856),Zo=n(26589),Lo=n(7364),zo=n(14283),Uo=n(54618),Ho=n(3248),Vo=n(18401),Wo=n(5405),Yo=n(82272),Jo=n(59512),qo=n(62965),Ko=n(88630),Xo=n(25449),$o=n(57551),es=n(89317),ts=n(72285),ns=n(68479),rs=n(71938),as=n(2825),is=n(43926),os=n(85369),ss=n(53318),cs=n(85008),ls=n(45452),us=n(4334),ds=n(72850),ms=n(19671),fs=n(97254),gs=n(70913),hs=n(56022),ps=n(16640),vs=n(23375),xs=n(12854),ys=n(88485),As=n(33040),ws=n(63392),bs=n(73888),js=n(48965),Ds=n(4711),_s=n(56931),Ms=n(24616),ks=n(51984),Es="IconScroll_container__pHJbN",Cs="IconScroll_row__ueyux",Ns=new Array(40).fill(0),Ss=function(){var e=function(){return(0,s.jsxs)("div",{children:[(0,s.jsx)($i.Z,{}),(0,s.jsx)(eo.Z,{}),(0,s.jsx)(to.Z,{}),(0,s.jsx)(no.Z,{}),(0,s.jsx)(ro.Z,{}),(0,s.jsx)(ao.Z,{}),(0,s.jsx)(io.Z,{}),(0,s.jsx)(oo.Z,{}),(0,s.jsx)(so.Z,{}),(0,s.jsx)(co.Z,{}),(0,s.jsx)(lo.Z,{}),(0,s.jsx)(uo.Z,{}),(0,s.jsx)(mo.Z,{}),(0,s.jsx)(fo.Z,{}),(0,s.jsx)(go.Z,{}),(0,s.jsx)(ho.Z,{}),(0,s.jsx)(po.Z,{}),(0,s.jsx)(vo.Z,{}),(0,s.jsx)(xo.Z,{}),(0,s.jsx)(yo.Z,{}),(0,s.jsx)(Ao.Z,{}),(0,s.jsx)(wo.Z,{}),(0,s.jsx)(bo.Z,{}),(0,s.jsx)(jo.Z,{}),(0,s.jsx)(Do.Z,{}),(0,s.jsx)(_o.Z,{}),(0,s.jsx)(Mo.Z,{}),(0,s.jsx)(ko.Z,{}),(0,s.jsx)(Eo.Z,{}),(0,s.jsx)(Co.Z,{}),(0,s.jsx)(No.Z,{}),(0,s.jsx)(So.Z,{}),(0,s.jsx)(Bo.Z,{}),(0,s.jsx)(Po.Z,{}),(0,s.jsx)(Io.Z,{}),(0,s.jsx)(To.Z,{}),(0,s.jsx)(Ro.Z,{}),(0,s.jsx)(Fo.Z,{}),(0,s.jsx)(Oo.Z,{}),(0,s.jsx)(Go.Z,{}),(0,s.jsx)(Qo.Z,{}),(0,s.jsx)(Zo.Z,{}),(0,s.jsx)(Lo.Z,{}),(0,s.jsx)(zo.Z,{}),(0,s.jsx)(Uo.Z,{}),(0,s.jsx)(Ho.Z,{}),(0,s.jsx)(Vo.Z,{}),(0,s.jsx)(Wo.Z,{}),(0,s.jsx)(Yo.Z,{}),(0,s.jsx)(Jo.Z,{}),(0,s.jsx)(qo.Z,{}),(0,s.jsx)(Ko.Z,{}),(0,s.jsx)(Xo.Z,{}),(0,s.jsx)($o.Z,{}),(0,s.jsx)(es.Z,{}),(0,s.jsx)(ts.Z,{}),(0,s.jsx)(ns.Z,{}),(0,s.jsx)(rs.Z,{}),(0,s.jsx)(as.Z,{}),(0,s.jsx)(R.Z,{}),(0,s.jsx)(is.Z,{}),(0,s.jsx)(os.Z,{}),(0,s.jsx)(ss.Z,{}),(0,s.jsx)(cs.Z,{}),(0,s.jsx)(ls.Z,{}),(0,s.jsx)(us.Z,{}),(0,s.jsx)(ds.Z,{}),(0,s.jsx)(ms.Z,{}),(0,s.jsx)(fs.Z,{}),(0,s.jsx)(x.Z,{}),(0,s.jsx)(gs.Z,{}),(0,s.jsx)(hs.Z,{}),(0,s.jsx)(ps.Z,{}),(0,s.jsx)(vs.Z,{}),(0,s.jsx)(xs.Z,{}),(0,s.jsx)(ys.Z,{}),(0,s.jsx)(As.Z,{}),(0,s.jsx)(ws.Z,{}),(0,s.jsx)(bs.Z,{}),(0,s.jsx)(js.Z,{}),(0,s.jsx)(Ds.Z,{}),(0,s.jsx)(_s.Z,{}),(0,s.jsx)(Ms.Z,{}),(0,s.jsx)(ks.Z,{})]})};return(0,s.jsx)("div",{className:Es,children:Ns.map((function(t,n){return(0,s.jsxs)("div",{className:Cs,children:[e(),e()]},n)}))})},Bs=n(67724),Ps=n(8812),Is="WipeSwitchover_container__zA+wD",Ts="WipeSwitchover_mask1__efwWk",Rs="WipeSwitchover_mask2__bTFbb",Fs="WipeSwitchover_mask3__Gaobg",Os="WipeSwitchover_mask4__ZERnA",Gs="WipeSwitchover_mask5__MkpDg",Qs="WipeSwitchover_page1__ex092",Zs="WipeSwitchover_page2__S7sFb",Ls="WipeSwitchover_page3__JtV7t",zs="WipeSwitchover_page4__9G6Y9",Us="WipeSwitchover_page5__uBeX2",Hs="WipeSwitchover_prevBtn__6vW6Q",Vs="WipeSwitchover_icon__Z3ryB",Ws="WipeSwitchover_nextBtn__sVZkG",Ys=.006,Js=[8,8,8,7,30],qs=[.72,.7,1,1,.32],Ks=function(){var e=(0,r.useRef)(null),t=(0,r.useRef)(null),n=(0,r.useRef)(null),a=(0,r.useState)(Js.length-1),i=(0,o.Z)(a,2),c=i[0],l=i[1],u=(0,r.useRef)(Js.length-1),d=(0,r.useRef)(!1),m=(0,r.useRef)(0),f=function e(t,n){if(t){d.current=!0;var r=t.style.strokeDashoffset,a=0;if(r)if("0"===r)a=Number((Js[u.current]*Ys).toFixed(2));else if(r.includes("px")){var i=Number(r.substring(0,r.length-2));if(n=Js[u.current])return d.current=!1,u.current=n,void l(n);a=Number((Js[u.current]*Ys+i).toFixed(2))}else if(n>u.current){if(i>=2*Js[n])return t.style.strokeDashoffset="0px",d.current=!1,u.current=n,void l(n);a=Number((Js[n]*Ys+i).toFixed(2))}}else{var o=Number(r);if(n=Js[u.current])return d.current=!1,u.current=n,void l(n);a=Number((Js[u.current]*Ys+o).toFixed(2))}else if(n>u.current){if(o>=2*Js[n])return t.style.strokeDashoffset="0px",d.current=!1,u.current=n,void l(n);a=Number((Js[n]*Ys+o).toFixed(2))}}else a=Number((Js[u.current]*Ys).toFixed(2));t.style.strokeDashoffset="".concat(a,"px"),m.current=window.requestAnimationFrame((function(){return e(t,n)}))}},g=function(){if(e.current&&n.current){var r=e.current.clientWidth,a=Math.ceil(600+.1*(r-1140));Array.prototype.forEach.call(n.current.children,(function(e,t){var n=window.getComputedStyle(e.children[0],null).getPropertyValue("transform");if(n&&n.startsWith("matrix")){var a=n.split(", ");a[0]="".concat(a[0].substring(0,7)).concat(Math.ceil(qs[t]*r)),n=a.join(", ")}e.children[0].style.transform=n})),t.current&&(e.current.style.height="".concat(a,"px"),Array.prototype.forEach.call(t.current.children,(function(e){if("g"===e.tagName){e.style.height="".concat(a,"px"),e.children[0].style.height="".concat(a,"px"),e.children[0].style.transform="".concat(a,"px");var t=Math.floor(r/2-240-40),n=Math.floor((a-340)/2);e.children[1].style.transform="translate(".concat(t,"px, ").concat(n,"px)")}})))}};return(0,r.useEffect)((function(){return g(),function(){m.current&&cancelAnimationFrame(m.current)}}),[]),(0,r.useEffect)((function(){return window.addEventListener("resize",g),function(){window.removeEventListener("resize",g)}}),[]),(0,s.jsxs)("div",{className:Is,ref:e,children:[(0,s.jsx)(gr,{intlTitle:"page.htmlVision.interactiveDesign.wipeTheEffect"}),(0,s.jsxs)("svg",{ref:t,children:[(0,s.jsxs)("defs",{ref:n,children:[(0,s.jsx)("mask",{id:"mask1",className:Ts,children:(0,s.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,s.jsx)("mask",{id:"mask2",className:Rs,children:(0,s.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,s.jsx)("mask",{id:"mask3",className:Fs,children:(0,s.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,s.jsx)("mask",{id:"mask4",className:Os,children:(0,s.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,s.jsx)("mask",{id:"mask5",className:Gs,children:(0,s.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,s.jsxs)("g",{className:Qs,mask:"url(#mask1)",children:[(0,s.jsx)("rect",{fill:"#e3e4e5"}),(0,s.jsx)("image",{xlinkHref:ma}),(0,s.jsx)("text",{fill:"#757576",children:"Book5"})]}),(0,s.jsxs)("g",{className:Zs,mask:"url(#mask2)",children:[(0,s.jsx)("rect",{fill:"#7e7f83"}),(0,s.jsx)("image",{xlinkHref:fa}),(0,s.jsx)("text",{fill:"#dedede",children:"Book4"})]}),(0,s.jsxs)("g",{className:Ls,mask:"url(#mask3)",children:[(0,s.jsx)("rect",{fill:"#f8d3cc"}),(0,s.jsx)("image",{xlinkHref:ga}),(0,s.jsx)("text",{fill:"#b0304e",children:"Book3"})]}),(0,s.jsxs)("g",{className:zs,mask:"url(#mask4)",children:[(0,s.jsx)("rect",{fill:"#d2e4ce"}),(0,s.jsx)("image",{xlinkHref:ha}),(0,s.jsx)("text",{fill:"#04756e",children:"Book2"})]}),(0,s.jsxs)("g",{className:Us,mask:"url(#mask5)",children:[(0,s.jsx)("rect",{fill:"#cad9e5"}),(0,s.jsx)("image",{xlinkHref:pa}),(0,s.jsx)("text",{fill:"#142864",children:"Book1"})]})]}),(0,s.jsx)("div",{className:Hs,style:c>=Js.length-1?{pointerEvents:"none"}:{},onClick:function(){if(!d.current&&n.current){var e=c+1,t=n.current.children[e].children[0];f(t,e)}},children:(0,s.jsx)("div",{className:Vs,children:(0,s.jsx)(Bs.Z,{})})}),(0,s.jsx)("div",{className:Ws,style:c<=0?{pointerEvents:"none"}:{},onClick:function(){if(!d.current&&n.current){var e=c-1,t=n.current.children[c].children[0];f(t,e)}},children:(0,s.jsx)("div",{className:Vs,children:(0,s.jsx)(Ps.Z,{})})})]})},Xs="AutoCompletePunctuation_container__EjYmN",$s="AutoCompletePunctuation_content__PIXsh",ec={"'":"'",'"':'"',"(":")","（":"）","【":"】","[":"]","《":"》","「":"」","『":"』","{":"}","“":"”","‘":"’"},tc=function(){var e=(0,r.useRef)(null),t=(0,r.useRef)(null),n=(0,r.useCallback)((function(e){var t=ec[e.data];if(t&&("insertText"===e.inputType||"compositionend"===e.type))if(["TEXTAREA","INPUT"].includes(e.target.tagName))e.target.setRangeText(t);else{var n=document.createTextNode(t),r=document.getSelection();if(r){var a=r.getRangeAt(0);a.insertNode(n),a.setEndBefore(n),a.commonAncestorContainer.normalize()}}}),[]);return(0,r.useEffect)((function(){return e.current&&(e.current.addEventListener("input",n),e.current.addEventListener("compositionend",n)),t.current&&(t.current.addEventListener("input",n),t.current.addEventListener("compositionend",n)),function(){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,s.jsxs)("div",{className:Xs,children:[(0,s.jsx)(gr,{intlTitle:"page.htmlVision.interactiveDesign.autoCompletePunctuation"}),(0,s.jsxs)("div",{className:$s,children:[(0,s.jsx)("textarea",{rows:5,placeholder:"maxLength is 100",maxLength:100,ref:e}),(0,s.jsx)("div",{contentEditable:"true",ref:t})]})]})},nc="InteractiveDesign_container__oK3No",rc="InteractiveDesign_box__+Trza",ac=[{element:(0,s.jsx)(br,{})},{element:(0,s.jsx)(Or,{})},{element:(0,s.jsx)(qr,{})},{element:(0,s.jsx)(mr,{data:dr[0]})},{element:(0,s.jsx)(ia,{})},{element:(0,s.jsx)(da,{})},{element:(0,s.jsx)(Ta,{})},{element:(0,s.jsx)(Ha,{})},{element:(0,s.jsx)(wi,{})},{element:(0,s.jsx)(Di,{})},{element:(0,s.jsx)(Ti,{})},{element:(0,s.jsx)(Qi,{})},{element:(0,s.jsx)(Ui,{})},{element:(0,s.jsx)(Yi,{})},{element:(0,s.jsx)(Xi,{})},{element:(0,s.jsx)(Ss,{})},{element:(0,s.jsx)(mr,{data:dr[1]})},{element:(0,s.jsx)(Ks,{})},{element:(0,s.jsx)(tc,{})}],ic=function(){var e=d().setScrollTop;return(0,r.useEffect)((function(){e(0)}),[]),(0,s.jsx)("div",{className:nc,children:ac.map((function(e,t){return(0,s.jsx)("div",{className:rc,children:e.element},t)}))})},oc={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"},sc=ue.GridBox,cc=new Array(29).fill("1"),lc=function(){var e=d().setScrollTop;return(0,r.useEffect)((function(){e(0)}),[]),(0,s.jsx)("div",{className:oc.container,children:(0,s.jsx)(ue,{differentScreenCols:[4,3,3,2,2],rowSpace:8,colSpace:8,children:cc.map((function(e,t){return(0,s.jsx)(sc,{children:(0,s.jsx)("div",{className:oc.box,children:(0,s.jsx)("div",{className:oc["bg".concat(t+1)]})})},t)}))})})},uc="LineCombination_container__toPmq",dc="LineCombination_blackBox__P5fH8",mc="LineCombination_blackBoxPoint__87aDR",fc="LineCombination_whiteBox__-MGXi",gc="LineCombination_whiteBoxPoint__Tz8Uh",hc="LineCombination_name__E7QvH",pc="LineCombination_value__5BYd0",vc=0,xc=0,yc=function(){var e=(0,r.useRef)(null),t=function t(){if(e.current){var n=T.findDOMNode(e.current);if(n){var r=n.children.length,a=n.children[xc],i=null==a?void 0:a.children[0],o=a.clientWidth,s=a.clientHeight,c=i.style;if(xc%2==0){var l=8;c.left&&(l=parseFloat(c.left));var u=l+4;if(u>=o-8-8)if(i.style.visibility="hidden",xc>=r-1){var d;xc=0;var m=null===(d=n.children[xc])||void 0===d?void 0:d.firstChild;m.style.left="".concat(8,"px"),m.style.visibility="visible"}else{var f;xc+=1;var g=null===(f=n.children[xc])||void 0===f?void 0:f.firstChild;g.style.left="-1px",g.style.visibility="visible"}else i.style.left="".concat(u,"px"),"visible"!==i.style.visibility&&(i.style.visibility="visible")}else{var h=-1,p=8;if(c.left&&(h=parseFloat(c.left)),c.bottom&&(p=parseFloat(c.bottom)),h>=o){var v=p-4;if(v<=8){var x;i.style.visibility="hidden",xc+=1;var y=null===(x=n.children[xc])||void 0===x?void 0:x.firstChild;y.style.left="".concat(8,"px"),y.style.visibility="visible"}else i.style.bottom="".concat(v,"px")}else if(h<=-1){var A=p+4;A>s-8-8&&(A=s,i.style.width="".concat(8,"px"),i.style.height="1px",i.style.left="".concat(8,"px")),i.style.bottom="".concat(A,"px")}else{var w=h+4;w>o-8-8&&(w=o,i.style.width="1px",i.style.height="".concat(8,"px"),i.style.bottom="".concat(s-8-8)),i.style.left="".concat(w,"px")}}vc=requestAnimationFrame(t)}}};return(0,r.useEffect)((function(){return e.current&&(vc=requestAnimationFrame(t)),function(){vc&&cancelAnimationFrame(vc)}}),[]),(0,s.jsxs)("div",{className:uc,ref:e,children:[(0,s.jsx)("div",{className:dc,children:(0,s.jsx)("div",{className:mc})}),(0,s.jsxs)("div",{className:fc,children:[(0,s.jsx)("div",{className:gc}),(0,s.jsx)("p",{className:hc,children:"Price"}),(0,s.jsx)("p",{className:pc,children:"$656"})]}),(0,s.jsx)("div",{className:dc,children:(0,s.jsx)("div",{className:mc})}),(0,s.jsxs)("div",{className:fc,children:[(0,s.jsx)("div",{className:gc}),(0,s.jsx)("p",{className:hc,children:"Quantity"}),(0,s.jsx)("p",{className:pc,children:"84351"})]}),(0,s.jsx)("div",{className:dc,children:(0,s.jsx)("div",{className:mc})}),(0,s.jsxs)("div",{className:fc,children:[(0,s.jsx)("div",{className:gc}),(0,s.jsx)("p",{className:hc,children:"Number of partners"}),(0,s.jsx)("p",{className:pc,children:"64"})]}),(0,s.jsx)("div",{className:dc,children:(0,s.jsx)("div",{className:mc})}),(0,s.jsxs)("div",{className:fc,children:[(0,s.jsx)("div",{className:gc}),(0,s.jsx)("p",{className:hc,children:"Date of establishment"}),(0,s.jsx)("p",{className:pc,children:"2008-10-01"})]}),(0,s.jsx)("div",{className:dc,children:(0,s.jsx)("div",{className:mc})}),(0,s.jsxs)("div",{className:fc,children:[(0,s.jsx)("div",{className:gc}),(0,s.jsx)("p",{className:hc,children:"Transaction Analyzed"}),(0,s.jsx)("p",{className:pc,children:"70Bn"})]}),(0,s.jsx)("div",{className:dc,children:(0,s.jsx)("div",{className:mc})})]})},Ac="ComplexLayout_container__xqRV5",wc="ComplexLayout_box__Hjeq7",bc=[{element:(0,s.jsx)(yc,{})}],jc=function(){var e=d().setScrollTop;return(0,r.useEffect)((function(){e(0)}),[]),(0,s.jsx)("div",{className:Ac,children:bc.map((function(e,t){return(0,s.jsx)("div",{className:wc,children:e.element},t)}))})},Dc=n(82029),_c="Page1_container__8IHn6",Mc="Page1_content__zgPdQ",kc="Page1_top__Tik59",Ec="Page1_title__qIkYy",Cc="Page1_author__EVTso",Nc="Page1_appoint__gEum0",Sc="Page1_articleContent__STpiB",Bc="Page1_subTitle__g0Ill",Pc="Page1_codeBox__hf4Aw",Ic="Page1_strong__Um16S",Tc=function(e){var t=(0,h.Z)();e.showPageIndex;return(0,s.jsx)("div",{className:_c,children:(0,s.jsxs)("div",{className:Mc,children:[(0,s.jsxs)("div",{className:kc,children:[(0,s.jsx)("div",{className:Ec,children:t.formatMessage({id:"page.htmlVision.applicationPageFrame.title"})}),(0,s.jsx)("div",{className:Cc,children:"".concat(t.formatMessage({id:"page.htmlVision.applicationPageFrame.author"}),": River")})]}),(0,s.jsxs)("div",{className:Nc,children:[(0,s.jsx)("div",{children:"".concat(t.formatMessage({id:"page.htmlVision.applicationPageFrame.appoint"}),":")}),(0,s.jsx)("div",{children:t.formatMessage({id:"page.htmlVision.applicationPageFrame.appointText1"})}),(0,s.jsx)("div",{children:t.formatMessage({id:"page.htmlVision.applicationPageFrame.appointText2"})})]}),(0,s.jsxs)("div",{className:Sc,children:[(0,s.jsx)("div",{className:Bc,children:t.formatMessage({id:"page.htmlVision.applicationPageFrame.subTitle1"})}),(0,s.jsx)("div",{children:"".concat(t.formatMessage({id:"page.htmlVision.applicationPageFrame.des1"}),":")}),(0,s.jsxs)("div",{className:Pc,children:[(0,s.jsx)("div",{children:"// ".concat(t.formatMessage({id:"page.htmlVision.applicationPageFrame.codeBox1.text"}))}),(0,s.jsx)("div",{children:''})]}),(0,s.jsxs)("div",{className:Pc,children:[(0,s.jsx)("div",{children:"// ".concat(t.formatMessage({id:"page.htmlVision.applicationPageFrame.codeBox2.text"}))}),(0,s.jsx)("div",{children:"