https://home.miui.com/_next/static/chunks/pages/spec-fcc4b1bdcc44cf66.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[912],{3819:function(e,t,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/spec",function(){return s(6511)}])},9878:function(e,t,s){"use strict";var a=s(1527),l=s(959);let r=e=>{let t=(0,l.useRef)(null);return(0,a.jsx)("div",{className:"w-0 h-0 overflow-hidden",children:(0,a.jsx)("div",{ref:t,className:"w-screen h-[48px] pointer-events-none"})})};t.Z=r},9983:function(e,t,s){"use strict";var a=s(1527),l=s(9684),r=s(3883),n=s(7835),i=s(959),c=s(422);let o=e=>{let[t,s]=(0,i.useState)(null);return((0,i.useEffect)(()=>{let e=document.createElement("div");return document.body.appendChild(e),s(e),()=>{document.body.removeChild(e)}},[]),t)?c.createPortal(e.children,t):null},d=e=>{let{open:t,onClose:s,...i}=e;return(0,l.Z)(()=>{s(!1)}),(0,a.jsx)(o,{children:(0,a.jsxs)(r.u,{show:t,as:"div",className:"fixed inset-0 z-50 overflow-hidden bg-black",enter:"transition",enterFrom:"opacity-0",enterTo:"opacity-100",leave:"transition",leaveFrom:"opacity-100",leaveTo:"opacity-0",children:[(0,a.jsx)("video",{src:i.src,poster:i.poster,controls:!0,autoPlay:!0,className:"absolute inset-0 object-contain w-full h-full"}),(0,a.jsx)("div",{className:"!absolute w-32 right-32 top-32 cursor-pointer",onClick:()=>s(!1),children:(0,a.jsx)(n.AssetImage,{path:"miui-13/src_icons_close.svg",layout:"responsive",width:36,height:36})})]})})};t.Z=d},1741:function(e,t,s){"use strict";s.d(t,{A:function(){return l},Z:function(){return r}});var a=s(959);let l={xxs:"410px",xs:"480px",sm:"680px",tablet:"680px",md:"968px",lg:"1024px",desktop:"1024px",xl:"1440px","2xl":"1920px"};function r(e){let[t,s]=(0,a.useState)(null);return(0,a.useEffect)(()=>{let t=matchMedia("(min-width: ".concat(l[e],")")),a=e=>{s(e.matches)};return t.addEventListener?t.addEventListener("change",a):t.addListener(a),a(t),()=>{t.removeEventListener?t.removeEventListener("change",a):t.removeListener(a)}},[e]),t}},9667:function(e,t,s){"use strict";s.d(t,{Z:function(){return i}});var a=s(959),l=s(9313),r=s(1741);let n=["sagit","cactus","cereus","tiare","mido","jason","sakura","sakura_india","daisy","tissot","wayne","jasmine","oxygen","chiron","clover","andromeda","ysl","whyred","tulip","hercules","pavo","aquila","lotus","shiva","urd","curtana","durandal","excalibur","joyeuse","gram","gram","rosemary","draco","avenger","cetus","yunluo","earth","pine","olive","olivelite","olivewood","dandelion","angelica","angelicain","cattail","angelican","onclite","lavender","lotus","laurus","laurel_sprout","ginkgo","biloba","willow","merlinnfc","merlin","lancelot","galahad","citrus","pomelo","lemon","shiva","lime","cannong","curtana","excalibur","joyeuse","gram","sunny","evergo","evergreen","camellia","selene","eos","light","sunstone","tapas","topaz","lilac","spes","fog","opal","frost","biloba","rock","rosemary","matisse","enuma"];function i(e){let[t,s]=(0,a.useState)(!0),[i,c]=(0,a.useState)(!0),o=(0,a.useCallback)(()=>{let t=window.miui;if(l.nI&&!t||l.i7||l.un||l.G6)return!1;try{if(t){let s=JSON.parse(t.getDeviceInfo()).device;return n.includes(s)}}catch(a){return console.error(a),!0}switch(e){case"video":default:return!0;case"scrollAnimation":if(l.KC.toLowerCase().indexOf("baidu")>=0)return!0;return!1}},[e]),d=(0,a.useCallback)(()=>{let e=matchMedia("(min-width: ".concat(r.A.desktop,")")),t=matchMedia("(min-width: ".concat(r.A.tablet,")"));return!!(e.matches&&innerHeight<680||t.matches&&innerHeight<610||innerHeight<350)},[]);return(0,a.useEffect)(()=>{let e=()=>{let t=d();c(t),t&&removeEventListener("resize",e)};return addEventListener("resize",e,{passive:!0}),e(),s(o()),()=>{removeEventListener("resize",e)}},[o,d]),t||i}},9684:function(e,t,s){"use strict";s.d(t,{Z:function(){return l}});var a=s(959);function l(e,t){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:50,l=(0,a.useMemo)(()=>({x:0,y:0}),[]),r=(0,a.useCallback)(()=>{let a=(e,t)=>{let a=t-e;return Math.abs(a)>=s?a>=0?1:-1:0},r={x:0,y:0};(null==t?void 0:t.current)?(r.x=t.current.scrollLeft,r.y=t.current.scrollTop):(r.x=window.scrollX,r.y=window.scrollY);let n=a(l.x,r.x),i=a(l.y,r.y);0!==n&&e(n>0?"left":"right"),0!==i&&(e(i>0?"down":"up"),l.y=r.y)},[e,s,l,t]),n=["wheel","keydown","touchmove"];(0,a.useEffect)(()=>{let e=(null==t?void 0:t.current)||window;

