From bf9c8014549932d2fa358ee13f20b858081cba67 Mon Sep 17 00:00:00 2001 From: River <1007941801@qq.com> Date: Fri, 26 Apr 2024 16:29:00 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=94=9F=E6=88=90=E9=98=B4?= =?UTF-8?q?=E5=BD=B1=E8=8F=9C=E5=8D=95=E6=A8=A1=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/main.js | 2 +- docs/styles/main.css | 2 +- src/global.scss | 1 + src/layout/Menus/index.tsx | 6 + src/locale/en-US.js | 6 + src/locale/zh-CN.js | 6 + .../GenerateRegularPolygon/index.module.scss | 2 +- .../css/GenerateRegularPolygon/index.tsx | 8 - .../css/GenerateShadow/index.module.scss | 76 ++++++ src/pages/css/GenerateShadow/index.tsx | 239 ++++++++++++++++++ .../html/InteractiveDesign/index.module.scss | 2 +- src/pages/html/VisualDesign/index.module.scss | 2 +- src/routes/routes.tsx | 5 + 13 files changed, 344 insertions(+), 13 deletions(-) create mode 100644 src/pages/css/GenerateShadow/index.module.scss create mode 100644 src/pages/css/GenerateShadow/index.tsx diff --git a/docs/main.js b/docs/main.js index 56b4290..c427106 100644 --- a/docs/main.js +++ b/docs/main.js @@ -1 +1 @@ -!function(){var e,t,n,r={82900:function(e,t,n){"use strict";var r=n(67294),i=n(20745),a=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),i=(0,o.Z)(n,2),a=i[0],u=i[1],d=(0,r.useState)(0),m=(0,o.Z)(d,2),f=m[0],g=m[1],p=(0,r.useState)(0),h=(0,o.Z)(p,2),v=h[0],x=h[1],y=(0,r.useState)(0),A=(0,o.Z)(y,2),w=A[0],j=A[1],b=(0,r.useCallback)((function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;j(e),l.current&&l.current.scrollTop!==e&&(l.current.scrollTop=e)}),[]);return(0,s.jsx)(c.Provider,{value:{locale:a,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:b,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 p=n(86896),h=n(52758),v=n(13242),x=n(812),y=n(73218),A=function(e){var t=(0,r.useRef)({screenLeft:window.screenLeft,screenTop:window.screenTop}),n=(0,r.useRef)(0),i=function r(){if(t.current){var i=t.current,a=i.screenLeft,o=i.screenTop;if(a!==window.screenLeft||o!==window.screenTop){var s={screenLeft:window.screenLeft,screenTop:window.screenTop};t.current=s,e(s)}}n.current=window.requestAnimationFrame(r)};return(0,r.useEffect)((function(){return n.current=window.requestAnimationFrame(i),function(){n.current&&window.cancelAnimationFrame(n.current)}}),[]),t.current},w=window.location.host.includes("localhost")||window.location.host.includes("127.0.0.1"),j=function(e,t,n,i,a){var s=(0,r.useRef)(Math.random().toString(36).substring(2)),c=(0,r.useState)(null),l=(0,o.Z)(c,2),u=l[0],d=l[1],m=(0,r.useRef)(""),f=(0,r.useRef)(!1),g=(0,r.useRef)(0),p=(0,r.useRef)(0),h=function(){var e=0,t=0;if(null!=a&&a.current){var n=a.current.getBoundingClientRect(),r=n.top,i=n.left,o=n.width,c=n.height;e=i+window.screenLeft+o/2,t=r+window.screenTop+c/2}else e=window.innerWidth/2+window.screenLeft,t=window.innerHeight/2+window.screenTop;return{pageId:s.current,x:e,y:t}},v=(0,r.useCallback)((function(){var e=h(),t=window.localStorage.getItem(n);if(t){var r=JSON.parse(t);if(r&&r.length>0){var i=JSON.parse(t).filter((function(e){return e.pageId!==s.current}));i.unshift(e),window.localStorage.setItem(n,JSON.stringify(i))}else window.localStorage.setItem(n,JSON.stringify([e]))}else window.localStorage.setItem(n,JSON.stringify([e]))}),[]),x=(0,r.useCallback)((function(){var e=window.localStorage.getItem(n);if(e){var t=JSON.parse(e);if(t&&t.length>0){var r=JSON.parse(e).filter((function(e){return e.pageId===m.current}));window.localStorage.setItem(n,JSON.stringify(r))}}}),[]),y=(0,r.useCallback)((function(){if(e&&f.current){var n=document.getElementById(e);if(n){var r,i=h();null===(r=n.contentWindow)||void 0===r||r.postMessage(JSON.stringify(i),t)}}}),[]),j=(0,r.useCallback)((function(){if(e&&f.current){var n=document.getElementById(e);if(n){var r;g.current=0;var a={pageId:s.current,keepAlive:!0,timestamp:(new Date).getTime()};null===(r=n.contentWindow)||void 0===r||r.postMessage(JSON.stringify(a),t),p.current||(p.current=window.setTimeout((function(){p.current=0,window.localStorage.removeItem(i),m.current="",d(null)}),1500))}}}),[]),b=function(e){if(e){var t=JSON.parse(e);if(t&&t.length>0){for(var n=!1,r=0,i=t.length;r28?{eyeballLeft:9*(e-l)/d,eyeballTop:9*(n-u)/d}:{eyeballLeft:0,eyeballTop:0}}return null}),[i]);return(0,s.jsx)("div",{className:M,ref:t,children:o&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:k,children:0===o.eyeballLeft&&0===o.eyeballTop?(0,s.jsx)("div",{className:N}):(0,s.jsx)("div",{className:E,style:{transform:"translate(".concat(o.eyeballLeft,"px, ").concat(o.eyeballTop,"px)")}})}),(0,s.jsx)("div",{className:k,children:0===o.eyeballLeft&&0===o.eyeballTop?(0,s.jsx)("div",{className:N}):(0,s.jsx)("div",{className:E,style:{transform:"translate(".concat(o.eyeballLeft,"px, ").concat(o.eyeballTop,"px)")}})})]})})},S=n.p+"images/235f02ed.jpeg",P=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 I(e){for(var t=1;t=2&&t[1])return[t[1]]}return["html"]}),[n]);return(0,r.useEffect)((function(){h()}),[c]),(0,r.useEffect)((function(){return window.addEventListener("resize",h),function(){window.removeEventListener("resize",h)}}),[]),(0,s.jsxs)("div",{className:ce,ref:f,children:[(0,s.jsxs)("div",{className:le,children:[(0,s.jsx)("div",{className:ue,children:(0,s.jsx)(oe.Z,{type:"primary",onClick:function(){l(!c)},style:{marginBottom:16},children:c?(0,s.jsx)(re.Z,{}):(0,s.jsx)(ie.Z,{})})}),(0,s.jsx)(se.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:me,children:!c&&(0,s.jsx)("span",{children:e.formatMessage({id:"common.keepUpdating"})})})]})},pe="Home_container__RMLhs",he="Home_container_body__-OVNZ",ve="Home_container_content__q7A-W",xe=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,i=(0,m.V$)(xb),a=(0,m.TH)(),o=(0,m.s0)(),c=(0,r.useRef)(null);return(0,r.useEffect)((function(){var e=a.pathname;e&&"/"!==e||o("/html/visualDesign")}),[a]),(0,r.useEffect)((function(){n(c)}),[]),(0,s.jsxs)("div",{className:pe,children:[(0,s.jsx)(W,{}),(0,s.jsxs)("div",{className:he,children:[(0,s.jsx)(ge,{}),(0,s.jsx)("div",{className:ve,onScroll:function(){var e;t(null===(e=c.current)||void 0===e?void 0:e.scrollTop)},ref:c,children:i})]})]})},ye=n(94184),Ae=n.n(ye),we={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"},je=function(e){var t,n=e.differentScreenCols,i=e.rowSpace,a=void 0===i?0:i,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:Ae()((t={},(0,P.Z)(t,we.container,!0),(0,P.Z)(t,we["gt2000-".concat(m[0])],!0),(0,P.Z)(t,we["eq1700_2000-".concat(m[1])],!0),(0,P.Z)(t,we["eq1400_1700-".concat(m[2])],!0),(0,P.Z)(t,we["eq1200_1400-".concat(m[3])],!0),(0,P.Z)(t,we["eq500_1200-".concat(m[4])],!0),(0,P.Z)(t,we["lt500-".concat(m[5])],!!m[5]),t)),children:(0,s.jsx)("div",{className:"".concat(we.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:a,colSpace:c})})):d||null})})};je.GridBox=function(e){var t=e.key,n=e.className,r=e.rowSpace,i=void 0===r?0:r,a=e.colSpace,o=void 0===a?0:a,c=e.children;return(0,s.jsx)("div",{style:{boxSizing:"border-box",width:"100%",padding:"".concat(i/2,"px ").concat(o/2,"px")},className:n,children:c},t)};var be=je,_e="GlassMimicry1_container__3KhAO",De="GlassMimicry1_card__WwxgS",Me="GlassMimicry1_circle__DoolB",ke="GlassMimicry1_rect__Or-6t",Ne=function(){return(0,s.jsxs)("div",{className:_e,children:[(0,s.jsxs)("div",{className:De,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:Me}),(0,s.jsx)("div",{className:ke})]})},Ee="GlassMimicry2_container__S445M",Ce="GlassMimicry2_card__3l4Ng",Se="GlassMimicry2_circle__VaL67",Pe="GlassMimicry2_rect__qdTWE",Be=function(){return(0,s.jsxs)("div",{className:Ee,children:[(0,s.jsxs)("div",{className:Ce,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:Se}),(0,s.jsx)("div",{className:Pe})]})},Ie="MixBlendMode_container__Fh1Tw",Te="MixBlendMode_content__0uwYQ",Re=function(){return(0,s.jsx)("div",{className:Ie,children:(0,s.jsx)("div",{className:Te})})},Fe=function(e,t){var n=e.finalText,i=void 0===n?"":n,a=e.textList,c=void 0===a?[]:a,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,p=(0,r.useRef)(c.length>0?0:-1),h=(0,r.useState)(-1===p.current?i:c[p.current]||""),v=(0,o.Z)(h,2),x=v[0],y=v[1],A=(0,r.useRef)(0),w=(0,r.useRef)(0),j=(0,r.useRef)(0),b=(0,r.useCallback)((function(){var e=(new Date).getTime();if(e-w.current>=m)y(i),p.current=-1,j.current=e;else if(e-j.current>=u){var t=-1===p.current?0:p.current+1;t>=c.length&&(t=0),y(c[t]),p.current=t,j.current=e}A.current=requestAnimationFrame(b)}),[m]),_=(0,r.useCallback)((function(){var e=(new Date).getTime();w.current=e,j.current=e,A.current=requestAnimationFrame(b)}),[]),D=function(){A.current&&cancelAnimationFrame(A.current),p.current=0,y(c[0]),_()};return(0,r.useImperativeHandle)(t,(function(){return{restart:D}})),(0,r.useEffect)((function(){return _(),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)}))})},Oe=r.forwardRef(Fe),Ge="SwitchingText_container__9ICqS",Ze="SwitchingText_content__6PttP",Qe="SwitchingText_btn__9UW9Y",Le=function(){var e=(0,r.useRef)(null);return(0,s.jsxs)("div",{className:Ge,children:[(0,s.jsx)(Oe,{className:Ze,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)(oe.Z,{type:"primary",className:Qe,onClick:function(){var t;null===(t=e.current)||void 0===t||t.restart()},children:"Once Again"})]})},ze=n(13614),He=n.n(ze),Ve="Typed1_container__2a+Le",Ue="Typed1_btn__5+jTK",We=function(){var e=(0,r.useRef)(null),t=(0,r.useRef)(null);return(0,r.useEffect)((function(){return e.current&&(t.current=new(He())(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:Ve,children:[(0,s.jsx)("p",{ref:e}),(0,s.jsx)(oe.Z,{type:"primary",className:Ue,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"})]})},Ye="Typed2_container__XvJpL",Je="Typed2_btn__lqx2D",qe=function(){var e=(0,r.useRef)(null),t=(0,r.useRef)(null);return(0,r.useEffect)((function(){return e.current&&(t.current=new(He())(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:Ye,children:[(0,s.jsx)("p",{ref:e}),(0,s.jsx)(oe.Z,{type:"primary",className:Je,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"})]})};function Ke(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=function(e,t){if(!e)return;if("string"==typeof e)return Xe(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Xe(e,t)}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0,i=function(){};return{s:i,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,o=!0,s=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return o=e.done,e},e:function(e){s=!0,a=e},f:function(){try{o||null==n.return||n.return()}finally{if(s)throw a}}}}function Xe(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n2&&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 i=r.offsetWidth;return document.body.removeChild(r),i},et=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,i=!(arguments.length>4&&void 0!==arguments[4])||arguments[4],a="",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){a=i?o+"...":o;break}}return document.body.removeChild(l),a};function tt(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 nt(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),a&&(a.style.strokeDashoffset="".concat(r.toString()));i.current=window.requestAnimationFrame(e)};return(0,r.useEffect)((function(){return a(),function(){i.current&&cancelAnimationFrame(i.current)}}),[]),(0,s.jsx)("div",{className:Lt,children:(0,s.jsx)("div",{className:zt,children:(0,s.jsxs)("div",{className:Ht,children:[(0,s.jsx)("div",{className:Vt}),(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:Ut,children:"".concat(Math.floor(n.current),"%")})]})})})},Yt={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-"},Jt=new Array(15).fill(0),qt=function(){return(0,s.jsx)("div",{className:Yt.container,children:(0,s.jsx)("div",{className:Yt.content,children:Jt.map((function(e,t){return(0,s.jsx)("span",{className:Yt["span".concat(t)]},t)}))})})},Kt={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"},Xt=new Array(9).fill(0),$t=function(){return(0,s.jsx)("div",{className:Kt.container,children:(0,s.jsx)("div",{className:Kt.content,children:Xt.map((function(e,t){return(0,s.jsx)("div",{className:Kt["item".concat(t)]},t)}))})})},en="TextWrap_container__vVl1N",tn="TextWrap_topText__eHwkJ",nn="TextWrap_poly__EwnPy",rn="TextWrap_leftFloat__Uo9rJ",an="TextWrap_rightFloat__ezXwd",on=function(){var e=(0,p.Z)().formatMessage({id:"page.htmlVision.visualDesign.quantumEntanglementTip"});return(0,s.jsxs)("div",{className:en,children:[(0,s.jsx)("div",{className:tn,children:e.repeat(40)}),(0,s.jsx)("div",{className:"".concat(nn," ").concat(rn)}),(0,s.jsx)("div",{className:"".concat(nn," ").concat(an)}),(0,s.jsx)("span",{children:e.repeat(180)})]})},sn="WaterDropLogin_container__d6dk7",cn="WaterDropLogin_content__jiIiV",ln="WaterDropLogin_drop__Nq7iB",un="WaterDropLogin_contentBox__nL6ua",dn="WaterDropLogin_inputBox__2oxY0",mn="WaterDropLogin_btns__Sil7M",fn="WaterDropLogin_signup__h0wNv",gn=function(){return(0,s.jsx)("div",{className:sn,children:(0,s.jsxs)("div",{className:cn,children:[(0,s.jsx)("div",{className:ln,children:(0,s.jsxs)("div",{className:un,children:[(0,s.jsx)("h2",{children:"Sign in"}),(0,s.jsxs)("form",{children:[(0,s.jsx)("div",{className:dn,children:(0,s.jsx)("input",{type:"text",placeholder:"Username"})}),(0,s.jsx)("div",{className:dn,children:(0,s.jsx)("input",{type:"password",placeholder:"Password"})}),(0,s.jsx)("div",{className:dn,children:(0,s.jsx)("input",{type:"submit",value:"Login"})})]})]})}),(0,s.jsxs)("div",{className:mn,children:[(0,s.jsx)("span",{children:"Forget"}),(0,s.jsx)("span",{children:"Password"})]}),(0,s.jsx)("div",{className:"".concat(mn," ").concat(fn),children:"Signup"})]})})},pn="TextShadow_container__3+vOx",hn="TextShadow_content__ngpOP",vn=function(){var e=(0,p.Z)().formatMessage({id:"page.htmlVision.visualDesign.textShadow"});return(0,s.jsx)("div",{className:pn,children:(0,s.jsx)("div",{className:hn,"data-text":e,children:e})})},xn="HorseRacelamp_container__bVbh9",yn="HorseRacelamp_scroll__kRja6",An=new Array(4).fill(0),wn=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:xn,children:An.map((function(t,n){return(0,s.jsxs)("div",{className:yn,children:[e(),e()]},n)}))})},jn="HarmonyLogo_container__uTwnw",bn="HarmonyLogo_content__Azar3",_n="HarmonyLogo_top__zSfqW",Dn="HarmonyLogo_line__6yj7q",Mn="HarmonyLogo_bottom__4ZSOr",kn=function(){return(0,s.jsxs)("div",{className:jn,children:[(0,s.jsxs)("div",{className:bn,children:[(0,s.jsx)("div",{className:_n,children:(0,s.jsx)("div",{className:Dn})}),(0,s.jsx)("div",{className:Mn})]}),(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"})]})})]})},Nn="Preserve3D_container__EZ7l0",En="Preserve3D_content__yxNQy",Cn="Preserve3D_cubeInner__oYaXM",Sn="Preserve3D_top__6op2D",Pn="Preserve3D_bottom__Rmjl+",Bn="Preserve3D_front__+CRYT",In="Preserve3D_back__-ZjU+",Tn="Preserve3D_left__YYWAD",Rn="Preserve3D_right__R5Aqm",Fn="Preserve3D_cubeOuter__pwwjS",On=function(){return(0,s.jsx)("div",{className:Nn,children:(0,s.jsxs)("div",{className:En,children:[(0,s.jsxs)("div",{className:Cn,children:[(0,s.jsx)("div",{className:Sn}),(0,s.jsx)("div",{className:Pn}),(0,s.jsx)("div",{className:Bn}),(0,s.jsx)("div",{className:In}),(0,s.jsx)("div",{className:Tn}),(0,s.jsx)("div",{className:Rn})]}),(0,s.jsxs)("div",{className:Fn,children:[(0,s.jsx)("div",{className:Sn}),(0,s.jsx)("div",{className:Pn}),(0,s.jsx)("div",{className:Bn}),(0,s.jsx)("div",{className:In}),(0,s.jsx)("div",{className:Tn}),(0,s.jsx)("div",{className:Rn})]})]})})},Gn="RotateAndBgFixed_container__Kc-WW",Zn="RotateAndBgFixed_box__DkROP",Qn="RotateAndBgFixed_a__Yi0br",Ln="RotateAndBgFixed_b__Vv6J0",zn="RotateAndBgFixed_c__xgerx",Hn="RotateAndBgFixed_d__d9aYT",Vn="RotateAndBgFixed_e__V1OJc",Un=function(){return(0,s.jsx)("div",{className:Gn,children:(0,s.jsxs)("div",{className:Zn,children:[(0,s.jsx)("div",{className:Qn,children:(0,s.jsx)("img",{src:Et,alt:""})}),(0,s.jsx)("div",{className:Ln,children:(0,s.jsx)("img",{src:Ct,alt:""})}),(0,s.jsx)("div",{className:zn,children:(0,s.jsx)("img",{src:St,alt:""})}),(0,s.jsx)("div",{className:Hn,children:(0,s.jsx)("img",{src:Pt,alt:""})}),(0,s.jsx)("div",{className:Vn,children:(0,s.jsx)("img",{src:Bt,alt:""})})]})})},Wn="HexagonalMesh_container__mdJJ9",Yn="HexagonalMesh_item__hVzAo",Jn=new Array(300).fill(0),qn=function(){return(0,s.jsx)("div",{className:Wn,children:Jn.map((function(e,t){return(0,s.jsx)("div",{className:Yn},t)}))})},Kn="HexagonalRadar_container__hFck5",Xn="HexagonalRadar_content__sj-0h",$n="HexagonalRadar_item__IF+DR",er="HexagonalRadar_maskBox__SqK8S",tr=new Array(5).fill(0),nr=function(){return(0,s.jsxs)("div",{className:Kn,children:[(0,s.jsx)("div",{className:Xn,children:tr.map((function(e,t){return(0,s.jsx)("div",{className:$n},t)}))}),(0,s.jsx)("div",{className:er})]})},rr=n.p+"images/d2fa7cd8.png",ir="HoverEnlargement_container__t9rVI",ar=function(){return(0,s.jsx)("div",{className:ir,children:(0,s.jsx)("img",{src:rr,alt:""})})},or="ConicGradientRing_container__CU+cz",sr="ConicGradientRing_box__6P5ea",cr="ConicGradientRing_item__jy15e",lr="ConicGradientRing_semicircle__-N2Ks";function ur(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 dr(e){for(var t=1;t0){var t=0,n=mr.map((function(n,r){var i="".concat(t,"deg"),a=n.num/e*360;return t+=a,dr(dr({},n),{},{deg:"".concat(a,"deg"),rotate:i,color:b[r]})}));return n}return[]}),[mr]);return(0,s.jsx)("div",{className:or,children:(0,s.jsx)("div",{className:sr,children:e.map((function(e){return(0,s.jsx)("div",{className:cr,style:{background:"conic-gradient(".concat(e.color," 0,transparent ").concat(e.deg,")"),transform:"rotate(".concat(e.rotate,")")},children:(0,s.jsx)("div",{className:lr,style:{backgroundColor:e.color}})},e.name)}))})})},gr=n.p+"images/c6bccf3b.png",pr=n.p+"images/71329ec9.jpg",hr="GlassDesign1_container__jIg8H",vr="GlassDesign1_glass__x+jsp",xr=function(){return(0,s.jsxs)("div",{className:hr,children:[(0,s.jsx)("img",{src:gr,alt:""}),(0,s.jsx)("div",{className:vr}),(0,s.jsx)("svg",{style:{display:"none"},children:(0,s.jsx)("defs",{children:(0,s.jsxs)("filter",{id:"glassFilter1",children:[(0,s.jsx)("feImage",{result:"pict1",xlinkHref:pr,x:"0",y:"0",width:"517",height:"517"}),(0,s.jsx)("feDisplacementMap",{scale:"30",xChannelSelector:"R",yChannelSelector:"R",in2:"pict1",in:"SourceGraphic"})]})})})]})},yr=n.p+"images/3ef61d0d.jpg",Ar="GlassDesign2_container__BLEzA",wr="GlassDesign2_glass__UZeM9",jr=function(){return(0,s.jsxs)("div",{className:Ar,children:[(0,s.jsx)("img",{src:gr,alt:""}),(0,s.jsx)("div",{className:wr}),(0,s.jsx)("svg",{style:{display:"none"},children:(0,s.jsx)("defs",{children:(0,s.jsxs)("filter",{id:"glassFilter2",children:[(0,s.jsx)("feImage",{result:"pict1",xlinkHref:yr,x:"0",y:"0",width:"523",height:"330"}),(0,s.jsx)("feDisplacementMap",{scale:"30",xChannelSelector:"R",yChannelSelector:"R",in2:"pict1",in:"SourceGraphic"})]})})})]})},br="Ribbon_container__ZOkiq",_r="Ribbon_ribbon__wI2K8",Dr=function(){return(0,s.jsxs)("div",{className:br,children:[(0,s.jsx)("div",{className:_r,style:{"--fontSize":"34px",fontWeight:600},children:"Visualization Collection"}),(0,s.jsxs)("div",{className:_r,style:{"--fontSize":"28px","--background":"#8A9B0F",fontWeight:500},children:["Visualization Collection ",(0,s.jsx)("br",{})," Visualization Collection"]}),(0,s.jsxs)("div",{className:_r,style:{"--background":"#45ADA8"},children:["Visualization Collection",(0,s.jsx)("br",{})," Visualization Collection",(0,s.jsx)("br",{})," Visualization Collection"]})]})},Mr=n(78343),kr=n(79501);function Nr(e){return e.toString().padStart(2,"0")}var Er,Cr=function(e){if(e){var t=e.slice(0,19).replace(/-/g,"/");return e.endsWith("+0000 UTC")?(0,kr.Z)((0,Mr.Z)(new Date(t),8),"YYYY/MM/DD HH:mm:ss"):t}return""},Sr="ActivityCountDown_container__z9J8Y",Pr="ActivityCountDown_num__F1ysh",Br="ActivityCountDown_unit__X1r8-",Ir=function(e){var t=e.countParams,n=e.overCallback,i=e.style,a=void 0===i?{}:i,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,p=void 0===g?59:g,h=(0,r.useState)({d:l,h:d,m:f,s:p}),v=(0,o.Z)(h,2),x=v[0],y=v[1],A=(0,r.useRef)(x),w=(0,r.useRef)(!0),j=(0,r.useRef)(0),b=function(){if(!w.current){var e=A.current,t=e.d,r=e.h,i=e.m,a=e.s,o=0===r&&0===i&&0===a,s=0===i&&0===a,c=0===a;if(0===t&&0===r&&0===i&&0===a)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:i-1,s:59};A.current=d,y(d)}else{var m={d:t,h:r,m:i,s:a-1};A.current=m,y(m)}}};return(0,r.useEffect)((function(){var e=t.day,r=void 0===e?59:e,i=t.hour,a=void 0===i?59:i,o=t.minute,s=void 0===o?59:o,c=t.seconds,l={d:r,h:a,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(),j.current&&(window.clearInterval(j.current),j.current=0)):w.current&&(w.current=!1,j.current=window.setInterval(b,1e3))}),[t]),(0,r.useEffect)((function(){return function(){j.current&&window.clearInterval(j.current)}}),[]),(0,s.jsx)(s.Fragment,{children:(0,s.jsxs)("div",{className:Sr,style:a,children:[(0,s.jsx)("div",{className:Pr,children:Nr(x.d)}),(0,s.jsx)("div",{className:Br,children:"天"}),(0,s.jsx)("div",{className:Pr,children:Nr(x.h)}),(0,s.jsx)("div",{className:Br,children:"时"}),(0,s.jsx)("div",{className:Pr,children:Nr(x.m)}),(0,s.jsx)("div",{className:Br,children:"分"}),(0,s.jsx)("div",{className:Pr,children:Nr(x.s)}),(0,s.jsx)("div",{className:Br,children:"秒"})]})})},Tr="ActivityCountDown_container__Nw3or",Rr="ActivityCountDown_title__5HUMy",Fr=function(){var e=function(e){var t=e.type,n=void 0===t?"ms":t,r=e.startTime,i=void 0===r?"":r,a=e.serverTime,o=void 0===a?0:a,s="s"===n?1e3*Number(o):o;if(!i)return{day:0,hour:0,minute:0,seconds:0,timeRemaining:0};var c="string"==typeof i?Cr(i):i,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,Mr.Z)(new Date,2).getTime(),serverTime:(new Date).getTime()}),t=(0,r.useState)(!1),n=(0,o.Z)(t,2),i=n[0],a=n[1];return(0,s.jsxs)("div",{className:Tr,children:[(0,s.jsx)("div",{className:Rr,children:i?"活动正在进行中":"距离活动开始剩余："}),!i&&(0,s.jsx)(Ir,{countParams:e,overCallback:function(){a(!0)},style:{marginTop:"16px"}})]})},Or="VisualDesign_container__oN2JR",Gr="VisualDesign_box__-TYNG",Zr=be.GridBox,Qr=[{element:(0,s.jsx)(Ne,{})},{element:(0,s.jsx)(Be,{})},{element:(0,s.jsx)(Re,{})},{element:(0,s.jsx)(Le,{})},{element:(0,s.jsx)(We,{})},{element:(0,s.jsx)(qe,{})},{element:(0,s.jsx)(at,{})},{element:(0,s.jsx)(on,{})},{element:(0,s.jsx)(mt,{})},{element:(0,s.jsx)(pt,{})},{element:(0,s.jsx)(xt,{})},{element:(0,s.jsx)(Nt,{})},{element:(0,s.jsx)(Ot,{})},{element:(0,s.jsx)(Qt,{})},{element:(0,s.jsx)(Wt,{})},{element:(0,s.jsx)(qt,{})},{element:(0,s.jsx)(ut,{})},{element:(0,s.jsx)($t,{})},{element:(0,s.jsx)(gn,{})},{element:(0,s.jsx)(vn,{})},{element:(0,s.jsx)(wn,{})},{element:(0,s.jsx)(kn,{})},{element:(0,s.jsx)(On,{})},{element:(0,s.jsx)(Un,{})},{element:(0,s.jsx)(qn,{})},{element:(0,s.jsx)(nr,{})},{element:(0,s.jsx)(ar,{})},{element:(0,s.jsx)(fr,{})},{element:(0,s.jsx)(xr,{})},{element:(0,s.jsx)(jr,{})},{element:(0,s.jsx)(Dr,{})},{element:(0,s.jsx)(Fr,{})}],Lr=function(){var e=d().setScrollTop;return(0,r.useEffect)((function(){e(0)}),[]),(0,s.jsx)("div",{className:Or,children:(0,s.jsx)(be,{differentScreenCols:[2,2,2,1,1],rowSpace:4,colSpace:4,children:Qr.map((function(e,t){return(0,s.jsx)(Zr,{children:(0,s.jsx)("div",{className:Gr,children:e.element})},t)}))})})},zr=[],Hr=function(e){e.data,(0,p.Z)();return null},Vr="ModuleTitle_container__7ZCMv",Ur=function(e){var t=(0,p.Z)(),n=e.intlTitle,r=e.style,i=void 0===r?{}:r;return(0,s.jsx)("div",{className:Vr,style:i,children:t.formatMessage({id:n})})},Wr=n.p+"images/6765fa3b.png",Yr="MagnifyingGlass_container__z7+HK",Jr="MagnifyingGlass_content__csBAU",qr="MagnifyingGlass_smallBox__1rC23",Kr="MagnifyingGlass_mask__kbQ6H",Xr="MagnifyingGlass_floatBox__Msmv9",$r="MagnifyingGlass_bigBox__dtenq",ei=function(){var e=d(),t=e.scrollTop,n=e.headHeight,i=(0,r.useRef)(null),a=(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:Yr,children:(0,s.jsxs)("div",{className:Jr,children:[(0,s.jsxs)("div",{className:qr,ref:i,children:[(0,s.jsx)(Ur,{intlTitle:"page.htmlVision.interactiveDesign.magnifyingGlass",style:{top:"-80px",left:"114%"}}),(0,s.jsx)("div",{className:Kr,onMouseOver:function(){f(!0)},onMouseMove:function(e){var r=Y.findDOMNode(i.current),o=Y.findDOMNode(a.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),p=f/(l-d),h=Y.findDOMNode(c.current),v=h.children[0];v.style.left=-g*(v.offsetWidth-h.offsetWidth)+"px",v.style.top=-p*(v.offsetHeight-h.offsetHeight)+"px"},onMouseLeave:function(){f(!1)}}),(0,s.jsx)("div",{className:Xr,style:{visibility:m?"visible":"hidden"},ref:a}),(0,s.jsx)("img",{src:Wr})]}),(0,s.jsx)("div",{className:$r,ref:c,children:(0,s.jsx)("img",{src:Wr,style:{visibility:m?"visible":"hidden"}})})]})})},ti="CropImage_container__agQZ5",ni="CropImage_leftBox__rxH+K",ri="CropImage_img1__vvyEU",ii="CropImage_img2__CuOAQ",ai="CropImage_cropBox__A4fdb",oi="CropImage_dot__TnuYQ",si="CropImage_leftUp__RO+TV",ci="CropImage_up__fR18N",li="CropImage_rightUp__5Btk7",ui="CropImage_right__nbAwk",di="CropImage_rightDown__8vsgu",mi="CropImage_down__0RD60",fi="CropImage_leftDown__Ssc21",gi="CropImage_left__qEy8B",pi="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"}(Er||(Er={}));var hi=function(){var e=d().scrollTop,t=(0,r.useRef)(0),n=(0,r.useRef)(0),i=(0,r.useRef)(!1),a=(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),p=(0,r.useRef)(0),h=(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=Y.findDOMNode(l.current),i=x(r).left,a=i+t.current-4;n>a?n=a:ns&&(n=s);var c=a.offsetHeight;a.style.height=c+o-n+"px",a.style.top=a.offsetTop+n-o+"px"},w=function(e){var t=e.clientX,n=Y.findDOMNode(l.current),r=x(n).left,i=Y.findDOMNode(m.current),a=x(i).left,o=a+i.offsetWidth-4;to&&(t=o);var s=i.offsetWidth;i.style.width=s+a-t+"px",i.style.left=i.offsetLeft+t-a+"px"},j=function(t){var r=t.clientY+e,i=Y.findDOMNode(l.current),a=x(i).top,o=a+n.current-4;ro&&(r=o);var s=Y.findDOMNode(m.current),c=s.offsetHeight-2,u=r-c-x(s).top;s.style.height=c+u+"px"},b=function(){var e=Y.findDOMNode(m.current),t=e.offsetWidth,n=e.offsetHeight,r=e.offsetLeft,i=e.offsetTop,a=r+t,o=i+n;Y.findDOMNode(u.current).style.clip="rect(".concat(i,"px,").concat(a,"px,").concat(o,"px,").concat(r,"px)")},_=function(){var e=Y.findDOMNode(m.current),t=e.offsetWidth,n=e.offsetHeight,r=e.offsetLeft,i=e.offsetTop,a=r+t,o=i+n,s=Y.findDOMNode(f.current);s.style.top="".concat(-i,"px"),s.style.left="".concat(-r,"px"),s.style.clip="rect(".concat(i,"px,").concat(a,"px,").concat(o,"px,").concat(r,"px)")},D=function(e,t){e.stopPropagation(),i.current=!0,a.current=t},M=function(){i.current=!1,o.current=!1};return(0,r.useEffect)((function(){var e=Y.findDOMNode(l.current),r=e.offsetWidth,i=e.offsetHeight;t.current=r,n.current=i}),[]),(0,s.jsxs)("div",{className:ti,onMouseMove:function(e){if(o.current){var r=Y.findDOMNode(m.current),s=r.offsetWidth,c=r.offsetHeight,l=e.clientX-g.current,u=e.clientY-p.current,d=v.current+u,f=h.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"),b(),_()}if(i.current){switch(a.current){case Er.right:y(e);break;case Er.up:A(e);break;case Er.left:w(e);break;case Er.down:j(e);break;case Er.leftUp:w(e),A(e);break;case Er.leftDown:w(e),j(e);break;case Er.rightUp:y(e),A(e);break;case Er.rightDown:y(e),j(e)}b(),_()}},onMouseUp:M,onMouseLeave:M,ref:c,children:[(0,s.jsx)(Ur,{intlTitle:"page.htmlVision.interactiveDesign.dragAndDropClipBox"}),(0,s.jsxs)("div",{className:ni,ref:l,children:[(0,s.jsx)("img",{src:ot,className:ri}),(0,s.jsx)("img",{src:ot,className:ii,ref:u}),(0,s.jsxs)("div",{className:ai,onMouseDown:function(e){g.current=e.clientX,p.current=e.clientY;var t=Y.findDOMNode(m.current);v.current=t.offsetTop,h.current=t.offsetLeft,o.current=!0},ref:m,children:[(0,s.jsx)("div",{className:"".concat(oi," ").concat(si),onMouseDown:function(e){return D(e,Er.leftUp)}}),(0,s.jsx)("div",{className:"".concat(oi," ").concat(ci),onMouseDown:function(e){return D(e,Er.up)}}),(0,s.jsx)("div",{className:"".concat(oi," ").concat(li),onMouseDown:function(e){return D(e,Er.rightUp)}}),(0,s.jsx)("div",{className:"".concat(oi," ").concat(ui),onMouseDown:function(e){return D(e,Er.right)}}),(0,s.jsx)("div",{className:"".concat(oi," ").concat(di),onMouseDown:function(e){return D(e,Er.rightDown)}}),(0,s.jsx)("div",{className:"".concat(oi," ").concat(mi),onMouseDown:function(e){return D(e,Er.down)}}),(0,s.jsx)("div",{className:"".concat(oi," ").concat(fi),onMouseDown:function(e){return D(e,Er.leftDown)}}),(0,s.jsx)("div",{className:"".concat(oi," ").concat(gi),onMouseDown:function(e){return D(e,Er.left)}})]})]}),(0,s.jsx)("div",{className:pi,children:(0,s.jsx)("img",{src:ot,ref:f})})]})},vi=n.p+"images/e55cd06c.jpg",xi=n.p+"images/f44f33e9.jpg",yi=n.p+"images/ccd69096.jpg",Ai=n.p+"images/dbd623e3.jpg",wi=n.p+"images/d327c52a.jpg",ji=n.p+"images/f160c0ae.jpg",bi={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 _i(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 Di(e){for(var t=1;t=0;c--){var l=ki[c];if(l.id===t){r=l.price,s=l;break}}s&&o.unshift(Di(Di({},s),{},{num:1}))}a(o),d(!1),h(g+r)},children:[(0,s.jsxs)("div",{className:bi.tableHead,children:[(0,s.jsx)("div",{className:bi.tableCell,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.title"})}),(0,s.jsx)("div",{className:bi.tableCell,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.price"})}),(0,s.jsx)("div",{className:bi.tableCell,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.count"})})]}),i.map((function(e){var t=e.id,n=e.num,r=e.name,i=e.price;return(0,s.jsxs)("div",{className:bi.tableRow,children:[(0,s.jsx)("div",{className:bi.tableCell,children:r}),(0,s.jsx)("div",{className:bi.tableCell,children:"￥".concat(i)}),(0,s.jsx)("div",{className:bi.tableCell,children:n})]},t)})),i.length>0&&(0,s.jsx)("div",{className:bi.total,children:(0,s.jsxs)("span",{className:bi.totalMoney,children:[e.formatMessage({id:"page.htmlVision.interactiveDesign.total"}),"：￥",(0,s.jsx)("span",{children:g})]})}),(0,s.jsx)("div",{className:bi.tip,children:u?e.formatMessage({id:"page.htmlVision.interactiveDesign.addingToCart"}):e.formatMessage({id:"page.htmlVision.interactiveDesign.dragToThisToBuy"})})]})]})]})},Ei=n.p+"images/70af4d01.jpg",Ci="MouseHover_container__QIdL2",Si="MouseHover_content__L5hzm",Pi="MouseHover_title__617kC",Bi="MouseHover_bottom__jjGyr",Ii="MouseHover_right__Aviwn",Ti="MouseHover_cursor__IcpdN",Ri=[{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"}],Fi=function(){var e=(0,p.Z)(),t=d().scrollTop,n=(0,r.useRef)(null),i=(0,r.useRef)(null),a=(0,r.useState)(!1),c=(0,o.Z)(a,2),l=c[0],u=c[1],m=(0,r.useState)("default"),f=(0,o.Z)(m,2),g=f[0],h=f[1],v=(0,r.useRef)({mouseX:null,mouseY:null}),x=(0,r.useRef)(0),y=function(){h("big")},A=function(){h("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 a=10;"big"===g&&(a=40);var o=Y.findDOMNode(i.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+a),u=r-(c+a),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:Ci,onMouseEnter:function(e){var r=e.clientX,a=e.clientY;u(!0);var o=Y.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:a-(d-t)};var m=Y.findDOMNode(i.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,i=e.clientY,a=Y.findDOMNode(n.current),o=a.offsetLeft,s=void 0===o?0:o,c=a.offsetTop,l=void 0===c?0:c;v.current={mouseX:r-s,mouseY:i-(l-t)}},onMouseLeave:function(e){var r=e.clientX,i=e.clientY;u(!1);var a=Y.findDOMNode(n.current),o=a.offsetLeft,s=void 0===o?0:o,c=a.offsetTop,l=void 0===c?0:c;v.current={mouseX:r-s,mouseY:i-(l-t)}},ref:n,children:[(0,s.jsxs)("div",{className:Si,children:[(0,s.jsx)("p",{className:Pi,onMouseEnter:y,onMouseLeave:A,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.personalArticle"})}),(0,s.jsxs)("div",{className:Bi,children:[(0,s.jsx)("img",{src:Ei,alt:"",onMouseEnter:y,onMouseLeave:A}),(0,s.jsx)("div",{className:Ii,children:Ri.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:Ti,style:{visibility:l?"visible":"hidden",width:"".concat("big"===g?80:20,"px"),height:"".concat("big"===g?80:20,"px")},ref:i})]})},Oi="SlideButtonTab_container__eT4SM",Gi="SlideButtonTab_content__6sIYs",Zi="SlideButtonTab_btn__tD8IC",Qi="SlideButtonTab_actived__RWXqG",Li=new Array(4).fill(0),zi=function(){var e=(0,r.useRef)(null),t=(0,r.useState)(0),n=(0,o.Z)(t,2),i=n[0],a=n[1],c=(0,r.useRef)(0);return(0,r.useEffect)((function(){if(e.current){var t=(e.current.getBoundingClientRect().width-32-8*(2*Li.length-2))/Li.length;e.current.style.setProperty("--btnWidth","".concat(t,"px")),c.current=t}}),[]),(0,s.jsxs)("div",{className:Oi,children:[(0,s.jsx)(Ur,{intlTitle:"page.htmlVision.interactiveDesign.swipeTab"}),(0,s.jsx)("div",{className:Gi,ref:e,children:Li.map((function(t,n){return(0,s.jsxs)("div",{className:"".concat(Zi," ").concat(i===n?Qi:""),onClick:function(){return function(t){if(e.current&&i!==t){var n="".concat(16+c.current*t+8*t*2,"px");e.current.style.setProperty("--groove-left",n);var r="0deg";r=t=da.length-1||i.current)){if(i.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,a()}),2e3)}},children:e.formatMessage({id:"page.htmlVision.interactiveDesign.nextPage"})})]})]})},ga="switch_container__i9Gh6",pa="switch_box__M6wl2",ha="switch_icon__AQIrn";function va(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 xa(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,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,a=e,o=t;return 0!==n&&(a=e*Math.cos(n)+t*Math.sin(n)+r,o=-e*Math.sin(n)+t*Math.cos(n)+i),{transitionX:a,transitionY:o}}(t,r,La,za,Ha),s=a.transitionX,l=a.transitionY,u=Y.findDOMNode(o.current);if(!u)return;u.offsetWidth<350?Ga=500:u.offsetWidth<400&&(Ga=550),u.style.left="".concat(s,"px"),u.style.top="".concat(-l,"px");var d=1.5;t>=Za?("CCW"===Qa?(La=0,za=0,Ha=0):(La=120,za=17,Ha=49),n||(Va=!0,Ua=!0)):t<=-Za&&(Qa="CCW"===Qa?"CW":"CCW",n||(Va=!0,Ua=!0)),Math.abs(t)>16&&(d=1.5*Math.pow(Math.cos(t/Za),2));var m=function(e,t,n,r,i){var a=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1,o=r,s=i;return(o=r>=e?r-a:r<=-e?r+a:"CCW"===n?i>0?r-a:r+a:i<0?r-a:r+a)>e?o=e:o<-e&&(o=-e),(s=Ja(e,t,o))>0&&(r>=e?"CCW"!==n&&(s=-s):r<=-e?"CCW"===n&&(s=-s):i<0&&(s=-s)),{nextX:o,nextY:s}}(Za,40,Qa,t,r,d),f=m.nextX,g=m.nextY;t=f,r=g;var p=null;c&&c.current&&(p=Y.findDOMNode(c.current));var h=!0;p&&Object.keys(Ya).forEach((function(e,t){var n=p.childNodes[t];if(n){var r=Ya[e],i=r.top,a=r.left,o=r.vx,s=r.vy,c=r.g,l=r.opacity,u=r.isMoving;if(u||Va){var d=Wa[e],m=i+s,f=a+o,g=o;g=Math.abs(o)>.1?o>0?o-.1:o+.1:0;var v=m-d.top,x=Ga-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,j=u;0===m?(m=d.top,f=d.left,g=d.vx,j=!0):m>=Ga?(m=0,f=0,A=0,g=0,w=0,j=!1):(h=!1,Va&&(j=!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:j})}}})),Va&&(Va=!1),h&&(Ua=!1)}e=window.requestAnimationFrame(i)})),function(){e&&window.cancelAnimationFrame(e)}}),[]),(0,s.jsx)("div",{className:Ba,children:(0,s.jsxs)("div",{className:Ia,ref:o,children:[(0,s.jsx)("img",{src:_a,alt:"",className:Ta}),(0,s.jsxs)("div",{className:Ra,onClick:function(){a||Ua||(Va=!0,Ua=!0)},ref:c,children:[(0,s.jsx)("img",{src:Ma,alt:"",className:Fa}),(0,s.jsx)("img",{src:ka,alt:"",className:Fa}),(0,s.jsx)("img",{src:Na,alt:"",className:Fa}),(0,s.jsx)("img",{src:Ea,alt:"",className:Fa}),(0,s.jsx)("img",{src:Ca,alt:"",className:Fa}),(0,s.jsx)("img",{src:Sa,alt:"",className:Fa}),(0,s.jsx)("img",{src:Pa,alt:"",className:Fa}),(0,s.jsx)("img",{src:Da,alt:"",className:Oa})]})]})})},Ka="PeopleAnimation_container__P9IRI",Xa=function(){return(0,s.jsx)("div",{className:Ka,children:(0,s.jsx)(qa,{})})},$a={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"},eo=new Array(3).fill(0),to=function(){return(0,s.jsxs)("div",{className:$a.container,children:[(0,s.jsx)(Ur,{intlTitle:"page.htmlVision.interactiveDesign.pseudo3DRubikCube"}),(0,s.jsx)("div",{className:$a.content,children:eo.map((function(e,t){return(0,s.jsx)("div",{className:$a.cube,children:eo.map((function(e,t){return(0,s.jsx)("div",{className:$a["column".concat(t)],children:eo.map((function(e,t){return(0,s.jsx)("span",{className:$a["span".concat(t)]},t)}))},t)}))},t)}))})]})},no="Preserve3dBox_container__S8Nkn",ro="Preserve3dBox_content__OkpkD",io="Preserve3dBox_box__xhigG",ao="Preserve3dBox_side1__OlfJ5",oo="Preserve3dBox_side2__N20GX",so="Preserve3dBox_side3__t1Hxo",co="Preserve3dBox_side4__7YzMw",lo="Preserve3dBox_side5__38WMJ",uo="Preserve3dBox_side6__pWRYS",mo="Preserve3dBox_light__8ms1v",fo=function(){var e=(0,r.useRef)(null),t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=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,mo)&&e.classList.remove(mo)})),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"}},a=function(e){null==e||e.classList.add(mo)};return(0,s.jsxs)("div",{className:no,onMouseDown:function(e){var r=e.clientX,i=e.clientY,a=window.getComputedStyle(Y.findDOMNode(t.current)).transform;if(a&&"none"!==a){var o=a.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:i,rotateX:c,rotateY:l}}}},onMouseMove:function(e){if(t.current&&n.current){var r=e.clientX,i=e.clientY,a=n.current,o=a.x,s=a.y,c=a.rotateX,l=a.rotateY,u=2*(s-i),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:i,onMouseLeave:i,ref:e,children:[(0,s.jsx)(Ur,{intlTitle:"page.htmlVision.interactiveDesign.3DRubikCube"}),(0,s.jsx)("div",{className:ro,children:(0,s.jsxs)("div",{className:io,ref:t,children:[(0,s.jsx)("div",{className:ao,onClick:function(e){t.current&&(t.current.style.transform="rotateX(360deg) rotateY(360deg)",t.current.style.animation="none",a(e.target))}}),(0,s.jsx)("div",{className:oo,onClick:function(e){t.current&&(t.current.style.transform="rotateX(0deg) rotateY(180deg)",t.current.style.animation="none",a(e.target))}}),(0,s.jsx)("div",{className:so,onClick:function(e){t.current&&(t.current.style.transform="rotateX(270deg) rotateY(0deg)",t.current.style.animation="none",a(e.target))}}),(0,s.jsx)("div",{className:co,onClick:function(e){t.current&&(t.current.style.transform="rotateX(90deg) rotateY(180deg)",t.current.style.animation="none",a(e.target))}}),(0,s.jsx)("div",{className:lo,onClick:function(e){t.current&&(t.current.style.transform="rotateX(0deg) rotateY(90deg)",t.current.style.animation="none",a(e.target))}}),(0,s.jsx)("div",{className:uo,onClick:function(e){t.current&&(t.current.style.transform="rotateX(0deg) rotateY(270deg)",t.current.style.animation="none",a(e.target))}})]})})]})},go="OrientationSenseCard_container__wM4Og",po="OrientationSenseCard_content__nHHlN",ho="OrientationSenseCard_card__kb1rR",vo=[Ui,Wi,Ji,qi,Ki],xo=function(){return(0,s.jsxs)("div",{className:go,children:[(0,s.jsx)(Ur,{intlTitle:"page.htmlVision.interactiveDesign.automaticIdentificationOfMouseDirection"}),(0,s.jsx)("div",{className:po,children:vo.map((function(e,t){return(0,s.jsx)("div",{className:ho,children:(0,s.jsx)("img",{src:e,alt:""})},t)}))})]})},yo="HexagonalMesh1_container__4Mauo",Ao="HexagonalMesh1_item__uupv2",wo=new Array(800).fill(0),jo=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:yo,onMouseMove:function(t){if(e.current){var n=e.current.getBoundingClientRect(),r=n.left,i=n.top,a=t.pageX-r,o=t.pageY-i;window.requestAnimationFrame((function(){e.current&&(e.current.style.setProperty("--xPos","".concat(a,"px")),e.current.style.setProperty("--yPos","".concat(o,"px")))}))}},onMouseLeave:t,ref:e,children:wo.map((function(e,t){return(0,s.jsx)("div",{className:Ao},t)}))})},bo="HexagonalMesh2_container__7Eq5-",_o="HexagonalMesh2_item__RBkZx",Do=new Array(800).fill(0),Mo=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:bo,onMouseMove:function(t){if(e.current){var n=e.current.getBoundingClientRect(),r=n.left,i=n.top,a=t.pageX-r,o=t.pageY-i;window.requestAnimationFrame((function(){e.current&&(e.current.style.setProperty("--xPos","".concat(a,"px")),e.current.style.setProperty("--yPos","".concat(o,"px")))}))}},onMouseLeave:t,ref:e,children:Do.map((function(e,t){return(0,s.jsx)("div",{className:_o},t)}))})},ko="HexagonalMesh3_container__7cOnb",No="HexagonalMesh3_item__JnppT",Eo=new Array(800).fill(0),Co=function(){var e=(0,r.useRef)(null);return(0,s.jsx)("div",{className:ko,ref:e,children:Eo.map((function(e,t){return(0,s.jsx)("div",{className:No},t)}))})},So=n(34262),Po=n(39464),Bo=n(12304),Io=n(24406),To=n(4333),Ro=n(83428),Fo=n(78874),Oo=n(59401),Go=n(73566),Zo=n(98059),Qo=n(48107),Lo=n(5698),zo=n(97998),Ho=n(75013),Vo=n(14294),Uo=n(18152),Wo=n(36108),Yo=n(98522),Jo=n(77093),qo=n(55017),Ko=n(67753),Xo=n(26223),$o=n(98261),es=n(93017),ts=n(77125),ns=n(79728),rs=n(93366),is=n(98587),as=n(2905),os=n(11013),ss=n(44251),cs=n(94506),ls=n(49434),us=n(38419),ds=n(1627),ms=n(20720),fs=n(6355),gs=n(892),ps=n(49688),hs=n(78823),vs=n(80856),xs=n(26589),ys=n(7364),As=n(14283),ws=n(54618),js=n(3248),bs=n(18401),_s=n(5405),Ds=n(82272),Ms=n(59512),ks=n(62965),Ns=n(88630),Es=n(25449),Cs=n(57551),Ss=n(89317),Ps=n(72285),Bs=n(68479),Is=n(71938),Ts=n(2825),Rs=n(43926),Fs=n(85369),Os=n(53318),Gs=n(85008),Zs=n(45452),Qs=n(4334),Ls=n(72850),zs=n(19671),Hs=n(97254),Vs=n(70913),Us=n(56022),Ws=n(16640),Ys=n(23375),Js=n(12854),qs=n(88485),Ks=n(33040),Xs=n(63392),$s=n(73888),ec=n(48965),tc=n(4711),nc=n(56931),rc=n(24616),ic=n(51984),ac="IconScroll_container__pHJbN",oc="IconScroll_row__ueyux",sc=new Array(40).fill(0),cc=function(){var e=function(){return(0,s.jsxs)("div",{children:[(0,s.jsx)(So.Z,{}),(0,s.jsx)(Po.Z,{}),(0,s.jsx)(Bo.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)(Zo.Z,{}),(0,s.jsx)(Qo.Z,{}),(0,s.jsx)(Lo.Z,{}),(0,s.jsx)(zo.Z,{}),(0,s.jsx)(Ho.Z,{}),(0,s.jsx)(Vo.Z,{}),(0,s.jsx)(Uo.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)(is.Z,{}),(0,s.jsx)(as.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)(gs.Z,{}),(0,s.jsx)(ps.Z,{}),(0,s.jsx)(hs.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)(js.Z,{}),(0,s.jsx)(bs.Z,{}),(0,s.jsx)(_s.Z,{}),(0,s.jsx)(Ds.Z,{}),(0,s.jsx)(Ms.Z,{}),(0,s.jsx)(ks.Z,{}),(0,s.jsx)(Ns.Z,{}),(0,s.jsx)(Es.Z,{}),(0,s.jsx)(Cs.Z,{}),(0,s.jsx)(Ss.Z,{}),(0,s.jsx)(Ps.Z,{}),(0,s.jsx)(Bs.Z,{}),(0,s.jsx)(Is.Z,{}),(0,s.jsx)(Ts.Z,{}),(0,s.jsx)(J.Z,{}),(0,s.jsx)(Rs.Z,{}),(0,s.jsx)(Fs.Z,{}),(0,s.jsx)(Os.Z,{}),(0,s.jsx)(Gs.Z,{}),(0,s.jsx)(Zs.Z,{}),(0,s.jsx)(Qs.Z,{}),(0,s.jsx)(Ls.Z,{}),(0,s.jsx)(zs.Z,{}),(0,s.jsx)(Hs.Z,{}),(0,s.jsx)(x.Z,{}),(0,s.jsx)(Vs.Z,{}),(0,s.jsx)(Us.Z,{}),(0,s.jsx)(Ws.Z,{}),(0,s.jsx)(Ys.Z,{}),(0,s.jsx)(Js.Z,{}),(0,s.jsx)(qs.Z,{}),(0,s.jsx)(Ks.Z,{}),(0,s.jsx)(Xs.Z,{}),(0,s.jsx)($s.Z,{}),(0,s.jsx)(ec.Z,{}),(0,s.jsx)(tc.Z,{}),(0,s.jsx)(nc.Z,{}),(0,s.jsx)(rc.Z,{}),(0,s.jsx)(ic.Z,{})]})};return(0,s.jsx)("div",{className:ac,children:sc.map((function(t,n){return(0,s.jsxs)("div",{className:oc,children:[e(),e()]},n)}))})},lc=n(67724),uc=n(8812),dc="WipeSwitchover_container__zA+wD",mc="WipeSwitchover_mask1__efwWk",fc="WipeSwitchover_mask2__bTFbb",gc="WipeSwitchover_mask3__Gaobg",pc="WipeSwitchover_mask4__ZERnA",hc="WipeSwitchover_mask5__MkpDg",vc="WipeSwitchover_page1__ex092",xc="WipeSwitchover_page2__S7sFb",yc="WipeSwitchover_page3__JtV7t",Ac="WipeSwitchover_page4__9G6Y9",wc="WipeSwitchover_page5__uBeX2",jc="WipeSwitchover_prevBtn__6vW6Q",bc="WipeSwitchover_icon__Z3ryB",_c="WipeSwitchover_nextBtn__sVZkG",Dc=.006,Mc=[8,8,8,7,30],kc=[.72,.7,1,1,.32],Nc=function(){var e=(0,r.useRef)(null),t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useState)(Mc.length-1),a=(0,o.Z)(i,2),c=a[0],l=a[1],u=(0,r.useRef)(Mc.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,i=0;if(r)if("0"===r)i=Number((Mc[u.current]*Dc).toFixed(2));else if(r.includes("px")){var a=Number(r.substring(0,r.length-2));if(n=Mc[u.current])return d.current=!1,u.current=n,void l(n);i=Number((Mc[u.current]*Dc+a).toFixed(2))}else if(n>u.current){if(a>=2*Mc[n])return t.style.strokeDashoffset="0px",d.current=!1,u.current=n,void l(n);i=Number((Mc[n]*Dc+a).toFixed(2))}}else{var o=Number(r);if(n=Mc[u.current])return d.current=!1,u.current=n,void l(n);i=Number((Mc[u.current]*Dc+o).toFixed(2))}else if(n>u.current){if(o>=2*Mc[n])return t.style.strokeDashoffset="0px",d.current=!1,u.current=n,void l(n);i=Number((Mc[n]*Dc+o).toFixed(2))}}else i=Number((Mc[u.current]*Dc).toFixed(2));t.style.strokeDashoffset="".concat(i,"px"),m.current=window.requestAnimationFrame((function(){return e(t,n)}))}},g=function(){if(e.current&&n.current){var r=e.current.clientWidth,i=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 i=n.split(", ");i[0]="".concat(i[0].substring(0,7)).concat(Math.ceil(kc[t]*r)),n=i.join(", ")}e.children[0].style.transform=n})),t.current&&(e.current.style.height="".concat(i,"px"),Array.prototype.forEach.call(t.current.children,(function(e){if("g"===e.tagName){e.style.height="".concat(i,"px"),e.children[0].style.height="".concat(i,"px"),e.children[0].style.transform="".concat(i,"px");var t=Math.floor(r/2-240-40),n=Math.floor((i-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:dc,ref:e,children:[(0,s.jsx)(Ur,{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:mc,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:fc,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:gc,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:pc,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:hc,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:vc,mask:"url(#mask1)",children:[(0,s.jsx)("rect",{fill:"#e3e4e5"}),(0,s.jsx)("image",{xlinkHref:Hi}),(0,s.jsx)("text",{fill:"#757576",children:"Book5"})]}),(0,s.jsxs)("g",{className:xc,mask:"url(#mask2)",children:[(0,s.jsx)("rect",{fill:"#7e7f83"}),(0,s.jsx)("image",{xlinkHref:Vi}),(0,s.jsx)("text",{fill:"#dedede",children:"Book4"})]}),(0,s.jsxs)("g",{className:yc,mask:"url(#mask3)",children:[(0,s.jsx)("rect",{fill:"#f8d3cc"}),(0,s.jsx)("image",{xlinkHref:Ui}),(0,s.jsx)("text",{fill:"#b0304e",children:"Book3"})]}),(0,s.jsxs)("g",{className:Ac,mask:"url(#mask4)",children:[(0,s.jsx)("rect",{fill:"#d2e4ce"}),(0,s.jsx)("image",{xlinkHref:Wi}),(0,s.jsx)("text",{fill:"#04756e",children:"Book2"})]}),(0,s.jsxs)("g",{className:wc,mask:"url(#mask5)",children:[(0,s.jsx)("rect",{fill:"#cad9e5"}),(0,s.jsx)("image",{xlinkHref:Yi}),(0,s.jsx)("text",{fill:"#142864",children:"Book1"})]})]}),(0,s.jsx)("div",{className:jc,style:c>=Mc.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:bc,children:(0,s.jsx)(lc.Z,{})})}),(0,s.jsx)("div",{className:_c,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:bc,children:(0,s.jsx)(uc.Z,{})})})]})},Ec="AutoCompletePunctuation_container__EjYmN",Cc="AutoCompletePunctuation_content__PIXsh",Sc={"'":"'",'"':'"',"(":")","（":"）","【":"】","[":"]","《":"》","「":"」","『":"』","{":"}","“":"”","‘":"’"},Pc=function(){var e=(0,r.useRef)(null),t=(0,r.useRef)(null),n=(0,r.useCallback)((function(e){var t=Sc[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 i=r.getRangeAt(0);i.insertNode(n),i.setEndBefore(n),i.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:Ec,children:[(0,s.jsx)(Ur,{intlTitle:"page.htmlVision.interactiveDesign.autoCompletePunctuation"}),(0,s.jsxs)("div",{className:Cc,children:[(0,s.jsx)("textarea",{rows:5,placeholder:"maxLength is 100",maxLength:100,ref:e}),(0,s.jsx)("div",{contentEditable:"true",ref:t})]})]})},Bc="StackedImages_container__Hnz74",Ic="StackedImages_content__bZLt4",Tc=[Et,Pt,Bt,It],Rc=function(){return(0,s.jsxs)("div",{className:Bc,children:[(0,s.jsx)(Ur,{intlTitle:"page.htmlVision.interactiveDesign.stackedImages"}),(0,s.jsx)("div",{className:Ic,children:Tc.map((function(e,t){return(0,s.jsx)("img",{src:e,alt:""},t)}))})]})},Fc="InteractiveDesign_container__oK3No",Oc="InteractiveDesign_box__+Trza",Gc=[{element:(0,s.jsx)(ei,{})},{element:(0,s.jsx)(hi,{})},{element:(0,s.jsx)(Ni,{})},{element:(0,s.jsx)(Hr,{data:zr[0]})},{element:(0,s.jsx)(Fi,{})},{element:(0,s.jsx)(zi,{})},{element:(0,s.jsx)(fa,{})},{element:(0,s.jsx)(ba,{})},{element:(0,s.jsx)(Xa,{})},{element:(0,s.jsx)(to,{})},{element:(0,s.jsx)(fo,{})},{element:(0,s.jsx)(xo,{})},{element:(0,s.jsx)(jo,{})},{element:(0,s.jsx)(Mo,{})},{element:(0,s.jsx)(Co,{})},{element:(0,s.jsx)(cc,{})},{element:(0,s.jsx)(Hr,{data:zr[1]})},{element:(0,s.jsx)(Nc,{})},{element:(0,s.jsx)(Pc,{})},{element:(0,s.jsx)(Rc,{})}],Zc=function(){var e=d().setScrollTop;return(0,r.useEffect)((function(){e(0)}),[]),(0,s.jsx)("div",{className:Fc,children:Gc.map((function(e,t){return(0,s.jsx)("div",{className:Oc,children:e.element},t)}))})},Qc={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"},Lc=be.GridBox,zc=new Array(29).fill("1"),Hc=function(){var e=d().setScrollTop;return(0,r.useEffect)((function(){e(0)}),[]),(0,s.jsx)("div",{className:Qc.container,children:(0,s.jsx)(be,{differentScreenCols:[4,3,3,2,2],rowSpace:8,colSpace:8,children:zc.map((function(e,t){return(0,s.jsx)(Lc,{children:(0,s.jsx)("div",{className:Qc.box,children:(0,s.jsx)("div",{className:Qc["bg".concat(t+1)]})})},t)}))})})},Vc="LineCombination_container__toPmq",Uc="LineCombination_blackBox__P5fH8",Wc="LineCombination_blackBoxPoint__87aDR",Yc="LineCombination_whiteBox__-MGXi",Jc="LineCombination_whiteBoxPoint__Tz8Uh",qc="LineCombination_name__E7QvH",Kc="LineCombination_value__5BYd0",Xc=0,$c=0,el=function(){var e=(0,r.useRef)(null),t=function t(){if(e.current){var n=Y.findDOMNode(e.current);if(n){var r=n.children.length,i=n.children[$c],a=null==i?void 0:i.children[0],o=i.clientWidth,s=i.clientHeight,c=a.style;if($c%2==0){var l=8;c.left&&(l=parseFloat(c.left));var u=l+4;if(u>=o-8-8)if(a.style.visibility="hidden",$c>=r-1){var d;$c=0;var m=null===(d=n.children[$c])||void 0===d?void 0:d.firstChild;m.style.left="".concat(8,"px"),m.style.visibility="visible"}else{var f;$c+=1;var g=null===(f=n.children[$c])||void 0===f?void 0:f.firstChild;g.style.left="-1px",g.style.visibility="visible"}else a.style.left="".concat(u,"px"),"visible"!==a.style.visibility&&(a.style.visibility="visible")}else{var p=-1,h=8;if(c.left&&(p=parseFloat(c.left)),c.bottom&&(h=parseFloat(c.bottom)),p>=o){var v=h-4;if(v<=8){var x;a.style.visibility="hidden",$c+=1;var y=null===(x=n.children[$c])||void 0===x?void 0:x.firstChild;y.style.left="".concat(8,"px"),y.style.visibility="visible"}else a.style.bottom="".concat(v,"px")}else if(p<=-1){var A=h+4;A>s-8-8&&(A=s,a.style.width="".concat(8,"px"),a.style.height="1px",a.style.left="".concat(8,"px")),a.style.bottom="".concat(A,"px")}else{var w=p+4;w>o-8-8&&(w=o,a.style.width="1px",a.style.height="".concat(8,"px"),a.style.bottom="".concat(s-8-8)),a.style.left="".concat(w,"px")}}Xc=requestAnimationFrame(t)}}};return(0,r.useEffect)((function(){return e.current&&(Xc=requestAnimationFrame(t)),function(){Xc&&cancelAnimationFrame(Xc)}}),[]),(0,s.jsxs)("div",{className:Vc,ref:e,children:[(0,s.jsx)("div",{className:Uc,children:(0,s.jsx)("div",{className:Wc})}),(0,s.jsxs)("div",{className:Yc,children:[(0,s.jsx)("div",{className:Jc}),(0,s.jsx)("p",{className:qc,children:"Price"}),(0,s.jsx)("p",{className:Kc,children:"$656"})]}),(0,s.jsx)("div",{className:Uc,children:(0,s.jsx)("div",{className:Wc})}),(0,s.jsxs)("div",{className:Yc,children:[(0,s.jsx)("div",{className:Jc}),(0,s.jsx)("p",{className:qc,children:"Quantity"}),(0,s.jsx)("p",{className:Kc,children:"84351"})]}),(0,s.jsx)("div",{className:Uc,children:(0,s.jsx)("div",{className:Wc})}),(0,s.jsxs)("div",{className:Yc,children:[(0,s.jsx)("div",{className:Jc}),(0,s.jsx)("p",{className:qc,children:"Number of partners"}),(0,s.jsx)("p",{className:Kc,children:"64"})]}),(0,s.jsx)("div",{className:Uc,children:(0,s.jsx)("div",{className:Wc})}),(0,s.jsxs)("div",{className:Yc,children:[(0,s.jsx)("div",{className:Jc}),(0,s.jsx)("p",{className:qc,children:"Date of establishment"}),(0,s.jsx)("p",{className:Kc,children:"2008-10-01"})]}),(0,s.jsx)("div",{className:Uc,children:(0,s.jsx)("div",{className:Wc})}),(0,s.jsxs)("div",{className:Yc,children:[(0,s.jsx)("div",{className:Jc}),(0,s.jsx)("p",{className:qc,children:"Transaction Analyzed"}),(0,s.jsx)("p",{className:Kc,children:"70Bn"})]}),(0,s.jsx)("div",{className:Uc,children:(0,s.jsx)("div",{className:Wc})})]})},tl=n(93433),nl=n(15861),rl=n(64687),il=n.n(rl),al=n(76755),ol=n(21734),sl=n(32823),cl=n(98879),ll=n(2161),ul=n(1635),dl=n(63754),ml=n(57119),fl=n(57254),gl=n(58491),pl=n(68628),hl=n(31290),vl=n(35688),xl=n(17582),yl=n(72504),Al=n(16130),wl=n(92977),jl=n(62298),bl=n(6311),_l=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;if(0===e)return"0 Bytes";var n=1024,r=t<0?0:t,i=["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"],a=Math.floor(Math.log(e)/Math.log(n));return parseFloat((e/Math.pow(n,a)).toFixed(r))+" "+i[a]},Dl=function(e){if(!e&&0!==e||isNaN(e)||!isFinite(e))return"未知";var t=Math.floor(e/3600).toString().padStart(2,"00"),n=Math.floor(e%3600/60).toString().padStart(2,"00"),r=Math.floor(e%3600%60).toString().padStart(2,"00");return"".concat(t,":").concat(n,":").concat(r)},Ml=function(e,t){if(e){var n=e.type.split("/");if("image"===n[0]){var r=n[1].toUpperCase(),i=new FileReader;i.onload=function(n){var i=n.target.result,a=kl(i);a&&(r=a);var o=new Blob([i]);Nl(o,(function(n){if(n){var i=new Image;i.onload=function(){var a=i.width,s=i.height,c=Cl(n,a,s);if(c){var l={name:e.name,fileType:r,size:e.size,width:a,height:s,imgUrl:n,imageData:c,blob:o};t(l)}else t(null)},i.onerror=function(){t(null)},i.src=n}else t(null)}))},i.readAsArrayBuffer(e)}else t(null)}else t(null)},kl=function(e){var t="";if(e){var 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"52494646":t="WEBP"}}return t},Nl=function(e,t){if(e){var n=new FileReader;n.readAsDataURL(e),n.onload=function(e){e.target?t(e.target.result):t(null)}}else t(null)},El=function(e){if(!e)return null;var t=e.width,n=e.height,r=document.createElement("canvas"),i=r.getContext("2d");return r.width=t,r.height=n,i.putImageData(e,0,0,0,0,t,n),r.toDataURL("image/png")},Cl=function(e){var 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){var r=new Image;r.src=e;var i=document.createElement("canvas"),a=i.getContext("2d");i.width=t,i.height=n,a.drawImage(r,0,0,t,n);var o=a.getImageData(0,0,t,n);return o}return null},Sl=function(e){var 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){var r=document.createElement("canvas"),i=r.getContext("2d");r.width=t,r.height=n,i.drawImage(e,0,0,t,n);var a=i.getImageData(0,0,t,n);return a}return null},Pl=function(e,t){if(e){var n=document.createElement("a");n.style.visibility="hidden",document.body.appendChild(n),n.download=t;var r=window.URL.createObjectURL(e);n.href=r,n.click(),document.body.removeChild(n),window.URL.revokeObjectURL(r)}},Bl=function(e,t){if(e&&0!==e.length){var n=new Blob(e,{type:"video/webm"}),r="video.webm";if(t){var i=t.split(".");r="".concat(i[0],".webm")}Pl(n,r)}},Il=function(e){var t=document.getElementById("attach_image");if(t){var 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"))}},Tl=function(){var e=document.getElementById("attach_image");if(e){var t=!1,n=null,r=null;e.onmousewheel=function(e){e.stopPropagation(),e.preventDefault();var t=e.wheelDelta||e.detail;Il(t>0?1:0)},e.onmousedown=function(e){e.stopPropagation(),e.preventDefault(),t=!0,n=e.clientX,r=e.clientY},e.onmouseup=function(e){e.stopPropagation(),e.preventDefault(),t=!1},e.onmousemove=function(i){if(i.stopPropagation(),i.preventDefault(),t){var a=i.clientX,o=i.clientY,s=a-n,c=o-r,l=document.getElementById("attach_imgDiv");if(l){var u=parseFloat(e.style.left)+s,d=parseFloat(e.style.top)+c,m=-.75*parseFloat(e.style.width),f=parseFloat(l.style.width)-.25*parseFloat(e.style.width),g=-.75*parseFloat(e.style.height),p=parseFloat(l.style.height)-.25*parseFloat(e.style.height);uf&&(u=f),dp&&(d=p),e.style.left="".concat(u,"px"),e.style.top="".concat(d,"px"),n=a,r=o}}}}},Rl="FileView_container__SyQN4",Fl="FileView_tableLy__kaeXq",Ol="FileView_viewContainer__n0Kg6",Gl="FileView_progress__GtmqC",Zl="FileView_imgDiv__ErTpj",Ql="FileView_downLoadTip__FIvRY",Ll="FileView_emptyTip__OW2E4",zl="FileView_arrowIcon__2JeuW",Hl="FileView_leftArrow__IeXsk",Vl="FileView_rightArrow__HPiMt",Ul="FileView_imgInfo__Z2qPj",Wl="FileView_imgOperate__h-UFp",Yl="FileView_iconDiv__GUb18",Jl="FileView_left__Erhr-",ql="FileView_xiangXia__cm3bW",Kl="FileView_xiangShang__2ATuW",Xl="FileView_fileContainer__rbVnb",$l="FileView_draggerBox__GNF2g",eu="FileView_draggerTextBoxHover__6Z8I-",tu="FileView_draggerTextBox__2soxW",nu="FileView_firstLine__5trSy",ru="FileView_linkBtn__n-sJb",iu="FileView_secondLine__9YFcw",au="FileView_moreOperate__e+uIL",ou="FileView_poperSpan__8roYR";function su(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 cu(e){for(var t=1;t1?cu(cu({},t),{},{imgSrc:"data:image/jpg;base64,".concat(r[1])}):cu(cu({},t),{},{imgSrc:"data:image/jpg;base64,".concat(e.value)})}b.current=t,j(t)},Z=function(e){if(e){var t=e.substring(e.lastIndexOf(".")+1);if(t)return t.toLowerCase()}return""},Q=function(){var e=(0,nl.Z)(il().mark((function e(t){return il().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}();(0,r.useEffect)((function(){f.current=mu,m(mu),k(!1),x(!1),P.current=[],S([]),G(null),t&&Q(t)}),[t]),(0,r.useEffect)((function(){!O.current&&T&&Tl()}),[T]);var L=function(e){var t=document.getElementsByClassName("ant-upload-drag");t&&t.length>0&&t[0].classList.remove(eu)},z=function(e){var t="";return t="left"===e?P.current[0].fileId:P.current[P.current.length-1].fileId,F.current&&t===F.current.fileId?"#d8d8d8":"#666666"},H=function(e,t){if(e){var n=Z(e.fileName);if(["jpg","jpeg","png","gif"].includes(n)){if(t){var r=new FileReader;r.readAsArrayBuffer(t),r.onload=function(r){var i,a=window.btoa(new Uint8Array(null===(i=r.target)||void 0===i?void 0:i.result).reduce((function(e,t){return e+String.fromCharCode(t)}),"")),o=cu({},e);o.fileId=e.fileId,o.fileName=e.fileName,o.fileType=n,o.value=a,o.size=_l(t.size),o.upTime=(0,kr.Z)(e.createTime,"yyyy-MM-dd HH:mm:ss"),o.userNmae="".concat(e.uploadUserName,"/").concat(e.uploadUser);var s=[].concat((0,tl.Z)(P.current),[o]);P.current=s,S(s),G(o)}}}else{var i=cu({},e);i.fileId=e.fileId,i.fileName=e.fileName,i.fileType=n,i.value="",i.size=_l(t.size),i.upTime=(0,kr.Z)(e.createTime,"yyyy-MM-dd HH:mm:ss"),i.userNmae="".concat(e.uploadUserName,"/").concat(e.uploadUser);var a=[].concat((0,tl.Z)(P.current),[i]);P.current=a,S(a),G(i)}}},V=function(){var e=(0,nl.Z)(il().mark((function e(t){var n,r;return il().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t.event&&t.event.preventDefault(),!i){e.next=3;break}return e.abrupt("return");case 3:if(!f.current.isProgress){e.next=6;break}return sl.ZP.warning("有文件正在上传，请稍侯"),e.abrupt("return");case 6:(n=cu(cu({},mu),{},{isProgress:!0})).progressTimer=window.setInterval((function(){if(f.current.percent<90){var e=cu(cu({},f.current),{},{percent:f.current.percent+Math.floor(20*Math.random())});f.current=e,m(e)}}),800),f.current=n,m(n);try{setTimeout((function(){f.current.progressTimer&&window.clearInterval(f.current.progressTimer);var e=cu({},mu);f.current=e,m(e);var n={code:200,data:{fileId:Number(Math.random().toString().substring(3,8)+Date.now()).toString(36),fileName:t.file.name,createTime:(new Date).getTime(),uploadUserName:"userName",uploadUser:"000001"},msg:""};n&&200===n.code?H(n.data,t.file.originFileObj):sl.ZP.error("上传".concat(t.file.name,"失败"))}),2e3)}catch(e){f.current.progressTimer&&window.clearInterval(f.current.progressTimer),r=cu({},mu),f.current=r,m(r),sl.ZP.error("上传".concat(t.file.name,"失败"))}case 11:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}(),U=function(){var e=(0,nl.Z)(il().mark((function e(t){var n;return il().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(n=t||T){e.next=4;break}return sl.ZP.warning("无文件可进行删除"),e.abrupt("return");case 4:if(!i){e.next=7;break}return sl.ZP.warning("目前状态不允许删除"),e.abrupt("return");case 7:v.Z.confirm({title:"删除文件提示",content:"确认删除【".concat(n.fileName,"】文件？"),icon:(0,s.jsx)(ml.Z,{}),centered:!0,onOk:function(){var e=(0,nl.Z)(il().mark((function e(){return il().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:sl.ZP.warning("删除中..."),setTimeout((function(){var e={code:200,data:{},msg:""};if(e&&200===e.code){sl.ZP.success("删除文件成功");var t=P.current.filter((function(e){return e.fileId!==n.fileId}));P.current=t,S(t),O.current=F.current,t.length>0?G(t[0]):G(null)}else sl.ZP.error(e.msg)}),2e3);case 2:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}()});case 8:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}(),W=function(){var e=(0,nl.Z)(il().mark((function e(){return il().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(T){e.next=2;break}return e.abrupt("return");case 2:sl.ZP.warning("下载中..."),setTimeout((function(){sl.ZP.success("下载成功")}),2e3);case 4:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}(),Y=function(e){var t=document.getElementById("attach_image");switch(e){case 0:t&&b.current&&(t.style.width="700px",t.style.height="".concat(700*b.current.imgScale,"px"),t.style.top="0px",t.style.left="0px");break;case 1:t&&b.current&&(t.style.width="".concat(t.clientWidth+50,"px"),t.style.height="".concat(t.clientHeight+50*b.current.imgScale,"px"));break;case 2:t&&b.current&&(t.style.width="".concat(t.clientWidth-50,"px"),t.style.height="".concat(t.clientHeight-50*b.current.imgScale,"px"));break;case 3:t&&b.current&&(t.style.width="".concat(b.current.imgOrigin.width,"px"),t.style.height="".concat(b.current.imgOrigin.height,"px"),t.style.top="0px",t.style.left="0px");break;case 4:if(t&&b.current){var n=cu(cu({},b.current),{},{imgRotate:b.current.imgRotate+1});b.current=n,j(n),t.style.webkitTransform="rotate(".concat(-90*b.current.imgRotate,"deg)")}break;case 5:U();break;case 6:W();break;case 7:for(var r=0,i=P.current.length;r0){G(P.current[o-1]);break}}}};return(0,s.jsx)("div",{className:Rl,style:c,children:(0,s.jsx)("div",{className:Fl,children:(0,s.jsxs)("div",{style:{width:"860px"},children:[(0,s.jsx)("div",{style:{width:"100%",height:"87vh",minHeight:"700px",backgroundImage:"linear-gradient(135deg, #224141, #162a2a)"},children:(0,s.jsxs)("div",{className:Ol,children:[d.isProgress&&(0,s.jsxs)("div",{className:Gl,children:[(0,s.jsx)(cl.Z,{style:{width:"400px"},percent:d.percent,showInfo:!1}),(0,s.jsxs)("span",{style:{marginTop:"16px"},children:["上传中，请稍候...",d.percent>100?100:d.percent,"%"]})]}),(0,s.jsxs)("div",{id:"attach_imgDiv",className:Zl,children:[T&&(0,s.jsxs)("div",{children:[["jpg","jpeg","png","gif"].includes((null==T?void 0:T.fileType)||"")&&(0,s.jsx)("img",{id:"attach_image",src:null==w?void 0:w.imgSrc,style:{position:"absolute",top:0,left:0},onLoad:function(){var e=document.getElementById("attach_image");if(e){var t=cu(cu({},b.current),{},{imgScale:e.clientHeight/e.clientWidth,imgOrigin:{width:e.clientWidth,height:e.clientHeight}});b.current=t,j(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==T?void 0:T.fileType)||"")&&(0,s.jsxs)("div",{className:Ql,children:["如果想要浏览该文件，您可以",(0,s.jsx)(oe.Z,{type:"link",onClick:function(){return Y(6)},children:"点击下载"})]})]}),!T&&!d.isProgress&&(0,s.jsxs)("div",{className:Ll,children:[(0,s.jsx)("div",{style:{width:"100%",color:"#333333"},children:"请上传文件"}),(0,s.jsxs)("div",{style:{width:"100%",color:"#ababab",marginTop:"10px",lineHeight:"20px"},children:["不超过30M,",(0,s.jsx)("br",{}),"支持jpg,jpeg,png,gif格式的文件"]})]}),T&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("span",{className:"".concat(zl," ").concat(Hl),style:{backgroundColor:z("left")},onClick:function(){return Y(8)},children:(0,s.jsx)(lc.Z,{})}),(0,s.jsx)("span",{className:"".concat(zl," ").concat(Vl),style:{backgroundColor:z("right")},onClick:function(){return Y(7)},children:(0,s.jsx)(uc.Z,{})})]})]}),h&&(0,s.jsx)("div",{className:Ul,children:(0,s.jsxs)(ll.Z,{children:[(0,s.jsx)(ul.Z,{span:24,children:(0,s.jsxs)("span",{style:{fontSize:"14px"},children:["文件名：",null==T?void 0:T.fileName]})}),(0,s.jsx)(ul.Z,{span:16,children:(0,s.jsxs)("span",{style:{fontSize:"14px"},children:["上传者：",null==T?void 0:T.userName]})}),(0,s.jsx)(ul.Z,{span:8,children:(0,s.jsxs)("span",{style:{fontSize:"14px"},children:["上传时间：",null==T?void 0:T.upTime]})})]})}),T&&(0,s.jsxs)("div",{className:Wl,children:[(0,s.jsxs)("div",{className:Jl,children:[(0,s.jsx)(al.Z,{placeholder:"请选择",style:{width:"300px"},size:"small",value:T.fileId,loading:M,onChange:function(e){for(var t=null,n=0,r=P.current.length;n31457280?(sl.ZP.warning("单个文件大小不能超过30M"),!1):void 0:(sl.ZP.warning("请上传符合格式要求的文件"),!1)},customRequest:function(){},onDrop:function(e){return e.preventDefault()},onChange:V,children:(0,s.jsxs)("div",{className:tu,onDragOver:function(e){var t=document.getElementsByClassName("ant-upload-drag");t&&t.length>0&&t[0].classList.add(eu)},onDragLeave:L,onDrop:L,children:[(0,s.jsxs)("div",{className:nu,children:[(0,s.jsx)(jl.Z,{}),(0,s.jsx)("span",{children:"将文件拖拽到此处，或"}),(0,s.jsx)("span",{className:i?"":ru,children:"点击上传"})]}),(0,s.jsx)("div",{className:iu,children:"系统支持的格式为jpg,jpeg,png,gif,pdf,doc,docx,xls,xlsx,rar,zip,7z,wim,tar的文件"})]})})})]})})})},pu="ComplexLayout_container__xqRV5",hu="ComplexLayout_box__Hjeq7",vu=[{element:(0,s.jsx)(el,{})},{element:(0,s.jsx)(gu,{})}],xu=function(){var e=d().setScrollTop;return(0,r.useEffect)((function(){e(0)}),[]),(0,s.jsx)("div",{className:pu,children:vu.map((function(e,t){return(0,s.jsx)("div",{className:hu,children:e.element},t)}))})},yu=n(82029),Au="Page1_container__8IHn6",wu="Page1_content__zgPdQ",ju="Page1_top__Tik59",bu="Page1_title__qIkYy",_u="Page1_author__EVTso",Du="Page1_appoint__gEum0",Mu="Page1_articleContent__STpiB",ku="Page1_subTitle__g0Ill",Nu="Page1_codeBox__hf4Aw",Eu="Page1_strong__Um16S",Cu=function(e){var t=(0,p.Z)();e.showPageIndex;return(0,s.jsx)("div",{className:Au,children:(0,s.jsxs)("div",{className:wu,children:[(0,s.jsxs)("div",{className:ju,children:[(0,s.jsx)("div",{className:bu,children:t.formatMessage({id:"page.htmlVision.applicationPageFrame.title"})}),(0,s.jsx)("div",{className:_u,children:"".concat(t.formatMessage({id:"page.htmlVision.applicationPageFrame.author"}),": River")})]}),(0,s.jsxs)("div",{className:Du,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:Mu,children:[(0,s.jsx)("div",{className:ku,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:Nu,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:Nu,children:[(0,s.jsx)("div",{children:"// ".concat(t.formatMessage({id:"page.htmlVision.applicationPageFrame.codeBox2.text"}))}),(0,s.jsx)("div",{children:"