1return n.forEach(t=>{e.addEventListener(t,r,{passive:!0})}),()=>{n.forEach(t=>{e.removeEventListener(t,r)})}})}},3908:function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){let s=r.default,l=(null==t?void 0:t.suspense)?{}:{loading(e){let{error:t,isLoading:s,pastDelay:a}=e;return null}};if(e instanceof Promise?l.loader=()=>e:"function"==typeof e?l.loader=e:"object"==typeof e&&(l=a({},l,e)),(l=a({},l,t)).suspense&&(delete l.ssr,delete l.loading),l.loadableGenerated&&delete(l=a({},l,l.loadableGenerated)).loadableGenerated,"boolean"==typeof l.ssr&&!l.suspense){if(!l.ssr)return delete l.ssr,n(s,l);delete l.ssr}return s(l)},t.noSSR=n;var a=s(5506).Z,l=s(7022).Z,r=(l(s(959)),l(s(8665)));function n(e,t){return delete t.webpack,delete t.modules,e(t)}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},4981:function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LoadableContext=void 0;var a=(0,s(7022).Z)(s(959));let l=a.default.createContext(null);t.LoadableContext=l},8665:function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var a=s(5506).Z,l=(0,s(8889).Z)(s(959)),r=s(4981);let n=[],i=[],c=!1;function o(e){let t=e(),s={loading:!0,loaded:null,error:null};return s.promise=t.then(e=>(s.loading=!1,s.loaded=e,e)).catch(e=>{throw s.loading=!1,s.error=e,e}),s}class d{promise(){return this._res.promise}retry(){this._clearTimeouts(),this._res=this._loadFn(this._opts.loader),this._state={pastDelay:!1,timedOut:!1};let{_res:e,_opts:t}=this;e.loading&&("number"==typeof t.delay&&(0===t.delay?this._state.pastDelay=!0:this._delay=setTimeout(()=>{this._update({pastDelay:!0})},t.delay)),"number"==typeof t.timeout&&(this._timeout=setTimeout(()=>{this._update({timedOut:!0})},t.timeout))),this._res.promise.then(()=>{this._update({}),this._clearTimeouts()}).catch(e=>{this._update({}),this._clearTimeouts()}),this._update({})}_update(e){this._state=a({},this._state,{error:this._res.error,loaded:this._res.loaded,loading:this._res.loading},e),this._callbacks.forEach(e=>e())}_clearTimeouts(){clearTimeout(this._delay),clearTimeout(this._timeout)}getCurrentValue(){return this._state}subscribe(e){return this._callbacks.add(e),()=>{this._callbacks.delete(e)}}constructor(e,t){this._loadFn=e,this._opts=t,this._callbacks=new Set,this._delay=null,this._timeout=null,this.retry()}}function u(e){return function(e,t){let s=Object.assign({loader:null,loading:null,delay:200,timeout:null,webpack:null,modules:null,suspense:!1},t);s.suspense&&(s.lazy=l.default.lazy(s.loader));let n=null;function o(){if(!n){let t=new d(e,s);n={getCurrentValue:t.getCurrentValue.bind(t),subscribe:t.subscribe.bind(t),retry:t.retry.bind(t),promise:t.promise.bind(t)}}return n.promise()}if(!c){let u=s.webpack?s.webpack():s.modules;u&&i.push(e=>{for(let t of u)if(-1!==e.indexOf(t))return o()})}function h(){o();let e=l.default.useContext(r.LoadableContext);e&&Array.isArray(s.modules)&&s.modules.forEach(t=>{e(t)})}let m=s.suspense?function(e,t){return h(),l.default.createElement(s.lazy,a({},e,{ref:t}))}:function(e,t){h();let a=l.useSyncExternalStore(n.subscribe,n.getCurrentValue,n.getCurrentValue);return l.default.useImperativeHandle(t,()=>({retry:n.retry}),[]),l.default.useMemo(()=>{var t;return a.loading||a.error?l.default.createElement(s.loading,{isLoading:a.loading,pastDelay:a.pastDelay,timedOut:a.timedOut,error:a.error,retry:n.retry}):a.loaded?l.default.createElement((t=a.loaded)&&t.__esModule?t.default:t,e):null},[e,a])};return m.preload=()=>o(),m.displayName="LoadableComponent",l.default.forwardRef(m)}(o,e)}function h(e,t){let s=[];for(;e.length;){let a=e.pop();s.push(a(t))}return Promise.all(s).then(()=>{if(e.length)return h(e,t)})}u.preloadAll=()=>new Promise((e,t)=>{h(n).then(e,t)}),u.preloadReady=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return new Promise(t=>{let s=()=>(c=!0,t());h(i,e).then(s,s)})},window.__NEXT_PRELOADREADY=u.preloadReady,t.default=u},6511:function(e,t,s){"use strict";s.r(t),s.d(t,{default:function(){return O}});var a=s(1527),l=s(5924),r=s(6115),n=s.n(r),i=s(2550),c=s.n(i);let o=()=>(0,a.jsx)("div",{className:"safe-area",children:(0,a.jsx)("div",{className:(0,l.Z)("w-64 h-64 roun

1ded-full bg-blue/60",c()["pop-animation"])})}),d=()=>{let e=(0,l.Z)("text-blue font-semibold text-body mt-32 mb-12");return(0,a.jsxs)("div",{className:"safe-area",children:[(0,a.jsx)("h3",{className:e,children:"响应式字体，改变视口宽度观察变化"}),(0,a.jsxs)("div",{className:"p-24 rounded bg-gray",children:[(0,a.jsx)("p",{className:"text-h1",children:"text-h1"}),(0,a.jsx)("p",{className:"text-h2",children:"text-h2"}),(0,a.jsx)("p",{className:"text-h3",children:"text-h3"}),(0,a.jsx)("p",{className:"text-body",children:"text-body"}),(0,a.jsx)("p",{className:"text-caption",children:"text-caption"})]}),(0,a.jsx)("h3",{className:e,children:"颜色规范"}),(0,a.jsxs)("div",{className:"p-24 rounded bg-gray",children:[["bg-black","bg-white","bg-gray","bg-dark","bg-blue","bg-green","bg-yellow","bg-red"].map(e=>{let t=e.replace("bg-","");return(0,a.jsxs)("div",{className:"inline-block py-12 text-center w-72",children:[(0,a.jsx)("span",{className:(0,l.Z)(e,"inline-block w-36 h-36 rounded-full border border-dark/10")}),(0,a.jsx)("p",{children:t})]},t)}),(0,a.jsxs)("h3",{className:"my-12",children:["使用 ","<color>/<opacity>"," 指定颜色透明度"]}),(0,a.jsxs)("div",{className:"space-x-12",children:[(0,a.jsx)("span",{className:"text-red/50",children:"text-red/50"}),(0,a.jsx)("span",{className:"bg-green/30",children:"bg-green/30"}),(0,a.jsx)("span",{className:"border border-blue/60",children:"border-blue/60"})]})]}),(0,a.jsx)("h3",{className:e,children:"使用 .rounded 指定响应式圆角, 改变视口观察变化"}),(0,a.jsx)("div",{className:"rounded h-120 w-120 bg-gray",children:(0,a.jsx)("div",{className:'flex items-center justify-center w-32 h-32 tablet:w-48 tablet:h-48 border-2 border-dashed rounded-full text-red text-caption after:content-["16px"] tablet:after:content-["24px"]'})}),(0,a.jsx)("h3",{className:e,children:"使用 button.btn 套用响应式按钮样式, 改变视口观察变化"}),(0,a.jsxs)("div",{className:"gap-12 p-12 rounded bg-gray",children:[(0,a.jsx)("button",{className:"m-12 btn",children:"一般按钮"}),(0,a.jsx)("button",{className:"m-12 btn",disabled:!0,children:"禁用按钮"}),(0,a.jsx)("button",{className:"m-12 btn btn-dark",children:"暗色变体"}),(0,a.jsx)("button",{className:"m-12 btn btn-dark",disabled:!0,children:"禁用按钮"})]}),(0,a.jsx)("h3",{className:e,children:"安全区，改变视口观察变化"}),(0,a.jsxs)("div",{className:"absolute left-0 w-full py-12 space-y-12 text-white bg-gray",children:[(0,a.jsx)("div",{className:" bg-green/20 safe-area",children:(0,a.jsx)("div",{className:"flex items-center justify-center bg-green/30 h-200",children:".safe-area"})}),(0,a.jsx)("div",{className:" bg-blue/20 safe-area-extend",children:(0,a.jsx)("div",{className:"flex items-center justify-center bg-green/30 h-200",children:".safe-area-extend"})})]}),(0,a.jsx)("div",{className:"h-[440px]"})]})};var u=s(9878);let h=()=>(0,a.jsxs)("div",{className:"safe-area",children:[(0,a.jsxs)("p",{className:"text-blue",children:["导航支持设置内容颜色和背景颜色, 默认为全透明, 比如现在你发现导航不见了",(0,a.jsx)("br",{}),"使用 ","<NavbarTypeTrigger>"," 为导航指定样式"]}),(0,a.jsx)("div",{className:"mt-160 h-[2px] bg-red"}),(0,a.jsx)(u.Z,{content:"light",bg:"dark"}),(0,a.jsx)("p",{className:"text-red/60",children:"当这条线超过视口顶端时, 导航切换为黑底白字"}),(0,a.jsx)("div",{className:"mt-160 h-[2px] bg-yellow"}),(0,a.jsx)(u.Z,{content:"dark",bg:"transparent"}),(0,a.jsx)("p",{className:"text-yellow/60",children:"当这条线超过视口顶端时, 导航切换为透明底黑字"})]});var m=s(9667);function x(e){return e.isFallback?(0,a.jsx)("span",{className:"text-red",children:"已降级"}):(0,a.jsx)("span",{className:"text-green",children:"未降级"})}let p=()=>{let e=(0,m.Z)("video"),t=(0,m.Z)("scrollAnimation");return(0,a.jsxs)("div",{className:"safe-area",children:[(0,a.jsx)("p",{className:"my-12 text-blue",children:"使用不同的浏览器访问查看效果"}),(0,a.jsxs)("p",{children:["视频：",(0,a.jsx)(x,{isFallback:e})]}),(0,a.jsxs)("p",{children:["跟手动画：",(0,a.jsx)(x,{isFallback:t})]})]})};var f=s(959),b=s(7835);let j=()=>{let e=(0,f.useRef)(null),t=(0,f.useRef)(null),l=(0,f.useRef)(null),r=(0,b.useImageUrlGenerator)();(0,f.useEffect)(()=>{let a=e.current,n=null==a?void 0:a.querySelector("._player-1"),i=null==a?void 0:a.querySelector("._player-2");if(r){let{createPlayer:c}=s(9331),o={container:n,height:1170,width:540,autoplay:!0,loop:!0,layout:"responsive",frames:{total:87,iterator:e=>r("miui-13/countdown-".concat((e+1).toString().padStart(3,"0"),".jpg"),{width:540})}},d=c(o),u=c({...o,container:i,autoplay:!1,loop:!1});return t.current=d,l.current=u,()=>{d.destroy(),u.destroy()}}},[r]);let n=e=>{let t=l.current;t&&t.pin(Number(e.currentTarget.value))};return(0,a.jsx)("div",{className:"pb-64",ref:e,children:(0,a.jsxs)("div",{className:"grid grid-cols-1 tablet:grid-cols-2 safe-area",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("p",{children:"可以作为播放器直接播放"}),(0,a.jsx)("div",{className:"_player-1 w-256"})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("p",{children:"可以作为受控组件使用"}),(0,a.jsx)("input",{type:"range",max:87,min:1,step:1,onChange:n,defaultValue:1}),(0,a.jsx)("div",{className:"_player-2 w-256"})]})]})})},y=()=>(0,a.jsxs)("div",{className:"grid grid-cols-1 gap-12 tablet:grid-cols-3 safe-area",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)(b.AssetImage,{path:"miui-14-homepage/30161.jpg",layout:"intrinsic",width:1680,height:1050}),(0,a.jsx)("p",{children:"带占位图的图片"})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)(b.AssetImage,{path:"miui-13/sea-164989.jpg",layout:"responsive",width:1920,height:1280,backgroundColor:"rgb(24,40,72)"}

1),(0,a.jsx)("p",{children:"带背景色的图片"})]}),(0,a.jsxs)("div",{className:"relative h-320",children:[(0,a.jsx)(b.AssetImage,{path:"miui-13/boat-g947108a3f_1920.jpg",layout:"fill",width:1920,height:1280,placeholder:"data:image/jpeg;base64,UklGRpQAAABXRUJQVlA4IIgAAADwAwCdASoUAA0APtFUo0uoJKMhsAgBABoJQBOg1gAZ2wl+ZYF/XW6AAP7o8PPHy13gzBfsg7IfoVJc6mNjJjY+TGkvIF7/NNDQVVSXNG655JAKv5kYQlqECwdDhwA6qBe4P/H399PJHmHsHDn2yxghWhJDrOPVYxaw4/Z5wlIq3olH8/e0fAAA"}),(0,a.jsx)("p",{className:"relative font-medium text-white",children:"使用fill布局作为背景"})]})]}),g=()=>(0,a.jsx)("div",{className:"pb-64",children:(0,a.jsxs)("div",{className:"safe-area",children:[(0,a.jsx)("p",{className:"mb-12 text-blue",children:"改变视口宽度观察变化"}),(0,a.jsx)("div",{className:"flex items-center justify-center h-48 text-white bg-red",children:"仅移动端"}),(0,a.jsx)("div",{className:"flex items-center justify-center h-48 text-white bg-red tablet:bg-green",children:"平板变化颜色"}),(0,a.jsx)("div",{className:"flex items-center justify-center h-48 text-white bg-red tablet:bg-green desktop:bg-yellow",children:"桌面再次变化颜色"}),(0,a.jsx)("p",{className:"mt-12",children:"所有断点可见"}),(0,a.jsx)("p",{className:"hidden tablet:block",children:"平板及以上可见"}),(0,a.jsx)("p",{className:"hidden xs:block sm:hidden",children:"仅xs可见"})]})});var v=s(4356),N=s(4445),_=s(5511),w=s(2502);let k=()=>{let e=(0,f.useRef)(null);(0,_.b)(e,{onProgress(e){let{progress:t,target:s}=e;t=(0,N.Z)(t,0,.6);let a=s.querySelector("._circle"),l=s.querySelector("._square"),r=s.querySelector("._list-item-1"),n=s.querySelector("._list-item-2"),i=s.querySelector("._list-item-3"),c=(0,v.Z)(t,{0:{opacity:0,x:-100},.3:{x:0,opacity:1}}),o=(0,v.Z)(t,{0:{opacity:0,x:100},.2:{opacity:0,x:100},.5:{x:0,opacity:1}}),d=(0,v.Z)(t,{0:{opacity:0,y:100},.6:{opacity:0,y:100},.8:{opacity:1,y:0}}),u=(0,v.Z)(t,{0:{opacity:0,y:100},.7:{opacity:0,y:100},.9:{opacity:1,y:0}}),h=(0,v.Z)(t,{0:{opacity:0,y:100},.8:{opacity:0,y:100},1:{opacity:1,y:0}});(0,w.to)(a,{opacity:c.opacity,translateX:c.x+"px"}),(0,w.to)(l,{opacity:o.opacity,translateX:o.x+"px"}),(0,w.to)(r,{opacity:d.opacity,translateY:d.y+"px"}),(0,w.to)(n,{opacity:u.opacity,translateY:u.y+"px"}),(0,w.to)(i,{opacity:h.opacity,translateY:h.y+"px"}),s.style.visibility="visible"}});let t=(0,l.Z)("h-64 bg-green rounded");return(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("div",{className:"h-[1500px] invisible",ref:e,children:(0,a.jsx)("div",{className:"sticky top-0 overflow-hidden h-section",children:(0,a.jsxs)("div",{className:"flex flex-col justify-center h-full max-w-xl safe-area",children:[(0,a.jsxs)("div",{className:"flex space-x-32",children:[(0,a.jsx)("div",{className:"w-64 h-64 rounded-full bg-red _circle"}),(0,a.jsx)("div",{className:"flex-grow h-64 rounded bg-blue _square"})]}),(0,a.jsxs)("div",{className:"mt-32 space-y-24",children:[(0,a.jsx)("div",{className:(0,l.Z)("_list-item-1",t)}),(0,a.jsx)("div",{className:(0,l.Z)("_list-item-2",t)}),(0,a.jsx)("div",{className:(0,l.Z)("_list-item-3",t)})]})]})})})})};var Z=s(1741);let A=e=>{let{active:t}=e;return(0,a.jsxs)("div",{className:"inline",children:[(0,a.jsx)("span",{className:"text-dark/60",children:null===t&&"未知"}),(0,a.jsx)("span",{className:"text-green",children:!0===t&&"是"}),(0,a.jsx)("span",{className:"text-red",children:!1===t&&"否"})]})},E=()=>{let e=(0,Z.Z)("tablet"),t=(0,Z.Z)("desktop");return(0,a.jsxs)("div",{className:"safe-area",children:[(0,a.jsx)("p",{className:"my-12 text-blue",children:"改变浏览器宽度观察效果"}),(0,a.jsxs)("div",{children:["是否匹配 tablet: ",(0,a.jsx)(A,{active:e})]}),(0,a.jsxs)("div",{children:["是否匹配 desktop: ",(0,a.jsx)(A,{active:t})]})]})};var C=s(9983);let S=()=>{let[e,t]=(0,f.useState)(!1);return(0,a.jsxs)("div",{className:"safe-area",children:[(0,a.jsx)(C.Z,{open:e,onClose:t,src:"https://home.miui.com/videos/landing-page-cover.mp4"}),(0,a.jsx)("button",{className:"btn",onClick:()=>t(!0),children:"点击播放视频"})]})},P=n()(()=>Promise.all([s.e(862),s.e(697)]).then(s.bind(s,1697)),{loadableGenerated:{webpack:()=>[1697]},ssr:!1}),L=()=>{let e=(0,l.Z)("text-h2 text-gray-700 mt-32 mb-12 safe-area");return(0,a.jsxs)("div",{className:"mt-84",children:[(0,a.jsx)("h1",{className:e,children:"设计规范套用"}),(0,a.jsx)(d,{}),(0,a.jsx)("h1",{className:e,children:"跟手滚动动画示例"}),(0,a.jsx)(P,{}),(0,a.jsx)("h1",{className:e,children:"响应式开发示例"}),(0,a.jsx)(g,{}),(0,a.jsx)("h1",{className:e,children:"图片引入示例"}),(0,a.jsx)(y,{}),(0,a.jsx)("h1",{className:e,children:"CSS Module 动画示例"}),(0,a.jsx)(o,{}),(0,a.jsx)("h1",{className:e,children:"降级处理示例"}),(0,a.jsx)(p,{}),(0,a.jsx)("h1",{className:e,children:"视频弹窗示例"}),(0,a.jsx)(S,{}),(0,a.jsx)("h1",{className:e,children:"通过js匹配断点"}),(0,a.jsx)(E,{}),(0,a.jsx)("h1",{className:e,children:"动态导航栏样式示例"}),(0,a.jsx)(h,{}),(0,a.jsx)("h1",{className:e,children:"跟手滚动动画示例"}),(0,a.jsx)(k,{}),(0,a.jsx)("h1",{className:e,children:"序列帧示例"}),(0,a.jsx)(j,{})]})};var O=L},4356:function(e,t,s){"use strict";s.d(t,{Z:function(){return l}});var a=s(4445);function l(e,t){let s=Object.keys(t).map(Number).sort(),l=s[0],r=s[s.length-1];if(void 0===r)return t[0];if(0!==l)throw Error("起始关键帧索引必须为0,当前为 ".concat(l));if(r>1)throw Error("关键帧索引超出范围,当前为 ".concat(r));let n={...t[l]},i={...n};for(let c=0;c<s.length-1;c++){let o=s[c],d=s[c+1],u=(0,a.Z)(e,o,d);if(u>0){let h=t[d];for(let m in h){var x;let p=null!==(x=n[m])&&void 0!==x?x:0,f=h[m];i[m]=p+u*(f-p)}1===u&&(n={...i})}else break}return i}},4445:function(e,t,s){"use strict";function a(e,t,s){let a=1/(s-t)*(e-t);return a<0?0:a>1?1:a}s.d(t,{Z:function(){return a}})},2550:function(e){e.exports={"pop-animation":"animation_pop-animation__XF7Ul",pop:"animation_pop__WWQtA"}},6115:function(e,t,s){e.exports=s(3908)}},function(e){e.O(0,[91,774,888,179],function(){return e(e.s=3819)}),_N_E=e.O()}]);