PageSourceSearch

https://pixso.net/

html pixso.net collected 2026-10-04 00:27:55 UTC 466,365 bytes, 9,294 lines download raw bytes

1<!doctype html>
2<html lang="en">
3<head>
4
5<meta charset="UTF-8">
6<meta name="viewport" content="width=device-width, initial-scale=1">
7<meta name="description" content="Create UI/UX designs, refine interfaces with AI, and build interactive prototypes in Pixso. Keep components, team feedback, and developer handoff in one workspace.">
8<meta name="keywords" content="UI UX design tool, UI design, prototyping tool, AI UI design, design systems, developer handoff">
9<title>Pixso | UI/UX Design & Prototyping Tool with AI</title>
10<link rel="canonical" href="https://pixso.net/">
11<meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1">
12
13<meta property="og:type" content="website">
14<meta property="og:title" content="Pixso | UI/UX Design & Prototyping Tool with AI">
15<meta property="og:description" content="Create UI/UX designs, refine interfaces with AI, and build interactive prototypes in Pixso. Keep components, team feedback, and developer handoff in one workspace.">
16<meta property="og:url" content="https://pixso.net/">
17<meta property="og:image" content="https://pixso.net/assets/media/module-12-item2-4542f0680d17fba7.webp">
18<meta property="og:image:width" content="1160">
19<meta property="og:image:height" content="724">
20<meta property="og:image:alt" content="Pixso collaborative UI/UX design and developer handoff workspace">
21<meta property="og:site_name" content="Pixso">
22<meta name="twitter:card" content="summary_large_image">
23<meta name="twitter:title" content="Pixso | UI/UX Design & Prototyping Tool with AI">
24<meta name="twitter:description" content="Create UI/UX designs, refine interfaces with AI, and build interactive prototypes in Pixso. Keep components, team feedback, and developer handoff in one workspace.">
25<meta name="twitter:image" content="https://pixso.net/assets/media/module-12-item2-4542f0680d17fba7.webp">
26<meta name="twitter:image:alt" content="Pixso collaborative UI/UX design and developer handoff workspace">
27<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://pixso.net/#website","url":"https://pixso.net/","name":"Pixso"},{"@type":"SoftwareApplication","@id":"https://pixso.net/#software","name":"Pixso","url":"https://pixso.net/","applicationCategory":"DesignApplication","operatingSystem":"Web, Windows, macOS","offers":{"@type":"Offer","url":"https://pixso.net/pricing/","category":"free plan"}}]}</script>
27
28<!-- cas -->
29<link id="pixso-font-preload-v1" rel="preload" href="https://pixso.net/assets/fonts/Figtree-SemiBold.ttf" as="font" type="font/ttf" crossorigin fetchpriority="high">
30<script id="pixso-cookie-helpers-v2">
31(function (w, d) {
32  w.getCookie = w.getCookie || function (name) {
33    var match = d.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'));
34    return match ? unescape(match[2]) : null;
35  };
36  w.setCookie = w.setCookie || function (name, value, days) {
37    var expires = new Date();
38    expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
39    d.cookie = name + '=' + escape(value) + ';expires=' + expires.toGMTString() + ';path=/';
40  };
41})(window, document);
42</script>
vendor: 1 bytes, line 42
42
43<script id="pixso-deferred-cas-v1" async src="https://pixso.net/assets/js/cas-client-bosyun.www.js" onload="this.dataset.loaded='true';window.dispatchEvent(new Event('pixso-cas-ready'))"></script>
43
44
45<!-- Google Tag Manager -->
46<script id="pixso-deferred-analytics-v1">
47(function (w, d, l, i) {
48  w[l] = w[l] || [];
49  var loaded = false;
50  function loadGtm() {
51    if (loaded) return;
52    loaded = true;
53    w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
54    var first = d.getElementsByTagName('script')[0];
55    var script = d.createElement('script');
56    script.async = true;
57    script.src = 'https://www.googletagmanager.com/gtm.js?id=' + i;
58    first.parentNode.insertBefore(script, first);
59  }
60  ['pointerdown', 'touchstart', 'keydown', 'scroll'].forEach(function (eventName) {
61    w.addEventListener(eventName, loadGtm, { once: true, passive: true });
62  });
63  function scheduleFallback() { w.setTimeout(loadGtm, 20000); }
64  if (d.readyState === 'complete') scheduleFallback();
65  else w.addEventListener('load', scheduleFallback, { once: true });
66})(window, document, 'dataLayer', 'GTM-5BV5J2KZ');
67</script>
67
68<!-- End Google Tag Manager -->
69
70<!-- Google Tag Manager (noscript) -->
vendor: 69 bytes, lines 70-71
70
71<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
71GTM-5BV5J2KZ
vendor: 93 bytes, lines 71-72
71" height="0" width="0"
72        style="display:none;visibility:hidden"></iframe></noscript>
73<!-- End Google Tag Manager (noscript) -->
74<!-- START: Naver Search Advisor Verification -->
75<meta name="naver-site-verification" content="b34c67662d5946d770f2731f4a272b630e30aaec" />
76<!-- END: Naver Search Advisor Verification -->
77
78<script id="pixso-cas-init-v1">
79(function () {
80  function initPixsoCasHeader() {
81    if (window.__pixsoCasHeaderInitialized || !window.bosyunSensors || !window.bosyunCas) return;
82    window.__pixsoCasHeaderInitialized = true;
83    const env = location.host === 'pixso.net' ? "www" : "www-test"
84    var {
85        sensors
86    } = bosyunSensors.sensorsInit(env, "pixso", bosyunSensors.StorageAPI.localStorage);
87    window.casClient = bosyunCas.casClient;
88    function getCookie(name) {
89        var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
90        if (arr != null) {
91            return unescape(arr[2]);
92        }
93        return null;
94    }
95    //设置cookie多语言
96    function setCookie(name, value, days) {
97        var exp = new Date();
98        exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
99        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";
100    }
101    setCookie("lang", "en", 365);
102    // pixso-cookie-bridge-v1
103
104    window.getCookie = getCookie;
105
106    if (typeof setCookie === 'function') window.setCookie = setCookie;
107
108    document.addEventListener("DOMContentLoaded", function (event) {
109        var userInfo = JSON.parse(localStorage.getItem("BOSYUNCurrent"));
110        if (userInfo != null) {
111            casClient.sensorsRegisterUserInfo(userInfo)
112            document.querySelector('#wsc-header').classList.add('header-logined')
113        }
114    })
115  }
116  if (window.bosyunSensors && window.bosyunCas) initPixsoCasHeader();
117  else window.addEventListener('pixso-cas-ready', initPixsoCasHeader, { once: true });
118})();
119</script>
vendor: 2 bytes, line 119
119
120<script>
121    function getQueryString(name) {
122        let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
123        let r = window.location.search.substr(1).match(reg);
124        if (r != null) {
125            return decodeURIComponent(r[2]);
126        }
127        return null;
128    }
129    let noSkip = ['community', 'app'];
130    // if (
131    //     JSON.parse(getCookie('BOSYUNCurrent')) != null &&
132    //     getQueryString('from') === null &&
133    //     noSkip.indexOf(sessionStorage.getItem('from')) === -1
134    // ) {
135    //     location.href = 'https://pixso.net/app/recent';
136    // }
137</script>
vendor: 2 bytes, line 137
137
138<script>
139    function getLinkToPixsoCn(el) {
140        var node = el && el.nodeType === 1 ? el : null;
141        while (node && node !== document.body) {
142            if (node.tagName === 'A' && node.href && node.href.indexOf('pixso.net/app') !== -1) return node;
143            node = node.parentElement;
144        }
145        return null;
146    }
147
148    function onPixsoCnNavigate(link, event) {
149        var url = link.href || '';
150        if (url.indexOf('user/login') !== -1) {
151            console.log(1234, url);
152            try {
153                var u = new URL(url);
154                var cur = new URL(window.location.href);
155                cur.searchParams.forEach(function (v, k) { u.searchParams.set(k, v); });
156                u.searchParams.set("from_url", location.origin + location.pathname);
157                const storeObj = {};
158                u.searchParams.forEach(function (v, k) { storeObj[k] = v; });
159                sessionStorage.setItem("utm_storage", JSON.stringify(storeObj));
160                link.setAttribute('href', u.toString());
161            } catch (e) { }
162        }
163    }
164    document.addEventListener('click', function (e) {
165        var link = getLinkToPixsoCn(e.target);
166        if (link) onPixsoCnNavigate(link, e);
167    }, true);
168    const replaceAllLink = () => {
169        document.querySelectorAll('a').forEach(el => {
170            if (el.href.includes('pixso.net/app') && localStorage.getItem('BOSYUNCurrent') === null) {
171                //未登录直接替换为登录的地址
172                el.href = 'https://pixso.net/user/login/?redirect_uri=' + el.href + '&from=1&product=pixso&ux_mode=redirect'
173            }
174        })
175    }
176    document.addEventListener("DOMContentLoaded", () => {
177        replaceAllLink()
178    })
179</script>
179
180<link rel="shortcut icon" href="https://pixso.net/assets/media/favicon2-94712c33544afd45.ico" type="image/x-icon" />
181<link rel="stylesheet" href="https://pixso.net/assets/media/shared-2c3022a33eaeb44b.css" />
182
183<link rel="stylesheet" href="https://pixso.net/assets/media/shared-8eb30f2734ceda89.css">
184<style>
185    :root {
186        --v2--color-bg-brand-normal: #336fff;
187        --v2--color-bg-brand-hover: #4381ff
188    }
189
190    .login-mask {
191        position: fixed;
192        left: 0;
193        right: 0;
194        bottom: 0;
195        top: 0;
196        background: rgba(6, 8, 10, .57);
197        display: none;
198        z-index: 111011
199    }
200
201    .login-mask__show {
202        display: flex;
203        align-items: center;
204        justify-content: center
205    }
206
207    .login-box-wrap {
208        width: 720px;
209        border-radius: 10px;
210        height: 480px;
211        position: absolute;
212        left: 50%;
213        top: 50%;
214        transform: translate(-50%, -50%);
215    }
216
217    .login-box {
218        animation: login-effect .3s ease-in-out;
219        width: 100%;
220        height: 100%;
221        border-radius: 10px;
222        box-shadow: 0 0 4px rgba(25, 25, 26, .04), 0 4px 16px rgba(25, 25, 26, .04), 0 8px 24px rgba(25, 25, 26, .06);
223        border: 1px solid rgba(18, 17, 43, .07)
224    }
225
226    .login-dialog-close {
227        display: flex;
228        align-items: center;
229        justify-content: center;
230        position: absolute;
231        width: 24px;
232        height: 24px;
233        right: -39px;
234        top: 0px;
235        background: rgba(255, 255, 255, 0.2);
236        border-radius: 50%;
237        backdrop-filter: blur(10px);
238        -webkit-backdrop-filter: blur(10px);
239    }
240
241    .login-dialog-close:hover {
242        background: rgba(255, 255, 255, 0.3)
243    }
244
245    @keyframes login-effect {
246        0% {
247            transform: translateY(20px) scale(.8);
248            opacity: 0;
249            transform-origin: bottom center
250        }
251
252        100% {
253            transform: translateY(0);
254            opacity: 1;
255            transform-origin: bottom center
256        }
257    }
258
259    .toWorkbench {
260        background: var(--v2--color-bg-brand-normal);
261    }
262
263    .bg-transparent .header-gradient--text:hover {
264        color: var(--v2--color-text-brand-normal);
265    }
266
267    .px-10 {
268        padding-left: 10px !important;
269        padding-right: 10px !important;
270    }
271
272    .px-20 {
273        padding-left: 20px !important;
274        padding-right: 20px !important;
275    }
276
277    .toWorkbench-container {
278        padding-left: 6.25rem;
279        margin-right: 11.375rem;
280    }
281
282    @media screen and (max-width: 980px) {
283        .toWorkbench-container {
284            padding-left: 12px;
285            margin-right: 0;
286        }
287    }
288
289    .header-logo-container {
290        position: relative;
291    }
292
293    .header-logo-tip {
294        position: absolute;
295        box-sizing: border-box;
296        border: 1px solid rgba(81, 132, 255, 1);
297        border-radius: 6px;
298        box-shadow: 0px 0.2px 0.6499999761581421px 0px rgba(0, 0, 0, 0.06), 0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.24);
299        background: rgba(255, 255, 255, 1);
300        width: 214px;
301        height: 40px;
302        flex-direction: row;
303        justify-content: flex-start;
304        align-items: flex-start;
305        padding: 10px 12px 10px 12px;
306        color: rgba(0, 0, 0, 1);
307        font-size: 14px;
308        font-weight: 400;
309        line-height: 20px;
310        top: 55px;
311        left: -60px;
312        opacity: 0;
313        display: none;
314    }
315
316    .header-logo-container:hover .header-logo-tip {
317        display: flex;
318        opacity: 1;
319    }
320
321    .header-logo-tip-arrow {
322        position: absolute;
323        top: -30px;
324        left: 100%;
325    }
326
327    .customer-btn:hover {
328        color: #fff !important;
329    }
330
331    .header-item--ai-col {
332        width: 260px;
333        height: 336px;
334    }
335
336    .paico-ai-card {
337        display: block;
338        width: 260px;
339        height: 336px;
340        overflow: hidden;
341        position: relative;
342        flex-shrink: 0;
343        border-radius: 10px;
344        background-repeat: no-repeat;
345        background-size: 100% 100%;
346        background-position: center;
347        background-image: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D'0%200%20260%20336'%20preserveAspectRatio%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D'grad'%20gradientUnits%3D'objectBoundingBox'%20x1%3D'0'%20y1%3D'0.5'%20x2%3D'1'%20y2%3D'0.5'%20gradientTransform%3D'matrix(0.0000%2C%201.1043%2C%20-2.0633%2C%200.0000%2C%201.5316%2C%20-0.1043)'%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D'rgba(239%2C230%2C255%2C1)'%20offset%3D'0.21978013217449188'%2F%3
347E%3Cstop%20stop-color%3D'rgba(255%2C133%2C216%2C1)'%20offset%3D'0.7151337265968323'%2F%3E%3Cstop%20stop-color%3D'rgba(255%2C122%2C103%2C1)'%20offset%3D'1'%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%3Crect%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'url(%23grad)'%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E");
348    }
349
350    .paico-ai-card__rings {
351        width: 345px;
352        height: 345px;
353        position: absolute;
354        left: -60.06459068203603px;
355        top: -123.06507896328603px;
356        transform: rotate(-4.448242011398492deg);
357    }
358
359    .paico-ai-card__ring {
360        position: absolute;
361    }
362
363    .paico-ai-card__ring::before {
364        content: '';
365        position: absolute;
366        inset: 0;
367        background-repeat: no-repeat;
368        background-size: 100% 100%;
369        background-position: center;
370        background-image: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D'0%200%20345%20345'%20preserveAspectRatio%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D'grad'%20gradientUnits%3D'objectBoundingBox'%20x1%3D'0'%20y1%3D'0.5'%20x2%3D'1'%20y2%3D'0.5'%20gradientTransform%3D'matrix(0.0000%2C%20-1.0000%2C%201.0000%2C%200.0000%2C%200.0000%2C%201.0000)'%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D'rgba(255%2C255%2C255%2C0.05)'%20offset%3D'0'%2F%3E%3Cstop%20stop-color%3D'rgba(255%2C255%2C255%2C0)'%20offset%3D'1'%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%3Crect%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'url(%23grad)'%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E");
371        mix-blend-mode: overlay;
372    }
373
374    .paico-ai-card__ring::after {
375        content: '';
376        position: absolute;
377        inset: 0;
378        pointer-events: none;
379        background-image: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D'0%200%20345%20345'%20preserveAspectRatio%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D'grad'%20gradientUnits%3D'objectBoundingBox'%20x1%3D'0'%20y1%3D'0.5'%20x2%3D'1'%20y2%3D'0.5'%20gradientTransform%3D'matrix(0.0000%2C%20-1.0000%2C%201.0000%2C%200.0000%2C%200.0000%2C%201.0000)'%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D'rgba(255%2C255%2C255%2C0.2)'%20offset%3D'0'%2F%3E%3Cstop%20stop-color%3D'rgba(255%2C255%2C255%2C0)'%20offset%3D'1'%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%3Crect%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'url(%23grad)'%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E");
380        background-size: 100% 100%;
381        background-repeat: no-repeat;
382        background-position: center;
383        padding: 1px;
384        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
385        -webkit-mask-composite: xor;
386        mask-composite: exclude;
387    }
388
389    .paico-ai-card__ring--1 {
390        left: 0;
391        top: 0;
392        width: 345px;
393        height: 345px;
394    }
395
396    .paico-ai-card__ring--1,
397    .paico-ai-card__ring--1::before,
398    .paico-ai-card__ring--1::after {
399        border-radius: 120px;
400    }
401
402    .paico-ai-card__ring--2 {
403        left: 23.639649114747073px;
404        top: 24.260742864747073px;
405        width: 293px;
406        height: 293px;
407        transform: rotate(2.648696220964199e-7deg);
408    }
409
410    .paico-ai-card__ring--2,
411    .paico-ai-card__ring--2::before,
412    .paico-ai-card__ring--2::after {
413        border-radius: 90px;
414    }
415
416    .paico-ai-card__ring--3 {
417        left: 46px;
418        top: 46px;
419        width: 239px;
420        height: 239px;
421    }
422
423    .paico-ai-card__ring--3,
424    .paico-ai-card__ring--3::before,
425    .paico-ai-card__ring--3::after {
426        border-radius: 60px;
427    }
428
429    .paico-ai-card__ring--4 {
430        left: 76px;
431        top: 76px;
432        width: 179px;
433        height: 179px;
434    }
435
436    .paico-ai-card__ring--4,
437    .paico-ai-card__ring--4::before,
438    .paico-ai-card__ring--4::after {
439        border-radius: 30px;
440    }
441
442    .paico-ai-card__icon {
443        width: 48px;
444        height: 48px;
445        overflow: hidden;
446        position: absolute;
447        left: 20px;
448        top: 20px;
449        border-radius: 14px;
450        background-color: rgba(255, 255, 255, 1);
451    }
452
453    .paico-ai-card__logo-main {
454        width: 29.71875px;
455        height: 23.72802734375px;
456        position: absolute;
457        left: 9.00000163533332px;
458        top: 12.88327646255493px;
459    }
460
461    .paico-ai-card__logo-spark {
462        width: 5.8330078125px;
463        height: 5.830078125px;
464        position: absolute;
465        left: 36.365610122680664px;
466        top: 9.930718444287777px;
467    }
468
469    .paico-ai-card__preview {
470        width: 260px;
471        height: 336px;
472        position: absolute;
473        left: 0;
474        top: 0;
475        object-fit: cover;
476        transition: all ease-in-out 0.1s;
477    }
478
479    .paico-ai-card:hover .paico-ai-card__preview {
480        top: -10px;
481    }
482
483    .paico-ai-card__title {
484        position: absolute;
485        left: 20px;
486        top: 250px;
487        margin: 0;
488        color: rgba(255, 255, 255, 1);
489        font-size: 16px;
490        font-weight: 600;
491        letter-spacing: 0;
492        line-height: normal;
493        white-space: pre;
494    }
495
496    .paico-ai-card__description {
497        position: absolute;
498        left: 20px;
499        top: 278px;
500        width: 181px;
501        margin: 0;
502        color: rgba(255, 255, 255, 1);
503        font-size: 14px;
504        font-weight: 300;
505        letter-spacing: 0;
506        line-height: 19px;
507    }
508
509    .paico-ai-card:hover .paico-ai-card__arrow {
510        background: rgba(255, 255, 255, 0.3);
511    }
512
513    .paico-ai-card__arrow {
514        width: 26px;
515        height: 26px;
516        position: absolute;
517        left: 214px;
518        top: 290px;
519        border-radius: 50%;
520        background: rgba(255, 255, 255, 0.11);
521        transition: all ease-in-out 0.1s;
522        display: flex;
523        justify-content: center;
524        align-items: center;
525    }
526</style>
527<script>
528    window.addEventListener("DOMContentLoaded", () => {
529        const els = document.querySelectorAll('.header-dropdown-item');
530        els.forEach(el => {
531            el.querySelector(".nav-link").addEventListener("mousedown", (e) => {
532                if (window.innerWidth < 980) {
533                    if (el.classList.contains('mobile-show')) {
534                        el.classList.remove('mobile-show');
535                    } else {
536                        const els = document.querySelectorAll('.header-dropdown-item');
537                        els.forEach(el => {
538                            el.classList.remove('mobile-show');
539                        })
540                        el.classList.add('mobile-show');
541                    }
542                }
543            });
544        })
545    })
546</script>
546
547
548<!-- Pixso structured data v1 -->
549<script id="pixso-organization-structured-data" type="application/ld+json">
550{"@context":"https://schema.org","@type":"Organization","@id":"https://pixso.net/#organization","name":"Pixso","url":"https://pixso.net/","logo":{"@type":"ImageObject","url":"https://pixso.net/assets/media/px-logo-074d2a64fdeed33d.webp"}}
551</script>
vendor: 1 bytes, line 551
551
552<script>
553(function () {
554  function clean(value) {
555    return (value || '').replace(/\s+/g, ' ').trim();
556  }
557
558  function absoluteUrl(value) {
559    if (!clean(value)) return '';
560    try {
561      var url = new URL(value, window.location.origin);
562      url.pathname = url.pathname.replace(/\/{2,}/g, '/');
563      return url.href.replace(/\/index\.html(?=$|[?#])/, '/');
564    } catch (error) {
565      return '';
566    }
567  }
568
569  function addJsonLd(id, value) {
570    if (document.getElementById(id)) return;
571    var script = document.createElement('script');
572    script.id = id;
573    script.type = 'application/ld+json';
574    script.textContent = JSON.stringify(value);
575    document.head.appendChild(script);
576  }
577
578  function localizedHome(pathname) {
579    if (/^\/jp(?:\/|$)/.test(pathname)) return { name: 'ホーム', url: '/jp/' };
580    if (/^\/kr(?:\/|$)/.test(pathname)) return { name: '홈', url: '/kr/' };
581    if (/^\/ru(?:\/|$)/.test(pathname)) return { name: 'Главная', url: '/ru/' };
582    if (/^\/es(?:\/|$)/.test(pathname)) return { name: 'Inicio', url: '/es/' };
583    return { name: 'Home', url: '/' };
584  }
585
586  function fallbackBreadcrumbs(pathname, canonical, pageName) {
587    var home = localizedHome(pathname);
588    var items = [{ name: home.name, url: absoluteUrl(home.url) }];
589    var withoutLocale = pathname.replace(/^\/(?:jp|kr|ru|es)(?=\/)/, '');
590    var segments = withoutLocale.split('/').filter(Boolean);
591    if (segments.length > 1) {
592      var sectionLabels = {
593        articles: 'Articles',
594        blog: 'Blog',
595        templates: 'Templates',
596        tips: 'Design Tips',
597        'design-skills': 'Design Skills',
598        'ui-design': 'UI Design',
599        prototyping: 'Prototyping',
600        new: "What's New",
601        releases: 'Releases'
602      };
603      var localePrefix = pathname.match(/^\/(jp|kr|ru|es)(?=\/)/);
604      var sectionPath = (localePrefix ? '/' + localePrefix[1] : '') + '/' + segments[0] + '/';
605      var sectionName = sectionLabels[segments[0]] || segments[0].replace(/[-_]+/g, ' ').replace(/\b\w/g, function (letter) { return letter.toUpperCase(); });
606      items.push({ name: sectionName, url: absoluteUrl(sectionPath) });
607    }
608    items.push({ name: pageName, url: canonical });
609    return items;
610  }
611
612  function visibleBreadcrumbs(canonical, pageName) {
613    var navs = Array.prototype.slice.call(document.querySelectorAll('nav'));
614    var nav = navs.find(function (item) { return item.querySelectorAll('a.px-breadcrumb').length > 0; });
615    if (!nav) return null;
616    var items = Array.prototype.slice.call(nav.querySelectorAll('a.px-breadcrumb')).map(function (link) {
617      return { name: clean(link.textContent), url: absoluteUrl(link.getAttribute('href')) };
618    }).filter(function (item) { return item.name && item.url; });
619    items.push({ name: pageName, url: canonical });
620    return items.length >= 2 ? items : null;
621  }
622
623  function buildBreadcrumbs() {
624    var pathname = window.location.pathname.replace(/\/index\.html$/, '/');
625    if (/^\/(?:jp|kr|ru|es)?\/?$/.test(pathname)) return;
626    var robots = document.querySelector('meta[name="robots"]');
627    if (robots && /noindex/i.test(robots.getAttribute('content') || '')) return;
628    var canonicalLink = document.querySelector('link[rel="canonical"]');
629    var canonical = absoluteUrl(canonicalLink ? canonicalLink.getAttribute('href') : window.location.href);
630    var heading = document.querySelector('h1');
631    var pageName = clean(heading ? heading.textContent : document.title.replace(/\s*[-|]\s*Pixso.*$/i, ''));
632    if (!canonical || !pageName) return;
633    var items = visibleBreadcrumbs(canonical, pageName) || fallbackBreadcrumbs(pathname, canonical, pageName);
634    var deduped = items.filter(function (item, index, list) {
635      return item.name && item.url && list.findIndex(function (candidate) { return candidate.url === item.url; }) === index;
636    });
637    if (deduped.length < 2) return;
638    addJsonLd('pixso-breadcrumb-structured-data', {
639      '@context': 'https://schema.org',
640      '@type': 'BreadcrumbList',
641      itemListElement: deduped.map(function (item, index) {
642        return { '@type': 'ListItem', position: index + 1, name: item.name, item: item.url };
643      })
644    });
645  }
646
647  if (document.readyState === 'loading') {
648    document.addEventListener('DOMContentLoaded', buildBreadcrumbs, { once: true });
649  } else {
650    buildBreadcrumbs();
651  }
652})();
653</script>
653
654
655<style>
656/* Figtree字体引入 */
657@font-face {
658  font-family: 'Figtree';
659  src: url('https://pixso.net/assets/fonts/Figtree-Regular.ttf') format('truetype');
660  font-weight: 400;
661  font-style: normal;
662  font-display: swap;
663}
664
665@font-face {
666  font-family: 'Figtree';
667  src: url('https://pixso.net/assets/fonts/Figtree-Medium.ttf') format('truetype');
668  font-weight: 500;
669  font-style: normal;
670  font-display: swap;
671}
672
673@font-face {
674  font-family: 'Figtree';
675  src: url('https://pixso.net/assets/fonts/Figtree-SemiBold.ttf') format('truetype');
676  font-weight: 600;
677  font-style: normal;
678  font-display: swap;
679}
680
681@font-face {
682  font-family: 'Figtree';
683  src: url('https://pixso.net/assets/fonts/Figtree-Bold.ttf') format('truetype');
684  font-weight: 700;
685  font-style: normal;
686  font-display: swap;
687}
688
689p,
690ol,
691ul,
692dl,
693body {
694  margin: 0;
695}
696
697a {
698  text-decoration: none;
699  transition: none;
700  -webkit-transition: none;
701}
702
703button {
704  border: none;
705  padding: 0;
706}
707button:focus {
708  outline: none;
709}
710
711.h1,
712.h2,
713.h3,
714.h4,
715.h5,
716.h6,
717.popover,
718.tooltip,
719body,
720h1,
721h2,
722h3,
723h4,
724h5,
725h6,
726span {
727  -webkit-font-smoothing: antialiased;
728  font-family: 'Figtree', Arial, Helvetica Neue, Microsoft YaHei, Helvetica, sans-serif;
729}
730
731div,
732section {
733  box-sizing: border-box;
734  font-family: 'Figtree', Arial, Helvetica Neue, Microsoft YaHei, Helvetica, sans-serif;
735}
736
737:root {
738  --header-height: 54px;
739  --content-max-width: 1380px;
740}
741
742h1,
743h2,
744h3 {
745  margin-bottom: 0px;
746}
747
748.flex_center {
749  display: flex;
750  align-items: center;
751  justify-content: center;
752}
753
754/* 公共样式 */
755/* 滚动进入动画 */
756.scroll-animate-up {
757  opacity: 0;
758  transform: translateY(50px);
759  transition: opacity 200ms ease-out, transform 200ms ease-out;
760}
761
762.scroll-animate-up.animate-in {
763  opacity: 1;
764  transform: translateY(0);
765}
766
767/* 公共按钮 */
768.px-common-btn {
769  box-sizing: border-box;
770  border-radius: 8px;
771  border: 1px solid #000;
772  background: rgba(0, 0, 0, 0.84);
773  box-shadow: 0 0.8px 0 0 rgba(255, 255, 255, 0.3) inset;
774  display: flex;
775  height: 40px;
776  padding: 10px 20px;
777  justify-content: center;
778  align-items: center;
779  color: #fff !important;
780  text-align: center;
781  font-size: 14px;
782  font-style: normal;
783  font-weight: 600;
784  line-height: 115.296%;
785  width: fit-content;
786}
787.px-common-btn:hover {
788  background: #303030;
789  transition: all 150ms ease-out;
790}
791
792.px-common-btn:active {
793  background: #303030;
794  transform: scale(0.96);
795  transition: transform 200ms cubic-bezier(0.17, 0.84, 0.44, 1);
796}
797
798.px-common-btn__plain {
799  box-sizing: border-box;
800  display: flex;
801  height: 40px;
802  padding: 10px 20px;
803  justify-content: center;
804  align-items: center;
805  gap: 10px;
806  border-radius: 8px;
807  border: none;
808  outline: none;
809  background-color: #fff;
810  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 0 1px 0 rgba(0, 0, 0, 0.4);
811  color: #000;
812  text-align: center;
813  font-size: 14px;
814  font-style: normal;
815  font-weight: 600;
816  line-height: 115.296%;
817  will-change: auto;
818  border: none;
819  transition: transform 200ms ease-out;
820}
821
822.px-common-btn__plain:hover {
823  background: rgba(0, 0, 0, 0.03);
824}
825
826.px-common-btn__plain:active {
827  background: rgba(0, 0, 0, 0.03);
828  transform: scale(0.96);
829}
830
831/* 公共模块 */
832.border-bottom-above {
833  position: relative;
834  border-bottom: none !important;
835}
836
837.border-bottom-above::after {
838  content: '';
839  position: absolute;
840  bottom: 0;
841  right: 0;
842  width: 100%;
843  height: 1px;
844  z-index: 1;
845  border-bottom: 1px solid #eaebee;
846}
847
848.border-right-above {
849  position: relative;
850  border-right: none !important;
851}
852
853.border-right-above::after {
854  content: '';
855  position: absolute;
856  bottom: 0;
857  right: 0;
858  width: 1px;
859  height: 100%;
860  z-index: 1;
861  border-right: 1px solid #eaebee;
862}
863
864/* border-left-above */
865.border-left-above {
866  position: relative;
867  border-left: none !important;
868}
869
870.border-left-above::after {
871  content: '';
872  position: absolute;
873  top: 0;
874  left: 0;
875  width: 1px;
876  height: 100%;
877  z-index: 1;
878  border-left: 1px solid #eaebee;
879}
880
881/* border-top-above */
882.border-top-above {
883  position: relative;
884  border-top: none !important;
885}
886
887.border-top-above::after {
888  content: '';
889  position: absolute;
890  top: 0;
891  left: 0;
892  width: 100%;
893  height: 1px;
894  z-index: 1;
895  border-top: 1px solid #eaebee;
896}
897
898/* border-horizontal-above (左右边框) */
899.border-horizontal-above {
900  position: relative;
901  border-left: none !important;
902  border-right: none !important;
903}
904
905.border-horizontal-above::before {
906  content: '';
907  position: absolute;
908  top: 0;
909  left: 0;
910  width: 1px;
911  height: 100%;
912  z-index: 1;
913  border-left: 1px solid #eaebee;
914}
915
916.border-horizontal-above::after {
917  content: '';
918  position: absolute;
919  top: 0;
920  right: 0;
921  width: 1px;
922  height: 100%;
923  z-index: 1;
924  border-right: 1px solid #eaebee;
925}
926
927/* border-vertical-above (上下边框) */
928.border-vertical-above {
929  position: relative;
930  border-top: none !important;
931  border-bottom: none !important;
932}
933
934.border-vertical-above::before {
935  content: '';
936  position: absolute;
937  top: 0;
938  left: 0;
939  width: 100%;
940  height: 1px;
941  z-index: 1;
942  border-top: 1px solid #eaebee;
943}
944
945.border-vertical-above::after {
946  content: '';
947  position: absolute;
948  bottom: 0;
949  left: 0;
950  width: 100%;
951  height: 1px;
952  z-index: 1;
953  border-bottom: 1px solid #eaebee;
954}
955
956/* border-box-above 系列 (覆盖元素全尺寸的边框) */
957/* 四边边框 */
958.border-box-above {
959  position: relative;
960  border: none !important;
961}
962
963.border-box-above::after {
964  content: '';
965  position: absolute;
966  top: 0;
967  left: 0;
968  width: 100%;
969  height: 100%;
970  z-index: 1;
971  border: 1px solid #eaebee;
972  pointer-events: none;
973}
974
975/* 三边边框 - 无顶部 */
976.border-box-above--no-top {
977  position: relative;
978  border: none !important;
979}
980
981.border-box-above--no-top::after {
982  content: '';
983  position: absolute;
984  top: 0;
985  left: 0;
986  width: 100%;
987  height: 100%;
988  z-index: 1;
989  border: 1px solid #eaebee;
990  border-top: none;
991  pointer-events: none;
992}
993
994/* 三边边框 - 无右侧 */
995.border-box-above--no-right {
996  position: relative;
997  border: none !important;
998}
999
1000.border-box-above--no-right::after {
1001  content: '';
1002  position: absolute;
1003  top: 0;
1004  left: 0;
1005  width: 100%;
1006  height: 100%;
1007  z-index: 1;
1008  border: 1px solid #eaebee;
1009  border-right: none;
1010  pointer-events: none;
1011}
1012
1013/* 三边边框 - 无底部 */
1014.border-box-above--no-bottom {
1015  position: relative;
1016  border: none !important;
1017}
1018
1019.border-box-above--no-bottom::after {
1020  content: '';
1021  position: absolute;
1022  top: 0;
1023  left: 0;
1024  width: 100%;
1025  height: 100%;
1026  z-index: 1;
1027  border: 1px solid #eaebee;
1028  border-bottom: none;
1029  pointer-events: none;
1030}
1031
1032/* 三边边框 - 无左侧 */
1033.border-box-above--no-left {
1034  position: relative;
1035  border: none !important;
1036}
1037
1038.border-box-above--no-left::after {
1039  content: '';
1040  position: absolute;
1041  top: 0;
1042  left: 0;
1043  width: 100%;
1044  height: 100%;
1045  z-index: 1;
1046  border: 1px solid #eaebee;
1047  border-left: none;
1048  pointer-events: none;
1049}
1050
1051/* 两边边框 - 上右 */
1052.border-box-above--top-right {
1053  position: relative;
1054  border: none !important;
1055}
1056
1057.border-box-above--top-right::after {
1058  content: '';
1059  position: absolute;
1060  top: 0;
1061  left: 0;
1062  width: 100%;
1063  height: 100%;
1064  z-index: 1;
1065  border: 1px solid #eaebee;
1066  border-bottom: none;
1067  border-left: none;
1068  pointer-events: none;
1069}
1070
1071/* 虚线边框 */
1072.dotted-top-boder {
1073  position: relative;
1074}
1075
1076.dotted-top-boder::before {
1077  position: absolute;
1078  content: '';
1079  width: 100%;
1080  top: 0;
1081  left: 0;
1082  height: 1px;
1083  transform: scale(1);
1084  background: url('https://pixso.net/assets/media/dotted-abb5d5a5772659b1.svg') no-repeat;
1085  z-index: 1;
1086}
1087
1088.dotted-bottom-boder {
1089  position: relative;
1090}
1091
1092.dotted-bottom-boder::after {
1093  position: absolute;
1094  content: '';
1095  width: 100%;
1096  height: 1px;
1097  bottom: 0;
1098  left: 0;
1099  transform: scale(1);
1100  background: url('https://pixso.net/assets/media/dotted-abb5d5a5772659b1.svg') no-repeat;
1101  z-index: 1;
1102}
1103
1104.dotted-right-boder {
1105  position: relative;
1106}
1107
1108.dotted-right-boder::before {
1109  position: absolute;
1110  content: '';
1111  width: 1px;
1112  height: 100%;
1113  right: 0;
1114  top: 0%;
1115  transform: scale(1);
1116  background: url('https://pixso.net/assets/media/dotted-vertical-8b169a2bcbde040d.svg') no-repeat;
1117  z-index: 1;
1118}
1119
1120.dotted-left-boder {
1121  position: relative;
1122}
1123
1124.dotted-left-boder::after {
1125  position: absolute;
1126  content: '';
1127  width: 1px;
1128  height: 100%;
1129  left: 0;
1130  top: 0;
1131  transform: scale(1);
1132  background: url('https://pixso.net/assets/media/dotted-vertical-8b169a2bcbde040d.svg') no-repeat;
1133  z-index: 1;
1134}
1135
1136/* 左右两边斜线 */
1137
1138.left-slash-bg {
1139  position: absolute;
1140  top: 0;
1141  left: 0;
1142  width: 110px;
1143  height: 100%;
1144  background-image: url('https://pixso.net/assets/media/slash-bg-vertical-af4402ba41d09ab1.svg');
1145}
1146
1147.right-slash-bg {
1148  position: absolute;
1149  top: 0;
1150  right: 0;
1151  width: 110px;
1152  height: 100%;
1153  background-image: url('https://pixso.net/assets/media/slash-bg-vertical-af4402ba41d09ab1.svg');
1154}
1155
1156.home-module {
1157  box-sizing: border-box;
1158  background: #fff;
1159  border-bottom: 1px solid #eaebee;
1160}
1161
1162.home-module__content {
1163  position: relative;
1164  display: flex;
1165  height: 100%;
1166  padding: 0 270px;
1167}
1168
1169.home-module__mid {
1170  position: relative;
1171  flex: 1;
1172  border-left: 1px solid #eaebee;
1173  border-right: 1px solid #eaebee;
1174  display: flex;
1175  align-items: center;
1176  flex-direction: column;
1177  width: 100%;
1178}
1179
1180.home-module__mid.is-rectangle::before {
1181  content: '';
1182  position: absolute;
1183  bottom: -4.5px;
1184  left: -4.5px;
1185  width: 9px;
1186  height: 9px;
1187  z-index: 2;
1188  background: url('https://pixso.net/assets/media/rectangle-icon-4fb321284c9dcada.svg') no-repeat
1189    center;
1190}
1191
1192.home-module__mid.is-rectangle::after {
1193  content: '';
1194  position: absolute;
1195  bottom: -4.5px;
1196  right: -4.5px;
1197  width: 9px;
1198  height: 9px;
1199  z-index: 2;
1200  background: url('https://pixso.net/assets/media/rectangle-icon-4fb321284c9dcada.svg') no-repeat
1201    center;
1202}
1203
1204.home-module__lf {
1205  position: absolute;
1206  left: 0;
1207  top: 0;
1208}
1209
1210.home-module__rt {
1211  position: absolute;
1212  right: 0;
1213  top: 0;
1214}
1215
1216.home-module__title {
1217  color: #000;
1218  text-align: center;
1219  font-size: 60px;
1220  font-style: normal;
1221  font-weight: 700;
1222  line-height: 110%;
1223}
1224
1225.home-module__subTitle {
1226  color: rgba(0, 0, 0, 0.6);
1227  text-align: center;
1228  font-size: 16px;
1229  font-style: normal;
1230  font-weight: 400;
1231  line-height: 140%;
1232}
1233
1234.home-contanier {
1235  width: 100%;
1236  overflow: hidden;
1237}
1238
1239/* 公共tabs start*/
1240.common-module__tabs-boxs {
1241  width: 100%;
1242  height: 54px;
1243  overflow-x: auto;
1244  overflow-y: hidden;
1245  scrollbar-width: none; /* Firefox */
1246  -ms-overflow-style: none; /* IE/Edge */
1247}
1248
1249.common-module__tabs-lf,
1250.common-module__tabs-rt {
1251  height: 100%;
1252  flex: 1;
1253}
1254
1255.common-module__tabs {
1256  flex: 0 0 auto;
1257  display: flex;
1258  height: 54px;
1259  flex-wrap: wrap;
1260  justify-content: center;
1261  gap: 4px;
1262  padding: 5px;
1263  border: 1px solid #eaebee;
1264}
1265
1266.common-module__tabs-boxs::-webkit-scrollbar {
1267  display: none; /* Chrome/Safari/Opera */
1268}
1269
1270.common-module__tab {
1271  font-size: 14px;
1272  line-height: 110%;
1273  font-size: 14px;
1274  padding: 10px 14px 10px 12px;
1275  border-radius: 10px;
1276  opacity: 0.8;
1277  cursor: pointer;
1278  height: 42px;
1279  background: transparent;
1280  display: inline-flex;
1281  flex-direction: column;
1282  align-items: center;
1283  justify-content: center;
1284}
1285
1286.common-module__tab::after {
1287    content: attr(data-label);
1288    font-weight: 600;
1289    font-size: 14px;
1290    line-height: 110%;
1291    visibility: hidden;
1292    height: 0;
1293    overflow: hidden;
1294    pointer-events: none;
1295    display: block;
1296}
1297
1298.common-module__tab:hover {
1299  background: rgba(239, 239, 241, 0.5);
1300}
1301
1302.common-module__tab:not(.is-active):active {
1303  background: rgba(239, 239, 241, 0.5);
1304  transform: scale(0.96);
1305  transition: transform 200ms;
1306}
1307
1308.common-module__tab.is-active {
1309  background: #efeff1;
1310  color: #000;
1311  font-weight: 600;
1312  cursor: default;
1313}
1314
1315
1316
1317/* 公共tabs end*/
1318
1319/* 响应式 */
1320/* 1920+ */
1321@media (min-width: 1920px) {
1322  .home-module__content {
1323    padding: 0 calc((100% - var(--content-max-width)) / 2);
1324  }
1325}
1326/* 大屏幕适配 */
1327/* 1860+ */
1328@media (min-width: 1860px) and (max-width: 1919px) {
1329  .home-module__content {
1330    padding: 0 max(240px, calc((100% - var(--content-max-width)) / 2));
1331  }
1332}
1333
1334/* 中等屏幕适配 */
1335/* 1280-1859 */
1336@media (min-width: 1280px) and (max-width: 1859px) {
1337  .home-module__content {
1338    padding: 0 max(32px, calc((100% - var(--content-max-width)) / 2));
1339  }
1340}
1341
1342/* 小屏幕适配 */
1343/* 1080-1279 */
1344@media (min-width: 1080px) and (max-width: 1279px) {
1345  .left-slash-bg {
1346    width: 20px !important;
1347  }
1348  .right-slash-bg {
1349    width: 20px !important;
1350  }
1351  .home-module__content {
1352    padding: 0 max(32px, calc((100% - var(--content-max-width)) / 2));
1353  }
1354}
1355
1356/* 平板横屏适配 */
1357/* 800-1079 */
1358@media (min-width: 800px) and (max-width: 1079px) {
1359  .left-slash-bg {
1360    width: 20px !important;
1361  }
1362  .right-slash-bg {
1363    width: 20px !important;
1364  }
1365
1366  .home-module__content {
1367    padding: 0 max(32px, calc((100% - var(--content-max-width)) / 2));
1368  }
1369}
1370
1371/* 移动端适配 */
1372/* 1-799 */
1373@media (max-width: 799px) {
1374  .left-slash-bg {
1375    display: none;
1376  }
1377  .right-slash-bg {
1378    display: none;
1379  }
1380
1381  .home-module__content {
1382    padding: 0 max(16px, calc((100% - var(--content-max-width)) / 2));
1383  }
1384
1385  .common-module__tabs-lf,
1386  .common-module__tabs-rt {
1387    display: none;
1388  }
1389
1390  .common-module__tabs-boxs {
1391    justify-content: flex-start;
1392  }
1393
1394  .common-module__tabs {
1395    flex-wrap: nowrap;
1396    justify-content: flex-start;
1397    flex-shrink: 0;
1398    width: auto;
1399    min-width: 100%;
1400  }
1401}
1402</style>
1403<link rel="stylesheet" href="https://pixso.net/assets/media/shared-67f309e3786524f0.css">
1404<link rel="alternate" hreflang="en" href="https://pixso.net/">
1405<link rel="alternate" hreflang="ja" href="https://pixso.net/jp/">
1406<link rel="alternate" hreflang="ko" href="https://pixso.net/kr/">
1407<link rel="alternate" hreflang="ru" href="https://pixso.net/ru/">
1408<link rel="alternate" hreflang="es" href="https://pixso.net/es/">
1409<link rel="alternate" hreflang="x-default" href="https://pixso.net/">
1410<meta name="google-site-verification" content="9SXcdfN1dwvTW5XhbkxJU5u-Yoc4kD4dwjlvHxTA4QQ">
1411<link rel="preload" as="image" href="https://pixso.net/assets/media/module-2-video-cover2-mobile-69301ec904-82f46e054e4ceddc.webp" media="(max-width: 799px)" fetchpriority="high">
1412<link rel="preload" as="image" href="https://pixso.net/assets/media/module-2-videocover2-9dfcceaca861c5a8.webp" media="(min-width: 800px)" fetchpriority="high">
1413<style>
1414    /* 模块1 */
1415    .module-1 {
1416        padding-top: var(--header-height);
1417        height: 672px;
1418    }
1419
1420    .module-1 .home-module__lf {
1421        width: 330px;
1422        height: calc(100% + var(--header-height));
1423        left: -60px;
1424        top: calc(-1 * var(--header-height));
1425        background: url('https://pixso.net/assets/media/home-left-bg-aaefd37f1e289152.webp') no-repeat center;
1426        background-size: 330px 672px;
1427        background-size: contain;
1428    }
1429
1430    .module-1 .home-module__rt {
1431        width: 330px;
1432        height: calc(100% + var(--header-height));
1433        right: -60px;
1434        top: calc(-1 * var(--header-height));
1435        background: url('https://pixso.net/assets/media/home-right-bg-d70b8ec393434eb7.webp') no-repeat center;
1436        background-size: contain;
1437    }
1438
1439    .module-1__content {
1440        padding-bottom: 80px;
1441    }
1442
1443    .module-1 .home-module__title {
1444        margin-top: 116px;
1445        max-width: 700px;
1446        width: 100%;
1447    }
1448
1449    .module-1 .home-module__subTitle {
1450        margin-top: 16px;
1451        max-width: 550px;
1452    }
1453
1454    .module-1__btns {
1455        margin-top: 30px;
1456    }
1457
1458    .module-1__btns .px-common-btn {
1459        margin-right: 16px;
1460    }
1461
1462    .module-1__cards {
1463        margin-top: 60px;
1464        position: relative;
1465        width: 294px;
1466        height: 76px;
1467        margin-left: auto;
1468        margin-right: auto;
1469    }
1470
1471    .module-1__card {
1472        width: 294px;
1473        height: auto;
1474        overflow: hidden;
1475        position: absolute;
1476        top: 0;
1477        left: 0;
1478        flex-shrink: 0;
1479        display: flex;
1480        flex-direction: row;
1481        gap: 14px;
1482        align-items: center;
1483        padding: 5px 5px 5px 5px;
1484        border-radius: 12px 12px 12px 12px;
1485        background-color: rgba(255, 255, 255, 1);
1486        border-radius: 12px;
1487        border: 0.5px solid rgba(0, 0, 0, 0.1);
1488        box-shadow: 0 138px 39px 0 rgba(0, 0, 0, 0), 0 88px 35px 0 rgba(0, 0, 0, 0.01),
1489            0 50px 30px 0 rgba(0, 0, 0, 0.03), 0 22px 22px 0 rgba(0, 0, 0, 0.05),
1490            0 6px 12px 0 rgba(0, 0, 0, 0.05);
1491        opacity: 0.5;
1492        transform: translateY(12px) scale(0.96);
1493        transition: opacity 300ms ease, transform 300ms ease, box-shadow 300ms ease;
1494        z-index: 1;
1495    }
1496
1497    .module-1__card--active {
1498        opacity: 1;
1499        transform: translateY(0) scale(1);
1500        z-index: 2;
1501        box-shadow: 0 138px 39px 0 rgba(0, 0, 0, 0), 0 88px 35px 0 rgba(0, 0, 0, 0.01),
1502            0 50px 30px 0 rgba(0, 0, 0, 0.03), 0 22px 22px 0 rgba(0, 0, 0, 0.05),
1503            0 8px 16px 0 rgba(0, 0, 0, 0.08);
1504        transition: opacity 300ms ease, transform 300ms ease, box-shadow 300ms ease;
1505    }
1506
1507    .module-1__card-img {
1508        width: 98px;
1509        height: 66px;
1510        overflow: hidden;
1511        position: relative;
1512        flex-shrink: 0;
1513        border-radius: 7px 7px 7px 7px;
1514    }
1515
1516    .module-1__card-bd {
1517        width: 143px;
1518        height: auto;
1519        position: relative;
1520        flex-shrink: 0;
1521        display: flex;
1522        flex-direction: column;
1523        gap: 6px;
1524    }
1525
1526    .frame-3_137082 {
1527        width: 100%;
1528        height: auto;
1529        position: relative;
1530        flex-shrink: 0;
1531        display: flex;
1532        flex-direction: row;
1533        gap: 3px;
1534        align-items: center;
1535    }
1536
1537    .text-3_137083 {
1538        font-size: 14px;
1539        font-weight: 400;
1540        letter-spacing: 0em;
1541        line-height: 115.29569625854492%;
1542        color: rgba(0, 0, 0, 1);
1543        width: auto;
1544        height: auto;
1545        position: relative;
1546        flex-shrink: 0;
1547        white-space: pre;
1548        flex-grow: 0;
1549    }
1550
1551    .text-3_137084 {
1552        font-size: 13px;
1553        font-weight: 400;
1554        display: flex;
1555        flex-direction: column;
1556        justify-content: flex-end;
1557        letter-spacing: 0em;
1558        color: rgba(0, 0, 0, 1);
1559        width: auto;
1560        height: auto;
1561        position: relative;
1562        flex-shrink: 0;
1563        white-space: pre;
1564        flex-grow: 0;
1565        opacity: 0.5;
1566    }
1567
1568    /* 模块2 */
1569    .module-2 .is-bg {
1570        height: 142px;
1571        border-bottom: 1px solid #eaebee;
1572    }
1573
1574    .module-2 .is-bg img {
1575        width: 100%;
1576        height: 100%;
1577    }
1578
1579    .module-2__contanier {
1580        position: relative;
1581        margin-top: -92px;
1582        margin-bottom: 50px;
1583        width: calc(100% - 100px);
1584        display: flex;
1585        flex-direction: column;
1586        justify-content: center;
1587        align-items: center;
1588    }
1589
1590    .module-2__bg-box {
1591        position: relative;
1592        width: 100%;
1593        padding: 0px 64px 74px;
1594        z-index: 2;
1595    }
1596
1597    .module-2__contanier.actived-1 {
1598        background: linear-gradient(0deg,
1599                #e9ecf1 25.95%,
1600                #f6bae0 58.3%,
1601                #ab84ff 93.72%);
1602    }
1603
1604    .module-2__contanier.actived-2 {
1605        background: linear-gradient(0deg,
1606                #deeaee 25.95%,
1607                #cdbaf6 61.92%,
1608                #4096ff 92.33%);
1609    }
1610
1611    .module-2__contanier.actived-3 {
1612        background: linear-gradient(0deg,
1613                #e9eeef 14.61%,
1614                #87a1ff 51.47%,
1615                #a680ff 92.33%);
1616    }
1617
1618    .module-2__contanier.actived-4 {
1619        background: linear-gradient(0deg,
1620                #e9eeef 14.61%,
1621                #89d6a3 49.63%,
1622                #6e76ff 96.49%);
1623    }
1624
1625    .module-2__bg-img {
1626        position: absolute;
1627        left: 0;
1628        bottom: 0;
1629        width: 100%;
1630        height: 370px;
1631        aspect-ratio: 128/37;
1632        z-index: 1;
1633    }
1634
1635    .module-2__bg-video-box {
1636        width: 100%;
1637        border-radius: 10px;
1638        overflow: hidden;
1639    }
1640
1641    .module-2__bg-video {
1642        width: 100%;
1643        height: auto;
1644        display: block;
1645    }
1646
1647    /* tabs start*/
1648    .module-2__tabs {
1649        position: relative;
1650        flex-shrink: 0;
1651        z-index: 3;
1652        width: fit-content;
1653        margin: 31px 0;
1654        height: 36px;
1655    }
1656
1657    .module-2__tabs-box {
1658        height: auto;
1659        position: relative;
1660        flex-shrink: 0;
1661        display: flex;
1662        flex-direction: row;
1663        gap: 6px;
1664        align-items: center;
1665        padding: 4px 4px 4px 4px;
1666        border-radius: 10px 10px 10px 10px;
1667        background-color: rgba(0, 0, 0, 0.20000000298023224);
1668    }
1669
1670    .module-2__tab {
1671        height: auto;
1672        position: relative;
1673        flex-shrink: 0;
1674        display: flex;
1675        flex-direction: row;
1676        gap: 4px;
1677        align-items: center;
1678        padding: 6px 10px 6px 10px;
1679        border-radius: 8px 8px 8px 8px;
1680        background-color: transparent;
1681        cursor: pointer;
1682    }
1683
1684    .module-2__tab-label {
1685        font-size: 14px;
1686        font-weight: 400;
1687        letter-spacing: 0em;
1688        line-height: 115.29569625854492%;
1689        color: rgba(255, 255, 255, 1);
1690        width: auto;
1691        height: auto;
1692        position: relative;
1693        flex-shrink: 0;
1694        white-space: pre;
1695        flex-grow: 0;
1696        opacity: 0.800000011920929;
1697    }
1698
1699    .module-2__tab.is-actived {
1700        height: auto;
1701        position: relative;
1702        flex-shrink: 0;
1703        display: flex;
1704        flex-direction: row;
1705        gap: 4px;
1706        align-items: center;
1707        padding: 6px 10px 6px 10px;
1708        border-radius: 6px 6px 6px 6px;
1709        box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25),
1710            0px 2px 4px 0px rgba(0, 0, 0, 0.1);
1711        background-color: rgba(255, 255, 255, 1);
1712        cursor: default;
1713    }
1714
1715    .module-2__tab.is-actived .module-2__tab-label {
1716        font-size: 14px;
1717
1718        font-weight: 400;
1719        letter-spacing: 0em;
1720        line-height: 115.29569625854492%;
1721        color: rgba(0, 0, 0, 1);
1722        width: auto;
1723        height: auto;
1724        position: relative;
1725        flex-shrink: 0;
1726        white-space: pre;
1727        flex-grow: 0;
1728    }
1729
1730    /* tabs end*/
1731
1732    /* 模块3 */
1733    .module-3__container {
1734        align-items: flex-start;
1735        padding: 58px 88px;
1736        background: url('https://pixso.net/assets/media/slash-bg-774cd4dec82f0bda.webp') repeat center;
1737        background-size: contain;
1738    }
1739
1740    .module-3__title {
1741        color: rgba(0, 0, 0, 1);
1742        font-size: 18px;
1743        font-weight: 400;
1744        line-height: 160%;
1745        text-align: left;
1746        max-width: 824px;
1747        margin-bottom: 20px;
1748    }
1749
1750    .module-3__author {
1751        display: flex;
1752        align-items: center;
1753    }
1754
1755    .module-3__author .avatar {
1756        width: 40px;
1757        height: 40px;
1758        border-radius: 50%;
1759        margin-right: 10px;
1760    }
1761
1762    .module-3__author .meta {
1763        display: flex;
1764        flex-direction: column;
1765    }
1766
1767    .module-3__author .name {
1768        color: rgba(0, 0, 0, 1);
1769        font-size: 14px;
1770        line-height: 17px;
1771        height: 20px;
1772    }
1773
1774    .module-3__author .desc {
1775        color: rgba(0, 0, 0, 1);
1776        font-size: 12px;
1777        font-weight: 400;
1778        line-height: 14px;
1779        opacity: 0.6;
1780        height: 17px;
1781    }
1782
1783    /* 模块4 */
1784    .module-4 {
1785        /* height: 436px; */
1786    }
1787
1788    .module-4__title {
1789        padding-top: 4.0625rem;
1790        padding-bottom: 2.8125rem;
1791        text-align: center;
1792        color: #000;
1793        font-size: 12px;
1794        font-style: normal;
1795        line-height: normal;
1796        opacity: 0.6;
1797        text-align: center;
1798    }
1799
1800    .module-4__container {
1801        position: relative;
1802        width: 100%;
1803        margin: 0 auto;
1804        display: flex;
1805        flex-direction: column;
1806        align-items: center;
1807    }
1808
1809    .module-4__logos {
1810        display: flex;
1811        align-items: flex-start;
1812        gap: 0.75rem;
1813        height: 100%;
1814        padding-bottom: 5.38rem;
1815        overflow: hidden;
1816        position: relative;
1817        width: 100%;
1818    }
1819
1820    .module-4__logos-track {
1821        display: flex;
1822        align-items: flex-start;
1823        gap: 0.75rem;
1824        will-change: transform;
1825        flex-shrink: 0;
1826    }
1827
1828    .module-4__logo-row {
1829        flex: 1 0 0px;
1830        display: flex;
1831        flex-direction: column;
1832        align-items: center;
1833        gap: 12px;
1834        padding: 130px 20px 83px;
1835    }
1836
1837    /* .module-4__logo-row + .module-4__logo-row {
1838      border-left: 1px dashed #e3e4e7;
1839    } */
1840
1841    .module-4__logo-item {
1842        display: flex;
1843        width: 9.875rem;
1844        height: 4.125rem;
1845        justify-content: center;
1846        align-items: center;
1847    }
1848
1849    /* 模块5 */
1850    .module-5__contanier {
1851        position: relative;
1852        background: #f9f9fa;
1853        width: 100%;
1854        height: 800px;
1855        display: flex;
1856        align-items: center;
1857        justify-content: center;
1858    }
1859
1860    .module-5__content {
1861        margin: 0 auto;
1862        width: 100%;
1863    }
1864
1865    .module-5__bubble {
1866        position: absolute;
1867        display: flex;
1868        align-items: center;
1869        background: #fff;
1870        padding: 12px;
1871        border: 1px solid rgba(0, 0, 0, 0.06);
1872        border-radius: 10px;
1873        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.04);
1874        background: rgba(255, 255, 255, 1);
1875        opacity: 0;
1876
1877        cursor: pointer;
1878    }
1879
1880    .module-5__bubble:hover {
1881        transition: transform 200ms ease-out;
1882        transform: scale(0.96);
1883    }
1884
1885    .module-5__bubble.is-clicking {
1886        transform: scale(0.1) !important;
1887        transition: transform 300ms ease-out !important;
1888    }
1889
1890    .module-5__bubble.bubble--1 {
1891        width: 339px;
1892        left: 183px;
1893        top: 131px;
1894        animation-delay: 120ms;
1895    }
1896
1897    .module-5__bubble.bubble--2 {
1898        width: 332px;
1899        top: 162px;
1900        right: 149px;
1901        animation-delay: 260ms;
1902    }
1903
1904    .module-5__bubble.bubble--3 {
1905        width: 315px;
1906        left: 270px;
1907        top: 602px;
1908        animation-delay: 380ms;
1909    }
1910
1911    .module-5__bubble.bubble--4 {
1912        width: 311px;
1913        right: 231px;
1914        top: 552px;
1915        animation-delay: 520ms;
1916    }
1917
1918    .module-5__bubble-icon {
1919        width: 32px;
1920        height: 32px;
1921        margin-right: 10px;
1922    }
1923
1924    .module-5__bubble-text {
1925        font-size: 14px;
1926        line-height: 19.6px;
1927        color: rgba(0, 0, 0, 0.5);
1928    }
1929
1930    .module-5__bubble-role {
1931        color: rgba(0, 0, 0, 1);
1932    }
1933
1934    /* .module-5__bubble.is-visible {
1935      animation: slideUpFade 600ms ease-out forwards;
1936    }
1937    
1938    @keyframes slideUpFade {
1939      from {
1940        opacity: 0;
1941        transform: translateY(24px);
1942      }
1943      to {
1944        opacity: 1;
1945        transform: translateY(0);
1946      }
1947    } */
1948
1949    .module-5__headline {
1950        margin: 24px 0;
1951        text-align: center;
1952    }
1953
1954    .module-5__headline .line--strong {
1955        color: rgba(0, 0, 0, 1);
1956        font-size: 48px;
1957        font-weight: 600;
1958        line-height: 110%;
1959    }
1960
1961    .module-5__headline .line--muted {
1962        opacity: 0.6;
1963    }
1964
1965    .module-5__subline {
1966        margin-top: 19px;
1967        color: rgba(0, 0, 0, 0.7);
1968        font-size: 16px;
1969        font-weight: 400;
1970        line-height: 155%;
1971        text-align: center;
1972        width: 510px;
1973        max-width: 100%;
1974        margin-left: auto;
1975        margin-right: auto;
1976    }
1977
1978    /* 模块6 */
1979
1980    .module-6__contanier {
1981        background: #fff;
1982        padding-bottom: 120px;
1983    }
1984
1985    .module-6__content {
1986        margin: 0 auto;
1987        width: 100%;
1988    }
1989
1990    .module-6__header {
1991        margin-top: 180px;
1992        text-align: center;
1993        margin-bottom: 80px;
1994        display: flex;
1995        flex-direction: column;
1996        align-items: center;
1997    }
1998
1999    .module-6__header .home-module__title {
2000        font-size: 48px;
2001    }
2002
2003    .module-6__header .home-module__subTitle {
2004        margin-top: 12px;
2005        margin-bottom: 23px;
2006    }
2007
2008    .module-6__panels {
2009        margin-top: 50px;
2010    }
2011
2012    .module-6__panel {
2013        display: none;
2014        padding-left: 50px;
2015        position: relative;
2016        height: 720px;
2017    }
2018
2019    .module-6__panel::before {
2020        position: absolute;
2021        content: '';
2022        top: 0;
2023        left: 0;
2024        width: 50px;
2025        height: 100%;
2026        border-top: 1px solid #eaebee;
2027        border-bottom: 1px solid #eaebee;
2028        background: url('https://pixso.net/assets/media/slash-bg-vertical-af4402ba41d09ab1.svg') repeat center;
2029    }
2030
2031    .module-6__panel.is-active {
2032        display: flex;
2033        gap: 0;
2034        align-items: stre
2034tch;
2035    }
2036
2037    .module-6__tab {
2038        min-width: 98.75px;
2039        width: fit-content;
2040    }
2041
2042    .module-6__lhs {
2043        flex: 0 0 409px;
2044        background: #fff;
2045        display: flex;
2046        flex-direction: column;
2047        border-top: 1px solid #eaebee;
2048        border-bottom: 1px solid #eaebee;
2049    }
2050
2051    .module-6__intro {
2052        border-radius: 0;
2053        padding: 48px 30px;
2054        margin-bottom: 0;
2055        border-left: 1px solid #eaebee;
2056        flex: 1;
2057    }
2058
2059    .module-6__intro .px-common-btn__plain {
2060        width: fit-content;
2061        height: 34px;
2062        font-size: 14px;
2063        font-style: normal;
2064        font-weight: 400;
2065        line-height: 115.296%;
2066        padding: 9px 12px;
2067    }
2068
2069    .module-6__intro-title {
2070        font-size: 28px;
2071        font-weight: 600;
2072        width: 277px;
2073        line-height: 120%;
2074        color: #000;
2075        margin-bottom: 30px;
2076    }
2077
2078    .module-6__accordion {
2079        border: 1px solid #eaebee;
2080        border-right: none;
2081        border-bottom: none;
2082        border-radius: 0;
2083        /* height: 440px; */
2084        /* overflow: hidden; */
2085        /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); */
2086    }
2087
2088    .module-6__ac-item {
2089        position: relative;
2090    }
2091
2092    .module-6__ac-item:hover {
2093        background-color: #f9f9fa;
2094        transition: background-color 240ms;
2095    }
2096
2097    .module-6__ac-item+.module-6__ac-item {
2098        border-top: 1px solid #eaebee;
2099    }
2100
2101    .module-6__ac-control {
2102        position: absolute;
2103        opacity: 0;
2104        pointer-events: none;
2105    }
2106
2107    .module-6__ac-header {
2108        position: relative;
2109        display: flex;
2110        justify-content: space-between;
2111        align-items: center;
2112        padding: 20px 30px 20px;
2113        cursor: pointer;
2114        transition: border-color 240ms ease, color 240ms ease,
2115            background-color 240ms ease;
2116    }
2117
2118    .module-6__ac-header:hover .module-6__ac-title {
2119        color: #000;
2120    }
2121
2122    .module-6__ac-title {
2123        color: rgba(0, 0, 0, 0.6);
2124        font-size: 16px;
2125        font-style: normal;
2126        font-weight: 600;
2127        line-height: 155%;
2128    }
2129
2130    .module-6__ac-body {
2131        max-height: 0;
2132        overflow: hidden;
2133        will-change: max-height;
2134        transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
2135    }
2136
2137    .module-6__ac-body-content {
2138        padding: 0px 30px 0px;
2139        opacity: 1;
2140        /* margin-top: -16px; */
2141        /* transform: translateY(-8px);
2142      transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
2143        transform 300ms cubic-bezier(0.4, 0, 0.2, 1); */
2144        color: rgba(0, 0, 0, 0.5);
2145        font-size: 16px;
2146        line-height: 140%;
2147        height: 125px;
2148    }
2149
2150    .module-6__ac-body.no-transition {
2151        transition: none;
2152    }
2153
2154    .module-6__ac-body.no-transition .module-6__ac-body-content {
2155        transition: none;
2156    }
2157
2158    .module-6__ac-control:checked+.module-6__ac-header+.module-6__ac-body {
2159        /* 高度通过 JS 动态设置 */
2160    }
2161
2162    .module-6__ac-control:checked+.module-6__ac-header+.module-6__ac-body .module-6__ac-body-content {
2163        opacity: 1;
2164    }
2165
2166    .module-6__ac-item.is-open .module-6__ac-header {
2167        /* padding: 20px 30px 4px; */
2168    }
2169
2170    .module-6__ac-item.is-open .module-6__ac-title {
2171        color: #000;
2172    }
2173
2174    .module-6__ac-item.is-open .module-6__ac-header:before {
2175        position: absolute;
2176        content: '';
2177        top: -1px;
2178        left: 0;
2179        width: 0;
2180        height: 1px;
2181        background: #000;
2182        transition: none;
2183    }
2184
2185    .module-6__ac-item.is-open .module-6__ac-header.progress-animating:before {
2186        animation: progressGrow var(--progress-duration, 5s) linear forwards;
2187    }
2188
2189    @keyframes progressGrow {
2190        from {
2191            width: 0;
2192        }
2193
2194        to {
2195            width: 100%;
2196        }
2197    }
2198
2199    .module-6__ac-item.is-open .module-6__ac-body {
2200        /* 高度通过 JS 动态设置 */
2201    }
2202
2203    .module-6__ac-item.is-open .module-6__ac-body-content {
2204        opacity: 1;
2205        transform: translateY(0);
2206    }
2207
2208    .module-6__rhs {
2209        position: relative;
2210        flex: 1 1 auto;
2211        display: flex;
2212    }
2213
2214    .module-6__rhs::after {
2215        position: absolute;
2216        content: '';
2217        top: 0;
2218        right: 0;
2219        width: 100%;
2220        height: 100%;
2221        border-top: 1px solid rgba(0, 0, 0, 0.05);
2222        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
2223        border-left: 1px solid rgba(0, 0, 0, 0.05);
2224    }
2225
2226    .module-6__image {
2227        width: 100%;
2228        object-fit: cover;
2229        object-position: 0;
2230        height: auto;
2231        display: block;
2232    }
2233
2234    .module-6__placeholder {
2235        display: grid;
2236        place-items: center;
2237        background: #f3f4f6;
2238        border: 1px dashed #e5e7eb;
2239        border-radius: 10px;
2240        padding: 32px;
2241        color: #6b7280;
2242    }
2243
2244    /* Module 7 样式 */
2245    .module-7__header {
2246        /* margin-bottom: 80px; */
2247    }
2248
2249    .module-7__content {
2250        padding-bottom: 120px;
2251    }
2252
2253    .module-7.home-module {
2254        border-bottom: none;
2255    }
2256
2257    .module-7__content.home-module__mid {
2258        border-left: none;
2259        border-right: none;
2260    }
2261
2262    .module-7__hero-section {
2263        padding-top: 180px;
2264        padding-bottom: 124px;
2265        display: flex;
2266        flex-direction: column;
2267        align-items: center;
2268    }
2269
2270    .module-7__hero-title {
2271        color: #171717;
2272        text-align: center;
2273        font-size: 48px;
2274        font-style: normal;
2275        font-weight: 600;
2276        line-height: 110%;
2277    }
2278
2279    .module-7__hero-desc {
2280        color: rgba(0, 0, 0, 0.7);
2281        text-align: center;
2282        font-size: 16px;
2283        font-style: normal;
2284        font-weight: 400;
2285        line-height: 155%;
2286        margin-top: 12px;
2287        margin-bottom: 23px;
2288    }
2289
2290    .module-7__middle {
2291        position: relative;
2292        width: 100%;
2293        padding: 0 50px;
2294    }
2295
2296    .module-7__middle .left-slash-bg {
2297        width: 50px;
2298    }
2299
2300    .module-7__middle .right-slash-bg {
2301        width: 50px;
2302    }
2303
2304    .module-7__item-section {
2305        position: relative;
2306        width: 100%;
2307        display: flex;
2308        flex-direction: column;
2309        justify-content: space-between;
2310    }
2311
2312    .module-7__item-section::after,
2313    .module-7__items::after {
2314        border-color: rgba(44, 47, 67, 0.08) !important;
2315    }
2316
2317    .module-7__items {
2318        display: grid;
2319        grid-template-columns: 1fr 1fr;
2320        /* 两列等宽 */
2321        gap: 0;
2322        border: 1px solid rgba(44, 47, 67, 0.08);
2323    }
2324
2325    .module-7__item-content {
2326        display: flex;
2327        gap: 60px;
2328        margin-bottom: 60px;
2329        padding: 60px;
2330        background: #f8f9fa;
2331        border-radius: 20px;
2332    }
2333
2334    .module-7__item-section img {
2335        width: 100%;
2336        object-fit: cover;
2337        object-position: left center;
2338    }
2339
2340    .module-7__item-section.item-0 {
2341        background: linear-gradient(0deg,
2342                #f9f9fa 34.04%,
2343                #f9f5ff 72.14%,
2344                #e1f3ff 100%);
2345    }
2346
2347    .module-7__item-section.item-0 img {
2348        height: 472px;
2349        aspect-ratio: 1280 / 472;
2350    }
2351
2352    .module-7__item-section.item-0 .module-7__section-desc {
2353        max-width: 659px;
2354    }
2355
2356    .module-7__item-section.item-1 {
2357        background: linear-gradient(0deg,
2358                rgba(255, 255, 255, 0.5) 28.99%,
2359                rgba(255, 253, 245, 0.5) 62.43%,
2360                rgba(255, 245, 239, 0.5) 91.08%),
2361            #fff;
2362    }
2363
2364    .module-7__item-section.item-1,
2365    .module-7__item-section.item-2 {
2366        gap: 60px;
2367    }
2368
2369    .module-7__item-section.item-1 img,
2370    .module-7__item-section.item-2 img {
2371        height: 320px;
2372        aspect-ratio: 640 / 320;
2373    }
2374
2375    .module-7__item-section.item-3,
2376    .module-7__item-section.item-4 {
2377        gap: 31px;
2378    }
2379
2380    .module-7__item-section.item-3 img,
2381    .module-7__item-section.item-4 img {
2382        height: 376px;
2383        aspect-ratio: 640 / 376;
2384    }
2385
2386    .module-7__item-section.item-1 .module-7__section-desc {
2387        max-width: 519px;
2388    }
2389
2390    .module-7__item-section.item-2 {
2391        background: linear-gradient(0deg,
2392                rgba(255, 255, 255, 0.5) 28.61%,
2393                rgba(242, 250, 255, 0.5) 58.86%,
2394                rgba(243, 246, 255, 0.5) 85.91%),
2395            #fff;
2396    }
2397
2398    .module-7__item-section.item-2 .module-7__section-desc {
2399        max-width: 100%;
2400    }
2401
2402    .module-7__item-section.item-3 {
2403        background: linear-gradient(0deg,
2404                rgba(255, 255, 255, 0.5) 38.75%,
2405                rgba(250, 255, 243, 0.5) 75.47%,
2406                rgba(242, 255, 246, 0.5) 100%),
2407            #fff;
2408    }
2409
2410    .module-7__item-section.item-3 .module-7__section-desc {
2411        max-width: 347px;
2412    }
2413
2414    .module-7__item-section.item-4 {
2415        background: linear-gradient(0deg,
2416                rgba(255, 255, 255, 0.5) 26.54%,
2417                rgba(243, 246, 255, 0.5) 68.32%,
2418                rgba(251, 242, 255, 0.5) 94.33%),
2419            #fff;
2420    }
2421
2422    .module-7__item-section.item-4 .module-7__section-desc {
2423        width: 513px;
2424    }
2425
2426    .module-7__item-section-top {
2427        display: flex;
2428        flex-direction: column;
2429        gap: 8px;
2430        position: relative;
2431        border-radius: inherit;
2432        padding: 32px 32px 0;
2433    }
2434
2435    .module-7__section-title {
2436        color: #000;
2437        font-size: 18px;
2438        font-style: normal;
2439        font-weight: 600;
2440        line-height: 130%;
2441    }
2442
2443    .module-7__section-desc {
2444        color: #000;
2445        font-size: 16px;
2446        line-height: 140%;
2447        opacity: 0.5;
2448    }
2449
2450    .module-7__item-section-top .px-common-btn__plain {
2451        margin-top: 28px;
2452        margin-bottom: 6px;
2453        width: 152px;
2454        height: 34px;
2455        font-size: 14px;
2456        font-style: normal;
2457        font-weight: 400;
2458        line-height: 115.296%;
2459        padding: 9px 12px;
2460        white-space: nowrap;
2461    }
2462
2463    .module-7__layout-demo {
2464        background: white;
2465        padding: 20px;
2466        border-radius: 12px;
2467        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
2468    }
2469
2470    .module-7__layout-item {
2471        background: #e3f2fd;
2472        padding: 12px;
2473        border-radius: 6px;
2474        text-align: center;
2475        font-size: 12px;
2476        font-weight: 500;
2477        margin-bottom: 16px;
2478    }
2479
2480    .module-7__layout-controls {
2481        display: flex;
2482        gap: 16px;
2483    }
2484
2485    .module-7__layout-controls span {
2486        font-size: 12px;
2487        color: #666;
2488    }
2489
2490    .module-7__team-demo {
2491        background: white;
2492        padding: 20px;
2493        border-radius: 12px;
2494        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
2495    }
2496
2497    .module-7__resource-library h4 {
2498        font-size: 14px;
2499        font-weight: 600;
2500        margin-bottom: 12px;
2501        color: #333;
2502    }
2503
2504    .module-7__library-items {
2505        display: flex;
2506        gap: 12px;
2507        flex-wrap: wrap;
2508    }
2509
2510    .module-7__library-items span {
2511        background: #f0f0f0;
2512        padding: 6px 12px;
2513        border-radius: 6px;
2514        font-size: 12px;
2515        color: #666;
2516    }
2517
2518    .module-7__features {
2519        display: grid;
2520        grid-template-columns: repeat(4, 1fr);
2521        gap: 70px;
2522        padding: 80px 50px 0;
2523    }
2524
2525    .module-7__feature {
2526        /* padding: 32px 24px; */
2527    }
2528
2529    .module-7__feature-top {
2530        display: flex;
2531        align-items: center;
2532    }
2533
2534    .module-7__feature-top img {
2535        margin-right: 6px;
2536        width: 16px;
2537        height: 16px;
2538    }
2539
2540    .module-7__feature-top span {
2541        color: #000;
2542        font-size: 14px;
2543        font-style: normal;
2544        font-weight: 400;
2545        line-height: 155%;
2546    }
2547
2548    .module-7__feature p {
2549        color: #000;
2550        opacity: 0.5;
2551        font-size: 14px;
2552        font-style: normal;
2553        font-weight: 400;
2554        line-height: 150%;
2555        margin-top: 6px;
2556    }
2557
2558    /* 模块8 */
2559    .module-8::after {
2560        border-color: rgba(44, 47, 67, 0.1);
2561    }
2562
2563    .module-8 .home-module__mid {
2564        width: 100%;
2565        border-left: 0;
2566        border-right: 0;
2567    }
2568
2569    .module-8__content {
2570        margin: 0 auto;
2571        width: 100%;
2572        display: flex;
2573        flex-direction: column;
2574        align-items: center;
2575    }
2576
2577    .module-8__content-bd {
2578        position: relative;
2579        overflow: hidden;
2580        display: flex;
2581        flex-direction: column;
2582        align-items: center;
2583        width: 100%;
2584        height: auto;
2585        background: linear-gradient(180deg, #fff 0%, #f9f5ff 100%);
2586    }
2587
2588    .module-8__content-bd::before {
2589        position: absolute;
2590        content: "";
2591        top: auto;
2592        bottom: 0;
2593        left: 50%;
2594        width: min(1380px, 120vw);
2595        height: 112px;
2596        z-index: 0;
2597        background: none;
2598        background-size: cover;
2599        transform: translateX(-50%);
2600    }
2601
2602    .module-8__header {
2603        padding-top: 180px;
2604        padding-bottom: 50px;
2605        text-align: center;
2606        max-width: 800px;
2607    }
2608
2609    .module-8__title {
2610        color: #171717;
2611        text-align: center;
2612        font-size: 48px;
2613        font-style: normal;
2614        font-weight: 600;
2615        line-height: 110%;
2616        max-width: 580px;
2617    }
2618
2619    /* AI input */
2620    .module-1__input-container {
2621        width: 600px;
2622        max-width: calc(100% - 32px);
2623        height: 132px;
2624        margin: 40px auto 0;
2625        overflow: visible;
2626        position: relative;
2627        z-index: 2;
2628        flex-shrink: 0;
2629        display: flex;
2630        flex-direction: column;
2631        isolation: isolate;
2632        border-radius: 16px;
2633        background-color: #fff;
2634        box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.08);
2635    }
2636
2637    .module-1__input-bg {
2638        position: absolute;
2639        left: 50%;
2640        top: calc(100% - 85px);
2641        z-index: 0;
2642        width: min(640px, calc(100% + 40px));
2643        height: auto;
2644        max-width: none;
2645        pointer-events: none;
2646        user-select: none;
2647        transform: translateX(-50%);
2648    }
2649
2650    .module-1__input-container::before,
2651    .module-1__input-container::after,
2652    .module-8__content-bd .module-8__input-container::before,
2653    .module-8__content-bd .module-8__input-container::after {
2654        content: "";
2655        position: absolute;
2656        left: 50%;
2657        z-index: 0;
2658        pointer-events: none;
2659        transform: translateX(-50%);
2660        transform-origin: center;
2661        animation: module1GlowBreath 3.2s ease-in-out infinite;
2662    }
2663
2664    .module-1__input-container::before {
2665        top: -10px;
2666        width: 360px;
2667        height: 30px;
2668        border-radius: 999px;
2669        opacity: 0.2;
2670        filter: blur(18px);
2671        background: linear-gradient(90deg, rgba(255, 77, 249, 0) 0%, rgba(227, 143, 255, 0.72) 28%, rgba(73, 176, 255, 0.86) 50.46%, rgba(227, 143, 255, 0.72) 72%, rgba(255, 77, 249, 0) 100%);
2672        animation-delay: -0.35s;
2673    }
2674
2675    .module-1__input-container::after {
2676        top: -1px;
2677        width: 250px;
2678        height: 1px;
2679        opacity: 1;
2680        background: linear-gradient(90deg, rgba(255, 77, 249, 0) 0%, rgba(227, 143, 255, 0.62) 27%, rgba(73, 176, 255, 0.72) 50.46%, rgba(227, 143, 255, 0.62) 73%, rgba(255, 77, 249, 0) 100%);
2681    }
2682
2683    .module-1__input-container.is-typing::before,
2684    .module-1__input-container.is-typing::after,
2685    .module-8__content-bd .module-8__input-container.is-typing::before,
2686    .module-8__content-bd .module-8__input-container.is-typing::after {
2687        animation: module1GlowTap 0.34s ease-out, module1GlowBreath 3.2s ease-in-out 0.34s infinite;
2688    }
2689
2690    .module-1__input-field,
2691    .module-8__input-field {
2692        width: 100%;
2693        height: 82px;
2694        flex: 0 0 82px;
2695        padding: 14px 14px 0;
2696        position: relative;
2697        z-index: 1;
2698        border-radius: 16px 16px 0 0;
2699        background-color: #fff;
2700    }
2701
2702    .module-1__input-field textarea,
2703    .module-8__input-field textarea {
2704        width: 100%;
2705        height: 100%;
2706        min-height: 42px;
2707        border: 0;
2708        outline: 0;
2709        resize: none;
2710        padding: 0;
2711        overflow-y: auto;
2712        background: transparent;
2713        color: rgba(0, 0, 0, 0.8);
2714        font-family: inherit;
2715        font-size: 14px;
2716        font-weight: 400;
2717        line-height: 150%;
2718        letter-spacing: 0;
2719        box-shadow: none;
2720        position: relative;
2721        z-index: 1;
2722    }
2723
2724    .module-1__input-field textarea::placeholder,
2725    .module-8__input-field textarea::placeholder {
2726        color: rgba(0, 0, 0, 0.4);
2727        opacity: 1;
2728    }
2729
2730    .module-1__input-field textarea::-webkit-scrollbar,
2731    .module-8__input-field textarea::-webkit-scrollbar {
2732        width: 6px;
2733    }
2734
2735    .module-1__input-field textarea::-webkit-scrollbar-thumb,
2736    .module-8__input-field textarea::-webkit-scrollbar-thumb {
2737        border: 2px solid transparent;
2738        border-radius: 3px;
2739        background-color: rgba(0, 0, 0, 0.18);
2740        background-clip: content-box;
2741    }
2742
2743    .module-1__input-toolbar,
2744    .module-8__input-toolbar {
2745        width: 100%;
2746        min-height: 49px;
2747        flex: 1;
2748        display: flex;
2749        align-items: flex-end;
2750        justify-content: space-between;
2751        padding: 9px 12px 12px;
2752        position: relative;
2753        z-index: 1;
2754        border-radius: 0 0 16px 16px;
2755        background-color: #fff;
2756    }
2757
2758    .module-1__model-btn,
2759    .module-1__icon-btn,
2760    .module-1__send-btn,
2761    .module-8__model-btn,
2762    .module-8__icon-btn,
2763    .module-8__send-btn {
2764        border: 0;
2765        padding: 0;
2766        font-family: inherit;
2767        background: transparent;
2768        cursor: pointer;
2769    }
2770
2771    .module-1__tip-trigger {
2772        position: relative;
2773        display: flex;
2774        flex-shrink: 0;
2775    }
2776
2777    .module-1__tip-trigger::after {
2778        content: "";
2779        position: absolute;
2780        left: 0;
2781        right: 0;
2782        top: 100%;
2783        height: 12px;
2784    }
2785
2786    .module-1__model-btn,
2787    .module-8__model-btn {
2788        display: flex;
2789        align-items: center;
2790        gap: 5px;
2791        flex-shrink: 0;
2792        padding: 3px 8px;
2793        border-radius: 6px;
2794        color: rgba(0, 0, 0, 0.8);
2795        font-size: 12px;
2796        font-weight: 400;
2797        line-height: 150%;
2798        transition: background-color 0.2s ease, color 0.2s ease;
2799    }
2800
2801    .module-1__model-btn svg,
2802    .module-1__model-btn img,
2803    .module-8__model-btn img {
2804        width: 16px;
2805        height: 16px;
2806        flex: 0 0 16px;
2807        color: #19191a;
2808        opacity: 0.8;
2809    }
2810
2811    .module-1__input-actions,
2812    .module-8__input-actions {
2813        display: flex;
2814        align-items: center;
2815        gap: 16px;
2816        flex-shrink: 0;
2817    }
2818
2819    .module-1__icon-btn,
2820    .module-8__icon-btn {
2821        width: 24px;
2822        height: 24px;
2823        display: flex;
2824        align-items: center;
2825        justify-content: center;
2826        color: #19191a;
2827        opacity: 0.8;
2828        border-radius: 6px;
2829        transition: background-color 0.2s ease, opacity 0.2s ease;
2830    }
2831
2832    .module-1__icon-btn svg,
2833    .module-8__icon-btn svg,
2834    .module-8__icon-btn img {
2835        width: 24px;
2836        height: 24px;
2837        display: block;
2838    }
2839
2840    .module-1__tip-trigger:hover .module-1__model-btn,
2841    .module-1__tip-trigger:focus-within .module-1__model-btn,
2842    .module-1__tip-trigger:hover .module-1__icon-btn,
2843    .module-1__tip-trigger:focus-within .module-1__icon-btn {
2844        background-color: rgba(0, 0, 0, 0.04);
2845        opacity: 1;
2846    }
2847
2848    .module-1__unlock-popover {
2849        position: absolute;
2850        top: calc(100% + 5px);
2851        left: 50%;
2852        z-index: 10;
2853        width: 242px;
2854        min-height: 136px;
2855        display: flex;
2856        flex-direction: column;
2857        align-items: flex-start;
2858        gap: 10px;
2859        padding: 16px;
2860        border-radius: 20px;
2861        background-color: #fff;
2862        box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.06);
2863        opacity: 0;
2864        pointer-events: none;
2865        transform: translate(-50%, -4px);
2866        transition: opacity 0.18s ease, transform 0.18s ease;
2867    }
2868
2869    .module-1__tip-trigger:hover .module-1__unlock-popover,
2870    .module-1__tip-trigger:focus-within .module-1__unlock-popover {
2871        opacity: 1;
2872        pointer-events: auto;
2873        transform: translate(-50%, 0);
2874    }
2875
2876    .module-1__popover-copy {
2877        display: flex;
2878        flex-direction: column;
2879        gap: 8px;
2880        width: 100%;
2881    }
2882
2883    .module-1__popover-title {
2884        color: #000;
2885        font-size: 14px;
2886        font-weight: 500;
2887        line-height: 115.3%;
2888    }
2889
2890    .module-1__popover-desc {
2891        color: rgba(0, 0, 0, 0.6);
2892        font-size: 14px;
2893        font-weight: 400;
2894        line-height: 130%;
2895    }
2896
2897    .module-1__popover-login {
2898        display: inline-flex;
2899        align-items: center;
2900        justify-content: center;
2901        padding: 9px 12px;
2902        border-radius: 8px;
2903        background-color: #fff;
2904        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 0 1px 0 rgba(0, 0, 0, 0.4);
2905        color: #000;
2906        font-size: 14px;
2907        font-weight: 400;
2908        line-height: 115.3%;
2909        text-align: center;
2910        white-space: nowrap;
2911        text-decoration: none;
2912    }
2913
2914    .module-1__send-btn,
2915    .module-8__send-btn {
2916        width: 28px;
2917        height: 28px;
2918        display: flex;
2919        align-items: center;
2920        justify-content: center;
2921        flex-shrink: 0;
2922        border-radius: 8px;
2923        background-color: #efefef;
2924        transition: background-color 0.2s ease, transform 0.2s ease;
2925    }
2926
2927    .module-1__send-btn svg,
2928    .module-8__send-btn svg {
2929        width: 16px;
2930        height: 16px;
2931        display: block;
2932    }
2933
2934    .module-1__send-btn path,
2935    .module-8__send-btn path {
2936        transition: fill-opacity 0.2s ease, fill 0.2s ease;
2937    }
2938
2939    .module-8__send-btn--disabled {
2940        cursor: not-allowed;
2941    }
2942
2943    .module-1__input-container.is-filled .module-1__send-btn,
2944    .module-8__input-container.is-filled .module-8__send-btn {
2945        background: linear-gradient(230.91deg, rgba(210.1, 142.75, 255, 1) -9.821%, rgba(67.11, 167.32, 255, 1) 93.092%), rgba(240, 240, 240, 1);
2946    }
2947
2948    .module-1__input-container.is-filled .module-1__send-btn path,
2949    .module-8__input-container.is-filled .module-8__send-btn path {
2950        fill: #fff;
2951        fill-opacity: 1;
2952    }
2953
2954    .module-1__input-container.is-filled .module-1__send-btn:active,
2955    .module-8__input-container.is-filled .module-8__send-btn:active {
2956        transform: scale(0.96);
2957    }
2958
2959    .module-8__hero-stack {
2960        position: relative;
2961        z-index: 2;
2962        display: flex;
2963        flex-direction: column;
2964        align-items: center;
2965        gap: 50px;
2966        width: 100%;
2967    }
2968
2969    .module-8__content-bd .module-8__header {
2970        max-width: none;
2971        padding: 188px 0 0;
2972    }
2973
2974    .module-8__content-bd .module-8__title {
2975        width: min(480px, calc(100vw - 40px));
2976        max-width: none;
2977        color: #171717;
2978        font-size: clamp(30px, 4vw, 40px);
2979        font-weight: 700;
2980        line-height: 1.4;
2981        text-align: center;
2982    }
2983
2984    .module-8__title-en {
2985        font-family: Figtree, "PingFang SC", "Microsoft YaHei", sans-serif;
2986    }
2987
2988    .module-8__content-bd .module-8__input-container {
2989        position: relative;
2990        z-index: 3;
2991        width: 700px;
2992        max-width: calc(100% - 40px);
2993        height: 136px;
2994        overflow: visible;
2995        display: flex;
2996        flex-direction: column;
2997        flex-shrink: 0;
2998        padding: 0;
2999        border-radius: 16px;
3000        background-color: #fff;
3001        box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.08);
3002        isolation: isolate;
3003    }
3004
3005    .module-8__content-bd .module-8__input-container::before {
3006        bottom: -10px;
3007        width: 700px;
3008        height: 30px;
3009        border-radius: 999px;
3010        opacity: 0.5;
3011        filter: blur(18px);
3012        background: linear-gradient(90deg, rgba(255, 77, 249, 0) 0%, rgba(227, 143, 255, 0.72) 28%, rgba(73, 176, 255, 0.86) 50.46%, rgba(227, 143, 255, 0.72) 72%, rgba(255, 77, 249, 0) 100%);
3013        animation-delay: -0.35s;
3014    }
3015
3016    .module-8__content-bd .module-8__input-container::after {
3017        bottom: -1px;
3018        width: 360px;
3019        height: 1px;
3020        opacity: 1;
3021        background: linear-gradient(90deg, rgba(255, 77, 249, 0) 0%, rgba(227, 143, 255, 0.62) 27%, rgba(73, 176, 255, 0.72) 50.46%, rgba(227, 143, 255, 0.62) 73%, rgba(255, 77, 249, 0) 100%);
3022    }
3023
3024    .module-8__input-toolbar {
3025        min-height: 52px;
3026    }
3027
3028    .module-8__tip-trigger {
3029        z-index: 3;
3030    }
3031
3032    .module-8__content-bd .module-8__main-bd {
3033        position: relative;
3034        z-index: 2;
3035        width: min(950px, calc(100% - 40px));
3036        min-height: 0;
3037        padding: 0 0 151px;
3038    }
3039
3040    .module-8__preview-card {
3041        width: 100%;
3042        overflow: hidden;
3043        display: flex;
3044        flex-direction: column;
3045        align-items: flex-start;
3046        padding: 4px;
3047        border-radius: 16px;
3048        background-color: rgba(255, 255, 255, 0.5);
3049        box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.25);
3050    }
3051
3052    .module-8__preview-header {
3053        position: relative;
3054        width: 100%;
3055        height: 30px;
3056        flex-shrink: 0;
3057    }
3058
3059    .module-8__preview-dots {
3060        position: absolute;
3061        left: 9px;
3062        top: 9px;
3063        width: 36px !important;
3064        height: 8px;
3065        opacity: 0.1;
3066    }
3067
3068    .module-8__preview-actions {
3069        position: absolute;
3070        right: 4px;
3071        top: 2px;
3072        display: flex;
3073        align-items: flex-start;
3074        gap: 10px;
3075    }
3076
3077    .module-8__preview-action {
3078        width: 24px;
3079        height: 24px;
3080        display: flex;
3081        align-items: center;
3082        justify-content: center;
3083        opacity: 0.2;
3084    }
3085
3086    .module-8__preview-action img {
3087        width: 12px;
3088        height: 12px;
3089    }
3090
3091    .module-8__preview-copy {
3092        position: relative;
3093        width: 12px;
3094        height: 12px;
3095    }
3096
3097    .module-8__preview-copy::before {
3098        content: "";
3099        position: absolute;
3100        left: 4px;
3101        top: 4px;
3102        width: 8px;
3103        height: 8px;
3104        border: 1.5px solid #000;
3105        border-radius: 2px;
3106    }
3107
3108    .module-8__preview-copy img {
3109        position: absolute;
3110        left: 0;
3111        top: 0;
3112        width: 9.5px;
3113        height: 9.5px;
3114    }
3115
3116    .module-8__preview-body {
3117        position: relative;
3118        width: 100%;
3119        overflow: hidden;
3120        border-radius: 12px;
3121        background-color: rgba(255, 255, 255, 0.8);
3122        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.25);
3123        backdrop-filter: blur(10px);
3124    }
3125
3126    .module-8__preview-media {
3127        position: relative;
3128        width: 100%;
3129        aspect-ratio: 950 / 530;
3130        overflow: hidden;
3131        background-color: #fff;
3132        cursor: pointer;
3133    }
3134
3135    .module-8__preview-media.is-video-switched {
3136        cursor: default;
3137    }
3138
3139    .module-8__preview-media .module-8__preview-image {
3140        width: 100%;
3141        height: 100%;
3142        object-fit: cover;
3143        display: block;
3144    }
3145
3146    .module-8__preview-media .module-8__preview-play {
3147        position: absolute;
3148        left: 50%;
3149        top: 50%;
3150        width: 56px;
3151        height: 56px;
3152        transform: translate(-50%, -50%);
3153    }
3154
3155    .module-8__preview-media.is-video-switched .module-8__preview-play {
3156        display: none;
3157    }
3158
3159    @keyframes module1GlowBreath {
3160
3161        0%,
3162        100% {
3163            transform: translateX(-50%) scaleX(0.46);
3164        }
3165
3166        50% {
3167            transform: translateX(-50%) scaleX(1.18);
3168        }
3169    }
3170
3171    @keyframes module1GlowTap {
3172        0% {
3173            transform: translateX(-50%) scaleX(0.92);
3174            opacity: 0.16;
3175        }
3176
3177        42% {
3178            transform: translateX(-50%) scaleX(1.32);
3179            opacity: 0.44;
3180        }
3181
3182        100% {
3183            transform: translateX(-50%) scaleX(1);
3184        }
3185    }
3186
3187    /* 模块9 */
3188    .module-9__container {
3189        background: #fff;
3190        padding-bottom: 120px;
3191    }
3192
3193    .module-9__content {
3194        margin: 0 auto;
3195        width: 100%;
3196    }
3197
3198    .module-9__header {
3199        margin-top: 180px;
3200        text-align: center;
3201        margin-bottom: 60px;
3202        display: flex;
3203        flex-direction: column;
3204        align-items: center;
3205        gap: 23px;
3206    }
3207
3208    .module-9__header .home-module__title {
3209        font-size: 48px;
3210        max-width: 720px;
3211    }
3212
3213    .module-9__tab {
3214        min-width: 92.8px;
3215        width: fit-content;
3216    }
3217
3218    .module-9__panels {
3219        margin-top: 50px;
3220        /* border-top: 1px solid #eaebee;
3221      border-bottom: 1px solid #eaebee; */
3222    }
3223
3224    .module-9__panel {
3225        display: none;
3226        padding-left: 50px;
3227        position: relative;
3228        height: 608px;
3229    }
3230
3231    .module-9__panel::before {
3232        position: absolute;
3233        content: '';
3234        top: 0;
3235        left: 0;
3236        width: 50px;
3237        height: 100%;
3238        background: url('https://pixso.net/assets/media/slash-bg-vertical-af4402ba41d09ab1.svg') repeat center;
3239        border-top: 1px solid #eaebee;
3240        border-bottom: 1px solid #eaebee;
3241    }
3242
3243    .module-9__panel.is-active {
3244        display: flex;
3245        gap: 0;
3246        align-items: stretch;
3247    }
3248
3249    .module-9__lhs {
3250        flex: 0 0 640px;
3251        display: flex;
3252        flex-direction: column;
3253        height: 100%;
3254        background: #f9f9fa;
3255        border-left: 1px solid #eaebee;
3256        border-top: 1px solid #eaebee;
3257        border-bottom: 1px solid #eaebee;
3258        justify-content: space-between;
3259    }
3260
3261    .module-9__intro {
3262        padding: 88px 50px 0;
3263    }
3264
3265    .module-9__intro-title {
3266        color: #000;
3267        font-size: 30px;
3268        font-style: normal;
3269        font-weight: 400;
3270        line-height: 120%;
3271        max-width: 420px;
3272    }
3273
3274    .module-9__intro-desc {
3275        color: #000;
3276        font-size: 16px;
3277        font-style: normal;
3278        font-weight: 400;
3279        line-height: 150%;
3280        opacity: 0.6;
3281        margin-top: 11px;
3282        margin-bottom: 48px;
3283        max-width: 389px;
3284    }
3285
3286    .module-9__intro .px-common-btn__plain {
3287        width: fit-content;
3288        font-size: 14px;
3289        line-height: 115.296%;
3290        padding: 9px 12px;
3291    }
3292
3293    .module-9__stats {
3294        display: flex;
3295        align-items: center;
3296        gap: 30px;
3297        height: 154px;
3298        padding: 0 20px 0 50px;
3299        border-top: 1px solid #eaebee;
3300    }
3301
3302    .module-9__stat-item {
3303        /* flex: 1; */
3304        max-width: 157px;
3305        min-width: 120px;
3306    }
3307
3308    .module-9__stat-number {
3309        color: #000;
3310        font-size: 34px;
3311        font-weight: 400;
3312        line-height: 120%;
3313    }
3314
3315    .module-9__stat-number span {
3316        color: #000;
3317        font-size: 18px;
3318        font-weight: 400;
3319        line-height: 161%;
3320    }
3321
3322    .module-9__stat-label {
3323        color: #000;
3324        font-size: 14px;
3325        font-style: normal;
3326        font-weight: 400;
3327        line-height: 150%;
3328        opacity: 0.5;
3329        height: 42px;
3330    }
3331
3332    .module-9__rhs {
3333        flex: 1 1 auto;
3334        display: flex;
3335        align-items: center;
3336        justify-content: center;
3337    }
3338
3339    .module-9__image {
3340        width: 100%;
3341        height: 100%;
3342        max-width: 900px;
3343        display: block;
3344        object-fit: cover;
3345        object-position: left center;
3346        aspect-ratio: 1380 / 1216;
3347    }
3348
3349    /* 模块10 */
3350    .module-10__container {
3351        background: #fff;
3352        padding-bottom: 120px;
3353    }
3354
3355    .module-10__content {
3356        margin: 0 auto;
3357        width: 100%;
3358    }
3359
3360    .module-10__header {
3361        margin-top: 220px;
3362        text-align: center;
3363        margin-bottom: 60px;
3364        display: flex;
3365        flex-direction: column;
3366        align-items: center;
3367    }
3368
3369    .module-10__header .home-module__title {
3370        font-size: 48px;
3371        font-weight: 700;
3372        line-height: 110%;
3373        max-width: 580px;
3374    }
3375
3376    .module-10__tab {
3377        width: 84.7px;
3378    }
3379
3380    .module-10__panels {
3381        margin-top: 50px;
3382        padding: 0px 39px 80px;
3383    }
3384
3385    .module-10__panel {
3386        display: none;
3387    }
3388
3389    .module-10__panel.is-active {
3390        display: block;
3391    }
3392
3393    .module-10__grid {
3394        display: grid;
3395        grid-template-columns: repeat(4, 1fr);
3396        row-gap: 12px;
3397        column-gap: 7px;
3398    }
3399
3400    .module-10__card {
3401        background: #fff;
3402        border-radius: 18px;
3403        padding: 10px 10px 18px;
3404        overflow: hidden;
3405        transition: transform 0.3s ease, box-shadow 0.3s ease;
3406        cursor: pointer;
3407        border-radius: 18px;
3408    }
3409
3410    /* 最后四个 */
3411    .module-10__card--group.module-10__card:hover {
3412        background: transparent;
3413    }
3414
3415    .module-10__card-group-grid {
3416        display: grid;
3417        grid-template-columns: repeat(2, 1fr);
3418        gap: 8px;
3419    }
3420
3421    .module-10__card-group-grid .module-10__card {
3422        padding: 5px 5px 6px;
3423        background: #f5f6f8;
3424        border-radius: 8px;
3425    }
3426
3427    .module-10__card-group-grid .module-10__card-content {
3428        padding-top: 6px;
3429    }
3430
3431    .module-10__card-group-grid .module-10__card-title {
3432        font-size: 12px;
3433        line-height: 110%;
3434        opacity: 0.7;
3435    }
3436
3437    .module-10__card-group-grid .module-10__card-desc {
3438        display: none;
3439    }
3440
3441    .module-10__card-group-grid .module-10__card-image {
3442        height: 66px;
3443        border-radius: 4px;
3444    }
3445
3446    .module-10__card-group-grid .module-10__card-image.no-image {
3447        display: flex;
3448        align-items: center;
3449        justify-content: center;
3450        background: rgba(255, 255, 255, 0.5);
3451    }
3452
3453    .module-10__card-group-grid .module-10__card-image.no-image img {
3454        width: 18px;
3455        height: 18px;
3456    }
3457
3458    .module-10__card-image.no-image::before {
3459        border-radius: 4px;
3460    }
3461
3462    .module-10__card-group-grid .module-10__card--small.no-image:hover .module-10__card-image {
3463        background: #fff;
3464    }
3465
3466    .module-10__card:hover {
3467        /* transform: translateY(-4px);
3468      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); */
3469        background: #f5f6f8;
3470    }
3471
3472    .module-10__card-image {
3473        position: relative;
3474        width: 100%;
3475        height: 200px;
3476        overflow: hidden;
3477        border-radius: 8px;
3478        background: #cfe7ed;
3479        display: flex;
3480        align-items: center;
3481        justify-content: center;
3482    }
3483
3484    .module-10__card-image::before {
3485        content: '';
3486        position: absolute;
3487        top: 0;
3488        left: 0;
3489        width: 100%;
3490        height: 100%;
3491        border-radius: 8px;
3492        border: 1px solid rgba(0, 0, 0, 0.02);
3493        pointer-events: none;
3494    }
3495
3496    .module-10__card-image img {
3497        width: 100%;
3498        height: 100%;
3499        object-fit: cover;
3500    }
3501
3502    .module-10__card-content {
3503        padding-top: 16px;
3504    }
3505
3506    .module-10__card-title {
3507        color: #000;
3508        font-size: 14px;
3509        line-height: 16.757px;
3510    }
3511
3512    .module-10__card-desc {
3513        color: #000;
3514        font-size: 12px;
3515        font-weight: 400;
3516        line-height: 110%;
3517        opacity: 0.4;
3518        margin-top: 6px;
3519    }
3520
3521    /* 插件系统 */
3522    .module-10__plugins {
3523        position: relative;
3524        padding: 0 50px;
3525    }
3526
3527    .module-10__plugins .left-slash-bg,
3528    .module-10__plugins .right-slash-bg {
3529        width: 50px;
3530    }
3531
3532    .module-10__plugins-bd {
3533        padding: 80px 40px 110px;
3534        border-left: 1px solid #eaebee;
3535        border-right: 1px solid #eaebee;
3536    }
3537
3538    .module-10__plugins-header {
3539        margin-bottom: 40px;
3540    }
3541
3542    .module-10__plugins-title {
3543        color: #171717;
3544        font-size: 24px;
3545        font-style: normal;
3546        font-weight: 600;
3547        line-height: 110%;
3548        margin-bottom: 14px;
3549    }
3550
3551    .module-10__plugins-desc {
3552        color: #000;
3553        font-size: 14px;
3554        line-height: 110%;
3555        opacity: 0.6;
3556    }
3557
3558    .module-10__plugins-grid {
3559        display: grid;
3560        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
3561        gap: 18px;
3562    }
3563
3564    .module-10__plugin-card {
3565        display: flex;
3566        align-items: center;
3567        gap: 14px;
3568        padding: 16px;
3569        border-radius: 12px;
3570        background: #fff;
3571        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 0 1px 0 rgba(0, 0, 0, 0.3);
3572        transition: transform 0.3s ease, box-shadow 0.3s ease;
3573        cursor: pointer;
3574    }
3575
3576    .module-10__plugin-card:hover {
3577        /* transform: translateY(-2px);
3578      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
3579    }
3580
3581    .module-10__plugin-icon {
3582        flex-shrink: 0;
3583        width: 44px;
3584        height: 44px;
3585        border-radius: 7px;
3586        overflow: hidden;
3587        display: flex;
3588        align-items: center;
3589        justify-content: center;
3590    }
3591
3592    .module-10__plugin-icon img {
3593        width: 100%;
3594        height: 100%;
3595        object-fit: cover;
3596    }
3597
3598    .module-10__plugin-info {
3599        flex: 1;
3600        min-width: 0;
3601    }
3602
3603    .module-10__plugin-name {
3604        color: #000;
3605        font-size: 14px;
3606        font-weight: 600;
3607        line-height: 155%;
3608        margin: 0 0 4px 0;
3609        overflow: hidden;
3610        text-overflow: ellipsis;
3611        white-space: nowrap;
3612        margin-bottom: 5px;
3613    }
3614
3615    .module-10__plugin-intro {
3616        color: #000;
3617        font-size: 13px;
3618        font-style: normal;
3619        font-weight: 400;
3620        line-height: 16.757px;
3621        overflow: hidden;
3622        text-overflow: ellipsis;
3623        white-space: nowrap;
3624        opacity: 0.5;
3625    }
3626
3627    /* 模块11 */
3628    .module-11__container {
3629        background: #f9f9fa;
3630        padding-bottom: 80px;
3631    }
3632
3633    .module-11__content {
3634        margin: 0 auto;
3635        width: 100%;
3636    }
3637
3638    .module-11__header {
3639        padding-top: 180px;
3640        padding-bottom: 80px;
3641        text-align: center;
3642        display: flex;
3643        flex-direction: column;
3644        align-items: center;
3645    }
3646
3647    .module-11__title {
3648        color: #171717;
3649        text-align: center;
3650        font-size: 48px;
3651        font-weight: 600;
3652        line-height: 110%;
3653    }
3654
3655    .module-11__subtitle {
3656        color: rgba(0, 0, 0, 0.7);
3657        text-align: center;
3658        font-size: 16px;
3659        font-style: normal;
3660        font-weight: 400;
3661        line-height: 155%;
3662        margin-top: 12px;
3663        margin-bottom: 23px;
3664    }
3665
3666    .module-11__header-btns {
3667        display: flex;
3668        gap: 16px;
3669        align-items: center;
3670    }
3671
3672    /* 内容面板 */
3673    .module-11__panels {
3674        position: relative;
3675        padding: 0 110px;
3676        background: #f9f9fa;
3677    }
3678
3679    .module-11__panel {
3680        background: #fff;
3681        display: none;
3682        height: 483px;
3683        opacity: 0;
3684        transition: opacity 0.3s ease;
3685        position: relative;
3686        z-index: 2;
3687        border-top: 1px solid #eaebee;
3688        border-left: 1px solid #eaebee;
3689        border-right: 1px solid #eaebee;
3690    }
3691
3692    .module-11__panel.is-active {
3693        display: flex;
3694        align-items: center;
3695        opacity: 1;
3696    }
3697
3698    .module-11__panel-left {
3699        padding: 40px;
3700        flex: 1;
3701        width: 100%;
3702        height: 100%;
3703        background-image: url('https://pixso.net/assets/media/slash-bg-module11-cd7285d17cf33e76.svg');
3704        /* background-size: contain; */
3705    }
3706
3707    .module-11__panel-image {
3708        width: 100%;
3709        height: 100%;
3710        display: block;
3711        object-fit: cover;
3712        aspect-ratio: 520 / 423;
3713    }
3714
3715    .module-11__panel-right {
3716        flex: 1;
3717        height: 100%;
3718        padding: 40px;
3719        display: flex;
3720        flex-direction: column;
3721        border-left: 1px solid #eaebee;
3722    }
3723
3724    .module-11__panel-logo {
3725        width: 140px;
3726        height: 50px;
3727        display: flex;
3728        align-items: center;
3729    }
3730
3731    .module-11__panel-logo img {
3732        height: 100%;
3733        width: 100%;
3734        object-fit: contain;
3735    }
3736
3737    .module-11__panel-text {
3738        color: #000;
3739        font-size: 18px;
3740        line-height: 150%;
3741        margin-top: 10px;
3742    }
3743
3744    .module-11__panel-stats {
3745        display: flex;
3746        margin-top: auto;
3747        justify-content: space-between;
3748        align-items: flex-end;
3749    }
3750
3751    .module-11__stat {
3752        display: flex;
3753        flex-direction: column;
3754        gap: 2px;
3755    }
3756
3757    .module-11__stat-label {
3758        color: #000;
3759        font-size: 14px;
3760        font-weight: 600;
3761        line-height: normal;
3762    }
3763
3764    .module-11__stat-value {
3765        color: #000;
3766        font-size: 14px;
3767        font-style: normal;
3768        line-height: normal;
3769        opacity: 0.6;
3770    }
3771
3772    .module-11__stat-number {
3773        color: #000;
3774        text-align: right;
3775        font-size: 50px;
3776        font-weight: 700;
3777        line-height: normal;
3778    }
3779
3780    .module-11__stat-desc {
3781        color: #000;
3782        text-align: right;
3783        font-size: 14px;
3784        font-style: normal;
3785        line-height: normal;
3786        opacity: 0.6;
3787    }
3788
3789    /* 底部tabs */
3790    .module-11__tabs {
3791        display: flex;
3792        justify-content: center;
3793        position: relative;
3794        z-index: 2;
3795        /* border-bottom: 1px solid #eaebee; */
3796    }
3797
3798    .module-11__tabs::-webkit-scrollbar {
3799        display: none;
3800        /* Chrome/Safari/Opera */
3801    }
3802
3803    .module-11__tab {
3804        flex: 1;
3805        border-top: 1px solid #eaebee;
3806        border-right: 1px solid #eaebee;
3807        background: #f9f9fa;
3808        padding: 12px 30px;
3809        cursor: pointer;
3810        transition: opacity 0.3s ease, transform 0.2s ease;
3811        display: flex;
3812        align-items: center;
3813        justify-content: center;
3814        height: 90px;
3815        position: relative;
3816    }
3817
3818    .module-11__tab:first-child {
3819        border-left: 1px solid #eaebee;
3820    }
3821
3822    .module-11__tab:after {
3823        position: absolute;
3824        content: '';
3825        bottom: -1px;
3826        left: 0;
3827        width: 100%;
3828        height: 1px;
3829        background: #eaebee;
3830        z-index: 2;
3831    }
3832
3833    .module-11__tab:hover {
3834        /* opacity: 0.6;
3835      transform: translateY(-2px); */
3836    }
3837
3838    .module-11__tab.is-active {
3839        opacity: 1;
3840        background: #fff;
3841    }
3842
3843    .module-11__tab.is-active:before {
3844        position: absolute;
3845        content: '';
3846        top: -1px;
3847        left: 0;
3848        width: 0;
3849        height: 1px;
3850        background: #000;
3851        transition: none;
3852    }
3853
3854    .module-11__tab.is-active.progress-animating:before {
3855        animation: progressGrow var(--progress-duration, 5s) linear forwards;
3856    }
3857
3858    .module-11__tab img {
3859        height: 66px;
3860        width: 100%;
3861        max-width: 172px;
3862        /* object-fit: contain; */
3863        /* filter: grayscale(1);
3864      transition: filter 0.3s ease; */
3865    }
3866
3867    .module-11__tab.is-active img {
3868        /* filter: grayscale(0); */
3869    }
3870
3871    /* 模块12 */
3872    .module-12.home-module {
3873        border-bottom: none;
3874    }
3875
3876    .module-12__container {
3877        background: #fff;
3878        padding-bottom: 160px;
3879        position: relative;
3880    }
3881
3882    .module-12__content {
3883        width: 100%;
3884        padding: 0 110px;
3885        position: relative;
3886    }
3887
3888    .module-12__header {
3889        padding-top: 220px;
3890        padding-bottom: 80px;
3891        text-align: center;
3892    }
3893
3894    .module-12__title {
3895        color: #000;
3896        font-size: 48px;
3897        font-weight: 600;
3898        line-height: 110%;
3899        margin: 0;
3900    }
3901
3902    .module-12__grid {
3903        display: grid;
3904        grid-template-columns: 1fr 1fr;
3905    }
3906
3907    .module-12__card {
3908        background: #f9f9fa;
3909        outline: 1px solid #eaebee;
3910        z-index: 1;
3911        display: flex;
3912        /* height: 488px; */
3913        flex-direction: column;
3914        justify-content: space-between;
3915    }
3916
3917    .module-12__card-top {
3918        padding: 26px;
3919    }
3920
3921    .module-12__card-image {
3922        width: 100%;
3923        height: 362px;
3924        overflow: hidden;
3925        background: #f9f9fa;
3926        display: flex;
3927        align-items: center;
3928        justify-content: center;
3929        margin-top: 6px;
3930    }
3931
3932    .module-12__card-image img {
3933        width: 100%;
3934        height: 100%;
3935        object-fit: cover;
3936        aspect-ratio: 580 / 362;
3937    }
3938
3939    .module-12__card-title {
3940        color: #000;
3941        margin-bottom: 6px;
3942        font-size: 16px;
3943        font-style: normal;
3944        font-weight: 600;
3945        line-height: 130%;
3946    }
3947
3948    .module-12__card-desc {
3949        color: #000;
3950        font-size: 14px;
3951        font-weight: 400;
3952        line-height: 150%;
3953        opacity: 0.5;
3954        word-break: break-all;
3955    }
3956
3957    /* 响应式 */
3958    /* 1920+ */
3959    @media (min-width: 1920px) {
3960
3961        /* 超大屏幕适配 */
3962        .module-1 .home-module__lf {
3963            left: calc((100% - var(--content-max-width)) / 2 - 330px);
3964        }
3965
3966        .module-1 .home-module__rt {
3967            /* width:  */
3968            right: calc((100% - var(--content-max-width)) / 2 - 330px);
3969        }
3970
3971        .module-12__card:nth-child(1) .module-12__card-desc {
3972            max-width: 428px;
3973        }
3974
3975        .module-12__card:nth-child(2) .module-12__card-desc {
3976            max-width: 383px;
3977        }
3978
3979        .module-12__card:nth-child(3) .module-12__card-desc {
3980            max-width: 367px;
3981        }
3982
3983        .module-12__card:nth-child(4) .module-12__card-desc {
3984            max-width: 367px;
3985        }
3986    }
3987
3988    /* 大屏幕适配 */
3989    /* 1860+ */
3990    @media (min-width: 1860px) and (max-width: 1919px) {
3991        .module-1 .home-module__lf {
3992            left: calc((100% - var(--content-max-width)) / 2 - 330px);
3993        }
3994
3995        .module-1 .home-module__rt {
3996            right: calc((100% - var(--content-max-width)) / 2 - 330px);
3997        }
3998
3999        .module-12__card:nth-child(1) .module-12__card-desc {
4000            max-width: 428px;
4001        }
4002
4003        .module-12__card:nth-child(2) .module-12__card-desc {
4004            max-width: 383px;
4005        }
4006
4007        .module-12__card:nth-child(3) .module-12__card-desc {
4008            max-width: 367px;
4009        }
4010
4011        .module-12__card:nth-child(4) .module-12__card-desc {
4012            max-width: 367px;
4013        }
4014    }
4015
4016    /* 中等屏幕适配 */
4017    /* 1280-1859 */
4018    @media (min-width: 1280px) and (max-width: 1859px) {
4019        .module-1 .home-module__lf {
4020            left: max(32px, calc((100% - var(--content-max-width)) / 2));
4021            width: 150px;
4022            background: url('https://pixso.net/assets/media/home-left-xs-bg-92ceb66ad88fa734.webp') no-repeat center;
4023            background-size: contain;
4024        }
4025
4026        .module-1 .home-module__rt {
4027            right: max(31px, calc((100% - var(--content-max-width)) / 2) + 1px);
4028            width: 150px;
4029            background: url('https://pixso.net/assets/media/home-right-xs-bg-2874f5f24087a2c7.webp') no-repeat center;
4030            background-size: contain;
4031        }
4032
4033        .module-2__bg-box {
4034            padding: 0 64px 59px;
4035        }
4036
4037        /* .module-9__lhs {
4038            flex: 0 0 475px;
4039        } */
4040
4041        .module-10__plugins .left-slash-bg {
4042            width: 50px;
4043        }
4044
4045        .module-10__plugins .right-slash-bg {
4046            width: 50px;
4047        }
4048
4049        .module-12__card:nth-child(1) .module-12__card-desc {
4050            max-width: 428px;
4051        }
4052
4053        .module-12__card:nth-child(2) .module-12__card-desc {
4054            max-width: 383px;
4055        }
4056
4057        .module-12__card:nth-child(3) .module-12__card-desc {
4058            max-width: 367px;
4059        }
4060
4061        .module-12__card:nth-child(4) .module-12__card-desc {
4062            max-width: 367px;
4063        }
4064    }
4065
4066    /* 小屏幕适配 */
4067    /* 1080-1279 */
4068    @media (min-width: 1080px) and (max-width: 1279px) {
4069        .module-1 .home-module__lf {
4070            left: 32px;
4071            width: 150px;
4072            background: url('https://pixso.net/assets/media/home-left-xs-bg-92ceb66ad88fa734.webp') no-repeat center;
4073            background-size: contain;
4074        }
4075
4076        .module-1 .home-module__rt {
4077            right: 33px;
4078            width: 150px;
4079            background: url('https://pixso.net/assets/media/home-right-xs-bg-2874f5f24087a2c7.webp') no-repeat center;
4080            background-size: contain;
4081        }
4082
4083        .module-2__contanier {
4084            width: calc(100% - 40px);
4085            margin-top: -122px;
4086            margin-bottom: 20px;
4087        }
4088
4089        .module-2__bg-box {
4090            padding: 0 20px 60px;
4091        }
4092
4093        .module-3__title {
4094            max-width: 896px;
4095        }
4096
4097        .module-3__container {
4098            padding: 58px 20px;
4099        }
4100
4101        .module-5__bubble.bubble--1 {
4102            top: 121px;
4103            left: 63px;
4104        }
4105
4106        .module-5__bubble.bubble--2 {
4107            top: 179px;
4108            right: 68px;
4109        }
4110
4111        .module-5__bubble.bubble--3 {
4112            top: 612px;
4113            left: 130px;
4114        }
4115
4116        .module-5__bubble.bubble--4 {
4117            top: 552px;
4118            right: 113px;
4119        }
4120
4121        .module-6__panel {
4122            padding-left: 20px;
4123        }
4124
4125        .module-6__panel::before {
4126            position: absolute;
4127            content: '';
4128            top: 0;
4129            left: 0;
4130            width: 20px;
4131            height: 100%;
4132            background: url('https://pixso.net/assets/media/slash-bg-vertical-af4402ba41d09ab1.svg') repeat center;
4133        }
4134
4135        .module-6__lhs {
4136            flex: 0 0 376px;
4137        }
4138
4139        .module-7__middle {
4140            padding: 0 20px;
4141        }
4142
4143        .module-7__features {
4144            padding: 80px 20px 0;
4145        }
4146
4147        .module-9__panel {
4148            padding-left: 20px;
4149        }
4150
4151        .module-9__panel::before {
4152            width: 20px;
4153        }
4154
4155        .module-9__lhs {
4156            flex: 0 0 506px;
4157        }
4158
4159        .module-10__plugins {
4160            padding: 0 20px;
4161        }
4162
4163        .module-10__panels {
4164            padding: 0px 20px 80px;
4165        }
4166
4167        .module-10__grid {
4168            grid-template-columns: repeat(3, 1fr);
4169        }
4170
4171        .module-10__plugins-grid {
4172            grid-template-columns: repeat(3, 1fr);
4173        }
4174
4175        .module-11__panels {
4176            padding: 0 20px;
4177        }
4178
4179        .module-12__content {
4180            padding: 0 20px;
4181        }
4182
4183        .module-12__card-image {
4184            height: 304px;
4185        }
4186    }
4187
4188    /* 平板横屏适配 */
4189    /* 800-1079 */
4190    @media (min-width: 800px) and (max-width: 1079px) {
4191        .module-1 .home-module__lf {
4192            display: none;
4193        }
4194
4195        .module-1 .home-module__rt {
4196            display: none;
4197        }
4198
4199        .module-2__contanier {
4200            width: calc(100% - 40px);
4201            margin-top: -122px;
4202            margin-bottom: 20px;
4203        }
4204
4205        .module-2__bg-box {
4206            padding: 0 20px 32px;
4207        }
4208
4209        .module-3__container {
4210            padding: 58px 20px;
4211        }
4212
4213        .module-4__title {
4214            max-width: 120px;
4215        }
4216
4217        .module-5__contanier {
4218            height: 870px;
4219        }
4220
4221        .module-5__bubble.bubble--1 {
4222            top: 101px;
4223            left: 53px;
4224        }
4225
4226        .module-5__bubble.bubble--2 {
4227            top: 199px;
4228            right: 40px;
4229        }
4230
4231        .module-5__bubble.bubble--3 {
4232            top: 722px;
4233            left: 94px;
4234        }
4235
4236        .module-5__bubble.bubble--4 {
4237            top: 622px;
4238            right: 30px;
4239        }
4240
4241        .module-6__panel {
4242            padding-left: 20px;
4243        }
4244
4245        .module-6__panel::before {
4246            position: absolute;
4247            content: '';
4248            top: 0;
4249            left: 0;
4250            width: 20px;
4251            height: 100%;
4252            background: url('https://pixso.net/assets/media/slash-bg-vertical-af4402ba41d09ab1.svg') repeat center;
4253        }
4254
4255        .module-6__lhs {
4256            flex: 0 0 280px;
4257        }
4258
4259        .module-6__header {
4260            margin-top: 120px;
4261        }
4262
4263        .module-7__middle {
4264            padding: 0 20px;
4265        }
4266
4267        .module-7__features {
4268            padding: 80px 20px 0;
4269            gap: 30px;
4270        }
4271
4272        .module-8__content-bd .module-8__input-container {
4273            max-width: calc(100% - 40px);
4274        }
4275
4276        .module-9__panel {
4277            padding-left: 20px;
4278        }
4279
4280        .module-9__panel::before {
4281            width: 20px;
4282        }
4283
4284        .module-9__lhs {
4285            flex: 0 0 346px;
4286        }
4287
4288        .module-9__intro {
4289            padding: 88px 50px 0 20px;
4290        }
4291
4292        .module-9__intro-title {
4293            max-width: 100%;
4294        }
4295
4296        .module-9__intro-desc {
4297            max-width: 100%;
4298        }
4299
4300        .module-9__intro-title {
4301            font-size: 26px;
4302        }
4303
4304        .module-9__intro-desc {
4305            font-size: 14px;
4306        }
4307
4308        .module-9__stats {
4309            padding: 0 20px;
4310            gap: 18px;
4311        }
4312
4313        .module-9__stat-number {
4314            font-size: 26px;
4315        }
4316
4317        .module-9__stat-number span {
4318            font-size: 12px;
4319        }
4320
4321        .module-9__stat-label {
4322            font-size: 12px;
4323        }
4324
4325        .module-10__plugins {
4326            padding: 0 20px;
4327        }
4328
4329        .module-10__panels {
4330            padding: 0px 20px 80px;
4331        }
4332
4333        .module-10__grid {
4334            grid-template-columns: repeat(3, 1fr);
4335        }
4336
4337        .module-10__plugins-grid {
4338            grid-template-columns: repeat(2, 1fr);
4339        }
4340
4341        .module-11__panels {
4342            padding: 0 20px;
4343        }
4344
4345        .module-11__panel {
4346            flex-direction: column;
4347            height: auto;
4348        }
4349
4350        .module-11__panel-left {
4351            height: 412px;
4352            flex: none;
4353        }
4354
4355        .module-11__panel-right {
4356            border-top: 1px solid #eaebee;
4357            height: 412px;
4358            flex: none;
4359        }
4360
4361        .module-11__tab {
4362            padding: 16px 0;
4363        }
4364
4365        .module-12__content {
4366            padding: 0 20px;
4367        }
4368
4369        .module-12__card-image {
4370            height: 218px;
4371        }
4372
4373        .module-12__header {
4374            padding-top: 120px;
4375        }
4376
4377        .module-12__title {
4378            max-width: 498px;
4379        }
4380
4381        .module-12__card-title {
4382            font-size: 14px;
4383        }
4384
4385        .module-12__card-desc {
4386            font-size: 12px;
4387        }
4388
4389        .module-12__container {
4390            padding-bottom: 120px;
4391        }
4392    }
4393
4394    /* 移动端适配 */
4395    /* 1-799 */
4396    @media (max-width: 799px) {
4397        .home-module__mid.is-rectangle::before {
4398            display: none;
4399        }
4400
4401        .home-module__mid.is-rectangle::after {
4402            display: none;
4403        }
4404
4405        .module-1 {
4406            height: auto;
4407        }
4408
4409        .module-1 .home-module__lf {
4410            display: none;
4411        }
4412
4413        .module-1 .home-module__rt {
4414            display: none;
4415        }
4416
4417        .module-1 .home-module__title {
4418            width: 297px;
4419            margin-top: 92px;
4420            color: #000;
4421            text-align: center;
4422            font-size: 34px;
4423            font-weight: 600;
4424            line-height: 110%;
4425        }
4426
4427        .module-1 .home-module__subTitle {
4428            margin-top: 8px;
4429            max-width: 297px;
4430            color: rgba(0, 0, 0, 0.6);
4431            font-size: 14px;
4432            font-weight: 400;
4433            line-height: 140%;
4434        }
4435
4436        .module-2__tabs {
4437            height: 26px;
4438        }
4439
4440        .module-2__tabs-box {
4441            padding: 2px;
4442        }
4443
4444        .module-2__tab {
4445            padding: 4px 6px !important;
4446        }
4447
4448        .module-2__tab-label {
4449            font-size: 12px !important;
4450        }
4451
4452        .module-2 .is-bg {
4453            display: none;
4454        }
4455
4456        .module-2__bg-box {
4457            padding: 0 10px 10px;
4458        }
4459
4460        .module-2__contanier {
4461            width: 100%;
4462            margin-top: 0;
4463        }
4464
4465        .module-3__container {
4466            padding: 58px 20px;
4467        }
4468
4469        .module-4__title {
4470            max-width: 100px;
4471            top: 48px;
4472        }
4473
4474        .module-4__logo-row {
4475            padding: 100px 6px 40px;
4476        }
4477
4478        .module-5__contanier {
4479            height: 688px;
4480        }
4481
4482        .module-5__bubble.bubble--1 {
4483            top: 52px;
4484            left: 43px;
4485        }
4486
4487        .module-5__bubble.bubble--2 {
4488            top: 138px;
4489            right: 71px;
4490        }
4491
4492        .module-5__bubble.bubble--3 {
4493            top: 562px;
4494            left: 31px;
4495        }
4496
4497        .module-5__bubble.bubble--4 {
4498            top: 477px;
4499            right: 13px;
4500        }
4501
4502        .module-5__headline {
4503            margin-bottom: 19px;
4504        }
4505
4506        .module-5__headline .line--strong {
4507            font-size: 30px !important;
4508        }
4509
4510        .module-5__subline {
4511            font-size: 13px;
4512        }
4513
4514        .module-6__header {
4515            margin-top: 120px;
4516            margin-bottom: 50px;
4517        }
4518
4519        .module-6__panel {
4520            padding-left: 0;
4521            flex-direction: column-reverse;
4522            /* height: 650px; */
4523        }
4524
4525        .module-6__panel::before {
4526            display: none;
4527        }
4528
4529        .module-6__lhs {
4530            flex: 0;
4531        }
4532
4533        .module-6__rhs {
4534            width: 100%;
4535            height: 280px;
4536        }
4537
4538        .module-6__intro {
4539            display: none;
4540        }
4541
4542        .module-6__ac-body-content {
4543            /* height: */
4544        }
4545
4546        .common-module__tabs-boxs {
4547            overflow-x: auto;
4548        }
4549
4550        .module-7__middle {
4551            padding: 0;
4552        }
4553
4554        .module-7__features {
4555            padding: 80px 20px 0;
4556            gap: 40px 10px;
4557            grid-template-columns: repeat(2, 1fr);
4558        }
4559
4560        .module-7__item-section-top {
4561            padding: 32px 16px 60px;
4562        }
4563
4564        .module-7__item-section.item-0 .module-7__item-section-top {
4565            padding: 32px 16px 6px;
4566        }
4567
4568        .module-7__section-title {
4569            font-size: 15px;
4570            line-height: 130%;
4571        }
4572
4573        .module-7__section-desc {
4574            font-size: 13px;
4575            line-height: 140%;
4576        }
4577
4578        .module-7__items {
4579            grid-template-columns: 1fr;
4580            border: none !important;
4581            border-bottom: 1px solid rgba(44, 47, 67, 0.08) !important;
4582        }
4583
4584        .module-7__item-section {
4585            border: none !important;
4586            border-top: 1px solid rgba(44, 47, 67, 0.08) !important;
4587        }
4588
4589        .module-8__header {
4590            padding-top: 120px;
4591        }
4592
4593        .module-8__title {
4594            font-size: 30px;
4595        }
4596
4597        .module-1__input-container,
4598        .module-8__content-bd .module-8__input-container,
4599        .module-8__content-bd .module-8__main-bd {
4600            max-width: calc(100% - 24px);
4601        }
4602
4603        .module-8__content-bd .module-8__header {
4604            padding-top: 96px;
4605        }
4606
4607        .module-8__content-bd .module-8__main-bd {
4608            padding-bottom: 88px;
4609        }
4610
4611        .module-1__unlock-popover {
4612            width: min(242px, calc(100vw - 48px));
4613        }
4614
4615        .module-9__panel {
4616            padding-left: 0;
4617        }
4618
4619        .module-9__panel::before {
4620            display: none;
4621        }
4622
4623        .module-9__panel {
4624            flex-direction: column-reverse;
4625            height: auto;
4626        }
4627
4628        .module-9__image {
4629            height: 302px;
4630        }
4631
4632        .module-9__lhs {
4633            flex: 0;
4634            border-left: none;
4635        }
4636
4637        .module-9__intro {
4638            padding: 53px 20px 72px 20px;
4639        }
4640
4641        .module-9__intro-title {
4642            max-width: 100%;
4643        }
4644
4645        .module-9__intro-desc {
4646            max-width: 100%;
4647        }
4648
4649        .module-9__intro-title {
4650            font-size: 26px;
4651        }
4652
4653        .module-9__intro-desc {
4654            font-size: 14px;
4655        }
4656
4657        .module-9__stats {
4658            padding: 0 20px;
4659            gap: 18px;
4660            justify-content: space-between;
4661        }
4662
4663        .module-9__stat-number {
4664            font-size: 26px;
4665        }
4666
4667        .module-9__stat-number span {
4668            font-size: 12px;
4669        }
4670
4671        .module-9__stat-label {
4672            font-size: 12px;
4673        }
4674
4675        .module-10__plugins {
4676            padding: 0;
4677        }
4678
4679        .module-10__panels {
4680            padding: 0px 12px 80px;
4681        }
4682
4683        .module-10__plugins-bd {
4684            padding: 60px 16px 80px 16px;
4685        }
4686
4687        .module-10__grid {
4688            grid-template-columns: repeat(2, 1fr);
4689        }
4690
4691        .module-10__plugins-grid {
4692            grid-template-columns: repeat(1, 1fr);
4693        }
4694
4695        .module-11 .home-module__mid {
4696            width: 100%;
4697        }
4698
4699        .module-11__panels {
4700            padding: 0;
4701            width: 100%;
4702        }
4703
4704        .module-11__panel {
4705            flex-direction: column;
4706            height: auto;
4707            border-left: none;
4708            border-right: none;
4709        }
4710
4711        .module-11__panel-left {
4712            height: 345px;
4713            padding: 16px;
4714            flex: none;
4715        }
4716
4717        .module-11__panel-right {
4718            border-top: 1px solid #eaebee;
4719            height: 345px;
4720            padding: 16px;
4721            flex: none;
4722            border-left: none;
4723        }
4724
4725        .module-11__tabs {
4726            overflow-x: auto;
4727            justify-content: flex-start;
4728        }
4729
4730        .module-11__tab {
4731            padding: 16px 0;
4732            width: 126px;
4733            flex: none;
4734        }
4735
4736        .module-11__panel-text {
4737            font-size: 16px;
4738        }
4739
4740        .module-11__stat-number {
4741            font-size: 30px;
4742        }
4743
4744        .module-12__content {
4745            padding: 0;
4746        }
4747
4748        .module-12__card-image {
4749            height: 214px;
4750        }
4751
4752        .module-12__header {
4753            padding-top: 80px;
4754        }
4755
4756        .module-12__title {
4757            max-width: 311px;
4758        }
4759
4760        .module-12__card-title {
4761            font-size: 14px;
4762        }
4763
4764        .module-12__card-desc {
4765            font-size: 12px;
4766        }
4767
4768        .module-12__container {
4769            padding-bottom: 120px;
4770        }
4771
4772        .module-12__grid {
4773            grid-template-columns: 1fr;
4774        }
4775
4776        .module-12__title {
4777            font-size: 30px;
4778        }
4779    }
4780
4781    @media (max-width: 400px) {
4782        .module-5__bubble.bubble--1 {
4783            left: 10px;
4784        }
4785
4786        .module-5__bubble.bubble--2 {
4787            right: 10px;
4788        }
4789
4790        .module-7__item-section.item-0 img {
4791            height: 228px;
4792        }
4793
4794        .module-7__item-section.item-1 img,
4795        .module-7__item-section.item-2 img {
4796            height: 171px;
4797        }
4798
4799        .module-7__item-section.item-4 img,
4800        .module-7__item-section.item-3 img {
4801            height: 171px;
4802        }
4803    }
4804</style>
4805<style>.module-8__content-bd.perf-bg-ready::before{background:url("https://pixso.net/assets/media/module-8-footer-bg-832b81a48c982c1a.webp") no-repeat center !important;background-size:cover;}</style>
4806<style>
4807.module-2__bg-video-box{position:relative;background:#fff;}
4808.module-2__bg-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;pointer-events:none;transition:opacity .2s ease;}
4809.module-2__bg-video-box.is-playing .module-2__bg-video-poster{opacity:0;}
4810</style>
4811<style>@media(max-width:799px){.module-2__bg-img{display:none!important}.module-2__bg-video-box{background:#f5f7fb}}</style>
4812<style id="perf-mobile-cookie">@media(max-width:799px){.cookie-into-sub{font-size:12px!important;line-height:16px!important}}</style>
4813<style id="perf-mobile-video">@media(max-width:799px){.module-2__bg-video-box:not(.perf-mobile-ready) .module-2__bg-video-poster{display:none}.module-2__bg-video-box:not(.perf-mobile-ready) .module-2__bg-video{visibility:hidden}}</style>
4814<style id="perf-mobile-video-user">@media(max-width:799px){.module-2__bg-video-box:not(.perf-mobile-user-ready) .module-2__bg-video-poster{display:none}.module-2__bg-video-box:not(.perf-mobile-user-ready) .module-2__bg-video{visibility:hidden}}</style>
4815<style>.module-1__proof{display:flex;justify-content:center;gap:24px;list-style:none;margin:22px auto 0;padding:0;color:#3c485c;font-size:14px}.module-1__proof li{position:relative;padding-left:18px}.module-1__proof li::before{content:"✓";position:absolute;left:0;color:#336fff;font-weight:700}.module-3__quote{max-width:824px;margin:12px 0 0;color:rgba(0,0,0,.7);font-size:18px;line-height:1.6}@media screen and (max-width:799px){.module-1__proof{gap:12px;font-size:12px;flex-wrap:wrap}.module-3__quote{font-size:15px}}</style>
4816
4817<style id="en-home-ui-regression-fix">
4818.home-contanier{word-break:normal;overflow-wrap:normal;hyphens:none}
4819.module-1 .home-module__title{max-width:960px}
4820.module-1 .home-module__subTitle{max-width:800px}
4821.module-7__item-section-top .px-common-btn__plain{box-sizing:border-box;width:fit-content;min-width:190px;padding-left:18px;padding-right:18px;white-space:nowrap}
4822.module-3__title,.module-11__panel-text,.module-12__card-desc{word-break:normal;overflow-wrap:normal;hyphens:none}
4823@media(max-width:799px){
4824  .module-1 .home-module__title{width:min(100%,340px);max-width:340px}
4825  .module-1 .home-module__subTitle{width:min(100%,340px);max-width:340px}
4826  .module-7__item-section-top .px-common-btn__plain{min-width:190px;max-width:100%}
4827}
4828</style>
4829<style id="pixso-mobile-first-media-v3">
4830/* Initial viewport content must render without waiting for scroll-animation JavaScript. */
4831.module-1 .scroll-animate-up,.module-2__contanier.scroll-animate-up{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
4832.module-2__bg-video-poster img{display:block;width:100%;height:100%;object-fit:cover}
4833.module-2__bg-video:not([data-perf-hydrated]){visibility:hidden!important}
4834@media(max-width:799px){
4835  .module-2__bg-video-box .module-2__bg-video-poster{display:block!important;visibility:visible!important;opacity:1}
4836  .module-2__bg-video-box.is-playing .module-2__bg-video-poster{opacity:0!important}
4837  .module-2__bg-video[data-perf-hydrated]{visibility:visible!important}
4838}
4839</style>
4840
4841<style id="pixso-click-video-v1-style">
4842.module-2__bg-video-box,.module-8__preview-media{position:relative}
4843.module-2__bg-video-box{aspect-ratio:8/5}
4844.module-2__bg-video-box .module-2__bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
4845.pixso-demo-play{position:absolute;right:12px;top:12px;z-index:5;border:1px solid #d4daec;border-radius:8px;padding:10px 14px;background:#fff;color:#23305a;font:600 14px/1.3 sans-serif;cursor:pointer;box-shadow:0 2px 10px #0002}
4846.pixso-demo-play:focus-visible{outline:3px solid #4565ed;outline-offset:3px}
4847.pixso-demo-play:disabled{cursor:progress;opacity:.9}
4848.module-2__bg-video-box .module-2__bg-video-poster{display:block!important;visibility:visible!important;opacity:1}
4849.module-2__bg-video-box.is-playing .module-2__bg-video-poster{opacity:0!important}
4850.module-2__bg-video[data-perf-hydrated]{visibility:visible!important}
4851.module-8__preview-media .module-8__preview-play{display:none!important}
4852.module-8__preview-media .pixso-demo-play{display:block!important}
4853.pixso-video-fallback{position:absolute;left:12px;bottom:12px;z-index:6;background:white;padding:10px;border-radius:6px}
4854@media(max-width:799px){.pixso-demo-play{top:8px;right:8px;font-size:12px;padding:8px 10px}}
4855</style>
4856
4857<!-- PIXSO_HREFLANG_STATIC_V2: endpoint-aware published canonical HTTP 200 groups -->
4858
4859
4860
4861
4862
4863
4864
4865<!-- /PIXSO_HREFLANG_STATIC_V2 -->
4866</head>
4867<body data-pro="pixso" data-cat="template" data-nav="basic" data-sys="auto" data-dev="auto" data-tar="auto" data-lan="zh">
4868<header id="wsc-header">
4869    <nav class="navbar navbar-expand-1024 flex-column p-0  fixed-top">
4870        <div class="container-padding home-module__content header-container h-100">
4871            <div class="header-logo-container">
4872                <a class="navbar-logo" href="/">
4873                    <img class="navbar-logo__img" src="https://pixso.net/assets/media/px-logo-074d2a64fdeed33d.webp"
4874                        alt="pixso" />
4875                </a>
4876                <!---<div class="header-logo-tip" >
4877                        拖拽 LOGO 到地址栏收藏网站
4878                        <img class="header-logo-tip-arrow"
4879                            src="https://pixso.net/assets/media/header-logo-tip-28130517727881d9.svg" alt="pixso-logo-tip">
4880                    </div> -->
4881            </div>
4882
4883            <!---移动端折叠按钮 -->
4884            <div class="order-2 icon-box">
4885                <button class="navbar-toggler" style="padding:0" type="button" data-toggle="collapse"
4886                    data-target="#navbarMainContent" aria-controls="navbarMainContent" aria-expanded="false"
4887                    aria-label="Toggle navigation">
4888                    <i class="wsc-icon aria-expanded-false-show" data-icon="symbol-menu">
4889                    </i>
4890                    <i class="wsc-icon aria-expanded-true-show" data-icon="symbol-close" style="width: 12px;">
4891                    </i>
4892                </button>
4893            </div>
4894            <!---列表 -->
4895            <div class="collapse navbar-collapse order-3" id="navbarMainContent">
4896                <ul class="navbar-nav h-100 d-flex position-relative">
4897                    <!---产品 -->
4898                    <li
4899                        class="nav-item header-dropdown-item with-hand dropdown-nav-item h-100 position-relative with-hand headerTabCategory">
4900                        <div class="nav-link px-10 d-inline-flex align-items-center h-100">
4901                            <span>Product</span>
4902                            <svg class="dropdown--arrow" width="16" height="16" viewBox="0 0 16 16" fill="none"
4903                                xmlns="http://www.w3.org/2000/svg">
4904                                <path d="M4.5 6.25L8 9.75L11.5 6.25" stroke="black" stroke-linecap="round"
4905                                    stroke-linejoin="round" />
4906                            </svg>
4907                        </div>
4908                        <div class="header-item-container position-absolute header-item-container--product">
4909                            <!---产品 -->
4910                            <div class="header-item-container-col">
4911                                <div class="header-item-container-col-title">
4912                                    Product
4913                                </div>
4914                                <a class="header-item flx-align__center" href="https://pixso.net/"
4915                                    data-track="Pixso design">
4916                                    <div class="header-item-container-icon-wrap">
4917                                        <img class="header-item-container-icon"
4918                                            src="https://pixso.net/assets/media/header-pixso-icon-ac1a464464a5eace.webp"
4919                                            alt="Pixso design">
4920                                    </div>
4921                                    <div class="header-item-wrap">
4922                                        <div class="header-item-title">
4923                                            Pixso
4924                                        </div>
4925                                        <div class="header-item-description">
4926                                            All-in-one UI/UX design tool
4927                                        </div>
4928                                    </div>
4929                                    <img class="header-item-arrow"
4930                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4931                                        alt="arrow-right">
4932                                </a>
4933                                <a class="header-item flx-align__center"
4934                                    href="https://pixso.net/app/recent" data-track="Pixso AI">
4935                                    <div class="header-item-container-icon-wrap">
4936                                        <img class="header-item-container-icon"
4937                                            src="https://pixso.net/assets/media/header-pixsoai-icon-72fa574549d5bbcf.webp"
4938                                            alt="Pixso AI">
4939                                    </div>
4940                                    <div class="header-item-wrap">
4941                                        <div class="header-item-title">
4942                                            Pixso AI
4943                                        </div>
4944                                        <div class="header-item-description">
4945                                            Explore smart design
4946                                        </div>
4947                                    </div>
4948                                    <img class="header-item-arrow"
4949                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4950                                        alt="arrow-right">
4951                                </a>
4952                                
4953                                <a class="header-item flx-align__center" href="https://boardmix.com/"
4954                                    data-track="Boardmix">
4955                                    <div class="header-item-container-icon-wrap">
4956                                        <img class="header-item-container-icon"
4957                                            src="https://pixso.net/assets/media/header-boardmix-icon-052c529659093c26.webp"
4958                                            alt="Boardmix">
4959                                    </div>
4960                                    <div class="header-item-wrap">
4961                                        <div class="header-item-title">
4962                                            Boardmix
4963                                        </div>
4964                                        <div class="header-item-description">
4965                                            Online collaboration whiteboard
4966                                        </div>
4967                                    </div>
4968                                    <img class="header-item-arrow"
4969                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4970                                        alt="arrow-right">
4971                                </a>
4972                                <a class="header-item flx-align__center" href="https://presenti.ai/"
4973                                    data-track="Presenti AI">
4974                                    <div class="header-item-container-icon-wrap">
4975                                        <img class="header-item-container-icon"
4976                                            src="https://pixso.net/assets/media/presenti-logo-42eb16999453e437.webp"
4977                                            alt="Presenti AI">
4978                                    </div>
4979                                    <div class="header-item-wrap">
4980                                        <div class="header-item-title">
4981                                            Presenti AI
4982                                        </div>
4983                                        <div class="header-item-description">
4984                                            AI presentation maker
4985                                        </div>
4986                                    </div>
4987                                    <img class="header-item-arrow"
4988                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4989                                        alt="arrow-right">
4990                                </a>
4991                            </div>
4992                            <!---AI -->
4993                            <div class="header-item-container-col">
4994                                <div class="header-item-container-col-title">
4995                                    AI
4996                                </div>
4997                                <div class="header-item--ai-col">
4998                                    <a class="paico-ai-card" href="https://paico.ai/" data-track="Paico"
4999                                        aria-label="Paico">
5000                                        <div class="paico-ai-card__rings" aria-hidden="true">
5001                                            <div class="paico-ai-card__ring paico-ai-card__ring--1"></div>
5002                                            <div class="paico-ai-card__ring paico-ai-card__ring--2"></div>
5003                                            <div class="paico-ai-card__ring paico-ai-card__ring--3"></div>
5004                                            <div class="paico-ai-card__ring paico-ai-card__ring--4"></div>
5005                                        </div>
5006                                        <img class="paico-ai-card__preview"
5007                                            src="https://pixso.net/assets/media/paico-preview-5fd4155439f6e40f.webp" alt="">
5008                                        <div class="paico-ai-card__icon" aria-hidden="true">
5009                                            <img class="paico-ai-card__logo-main"
5010                                                src="https://pixso.net/assets/media/paico-logo-main-50a18ef75f3d8e43.webp"
5011                                                alt="">
5012                                            <img class="paico-ai-card__logo-spark"
5013                                                src="https://pixso.net/assets/media/paico-logo-spark-945da90dc02a03e7.webp"
5014                                                alt="">
5015                                        </div>
5016                                        <p class="paico-ai-card__title">Paico</p>
5017                                        <p class="paico-ai-card__description">Build any type of web and mobile app UI</p>
5018                                        <div class="paico-ai-card__arrow">
5019                                            <img src="https://pixso.net/assets/media/paico-arrow-81f40e563c6e1b57.svg"
5020                                                srcset="">
5021                                        </div>
5022                                    </a>
5023                                </div>
5024                            </div>
5025                            <!---资源与下载 -->
5026                            <div class="header-item-container-col">
5027                                <div class="header-item-container-col-title">
5028                                    Download
5029                                </div>
5030                                
5031                                <a class="header-item--box header-download-box" href="https://pixso.net/download/">
5032                                    <div class="header-item--box-title header-item--box-arrow">
5033                                        Get Pixso for Desktop
5034                                    </div>
5035                                    <p class="header-item--box-description">
5036                                        Available for Windows & Mac
5037                                    </p>
5038                                </a>
5039                            </div>
5040                        </div>
5041                    </li>
5042                    <!---AI生成设计稿 -->
5043                    <li
5044                            class="nav-item header-dropdown-item with-hand dropdown-nav-item h-100 position-relative with-hand headerTabCategory">
5045                            <div class="nav-link px-10 d-inline-flex align-items-center h-100">
5046                                <span>AI</span>
5047                                <svg class="dropdown--arrow" width="16" height="16" viewBox="0 0 16 16" fill="none"
5048                                    xmlns="http://www.w3.org/2000/svg">
5049                                    <path d="M4.5 6.25L8 9.75L11.5 6.25" stroke="black" stroke-linecap="round"
5050                                        stroke-linejoin="round" />
5051                                </svg>
5052                            </div>
5053                            <div class="header-item-container position-absolute header-item-container-ai">
5054                                <!-- AI -->
5055                                <div class="header-item-container-col">
5056                                    <a class="header-item flx-align__center" href="https://paico.ai/"
5057                                        data-track="Paico full-stack builder">
5058                                        <div class="header-item-container-icon-wrap">
5059                                            <img class="header-item-container-icon"
5060                                                src="https://pixso.net/assets/media/header-paico-icon-1311e2ddcaaac582.webp"
5061                                                alt="Paico full-stack builder">
5062                                        </div>
5063                                        <div class="header-item-wrap">
5064                                            <div class="header-item-title">
5065                                                Paico full-stack builder
5066                                            </div>
5067                                            <div class="header-item-description">
5068                                                Build any type of web and mobile app UI
5069                                            </div>
5070                                        </div>
5071                                        <img class="header-item-arrow"
5072                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5073                                            alt="arrow-right">
5074                                    </a>
5075                                    <a class="header-item flx-align__center" href="https://pixso.net/app/recent"
5076                                        data-track="Pixso AI design">
5077                                        <div class="header-item-container-icon-wrap">
5078                                            <img class="header-item-container-icon"
5079                                                src="https://pixso.net/assets/media/header-pixsoai-icon-72fa574549d5bbcf.webp"
5080                                                alt="Pixso AI design">
5081                                        </div>
5082                                        <div class="header-item-wrap">
5083                                            <div class="header-item-title">
5084                                                Pixso AI smart design
5085                                            </div>
5086                                            <div class="header-item-description">
5087                                                Generate and optimize designs directly on the canvas
5088                                            </div>
5089                                        </div>
5090                                        <img class="header-item-arrow"
5091                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5092                                            alt="arrow-right">
5093                                    </a>
5094                                </div>
5095                            </div>
5096                        </li>
5097                    <!-- 终身版 -->
5098                    <li class="nav-item h-100 position-relative with-hand">
5099                        <a class="nav-link px-10 h-100 d-inline-flex align-items-center"
5100                            href="https://pixso.net/pixso-lifetime-plan/"><span class="nav-item-lifetime">Lifetime
5101                                plan</span></a>
5102                    </li>
5103                    <!---解决方案 -->
5104                    <li
5105                            class="nav-item header-resource header-dropdown-item with-hand dropdown-nav-item h-100 position-relative with-hand headerTabCategory">
5106                            <div class="nav-link px-10 d-inline-flex align-items-center h-100">
5107                                <span class="">Solutions</span>
5108                                <svg class="dropdown--arrow" width="16" height="16" viewBox="0 0 16 16" fill="none"
5109                                    xmlns="http://www.w3.org/2000/svg">
5110                                    <path d="M4.5 6.25L8 9.75L11.5 6.25" stroke="black" stroke-linecap="round"
5111                                        stroke-linejoin="round" />
5112                                </svg>
5113                            </div>
5114                            <div class="header-item-container position-absolute header-item-container--solution">
5115                                <div class="header-item-container-col header-item-container-without-title">
5116                                    <a class="header-item flx-align__center"
5117                                        href="https://pixso.net/ui-design-collaboration/" data-track="UI design">
5118                                        <div class="header-item-container-icon-wrap">
5119                                            <img class="header-item-container-icon"
5120                                                src="https://pixso.net/assets/media/header-ui-icon-f17fba0b6512916e.svg"
5121                                                alt="UI design">
5122                                        </div>
5123                                        <div class="header-item-wrap">
5124                                            <div class="header-item-title">
5125                                                UI design
5126                                            </div>
5127                                            <div class="header-item-description">
5128                                                Efficient UI design
5129                                            </div>
5130                                        </div>
5131                                        <img class="header-item-arrow"
5132                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5133                                            alt="arrow-right">
5134                                    </a>
5135                                    <a class="header-item flx-align__center"
5136                                        href="https://pixso.net/ux-design-collaboration/" data-track="UX design">
5137                                        <div class="header-item-container-icon-wrap">
5138                                            <img class="header-item-container-icon"
5139                                                src="https://pixso.net/assets/media/header-ux-icon-398763026d6636ca.svg"
5140                                                alt="UX design">
5141                                        </div>
5142                                        <div class="header-item-wrap">
5143                                            <div class="header-item-title">
5144                                                UX design
5145                                            </div>
5146                                            <div class="header-item-description">
5147                                                Optimize user experience
5148                                            </div>
5149                                        </div>
5150                                        <img class="header-item-arrow"
5151                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5152                                            alt="arrow-right">
5153                                    </a>
5154                                    <a class="header-item flx-align__center" href="https://pixso.net/prototyping/"
5155                                        data-track="Prototyping">
5156                                        <div class="header-item-container-icon-wrap">
5157                                            <img class="header-item-container-icon"
5158                                                src="https://pixso.net/assets/media/header-proto-icon-d0089fbd7ad57776.svg"
5159                                                alt="Prototyping">
5160                                        </div>
5161                                        <div class="header-item-wrap">
5162                                            <div class="header-item-title">
5163                                                Prototyping
5164                                            </div>
5165                                            <div class="header-item-description">
5166                                                Simulate interaction flows with ease
5167                                            </div>
5168                                        </div>
5169                                        <img class="header-item-arrow"
5170                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5171                                            alt="arrow-right">
5172                                    </a>
5173                                </div>
5174                                <div class="header-item-container-col header-item-container-without-title">
5175                                    <a class="header-item flx-align__center" href="https://pixso.net/web-designing/"
5176                                        data-track="Web design">
5177                                        <div class="header-item-container-icon-wrap">
5178                                            <img class="header-item-container-icon"
5179                                                src="https://pixso.net/assets/media/web-design-df4b6ba0bd15fd80.svg"
5180                                                alt="Web design">
5181                                        </div>
5182                                        <div class="header-item-wrap">
5183                                            <div class="header-item-title">
5184                                                Web design
5185                                            </div>
5186                                            <div class="header-item-description">
5187                                                Design responsive web pages
5188                                            </div>
5189                                        </div>
5190                                        <img class="header-item-arrow"
5191                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5192                                            alt="arrow-right">
5193                                    </a>
5194                                    <a class="header-item flx-align__center" href="https://pixso.net/design-system/"
5195                                        data-track="Design system">
5196                                        <div class="header-item-container-icon-wrap">
5197                                            <img class="header-item-container-icon"
5198                                                src="https://pixso.net/assets/media/desgn-sys-9f2ddd0a3f72a572.svg"
5199                                                alt="Design system">
5200                                        </div>
5201                                        <div class="header-item-wrap">
5202                                            <div class="header-item-title">
5203                                                Design system
5204                                            </div>
5205                                            <div class="header-item-description">
5206                                                Standardize and manage enterprise-grade assets
5207                                            </div>
5208                                        </div>
5209                                        <img class="header-item-arrow"
5210                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5211                                            alt="arrow-right">
5212                                    </a>
5213                                    <a class="header-item flx-align__center" href="https://pixso.net/pixso-whiteboard/"
5214                                        data-track="Design whiteboard">
5215                                        <div class="header-item-container-icon-wrap">
5216                                            <img class="header-item-container-icon"
5217                                                src="https://pixso.net/assets/media/desgn-whiteboard-a33b0de55c133662.svg"
5218                                                alt="Design whiteboard">
5219                                        </div>
5220                                        <div class="header-item-wrap">
5221                                            <div class="header-item-title">
5222                                                Design whiteboard
5223                                            </div>
5224                                            <div class="header-item-description">
5225                                                Brainstorming & workflow mapping
5226                                            </div>
5227                                        </div>
5228                                        <img class="header-item-arrow"
5229                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5230                                            alt="arrow-right">
5231                                    </a>
5232                                </div>
5233                            </div>
5234                        </li>
5235                    <!---社区 -->
5236                    <li
5237                        class="nav-item header-resource header-dropdown-item with-hand dropdown-nav-item h-100 position-relative with-hand headerTabCategory">
5238                        <div class="nav-link px-10 d-inline-flex align-items-center h-100">
5239                            <span class="">Resource</span>
5240                            <svg class="dropdown--arrow" width="16" height="16" viewBox="0 0 16 16" fill="none"
5241                                xmlns="http://www.w3.org/2000/svg">
5242                                <path d="M4.5 6.25L8 9.75L11.5 6.25" stroke="black" stroke-linecap="round"
5243                                    stroke-linejoin="round" />
5244                            </svg>
5245                        </div>
5246                        <div class="header-item-container position-absolute header-item-container--community">
5247                            <div class="header-item-container-col header-item-container-without-title">
5248                                <a class="header-item flx-align__center"
5249                                    href="https://pixso.net/community/home?classify=file"
5250                                    data-track="Design Assets">
5251                                    <div class="header-item-container-icon-wrap">
5252                                        <img class="header-item-container-icon"
5253                                            src="https://pixso.net/assets/media/header-deisgn-icon-b1d99f9aa5cbd1d2.svg"
5254                                            alt="Design Assets">
5255                                    </div>
5256                                    <div class="header-item-wrap">
5257                                        <div class="header-item-title">
5258                                            Design assets
5259                                        </div>
5260                                        <div class="header-item-description">
5261                                            Get high-quality design files for free
5262                                        </div>
5263                                    </div>
5264                                    <img class="header-item-arrow"
5265                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5266                                        alt="arrow-right">
5267                                </a>
5268                                <a class="header-item flx-align__center"
5269                                    href="https://pixso.net/community/home?classify=library"
5270                                    data-track="Component Libraries">
5271                                    <div class="header-item-container-icon-wrap">
5272                                        <img class="header-item-container-icon"
5273                                            src="https://pixso.net/assets/media/header-component-icon-5f7e7501aa2690fc.svg"
5274                                            alt="Component Libraries">
5275                                    </div>
5276                                    <div class="header-item-wrap">
5277                                        <div class="header-item-title">
5278                                            Component libraries
5279                                        </div>
5280                                        <div class="header-item-description">
5281                                            Components from top tech companies
5282                                        </div>
5283                                    </div>
5284                                    <img class="header-item-arrow"
5285                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5286                                        alt="arrow-right">
5287                                </a>
5288                                <a class="header-item flx-align__center" href="https://pixso.net/plugins/"
5289                                    data-track="Plugin Community">
5290                                    <div class="header-item-container-icon-wrap">
5291                                        <img class="header-item-container-icon"
5292                                            src="https://pixso.net/assets/media/header-proto-icon-d0089fbd7ad57776.svg"
5293                                            alt="Plugin Community">
5294                                    </div>
5295                                    <div class="header-item-wrap">
5296                                        <div class="header-item-title">
5297                                            Plugin community
5298                                        </div>
5299                                        <div class="header-item-description">
5300                                            Extend design possibilities with plugins
5301                                        </div>
5302                                    </div>
5303                                    <img class="header-item-arrow"
5304                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5305                                        alt="arrow-right">
5306                                </a>
5307                            </div>
5308                            <!---热门精选 -->
5309                            <div class="header-item-container-col">
5310                                <div class="header-item-container-col-title">
5311                                    Featured
5312                                </div>
5313                                <a class="header-item--box header-popular-box"
5314                                    href="https://pixso.net/community/home">
5315                                    <img src="https://pixso.net/assets/media/header-popular-dd6c26936cf82f1b.webp"
5316                                        alt="Featured">
5317                                </a>
5318                                <!---设计技巧 -->
5319                                <div class="header-item-container-col-title" style="margin-top: 24px;">
5320                                    Blog
5321                                </div>
5322                                <a class="header-item--box header-skill-box" href="https://pixso.net/articles/">
5323                                </a>
5324                            </div>
5325                        </div>
5326                    </li>
5327                    <!---定价 -->
5328                    <li class="nav-item h-100 position-relative with-hand">
5329                        <a class="nav-link px-10  h-100 d-inline-flex align-items-center headerPrimaryBtnsTrack"
5330                            href="https://pixso.net/pricing/" data-track="Pricing"><span>Pricing</span></a>
5331                    </li>
5332                    <!---企业服务 -->
5333                    <li
5334                        class="nav-item header-resource header-dropdown-item with-hand dropdown-nav-item h-100 position-relative with-hand headerTabCategory">
5335                        <div class="nav-link px-10 d-inline-flex align-items-center h-100">
5336                            <span class="">Enterprise</span>
5337                            <svg class="dropdown--arrow" width="16" height="16" viewBox="0 0 16 16" fill="none"
5338                                xmlns="http://www.w3.org/2000/svg">
5339                                <path d="M4.5 6.25L8 9.75L11.5 6.25" stroke="black" stroke-linecap="round"
5340                                    stroke-linejoin="round" />
5341                            </svg>
5342                        </div>
5343                        <div class="header-item-container position-absolute header-item-container--enterprise">
5344                            <div class="header-item-container-col header-item-container-without-title">
5345                                <a class="header-item flx-align__center"
5346                                    href="https://pixso.net/organization-application/"
5347                                    data-track="Apply for Free Trial">
5348                                    <div class="header-item-container-icon-wrap">
5349                                        <img class="header-item-container-icon"
5350                                            src="https://pixso.net/assets/media/header-ent1-153193ffa462fb3b.svg"
5351                                            alt="Apply for Free Trial">
5352                                    </div>
5353                                    <div class="header-item-wrap">
5354                                        <div class="header-item-title">
5355                                            Apply for free trial
5356                                        </div>
5357                                    </div>
5358                                    <img class="header-item-arrow"
5359                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5360                                        alt="arrow-right">
5361                                </a>
5362                                <a class="header-item flx-align__center" href="https://pixso.net/pixso-enterprise/"
5363                                    data-track="Enterprise Edition">
5364                                    <div class="header-item-container-icon-wrap">
5365                                        <img class="header-item-container-icon"
5366                                            src="https://pixso.net/assets/media/header-ent2-24574057725cf6f9.svg"
5367                                            alt="Enterprise Edition">
5368                                    </div>
5369                                    <div class="header-item-wrap">
5370                                        <div class="header-item-title">
5371                                            Enterprise edition
5372                                        </div>
5373                                    </div>
5374                                    <img class="header-item-arrow"
5375                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5376                                        alt="arrow-right">
5377                                </a>
5378                                <a class="header-item flx-align__center"
5379                                    href="https://pixso.net/private-deployment/" data-track="Private Deployment">
5380                                    <div class="header-item-container-icon-wrap">
5381                                        <img class="header-item-container-icon"
5382                                            src="https://pixso.net/assets/media/header-ent3-4f51e4f0fd861c84.svg"
5383                                            alt="Private Deployment">
5384                                    </div>
5385                                    <div class="header-item-wrap">
5386                                        <div class="header-item-title">
5387                                            Private deployment
5388                                        </div>
5389                                    </div>
5390                                    <img class="header-item-arrow"
5391                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5392                                        alt="arrow-right">
5393                                </a>
5394                            </div>
5395                        </div>
5396                    </li>
5397                    <!---帮助支持 -->
5398                    <li
5399                        class="nav-item header-resource header-dropdown-item with-hand dropdown-nav-item h-100 position-relative with-hand headerTabCategory">
5400                        <div class="nav-link px-10 d-inline-flex align-items-center h-100">
5401                            <span class="">Support</span>
5402                            <svg class="dropdown--arrow" width="16" height="16" viewBox="0 0 16 16" fill="none"
5403                                xmlns="http://www.w3.org/2000/svg">
5404                                <path d="M4.5 6.25L8 9.75L11.5 6.25" stroke="black" stroke-linecap="round"
5405                                    stroke-linejoin="round" />
5406                            </svg>
5407                        </div>
5408                        <div class="header-item-container position-absolute header-item-container--support">
5409                            <div class="header-item-container-col header-item-container-without-title">
5410                                <a class="header-item flx-align__center" href="https://pixso.net/contact-us/"
5411                                    data-track="Contact Us">
5412                                    <div class="header-item-container-icon-wrap">
5413                                        <img class="header-item-container-icon"
5414                                            src="https://pixso.net/assets/media/header-support1-2bb2e388c6174c9a.svg"
5415                                            alt="Contact Us">
5416                                    </div>
5417                                    <div class="header-item-wrap">
5418                                        <div class="header-item-title">
5419                                            Contact us
5420                                        </div>
5421                                    </div>
5422                                    <img class="header-item-arrow"
5423                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5424                                        alt="arrow-right">
5425                                </a>
5426                                <a class="header-item flx-align__center" href="https://pixso.net/help/"
5427                                    data-track="Help Center">
5428                                    <div class="header-item-container-icon-wrap">
5429                                        <img class="header-item-container-icon"
5430                                            src="https://pixso.net/assets/media/header-support2-3923551c4b0fccee.svg"
5431                                            alt="Help Center">
5432                                    </div>
5433                                    <div class="header-item-wrap">
5434                                        <div class="header-item-title">
5435                                            Help center
5436                                        </div>
5437                                    </div>
5438                                    <img class="header-item-arrow"
5439                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5440                                        alt="arrow-right">
5441                                </a>
5442                                <a class="header-item flx-align__center" href="https://pixso.net/faq/"
5443                                    data-track="FAQ">
5444                                    <div class="header-item-container-icon-wrap">
5445                                        <img class="header-item-container-icon"
5446                                            src="https://pixso.net/assets/media/header-support3-bbafdabd18ed0519.svg"
5447                                            alt="FAQ">
5448                                    </div>
5449                                    <div class="header-item-wrap">
5450                                        <div class="header-item-title">
5451                                            FAQ
5452                                        </div>
5453                                    </div>
5454                                    <img class="header-item-arrow"
5455                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5456                                        alt="arrow-right">
5457                                </a>
5458                            </div>
5459                        </div>
5460                    </li>
5461                    <div class="header-container__rt">
5462                        <div class="login-contanier beforeLogin">
5463                            <div class="login-item">
5464                                <a href="https://pixso.net/app/" class="login-txt login">Log in</a>
5465                            </div>
5466                            <div class="login-item login-btn px-common-btn">
5467                                <a href="https://pixso.net/app/" class="login-txt">Get started</a>
5468                            </div>
5469                        </div>
5470
5471                        <div class="nav-item h-100 with-hand toWorkbench-container afterLogin" style="display:none">
5472                            <div class="toWorkbench headerPrimaryBtnsTrack px-common-btn">
5473                                <a href="https://pixso.net/app/" class="login-txt">Go to workspace</a>
5474                            </div>
5475                        </div>
5476                    </div>
5477                </ul>
5478            </div>
5479        </div>
5480    </nav>
5481</header>
5482<meta name="naver-site-verification" content="b34c67662d5946d770f2731f4a272b630e30aaec">
5483<div class="home-contanier">
5484    <!-- 模块1 -->
5485    <div class="home-module module-1 border-bottom-above">
5486        <div class="home-module__content">
5487            <div class="home-module__lf"></div>
5488            <div class="home-module__mid is-rectangle module-1__content">
5489                <h1 class="home-module__title scroll-animate-up">
5490                    UI/UX Design and <br>Prototyping with AI
5491                </h1>
5492                <div class="home-module__subTitle scroll-animate-up">
5493                    Create interfaces, refine designs with AI, and build interactive prototypes. <br>Keep components, feedback, and developer handoff in one workspace.
5494                </div>
5495                <div class="module-1__btns scroll-animate-up flex_center">
5496                    <a class="px-common-btn" href="/app/">Start designing for free</a>
5497                    <a class="px-common-btn__plain" href="https://pixso.net/pixso-vs-figma/">Compare Pixso with Figma</a>
5498                </div>
5499                <div class="module-1__input-container scroll-animate-up">
5500                    <img fetchpriority="high" decoding="async" loading="eager" height="148" width="640" class="module-1__input-bg" src="https://pixso.net/assets/media/module1-input-bg-2aad38d2cddee175.webp" alt aria-hidden="true">
5501                    <div class="module-1__input-field">
5502                        <textarea rows="1" aria-label="AI design prompt" placeholder="Generate your desired designs with one click, e.g., Blue finance homepage"></textarea>
5503                    </div>
5504                    <div class="module-1__input-toolbar">
5505                        <div class="module-1__tip-trigger module-1__tip-trigger--left">
5506                            <button class="module-1__model-btn" type="button" aria-describedby="module1ModelTip">
5507                                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
5508                                    <path d="M9.22218 12.8414L8.26998 13.4261C8.0971 13.5322 7.9238 13.5329 7.75008 13.4281L7.26551 13.1358L6.78103 12.8433C6.77536 12.8399 6.76976 12.8364 6.76423 12.8327C6.45541 12.6291 6.22385 12.5042 6.06954 12.458C5.88894 12.4039 5.44739 12.3768 4.74489 12.3768L3.92 12.3768C3.16888 12.3768 2.67245 12.3161 2.43069 12.1946C2.10239 12.0297 1.85434 11.7849 1.68657 11.4601C1.56219 11.2193 1.5 10.727 1.5 9.98312L1.5 4.89373C1.5 4.14985 1.56219 3.65753 1.68656 3.41677C1.85429 3.0921 2.10233 2.84725 2.4307 2.68224C2.67245 2.56075 3.16888 2.5 3.92 2.5L4.16 2.5C4.95748 2.5 5.49631 2.51129 5.77648 2.53387C6.24149 2.57134 6.6207 2.6638 6.91409 2.81124C7.47405 3.09266 7.8969 3.50991 8.18262 4.063C8.33307 4.35422 8.4274 4.73036 8.46559 5.19143C8.48853 5.46832 8.5 6.00033 8.5 6.78746L8.50834 12.9993C8.50879 13.3327 8.34234 13.4996 8.00901 13.5C7.67568 13.5004 7.50879 13.334 7.50834 13.0007L7.5 6.78746C7.5 5.54274 7.43139 4.78758 7.29418 4.52198C7.10786 4.16132 6.83149 3.88891 6.46507 3.70476C6.19343 3.56825 5.42508 3.5 4.16 3.5L3.92 3.5C3.32698 3.5 2.98022 3.52525 2.87972 3.57576C2.74489 3.64352 2.64332 3.74351 2.57502 3.87573C2.52501 3.97254 2.5 4.31188 2.5 4.89373L2.5 9.98312C2.5 10.565 2.525 10.9043 2.57501 11.0011C2.64333 11.1334 2.7449 11.2333 2.87973 11.301C2.98022 11.3515 3.32698 11.3768 3.92 11.3768L4.74489 11.3768C5.54514 11.3768 6.08231 11.4179 6.3564 11.5C6.60461 11.5743 6.92404 11.7403 7.3147 11.9979L7.78202 12.2796L8.2666 12.5719L8.6989 11.9892C8.98296 11.8148 9.2122 11.8696 9.38662 12.1537C9.56105 12.4377 9.50623 12.667 9.22218 
550812.8414ZM13.5 6.98312L13.5 4.89373C13.5 4.31188 13.475 3.97255 13.425 3.87575C13.3567 3.74352 13.2551 3.64353 13.1203 3.57576C13.0198 3.52525 12.673 3.5 12.08 3.5L11.84 3.5C10.5749 3.5 9.80656 3.56825 9.5349 3.70476C9.1685 3.88891 8.89214 4.16132 8.70582 4.52198C8.56861 4.78758 8.5 5.54274 8.5 6.78745C8.5 7.12079 8.33333 7.28746 8 7.28746C7.66667 7.28746 7.5 7.12079 7.5 6.78746C7.5 6.00033 7.51147 5.46832 7.53441 5.19143C7.5726 4.73036 7.66693 4.35422 7.81738 4.063C8.1031 3.50992 8.52594 3.09267 9.0859 2.81124C9.3793 2.66379 9.75852 2.57134 10.2235 2.53387C10.5037 2.51129 11.0425 2.5 11.84 2.5L12.08 2.5C12.8311 2.5 13.3275 2.56075 13.5693 2.68224C13.8978 2.84729 14.1458 3.09213 14.3134 3.41675C14.4378 3.65752 14.5 4.14985 14.5 4.89373L14.5 6.98312C14.5 7.31645 14.3333 7.48312 14 7.48312C13.6667 7.48312 13.5 7.31645 13.5 6.98312ZM10.5528 12.7764L11.0528 11.7764L11.5528 10.7764L12.5528 8.77639C12.7019 8.47825 12.9255 8.40372 13.2236 8.55279C13.323 8.60248 13.3975 8.67701 13.4472 8.77639L14.4472 10.7764L14.9472 11.7764L15.4472 12.7764C15.5963 13.0745 15.5217 13.2981 15.2236 13.4472C14.9255 13.5963 14.7019 13.5217 14.5528 13.2236L14.0528 12.2236L13.5528 11.2236L12.5528 9.22361L12.4472 11.2236L11.9472 12.2236L11.4472 13.2236C11.2981 13.5217 11.0745 13.5963 10.7764 13.4472C10.4783 13.2981 10.4037 13.0745 10.5528 12.7764ZM14.5 12.5L11.5 12.5C11.1667 12.5 11 12.3333 11 12C11 11.6667 11.1667 11.5 11.5 11.5L14.5 11.5C14.8333 11.5 15 11.6667 15 12C15 12.3333 14.8333 12.5 14.5 12.5Z" fill="currentColor"/>
5509                                </svg>
5510                                <span>Smart design system</span>
5511                            </button>
5512                            <div class="module-1__unlock-popover" id="module1ModelTip" role="tooltip">
5513                                <div class="module-1__popover-copy">
5514                                    <div class="module-1__popover-title">Unlock more features</div>
5515                                    <div class="module-1__popover-desc">Log in to upload images, select design system attachments, and more.</div>
5516                                </div>
5517                                <a class="module-1__popover-login" href="https://pixso.net/app/">Log in</a>
5518                            </div>
5519                        </div>
5520                        <div class="module-1__input-actions">
5521                            <div class="module-1__tip-trigger module-1__tip-trigger--right">
5522                                <button class="module-1__icon-btn" type="button" aria-label="Upload reference image" aria-describedby="module1UploadTip">
5523                                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
5524                                        <path d="M15.8947 8.94102L15.8947 10.3822C15.8948 10.4634 15.9117 10.5376 15.9455 10.6048C15.9936 10.7036 16.0732 10.7832 16.1719 10.8313C16.2385 10.8648 16.312 10.8817 16.3923 10.882L16.3947 10.882C16.4759 10.882 16.5503 10.8651 16.6175 10.8313C16.7163 10.7831 16.7958 10.7036 16.844 10.6049C16.8775 10.5383 16.8944 10.4648 16.8947 10.3845L16.8947 10.382L16.8947 8.94102L18.2896 8.94102C18.3708 8.94099 18.4451 8.92408 18.5123 8.89028C18.611 8.84214 18.6906 8.76256 18.7387 8.66382C18.7722 8.59723 18.7891 8.52379 18.7895 8.44348L18.7895 8.44102C18.7895 8.35981 18.7725 8.28543 18.7387 8.2182C18.6906 8.11948 18.611 8.0399 18.5123 7.99176C18.4457 7.95827 18.3722 7.94135 18.2919 7.94102L18.2895 7.94102L16.8947 7.94102L16.8947 6.49984C16.8947 6.41863 16.8778 6.34441 16.844 6.27718C16.7958 6.17846 16.7163 6.09888 16.6175 6.05074C16.551 6.01725 16.4775 6.00033 16.3972 6L16.3947 6C16.3135 6.00001 16.2392 6.01693 16.1719 6.05074C16.0732 6.09888 15.9936 6.17846 15.9455 6.2772C15.912 6.34377 15.8951 6.41722 15.8947 6.49754L15.8947 6.5L15.8947 7.94102L14.4998 7.94102C14.4186 7.94103 14.3444 7.95795 14.2772 7.99176C14.1785 8.0399 14.0989 8.11948 14.0507 8.2182C14.0172 8.28479 14.0003 8.35824 14 8.43856L14 8.44102C14 8.52223 14.0169 8.59661 14.0507 8.66382C14.0989 8.76256 14.1785 8.84214 14.2772 8.89028C14.3438 8.92376 14.4172 8.94067 14.4975 8.94102L14.5 8.94102L15.8947 8.94102ZM7.31466 17.9898L13.515 12.2323C13.6533 12.1039 13.8041 12.0064 13.9675 11.9397C14.1308 11.873 14.307 11.8371 14.4955 11.832C14.6841 11.827 14.8618 11.8534 15.0285 11.9112C15.1953 11.9691 15.3511 12.0584 15.496 12.1791L17.5322 13.876C17.6881 14.0059 17.8051 14.1541 17.883 14.3205C17.9609 14.4869 18 14.6717 18 14.8747L18 16.5C18 16.8451 17.939 17.1649 17.817 17.4595C17.695 17.7542 17.5118 18.0237 17.2678 18.2678C17.0237 18.5118 16.7544 18.6949 16.4597 18.8169C16.1651 18.9389 15.8451 19 15.5 19L7.5 19C7.15489 19 6.83505 18.939 6.54046 18.817C6.24585 18.695 5.97631 18.5118 5.73224 18.2678C5.48817 18.0237 5.30512 17.7544 5.18308 17.4597C5.06108 17.1652 5 16.8451 5 16.5L5 8.5C5 8.15489 5.061 7.83505 5.183 7.54046C5.30504 7.24585 5.48817 6.97631 5.73224 6.73224C5.97631 6.48817 6.24565 6.30512 6.54026 6.18308C6.83485 6.06108 7.15489 6 7.5 6L12.5 6C12.5691 6 12.6331 6.01223 12.6921 6.03668C12.7025 6.04099 12.7127 6.04567 12.7228 6.05074C12.8215 6.09888 12.9011 6.17846 12.9493 6.2772C12.9543 6.28728 12.959 6.29752 12.9633 6.30792C12.9878 6.36684 13 6.43081 13 6.49984L13 6.50246C12.9997 6.57066 12.9875 6.63391 12.9633 6.6922C12.959 6.70256 12.9543 6.71276 12.9493 6.7228C12.9011 6.82154 12.8215 6.90112 12.7228 6.94926C12.7127 6.95433 12.7025 6.95901 12.6921 6.9
55246332C12.6331 6.98777 12.5691 7 12.5 7L7.5 7C7.29289 7 7.10095 7.03661 6.92418 7.10984C6.74741 7.18305 6.58579 7.29289 6.43934 7.43934C6.29289 7.58579 6.18305 7.74741 6.10984 7.92418C6.03661 8.10095 6 8.29289 6 8.5L6 16.5C6 16.7071 6.03661 16.899 6.10984 17.0758C6.18305 17.2525 6.29295 17.4143 6.43934 17.5607C6.58579 17.7071 6.74741 17.8169 6.92418 17.8902C7.04702 17.941 7.17718 17.9742 7.31466 17.9898ZM9.25 8.5C9.49164 8.5 9.71558 8.54271 9.92182 8.62814C10.128 8.71357 10.3166 8.84171 10.4874 9.01256C10.6583 9.18337 10.7864 9.37188 10.8718 9.57808C10.9572 9.78431 11 10.0084 11 10.25C11 10.4916 10.9573 10.7156 10.8718 10.9218C10.7864 11.128 10.6583 11.3166 10.4874 11.4874C10.3166 11.6583 10.128 11.7864 9.92182 11.8718C9.71558 11.9573 9.49164 12 9.25 12C9.0084 12 8.78449 11.9573 8.57826 11.8719C8.37206 11.7865 8.18337 11.6583 8.01256 11.4874C7.84171 11.3166 7.71357 11.128 7.62814 10.9218C7.54271 10.7156 7.5 10.4916 7.5 10.25C7.5 10.0084 7.54271 9.78441 7.62814 9.57816C7.71357 9.37193 7.84171 9.1834 8.01256 9.01256C8.1834 8.84171 8.37193 8.71357 8.57816 8.62814C8.78441 8.54271 9.00836 8.5 9.25 8.5ZM9.25 9.5C9.14644 9.5 9.05047 9.51831 8.96208 9.55492C8.87373 9.59153 8.79287 9.64648 8.71968 9.71968C8.64648 9.79287 8.59157 9.87363 8.55496 9.96198C8.51835 10.0504 8.5 10.1464 8.5 10.25C8.5 10.3535 8.5183 10.4495 8.5549 10.5379C8.59151 10.6263 8.64647 10.7071 8.71968 10.7803C8.79281 10.8535 8.87353 10.9083 8.96182 10.945C9.05021 10.9816 9.14644 11 9.25 11C9.35351 11 9.44944 10.9817 9.5378 10.9451C9.62611 10.9085 9.70717 10.8535 9.78034 10.7803C9.8535 10.7072 9.90839 10.6264 9.945 10.5381C9.98159 10.4497 10 10.3535 10 10.25C10 10.1464 9.98169 10.0505 9.94508 9.96208C9.90847 9.87379 9.85347 9.79281 9.78034 9.71968C9.70713 9.64647 9.62633 9.59155 9.53794 9.55494C9.44957 9.51834 9.35353 9.5 9.25 9.5ZM15.5 18L8.77326 18L14.1955 12.9651C14.303 12.8653 14.4117 12.8139 14.5218 12.811C14.6318 12.808 14.7432 12.8535 14.8558 12.9474L16.8921 14.6442C16.928 14.6742 16.955 14.7084 16.973 14.7468C16.991 14.7853 17 14.8279 17 14.8747L17 16.5C17 16.7071 16.9634 16.899 16.8902 17.0758C16.8169 17.2526 16.7071 17.4142 16.5607 17.5607C16.4142 17.7071 16.2526 17.8169 16.0758 17.8902C15.899 17.9634 15.7071 18 15.5 18Z" fill="currentColor" fill-rule="evenodd"/>
5525                                    </svg>
5526                                </button>
5527                                <div class="module-1__unlock-popover" id="module1UploadTip" role="tooltip">
5528                                    <div class="module-1__popover-copy">
5529                                        <div class="module-1__popover-title">Unlock more features</div>
5530                                        <div class="module-1__popover-desc">Log in to upload images, select design system attachments, and more.</div>
5531                                    </div>
5532                                    <a class="module-1__popover-login" href="https://pixso.net/app/">Log in</a>
5533                                </div>
5534                            </div>
5535                            <button class="module-1__send-btn" type="button" aria-label="Send">
5536                                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
5537                                    <path d="M3.57254 6.29404L7.57254 2.54404C7.85751 2.27687 8.14249 2.27687 8.42746 2.54404L12.4275 6.29404C12.7314 6.57901 12.7409 6.87349 12.456 7.17746C12.171 7.48144 11.8765 7.49094 11.5725 7.20596L8.625 4.44272L8.625 13C8.625 13.4167 8.41667 13.625 8 13.625C7.58333 13.625 7.375 13.4167 7.375 13L7.375 4.44272L4.42746 7.20596C4.12349 7.49094 3.82901 7.48144 3.54404 7.17746C3.25906 6.87349 3.26856 6.57901 3.57254 6.29404Z" fill="black" fill-opacity="0.3"/>
5538                                </svg>
5539                            </button>
5540                        </div>
5541                    </div>
5542                </div>
5543                <ul class="module-1__proof" aria-label="Pixso product facts"><li>Free plan</li><li>Import Figma, Sketch, and XD</li></ul>
5544                <!-- <div class="module-1__cards scroll-animate-up">
5545                    <a class="module-1__card module-1__card--active" href="https://paico.ai/app/" target="_blank">
5546                        <img class="module-1__card-img"
5547                            src="https://pixso.net/assets/media/module-1-ai-58a01bb291b26f9e.webp" alt="AI design workspace preview" />
5548                        <div class="module-1__card-bd">
5549                            <div class="frame-3_137082">
5550                                <span class="text-3_137083">AI design</span>
5551                            </div>
5552                            <span class="text-3_137084">Turn ideas into designs now</span>
5553                        </div>
5554                    </a>
5555                    <a class="module-1__card" href="https://pixso.net/pixso-lifetime-plan/">
5556                        <img class="module-1__card-img"
5557                            src="https://pixso.net/assets/media/module-1-lifetime-aa6802fa49ccb6dc.webp" alt="Pixso lifetime plan preview" />
5558                        <div class="module-1__card-bd">
5559                            <div class="frame-3_137082">
5560                                <span class="text-3_137083">Pixso lifetime plan</span>
5561                            </div>
5562                            <span class="text-3_137084">Grab the lifetime deal today</span>
5563                        </div>
5564                    </a>
5565                </div> -->
5566            </div>
5567            <div class="home-module__rt"></div>
5568        </div>
5569    </div>
5570    <!-- 模块2 -->
5571    <div class="home-module module-2">
5572        <div class="home-module__content is-bg">
5573            <div class="home-module__lf"></div>
5574            <div class="home-module__mid is-bg">
5575                <img src="https://pixso.net/assets/media/slash-bg-774cd4dec82f0bda.webp" alt loading="lazy" decoding="async">
5576            </div>
5577            <div class="home-module__rt"></div>
5578        </div>
5579
5580        <div class="home-module__content">
5581            <div class="home-module__mid is-content">
5582                <div class="module-2__contanier scroll-animate-up actived-2">
5583                    <!-- tabs -->
5584                    <div class="module-2__tabs">
5585                        <div class="module-2__tabs-box">
5586                            <div class="module-2__tab" data-tab="1" data-demo-video="https://pixso.net/assets/media/module-2-demo-1-c665ad9b88e87807.mp4" data-demo-poster="https://pixso.net/assets/media/module-2-videocover1-c94f227aefe019df.webp" data-demo-bg="https://pixso.net/assets/media/module-2-bg1-fdada4aa3ecfd524.webp">
5587                                <span class="module-2__tab-label">Whiteboard</span>
5588                            </div>
5589                            <div class="module-2__tab is-actived" data-tab="2" data-demo-video="https://pixso.net/assets/media/module-2-demo-2-a336aa577637cdb1.mp4" data-demo-poster="https://pixso.net/assets/media/module-2-videocover2-9dfcceaca861c5a8.webp" data-demo-bg="https://pixso.net/assets/media/module-2-bg2-f71f534a2a73d465.webp" data-demo-poster-mobile="https://pixso.net/assets/media/module-2-video-cover2-mobile-69301ec904-82f46e054e4ceddc.webp">
5590                                <span class="module-2__tab-label">Design</span>
5591                            </div>
5592                            <div class="module-2__tab" data-tab="3" data-demo-video="https://pixso.net/assets/media/module-2-demo-3-115c74c64d6c6651.mp4" data-demo-poster="https://pixso.net/assets/media/module-2-videocover3-87804668dbd72f45.webp" data-demo-bg="https://pixso.net/assets/media/module-2-bg3-8d897da9c169e3a3.webp">
5593                                <span class="module-2__tab-label">Interactive demo</span>
5594                            </div>
5595                            <div class="module-2__tab" data-tab="4" data-demo-video="https://pixso.net/assets/media/module-2-demo-4-e92f5b3723b470f4.mp4" data-demo-poster="https://pixso.net/assets/media/module-2-videocover4-68d2d7bf618b4b14.webp" data-demo-bg="https://pixso.net/assets/media/module-2-bg4-e1a644341bb49cf0.webp">
5596                                <span class="module-2__tab-label">Dev view</span>
5597                            </div>
5598                        </div>
5599                    </div>
5600                    <!-- 背景 -->
5601                    <img class="module-2__bg-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-desktop-src="https://pixso.net/assets/media/module-2-bg2-f71f534a2a73d465.webp" srcset="https://pixso.net/assets/media/module-2-bg2-mobile-0b48683a34-5db76ca429c6ae92.webp 390w, https://pixso.net/assets/media/module-2-bg2-mobile-0b48683a34-5db76ca429c6ae92.webp 780w, https://pixso.net/assets/media/module-2-bg2-f71f534a2a73d465.webp 1280w" sizes="100vw" width="1280" height="370" loading="lazy" decoding="async" fetchpriority="low">
5602                    <div class="module-2__bg-box">
5603                        <div class="module-2__bg-video-box">
5604                            <picture class="module-2__bg-video-poster"><source media="(min-width: 800px)" srcset="https://pixso.net/assets/media/module-2-videocover2-9dfcceaca861c5a8.webp"><source media="(max-width: 799px)" srcset="https://pixso.net/assets/media/module-2-video-cover2-mobile-69301ec904-82f46e054e4ceddc.webp"><img src="https://pixso.net/assets/media/module-2-video-cover2-mobile-69301ec904-82f46e054e4ceddc.webp" alt width="1280" height="720" loading="eager" decoding="async" fetchpriority="high"></picture><video class="module-2__bg-video" loop muted playsinline title="Pixso Design Feature Demo" aria-label="Pixso Design Feature Demo" controlslist="nodownload" data-src="https://pixso.net/assets/media/module-2-demo-2-a336aa577637cdb1.mp4" preload="none" data-click-video="true">
5605                                
5606                            </video><button type="button" class="pixso-demo-play" aria-label="Watch demo">▶ Watch demo</button><noscript><a class="pixso-video-fallback" href="https://pixso.net/assets/media/module-2-demo-2-a336aa577637cdb1.mp4">Watch demo</a></noscript>
5607                        </div>
5608                    </div>
5609                </div>
5610            </div>
5611        </div>
5612    </div>
5613    <!-- 模块3 -->
5614    <div class="home-module module-3">
5615        <div class="home-module__content">
5616            <div class="home-module__mid is-rectangle module-3__container">
5617                <h2 class="module-3__title">Pixso is more than a design tool; it is a "product design collaboration platform" built for teams. By integrating the entire workflow of design, collaboration, and handoff into a single cloud-based tool, it significantly boosts the efficiency and productivity of product design team
5617s.</h2>
5618                <div class="module-3__author scroll-animate-up">
5619                    <img class="avatar" src="https://pixso.net/assets/media/avatar-0c7eb4d09d438425.webp" alt="avatar" loading="lazy">
5620                    <div class="meta">
5621                        <div class="name">Huang Haitao</div>
5622                        <div class="desc">BYD IT Team Member</div>
5623                    </div>
5624                </div>
5625            </div>
5626        </div>
5627    </div>
5628    <!-- 模块4 -->
5629    <div class="home-module module-4">
5630        <div class="home-module__content">
5631            <!-- <div class="home-module__lf"></div> -->
5632            <div class="home-module__mid module-4__container">
5633                <h2 class="module-4__title">Design collaboration for enterprise teams</h2>
5634                <!-- logo网格 -->
5635                <div class="module-4__logos">
5636                    <img class="module-4__logo-item" src="https://pixso.net/assets/media/logo1-8cb09a4e436a1a7b.webp" alt srcset loading="lazy" decoding="async">
5637                    <img class="module-4__logo-item" src="https://pixso.net/assets/media/logo2-26b56f45238e3e22.webp" alt srcset loading="lazy" decoding="async">
5638                    <img class="module-4__logo-item" src="https://pixso.net/assets/media/logo3-5cb4e5fa43cd2617.webp" alt srcset loading="lazy" decoding="async">
5639                    <img class="module-4__logo-item" src="https://pixso.net/assets/media/logo4-94abd330040ef5e1.webp" alt srcset loading="lazy" decoding="async">
5640                    <img class="module-4__logo-item" src="https://pixso.net/assets/media/logo5-12a8c5005a709554.webp" alt srcset loading="lazy" decoding="async">
5641                    <img class="module-4__logo-item" src="https://pixso.net/assets/media/logo6-2bb4e50db4574473.webp" alt srcset loading="lazy" decoding="async">
5642                    <img class="module-4__logo-item" src="https://pixso.net/assets/media/logo7-0599dcf68e23681f.webp" alt srcset loading="lazy" decoding="async">
5643                    <img class="module-4__logo-item" src="https://pixso.net/assets/media/logo8-b923bc5cabb96819.webp" alt srcset loading="lazy" decoding="async">
5644                </div>
5645            </div>
5646            <!-- <div class="home-module__rt"></div> -->
5647        </div>
5648    </div>
5649    <!-- 模块5 -->
5650    <div class="home-module module-5">
5651        <div class="home-module__content">
5652            <!-- <div class="home-module__lf"></div> -->
5653            <div class="home-module__mid module-5__contanier">
5654                <div class="module-5__content">
5655                    <div class="module-5__bubble scroll-animate-up bubble--1">
5656                        <img class="module-5__bubble-icon" src="https://pixso.net/assets/media/info-fc5837b77e19e90c.svg" alt loading="lazy">
5657                        <div class="module-5__bubble-text">
5658                            <span class="module-5__bubble-role">Designers: </span>
5659                            File version control issues, poor communication with developers, and frequent design
5660                            iterations.
5661                        </div>
5662                    </div>
5663                    <div class="module-5__bubble scroll-animate-up bubble--2">
5664                        <img class="module-5__bubble-icon" src="https://pixso.net/assets/media/info-fc5837b77e19e90c.svg" alt loading="lazy">
5665                        <div class="module-5__bubble-text">
5666                            <span class="module-5__bubble-role">Product Managers: </span>
5667                            Frequent requirement changes, collaboration bottlenecks, and difficulty managing PRDs.
5668                        </div>
5669                    </div>
5670
5671                    <div class="module-5__bubble scroll-animate-up bubble--3">
5672                        <img class="module-5__bubble-icon" src="https://pixso.net/assets/media/info-fc5837b77e19e90c.svg" alt loading="lazy">
5673                        <div class="module-5__bubble-text">
5674                            <span class="module-5__bubble-role">Developers: </span>
5675                            Complex version control, integration issues, and difficulty understanding design intent.
5676                        </div>
5677                    </div>
5678                    <div class="module-5__bubble scroll-animate-up bubble--4">
5679                        <img class="module-5__bubble-icon" src="https://pixso.net/assets/media/info-fc5837b77e19e90c.svg" alt loading="lazy">
5680                        <div class="module-5__bubble-text">
5681                            <span class="module-5__bubble-role">Managers: </span>
5682                            Complex project planning, task tracking, and challenges in team collaboration and
5683                            reporting.
5684                        </div>
5685                    </div>
5686
5687                    <div class="module-5__headline">
5688                        <div class="line--strong">You need</div>
5689                        <div class="line--strong">a shared workspace for product design</div>
5690                        <div class="line--strong line--muted">instead of</div>
5691                    </div>
5692                    <p class="module-5__subline">
5693                        ideas lost in docs and chats, constant tool switching, tedious import/export, endless file
5694                        transfers, and chaotic version control.
5695                    </p>
5696                </div>
5697            </div>
5698            <!-- <div class="home-module__rt"></div> -->
5699        </div>
5700    </div>
5701    <!-- 模块6 -->
5702    <div class="home-module module-6">
5703        <div class="home-module__content">
5704            <!-- <div class="home-module__lf"></div> -->
5705            <div class="home-module__mid module-6__contanier border-right-above">
5706                <div class="module-6__content">
5707                    <header class="module-6__header">
5708                        <h2 class="home-module__title scroll-animate-up">
5709                            Connect your <br>product design workflow
5710                        </h2>
5711                        <div class="home-module__subTitle scroll-animate-up">
5712                            Plan interfaces, build prototypes, and share design references with your team in one workspace.
5713                        </div>
5714                        <a class="px-common-btn scroll-animate-up" href="/app/">
5715                            Get started
5716                        </a>
5717                    </header>
5718
5719                    <!-- tabs -->
5720                    <div class="common-module__tabs-boxs scroll-animate-up flex_center">
5721                        <div class="common-module__tabs-lf dotted-top-boder dotted-bottom-boder"></div>
5722                        <div class="common-module__tabs" role="tablist">
5723                            <button class="common-module__tab module-6__tab is-active" role="tab" aria-selected="true" data-tab="planning">
5724                                Product planning
5725                            </button>
5726                            <button class="common-module__tab module-6__tab" role="tab" aria-selected="false" data-tab="docs">
5727                                Requirements
5728                            </button>
5729                            <button class="common-module__tab module-6__tab" role="tab" aria-selected="false" data-tab="ui">
5730                                UI design
5731                            </button>
5732                            <button class="common-module__tab module-6__tab" role="tab" aria-selected="false" data-tab="design-system">
5733                                Design systems
5734                            </button>
5735                            <button class="common-module__tab module-6__tab" role="tab" aria-selected="false" data-tab="interaction">
5736                                Interactive demos
5737                            </button>
5738                            <button class="common-module__tab module-6__tab" role="tab" aria-selected="false" data-tab="handoff">
5739                                Handoff
5740                            </button>
5741                            <button class="common-module__tab module-6__tab" role="tab" aria-selected="false" data-tab="filemgmt">
5742                                File management
5743                            </button>
5744                        </div>
5745                        <div class="common-module__tabs-rt dotted-top-boder dotted-bottom-boder"></div>
5746                    </div>
5747
5748                    <div class="module-6__panels">
5749                        <!-- 产品规划 -->
5750                        <section class="module-6__panel is-active" data-tab="planning" role="tabpanel">
5751                            <div class="module-6__lhs">
5752                                <div class="module-6__intro">
5753                                    <h3 class="module-6__intro-title">
5754                                        Turn inspiration<br>into strategy
5755                                    </h3>
5756                                    <a class="px-common-btn__plain" href="https://pixso.net/pixso-whiteboard/">Explore Pixso
5757                                        whiteboard</a>
5758                                </div>
5759                                <div class="module-6__accordion">
5760                                    <div class="module-6__ac-item is-open">
5761                                        <div class="module-6__ac-header">
5762                                            <span class="module-6__ac-title">Mood boarding</span>
5763                                        </div>
5764                                        <div class="module-6__ac-body">
5765                                            <div class="module-6__ac-body-content">
5766                                                Centralize inspiration, screenshots, and assets from various
5767                                                channels in Pixso whiteboard. Easily categorize, annotate, and
5768                                                filter to build a reusable library of creative ideas.
5769                                            </div>
5770                                        </div>
5771                                    </div>
5772
5773                                    <div class="module-6__ac-item">
5774                                        <div class="module-6__ac-header">
5775                                            <span class="module-6__ac-title">Market & competitive analysis</span>
5776                                        </div>
5777                                        <div class="module-6__ac-body">
5778                                            <div class="module-6__ac-body-content">
5779                                                Integrate market trends and competitor insights to build analysis
5780                                                matrices. Support team annotation and discussion to quickly define
5781                                                your differentiated positioning.
5782                                            </div>
5783                                        </div>
5784                                    </div>
5785                                    <div class="module-6__ac-item">
5786                                        <div class="module-6__ac-header">
5787                                            <span class="module-6__ac-title">User research</span>
5788                                        </div>
5789                                        <div class="module-6__ac-body">
5790                                            <div class="module-6__ac-body-content">
5791                                                Organize user interviews and survey results. Distill pain points and
5792                                                opportunities through visual analysis and real-time team
5793                                                collaboration.
5794                                            </div>
5795                                        </div>
5796                                    </div>
5797                                    <div class="module-6__ac-item">
5798                                        <div class="module-6__ac-header">
5799                                            <span class="module-6__ac-title">Team brainstorming</span>
5800                                        </div>
5801                                        <div class="module-6__ac-body">
5802                                            <div class="module-6__ac-body-content">
5803                                                Support real-time, multi-role co-creation. Use sticky notes,
5804                                                flowcharts, and freeform layouts to quickly aggregate ideas and
5805                                                drive consensus.
5806                                            </div>
5807                                        </div>
5808                                    </div>
5809                                    <div class="module-6__ac-item">
5810                                        <div class="module-6__ac-header">
5811                                            <span class="module-6__ac-title">Product roadmap</span>
5812                                        </div>
5813                                        <div class="module-6__ac-body">
5814                                            <div class="module-6__ac-body-content">
5815                                                Plan product trajectories using timelines or phased structures.
5816                                                Clarify goals, milestones, and owners to give the team a clear view
5817                                                of the future direction.
5818                                            </div>
5819                                        </div>
5820                                    </div>
5821                                </div>
5822                            </div>
5823                            <div class="module-6__rhs">
5824                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel1-3-35c3c29f01429b76.webp" alt="Mood Boarding" loading="lazy" data-index="2">
5825                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel1-2-84d9571ad3346c65.webp" alt="Market & Competitive Analysis" loading="lazy" data-index="1" style="display: none">
5826                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel1-1-01b8443bbee6c563.webp" alt="User Research" loading="lazy" data-index="0" style="display: none">
5827                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel1-4-240df973fbb2edad.webp" alt="Team Brainstorming" loading="lazy" data-index="3" style="display: none">
5828                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel1-5-75b9fefe2ee17843.webp" alt="Product Roadmap" loading="lazy" data-index="4" style="display: none">
5829                            </div>
5830                        </section>
5831
5832                        <!-- 需求梳理 -->
5833                        <section class="module-6__panel" data-tab="docs" role="tabpanel">
5834                            <div class="module-6__lhs">
5835                                <div class="module-6__intro">
5836                                    <h3 class="module-6__intro-title">
5837                                        Visual specs <br>for seamless collaboration
5838                                    </h3>
5839                                    <a class="px-common-btn__plain" href="https://pixso.net/pixso-whiteboard/">Explore Pixso
5840                                        whiteboard</a>
5841                                </div>
5842                                <div class="module-6__accordion">
5843                                    <div class="module-6__ac-item is-open">
5844                                        <div class="module-6__ac-header">
5845                                            <span class="module-6__ac-title">PRDs</span>
5846                                        </div>
5847                                        <div class="module-6__ac-body">
5848                                            <div class="module-6__ac-body-content">
5849                                                Standardize requirement formats, interface fields, and business
5850                                                processes. Rapidly author PRDs using a modular document structure.
5851                                            </div>
5852                                        </div>
5853                                    </div>
5854                                    <div class="module-6__ac-item">
5855                                        <div class="module-6__ac-header">
5856                                            <span class="module-6__ac-title">Mind maps</span>
5857                                        </div>
5858                                        <div class="module-6__ac-body">
5859                                            <div class="module-6__ac-body-content">
5860                                                Deconstruct business processes, user journeys, and functional
5861                                                structures. Break down requirements layer by layer: from user
5862                                                stories to tasks to detailed requirements.
5863                                            </div>
5864                                        </div>
5865                                    </div>
5866                                    <div class="module-6__ac-item">
5867                                        <div class="module-6__ac-header">
5868                                            <span class="module-6__ac-title">Flowcharts</span>
5869                                        </div>
5870                                        <div class="module-6__ac-body">
5871                                            <div class="module-6__ac-body-content">
5872                                                Map product, system, and business workflows with the available shapes. Review each flow with the people involved.
5873                                            </div>
5874                                        </div>
5875                                    </div>
5876                                    <div class="module-6__ac-item">
5877                                        <div class="module-6__ac-header">
5878                                            <span class="module-6__ac-title">Visual Kanban</span>
5879                                        </div>
5880                                        <div class="module-6__ac-body">
5881                                            <div class="module-6__ac-body-content">
5882                                                Combine card views for task assignment, process tracking, and
5883                                                version management to keep requirement progress transparent and
5884                                                visible.
5885                                            </div>
5886                                        </div>
5887                                    </div>
5888                                    <div class="module-6__ac-item">
5889                                        <div class="module-6__ac-header">
5890                                            <span class="module-6__ac-title">Alignment & Consensus</span>
5891                                        </div>
5892                                        <div class="module-6__ac-body">
5893                                            <div class="module-6__ac-body-content">
5894                                                Utilize real-time collaboration, discussion threads, comments, and
5895                                                drawing tools to enable seamless, workshop-style syncs between
5896                                                product, design, and Dev teams.
5897                                            </div>
5898                                        </div>
5899                                    </div>
5900                                </div>
5901                            </div>
5902                            <div class="module-6__rhs">
5903                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel2-1-bc7e521
5903a1e8b8654.webp" alt="PRDs" loading="lazy" data-index="0">
5904                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel2-2-5bc47bb502716d56.webp" alt="Mind Maps" loading="lazy" data-index="1" style="display: none">
5905                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel2-3-80438a092431b01a.webp" alt="Flowcharts" loading="lazy" data-index="2" style="display: none">
5906                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel2-4-3df6d1523bad0410.webp" alt="Visual Kanban" loading="lazy" data-index="3" style="display: none">
5907                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel2-5-af1ad545579ef460.webp" alt="Alignment & Consensus" loading="lazy" data-index="4" style="display: none">
5908                            </div>
5909                        </section>
5910
5911                        <!-- UI设计 -->
5912                        <section class="module-6__panel" data-tab="ui" role="tabpanel">
5913                            <div class="module-6__lhs">
5914                                <div class="module-6__intro">
5915                                    <h3 class="module-6__intro-title">
5916                                        Built for design: <br>an efficient creative environment
5917                                    </h3>
5918                                    <a class="px-common-btn__plain" href="https://pixso.net/ui-design-collaboration/">Explore Pixso UI design</a>
5919                                </div>
5920                                <div class="module-6__accordion">
5921                                    <div class="module-6__ac-item is-open">
5922                                        <div class="module-6__ac-header">
5923                                            <span class="module-6__ac-title">Precision user interface design online</span>
5924                                        </div>
5925                                        <div class="module-6__ac-body">
5926                                            <div class="module-6__ac-body-content">
5927                                                Use the pen tool and vector networks to draw icons, adjust custom shapes, and refine interface graphics.
5928                                            </div>
5929                                        </div>
5930                                    </div>
5931                                    <div class="module-6__ac-item">
5932                                        <div class="module-6__ac-header">
5933                                            <span class="module-6__ac-title">Responsive design</span>
5934                                        </div>
5935                                        <div class="module-6__ac-body">
5936                                            <div class="module-6__ac-body-content">
5937                                                Utilize auto layout and grids. Create designs that automatically
5938                                                resize, fill, or hug their content for dynamic, responsive layouts.
5939                                            </div>
5940                                        </div>
5941                                    </div>
5942                                    <div class="module-6__ac-item">
5943                                        <div class="module-6__ac-header">
5944                                            <span class="module-6__ac-title">Advanced typography</span>
5945                                        </div>
5946                                        <div class="module-6__ac-body">
5947                                            <div class="module-6__ac-body-content">
5948                                                Support for variable fonts, text-on-path, and bidirectional text.
5949                                                Meet the demands of branding, multi-language interfaces, and complex
5950                                                typesetting.
5951                                            </div>
5952                                        </div>
5953                                    </div>
5954                                    <div class="module-6__ac-item">
5955                                        <div class="module-6__ac-header">
5956                                            <span class="module-6__ac-title">Stunning visual effects</span>
5957                                        </div>
5958                                        <div class="module-6__ac-body">
5959                                            <div class="module-6__ac-body-content">
5960                                                Apply layer blurs and background blurs (glassmorphism) to build
5961                                                realistic hierarchy, texture, and depth within your interface.
5962                                            </div>
5963                                        </div>
5964                                    </div>
5965                                    <div class="module-6__ac-item">
5966                                        <div class="module-6__ac-header">
5967                                            <span class="module-6__ac-title">Real-time collaboration</span>
5968                                        </div>
5969                                        <div class="module-6__ac-body">
5970                                            <div class="module-6__ac-body-content">
5971                                                Edit shared files and leave comments beside the design. Sync and editing access depend on your connection and permissions.
5972                                            </div>
5973                                        </div>
5974                                    </div>
5975                                </div>
5976                            </div>
5977                            <div class="module-6__rhs">
5978                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel4-1-fb89a7ef7ee09082.webp" alt="Pixel-perfect UI design" loading="lazy" data-index="0">
5979                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel4-2-882d7433dfff7612.webp" alt="Smart Auto Layout" loading="lazy" data-index="1" style="display: none">
5980                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel4-3-12c329d54ce4c085.webp" alt="Creative typography" loading="lazy" data-index="2" style="display: none">
5981                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel4-4-258e029e9ba4ccea.webp" alt="Graphic effects" loading="lazy" data-index="3" style="display: none">
5982                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel4-5-c17b8bb7b1501234.webp" alt="Real-time Collaboration" loading="lazy" data-index="4" style="display: none">
5983                            </div>
5984                        </section>
5985
5986                        <!-- 设计系统 -->
5987                        <section class="module-6__panel" data-tab="design-system" role="tabpanel">
5988                            <div class="module-6__lhs">
5989                                <div class="module-6__intro">
5990                                    <h3 class="module-6__intro-title">
5991                                        Scalable design systems for teams
5992                                    </h3>
5993                                    <a class="px-common-btn__plain" href="https://pixso.net/design-system/">Explore Pixso design systems</a>
5994                                </div>
5995                                <div class="module-6__accordion">
5996                                    <div class="module-6__ac-item is-open">
5997                                        <div class="module-6__ac-header">
5998                                            <span class="module-6__ac-title">Build your design system</span>
5999                                        </div>
6000                                        <div class="module-6__ac-body">
6001                                            <div class="module-6__ac-body-content">
6002                                                Professional tools including components, design tokens, and styles
6003                                                help
6004                                                teams maintain design consistency across all projects.
6005                                            </div>
6006                                        </div>
6007                                    </div>
6008                                    <div class="module-6__ac-item">
6009                                        <div class="module-6__ac-header">
6010                                            <span class="module-6__ac-title">Style management</span>
6011                                        </div>
6012                                        <div class="module-6__ac-body">
6013                                            <div class="module-6__ac-body-content">
6014                                                Manage shared styles and design tokens for your interface. Review how updates apply to linked elements before developer handoff.
6015                                            </div>
6016                                        </div>
6017                                    </div>
6018                                    <div class="module-6__ac-item">
6019                                        <div class="module-6__ac-header">
6020                                            <span class="module-6__ac-title">Robust components</span>
6021                                        </div>
6022                                        <div class="module-6__ac-body">
6023                                            <div class="module-6__ac-body-content">
6024                                                Create reusable component variants for flexibility without
6025                                                sacrificing consistency. Auto layout ensures elements adjust
6026                                                automatically as content changes.
6027                                            </div>
6028                                        </div>
6029                                    </div>
6030                                    <div class="module-6__ac-item">
6031                                        <div class="module-6__ac-header">
6032                                            <span class="module-6__ac-title">Team library</span>
6033                                        </div>
6034                                        <div class="module-6__ac-body">
6035                                            <div class="module-6__ac-body-content">
6036                                                Publish approved components and styles to a team library. Members with access can reuse these assets in design files.
6037                                            </div>
6038                                        </div>
6039                                    </div>
6040                                    <div class="module-6__ac-item">
6041                                        <div class="module-6__ac-header">
6042                                            <span class="module-6__ac-title">Pixso DSM</span>
6043                                        </div>
6044                                        <div class="module-6__ac-body">
6045                                            <div class="module-6__ac-body-content">
6046                                                Organize reusable components and styles in Pixso DSM. Share design references with developers and review the implementation against your standards.
6047                                            </div>
6048                                        </div>
6049                                    </div>
6050                                </div>
6051                            </div>
6052                            <div class="module-6__rhs">
6053                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel5-1-4699935044bd6ee8.webp" alt="Build Your Design System" loading="lazy" data-index="0">
6054                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel5-2-85824d4dff1a37d8.webp" alt="Style Management" loading="lazy" data-index="1" style="display: none">
6055                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel5-3-86de355466aae8d9.webp" alt="Component application" loading="lazy" data-index="2" style="display: none">
6056                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel5-4-4395518dda4359eb.webp" alt="Team library" loading="lazy" data-index="3" style="display: none">
6057                                <img class="module-6__image" src="https://pixso.net/assets/media/module6-panel5-5-5045049a3b461be0.webp" alt="Pixso DSM" loading="lazy" data-index="4" style="display: none">
6058                            </div>
6059                        </section>
6060
6061                        <!-- 交互演示 -->
6062                        <section class="module-6__panel" data-tab="interaction" role="tabpanel">
6063                            <div class="module-6__lhs">
6064                                <div class="module-6__intro">
6065                                    <h3 class="module-6__intro-title">
6066                                        Seamless interaction<br>& UX design
6067                                    </h3>
6068                                    <a class="px-common-btn__plain" href="https://pixso.net/prototyping/">Explore interactive
6069                                        prototypes</a>
6070                                </div>
6071                                <div class="module-6__accordion">
6072                                    <div class="module-6__ac-item is-open">
6073                                        <div class="module-6__ac-header">
6074                                            <span class="module-6__ac-title">High-fidelity interactions</span>
6075                                        </div>
6076                                        <div class="module-6__ac-body">
6077                                            <div class="module-6__ac-body-content">
6078                                                Define triggers and transitions without leaving the design
6079                                                environment. Simply connect frames to create immersive product
6080                                                demos.
6081                                            </div>
6082                                        </div>
6083                                    </div>
6084                                    <div class="module-6__ac-item">
6085                                        <div class="module-6__ac-header">
6086                                            <span class="module-6__ac-title">Rich transition animations</span>
6087                                        </div>
6088                                        <div class="module-6__ac-body">
6089                                            <div class="module-6__ac-body-content">
6090                                                Supports instant, dissolve, smart animate, push, slide in/out, and
6091                                                more. Easily build polished, professional UX flows.
6092                                            </div>
6093                                        </div>
6094                                    </div>
6095                                    <div class="module-6__ac-item">
6096                                        <div class="module-6__ac-header">
6097                                            <span class="module-6__ac-title">Mobile preview</span>
6098                                        </div>
6099                                        <div class="module-6__ac-body">
6100                                            <div class="module-6__ac-body-content">
6101                                                Preview supported prototype interactions on a mobile device. Review key flows, then test the implemented product separately.
6102                                            </div>
6103                                        </div>
6104                                    </div>
6105                                    <div class="module-6__ac-item">
6106                                        <div class="module-6__ac-header">
6107                                            <span class="module-6__ac-title">Video & Media embeds</span>
6108                                        </div>
6109                                        <div class="module-6__ac-body">
6110                                            <div class="module-6__ac-body-content">
6111                                                Embed videos and GIFs directly into your designs. Showcase dynamic
6112                                                content and media to make demos feel like the real product.
6113                                            </div>
6114                                        </div>
6115                                    </div>
6116                                    <div class="module-6__ac-item">
6117                                        <div class="module-6__ac-header">
6118                                            <span class="module-6__ac-title">Feedback & Comments</span>
6119                                        </div>
6120                                        <div class="module-6__ac-body">
6121                                            <div class="module-6__ac-body-content">
6122                                                Just like in design files, use the 'C' shortcut to comment. Click or
6123                                                select any area in presentation mode to leave feedback instantly.
6124                                            </div>
6125                                        </div>
6126                                    </div>
6127                                </div>
6128                            </div>
6129                            <div class="module-6__rhs">
6130                                <img class="module-6__image" src="https://pixso.net/assets/media/image-jiaohuyanshi-1-15046ce84fb4945a.webp" alt="High-fidelity interactive animations" loading="lazy" data-index="0">
6131                                <img class="module-6__image" src="https://pixso.net/assets/media/image-jiaohuyanshi-2-16e4ada2aeadfdcd.webp" alt="Rich transition animations" loading="lazy" data-index="1" style="display: none">
6132                                <img class="module-6__image" src="https://pixso.net/assets/media/image-jiaohuyanshi-3-84987eb67da65b7b.webp" alt="Custom spring animations" loading="lazy" data-index="2" style="display: none">
6133                                <img class="module-6__image" src="https://pixso.net/assets/media/image-jiaohuyanshi-4-b7ed055e6ebd698f.webp" alt="Video playback" loading="lazy" data-index="3" style="display: none">
6134                                <img class="module-6__image" src="https://pixso.net/assets/media/image-jiaohuyanshi-5-0f9fb22eae3
6134622a8.webp" alt="Experience feedback" loading="lazy" data-index="4" style="display: none">
6135                            </div>
6136                        </section>
6137
6138                        <!-- 交付 -->
6139                        <section class="module-6__panel" data-tab="handoff" role="tabpanel">
6140                            <div class="module-6__lhs">
6141                                <div class="module-6__intro">
6142                                    <h3 class="module-6__intro-title">
6143                                        Professional developer <br>handoff platform
6144                                    </h3>
6145                                    <a class="px-common-btn__plain" href="https://pixso.net/ui-design-collaboration/">Explore Pixso handoff</a>
6146                                </div>
6147                                <div class="module-6__accordion">
6148                                    <div class="module-6__ac-item is-open">
6149                                        <div class="module-6__ac-header">
6150                                            <span class="module-6__ac-title">Agile link handoff</span>
6151                                        </div>
6152                                        <div class="module-6__ac-body">
6153                                            <div class="module-6__ac-body-content">
6154                                                Share a design link with developers and agree on the version to implement. Keep review comments beside the relevant screens.
6155                                            </div>
6156                                        </div>
6157                                    </div>
6158                                    <div class="module-6__ac-item">
6159                                        <div class="module-6__ac-header">
6160                                            <span class="module-6__ac-title">Design specs & code references</span>
6161                                        </div>
6162                                        <div class="module-6__ac-body">
6163                                            <div class="module-6__ac-body-content">
6164                                                Select supported layers to inspect design values, copy code references, and export assets for developer review.
6165                                            </div>
6166                                        </div>
6167                                    </div>
6168                                    <div class="module-6__ac-item">
6169                                        <div class="module-6__ac-header">
6170                                            <span class="module-6__ac-title">Developer-centric workflow</span>
6171                                        </div>
6172                                        <div class="module-6__ac-body">
6173                                            <div class="module-6__ac-body-content">
6174                                                Pixso offers a dedicated "Dev view" layout with "Ready for dev"
6175                                                sections, tailored specifically to developer workflows and habits.
6176                                            </div>
6177                                        </div>
6178                                    </div>
6179                                    <div class="module-6__ac-item">
6180                                        <div class="module-6__ac-header">
6181                                            <span class="module-6__ac-title">Code for developer review</span>
6182                                        </div>
6183                                        <div class="module-6__ac-body">
6184                                            <div class="module-6__ac-body-content">
6185                                                Export supported code and assets for developer review. Check output against your application requirements before production use.
6186                                            </div>
6187                                        </div>
6188                                    </div>
6189                                    <div class="module-6__ac-item">
6190                                        <div class="module-6__ac-header">
6191                                            <span class="module-6__ac-title">On-canvas annotations</span>
6192                                        </div>
6193                                        <div class="module-6__ac-body">
6194                                            <div class="module-6__ac-body-content">
6195                                                Pin context, design intent, and logic directly to interface
6196                                                elements. Align requirements precisely to boost implementation
6197                                                efficiency and collaboration quality.
6198                                            </div>
6199                                        </div>
6200                                    </div>
6201                                </div>
6202                            </div>
6203                            <div class="module-6__rhs">
6204                                <img class="module-6__image" src="https://pixso.net/assets/media/image-jiaofu-1-90db9760159e0eb0.webp" alt="Agile link handoff" loading="lazy" data-index="0">
6205                                <img class="module-6__image" src="https://pixso.net/assets/media/image-jiaofu-2-93ef77ee06a69f7d.webp" alt="Accurately extract specs and code" loading="lazy" data-index="1" style="display: none">
6206                                <img class="module-6__image" src="https://pixso.net/assets/media/image-jiaofu-3-3ce4051f3a22dc73.webp" alt="Tailored to developer workflows" loading="lazy" data-index="2" style="display: none">
6207                                <img class="module-6__image" src="https://pixso.net/assets/media/image-jiaofu-4-44546bb77e765268.webp" alt="Code for developer review" loading="lazy" data-index="3" style="display: none">
6208                                <img class="module-6__image" src="https://pixso.net/assets/media/image-jiaofu-5-f5f52fa66a650ab3.webp" alt="Page annotations" loading="lazy" data-index="4" style="display: none">
6209                            </div>
6210                        </section>
6211
6212                        <!-- 文件管理 -->
6213                        <section class="module-6__panel" data-tab="filemgmt" role="tabpanel">
6214                            <div class="module-6__lhs">
6215                                <div class="module-6__intro">
6216                                    <h3 class="module-6__intro-title">
6217                                        Centralized cloud management <br>for all assets
6218                                    </h3>
6219                                    <a class="px-common-btn__plain" href="https://pixso.net/ui-design-collaboration/">Browse more design resources from Pixso</a>
6220                                </div>
6221                                <div class="module-6__accordion">
6222                                    <div class="module-6__ac-item is-open">
6223                                        <div class="module-6__ac-header">
6224                                            <span class="module-6__ac-title">Multi-level organization</span>
6225                                        </div>
6226                                        <div class="module-6__ac-body">
6227                                            <div class="module-6__ac-body-content">
6228                                                Organize assets by team, project, folder, and file structure for
6229                                                easy classification and retrieval.
6230                                            </div>
6231                                        </div>
6232                                    </div>
6233                                    <div class="module-6__ac-item">
6234                                        <div class="module-6__ac-header">
6235                                            <span class="module-6__ac-title">Version history</span>
6236                                        </div>
6237                                        <div class="module-6__ac-body">
6238                                            <div class="module-6__ac-body-content">
6239                                                Name design milestones and restore available versions from the timeline. History access and retention depend on the plan.
6240                                            </div>
6241                                        </div>
6242                                    </div>
6243                                    <div class="module-6__ac-item">
6244                                        <div class="module-6__ac-header">
6245                                            <span class="module-6__ac-title">Flexible team management</span>
6246                                        </div>
6247                                        <div class="module-6__ac-body">
6248                                            <div class="module-6__ac-body-content">
6249                                                Map teams to your organizational chart or customize member groups
6250                                                for flexible project management.
6251                                            </div>
6252                                        </div>
6253                                    </div>
6254                                    <div class="module-6__ac-item">
6255                                        <div class="module-6__ac-header">
6256                                            <span class="module-6__ac-title">Shared team assets</span>
6257                                        </div>
6258                                        <div class="module-6__ac-body">
6259                                            <div class="module-6__ac-body-content">
6260                                                Centralized team library for real-time sharing across remote
6261                                                locations. Share enterprise-level components and styles to unify
6262                                                design standards.
6263                                            </div>
6264                                        </div>
6265                                    </div>
6266                                    <div class="module-6__ac-item">
6267                                        <div class="module-6__ac-header">
6268                                            <span class="module-6__ac-title">Global search</span>
6269                                        </div>
6270                                        <div class="module-6__ac-body">
6271                                            <div class="module-6__ac-body-content">
6272                                                Search by keyword to quickly locate files and projects.
6273                                            </div>
6274                                        </div>
6275                                    </div>
6276                                </div>
6277                            </div>
6278                            <div class="module-6__rhs">
6279                                <img class="module-6__image" src="https://pixso.net/assets/media/image-wenjianguanli-1-ee282cebf0b6955f.webp" alt="Multi-level file management" loading="lazy" data-index="0">
6280                                <img class="module-6__image" src="https://pixso.net/assets/media/image-wenjianguanli-2-35bf9ce9d5ab613a.webp" alt="Version history" loading="lazy" data-index="1" style="display: none">
6281                                <img class="module-6__image" src="https://pixso.net/assets/media/image-wenjianguanli-3-20e401b26b2ee502.webp" alt="Highly flexible team management" loading="lazy" data-index="2" style="display: none">
6282                                <img class="module-6__image" src="https://pixso.net/assets/media/image-wenjianguanli-4-941730084b4e4247.webp" alt="Team resources" loading="lazy" data-index="3" style="display: none">
6283                                <img class="module-6__image" src="https://pixso.net/assets/media/image-wenjianguanli-5-d78d06bc3e5b027a.webp" alt="Global search" loading="lazy" data-index="4" style="display: none">
6284                            </div>
6285                        </section>
6286                    </div>
6287                </div>
6288            </div>
6289            <!-- <div class="home-module__rt"></div> -->
6290        </div>
6291    </div>
6292    <!-- 模块7 -->
6293    <div class="home-module module-7">
6294        <div class="home-module__content">
6295            <!-- <div class="home-module__lf"></div> -->
6296            <div class="home-module__mid module-7__content border-horizontal-above">
6297                <!-- 头部区域 -->
6298                <div class="module-7__header">
6299                    <div class="module-7__hero-section">
6300                        <div class="module-7__hero-title scroll-animate-up">
6301                            Build app and website interfaces with a<br>UI design tool
6302                        </div>
6303                        <p class="module-7__hero-desc scroll-animate-up">
6304                            Explore Pixso for interface design, components, and team review. Comparing Figma alternatives? Test supported imports with a copy of your project.
6305                        </p>
6306                        <a class="px-common-btn scroll-animate-up" href="/app/">
6307                            Get started
6308                        </a>
6309                    </div>
6310                </div>
6311
6312                <!-- 中间区域 -->
6313                <div class="module-7__middle">
6314                    <div class="left-slash-bg dotted-top-boder dotted-bottom-boder"></div>
6315                    <div class="right-slash-bg dotted-top-boder dotted-bottom-boder"></div>
6316                    <div class="module-7__item-section border-box-above--no-bottom item-0">
6317                        <div class="module-7__item-section-top">
6318                            <div class="module-7__section-title">Edit interface details</div>
6319                            <p class="module-7__section-desc">
6320                                Use the visual editor to adjust layouts and reusable components. Share design specs and code references for developer review.
6321                            </p>
6322                            <a class="px-common-btn__plain" href="/app/">Explore Pixso UI design</a>
6323                        </div>
6324
6325                        <img class="scroll-animate-up" src="https://pixso.net/assets/media/module-7-item0-41b163e49877e853.webp" alt loading="lazy">
6326                    </div>
6327
6328                    <div class="module-7__items border-box-above">
6329                        <div class="module-7__item-section border-right-above item-1">
6330                            <div class="module-7__item-section-top">
6331                                <div class="module-7__section-title">File compatibility</div>
6332                                <p class="module-7__section-desc">
6333                                    Import supported Figma, Axure, Sketch, XD, and SVG files. Review the result against your source.
6334                                </p>
6335                            </div>
6336                            <img class="scroll-animate-up" src="https://pixso.net/assets/media/module-7-item1-107097dab117cdc9.webp" alt loading="lazy">
6337                        </div>
6338
6339                        <div class="module-7__item-section item-2">
6340                            <div class="module-7__item-section-top">
6341                                <div class="module-7__section-title">Design tokens system</div>
6342                                <p class="module-7__section-desc">
6343                                    Organize design values with tokens and review theme variations across your screens. Share the agreed values with developers.
6344                                </p>
6345                            </div>
6346                            <img class="scroll-animate-up" src="https://pixso.net/assets/media/module-7-item2-02df67b2080350cb.webp" alt loading="lazy">
6347                        </div>
6348                        <div class="module-7__item-section border-box-above--top-right item-3">
6349                            <div class="module-7__item-section-top">
6350                                <div class="module-7__section-title">Auto layout</div>
6351                                <p class="module-7__section-desc">
6352                                    Add layers to an auto layout frame to create responsive, dynamic layouts.
6353                                </p>
6354                            </div>
6355                            <img class="scroll-animate-up" src="https://pixso.net/assets/media/module-7-item3-18ca7785cffbc5d2.webp" alt loading="lazy">
6356                        </div>
6357
6358                        <div class="module-7__item-section border-top-above item-4">
6359                            <div class="module-7__item-section-top">
6360                                <div class="module-7__section-title">Team management</div>
6361                                <p class="module-7__section-desc">
6362                                    Publish styles and components to the team library for members to quickly reuse.
6363                                </p>
6364                            </div>
6365                            <img class="scroll-animate-up" src="https://pixso.net/assets/media/module-7-item4-cc90da4665c5c1ae.webp" alt loading="lazy">
6366                        </div>
6367                    </div>
6368                </div>
6369
6370                <!-- 底部特性列表 -->
6371                <div class="module-7__features scroll-animate-up">
6372                    <div class="module-7__feature">
6373                        <div class="module-7__feature-top">
6374                            <img src="https://pixso.net/assets/media/module-7-icon1-25a43628f84fd578.svg" alt loading="lazy">
6375                            <span>Version history management</span>
6376                        </div>
6377                        <p>
6378                            Use available version history to review changes and restore earlier states. Retention depends on your plan and file access.
6379                        </p>
6380                    </div>
6381                    <div class="module-7__feature">
6382                        <div class="module-7__feature-top">
6383                            <img src="https://pixso.net/assets/media/module-7-icon2-80cd60bd9f732b05.svg" alt loading="lazy">
6384                            <span>Pen tool</span>
6385                        </div>
6386                        <p>Supports smooth curves and path editing, meeting the demands for high-precision UI design
6387                            and vector illustration.</p>
6388                    </div>
6389                    <div class="module-7__feature">
6390                        <div class="module-7__feature-top">
6391                            <img src="https://pixso.net/assets/media/module-7-icon3-9fb0a08e3e46a853.svg" alt loading="lazy">
6392                            <span>Online comments</span>
6393                        </div>
6394                        <p>Team members can add comments anywhere on the canvas to discuss and reply in real time.
6395                        </p>
6396                    </div>
6397                    <div class="module-7__feature">
6398                        <div class="module-7__feature-top">
6399                            <img src="https://pixso.net/assets/media/module-7-icon4-c54d6e7e20791e1c.svg" alt loading="lazy">
6400                            <span>Smart selection</span>
6401                        </div>
6402                        <p>Select multiple objects to intelligently recognize their layout and automatically
6403                            distribute them evenly into rows or columns.</p>
6404                    </div>
6405                </div>
6406            </div>
6407            <!-- <div class="home-module__rt"></div> -->
6408        </div>
6409    </div>
6410
6411    <!-- 模块8 -->
6412    <div class="home-module module-8 border-top-above">
6413        <div class="home-module__content">
6414            <!-- <div class="home-module__lf"></div> -->
6415            <div class="module-8__content">
6416                <div class="module-8__content-bd">
6417                    <div class="module-8__hero-stack">
6418                        <header class="module-8__header">
6419                            <h2 class="module-8__title scroll-animate-up">
6420                                <span class="module-8__title-en">Hello, </span>what can I design for you today<span class="module-8__title-en">?</span>
6421                            </h2>
6422                        </header>
6423
6424                        <div class="module-8__input-container scroll-animate-up">
6425                            <div class="module-8__input-field">
6426                                <textarea rows="1" aria-label="AI design prompt" placeholder="Generate your desired designs with one click, e.g., Blue finance homepage"></textarea>
6427                            </div>
6428                            <div class="module-8__input-toolbar">
6429                                <div class="module-1__tip-trigger module-1__tip-trigger--left module-8__tip-trigger">
6430                                    <button class="module-8__model-btn module-1__model-btn" type="button" aria-describedby="module8ModelTip">
6431                                        <img src="https://pixso.net/assets/media/frame-1c75edae63c58343.svg" alt aria-hidden="true">
6432                                        <span>Smart design system</span>
6433                                    </button>
6434                                    <div class="module-1__unlock-popover module-8__unlock-popover" id="module8ModelTip" role="tooltip">
6435                                        <div class="module-1__popover-copy">
6436                                            <div class="module-1__popover-title">Unlock more features</div>
6437                                            <div class="module-1__popover-desc">Log in to upload images, select design system attachments, and more.</div>
6438                                        </div>
6439                                        <a class="module-1__popover-login" href="https://pixso.net/app/">Log in</a>
6440                                    </div>
6441                                </div>
6442                                <div class="module-8__input-actions">
6443                                    <div class="module-1__tip-trigger module-1__tip-trigger--right module-8__tip-trigger">
6444                                        <button class="module-8__icon-btn module-1__icon-btn" type="button" aria-label="Upload reference image" aria-describedby="module8UploadTip">
6445                                            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
6446                                                <path d="M15.8947 8.94102L15.8947 10.3822C15.8948 10.4634 15.9117 10.5376 15.9455 10.6048C15.9936 10.7036 16.0732 10.7832 16.1719 10.8313C16.2385 10.8648 16.312 10.8817 16.3923 10.882L16.3947 10.882C16.4759 10.882 16.5503 10.8651 16.6175 10.8313C16.7163 10.7831 16.7958 10.7036 16.844 10.6049C16.87
644675 10.5383 16.8944 10.4648 16.8947 10.3845L16.8947 10.382L16.8947 8.94102L18.2896 8.94102C18.3708 8.94099 18.4451 8.92408 18.5123 8.89028C18.611 8.84214 18.6906 8.76256 18.7387 8.66382C18.7722 8.59723 18.7891 8.52379 18.7895 8.44348L18.7895 8.44102C18.7895 8.35981 18.7725 8.28543 18.7387 8.2182C18.6906 8.11948 18.611 8.0399 18.5123 7.99176C18.4457 7.95827 18.3722 7.94135 18.2919 7.94102L18.2895 7.94102L16.8947 7.94102L16.8947 6.49984C16.8947 6.41863 16.8778 6.34441 16.844 6.27718C16.7958 6.17846 16.7163 6.09888 16.6175 6.05074C16.551 6.01725 16.4775 6.00033 16.3972 6L16.3947 6C16.3135 6.00001 16.2392 6.01693 16.1719 6.05074C16.0732 6.09888 15.9936 6.17846 15.9455 6.2772C15.912 6.34377 15.8951 6.41722 15.8947 6.49754L15.8947 6.5L15.8947 7.94102L14.4998 7.94102C14.4186 7.94103 14.3444 7.95795 14.2772 7.99176C14.1785 8.0399 14.0989 8.11948 14.0507 8.2182C14.0172 8.28479 14.0003 8.35824 14 8.43856L14 8.44102C14 8.52223 14.0169 8.59661 14.0507 8.66382C14.0989 8.76256 14.1785 8.84214 14.2772 8.89028C14.3438 8.92376 14.4172 8.94067 14.4975 8.94102L14.5 8.94102L15.8947 8.94102ZM7.31466 17.9898L13.515 12.2323C13.6533 12.1039 13.8041 12.0064 13.9675 11.9397C14.1308 11.873 14.307 11.8371 14.4955 11.832C14.6841 11.827 14.8618 11.8534 15.0285 11.9112C15.1953 11.9691 15.3511 12.0584 15.496 12.1791L17.5322 13.876C17.6881 14.0059 17.8051 14.1541 17.883 14.3205C17.9609 14.4869 18 14.6717 18 14.8747L18 16.5C18 16.8451 17.939 17.1649 17.817 17.4595C17.695 17.7542 17.5118 18.0237 17.2678 18.2678C17.0237 18.5118 16.7544 18.6949 16.4597 18.8169C16.1651 18.9389 15.8451 19 15.5 19L7.5 19C7.15489 19 6.83505 18.939 6.54046 18.817C6.24585 18.695 5.97631 18.5118 5.73224 18.2678C5.48817 18.0237 5.30512 17.7544 5.18308 17.4597C5.06108 17.1652 5 16.8451 5 16.5L5 8.5C5 8.15489 5.061 7.83505 5.183 7.54046C5.30504 7.24585 5.48817 6.97631 5.73224 6.73224C5.97631 6.48817 6.24565 6.30512 6.54026 6.18308C6.83485 6.06108 7.15489 6 7.5 6L12.5 6C12.5691 6 12.6331 6.01223 12.6921 6.03668C12.7025 6.04099 12.7127 6.04567 12.7228 6.05074C12.8215 6.09888 12.9011 6.17846 12.9493 6.2772C12.9543 6.28728 12.959 6.29752 12.9633 6.30792C12.9878 6.36684 13 6.43081 13 6.49984L13 6.50246C12.9997 6.57066 12.9875 6.63391 12.9633 6.6922C12.959 6.70256 12.9543 6.71276 12.9493 6.7228C12.9011 6.82154 12.8215 6.90112 12.7228 6.94926C12.7127 6.95433 12.7025 6.95901 12.6921 6.96332C12.6331 6.98777 12.5691 7 12.5 7L7.5 7C7.29289 7 7.10095 7.03661 6.92418 7.10984C6.74741 7.18305 6.58579 7.29289 6.43934 7.43934C6.29289 7.58579 6.18305 7.74741 6.10984 7.92418C6.03661 8.10095 6 8.29289 6 8.5L6 16.5C6 16.7071 6.03661 16.899 6.10984 17.0758C6.18305 17.2525 6.29295 17.4143 6.43934 17.5607C6.58579 17.7071 6.74741 17.8169 6.92418 17.8902C7.04702 17.941 7.17718 17.9742 7.31466 17.9898ZM9.25 8.5C9.49164 8.5 9.71558 8.54271 9.92182 8.62814C10.128 8.71357 10.3166 8.84171 10.4874 9.01256C10.6583 9.18337 10.7864 9.37188 10.8718 9.57808C10.9572 9.78431 11 10.0084 11 10.25C11 10.4916 10.9573 10.7156 10.8718 10.9218C10.7864 11.128 10.6583 11.3166 10.4874 11.4874C10.3166 11.6583 10.128 11.7864 9.92182 11.8718C9.71558 11.9573 9.49164 12 9.25 12C9.0084 12 8.78449 11.9573 8.57826 11.8719C8.37206 11.7865 8.18337 11.6583 8.01256 11.4874C7.84171 11.3166 7.71357 11.128 7.62814 10.9218C7.54271 10.7156 7.5 10.4916 7.5 10.25C7.5 10.0084 7.54271 9.78441 7.62814 9.57816C7.71357 9.37193 7.84171 9.1834 8.01256 9.01256C8.1834 8.84171 8.37193 8.71357 8.57816 8.62814C8.78441 8.54271 9.00836 8.5 9.25 8.5ZM9.25 9.5C9.14644 9.5 9.05047 9.51831 8.96208 9.55492C8.87373 9.59153 8.79287 9.64648 8.71968 9.71968C8.64648 9.79287 8.59157 9.87363 8.55496 9.96198C8.51835 10.0504 8.5 10.1464 8.5 10.25C8.5 10.3535 8.5183 10.4495 8.5549 10.5379C8.59151 10.6263 8.64647 10.7071 8.71968 10.7803C8.79281 10.8535 8.87353 10.9083 8.96182 10.945C9.05021 10.9816 9.14644 11 9.25 11C9.35351 11 9.44944 10.9817 9.5378 10.9451C9.62611 10.9085 9.70717 10.8535 9.78034 10.7803C9.8535 10.7072 9.90839 10.6264 9.945 10.5381C9.98159 10.4497 10 10.3535 10 10.25C10 10.1464 9.98169 10.0505 9.94508 9.96208C9.90847 9.87379 9.85347 9.79281 9.78034 9.71968C9.70713 9.64647 9.62633 9.59155 9.53794 9.55494C9.44957 9.51834 9.35353 9.5 9.25 9.5ZM15.5 18L8.77326 18L14.1955 12.9651C14.303 12.8653 14.4117 12.8139 14.5218 12.811C14.6318 12.808 14.7432 12.8535 14.8558 12.9474L16.8921 14.6442C16.928 14.6742 16.955 14.7084 16.973 14.7468C16.991 14.7853 17 14.8279 17 14.8747L17 16.5C17 16.7071 16.9634 16.899 16.8902 17.0758C16.8169 17.2526 16.7071 17.4142 16.5607 17.5607C16.4142 17.7071 16.2526 17.8169 16.0758 17.8902C15.899 17.9634 15.7071 18 15.5 18Z" fill="currentColor" fill-rule="evenodd"/>
6447                                            </svg>
6448                                        </button>
6449                                        <div class="module-1__unlock-popover module-8__unlock-popover" id="module8UploadTip" role="tooltip">
6450                                            <div class="module-1__popover-copy">
6451                                                <div class="module-1__popover-title">Unlock more features</div>
6452                                                <div class="module-1__popover-desc">Log in to upload images, select design system attachments, and more.</div>
6453                                            </div>
6454                                            <a class="module-1__popover-login" href="https://pixso.net/app/">Log in</a>
6455                                        </div>
6456                                    </div>
6457                                    <button class="module-8__send-btn module-8__send-btn--disabled" type="button" aria-label="Send" aria-disabled="true">
6458                                        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
6459                                            <path d="M3.57254 6.29404L7.57254 2.54404C7.85751 2.27687 8.14249 2.27687 8.42746 2.54404L12.4275 6.29404C12.7314 6.57901 12.7409 6.87349 12.456 7.17746C12.171 7.48144 11.8765 7.49094 11.5725 7.20596L8.625 4.44272L8.625 13C8.625 13.4167 8.41667 13.625 8 13.625C7.58333 13.625 7.375 13.4167 7.375 13L7.375 4.44272L4.42746 7.20596C4.12349 7.49094 3.82901 7.48144 3.54404 7.17746C3.25906 6.87349 3.26856 6.57901 3.57254 6.29404Z" fill="black" fill-opacity="0.3"/>
6460                                        </svg>
6461                                    </button>
6462                                </div>
6463                            </div>
6464                        </div>
6465
6466                        <div class="module-8__main-bd">
6467                            <div class="module-8__preview-card scroll-animate-up">
6468                                <div class="module-8__preview-header">
6469                                    <img class="module-8__preview-dots" src="https://pixso.net/assets/media/frame1287208601-8447367c79b815c8.svg" alt aria-hidden="true">
6470                                    <div class="module-8__preview-actions" aria-hidden="true">
6471                                        <span class="module-8__preview-action">
6472                                            <img src="https://pixso.net/assets/media/group1000002145-c55d4ba7a0df1d80.svg" alt>
6473                                        </span>
6474                                        <span class="module-8__preview-action">
6475                                            <span class="module-8__preview-copy">
6476                                                <img src="https://pixso.net/assets/media/vector1826-1e1704aa73e861ce.svg" alt>
6477                                            </span>
6478                                        </span>
6479                                    </div>
6480                                </div>
6481                                <div class="module-8__preview-body">
6482                                    <div class="module-8__preview-media">
6483                                        <video class="module-8__preview-image" poster="https://pixso.net/assets/media/module-8-shipin-poster-9abd15305d3039b3.webp" loop muted playsinline data-src="https://pixso.net/assets/media/module-8-demo-en-b0fc881a92710dea.mp4" preload="none" data-click-video="true"></video><button type="button" class="pixso-demo-play" aria-label="Watch demo">▶ Watch demo</button><noscript><a class="pixso-video-fallback" href="https://pixso.net/assets/media/module-8-demo-en-b0fc881a92710dea.mp4">Watch demo</a></noscript>
6484                                        <img class="module-8__preview-play" src="https://pixso.net/assets/media/play-edbdb8545c628ab1.svg" alt aria-hidden="true">
6485                                    </div>
6486                                </div>
6487                            </div>
6488                        </div>
6489                    </div>
6490                </div>
6491            </div>
6492            <!-- <div class="home-module__rt"></div> -->
6493        </div>
6494    </div>
6495    <!-- 模块9 -->
6496    <div class="home-module module-9">
6497        <div class="home-module__content">
6498            <!-- <div class="home-module__lf"></div> -->
6499            <div class="home-module__mid module-9__container">
6500                <div class="module-9__content">
6501                    <header class="module-9__header">
6502                        <h2 class="home-module__title scroll-animate-up">
6503                            Built for designers, developers, <br>and everyone in between
6504                        </h2>
6505                    </header>
6506
6507                    <!-- tabs -->
6508                    <div class="common-module__tabs-boxs module-9__tabs-boxs scroll-animate-up flex_center">
6509                        <div class="common-module__tabs-lf dotted-top-boder dotted-bottom-boder"></div>
6510                        <div class="common-module__tabs module-9-tabs" role="tablist">
6511                            <button class="common-module__tab module-9__tab is-active" role="tab" aria-selected="true" data-tab="product">
6512                                Product manager
6513                            </button>
6514                            <button class="common-module__tab module-9__tab" role="tab" aria-selected="false" data-tab="designer">
6515                                Designer
6516                            </button>
6517                            <button class="common-module__tab module-9__tab" role="tab" aria-selected="false" data-tab="operation">
6518                                Operations
6519                            </button>
6520                            <button class="common-module__tab module-9__tab" role="tab" aria-selected="false" data-tab="developer">
6521                                Developer
6522                            </button>
6523                            <button class="common-module__tab module-9__tab" role="tab" aria-selected="false" data-tab="manager">
6524                                Manager
6525                            </button>
6526                        </div>
6527                        <div class="common-module__tabs-rt dotted-top-boder dotted-bottom-boder"></div>
6528                    </div>
6529
6530                    <div class="module-9__panels">
6531                        <!-- 产品经理 -->
6532                        <section class="module-9__panel is-active" role="tabpanel" data-panel="product">
6533                            <div class="module-9__lhs">
6534                                <div class="module-9__intro">
6535                                    <div class="module-9__intro-title">
6536                                        Fast and easy prototyping with <br>smart components
6537                                    </div>
6538                                    <p class="module-9__intro-desc">
6539                                        Reuse components to build prototype screens, connect interactions, and review the intended user flow with stakeholders.
6540                                    </p>
6541                                    <a class="px-common-btn__plain" href="/app/">Get started for
6542                                        free</a>
6543                                </div>
6544                                <div class="module-9__stats">
6545                                    <div class="module-9__stat-item">
6546                                        <div class="module-9__stat-number"><span style="font-size:24px;line-height:1.25">Plan</span></div><p class="module-9__stat-label">prototype a user flow</p>
6547                                    </div>
6548                                    <div class="module-9__stat-item">
6549                                        <div class="module-9__stat-number"><span style="font-size:24px;line-height:1.25">Reuse</span></div><p class="module-9__stat-label">shared design components</p>
6550                                    </div>
6551                                    <div class="module-9__stat-item">
6552                                        <div class="module-9__stat-number"><span style="font-size:24px;line-height:1.25">Share</span></div><p class="module-9__stat-label">review a linked prototype</p>
6553                                    </div>
6554                                </div>
6555                            </div>
6556                            <div class="module-9__rhs">
6557                                <img class="module-9__image" src="https://pixso.net/assets/media/image-juese-1-a2595c6df8bc1bc9.webp" alt="Product manager preview" loading="lazy">
6558                            </div>
6559                        </section>
6560                        <!-- 设计师 -->
6561                        <section class="module-9__panel" role="tabpanel" data-panel="designer">
6562                            <div class="module-9__lhs">
6563                                <div class="module-9__intro">
6564                                    <div class="module-9__intro-title">
6565                                        Review and refine interface ideas
6566                                    </div>
6567                                    <p class="module-9__intro-desc">
6568                                        Develop ideas into interface drafts. Reuse shared styles, discuss changes, and refine the next version with your team.
6569                                    </p>
6570                                    <a class="px-common-btn__plain" href="/app/">Get started for
6571                                        free</a>
6572                                </div>
6573                                <div class="module-9__stats">
6574                                    <div class="module-9__stat-item">
6575                                        <div class="module-9__stat-number"><span style="font-size:24px;line-height:1.25">Align</span></div><p class="module-9__stat-label">shared visual standards</p>
6576                                    </div>
6577                                    <div class="module-9__stat-item">
6578                                        <div class="module-9__stat-number"><span style="font-size:24px;line-height:1.25">Review</span></div><p class="module-9__stat-label">comments in context</p>
6579                                    </div>
6580                                    <div class="module-9__stat-item">
6581                                        <div class="module-9__stat-number"><span style="font-size:24px;line-height:1.25">Iterate</span></div><p class="module-9__stat-label">refine the next version</p>
6582                                    </div>
6583                                </div>
6584                            </div>
6585                            <div class="module-9__rhs">
6586                                <img class="module-9__image" src="https://pixso.net/assets/media/image-juese-2-0b1b7e54f8874452.webp" alt="Designer preview" loading="lazy">
6587                            </div>
6588                        </section>
6589
6590                        <!-- 运营 -->
6591                        <section class="module-9__panel" role="tabpanel" data-panel="operation">
6592                            <div class="module-9__lhs">
6593                                <div class="module-9__intro">
6594                                    <div class="module-9__intro-title">
6595                                        Track progress <br>& streamline operations
6596                                    </div>
6597                                    <p class="module-9__intro-desc">
6598                                        Participate in the full product lifecycle online. Review, give feedback on, audit,
6599                                        and update operational content in real time.
6600                                    </p>
6601                                    <a class="px-common-btn__plain" href="/app/">Get started for
6602                                        free</a>
6603                                </div>
6604                                <div class="module-9__stats">
6605                                    <div class="module-9__stat-item">
6606                                        <div class="module-9__stat-number"><span style="font-size:24px;line-height:1.25">Track</span></div><p class="module-9__stat-label">project work in one place</p>
6607                                    </div>
6608                                    <div class="module-9__stat-item">
6609                                        <div class="module-9__stat-number"><span style="font-size:24px;line-height:1.25">Assign</span></div><p class="module-9__stat-label">clear team responsibilities</p>
6610                                    </div>
6611                                    <div class="module-9__stat-item">
6612                                        <div class="module-9__stat-number"><span style="font-size:24px;line-height:1.25">Discuss</span></div><p class="module-9__stat-label">feedback beside the design</p>
6613                                    </div>
6614                                </div>
6615                            </div>
6616                            <div class="module-9__rhs">
6617                                <img class="module-9__image" src="https://pixso.net/assets/media/image-juese-3-c8f8376765e6c798.webp" alt="Operations preview" loading="lazy">
6618                            </div>
6619                        </section>
6620
6621                        <!-- 开发 -->
6622                        <section class="module-9__panel" role="tabpanel" data-panel="developer">
6623                            <div class="module-9__lhs">
6624                                <div class="module-9__intro">
6625                                    <div class="module-9__intro-title">
6626                                        Inspect designs for developer handoff
6627                                    </div>
6628                                    <p class="module-9__intro-desc">
6629                                        Inspect supported layers and copy available code references. Developers should check behavior, accessibility, and integration before release.
6630                                    </p>
6631                                    <a class="px-common-btn__plain" href="/app/">Get started for
6632                                        free</a>
6633                                </div>
6634                                <div class="module-9__stats">
6635                                    <div class="module-9__stat-item">
6636                                        <div class="module-9__stat-number"><span style="font-size:24px;line-height:1.25">Inspect</span></div><p class="module-9__stat-label">specifications and assets</p>
6637                                    </div>
6638                                    <div class="module-9__stat-item">
6639                                        <div class="module-9__stat-number"><span style="font-size:24px;line-height:1.25">Export</span></div><p class="module-9__stat-label">supported code and assets</p>
6640                                    </div>
6641                                    <div class="module-9__stat-item">
6642                                        <div class="module-9__stat-number"><span style="font-size:24px;line-height:1.25">Review</span></div><p class="module-9__stat-label">implementation details</p>
6643                                    </div>
6644                                </div>
6645                            </div>
6646                            <div class="module-9__rhs">
6647                                <img class="module-9__image" src="https://pixso.net/assets/media/image-juese-4-ea2a98c7ed84241a.webp" alt="Developer preview" loading="lazy">
6648                            </div>
6649                        </section>
6650
6651                        <!-- 管理者 -->
6652                        <section class="module-9__panel" role="tabpanel" data-panel="manager">
6653                            <div class="module-9__lhs">
6654                                <div class="module-9__intro">
6655                                    <div class="module-9__intro-title">
6656                                        Manage design work across your team
6657                                    </div>
6658                                    <p class="module-9__intro-desc">
6659                                        Organize design files, agree on workspace permissions, and review shared assets as your product takes shape.
6660                                    </p>
6661                                    <a class="px-common-btn__plain" href="/app/">Get started for
6662                                        free</a>
6663                                </div>
6664                                <div class="module-9__stats">
6665                                    <div class="module-9__stat-item">
6666                                        <div class="module-9__stat-number"><span style="font-size:24px;line-height:1.25">Roles</span></div><p class="module-9__stat-label">workspace permissions</p>
6667                                    </div>
6668                                    <div class="module-9__stat-item">
6669                                        <div class="module-9__stat-number"><span style="font-size:24px;line-height:1.25">Assets</span></div><p class="module-9__stat-label">shared team libraries</p>
6670                                    </div>
6671                                    <div class="module-9__stat-item">
6672                                        <div class="module-9__stat-number"><span style="font-size:24px;line-height:1.25">Notes</span></div><p class="module-9__stat-label">feedback for collaborators</p>
6673                                    </div>
6674                                </div>
6675                            </div>
6676                            <div class="module-9__rhs">
6677                                <img class="module-9__image" src="https://pixso.net/assets/media/image-juese-5-ca9c779384fa546f.webp" alt="Manager preview" loading="lazy">
6678                            </div>
6679                        </section>
6680                    </div>
6681                </div>
6682            </div>
6683            <!-- <div class="home-module__rt"></div> -->
6684        </div>
6685    </div>
6686    <!-- 模块10 -->
6687    <div class="home-module module-10">
6688        <div class="home-module__content">
6689            <!-- <div class="home-module__lf"></div> -->
6690            <div class="home-module__mid module-10__container">
6691                <div class="module-10__content">
6692                    <header class="module-10__header">
6693                        <h2 class="home-module__title scroll-animate-up">
6694                            Design resources: <br>find a starting point
6694
6695                        </h2>
6696                    </header>
6697
6698                    <!-- tabs -->
6699                    <div class="common-module__tabs-boxs module-10__tabs-boxs scroll-animate-up flex_center" style="display: none">
6700                        <div class="common-module__tabs-lf dotted-top-boder dotted-bottom-boder"></div>
6701                        <div class="common-module__tabs module-10-tabs" role="tablist">
6702                            <button class="common-module__tab module-10__tab is-active" role="tab" aria-selected="true" data-tab="recommands">
6703                                Trending
6704                            </button>
6705                            <button class="common-module__tab module-10__tab" role="tab" aria-selected="false" data-tab="app">
6706                                Mobile apps
6707                            </button>
6708                            <button class="common-module__tab module-10__tab" role="tab" aria-selected="false" data-tab="design">
6709                                Web design
6710                            </button>
6711                            <button class="common-module__tab module-10__tab" role="tab" aria-selected="false" data-tab="systems">
6712                                Design systems
6713                            </button>
6714                            <button class="common-module__tab module-10__tab" role="tab" aria-selected="false" data-tab="icon">
6715                                Icons
6716                            </button>
6717                            <button class="common-module__tab module-10__tab" role="tab" aria-selected="false" data-tab="paint">
6718                                Illustrations
6719                            </button>
6720                        </div>
6721                        <div class="common-module__tabs-rt dotted-top-boder dotted-bottom-boder"></div>
6722                    </div>
6723                    <!-- 设计系统 -->
6724                    <div class="module-10__panels">
6725                        <!-- 默认展示recommands内容,有利于SEO -->
6726                        <section class="module-10__panel scroll-animate-up is-active" role="tabpanel">
6727                            <div class="module-10__grid">
6728                                <a class="module-10__card" href="https://pixso.net/community/file/pzx8b-OuoNke2efKBase3g" target="_blank">
6729                                    <div class="module-10__card-image">
6730                                        <img src="https://pixso.net/assets/media/image-remen-1-31a8405a1c77e208.webp" alt="Apple CarPlay design system" loading="lazy">
6731                                    </div>
6732                                    <div class="module-10__card-content">
6733                                        <div class="module-10__card-title">Apple CarPlay design system</div>
6734                                        <p class="module-10__card-desc">Design system</p>
6735                                    </div>
6736                                </a>
6737                                <a class="module-10__card" href="https://pixso.net/community/file/BCAaRafsJUozYGzg1Tp59Q" target="_blank">
6738                                    <div class="module-10__card-image">
6739                                        <img src="https://pixso.net/assets/media/image-remen-2-79e21dda2e7e7b02.webp" alt="Material 3 Design Kit" loading="lazy">
6740                                    </div>
6741                                    <div class="module-10__card-content">
6742                                        <div class="module-10__card-title">Material 3 Design Kit</div>
6743                                        <p class="module-10__card-desc">Design system</p>
6744                                    </div>
6745                                </a>
6746                                <a class="module-10__card" href="https://pixso.net/community/file/t7psZwK0AjPT4IWyvmMDIQ" target="_blank">
6747                                    <div class="module-10__card-image">
6748                                        <img src="https://pixso.net/assets/media/image-remen-3-887cf6b204407f55.webp" alt="Almaren chat UI kit" loading="lazy">
6749                                    </div>
6750                                    <div class="module-10__card-content">
6751                                        <div class="module-10__card-title">Almaren chat UI kit</div>
6752                                        <p class="module-10__card-desc">Mobile app</p>
6753                                    </div>
6754                                </a>
6755                                <a class="module-10__card" href="https://pixso.net/community/file/-mf6JYpLGEDm2WwWpAmgpA" target="_blank">
6756                                    <div class="module-10__card-image">
6757                                        <img src="https://pixso.net/assets/media/image-remen-4-f9c16483960438b9.webp" alt="Linear-style web visual
6757s" loading="lazy">
6758                                    </div>
6759                                    <div class="module-10__card-content">
6760                                        <div class="module-10__card-title">Linear-style web visuals</div>
6761                                        <p class="module-10__card-desc">Web design</p>
6762                                    </div>
6763                                </a>
6764                                <a class="module-10__card" href="https://pixso.net/community/file/CpEqaBMsnJJkWs8WyLbcmA" target="_blank">
6765                                    <div class="module-10__card-image">
6766                                        <img src="https://pixso.net/assets/media/image-remen-5-8c8d2c931d1d6298.webp" alt="ByteDance arco design system" loading="lazy">
6767                                    </div>
6768                                    <div class="module-10__card-content">
6769                                        <div class="module-10__card-title">ByteDance arco design system</div>
6770                                        <p class="module-10__card-desc">Design system</p>
6771                                    </div>
6772                                </a>
6773                                <a class="module-10__card" href="https://pixso.net/community/file/vRFafeEEePNb_nVoCkQwQA" target="_blank">
6774                                    <div class="module-10__card-image">
6775                                        <img src="https://pixso.net/assets/media/image-remen-6-942b318dad92b984.webp" alt="HarmonyOS component library" loading="lazy">
6776                                    </div>
6777                                    <div class="module-10__card-content">
6778                                        <div class="module-10__card-title">HarmonyOS component library</div>
6779                                        <p class="module-10__card-desc">Design system</p>
6780                                    </div>
6781                                </a>
6782                                <a class="module-10__card" href="https://pixso.net/community/file/2wTRVgXdAngzsQQ35l7i-A" target="_blank">
6783                                    <div class="module-10__card-image">
6784                                        <img src="https://pixso.net/assets/media/image-remen-7-a23b4fc176974c8b.webp" alt="iOS and iPadOS 26" loading="lazy">
6785                                    </div>
6786                                    <div class="module-10__card-content">
6787                                        <div class="module-10__card-title">iOS and iPadOS 26</div>
6788                                        <p class="module-10__card-desc">Design system</p>
6789                                    </div>
6790                                </a>
6791                                <a class="module-10__card" href="https://pixso.net/community/file/-0tQKVHDVFjoyeDaO3w6Ew" target="_blank">
6792                                    <div class="module-10__card-image">
6793                                        <img src="https://pixso.net/assets/media/image-remen-8-a663fcd8bc519a48.webp" alt="3D avatar assets" loading="lazy">
6794                                    </div>
6795                                    <div class="module-10__card-content">
6796                                        <div class="module-10__card-title">3D avatar assets</div>
6797                                        <p class="module-10__card-desc">Illustrations</p>
6798                                    </div>
6799                                </a>
6800                                <a class="module-10__card" href="https://pixso.net/community/file/OUKTLv9L24f2mYI-7M_NUw" target="_blank">
6801                                    <div class="module-10__card-image">
6802                                        <img src="https://pixso.net/assets/media/image-remen-9-74e95bc012d6c23c.webp" alt="Fitness app UI kit" loading="lazy">
6803                                    </div>
6804                                    <div class="module-10__card-content">
6805                                        <div class="module-10__card-title">Fitness app UI kit</div>
6806                                        <p class="module-10__card-desc">Mobile app</p>
6807                                    </div>
6808                                </a>
6809                                <a class="module-10__card" href="https://pixso.net/community/file/vDv1vRaXOFz7cfQ5ShcC0A" target="_blank">
6810                                    <div class="module-10__card-image">
6811                                        <img src="https://pixso.net/assets/media/image-remen-10-c7944e9cd732b096.webp" alt="Finance app UI kit" loading="lazy">
6812                                    </div>
6813                                    <div class="module-10__card-content">
6814                                        <div class="module-10__card-title">Finance app UI kit</div>
6815                                        <p class="module-10__card-desc">Mobile app</p>
6816                                    </div>
6817                                </a>
6818                                <a class="module-10__card" href="https://pixso.net/community/file/5rVlYJY7F5tq--6PQ6I7Sg" target="_blank">
6819                                    <div class="module-10__card-image">
6820                                        <img src="https://pixso.net/assets/media/image-remen-11-3ab24b6a93ca7855.webp" alt="Dashboard UI templates" loading="lazy">
6821                                    </div>
6822                                    <div class="module-10__card-content">
6823                                        <div class="module-10__card-title">Dashboard UI templates</div>
6824                                        <p class="module-10__card-desc">Web design</p>
6825                                    </div>
6826                                </a>
6827                                <div class="module-10__card module-10__card--group">
6828                                    <div class="module-10__card-group-grid">
6829                                        <a class="module-10__card module-10__card--small" href="https://pixso.net/community/file/Eq63tcdp7DLhNSzHwUR9YA" target="_blank">
6830                                            <div class="module-10__card-image">
6831                                                <img src="https://pixso.net/assets/media/image-remen-12-858f953db24ee813.webp" alt="TDesign" loading="lazy">
6832                                            </div>
6833                                            <div class="module-10__card-content">
6834                                                <div class="module-10__card-title">TDesign</div>
6835                                                <p class="module-10__card-desc">Design system</p>
6836                                            </div>
6837                                        </a>
6838                                        <a class="module-10__card module-10__card--small" href="https://pixso.net/community/file/MwjP6ll6hJNDfYpYE7fvXw" target="_blank">
6839                                            <div class="module-10__card-image">
6840                                                <img src="https://pixso.net/assets/media/image-remen-13-33a9fe0af85202cd.webp" alt="Glassmorphism icons" loading="lazy">
6841                                            </div>
6842                                            <div class="module-10__card-content">
6843                                                <div class="module-10__card-title">Glassmorphism icons</div>
6844                                                <p class="module-10__card-desc">Icon</p>
6845                                            </div>
6846                                        </a>
6847                                        <a class="module-10__card module-10__card--small" href="https://pixso.net/community/file/R8CXYv9rZuUoqacyhdpHqQ" target="_blank">
6848                                            <div class="module-10__card-image">
6849                                                <img src="https://pixso.net/assets/media/image-remen-14-2bf2cf48e127ec0f.webp" alt="Ant Design" loading="lazy">
6850                                            </div>
6851                                            <div class="module-10__card-content">
6852                                                <div class="module-10__card-title">Ant Design</div>
6853                                                <p class="module-10__card-desc">Design system</p>
6854                                            </div>
6855                                        </a>
6856                                        <a class="module-10__card module-10__card--small no-image" href="https://pixso.net/community/home" target="_blank">
6857                                            <div class="module-10__card-image no-image">
6858                                                <img src="https://pixso.net/assets/media/add18-30e4efa36baa3bd2.svg" alt loading="lazy">
6859                                            </div>
6860                                            <div class="module-10__card-content">
6861                                                <div class="module-10__card-title">More</div>
6862                                                <p class="module-10__card-desc"></p>
6863                                            </div>
6864                                        </a>
6865                                    </div>
6866                                    <div class="module-10__card-content">
6867                                        <div class="module-10__card-title">Browse more design resources</div>
6868                                        <p class="module-10__card-desc">Browse community</p>
6869                                    </div>
6870                                </div>
6871                            </div>
6872                        </section>
6873                    </div>
6874
6875                    <!-- 插件系统 -->
6876                    <div class="module-10__plugins dotted-top-boder dotted-bottom-boder">
6877                        <div class="left-slash-bg"></div>
6878                        <div class="right-slash-bg"></div>
6879                        <div class="module-10__plugins-bd">
6880                            <div class="module-10__plugins-header">
6881                                <div class="module-10__plugins-title">Plugins</div>
6882                                <p class="module-10__plugins-desc">
6883                                    Supercharge your designs with powerful plugins directly in the editor.
6884                                </p>
6885                            </div>
6886                            <div class="module-10__plugins-grid">
6887                                <a class="module-10__plugin-card" href="https://pixso.net/plugins/?id=vb_uCarQ4LwU9OuBrotakQ" target="_blank">
6888                                    <div class="module-10__plugin-icon">
6889                                        <img src="https://pixso.net/assets/media/icon-plugin-pixso-to-code-44-71572d23ece18e9c.webp" alt="Pixso to code" loading="lazy">
6890                                    </div>
6891                                    <div class="module-10__plugin-info">
6892                                        <h3 class="module-10__plugin-name">Pixso to code</h3>
6893                                        <p class="module-10__plugin-intro">Generate SwiftUI and HTML code</p>
6894                                    </div>
6895                                </a>
6896                                <a class="module-10__plugin-card" href="https://pixso.net/plugins/?id=K4kyAhP4ZUZWm630tc0faQ" target="_blank">
6897                                    <div class="module-10__plugin-icon">
6898                                        <img src="https://pixso.net/assets/media/icon-plugin-patterna-44-c33038af6e6a5a07.webp" alt="Patterna" loading="lazy">
6899                                    </div>
6900                                    <div class="module-10__plugin-info">
6901                                        <h3 class="module-10__plugin-name">Patterna</h3>
6902                                        <p class="module-10__plugin-intro">Browse app screenshots</p>
6903                                    </div>
6904                                </a>
6905                                <a class="module-10__plugin-card" href="https://pixso.net/plugins/?id=ZQ1nImofnq3TrZDdTu-FnQ" target="_blank">
6906                                    <div class="module-10__plugin-icon">
6907                                        <img src="https://pixso.net/assets/media/icon-plugin-phosphor-icons-44-41387cda9bbf8e4c.webp" alt="Phosphor Icons" loading="lazy">
6908                                    </div>
6909                                    <div class="module-10__plugin-info">
6910                                        <h3 class="module-10__plugin-name">Phosphor Icons</h3>
6911                                        <p class="module-10__plugin-intro">flexible icon family for interfaces</p>
6912                                    </div>
6913                                </a>
6914                                <a class="module-10__plugin-card" href="https://pixso.net/plugins/?id=ACqFBwR0iPewo2AmpFRwiQ" target="_blank">
6915                                    <div class="module-10__plugin-icon">
6916                                        <img src="https://pixso.net/assets/media/icon-plugin-pexels-44-a8a41509092f78f0.webp" alt="Pexels" loading="lazy">
6917                                    </div>
6918                                    <div class="module-10__plugin-info">
6919                                        <h3 class="module-10__plugin-name">Pexels</h3>
6920                                        <p class="module-10__plugin-intro">Website with popular pictures</p>
6921                                    </div>
6922                                </a>
6923                                <a class="module-10__plugin-card" href="https://pixso.net/plugins/?id=uML5rO3SLTPi4ChBsYIHQg" target="_blank">
6924                                    <div class="module-10__plugin-icon">
6925                                        <img src="https://pixso.net/assets/media/icon-plugin-easing-gradient-44-7b1063196d7fd688.webp" alt="Easing gradient" loading="lazy">
6926                                    </div>
6927                                    <div class="module-10__plugin-info">
6928                                        <h3 class="module-10__plugin-name">Easing gradient</h3>
6929                                        <p class="module-10__plugin-intro">Smooth cubic gradients</p>
6930                                    </div>
6931                                </a>
6932                                <a class="module-10__plugin-card" href="https://pixso.net/plugins/?id=ByMMY7jz_53LKIde0SJWHg" target="_blank">
6933                                    <div class="module-10__plugin-icon">
6934                                        <img src="https://pixso.net/assets/media/icon-plugin-3dicons-44-873be3c498f5bdd6.webp" alt="3dicons" loading="lazy">
6935                                    </div>
6936                                    <div class="module-10__plugin-info">
6937                                        <h3 class="module-10__plugin-name">3dicons</h3>
6938                                        <p class="module-10__plugin-intro">Collection of popular 3D icons</p>
6939                                    </div>
6940                                </a>
6941                                <a class="module-10__plugin-card" href="https://pixso.net/plugins/?id=nzQLV7BVFDc6YQ7xozqhZA" target="_blank">
6942                                    <div class="module-10__plugin-icon">
6943                                        <img src="https://pixso.net/assets/media/icon-plugin-tokens-studio-44-61935a9a263a048a.webp" alt="Tokens Studio" loading="lazy">
6944                                    </div>
6945                                    <div class="module-10__plugin-info">
6946                                        <h3 class="module-10__plugin-name">Tokens Studio</h3>
6947                                        <p class="module-10__plugin-intro">Use Tokens in your design files</p>
6948                                    </div>
6949                                </a>
6950                                <a class="module-10__plugin-card" href="https://pixso.net/plugins/?id=adfpoYjS7I0VpIJ4W55Vkg" target="_blank">
6951                                    <div class="module-10__plugin-icon">
6952                                        <img src="htt
6952ps://pixso.net/assets/media/icon-plugin-img-to-vector-44-305fdd6521135dad.webp" alt="Img to vector" loading="lazy">
6953                                    </div>
6954                                    <div class="module-10__plugin-info">
6955                                        <h3 class="module-10__plugin-name">Img to vector</h3>
6956                                        <p class="module-10__plugin-intro">Img to vector</p>
6957                                    </div>
6958                                </a>
6959                                <a class="module-10__plugin-card" href="https://pixso.net/plugins/?id=JnHu_Arjb9pmtQhXY3xCUQ" target="_blank">
6960                                    <div class="module-10__plugin-icon">
6961                                        <img src="https://pixso.net/assets/media/icon-plugin-beautiful-shadows-44-27dc6c96bc3c3023.webp" alt="Beautiful Shadows" loading="lazy">
6962                                    </div>
6963                                    <div class="module-10__plugin-info">
6964                                        <h3 class="module-10__plugin-name">Beautiful Shadows</h3>
6965                                        <p class="module-10__plugin-intro">Create smooth shadows</p>
6966                                    </div>
6967                                </a>
6968                                <a class="module-10__plugin-card" href="https://pixso.net/plugins/?id=tsKzI8UrOBi1J0XDFVRG3Q" target="_blank">
6969                                    <div class="module-10__plugin-icon">
6970                                        <img src="https://pixso.net/assets/media/icon-plugin-easometric-44-59ddddcdf17d8c87.webp" alt="Easometric" loading="lazy">
6971                                    </div>
6972                                    <div class="module-10__plugin-info">
6973                                        <h3 class="module-10__plugin-name">Easometric</h3>
6974                                        <p class="module-10__plugin-intro">Create isometric layers</p>
6975                                    </div>
6976                                </a>
6977                                <a class="module-10__plugin-card" href="https://pixso.net/plugins/?id=FEZsrPduBY4CLWKYbdRnUQ" target="_blank">
6978                                    <div class="module-10__plugin-icon">
6979                                        <img src="https://pixso.net/assets/media/icon-plugin-remove-bg-44-7f978689dbd55365.webp" alt="Remove BG" loading="lazy">
6980                                    </div>
6981                                    <div class="module-10__plugin-info">
6982                                        <h3 class="module-10__plugin-name">Remove BG</h3>
6983                                        <p class="module-10__plugin-intro">Remove backgrounds</p>
6984                                    </div>
6985                                </a>
6986                                <a class="module-10__plugin-card" href="https://pixso.net/plugins/?id=Ou6l6jRPPHRgHQ_V9B5hOQ" target="_blank">
6987                                    <div class="module-10__plugin-icon">
6988                                        <img src="https://pixso.net/assets/media/icon-plugin-measure-44-e4c4ab7cac051f6b.webp" alt="Measure" loading="lazy">
6989                                    </div>
6990                                    <div class="module-10__plugin-info">
6991                                        <h3 class="module-10__plugin-name">Measure</h3>
6992                                        <p class="module-10__plugin-intro">Easy measurement of sizes</p>
6993                                    </div>
6994                                </a>
6995                            </div>
6996                        </div>
6997                    </div>
6998                </div>
6999            </div>
7000            <!-- <div class="home-module__rt"></div> -->
7001        </div>
7002    </div>
7003    <!-- 模块11 -->
7004    <div class="home-module module-11">
7005        <div class="home-module__content">
7006            <!-- <div class="home-module__lf"></div> -->
7007            <div class="home-module__mid module-11__container">
7008                <div class="module-11__content">
7009                    <header class="module-11__header">
7010                        <h2 class="module-11__title scroll-animate-up">
7011                            Real stories, real success
7012                        </h2>
7013                        <p class="module-11__subtitle scroll-animate-up">
7014                            See how Pixso accelerates design and streamlines workflows for enterprises of all sizes.
7015                        </p>
7016                        <div class="module-11__header-btns scroll-animate-up">
7017                            <a class="px-common-btn" href="/app/">Start designing for free</a>
7018                            <a class="px-common-btn__plain" href="https://pixso.net/private-deployment/">Private
7019                                deployment</a>
7020                        </div>
7021                    </header>
7022
7023                    <!-- 内容面板 -->
7024                    <div class="module-11__panels dotted-top-boder dotted-bottom-boder" id="module11Panels">
7025                        <section class="module-11__panel scroll-animate-up is-active" data-tab role="tabpanel">
7026                            <div class="module-11__panel-left">
7027                                <img src alt class="module-11__panel-image" data-field="bgImage" loading="lazy">
7028                            </div>
7029                            <div class="module-11__panel-right">
7030                                <!-- <div class="module-11__panel-logo">
7031                                    <img src="" alt="" data-field="logo" loading="lazy" />
7032                                </div> -->
7033                                <p class="module-11__panel-text" data-field="text"></p>
7034                                <div class="module-11__panel-stats">
7035                                    <div class="module-11__stat">
7036                                        <div class="module-11__stat-label" data-field="author"></div>
7037                                        <div class="module-11__stat-value" data-field="position"></div>
7038                                    </div>
7039                                    <div class="module-11__stat">
7040                                        <div class="module-11__stat-number" data-field="statNumber"></div>
7041                                        <div class="module-11__stat-desc" data-field="statDesc"></div>
7042                                    </div>
7043                                </div>
7044                            </div>
7045                        </section>
7046                        <!-- 底部tabs -->
7047                        <div class="module-11__tabs scroll-animate-up" id="module11Tabs">
7048                            <!-- 动态生成的tabs按钮 -->
7049                        </div>
7050                    </div>
7051
7052                </div>
7053                <!-- <div class="home-module__rt"></div> -->
7054            </div>
7055        </div>
7056        <!-- 模块12 -->
7057        <div class="home-module module-12">
7058            <div class="home-module__content">
7059                <!-- <div class="home-module__lf"></div> -->
7060                <div class="home-module__mid module-12__container">
7061                    <header class="module-12__header">
7062                        <h2 class="module-12__title scroll-animate-up">
7063                            The all-in-one design platform <br>for organizational efficiency
7064                        </h2>
7065                    </header>
7066                    <div class="module-12__content">
7067                        <div class="left-slash-bg dotted-top-boder dotted-bottom-boder"></div>
7068                        <div class="right-slash-bg dotted-top-boder dotted-bottom-boder"></div>
7069                        <div class="module-12__grid">
7070                            <div class="module-12__card">
7071                                <div class="module-12__card-top">
7072                                    <div class="module-12__card-title">Better, faster collaboration</div>
7073                                    <p class="module-12__card-desc">
7074                                        Work with other designers in a shared project. Use comments and named versions to coordinate review and handoff.
7075                                    </p>
7076                                </div>
7077
7078                                <div class="module-12__card-image scroll-animate-up">
7079                                    <img src="https://pixso.net/assets/media/module-12-item1-1173f38aa912b248.webp" alt="Better, Faster Collaboration" loading="lazy">
7080                                </div>
7081                            </div>
7082
7083                            <div class="module-12__card">
7084                                <div class="module-12__card-top">
7085                                    <div class="module-12__card-title">Seamless handoff</div>
7086                                    <p class="module-12__card-desc">
7087                                        Generate supported interface code and assets as a 
7087starting point. Developers should review accessibility, behavior and integration before release.
7088                                    </p>
7089                                </div>
7090
7091                                <div class="module-12__card-image scroll-animate-up">
7092                                    <img src="https://pixso.net/assets/media/module-12-item2-4542f0680d17fba7.webp" alt="Seamless handoff" loading="lazy">
7093                                </div>
7094                            </div>
7095
7096                            <div class="module-12__card">
7097                                <div class="module-12__card-top">
7098                                    <div class="module-12__card-title">Responsive editing</div>
7099                                    <p class="module-12__card-desc">
7100                                        A responsive workspace for complex design files.
7101                                    </p>
7102                                </div>
7103
7104                                <div class="module-12__card-image scroll-animate-up">
7105                                    <img src="https://pixso.net/assets/media/module-12-item3-26cd2b01c8bba157.webp" alt="Powerful product performance" loading="lazy">
7106                                </div>
7107                            </div>
7108
7109                            <div class="module-12__card">
7110                                <div class="module-12__card-top">
7111                                    <div class="module-12__card-title">AI-empowered efficiency</div>
7112                                    <p class="module-12__card-desc">
7113                                        Use available Pixso AI tools to explore and refine design drafts. Review generated content before adding it to your project.
7114                                    </p>
7115                                </div>
7116
7117                                <div class="module-12__card-image scroll-animate-up">
7118                                    <img src="https://pixso.net/assets/media/module-12-item4-0cd86583cde4a3be.webp" alt="AI-empowered design efficiency" loading="lazy">
7119                                </div>
7120                            </div>
7121                        </div>
7122                    </div>
7123                </div>
7124                <!-- <div class="home-module__rt"></div> -->
7125            </div>
7126        </div>
7127
7128    </div>
7129</div>
7130
7131<footer id="common-footer" class="home-module__content">
7132        <div class="home-module__mid ">
7133            <h2 class='common-footer__title'>
7134                A new experience in efficient product design starts with Pixso
7135            </h2>
7136            <a class='px-common-btn' href="https://pixso.net/app/recent">
7137                Get started
7138            </a>
7139            <div class='common-footer__opera flex_center'>
7140                <div class='common-footer__opera-item '>
7141                    <img src='https://pixso.net/assets/media/footer-item-0-fbfe61e891967d5c.svg' alt='' />
7142                </div>
7143                <div class='common-footer__opera-item'>
7144                    <img src='https://pixso.net/assets/media/footer-item-1-4a7f7939ac05cc56.svg' alt='' />
7145                </div>
7146                <div class='common-footer__opera-item'>
7147                    <img src='https://pixso.net/assets/media/footer-item-2-9cf4712074fd8b10.svg' alt='' />
7148                </div>
7149                <div class='common-footer__opera-item'>
7150                    <img src='https://pixso.net/assets/media/footer-item-3-2900dae9cdd76f4a.svg' alt='' />
7151                </div>
7152                <div class='common-footer__opera-item'>
7153                    <img src='https://pixso.net/assets/media/footer-item-4-3bdd8b37fea3e4ef.svg' alt='' />
7154                </div>
7155            </div>
7156            <div class="module-12__content">
7157                <div class="left-slash-bg dotted-top-boder dotted-bottom-boder"></div>
7158                <div class="right-slash-bg dotted-top-boder dotted-bottom-boder"></div>
7159                <div class='common-footer__bd scroll-animate-up'>
7160                    <div class='common-footer__bd-top' style="position: relative;z-index: 2;">
7161                        <div class='common-footer__bd-lf'>
7162                            <div class='common-footer__bd-primary'>
7163                                <img src='https://pixso.net/assets/media/px-logo-074d2a64fdeed33d.webp' alt='' />
7164                                <div class='common-footer__bd-desc'>
7165                                    All-in-one product design & collaboration tool
7166                                </div>
7167                            </div>
7168                            <div class="d-flex common-footer-media" style="margin-top:17px;gap:8px;">
7169                                <a href="https://www.facebook.com/profile.php?id=61555904130090" target="_blank" rel="nofollow">
7170                                    <img class="media-logo"
7171                                        src="https://pixso.net/assets/media/footer-logo6-298d6728c443f94f.webp">
7172                                </a>
7173                                <a href="https://twitter.com/PixsoOfficial" target="_blank" rel="nofollow">
7174                                    <img class="media-logo"
7175                                        src="https://pixso.net/assets/media/footer-logo1-ac0192502ae22a10.webp">
7176                                </a>
7177                                <a href="https://www.youtube.com/channel/UCEtQnXbK7V2G1i7G9zjJ-lw" target="_blank" rel="nofollow">
7178                                    <img class="media-logo"
7179                                        src="https://pixso.net/assets/media/footer-logo2-0831df2faf8948f5.webp">
7180                                </a>
7181                                <a href="https://www.instagram.com/pixsoofficial/" target="_blank" rel="nofollow">
7182                                    <img class="media-logo"
7183                                        src="https://pixso.net/assets/media/footer-logo3-0ca91dfac7171ae2.webp">
7184                                </a>
7185                                <a href="https://www.pinterest.com/pixsooffical/" target="_blank"
7186                                    rel="nofollow">
7187                                    <img class="media-logo"
7188                                        src="https://pixso.net/assets/media/footer-logo4-25e8594394806ff4.webp">
7189                                </a>
7190                                <a href="https://discord.gg/4VNRCPAGum" target="_blank"
7191                                    rel="nofollow">
7192                                    <img class="media-logo"
7193                                        src="https://pixso.net/assets/media/footer-logo7-9a627525791186ba.webp">
7194                                </a>
7195                                <a href="https://t.me/+GzSQOC26LzBlNTE9" target="_blank"
7196                                    rel="nofollow">
7197                                    <img class="media-logo"
7198                                        src="https://pixso.net/assets/media/footer-logo5-98d2a6764729064e.webp">
7199                                </a>
7200                            </div>
7201                            <div class="h-100 footer-lang"
7202                                style="cursor:pointer; width: 114px; flex: 0 0 114px;text-align: center;position: relative;margin-top: 45px;">
7203                                <div class="footer-lang-content"
7204                                    style="box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.10), 0 0 1px 0 rgba(0, 0, 0, 0.40);display: flex;align-items: center;width: 114px;justify-content: space-between;padding: 10px 12px;
7204height: 34px;background: rgba(255, 255, 255, 1);border-radius: 8px;text-align: left;">
7205                                    <span class="current-lang" style="font-size: 14px;">English</span>
7206                                    <svg style="min-width: 10px;" class="footer-lang--arrow"
7207                                        xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"
7208                                        fill="none">
7209                                        <path d="M1 1L5.24264 5.24264L9.48528 1" stroke="currentColor"
7210                                            stroke-opacity="0.8">
7211                                        </path>
7212                                    </svg>
7213                                </div>
7214
7215                                <div class="footer-lang-box lang-dropdown-box">
7216                                    <div class="lang position-absolute" style="top: 39px;left:0">
7217                                        <div class="lang-dropdown-list">
7218                                            <a href="/" class="lang-item lang-en" data-lang="en-US" data-track="English">
7219                                                English
7220                                            </a>
7221                                            <a href="/jp/" class="lang-item lang-jp" data-lang="ja-JP" data-track="Japanese">
7222                                                日本語
7223                                            </a>
7224                                            <a href="/kr/" class="lang-item lang-kr" data-lang="ko-KR" data-track="Korean">
7225                                                한국어
7226                                            </a>
7227                                            <a href="/ru/" class="lang-item lang-ru" data-lang="ko-KR" data-track="Russian">
7228                                                Русский
7229                                            </a>
7230                                            <a href="/es/" class="lang-item lang-es" data-lang="es-ES"
7231                                                data-track="Spanish">
7232                                                Español
7233                                            </a>
7234                                        </div>
7235                                    </div>
7236                                </div>
7237                            </div>
7238                        </div>
7239                        <div class='common-footer__bd-rt'>
7240                            <div class="common-footer__bd-list" style="opacity: 0;">
7241                                <p class="list-title">Product</p>
7242                                <ul class="list-items">
7243                                    <p class="css-nf5ac4 css-v27th6 css-4qnv0t css-19nviu textContents">Whiteboard
7244                                    </p>
7245                                    <p class="css-nf5ac4 css-v27th6 css-4qnv0t css-19nviu textContents">Prototype
7246                                    </p>
7247                                    <p class="css-nf5ac4 css-v27th6 css-4qnv0t css-19nviu textContents">Design</p>
7248                                    <p class="css-nf5ac4 css-v27th6 css-4qnv0t css-19nviu textContents">Dev view</p>
7249                                    <p class="css-nf5ac4 css-v27th6 css-4qnv0t css-19nviu textContents">Paico</p>
7250                                </ul>
7251                            </div>
7252                            <div class="common-footer__bd-list">
7253                                <p class="list-title">Solutions</p>
7254                                <ul class="list-items">
7255                                    <li>
7256                                        <a href="https://pixso.net/ui-design-collaboration/" class="bottomTypeTrack"
7257                                            data-track="UI Design">UI design</a>
7258                                    </li>
7259                                    <li>
7260                                        <a href="https://pixso.net/ux-design-collaboration/" class="bottomTypeTrack"
7261                                            data-track="UX Design">UX design</a>
7262                                    </li>
7263                                    <li>
7264                                        <a href="https://pixso.net/prototyping/" class="bottomTypeTrack"
7265                                            data-track="Prototyping">Prototyping</a>
7266                                    </li>
7267                                    <li>
7268                                        <a href="https://pixso.net/design-system/" class="bottomTypeTrack"
7269                                            data-track="Design system">Design system</a>
7270                                    </li>
7271                                    <li>
7272                                        <a href="https://pixso.net/web-designing/" class="bottomTypeTrack"
7273                                            data-track="Web designing">Web design</a>
7274                                    </li>
7275                                    <li>
7276                                        <a href="https://pixso.net/pixso-whiteboard/" class="bottomTypeTrack"
7277                                            data-track="Web designing">Whiteboard</a>
7278                                    </li>
7279                                </ul>
7280                            </div>
7281                            <div class="common-footer__bd-list">
7282                                <p class="list-title">Explore</p>
7283                                <ul class="list-items">
7284                                    <li>
7285                                        <a href="https://pixso.net/articles/" class="bottomTypeTrack"
7286                                            data-track="All articles">All articles</a>
7287                                    </li>
7288                                    <li>
7289                                        <a href="https://pixso.net/news/" class="bottomTypeTrack"
7290                                            data-track="News">News</a>
7291                                    </li>
7292                                    <li>
7293                                        <a href="https://pixso.net/reviews/" class="bottomTypeTrack"
7294                                            data-track="Reviews">Reviews</a>
7295                                    </li>
7296                                    <li>
7297                                        <a href="https://pixso.net/tips/" class="bottomTypeTrack"
7298                                            data-track="Tips">Tips</a>
7299                                    </li>
7300                                    <li>
7301                                        <a href="https://pixso.net/releases/" class="bottomTypeTrack"
7302                                            data-track="Releases">Releases</a>
7303                                    </li>
7304                                </ul>
7305                            </div>
7306                            <div class="common-footer__bd-list">
7307                                <p class="list-title">Compare</p>
7308                                <ul class="list-items">
7309                                    <li>
7310                                        <a href="https://pixso.net/pixso-vs-figma/" class="bottomTypeTrack"
7311                                            data-track="Figma">Figma</a>
7312                                    </li>
7313                                    <li>
7314                                        <a href="https://pixso.net/pixso-vs-adobe-xd/" class="bottomTypeTrack"
7315                                            data-track="Adobe XD">Adobe XD</a>
7316                                    </li>
7317                                    <li>
7318                                        <a href="https://pixso.net/pixso-vs-axure/" class="bottomTypeTrack"
7319                                            data-track="Axure">Axure</a>
7320                                    </li>
7321                                    <li>
7322                                        <a href="https://pixso.net/pixso-vs-sketch/" class="bottomTypeTrack"
7323                                            data-track="Sketch">Sketch</a>
7324                                    </li>
7325                                    <li>
7326                                        <a href="https://pixso.net/pixso-vs-invision/" class="bottomTypeTrack"
7327                                            data-track="InVision Studio">InVision</a>
7328                                    </li>
7329                                </ul>
7330                            </div>
7331                            <div class="common-footer__bd-list">
7332                                <p class="list-title">Support</p>
7333                                <ul class="list-items">
7334                                    <li>
7335                                        <a href="https://pixso.net/private-deployment/" class="bottomTypeTrack"
7336                                            data-track="Enterprise security">Enterprise security</a>
7337                                    </li>
7338                                    </li>
7339                                    <li>
7340                                        <a href="https://pixso.net/contact-us/" class="bottomTypeTrack"
7341                                            data-track="Contact us">Contact us</a>
7342                                    </li>
7343                                    <li>
7344                                        <a href="https://pixso.net/help/" class="bottomTypeTrack"
7345                                            data-track="Help center">Help center</a>
7346                                    </li>
7347                                    <li>
7348                                        <a href="https://pixso.net/faq/" class="bottomTypeTrack"
7349                                            data-track="FAQ">FAQ</a>
7350                                    </li>
7351                                </ul>
7352                            </div>
7353                            <div class="common-footer__bd-list">
7354                                <p class="list-title">Company</p>
7355                                <ul class="list-items">
7356                                    <li>
7357                                        <a href="https://pixso.net/about/" class="bottomTypeTrack"
7358                                            data-track="About Us">About us</a>
7359                                    </li>
7360                                    <li>
7361                                        <a href="https://pixso.net/private-policy/" class="bottomTypeTrack"
7362                                            data-track="Privacy Policy">Privacy policy</a>
7363                                    </li>
7364                                    <li>
7365                                        <a href="https://pixso.net/cookie-policy/" class="bottomTypeTrack"
7366                                            data-track="Cookies Policy">Cookies policy</a>
7367                                    </li>
7368                                    <li>
7369                                        <a href="https://pixso.net/refund-policy/" class="bottomTypeTrack"
7370                                            data-track="Refund Policy">Refund policy</a>
7371                                    </li>
7372                                    <li>
7373                                        <a href="https://pixso.net/terms-conditions/" class="bottomTypeTrack"
7374                                            data-track="Terms & Conditions">Terms & Conditions</a>
7375                                    </li>
7376                                    <li>
7377                                        <a href="https://pixso.net/license-agreement/" class="bottomTypeTrack"
7378                                            data-track="License Agreement">License agreement</a>
7379                                    </li>
7380                                    <li>
7381                                        <a href="https://pixso.net/subscription-terms/" class="bottomTypeTrack"
7382                                            data-track="Subscription Terms">Subscription terms</a>
7383                                    </li>
7384                                </ul>
7385                            </div>
7386                        </div>
7387                    </div>
7388                    <div class='common-footer__bd-bottom'>
7389                        <p>
7390                            Copyright © 2026 Shenzhen Pixso Technology Co.,Ltd All rights reserved.
7391                        </p>
7392                        <img class="footer-payment-logo"
7393                            src="https://pixso.net/assets/media/footer-payment-b47e4d38217569a0.webp">
7394                    </div>
7395                </div>
7396            </div>
7397        </div>
7398        <div class='common-footer__bg'>
7399            <img height="743" width="2324" decoding="async" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-perf-src="https://pixso.net/assets/media/px-footer-logo-b94a518ad1c033a7.webp" alt='' />
7400        </div>
7401        <div class='common-footer__logo'>
7402            <img height="512" width="3840" decoding="async" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-perf-src="https://pixso.net/assets/media/px-footer-bg-20fa90b66e7283ef.webp" />
7403        </div>
7404    </footer>
7405<script id="pixso-deferred-footer-media-v1">
7406(function () {
7407  function init() {
7408    var images = Array.prototype.slice.call(document.querySelectorAll('#common-footer img[data-perf-src]'));
7409    if (!images.length) return;
7410    function load(image) {
7411      var source = image.getAttribute('data-perf-src');
7412      if (!source) return;
7413      image.src = source;
7414      image.removeAttribute('data-perf-src');
7415    }
7416    if (!('IntersectionObserver' in window)) { images.forEach(load); return; }
7417    var observer = new IntersectionObserver(function (entries) {
7418      entries.forEach(function (entry) {
7419        if (!entry.isIntersecting) return;
7420        load(entry.target);
7421        observer.unobserve(entry.target);
7422      });
7423    }, { rootMargin: '160px 0px' });
7424    images.forEach(function (image) { observer.observe(image); });
7425  }
7426  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true });
7427  else init();
7428})();
7429</script>
vendor: 1 bytes, line 7429
7429
7430<script>
7431window.wscConf = window.wscConf || {};
7432window.wscConf.setting_style_font_google = [];
7433</script>
vendor: 1 bytes, line 7433
7433
7434<script src="https://pixso.net/assets/js/wsc-vendor.js"></script>
vendor: 2 bytes, line 7434
7434
7435<script src="https://pixso.net/assets/js/wsc-common.js"></script>
vendor: 2 bytes, line 7435
7435
7436<script>$(function () { wsc.common.init() })</script>
vendor: 2 bytes, line 7436
7436
7437<script>
7438      var userInfo = JSON.parse(localStorage.getItem('BOSYUNCurrent'));
7439      if(userInfo != null){
7440         $('.beforeLogin').hide()
7441        $('.afterLogin').show()
7442      }
7443  
7444       var timeout = null;
7445        function backTop(e) {
7446            e.preventDefault();
7447            $('html, body').animate({
7448                scrollTop: 0
7449            }, '300');
7450        }
7451       $('.fic-to-top__home').click(function(e){backTop(e)})
7452        function handleIconFade(dom, className, timer) {
7453            let _timer = timer || 500
7454            if (dom) {
7455                if (timeout !== null) clearTimeout(timeout);
7456                timeout = setTimeout(function () {
7457                    var scrollTop = this.scrollY;
7458                    if (scrollTop > 400) {
7459                        dom.addClass(className)
7460                    } else {
7461                        dom.removeClass(className)
7462                    }
7463                }.bind(this), _timer);
7464            }
7465        }
7466        function backTopIconFade() {
7467           handleIconFade($('.fic-to-top'), 'fic-to-top__show')
7468        }
7469        window.addEventListener('scroll', backTopIconFade);
7470    const baseActivityUrl = 'https://api.pixso.net'
7471    const activityId = 4
7472    let isDeskTop = document.body.clientWidth > 1300
7473    if (isDeskTop) {
7474        if (!$('.community-box--works').hasClass('d-none')) {
7475            let workControlFlag = 1
7476            let headerTimer = null
7477            let isCloseAutoSwiper = false
7478            $('.header-resource').mouseenter(function () {
7479                headerTimer = setInterval(function () {
7480                    if (workControlFlag > 4) {
7481                        workControlFlag = 1
7482                    }
7483                    $('.header-swiper--right').attr('checked', false)
7484                    $('#header-swiper--right' + workControlFlag).attr('checked',
7485                        true)
7486                    workControlFlag = workControlFlag + 1
7487                }, 2000)
7488            })
7489            $('.header-resource').mouseleave(function () {
7490                clearInterval(headerTimer)
7491            })
7492            $('.header-swiper--control-btn').click(function () {
7493                clearInterval(headerTimer)
7494                $('.header-swiper--right').attr('checked', false)
7495                workControlFlag = Number($(this).attr('data-index'))
7496            })
7497            $('.header-swiper--link').mouseover(function () {
7498                clearInterval(headerTimer)
7499            })
7500        } else {
7501            $.ajax({
7502                type: 'get',
7503                url: baseActivityUrl + '/api/cmt/activity/activity/info',
7504                dataType: 'json',
7505                data: {
7506                    activity_id: activityId
7507                },
7508                success: function (res) {
7509                    if (res.code === 200) {
7510                        const data = res.data
7511                        if (!!data.view_num) {
7512                            $('.header-views--number').text(data.view_num)
7513                        }
7514                        if (!!data.participate_num) {
7515                            $('.header-user--number').text(data.participate_num)
7516                        }
7517                        if (!!data.cover) {
7518                            $('.community-box--activity-img').attr('src', data.cover)
7519                        }
7520                    }
7521                }
7522            })
7523        }
7524    }
7525</script>
vendor: 2 bytes, line 7525
7525
7526<script>
7527  $(function() {
7528    let headerNav = $("header nav");
7529    let header = $("#wsc-header");
7530    let whiteList = ['https://pixso.net/', 'https://pixso.net/compare-with-figma/', 'https://pixso.net/pixso-vs-sketch/', 'https://pixso.net/pixso-vs-adobe-xd/', 'https://pixso.net/prototyping/', 'https://pixso.net/ux-design-collaboration/', 'https://pixso.net/pixso-vs-axure/']
7531    let currentHref = window.location.href.replace('index.html', '')
7532    let isWhiteList;
7533    if (whiteList.indexOf(currentHref) != -1) {
7534      isWhiteList = true
7535    } else {
7536      isWhiteList = false
7537    }
7538    const handleScroll = ()=>{
7539        let distance = document.documentElement.scrollTop;
7540        headerNav[0].style.borderBottom = distance < 10 ? "1px solid transparent" : "1px solid #eeeeee";
7541        if (distance < 1 && isWhiteList && document.body.clientWidth > 1200) {
7542        // $('.pixso-header').addClass('bg-transparent')
7543        } else {
7544        // $('.pixso-header').removeClass('bg-transparent')
7545        }
7546    }
7547    window.addEventListener("scroll", handleScroll);
7548    handleScroll();
7549  });
7550</script>
7550
7551<!-- 更新桌面端下载地址 -->
7552<script src="https://pixso.net/assets/js/js-yaml.js" defer></script>
vendor: 2 bytes, line 7552
7552
7553<script>
7554    const _platform = navigator.platform;
7555		const isWin = _platform.toLowerCase().includes('win');
7556		const isMac = _platform.toLowerCase().includes('mac');
7557		const yamlFileURL = isWin ? 'https://api.pixso.net/api/upgrade/desktop/bosyun/latest.yml' : 'https://api.pixso.net/api/upgrade/desktop/bosyun/latest-mac.yml'
7558		const downLoadDOM = isWin ? document.querySelector('.set-download-url.sys-win') : document.querySelector('.set-download-url.sys-mac')
7559		if(downLoadDOM){
7560		  fetch(yamlFileURL)
7561			.then(response => response.text())
7562			.then(yamlContent => {
7563				const yamlData = jsyaml.load(yamlContent);
7564				downLoadDOM.setAttribute('href', yamlData.downloadUrl);
7565			})
7566			.catch(error => {
7567				console.error(error)
7568			});
7569		}
7570		
7571</script>
vendor: 2 bytes, line 7571
7571
7572<script>
7573  const closeBtn = document.querySelector(".global-banner-close");
7574  if(closeBtn){
7575    closeBtn.addEventListener("click", function(event) {
7576      event.preventDefault();
7577      document.querySelector(".global-banner").style.display = 'none'
7578    });
7579  }
7580</script>
7580
7581<!-- Google Tag Manager (noscript) -->
vendor: 69 bytes, lines 7581-7582
7581
7582<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
7582GTM-5BV5J2KZ
vendor: 85 bytes, lines 7582-7583
7582"
7583height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
7584<!-- End Google Tag Manager (noscript) -->
7585<!--px cookie 设置-->
7586<div id="index1713496655072"><div><!--v-if--><!--v-if--></div></div>
7587<link rel="stylesheet" href="https://pixso.net/assets/css/cookie-setting.css">
7588  
7588<script>
7589      
7590    $(function () {
7591            const loadVue3ForCookieSetting = () => new Promise((resolve, reject) => {
7592                if (window.__pxCookieVue3 && window.__pxCookieVue3.defineComponent) {
7593                    resolve(window.__pxCookieVue3);
7594                    return;
7595                }
7596
7597                const previousVue = window.Vue;
7598                const existingScript = document.querySelector('script[data-px-cookie-vue3]');
7599                const finish = () => {
7600                    window.__pxCookieVue3 = window.Vue;
7601                    window.Vue = previousVue;
7602
7603                    if (window.__pxCookieVue3 && window.__pxCookieVue3.defineComponent) {
7604                        resolve(window.__pxCookieVue3);
7605                    } else {
7606                        reject(new Error('Vue3 failed to load for cookie setting'));
7607                    }
7608                };
7609
7610                if (existingScript) {
7611                    existingScript.addEventListener('load', finish, { once: true });
7612                    existingScript.addEventListener('error', reject, { once: true });
7613                    return;
7614                }
7615
7616                const script = document.createElement('script');
7617                script.async = false;
7618                script.src = 'https://unpkg.com/vue@3/dist/vue.global.prod.js';
7619                script.dataset.pxCookieVue3 = 'true';
7620                script.onload = finish;
7621                script.onerror = () => {
7622                    window.Vue = previousVue;
7623                    reject(new Error('Vue3 failed to load for cookie setting'));
7624                };
7625                document.head.appendChild(script);
7626            });
7627            const useVueSetting = () => {
7628                "use strict"; const e = window.__pxCookieVue3 || Vue, U = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTguMDAwMDAwIiBoZWlnaHQ9IjE4LjAwMDAwMCIgdmlld0JveD0iMCAwIDE4IDE4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KCTxkZXNjPgoJCQlDcmVhdGVkIHdpdGggUGl4c28uCgk8L2Rlc2M+Cgk8ZGVmcy8+Cgk8cGF0aCBpZD0iVmVjdG9yIChTdHJva2UpIiBkPSJNNS4wOSA3LjQ2QzUuMzkgNy4xNyA1Ljg2IDcuMTggNi4xNSA3LjQ3TDguMyA5LjY0QzguNjcgMTAuMDEgOS4yNiAxMC4wMiA5LjYzIDkuNjVMMTEuODQgNy40NkMxMi4xNCA3LjE3IDEyLjYxIDcuMTggMTIuOSA3LjQ3QzEzLjE5IDcuNzYgMTMuMTkgOC4yNCAxMi45IDguNTNMMTAuNjggMTAuNzJDOS43MyAxMS42NyA4LjE4IDExLjY2IDcuMjQgMTAuN0w1LjA5IDguNTJDNC44IDguMjMgNC44IDcuNzUgNS4wOSA3LjQ2WiIgZmlsbD0iIzQxNDE0MiIgZmlsbC1vcGFjaXR5PSIxLjAwMDAwMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+Cjwvc3ZnPgo=", W = { size: { type: String, default: "default", validator(t) { return ["default", "large"].includes(t) } }, type: { type: String, default: "default", validator(t) { return ["default", "primary", "secondary", "text", "error"].includes(t) } }, plain: { type: Boolean, default: !1 }, disabled: { type: Boolean, default: !1 }, fontSize: { type: String, default: "default", validator(t) { return ["small", "default"].includes(t) } }, showBorder: { type: Boolean, default: !0 }, showRadius: { type: Boolean, default: !0 }, padding: { type: Number, default: 0 }, height: { type: Number, default: 0 }, btnStyle: { type: String, default: "" }, iconName: { type: String, default: "" }, iconSize: { type: Number, default: 16 }, iconWidth: { type: Number, default: 0 }, iconHeight: { type: Number, default: 0 } }, K = e.defineComponent({ name: "PxButtonV2", props: W, emits: ["click"], setup(t, o) { const n = e.computed(() => { const a = { large: "lg", default: "def", small: "sm" }, r = { default: "14", small: "12" }, i = ["com-btn", `com-btn__${a[t.size]}`, `com-btn__${t.type}`]; return t.type === "primary" && i.push("is-fill"), t.type === "error" && i.push("is-fill"), t.disabled && i.push("com-btn__disable"), (t.type === "primary" || t.type === "error") && !t.plain ? i.push(`t-title-${r[t.fontSize]}`) : i.push(`t-body-${r[t.fontSize]}`), t.plain && i.push("is-plain"), !t.showBorder && i.push("com-btn__no_border"), !t.showRadius && i.push("com-btn__no_radius"), i }), l = e.computed(() => { let a = t.btnStyle; return t.padding && (a = a + `padding: 0 ${t.padding}px;`), t.height && (a = a + `height: ${t.height}px;`), a }); return { getClass: n, getStyle: l, handleClick: a => { o.emit("click", a) } } } }), w = (t, o) => { const n = t.__vccOpts || t; for (const [l, a] of o) n[l] = a; return n }
7628, Q = ["disabled"], J = { key: 0, class: "com-btn--icon" }, G = { key: 1, class: "com-btn--icon" }; function Y(t, o, n, l, a, r) { return e.openBlock(), e.createElementBlock("button", { class: e.normalizeClass([...t.getClass]), style: e.normalizeStyle(t.getStyle), onClick: o[0] || (o[0] = (...i) => t.handleClick && t.handleClick(...i)), disabled: t.disabled }, [e.createCommentVNode(" iconName目前没有用处 "), t.iconName ? (e.openBlock(), e.createElementBlock("span", J, [e.createCommentVNode(' <EdSvgIcon :size="iconSize" :width="iconWidth" :height="iconHeight" :name="iconName" /> ')])) : t.$slots.prefix ? (e.openBlock(), e.createElementBlock("div", G, [e.renderSlot(t.$slots, "prefix")])) : e.createCommentVNode("v-if", !0), e.renderSlot(t.$slots, "default")], 14, Q) } const P = w(K, [["render", Y]]); const q = () => { }, L = (t, o) => { if (t.install = n => { for (const l of [t, ...Object.values(o ?? {})]) n.component(l.name, l) }, o) for (const [n, l] of Object.entries(o)) t[n] = l; return t }, j = t => (t.install = q, t), A = L(P), X = e.defineComponent({ name: "PxCard", setup() { return {} } }), ee = e.createElementVNode("div", { class: "text-header1" }, "类的测试", -1), te = e.createElementVNode("div", { class: "token" }, "token 的测试", -1), oe = e.createElementVNode("div", { class: "image-token" }, null, -1); function le(t, o, n, l, a, r) { return e.openBlock(), e.createElementBlock("div", null, [e.createTextVNode("卡片 "), ee, te, oe]) } const ne = w(X, [["render", le]]); L(ne); const ae = { value: { type: Boolean, default: !1 }, modelValue: { type: Boolean, default: !1 }, indeterminate: { type: Boolean, default: !1 }, disabled: { type: Boolean, default: !1 }, size: { type: String, default: "default", validator(t) { return ["small", "default"].includes(t) } } }, ie = e.defineComponent({ name: "PxCheckbox", emits: ["input", "change", "update:modelValue"], props: ae, setup(t, o) { const n = e.ref(), l = e.computed(() => t.modelValue), a = e.computed(() => t.size === "default" ? "t-body-14" : "t-body-12 is-small"); return e.watch(l, r => { e.nextTick(() => { n.value.checked = r }) }, { immediate: !0 }), { checkboxClass: a, input: n, checked: l, handleChange: () => { if (t.disabled) return; const r = t.indeterminate || !l.value; o.emit("update:modelValue", r), o.emit("input", r), o.emit("change", r) } } } }), re = { key: 0, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, ce = e.createElementVNode("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6 5H14C14.5523 5 15 5.44772 15 6V14C15 14.5523 14.5523 15 14 15H6C5.44772 15 5 14.5523 5 14V6C5 5.44772 5.44772 5 6 5ZM4 6C4 4.89543 4.89543 4 6 4H14C15.1046 4 16 4.89543 16 6V14C16 15.1046 15.1046 16 14 16H6C4.89543 16 4 15.1046 4 14V6ZM7 10.85H13V9.15H7V10.85Z", fill: "var(--v2--color-text-secondary)" }, null, -1), se = [ce], de = { key: 1, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, ue = e.createElementVNode("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6 4C4.89543 4 4 4.89543 4 6V14C4 15.1046 4.89543 16 6 16H14C15.1046 16 16 15.1046 16 14V6C16 4.89543 15.1046 4 14 4H6ZM9.05882 10.7061L7.17647 8.82377L6 10.0002L9.05882 13.0591L14 8.11788L12.8235 6.94141L9.05882 10.7061Z", fill: "var(--v2--color-bg-brand-normal)" }, null, -1), me = [ue], pe = { key: 2, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, he = e.createElementVNode("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 5H6C5.44772 5 5 5.44772 5 6V14C5 14.5523 5.44772 15 6 15H14C14.5523 15 15 14.5523 15 14V6C15 5.44772 14.5523 5 14 5ZM6 4C4.89543 4 4 4.89543 4 6V14C4 15.1046 4.89543 16 6 16H14C15.1046 16 16 15.1046 16 14V6C16 4.89543 15.1046 4 14 4H6Z", fill: "var(--v2--color-text-secondary)" }, null, -1), fe = [he], ve = { class: "px-checkbox--label" }; function Ce(t, o, n, l, a, r) { return e.openBlock(), e.createElementBlock("div", { class: e.normalizeClass(["flex-align-center px-checkbox", t.checkboxClass]), onClick: o[1] || (o[1] = e.withModifiers((...i) => t.handleChange && t.handleChange(...i), ["prevent"])) }, [e.createElementVNode("input", { ref: "input", type: "checkbox", class: "px-checkbox--input", onChange: o[0] || (o[0] = (...i) => t.handleChange && t.handleChange(...i)) }, null, 544), e.createElementVNode("div", { class: e.normalizeClass(["flex-center px-checkbox--icon", { "px-checkbox--icon__disabled": t.disabled }]) }, [t.indeterminate ? (e.openBlock(), e.createElementBlock("svg", re, se)) : t.checked ? (e.openBlock(), e.createElementBlock("svg", de, me)) : (e.openBlock(), e.createElementBlock("svg", pe, fe))], 2), e.createElementVNode("div", ve, [e.render
7628Slot(t.$slots, "default")])], 2) } const ge = w(ie, [["render", Ce]]), S = (t, o) => { if (t.install = n => { for (const l of [t, ...Object.values(o ?? {})]) n.component(l.name, l) }, o) for (const [n, l] of Object.entries(o)) t[n] = l; return t }; S(ge); const ye = { visible: { type: Boolean, default: !1 }, hideHeader: { type: Boolean, default: !1 }, hideClose: { type: Boolean, default: !1 }, hideContent: { type: Boolean, default: !1 }, hideFooter: { type: Boolean, default: !1 }, hideCancel: { type: Boolean, default: !1 }, cancelText: { type: String, default: "取消" }, hideSure: { type: Boolean, default: !1 }, sureText: { type: String, default: "确认" }, sureDisabled: { type: Boolean, default: !1 }, sureType: { type: String, default: "primary", validator(t) { return ["default", "primary", "error"].includes(t) } }, title: { type: String, default: "" }, headerTabs: { type: Array, default: () => [] }, currentTabKey: { type: String, default: "" }, content: { type: String, default: "" }, width: { type: Number, default: 600 }, dialogSize: { type: String, default: "default", validator(t) { return ["small", "default"].includes(t) } }, position: { type: Object }, closeByClickOutside: { type: Boolean, default: !0 }, hideHeaderBorder: { type: Boolean, default: !0 }, hideFooterBorder: { type: Boolean, default: !0 } }, ke = e.defineComponent({}), we = { class: "svg-icon-hover" }; function xe(t, o, n, l, a, r) { return e.openBlock(), e.createElementBlock("div", we, [e.renderSlot(t.$slots, "default")]) } const T = w(ke, [["render", xe]]), be = { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Ee = e.createElementVNode("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.7782 14L9.88916 10.1109L10.5963 9.40381L14.4854 13.2929L18.3744 9.40381L19.0815 10.1109L15.1925 14L19.0815 17.8891L18.3744 18.5962L14.4854 14.7071L10.5963 18.5962L9.88916 17.8891L13.7782 14Z", fill: "currentColor" }, null, -1), Be = [Ee]; function Ne(t, o) { return e.openBlock(), e.createElementBlock("svg", be, Be) } const Ve = { render: Ne }; var $e = Object.defineProperty, Se = (t, o, n) => o in t ? $e(t, o, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[o] = n, I = (t, o, n) => (Se(t, typeof o != "symbol" ? o + "" : o, n), n); let _e = class { constructor() { I(this, "timer"), I(this, "stop", !1), I(this, "death", !1) } use(o, n, l = !1) { let a = !0; return (...r) => { if (this.death) { o.apply(this, r); return } if (this.stop) { o.apply(this, r); return } if (l) { o.apply(this, r), l = !1; return } !a || (a = !1, this.timer = setTimeout(() => { o.apply(this, r), a = !0 }, n)) } } destroy() { this.death = !0, this.stop = !0, this.timer && (clearTimeout(this.timer), this.timer = void 0) } open() { this.death || (this.stop = !1) } close() { this.stop = !0 } }; const Me = e.defineComponent({ name: "PxDialog", emits: ["update:modelValue", "close", "cancel", "sure", "toggleTab"], props: ye, components: { PxButton: P, IconHover: T, IconClose: Ve }, setup(t, o) { const n = e.computed(() => !t.headerTabs.length), l = e.computed(() => t.position ? { top: "auto", bottom: "auto", left: "auto", right: "auto", transform: "none", ...t.position } : {}), a = e.computed(() => t.dialogSize === "small" ? "t-title-12" : "t-title-16"), r = e.computed(() => [t.dialogSize === "small" ? "t-body-12" : "t-body-14", t.hideHeaderBorder ? "hide-header-border" : ""]), i = new _e; function d() { o.emit("update:modelValue", !1), o.emit("close") } function s() { o.emit("update:modelValue", !1), o.emit("cancel") } function c() { o.emit("update:modelValue", !1), o.emit("sure") } function v(C) { o.emit("toggleTab", C) } function p(C) { C.target && C.target.id === "pixso_dialog_mask" && t.closeByClickOutside && d() } return { showTitle: n, dialogPosition: l, dialogHeaderCls: a, dialogContentCls: r, onClose: i.use(d, 20), oncancel: i.use(s, 20), onsure: i.use(c, 20), toggleTab: i.use(v, 20), onClickMask: i.use(p, 20) } } }), Le = { key: 0 }, De = { class: "dialog-header-tabs" }, Ie = ["onClick"], Te = e.createElementVNode("div", { class: "empty" }, null, -1); function ze(t, o, n, l, a, r) {
7629                    const i = e.resolveComponent("IconClose"), d = e.resolveComponent("IconHover"), s = e.resolveComponent("PxButton"); return e.openBlock(), e.createBlock(e.Transition, { name: "dialog-fade" }, {
7630                        default: e.withCtx(() => [t.visible ? (e.openBlock(), e.createElementBlock("div", { key: 0, id: "pixso_dialog_mask", class: e.normalizeClass(["dialog-bg js-fullscreen-prevent-event-capture", { "dialog-sm": t.dialogSize === "small" }]), onMousedown: o[0] || (o[0] = (...c) => t.onClickMask && t.onClickMask(...c)) }, [e.createElementVNode("div", { class: "dialog-contain shadow__l", style: e.normalizeStyle({ width: t.width + "px", ...t.dialogPosition }) }, [e.createCommentVNode(" 头部区域 "), t.hideHeader ? e.createCommentVNode("v-if", !0) : (e.openBlock(), e.createElementBlock("div", { key: 0, class: e.normalizeClass(["dialog-header", t.dialogHeaderCls]), style: e.normalizeStyle(`border-bottom: ${t.hideHeaderBorder ? "0" : "1px solid var(--v2--color-border-primary)"}`) }, [e.renderSlot(t.$slots, "dialogTitle", {}, () => [e.createCommentVNode(" 标题 "), t.headerTabs.length ? (e.openBlock(), e.createElementBlock(e.Fragment, { key: 1 }, [e.createCommentVNode(" tab菜单 "), e.createElementVNode("div", De, [(e.openBlock(!0), e.createElementBlock(e.Fragment, null, e.renderList(t.headerTabs, c => (e.openBlock(), e.createElementBlock("div", { key: c.key, class: e.normalizeClass(["dialog-header-tab", c.key === t.currentTabKey && "dialog-header-tab-active"]), onClick: v => t.toggleTab(c) }, e.toDisplayString(c.title), 11, Ie))), 128))])], 2112)) : (e.openBlock(), e.createElementBlock("span", Le, e.toDisplayString(t.title), 1))]), Te, e.createCommentVNode(" 关闭按钮 "), t.hideClose ? e.createCommentVNode("v-if", !0) : e.renderSlot(t.$slots, "dialogClose", { key: 0 }, () => [e.createCommentVNode(` <PxSvgIconHover
7631                                        name="close"
7632                                        @click="onClose"
7633                                        :size="dialogSize === 'small' ? 28 : 32"
7634                                    /> `), e.createVNode(d, { onClick: t.onClose }, { default: e.withCtx(() => [e.createVNode(i)]), _: 1 }, 8, ["onClick"])])], 6)), e.createCommentVNode(" 内容区域 "), e.renderSlot(t.$slots, "dialogContent"), t.hideContent ? e.createCommentVNode("v-if", !0) : (e.openBlock(), e.createElementBlock("div", { key: 1, class: e.normalizeClass(["dialog-content", t.dialogContentCls]) }, [e.renderSlot(t.$slots, "default", {}, () => [e.createTextVNode(e.toDisplayString(t.content), 1)])], 2)), t.hideFooter ? e.createCommentVNode("v-if", !0) : (e.openBlock(), e.createElementBlock("div", { key: 2, class: "dialog-footer", style: e.normalizeStyle(`border-top: ${t.hideFooterBorder ? "0" : "1px solid var(--v2--color-border-primary)"}`) }, [e.renderSlot(t.$slots, "dialogFooter", {}, () => [e.renderSlot(t.$slots, "dialogFooterLeft"), t.hideCancel ? e.createCommentVNode("v-if", !0) : (e.openBlock(), e.createBlock(s, { key: 0, type: "secondary", class: "btn-cancel", "font-size": t.dialogSize === "small" ? "small" : "default", onClick: t.oncancel }, { default: e.withCtx(() => [e.createTextVNode(e.toDisplayString(t.cancelText), 1)]), _: 1 }, 8, ["font-size", "onClick"])), t.hideSure ? e.createCommentVNode("v-if", !0) : (e.openBlock(), e.createBlock(s, { key: 1, type: t.sureType, "font-size": t.dialogSize === "small" ? "small" : "default", disabled: t.sureDisabled, onClick: t.onsure }, { default: e.withCtx(() => [e.createTextVNode(e.toDisplayString(t.sureText), 1)]), _: 1 }, 8, ["type", "font-size", "disabled", "onClick"]))])], 4))], 4)], 34)) : e.createCommentVNode("v-if", !0)]), _: 3
7635                    })
7636                } const Fe = w(Me, [["render", ze]]), Ae = L(Fe), Pe = { visible: { required: !0, type: Boolean, default: !1 }, width: { type: [Number, String], default: "" }, position: { type: String, default: "absolute", validator(t) { return ["absolute", "fixed"].includes(t) } }, left: { type: [Number, String], default: "" }, top: { type: [Number, String], default: "" }, bottom: { type: [Number, String], default: "" }, right: { type: [Number, String], default: "" }, itemHeight: { type: String, default: "default", validator(t) { return ["small", "default"].includes(t) } }, fontSize: { type: String, default: "default", validator(t) { return ["small", "default"].includes(t) } }, hasChecked: { type: Boolean, default: !1 }, hideAfterClick: { type: Boolean, default: !0 } }, je = { command: { type: [String, Number, Object] }, disabled: { type: Boolean, default: !1 }, divide: { type: Boolean, default: !1 }, checked: { type: Boolean, default: !1 } }
7636, $1 = { tab: "Tab", enter: "Enter", space: "Space", left: "ArrowLeft", up: "ArrowUp", right: "ArrowRight", down: "ArrowDown", esc: "Escape", delete: "Delete", backspace: "Backspace", numpadEnter: "NumpadEnter", pageUp: "PageUp", pageDown: "PageDown", home: "Home", end: "End" }; function He(t) { const o = e.ref([]), n = e.ref([]), l = e.ref(0); function a(p) { var C, x; const g = p.code; if (![$1.up, $1.down, $1.enter, $1.tab, $1.esc].includes(g)) return; const f = p.target, h = n.value.indexOf(f), E = n.value.length - 1; let m; switch (g) { case $1.up: m = h !== 0 ? h - 1 : E, (C = o.value[m]) == null || C.focus(), p.preventDefault(), p.stopPropagation(); break; case $1.down: m = h < E ? h + 1 : 0, (x = o.value[m]) == null || x.focus(), p.preventDefault(), p.stopPropagation(); break; case $1.enter: f.click(); break; case $1.esc: t.data.onHide && t.data.onHide(); break } } function r(p) { var C; l.value = n.value.indexOf(p.target), (C = n.value[l.value]) == null || C.focus() } function i() { var p; (p = n.value[l.value]) == null || p.blur() } function d() { n.value.forEach(p => { p == null || p.blur() }) } function s() { document.addEventListener("keydown", a) } function c() { document.removeEventListener("keydown", a) } function v(p) { !p || (o.value = p == null ? void 0 : p.querySelectorAll("[tabindex='-1']"), n.value = Array.from(o.value)) } return { menuItemsArray: n, initDomOperation: v, handleMouseLeave: d, handleItemMouseEnter: r, handleItemMouseLeave: i, initEvent: s, destroyEvent: c } } const Ze = e.defineComponent({ name: "PxDropdown", emits: ["close", "select", "mouseEnter", "mouseLeave"], props: Pe, setup(t, o) { const n = e.ref(), l = e.ref(!1), a = e.reactive({ maxHeight: 0, left: 0, top: 0, bottom: 0, right: 0 }), r = e.getCurrentInstance(), { initDomOperation: i, handleMouseLeave: d, handleItemMouseEnter: s, handleItemMouseLeave: c, initEvent: v, destroyEvent: p } = He(r), C = e.computed(() => { const y = { position: t.position }; return a.maxHeight > 0 && (y.maxHeight = a.maxHeight + "px"), t.width !== "" && (y.width = Number(t.width) + "px"), t.left !== "" && (y.left = a.left + "px"), t.right !== "" && (y.right = a.right + "px"), t.top !== "" && (y.top = a.top + "px"), t.bottom !== "" && (y.bottom = a.bottom + "px"), y }), x = e.computed(() => [`px-dropdown-height__${t.itemHeight}`, t.fontSize === "default" ? "t-body-14" : "t-body-12"]), g = () => { const { width: y, height: B } = n.value.getBoundingClientRect(), b = document.documentElement.clientWidth, V = document.documentElement.clientHeight, k = V - 32; let M = B; if (B > k && (a.maxHeight = k, M = k), t.position === "fixed") { const D = Number(t.left) < 0 ? 0 : Number(t.left), u = Number(t.right) < 0 ? 0 : Number(t.right); b < D + y ? a.left = b - y : a.left = D, b < u + y ? a.right = b - y : a.right = u; const _ = Number(t.top) < 0 ? 0 : Number(t.top), F = +(t.bottom < 0) ? 0 : Number(t.bottom); V < _ + M ? a.top = V - M : a.top = _, V < F + M ? a.bottom = V - M : a.bottom = F } else t.left !== "" && (a.left = Number(t.left)), t.right !== "" && (a.right = Number(t.right)), t.top !== "" && (a.top = Number(t.top)), t.bottom !== "" && (a.bottom = Number(t.bottom)) }; e.watch(() => t.visible, () => { l.value = t.visible, l.value ? v() : p() }, { immediate: !0 }), e.watch(l, () => { !l.value || e.nextTick(() => { g(), i(n.value) }) }, { immediate: !0 }), e.watch([() => t.left, () => t.top, () => t.bottom, () => t.right], () => { e.nextTick(() => { g() }) }); const f = () => { l.value = !1, o.emit("close") }
7636, h = (y, B, b) => { o.emit("select", y, B, b), t.hideAfterClick && f() }, E = (y, B, b) => { o.emit("mouseEnter", y, b), s(B) }, m = (y, B, b) => { o.emit("mouseLeave", y, b), c() }, N = () => { e.nextTick(() => { i(n.value) }) }; return e.provide("hasChecked", t.hasChecked), e.provide("itemMouseClick", h), e.provide("itemMouseEnter", E), e.provide("itemMouseLeave", m), e.provide("updateDomOperation", N), { dropdownVisible: l, dropdownRef: n, dropDownStyle: C, dropDownClass: x, onHide: f, handleMouseLeave: d } } }); function Oe(t, o, n, l, a, r) { return t.dropdownVisible ? (e.openBlock(), e.createElementBlock("div", { key: 0, ref: "dropdownRef", class: e.normalizeClass(["px-dropdown shadow__m p__4 scrollbar-s", t.dropDownClass]), style: e.normalizeStyle(t.dropDownStyle), onMouseleave: o[0] || (o[0] = e.withModifiers((...i) => t.handleMouseLeave && t.handleMouseLeave(...i), ["stop"])) }, [e.createCommentVNode(" 列表数据 "), e.renderSlot(t.$slots, "list")], 38)) : e.createCommentVNode("v-if", !0) } const Re = w(Ze, [["render", Oe]]), Ue = e.defineComponent({ name: "PxDropdownMenu" }), We = { class: "px-dropdown-menu" }; function Ke(t, o, n, l, a, r) { return e.openBlock(), e.createElementBlock("ul", We, [e.renderSlot(t.$slots, "default")]) } const H = w(Ue, [["render", Ke]]), Qe = { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Je = e.createElementVNode("path", { d: "M3.85697 8.24264L6.6854 11.0711L11.928 5.82843", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }, null, -1), Ge = [Je]; function Ye(t, o) { return e.openBlock(), e.createElementBlock("svg", Qe, Ge) } const qe = { render: Ye }, Xe = e.defineComponent({ name: "PxDropdownItem", props: je, components: { IconChecked: qe }, setup(t, o) { const n = e.inject("hasChecked"), l = e.inject("itemMouseClick"), a = e.inject("itemMouseEnter"), r = e.inject("itemMouseLeave"), i = e.inject("updateDomOperation"); return e.watch(() => t.disabled, () => { !t.disabled || i && i() }), { hasChecked: n, dispatchClick(d) { t.disabled || l && l(t.command, d, o.attrs) }, dispatchEnter(d) { t.disabled || a && a(t.command, d, o.attrs) }, dispatchLeave(d) { t.disabled || r && r(t.command, d, o.attrs) } } } }), et = { key: 0, class: "px-dropdown-item--divider" }, tt = ["tabindex"], ot = { key: 0, class: "px-dropdown-item--content px__4 flx-align__center" }, lt = { key: 0, class: "px-dropdown-item__checked mr__4" }, nt = { key: 1, class: "px-dropdown-item--content px__4 flx__center" }, at = { key: 0, class: "px-dropdown-item__checked mr__4" }, it = { key: 1, class: "px-dropdown-item--prefix mr__4 flx__center" }, rt = { key: 2, class: "px-dropdown-item--title text__ellipsis" }, ct = { key: 3, class: "px-dropdown-item--subTitle pl__4 txt-body__regular__sm" }, st = { key: 4, class: "px-dropdown-item__suffix pl__4 flx__center" }; function dt(t, o, n, l, a, r) { const i = e.resolveComponent("IconChecked"); return e.openBlock(), e.createElementBlock(e.Fragment, null, [e.createCommentVNode(" 分割线 "), t.divide ? (e.openBlock(), e.createElementBlock("div", et)) : (e.openBlock(), e.createElementBlock("li", { key: 1, class: e.normalizeClass(["px-dropdown-item flx-align__center px__4", { "px-dropdown-item__disabled": t.disabled }]), onClick: o[0] || (o[0] = e.withModifiers(d => t.dispatchClick(d), ["stop"])), onMousedown: o[1] || (o[1] = e.withModifiers(d => t.dispatchClick(d), ["stop"])), onMouseenter: o[2] || (o[2] = e.withModifiers(d => t.dispatchEnter(d), ["stop"])), onMouseleave: o[3] || (o[3] = e.withModifiers(d => t.dispatchLeave(d), ["stop"])), tabindex: t.disabled ? "0" : "-1" }, [t.$slots.default ? (e.openBlock(), e.createElementBlock("div", ot, [t.hasChecked ? (e.openBlock(), e.createElementBlock("div", lt, [e.withDirectives(e.createVNode(i, null, null, 512), [[e.vShow, t.checked]])])) : e.createCommentVNode("v-if", !0), e.renderSlot(t.$slots, "default")])) : (e.openBlock(), e.createElementBlock("div", nt, [t.hasChecked ? (e.openBlock(), e.createElementBlock("div", at, [e.withDirectives(e.createVNode(i, null, null, 512), [[e.vShow, t.checked]])])) : e.createCommentVNode("v-if", !0), t.$slots.prefix ? (e.openBlock(), e.createElementBlock("div", it, [e.render
7636Slot(t.$slots, "prefix")])) : e.createCommentVNode("v-if", !0), t.$slots.title ? (e.openBlock(), e.createElementBlock("div", rt, [e.renderSlot(t.$slots, "title")])) : e.createCommentVNode("v-if", !0), t.$slots.subTitle ? (e.openBlock(), e.createElementBlock("div", ct, [e.renderSlot(t.$slots, "subTitle")])) : e.createCommentVNode("v-if", !0), t.$slots.suffix ? (e.openBlock(), e.createElementBlock("div", st, [e.renderSlot(t.$slots, "suffix")])) : e.createCommentVNode("v-if", !0)]))], 42, tt))], 2112) } const Z = w(Xe, [["render", dt]]); L(Re, { DropDownMenu: H, DropDownItem: Z }); j(H); j(Z); S(T); const ut = { maxlength: { type: String || Number, default: "" }, value: { type: String, default: "" }, modelValue: { type: String, default: "" }, placeholder: { type: String, default: "" }, size: { type: String, default: "default", validator(t) { return ["small", "default"].includes(t) } }, clearable: { type: Boolean, default: !1 }, showPassword: { type: Boolean, default: !1 }, showPasswordEye: { type: Boolean, default: !1 }, disabled: { type: Boolean, default: !1 }, autofocus: { type: Boolean, default: !1 }, error: { type: String, default: "" }, readonly: { type: Boolean, default: !1 } }, mt = { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, pt = e.createElementVNode("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.7782 14L9.88916 10.1109L10.5963 9.40381L14.4854 13.2929L18.3744 9.40381L19.0815 10.1109L15.1925 14L19.0815 17.8891L18.3744 18.5962L14.4854 14.7071L10.5963 18.5962L9.88916 17.8891L13.7782 14Z", fill: "currentColor" }, null, -1), ht = [pt]; function ft(t, o) { return e.openBlock(), e.createElementBlock("svg", mt, ht) } const z = { render: ft }, vt = { width: "16.000000", height: "16.000000", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink" }, Ct = e.createElementVNode("desc", null, " Created with Pixso. ", -1), gt = e.createElementVNode("defs", null, [e.createElementVNode("clipPath", { id: "clip18575_99841" }, [e.createElementVNode("rect", { id: "左侧图标/列表功能/隐藏 hide", width: "16.000000", height: "16.000000", fill: "white" })])], -1), yt = e.createElementVNode("g", { "clip-path": "url(#clip18575_99841)" }, [e.createElementVNode("path", { id: "path", d: "M1.7041 5.0304C1.93164 4.87317 2.24316 4.92981 2.40039 5.15686C3.68945 7.01855 5.46094 7.94141 7.79883 7.94141C9.26465 7.94141 10.3838 7.70044 11.29 7.24475C12.1934 6.79053 12.9219 6.10486 13.5781 5.15686C13.7354 4.92981 14.0469 4.87317 14.2734 5.0304C14.501 5.1875 14.5576 5.49902 14.4004 5.72607C14.0156 6.28125 13.5986 6.77026 13.1299 7.1886L14.54 8.38342C14.751 8.56201 14.7773 8.87756 14.5986 9.08813C14.4199 9.29883 14.1045 9.32495 13.8936 9.14636L12.3164 7.80933C12.1318 7.92798 11.9395 8.0376 11.7393 8.13818C11.4287 8.29443 11.1016 8.42725 10.7559 8.53711L11.3848 10.3988C11.4736 10.6604 11.333 10.9442 11.0713 11.0327C10.8096 11.1211 10.5264 10.9808 10.4375 10.7192L9.78125 8.77722C9.1748 8.88757 8.51758 8.94141 7.79883 8.94141C7.47852 8.94141 7.16699 8.92578 6.86328 8.89453L6.24609 10.7194C6.1582 10.981 5.87402 11.1213 5.6123 11.0328C5.35059 10.9445 5.21094 10.6606 5.29883 10.399L5.86426 8.72827C5.04883 8.53748 4.30371 8.21863 3.62793 7.77258L2.10645 9.06213C1.89551 9.2406 1.58008 9.2146 1.40137 9.00391C1.22363 8.79321 1.24902 8.47778 1.45996 8.29919L2.81934 7.14722C2.36719 6.74182 1.95312 6.26807 1.57812 5.72607C1.4209 5.49902 1.47754 5.1875 1.7041 5.0304Z", "fill-rule": "evenodd", fill: "#A3A4A8" })], -1), kt = [Ct, gt, yt]; function wt(t, o) { return e.openBlock(), e.createElementBlock("svg", vt, kt) } const xt = { render: wt }, bt = { width: "16.000000", height: "16.000000", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink" }, Et = e.createElementVNode("desc", null, " Created with Pixso. ", -1), Bt = e.createElementVNode("defs", null, [e.createElementVNode("clipPath", { id: "clip18575_99843" }, [e.createElementVNode("rect", { id: "左侧图标/列表功能/显示 show", width: "16.000000", height: "16.000000", fill: "white" })])], -1), Nt = e.createElementVNode("g", { "clip-path": "url(#clip18575_99843)" }, [e.createElementVNode("path", { id: "path", d: "M8 11C5.7002 11 3.67773 9.80579 2.52148 8C3.67773 6.19421 5.7002 5 8 5C10.2998 5 12.3223 6.19421 13.4785 8C12.3223 9.80579 10.2998 11 8 11ZM8 4C10.8779 4 13.3779 5.62109 14.6348 8C13.3779 10.3789 10.8779 12 8 12C5.12207 12 2.62305 10.3789 1.36523 8C2.62305 5.62109 5.12207 4 8 4ZM8.00098 10C9.10547 10 10.001 9.10461 10.001 8C10.001 6.89539 9.10547 6 8.00098 6C6.89551 6 6.00098 6.89539 6.00098 8C6.
763600098 9.10461 6.89551 10 8.00098 10Z", "fill-rule": "evenodd", fill: "#A3A4A8" })], -1), Vt = [Et, Bt, Nt]; function $t(t, o) { return e.openBlock(), e.createElementBlock("svg", bt, Vt) } const St = { render: $t }, _t = e.defineComponent({ name: "PxInput", emits: ["input", "change", "mouseenter", "mouseleave", "clear", "update:modelValue", "compositionstart", "compositionupdate", "compositionend", "focus", "blur", "mouseup", "keydown", "submit"], props: ut, components: { IconClose: z, IconEyeClose: xt, IconEyeOpen: St }, setup(t, o) { const n = e.ref(), l = e.ref(!1), a = e.ref(!1), r = e.ref(!1), i = e.ref(!1), d = e.ref(!0), s = e.computed(() => { const u = []; return a.value && u.push("com-input-contain__focus"), t.error && u.push("com-input-contain__error"), t.size === "small" && u.push("is-small"), t.disabled && u.push("is-disabled"), u }), c = e.computed(() => t.modelValue), v = () => { const u = n.value; !u || u.value === c.value || (u.value = c.value) }, p = e.computed(() => t.clearable && !t.disabled && (a.value || r.value) && !!c.value), C = e.computed(() => t.showPasswordEye && !t.disabled); e.watch(c, () => { v() }); const x = async u => { if (t.disabled) return; const { value: _ } = u.target; o.emit("update:modelValue", _), o.emit("input", _), await e.nextTick(), v() }, g = u => { o.emit("change", u.target.value) }, f = u => { l.value = !0, o.emit("compositionstart", u) }, h = u => { o.emit("compositionupdate", u) }, E = u => { l.value = !1, o.emit("compositionend", u) }, m = u => { a.value = !0, o.emit("focus", u) }, N = u => { a.value = !1, o.emit("blur", u) }, y = u => { o.emit("mouseup", u) }, B = u => { o.emit("keydown", u) }, b = u => { l.value || o.emit("submit", u) }, V = u => { var _; o.emit("update:modelValue", ""), o.emit("input", ""), o.emit("change", ""), o.emit("clear"), (_ = n.value) == null || _.focus() }, k = () => { i.value = !i.value, d.value = !d.value }, M = u => { r.value = !0, o.emit("mouseenter", u) }, D = u => { r.value = !1, o.emit("mouseleave", u) }; return e.onMounted(() => { e.nextTick(() => { var u; !t.autofocus || t.disabled || (u = n.value) == null || u.focus() }), v() }), e.onBeforeUnmount(() => { var u; (u = n.value) == null || u.blur() }), { showClear: p, showPwEye: C, passwordVisible: i, isEyeClose: d, inputRef: n, getClass: s, handleInput: x, handleChange: g, handleCompositionStart: f, handleCompositionUpdate: h, handleCompositionEnd: E, handleFocus: m, handleBlur: N, handleMouseUp: y, handleKeydown: B, handleSubmit: b, onClear: V, onShowPwEye: k, handleMouseEnter: M, handleMouseLeave: D } } }), Mt = ["type", "maxlength", "autofocus", "disabled", "placeholder", "readonly"], Lt = { key: 0, class: "com-input-error t-body-12" }; function Dt(t, o, n, l, a, r) { const i = e.resolveComponent("IconClose"), d = e.resolveComponent("IconEyeClose"), s = e.resolveComponent("IconEyeOpen"); return e.openBlock(), e.createElementBlock("div", { class: e.normalizeClass(["com-input-contain", ...t.getClass]), onMouseenter: o[10] || (o[10] = (...c) => t.handleMouseEnter && t.handleMouseEnter(...c)), onMouseleave: o[11] || (o[11] = (...c) => t.handleMouseLeave && t.handleMouseLeave(...c)) }, [e.createElementVNode("input", { ref: "inputRef", class: e.normalizeClass(["com-input t-body-14", { "is-disabled": t.disabled }]), type: t.showPassword ? t.passwordVisible ? "text" : "password" : "text", maxlength: t.maxlength, autofocus: t.autofocus, disabled: t.disabled, placeholder: t.placeholder, readonly: t.readonly, onCompositionstart: o[0] || (o[0] = (...c) => t.handleCompositionStart && t.handleCompositionStart(...c)), onCompositionupdate: o[1] || (o[1] = (...c) => t.handleCompositionUpdate && t.handleCompositionUpdate(...c)), onCompositionend: o[2] || (o[2] = (...c) => t.handleCompositionEnd && t.handleCompositionEnd(...c)), onInput: o[3] || (o[3] = (...c) => t.handleInput && t.handleInput(...c)), onFocus: o[4] || (o[4] = (...c) => t.handleFocus && t.handleFocus(...c)), onBlur: o[5] || (o[5] = (...c) => t.handleBlur && t.handleBlur(...c)), onChange: o[6] || (o[6] = (...c) => t.handleChange && t.handleChange(...c)), onKeydown: [o[7] || (o[7] = (...c) =>
7636 t.handleKeydown && t.handleKeydown(...c)), o[9] || (o[9] = e.withKeys((...c) => t.handleSubmit && t.handleSubmit(...c), ["enter"]))], onMouseup: o[8] || (o[8] = (...c) => t.handleMouseUp && t.handleMouseUp(...c)) }, null, 42, Mt), e.withDirectives(e.createVNode(i, { class: e.normalizeClass(["com-input-close", { mr__16: t.showPwEye }]), onClick: t.onClear }, null, 8, ["class", "onClick"]), [[e.vShow, t.showClear]]), e.withDirectives(e.createVNode(d, { class: "com-input-show-pw-eye", onClick: t.onShowPwEye }, null, 8, ["onClick"]), [[e.vShow, t.showPwEye && t.isEyeClose]]), e.withDirectives(e.createVNode(s, { class: "com-input-show-pw-eye", onClick: t.onShowPwEye }, null, 8, ["onClick"]), [[e.vShow, t.showPwEye && !t.isEyeClose]]), t.error ? (e.openBlock(), e.createElementBlock("div", Lt, e.toDisplayString(t.error), 1)) : e.createCommentVNode("v-if", !0)], 34) } const It = w(_t, [["render", Dt]]); S(It, { IconClose: z }); const Tt = { value: { type: Boolean, default: !1 }, modelValue: { type: Boolean, default: !1 }, disabled: { type: Boolean, default: !1 }, size: { type: String, default: "default", validator(t) { return ["small", "default"].includes(t) } } }, zt = e.defineComponent({ name: "PxRadio", emits: ["input", "change", "update:modelValue"], props: Tt, setup(t, o) { const n = e.ref(null), l = e.computed(() => t.modelValue), a = e.computed(() => t.size === "default" ? "t-body-14" : "t-body-12"); return e.watch(l, r => { e.nextTick(() => { n.value.checked = r }) }, { immediate: !0 }), { radioClass: a, input: n, checked: l, handleChange: () => { if (t.disabled) return; const r = !l.value; o.emit("update:modelValue", r), o.emit("input", r), o.emit("change", r) } } } }), Ft = { key: 0, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, At = { key: 0, d: "M16 10C16 13.3137 13.3137 16 10 16C6.68629 16 4 13.3137 4 10C4 6.68629 6.68629 4 10 4C13.3137 4 16 6.68629 16 10Z", fill: "var(--v2--color-bg-bodyoverlay)" }, Pt = e.createElementVNode("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15 10C15 12.7614 12.7614 15 10 15C7.23858 15 5 12.7614 5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10ZM16 10C16 13.3137 13.3137 16 10 16C6.68629 16 4 13.3137 4 10C4 6.68629 6.68629 4 10 4C13.3137 4 16 6.68629 16 10ZM10 13C11.6569 13 13 11.6569 13 10C13 8.34315 11.6569 7 10 7C8.34315 7 7 8.34315 7 10C7 11.6569 8.34315 13 10 13Z", fill: "var(--v2--color-bg-brand-normal)" }, null, -1), jt = { key: 1, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Ht = { key: 0, d: "M16 10C16 13.3137 13.3137 16 10 16C6.68629 16 4 13.3137 4 10C4 6.68629 6.68629 4 10 4C13.3137 4 16 6.68629 16 10Z", fill: "var(--v2--color-bg-bodyoverlay)" }, Zt = e.createElementVNode("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5C7.23858 5 5 7.23858 5 10C5 12.7614 7.23858 15 10 15ZM10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16Z", fill: "var(--v2--color-text-secondary)" }, null, -1), Ot = { class: "px-radio--label" }; function Rt(t, o, n, l, a, r) { return e.openBlock(), e.createElementBlock("div", { class: e.normalizeClass(["flex-align-center px-radio", t.radioClass]), onClick: o[1] || (o[1] = e.withModifiers((...i) => t.handleChange && t.handleChange(...i), ["prevent"])) }, [e.createElementVNode("input", { ref: "input", type: "radio", class: "px-radio--input", onChange: o[0] || (o[0] = (...i) => t.handleChange && t.handleChange(...i)) }, null, 544), e.createElementVNode("div", { class: e.normalizeClass(["flex-center px-radio--icon", { "px-radio--icon__disabled": t.disabled }]) }, [t.checked ? (e.openBlock(), e.createElementBlock("svg", Ft, [t.disabled ? (e.openBlock(), e.createElementBlock("path", At)) : e.createCommentVNode("v-if", !0), Pt])) : (e.openBlock(), e.createElementBlock("svg", jt, [t.disabled ? (e.openBlock(), e.createElementBlock("path", Ht)) : e.createCommentVNode("v-if", !0), Zt]))], 2), e.createElementVNode("div", Ot, [e.render
7636Slot(t.$slots, "default")])], 2) } const Ut = w(zt, [["render", Rt]]); S(Ut); const Wt = { modelValue: { type: String, default: "" }, value: { type: String, default: "" }, disabled: { type: Boolean, default: !1 }, type: { type: String, default: "default", validator(t) { return ["default", "light"].includes(t) } }, size: { type: String, default: "default", validator(t) { return ["small", "default"].includes(t) } }, autoFocus: { type: Boolean, default: !1 }, placeholder: { type: String, default: "请输入搜索关键词" } }, Kt = { width: "28.000000", height: "28.000000", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink" }, Qt = e.createElementVNode("desc", null, " Created with Pixso. ", -1), Jt = e.createElementVNode("g", { "clip-path": "url(#clip340_4307)" }, [e.createElementVNode("path", { d: "M16.1934 15.7031C17.9492 13.9453 17.9492 11.0938 16.1934 9.33594C14.4355 7.58203 11.5859 7.58203 9.82812 9.33594C8.07031 11.0938 8.07031 13.9453 9.82812 15.7031C11.3281 17.2031 13.623 17.4219 15.3574 16.3594C15.3613 16.3633 15.3652 16.3672 15.3691 16.3711L19.0977 20.0352C19.2969 20.2344 19.6074 20.2305 19.8047 20.0312C20 19.832 19.998 19.5195 19.7969 19.3242L16.1523 15.7422C16.166 15.7266 16.1797 15.7148 16.1934 15.7031ZM15.4844 14.9922C15.8203 14.6562 16.0781 14.2734 16.2539 13.8359C16.4238 13.4141 16.5098 12.9766 16.5098 12.5195C16.5098 12.0625 16.4238 11.625 16.2539 11.2031C16.0781 10.7656 15.8203 10.3828 15.4844 10.0469C15.1484 9.71094 14.7637 9.45312 14.3281 9.27734C13.9062 9.10547 13.4668 9.01953 13.0098 9.01953C12.5527 9.01953 12.1133 9.10547 11.6934 9.27734C11.2578 9.45312 10.8711 9.71094 10.5352 10.0469C10.1992 10.3828 9.94336 10.7656 9.76758 11.2031C9.5957 11.625 9.51172 12.0625 9.51172 12.5195C9.51172 12.9766 9.5957 13.4141 9.76758 13.8359C9.94336 14.2734 10.1992 14.6562 10.5352 14.9922C10.8711 15.3281 11.2578 15.5859 11.6934 15.7617C12.1133 15.9336 12.5527 16.0195 13.0098 16.0195C13.4668 16.0195 13.9062 15.9336 14.3281 15.7617C14.7637 15.5859 15.1484 15.3281 15.4844 14.9922Z", "fill-rule": "evenodd", fill: "currentColor", "fill-opacity": "1.000000" })], -1), Gt = e.createElementVNode("defs", null, [e.createElementVNode("clipPath", { id: "clip340_4307" }, [e.createElementVNode("rect", { width: "28.000000", height: "28.000000", fill: "white" })])], -1), Yt = [Qt, Jt, Gt]; function qt(t, o) { return e.openBlock(), e.createElementBlock("svg", Kt, Yt) } const Xt = { render: qt }, eo = { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, to = e.createElementVNode("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.70707 3.99996C4.51181 3.8047 4.19522 3.8047 3.99996 3.99996C3.8047 4.19522 3.8047 4.51181 3.99996 4.70707L7.29289 7.99999L4.00016 11.2927C3.8049 11.488 3.8049 11.8046 4.00016 11.9998C4.19543 12.1951 4.51201 12.1951 4.70727 11.9998L7.99999 8.7071L11.2924 11.9995C11.4876 12.1947 11.8042 12.1947 11.9995 11.9995C12.1947 11.8042 12.1947 11.4876 11.9995 11.2924L8.7071 7.99999L11.9997 4.70741C12.1949 4.51215 12.1949 4.19557 11.9997 4.00031C11.8044 3.80504 11.4878 3.80504 11.2926 4.00031L7.99999 7.29289L4.70707 3.99996Z", fill: "currentColor" }, null, -1), oo = [to]; function lo(t, o) { return e.openBlock(), e.createElementBlock("svg", eo, oo) } const no = { render: lo }, ao = e.defineComponent({ name: "PxSearch", emits: ["search", "input", "change", "mouseenter", "mouseleave", "clear", "update:modelValue"], props: Wt, components: { IconSearch: Xt, IconClose16: no }, setup(t, o) { const n = e.ref(), l = e.ref(!1), a = e.ref(!1), r = e.computed(() => t.modelValue), i = () => { const m = n.value; !m || m.value === r.value || (m.value = r.value) }, d = e.computed(() => t.size === "default" ? "t-body-14" : "t-body-12"), s = e.computed(() => !t.disabled && (l.value || a.value) && !!r.value); e.watch(r, () => { i() }); const c = () => { o.emit("search", n.value.value) }, v = async m => { if (t.disabled) return; const { value: N } = m.target; o.emit("update:modelValue", N), o.emit("input", N), await e.nextTick(), i() }
7636, p = m => { o.emit("change", m.target.value) }, C = m => { l.value = !1, o.emit("blur", m) }, x = m => { l.value = !0, o.emit("focus", m) }, g = () => { var m; o.emit("update:modelValue", ""), o.emit("input", ""), o.emit("change", ""), o.emit("clear"), (m = n.value) == null || m.focus() }, f = m => { a.value = !0, o.emit("mouseenter", m) }, h = m => { a.value = !1, o.emit("mouseleave", m) }, E = setTimeout(() => { e.nextTick(() => { var m; clearTimeout(E), t.autoFocus && ((m = n.value) == null || m.focus(), l.value = !0) }) }, 0); return e.onMounted(() => { i() }), { isFocus: l, searchInputClass: d, inputRef: n, showClear: s, onSearch: c, handleInput: v, handleChange: p, onBlur: C, onFocus: x, onClear: g, handleMouseEnter: f, handleMouseLeave: h } } }), io = ["placeholder", "disabled"]; function ro(t, o, n, l, a, r) { const i = e.resolveComponent("IconSearch"), d = e.resolveComponent("IconClose16"); return e.openBlock(), e.createElementBlock("div", { class: e.normalizeClass(["px-search", { "is-disabled": t.disabled, "is-light": t.type === "light", "is-focus": t.isFocus && t.type !== "light", "is-small": t.size === "small" }]), onMouseenter: o[5] || (o[5] = (...s) => t.handleMouseEnter && t.handleMouseEnter(...s)), onMouseleave: o[6] || (o[6] = (...s) => t.handleMouseLeave && t.handleMouseLeave(...s)) }, [e.renderSlot(t.$slots, "prefix", {}, () => [e.createVNode(i, { class: "px-search--icon" })]), e.createElementVNode("input", { ref: "inputRef", type: "text", class: e.normalizeClass(["px-search--input", t.searchInputClass]), placeholder: t.placeholder, disabled: t.disabled, onInput: o[0] || (o[0] = (...s) => t.handleInput && t.handleInput(...s)), onChange: o[1] || (o[1] = (...s) => t.handleChange && t.handleChange(...s)), onBlur: o[2] || (o[2] = (...s) => t.onBlur && t.onBlur(...s)), onFocus: o[3] || (o[3] = (...s) => t.onFocus && t.onFocus(...s)), onKeydown: o[4] || (o[4] = e.withKeys((...s) => t.onSearch && t.onSearch(...s), ["enter"])) }, null, 42, io), e.withDirectives(e.createVNode(d, { class: "px-search--close", onClick: t.onClear }, null, 8, ["onClick"]), [[e.vShow, t.showClear]]), e.renderSlot(t.$slots, "default")], 34) } const co = w(ao, [["render", ro]]); S(co); const so = { value: { type: Boolean, default: !1 }, modelValue: { type: Boolean, default: !1 }, size: { type: String, default: "default", validator(t) { return ["small", "default"].includes(t) } }, disabled: { type: Boolean, default: !1 }, mixed: { type: Boolean, default: !1 }, activeText: String, inactiveText: String }, uo = e.defineComponent({ name: "PxSwitch", props: so, emits: ["input", "change", "update:modelValue"], setup(t, o) { const n = e.ref(), l = e.computed(() => t.disabled), a = e.computed(() => t.mixed), r = e.computed(() => t.modelValue), i = e.computed(() => [l.value ? "is-disabled" : "", r.value ? "is-checked" : "", a.value ? "is-mixed" : "", t.size === "default" ? "t-body-14" : "t-body-12"]); e.watch(r, s => { e.nextTick(() => { n.value.checked = s }) }, { immediate: !0 }); const d = () => { if (l.value) return; const s = !r.value; o.emit("update:modelValue", s), o.emit("input", s), o.emit("change", s) }; return { input: n, checked: r, switchDisabled: l, switchClass: i, handleChange: d, switchValue: () => { l.value || d() } } } }), mo = ["disabled"], po = e.createElementVNode("span", { class: "px-switch--core" }, null, -1); function ho(t, o, n, l, a, r) { return e.openBlock(), e.createElementBlock("div", { class: e.normalizeClass(["px-switch", t.switchClass]), onClick: o[1] || (o[1] = e.withModifiers((...i) => t.switchValue && t.switchValue(...i), ["prevent"])) }, [e.createElementVNode("input", { ref: "input", class: "px-switch--input", type: "checkbox", disabled: t.switchDisabled, onChange: o[0] || (o[0] = (...i) => t.handleChange && t.handleChange(...i)) }, null, 40, mo), t.inactiveText ? (e.openBlock(), e.createElementBlock("span", { key: 0, class: e.normalizeClass(["px-switch--label", "px-switch--label__left", t.checked ? "" : "is-active"]) }, [e.createElementVNode("span", null, e.toDisplayString(t.inactiveText), 1)], 2)) : e.createCommentVNode("v-if", !0), po, t.activeText ? (e.openBlock(), e.createElementBlock("span", { key: 1, class: e.normalizeClass(["px-switch--label", "px-switch--label__right", t.checked ? "is-active" : ""]) }, [e.createElementVNode("span", null, e.toDisplayString(t.activeText), 1)], 2)) : e.createCommentVNode("v-if", !0)], 2) } const fo = w(uo, [["render", ho]]), vo = S(fo), Co = { title: { type: String, default: "" }, value: { type: Number, default: 0 }, min: { type: Number, default: 0 }, max: { type: Number, default: 100 }, btnSize: { type: Number, default: 10 }, showValue: { type: Boolean, default: !0 } }; function go(t) { const o = l => { t && t.mousemove && t.mousemove(l) }, n = l => { document.removeEventListener("mousemove", o), document.removeEventListener("mouseup", n), t && t.mouseup && t.mouseup(l) }; return { onMousedown(l) { document.addEventListener("mousemove", o), document.addEventListener("mouseup", n), t && t.mousedown && t.mousedown(l) } } } const yo = e.defineComponent({ name: "PxSlider", emits: ["input", "update:value", "change"], props: Co, setup(t, o) { const n = e.ref({}); t.min > t.max ? console.error("[Px Error][Slider]min should not be greater than max.") : t.value < t.min ? console.error("[Px Error][Slider]value should not be smaller than min.") : t.value > t.max && console.error("[Px Error][Slider]value should not be greater than max."); let l = 0, a = 0; const r = e.ref(t.value); e.watch(() => t.value, () => { r.value = t.value }); const i = e.reactive({ active: !1 }), d = e.computed(() => t.max - t.min), s = e.computed(() => Math.abs(r.value) / d.value), c = e.computed(() => r.value >= 0 ? Math.abs(t.min) / d.value : (Math.abs(t.min) - Math.abs(r.value)) / d.value), v = e.computed(() => r.value >= 0 ? c.value + s.value : c.value), p = e.computed(() =>
7636 Math.ceil(r.value)), C = (g, f, h) => Math.round((h - g) / f * d.value + t.min), { onMousedown: x } = go({ mousedown(g) { const { x: f, width: h } = n.value.getBoundingClientRect(); i.active = !0, a = f, l = h, r.value = C(a, l, g.pageX), o.emit("input", r.value, !1), o.emit("update:value", r.value, !1) }, mousemove(g) { let f = g.pageX; f < a && (f = a), f > a + l && (f = a + l), r.value = C(a, l, f), o.emit("input", r.value, !1), o.emit("update:value", r.value, !1) }, async mouseup() { i.active = !1, o.emit("input", r.value, !0), o.emit("update:value", r.value, !1), o.emit("change", r.value, !1) } }); return { sliderRef: n, state: i, barActiveWidth: s, barActiveLeft: c, btnLeft: v, sliderNum: p, onMousedown: x } } }), ko = { key: 0, class: "px-slider--text" }, wo = { class: "px-slider--bar", ref: "sliderRef" }, xo = { key: 0, class: "px-slider--num" }; function bo(t, o, n, l, a, r) { return e.openBlock(), e.createElementBlock("div", { class: e.normalizeClass(["px-slider--contianer flx__center", { "px-slider-active": t.state.active }]), onMousedown: o[2] || (o[2] = e.withModifiers((...i) => t.onMousedown && t.onMousedown(...i), ["stop"])) }, [e.renderSlot(t.$slots, "title", {}, () => [t.title ? (e.openBlock(), e.createElementBlock("span", ko, e.toDisplayString(t.title), 1)) : e.createCommentVNode("v-if", !0)]), e.createElementVNode("div", { class: "px-slider--group", onMousedown: o[1] || (o[1] = e.withModifiers((...i) => t.onMousedown && t.onMousedown(...i), ["stop"])) }, [e.createElementVNode("div", wo, [e.createElementVNode("div", { class: "px-slider--bar__active", style: e.normalizeStyle({ width: `${t.barActiveWidth * 100}%`, left: `${t.barActiveLeft * 100}%` }) }, null, 4), e.createElementVNode("div", { class: "px-slider--btn", style: e.normalizeStyle({ width: t.btnSize + "px", height: t.btnSize + "px", left: `calc(${t.btnLeft * 100}% - ${t.btnSize / 2}px)` }), onMousedown: o[0] || (o[0] = e.withModifiers((...i) => t.onMousedown && t.onMousedown(...i), ["stop"])) }, null, 36)], 512)], 32), e.renderSlot(t.$slots, "footer", {}, () => [t.showValue ? (e.openBlock(), e.createElementBlock("span", xo, e.toDisplayString(`${t.sliderNum}%`), 1)) : e.createCommentVNode("v-if", !0)])], 34) } const Eo = w(yo, [["render", bo]]); S(Eo); const Bo = { isDot: Boolean, value: { type: [String, Number], default: "" }, maxCount: { type: Number, default: 99 }, color: { type: String, default: "" } }, No = e.defineComponent({ name: "PxButtonV2", props: Bo, setup(t, o) { return { content: e.computed(() => t.isDot ? "" : typeof t.value == "number" && typeof t.maxCount == "number" ? t.maxCount < t.value ? `${t.maxCount}+` : `${t.value}` : t.value) } } }), Vo = { class: "px-badge" }; function $o(t, o, n, l, a, r) { return e.openBlock(), e.createElementBlock("div", Vo, [e.renderSlot(t.$slots, "default"), e.createElementVNode("sup", { class: e.normalizeClass(["px-badge--content t-en-body-12", { "is-dot": t.isDot }]), style: e.normalizeStyle({ background: t.color }) }, e.toDisplayString(t.content), 7)]) } const So = w(No, [["render", $o]]); L(So); const _o = { id: { type: String, default: "" }, type: { type: String, default: "toast", validator(t) { return ["toast", "notification", "dialog"].includes(t) } }, icon: { type: String, default: "success", validator(t) { return ["success", "error", "warning", "info", "loading", "fontloading", "file", "upload"].includes(t) } }, message: { type: String, default: "" }, duration: { type: Number, default: 1500 }, position: { type: String, default: "top", validator(t) { return ["top", "bottom"].includes(t) } }, percent: { type: Number, default: 0 }, mask: { type: Boolean, default: !1 }, onClose: { type: Function, default: () => { } }, onConfirm: { type: Function, default: () => { } }, onCancel: { type: Function, default: () => { } }, confirmText: { type: String, default: "确认" }, cancelText: { type: String, default: "" } }, Mo = { width: "18.000000", height: "18.000000", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink" }, Lo = e.createElementVNode("desc", null, " Created with Pixso. ", -1), Do = e.createElementVNode("circle", { cx: "9.000000", cy: "9.000000", r: "9.000000", fill: "#40AB07" }, null, -1), Io = e.createElementVNode("path", { d: "", "fill-rule": "evenodd", fill: "#000000", "fill-opacity": "1.000000" }, null, -1), To = e.createElementVNode("path", { d: "M5.10938 9.39062L7.89062 12.3906L13 7", stroke: "#FFFFFF", "stroke-width": "2.000000", "stroke-linejoin": "round", "stroke-linecap": "round" }, null, -1), zo = e.createElementVNode("defs", null, null, -1), Fo = [Lo, Do, Io, To, zo]; function Ao(t, o) { return e.openBlock(), e.createElementBlock("svg", Mo, Fo) } const Po = { render: Ao }, jo = { width: "18.000000", height: "18.000000", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink" }, Ho = e.createElementVNode("desc", null, " Created with Pixso. ", -1), Zo = e.createElementVNode("circle", { cx: "9.000000", cy: "9.000000", r: "9.000000", fill: "#EF7300" }, null, -1), Oo = e.createElementVNode("path", { d: "", "fill-rule": "evenodd", fill: "#000000", "fill-opacity": "1.000000" }, null, -1), Ro = e.createElementVNode("path", { d: "M10 4L10 10C10 10.5586 9.56055 11 9 11C8.43945 11 8 10.5586 8 10L8 4C8 3.44141 8.43945 3 9 3C9.56055 3 10 3.44141 10 4L10 4M9 12C8.44727 12 8 12.4492 8 13C8 13.5508 8.44727 14 9 14C9.55273 14 10 13.5508 10 13C10 12.4492 9.55273 12 9 12L9 12Z", "fill-rule": "evenodd", fill: "#FFFFFF", "fill-opacity": "1.000000" }, null, -1), Uo = e.createElementVNode("defs", null, null, -1), Wo = [Ho, Zo, Oo, Ro, Uo]; function Ko(t, o) { return e.openBlock(), e.createElementBlock("svg", jo, Wo) } const Qo = { render: Ko }, Jo = { width: "18.000000", height: "18.000000", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink" }, Go = e.createElementVNode("desc", null, " Created with Pixso. ", -1), Yo = e.createElementVNode("circle", { cx: "9.000000", cy: "9.000000", r: "9.000000", fill: "#F43529" }, null, -1), qo = e.createElementVNode("path", { d: "", "fill-rule": "evenodd", fill: "#000000", "fill-opacity": "1.000000" }, null, -1), Xo = e.createElementVNode("path", { d: "M9 7.59375L11.3047 5.28906C11.7012 4.89453 12.3242 4.89453 12.7188 5.28906C13.1152 5.68359 13.1152 6.30859 12.7188 6.70312L10.4141 9.00781L12.7207 11.3164C13.1172 11.7148 13.1172 12.3359 
763612.7207 12.7305C12.3262 13.1289 11.7031 13.1289 11.3066 12.7305L9 10.4219L6.69141 12.7305C6.29492 13.1289 5.67383 13.1289 5.27734 12.7305C4.88086 12.3359 4.88086 11.7148 5.27734 11.3164L7.58594 9.00781L5.2793 6.70312C4.88281 6.30859 4.88281 5.68359 5.2793 5.28906C5.67578 4.89453 6.29688 4.89453 6.69336 5.28906L9 7.59375Z", "fill-rule": "evenodd", fill: "#FFFFFF", "fill-opacity": "1.000000" }, null, -1), el = e.createElementVNode("defs", null, null, -1), tl = [Go, Yo, qo, Xo, el]; function ol(t, o) { return e.openBlock(), e.createElementBlock("svg", Jo, tl) } const ll = { render: ol }, nl = { width: "18.000000", height: "18.000000", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink" }, al = e.createElementVNode("desc", null, " Created with Pixso. ", -1), il = e.createElementVNode("circle", { cx: "9.000000", cy: "9.000000", r: "9.000000", fill: "#2E9DFD" }, null, -1), rl = e.createElementVNode("path", { d: "", "fill-rule": "evenodd", fill: "#000000", "fill-opacity": "1.000000" }, null, -1), cl = e.createElementVNode("path", { d: "M8 13L8 7C8 6.44141 8.43945 6 9 6C9.56055 6 10 6.44141 10 7L10 13C10 13.5586 9.56055 14 9 14C8.43945 14 8 13.5586 8 13L8 13M9 5C9.55273 5 10 4.55078 10 4C10 3.44922 9.55273 3 9 3C8.44727 3 8 3.44922 8 4C8 4.55078 8.44727 5 9 5L9 5Z", "fill-rule": "evenodd", fill: "#FFFFFF", "fill-opacity": "1.000000" }, null, -1), sl = e.createElementVNode("defs", null, null, -1), dl = [al, il, rl, cl, sl]; function ul(t, o) { return e.openBlock(), e.createElementBlock("svg", nl, dl) } const ml = { render: ul }, pl = e.defineComponent({ name: "PxMessage", emits: ["close", "confirm", "cancel"], components: { IconSuccess: Po, IconWarning: Qo, IconError: ll, IconInfo: ml, IconClose: z, IconHover: T }, props: _o, setup(t, o) { let n = e.ref(), l = e.ref(!1), a = e.ref(null); const r = () => { l.value = !0, t.duration && (a.value = setTimeout(() => { i(), clearTimeout(a.value) }, t.duration)) }, i = c => { var v; l.value = !1, c && ((v = t.onClose) == null || v.call(t, { e: c })), o.emit("close"), document.body.removeChild(n.value) }, d = c => { var v; (v = t.onConfirm) == null || v.call(t, { e: c }), o.emit("confirm"), i() }, s = c => { var v; (v = t.onCancel) == null || v.call(t, { e: c }), o.emit("cancel"), i() }; return e.onMounted(() => { r() }), { msgRef: n, visible: l, close: i, startTimer: r, confirm: d, cancle: s } } }), hl = ["id"], fl = { key: 0, class: "px-message--icon" }, vl = { class: "px-message--content t-title-12" }; function Cl(t, o, n, l, a, r) { const i = e.resolveComponent("IconSuccess"), d = e.resolveComponent("IconWarning"), s = e.resolveComponent("IconError"), c = e.resolveComponent("IconInfo"), v = e.resolveComponent("IconClose"), p = e.resolveComponent("IconHover"); return e.openBlock(), e.createBlock(e.Transition, { name: "px-message-fade", persisted: "" }, { default: e.withCtx(() => [e.withDirectives(e.createElementVNode("div", { ref: "msgRef", id: t.id, class: e.normalizeClass(["px-message", { "px-message__toast": t.type === "toast", "px-message__notification": t.type === "notification", "px-message__dialog": t.type === "dialog" }]) }, [t.icon ? (e.openBlock(), e.createElementBlock("span", fl, [t.icon === "success" ? (e.openBlock(), e.createBlock(i, { key: 0 })) : e.createCommentVNode("v-if", !0), t.icon === "warning" ? (e.openBlock(), e.createBlock(d, { key: 1 })) : e.createCommentVNode("v-if", !0), t.icon === "error" ? (e.openBlock(), e.createBlock(s, { key: 2 })) : e.createCommentVNode("v-if", !0), t.icon === "info" ? (e.openBlock(), e.createBlock(c, { key: 3 })) : e.createCommentVNode("v-if", !0)])) : e.createCommentVNode("v-if", !0), e.createElementVNode("p", vl, e.toDisplayString(t.message), 1), t.type === "notification" ? (e.openBlock(), e.createElementBlock("div", { key: 1, class: "px-message--close-btn flx__center", onClick: o[0] || (o[0] = (...C) => t.close && t.close(...C)) }, [e.createVNode(p, null, { default: e.withCtx(() => [e.createVNode(v)]), _: 1 })])) : e.createCommentVNode("v-if", !0), t.type === "dialog" ? (e.openBlock(), e.createElementBlock("div", { key: 2, class: e.normalizeClass(["px-message--btns t-title-12", { "single-btn": !t.cancelText }]) }, [e.createElementVNode("div", { class: "px-message--btn", onClick: o[1] || (o[1] = (...C) => t.confirm && t.confirm(...C)) }, e.toDisplayString(t.confirmText), 1), t.cancelText ? (e.openBlock(), e.createElementBlock("div", { key: 0, class: "px-message--btn", onClick: o[2] || (o[2] = (...C) => t.cancle && t.cancle(...C)) }, e.toDisplayString(t.cancelText), 1)) : e.createCommentVNode("v-if", !0)], 2)) : e.createCommentVNode("v-if", !0)], 10, hl), [[e.vShow, t.visible]])]), _: 1 }) } const gl = w(pl, [["render", Cl]]); S(gl); const yl = { value: { type: Number, default: 0 }, min: { type: Number, default: 0 }, max: { type: Number, default: 10 }, step: { type: Number, default: 1 }, minDisabledTip: { type: String, default: "" }, maxDisabledTip: { type: String, default: "" } }, kl = { width: "28.000000", height: "28.000000", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink" }, wl = e.createElementVNode("desc", null, " Created with Pixso. ", -1), xl = e.createElementVNode("g", { "clip-path": "url(#clip591_3511)" }, [e.createElementVNode("rect", { x: "20.000000", y: "13.000000", rx: "0.500000", width: "1.000000", height: "11.000000", transform: "rotate(90 20.000000 13.000000)", fill: "#414142" })], -1), bl = e.createElementVNode("defs", null, [e.createElementVNode("clipPath", { id: "clip591_3511" }, [e.createElementVNode("rect", { width: "28.000000", height: "28.000000", fill: "white" })])], -1), El = [wl, xl, bl]; function Bl(t, o) { return e.openBlock(), e.createElementBlock("svg", kl, El) } const O = { render: Bl }, Nl = { width: "28.000000", height: "28.000000", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink" }, Vl = e.createElementVNode("desc", null, " Created with Pixso. ", -1), $l = e.createElementVNode("g", { "clip-path": "url(#clip591_3516)" }, [e.createElementVNode("path", { d: "M14.5 8C14.2246 8 14 8.22266 14 8.5L14 13L9.5 13C9.22461 13 9 13.2227 9 13.5C9 13.7773 9.22461 14 9.5 14L14 14L14 18.5C14 18.7773 14.2246 19 14.5 19C14.7754 19 15 18.7773 15 18.5L15 14L19.5 14C19.7754 14 20 13.7773 20 13.5C20 13.2227 19.7754 13 19.5 13L15 13L15 8.5C15 8.22266 14.7754 8 14.5 8L14.5 8Z", "fill-rule": "evenodd", fill: "#414142", "fill-opacity": "1.000000" })], -1), Sl = e.createElementVNode("defs", null, [e.createElementVNode("clipPath", { id: "clip591_3516" }, [e.createElementVNode("rect", { width: "28.000000", height: "28.000000", fill: "white" })])], -1), _l = [Vl, $l, Sl]; function Ml(t, o) { return e.openBlock(), e.createElementBlock("svg", Nl, _l) } const R = { render: Ml }, Ll = e.defineComponent({ props: yl, emits: ["change"], components: { IconMinus: O, IconAdd: R }, setup(t, o) { const n = e.ref({}), l = e.ref(0), a = e.ref(!1), r = e.ref(0), i = e.computed(() => l.value === t.min), d = e.computed(() => i.value && t.minDisabledTip), s = e.computed(() => l.value === t.max), c = e.computed(() => i.value && t.maxDisabledTip), v = () => { a.value = !0, r.value = l.value }, p = k =>
7636 { a.value = !1, k.target.value = String(r.value) }, C = k => { a.value || (l.value = Number(k.target.value)) }, x = () => { r.value = l.value }, g = () => { l.value > t.max || l.value < t.min ? l.value = r.value : o.emit("change", l.value) }; let f = null, h = !1, E = 0; const m = k => { l.value + k <= t.max && l.value + k >= t.min && (l.value = l.value + k, o.emit("change", l.value)) }, N = () => { f && (h || m(E), clearInterval(f), f = null, h = !1), document.removeEventListener("mouseup", N) }, y = k => { f = setInterval(() => { h = !0, m(k * t.step) }, 100), E = k * t.step, document.addEventListener("mouseup", N) }, B = k => { i.value || y(k) }, b = k => { s.value || y(k) }, V = () => { n.value.blur() }; return e.watch([() => t.value, () => t.min, () => t.max], () => { t.value <= t.max && t.value >= t.min && (l.value = t.value, n.value.value = String(l.value)) }, { immediate: !0 }), { inputValue: l, props: t, inputRef: n, handleEnter: V, onSpinDown: B, onSpinUp: b, handleFocus: x, handleBlur: g, handleChange: C, handleCompositionStart: v, handleCompositionEnd: p, minDisabled: i, minShowTip: d, maxDisabled: s, maxShowTip: c } } }), Dl = { class: "px-number-input-container flx-align__center" }, Il = ["value", "min", "max"]; function Tl(t, o, n, l, a, r) {
7637                    const i = e.resolveComponent("IconMinus"), d = e.resolveComponent("IconAdd"); return e.openBlock(), e.createElementBlock("div", Dl, [e.createElementVNode("div", { class: e.normalizeClass(["px-number-input--icon flx__center px-number-input--icon-left", { "is-disabled": t.minDisabled }]), onMousedown: o[0] || (o[0] = s => t.onSpinDown(-1)) }, [t.minShowTip ? (e.openBlock(), e.createElementBlock(e.Fragment, { key: 0 }, [e.createCommentVNode(` <div
7638                      class="flx__center"
7639                      v-tippy="{
7640                        placement: 'bottom',
7641                        arrow: true,
7642                        a11y: false,
7643                        delay: [500, 100],
7644                      }"
7645                      :content="minDisabledTip"
7646                    > `), e.createVNode(i), e.createCommentVNode(" </div> ")], 64)) : (e.openBlock(), e.createBlock(i, { key: 1 }))], 34), e.createElementVNode("input", { ref: "inputRef", type: "number", class: "px-number-input--input", value: t.inputValue, min: t.min, max: t.max, onCompositionstart: o[1] || (o[1] = (...s) => t.handleCompositionStart && t.handleCompositionStart(...s)), onCompositionend: o[2] || (o[2] = (...s) => t.handleCompositionEnd && t.handleCompositionEnd(...s)), onKeydown: o[3] || (o[3] = e.withKeys((...s) => t.handleEnter && t.handleEnter(...s), ["enter"])), onChange: o[4] || (o[4] = (...s) => t.handleChange && t.handleChange(...s)), onFocus: o[5] || (o[5] = (...s) => t.handleFocus && t.handleFocus(...s)), onBlur: o[6] || (o[6] = (...s) => t.handleBlur && t.handleBlur(...s)) }, null, 40, Il), e.createElementVNode("div", { class: e.normalizeClass(["px-number-input--icon flx__center px-number-input--icon-right", { "is-disabled": t.maxDisabled }]), onMousedown: o[7] || (o[7] = s => t.onSpinUp(1)) }, [e.createVNode(d)], 34)])
7647                } const zl = w(Ll, [["render", Tl]]); S(zl, { IconMinus: O, IconAdd: R });
7647 const Fl = { key: 0, class: "cookie-setting-footer" }, Al = e.createElementVNode("div", { class: "cookie-info" }, [e.createElementVNode("div", { class: "cookie-into-title" }, "Cookies, anyone?"), e.createElementVNode("div", { class: "cookie-into-sub" }, " By clicking ”Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. ")], -1), Pl = { class: "cookie-btns flx-align__center" }, jl = e.createElementVNode("div", { class: "cookie-setting-context" }, [e.createTextVNode(" When you explore any website, it has the ability to store or retrieve information on your browser, primarily through cookies. This data may include details about you, your preferences, or your device, and is primarily utilized to ensure the smooth functioning of the site according to your expectations. While this information doesn't usually directly identify you, it significantly contributes to a more personalized web experience. Respecting your right to privacy, we provide you with the choice to opt-out of specific types of cookies. Simply click on the different category headings to gather more insights and tailor our default settings according to your preferences. Please be aware that disabling certain types of cookies may impact your overall site experience and the range of services we can offer. "), e.createElementVNode("a", { class: "cookie-sett
7647ing-learn", href: "https://pixso.net/cookie-policy" }, "Learn more")], -1), Hl = { class: "cookie-setting-manage" }, Zl = e.createElementVNode("div", { class: "cookie-setting-manage-title t-title-14" }, " Manage Cookies ", -1), Ol = { class: "manage-item-header flx-align__center-space__between" }, Rl = ["onClick"], Ul = { class: "ml__4 t-body-14" }, Wl = { key: 0, style: { color: "rgb(183, 185, 189)" } }, Kl = { key: 0, class: "manage-item-content mt__8" }, Ql = e.defineComponent({ __name: "index", setup(t) { const o = e.ref(!1), n = e.ref(!1), l = () => { o.value = !1, n.value = !0 }, a = g => { const h = JSON.stringify({ MarketingCookies: g }); localStorage.setItem("pxCookie", h) }, r = () => { a(!0), o.value = !1 }, i = () => { a(!1), o.value = !1 }, d = e.ref(!1), s = g => { const f = g.target.scrollTop; d.value = f !== 0 }, c = e.ref([{ title: "Strictly Necessary Cookies", label: "Always Active", extend: !0, content: "These vital cookies are essential for the website's operation and cannot be turned off. They respond to your actions, like setting privacy preferences or logging in. While you can configure your browser to manage these cookies, blocking them may affect certain site functions. Importantly, no personally identifiable information is stored by these cookies." }, { title: "Marketing Cookies", value: !0, extend: !0, content: "These cookies are used to observe user behavior and enhance your user experience. If you do not allow these cookies, we will be unable to optimize the user experience based on your usage patterns." }]), v = () => { n.value = !1, o.value = !0 }, p = () => { i(), n.value = !1 }, C = () => { a(c.value[1].value), n.value = !1 }, x = (g, f) => { c.value[g].value = f }; return e.onMounted(() => { localStorage.getItem("pxCookie") || (o.value = !0) }), (g, f) => (e.openBlock(), e.createElementBlock("div", null, [o.value ? (e.openBlock(), e.createElementBlock("div", Fl, [Al, e.createElementVNode("div", Pl, [e.createElementVNode("div", { class: "cookie-reject-btn", onClick: i }, " Reject All "), e.createVNode(e.unref(A), { class: "cookie-sett
7647ing-btn", size: "large", onClick: l }, { default: e.withCtx(() => [e.createTextVNode(" Cookies Settings ")]), _: 1 }), e.createVNode(e.unref(A), { class: "cookie-accept-btn", type: "primary", size: "large", onClick: r }, { default: e.withCtx(() => [e.createTextVNode(" Accept All Cookies ")]), _: 1 })])])) : e.createCommentVNode("v-if", !0), e.createVNode(e.unref(Ae), { class: "cookie-setting--dialog", visible: n.value, title: "Privacy Preference Center", width: 760, cancelText: "Reject All", sureText: "Confirm My Choices", onClose: v, onCancel: p, onSure: C }, { default: e.withCtx(() => [e.createElementVNode("div", { class: e.normalizeClass(["cookie-setting-content", { "cookie-setting-content-scroll": d.value }]), onScroll: s }, [jl, e.createElementVNode("div", Hl, [Zl, (e.openBlock(!0), e.createElementBlock(e.Fragment, null, e.renderList(c.value, (h, E) => (e.openBlock(), e.createElementBlock("div", { class: "cookie-setting-manage-item mb__8", key: h.title }, [e.createElementVNode("div", Ol, [e.createElementVNode("div", { class: "flx-align__center", onClick: m => h.extend = !h.extend }, [e.createElementVNode("img", { src: U, class: "manage-item-icon", style: e.normalizeStyle({ transform: h.extend ? "rotate(0deg)" : "rotate(-90deg)" }), alt: "", srcset: "" }, null, 4), e.createElementVNode("div", Ul, e.toDisplayString(h.title), 1)], 8, Rl), h.label ? (e.openBlock(), e.createElementBlock("div", Wl, e.toDisplayString(h.label), 1)) : (e.openBlock(), e.createBlock(e.unref(vo), { key: 1, modelValue: h.value, "onUpdate:modelValue": m => h.value = m, class: "manage-item-switch", onChange: m => x(E, m) }, null, 8, ["modelValue", "onUpdate:modelValue", "onChange"]))]), h.extend ? (e.openBlock(), e.createElementBlock("div", Kl, e.toDisplayString(h.content), 1)) : e.createCommentVNode("v-if", !0)]))), 128))])], 34)]), _: 1 }, 8, ["visible"])])) } }); e.createApp(Ql).mount("#index1713496655072");
7648            };
7649            loadVue3ForCookieSetting()
7650                .then(useVueSetting)
7651                .catch(error => console.error("[PxCookie] Failed to load isolated Vue3:", error));
7652        });
7653  </script>
vendor: 1 bytes, line 7653
7653
7654<script>
7655    // Module 1 卡片轮换动画
7656    (function () {
7657        const cards = document.querySelectorAll('.module-1__card');
7658        if (cards.length < 2) return;
7659
7660        let currentIndex = 0;
7661        let intervalId = null;
7662        let isPaused = false;
7663
7664        // 初始化卡片状态
7665        function initCards() {
7666            cards.forEach((card, index) => {
7667                if (index === 0) {
7668                    card.classList.add('module-1__card--active');
7669                } else {
7670                    card.classList.remove('module-1__card--active');
7671                }
7672            });
7673        }
7674
7675        // 切换到下一张卡片
7676        function switchCard() {
7677            if (isPaused) return;
7678
7679            const currentCard = cards[currentIndex];
7680            const nextIndex = (currentIndex + 1) % cards.length;
7681            const nextCard = cards[nextIndex];
7682
7683            // 移除当前卡片的 active 类
7684            currentCard.classList.remove('module-1__card--active');
7685
7686            // 添加下一张卡片的 active 类
7687            nextCard.classList.add('module-1__card--active');
7688
7689            currentIndex = nextIndex;
7690        }
7691
7692        // 启动定时器
7693        function startInterval() {
7694            if (intervalId) return;
7695            intervalId = setInterval(switchCard, 3000);
7696        }
7697
7698        // 停止定时器
7699        function stopInterval() {
7700            if (intervalId) {
7701                clearInterval(intervalId);
7702                intervalId = null;
7703            }
7704        }
7705
7706        // 为每个卡片添加 hover 事件
7707        cards.forEach(card => {
7708            card.addEventListener('mouseenter', () => {
7709                isPaused = true;
7710                stopInterval();
7711            });
7712
7713            card.addEventListener('mouseleave', () => {
7714                isPaused = false;
7715                startInterval();
7716            });
7717        });
7718
7719        // 初始化并启动动画
7720        initCards();
7721        startInterval();
7722    })();
7723</script>
7723
7724
7725<script>
7726    const bubbles = document.querySelectorAll('.module-5__bubble');
7727
7728    bubbles.forEach(bubble => {
7729        bubble.addEventListener('mousedown', function () {
7730            this.classList.add('is-clicking');
7731        });
7732    });
7733
7734    document.addEventListener('mouseup', function () {
7735        bubbles.forEach(bubble => {
7736            bubble.classList.remove('is-clicking');
7737        });
7738    });
7739</script>
vendor: 2 bytes, line 7739
7739
7740<script>
7741    // 初始化accordion的高度和点击事件
7742    function initAccordions() {
7743        const m6Panels = document.querySelectorAll('.module-6__panel');
7744
7745        m6Panels.forEach(panel => {
7746            const accordion = panel.querySelector('.module-6__accordion');
7747            const imageEl = panel.querySelector('.module-6__image');
7748
7749            if (!accordion) return;
7750
7751            const items = accordion.querySelectorAll('.module-6__ac-item');
7752            const panelKey = panel.dataset.tab;
7753
7754            // 设置初始高度
7755            items.forEach(itemEl => {
7756                const body = itemEl.querySelector('.module-6__ac-body');
7757                if (itemEl.classList.contains('is-open')) {
7758                    body.style.maxHeight = body.scrollHeight + 'px';
7759                } else {
7760                    body.style.maxHeight = '0px';
7761                }
7762            });
7763
7764            // 为每个header添加点击事件
7765            items.forEach((itemEl, index) => {
7766                const header = itemEl.querySelector('.module-6__ac-header');
7767                const body = itemEl.querySelector('.module-6__ac-body');
7768
7769                header.addEventListener('click', () => {
7770                    // 如果点击的是当前已打开的item,重置动画
7771                    if (itemEl.classList.contains('is-open')) {
7772                        if (panel.classList.contains('is-active')) {
7773                            startProgressAnimation(panel);
7774                        }
7775                        return;
7776                    }
7777
7778                    const allItems = accordion.querySelectorAll('.module-6__ac-item');
7779
7780                    // 移除所有item的激活状态和动画
7781                    allItems.forEach(it => {
7782                        const b = it.querySelector('.module-6__ac-body');
7783                        const h = it.querySelector('.module-6__ac-header');
7784                        it.classList.remove('is-open');
7785                        h.classList.remove('progress-animating');
7786                        b.style.maxHeight = '0px';
7787                    });
7788
7789                    // 打开当前item
7790                    itemEl.classList.add('is-open');
7791                    body.style.maxHeight = body.scrollHeight + 'px';
7792
7793                    // 更新图片显示
7794                    const rhs = panel.querySelector('.module-6__rhs');
7795                    const images = rhs.querySelectorAll('.module-6__image');
7796                    images.forEach((img, imgIndex) => {
7797                        img.style.display = imgIndex === index ? 'block' : 'none';
7798                    });
7799
7800                    // 触发进度条动画(如果panel是激活状态)
7801                    if (panel.classList.contains('is-active')) {
7802                        startProgressAnimation(panel);
7803                    }
7804                });
7805            });
7806        });
7807    }
7808
7809    // 页面加载完成后初始化
7810    if (document.readyState === 'loading') {
7811        document.addEventListener('DOMContentLoaded', () => {
7812            initAccordions();
7813        });
7814    } else {
7815        initAccordions();
7816    }
7817
7818    // 自动播放和进度条逻辑
7819    let progressTimeouts = new Map(); // 存储每个panel的超时计时器
7820    const PROGRESS_DURATION = 6000; // 每个item的进度时长(毫秒)
7821
7822    // 启动进度条动画
7823    function startProgressAnimation(panel) {
7824        const accordion = panel.querySelector('.module-6__accordion');
7825        if (!accordion) return;
7826
7827        const items = accordion.querySelectorAll('.module-6__ac-item');
7828        const currentItem = accordion.querySelector(
7829            '.module-6__ac-item.is-open'
7830        );
7831        if (!currentItem) return;
7832
7833        const currentIndex = Array.from(items).indexOf(currentItem);
7834        const currentHeader = currentItem.querySelector('.module-6__ac-header');
7835
7836        if (currentHeader) {
7837            // 移除所有header的动画类
7838            items.forEach(item => {
7839                item
7840                    .querySelector('.module-6__ac-header')
7841                    .classList.remove('progress-animating');
7842            });
7843
7844            // 为当前header设置动画
7845            currentHeader.style.setProperty(
7846                '--progress-duration',
7847                `${PROGRESS_DURATION}ms`
7848            );
7849            // 强制重绘以重新触发动画
7850            void currentHeader.offsetWidth;
7851            currentHeader.classList.add('progress-animating');
7852        }
7853
7854        // 清除旧的定时器
7855        if (progressTimeouts.has(panel)) {
7856            clearTimeout(progressTimeouts.get(panel));
7857        }
7858
7859        // 设置定时器切换到下一个item
7860        const timeout = setTimeout(() => {
7861            const nextIndex = (currentIndex + 1) % items.length;
7862            const nextItem = items[nextIndex];
7863            const nextHeader = nextItem.querySelector('.module-6__ac-header');
7864            const nextBody = nextItem.querySelector('.module-6__ac-body');
7865
7866            // 关闭所有item
7867            items.forEach(item => {
7868                const b = item.querySelector('.module-6__ac-body');
7869                const h = item.querySelector('.module-6__ac-header');
7870                item.classList.remove('is-open');
7871                h.classList.remove('progress-animating');
7872                b.style.maxHeight = '0px';
7873            });
7874
7875            // 打开下一个item
7876            nextItem.classList.add('is-open');
7877            nextBody.style.maxHeight = nextBody.scrollHeight + 'px';
7878
7879            // 更新图片显示
7880            const rhs = panel.querySelector('.module-6__rhs');
7881            const images = rhs.querySelectorAll('.module-6__image');
7882            images.forEach((img, imgIndex) => {
7883                img.style.display = imgIndex === nextIndex ? 'block' : 'none';
7884            });
7885
7886            // 继续下一轮动画
7887            startProgressAnimation(panel);
7888        }, PROGRESS_DURATION);
7889
7890        progressTimeouts.set(panel, timeout);
7891    }
7892
7893    // 停止进度条动画
7894    function stopProgressAnimation(panel) {
7895        if (progressTimeouts.has(panel)) {
7896            clearTimeout(progressTimeouts.get(panel));
7897            progressTimeouts.delete(panel);
7898        }
7899
7900        // 移除所有进度条动画类
7901        const headers = panel.querySelectorAll('.module-6__ac-header');
7902        headers.forEach(header => {
7903            header.classList.remove('progress-animating');
7904        });
7905    }
7906
7907    // Module 6 tabs
7908    const m6Panels = document.querySelectorAll('.module-6__panel');
7909    const m6Tabs = document.querySelectorAll('.module-6__tab');
7910    const m6TabsContainer = document.querySelector(
7911        '.common-module__tabs-boxs'
7912    );
7913
7914    m6Tabs.forEach(tab => {
7915        tab.addEventListener('click', () => {
7916            const key = tab.dataset.tab;
7917
7918            // 停止所有panel的动画
7919            m6Panels.forEach(p => stopProgressAnimation(p));
7920
7921            // 更新tab状态
7922            m6Tabs.forEach(t => {
7923                const active = t === tab;
7924                t.classList.toggle('is-active', active);
7925                t.setAttribute('aria-selected', active ? 'true' : 'false');
7926            });
7927
7928            // 在小屏幕下,将当前tab滚动到容器中间
7929            if (window.innerWidth <= 799 && m6TabsContainer) {
7930                const tabLeft = tab.offsetLeft;
7931                const tabWidth = tab.offsetWidth;
7932                const containerWidth = m6TabsContainer.offsetWidth;
7933                const scrollLeft = tabLeft - containerWidth / 2 + tabWidth / 2;
7934
7935                m6TabsContainer.scrollTo({
7936                    left: scrollLeft,
7937                    behavior: 'smooth',
7938                });
7939            }
7940
7941            // 更新panel状态
7942            m6Panels.forEach(p => {
7943                const isActive = p.dataset.tab === key;
7944                p.classList.toggle('is-active', isActive);
7945                if (isActive) {
7946                    // 如果已进入可视区,加载当前panel的图片
7947                    if (hasEnteredViewport) {
7948                        loadPanelImages(p);
7949                    }
7950
7951                    // 重置第一个 accordion item 的高度(无动画)
7952                    const firstItem = p.querySelector('.module-6__ac-item.is-open');
7953                    const firstBody = firstItem?.querySelector('.module-6__ac-body');
7954                    if (firstBody) {
7955                        // 临时禁用过渡动画
7956                        firstBody.classList.add('no-transition');
7957                        firstBody.style.maxHeight = firstBody.scrollHeight + 'px';
7958
7959                        // 立即移除 no-transition 类,恢复后续动画
7960                        requestAnimationFrame(() => {
7961                            firstBody.classList.remove('no-transition');
7962                        });
7963                    }
7964
7965                    // 延迟启动新panel的进度动画,确保DOM已更新
7966                    setTimeout(() => {
7967                        const module6Element = document.querySelector('.module-6');
7968                        const rect = module6Element.getBoundingClientRect();
7969                        const isVisible =
7970                            rect.top < window.innerHeight && rect.bottom > 0;
7971                        if (isVisible) {
7972                            startProgressAnimation(p);
7973                        }
7974                    }, 100);
7975                }
7976            });
7977        });
7978    });
7979
7980    // 使用IntersectionObserver监听模块进入可视区
7981    let hasEnteredViewport = false; // 标记是否已进入可视区
7982
7983    // 加载指定panel的第一张图片
7984    function loadPanelFirstImage(panel) {
7985        const firstImage = panel.querySelector(
7986            '.module-6__image[data-index="0"]'
7987        );
7988        if (firstImage && !firstImage.complete) {
7989            firstImage.loading = 'eager';
7990            const src = firstImage.src;
7991            firstImage.src = '';
7992            firstImage.src = src;
7993        }
7994    }
7995
7996    // 加载所有panel的第一张图片
7997    function loadAllPanelsFirstImage(module) {
7998        const allPanels = module.querySelectorAll('.module-6__panel');
7999        allPanels.forEach(panel => {
8000            loadPanelFirstImage(panel);
8001        });
8002    }
8003
8004    // 加载指定panel的所有图片
8005    function loadPanelImages(panel) {
8006        const images = panel.querySelectorAll('.module-6__image');
8007        images.forEach(img => {
8008            if (!img.complete) {
8009                img.loading = 'eager';
8010                const src = img.src;
8011                img.src = '';
8012                img.src = src;
8013            }
8014        });
8015    }
8016
8017    const module6Observer = new IntersectionObserver(
8018        entries => {
8019            entries.forEach(entry => {
8020                const module = entry.target;
8021                const activePanel = module.querySelector(
8022                    '.module-6__panel.is-active'
8023                );
8024
8025                if (entry.isIntersecting) {
8026                    // 进入可视区,加载所有panel的第一张图片
8027                    if (!hasEnteredViewport) {
8028                        loadAllPanelsFirstImage(module);
8029                        // 额外加载当前激活panel的所有图片
8030                        if (activePanel) {
8031                            loadPanelImages(activePanel);
8032                        }
8033                        hasEnteredViewport = true;
8034                    }
8035
8036                    // 启动动画
8037                    if (activePanel) {
8038                        startProgressAnimation(activePanel);
8039                    }
8040                } else if (activePanel) {
8041                    // 离开可视区,停止动画
8042                    stopProgressAnimation(activePanel);
8043                }
8044            });
8045        },
8046        { threshold: 0.1 } // 10%可见时触发,提前一点开始加载
8047    );
8048
8049    const module6Element = document.querySelector('.module-6');
8050    if (module6Element) {
8051        module6Observer.observe(module6Element);
8052    }
8053</script>
vendor: 2 bytes, line 8053
8053
8054<script>
8055    (function () {
8056        const submitUrl = 'https://pixso.net/app/recent?aiEditPrompt=';
8057
8058        function bindPromptInput(config) {
8059            const inputContainer = document.querySelector(config.container);
8060            const textarea = inputContainer?.querySelector('textarea');
8061            const sendBtn = inputContainer?.querySelector(config.sendBtn);
8062            let typingTimer;
8063
8064            if (!inputContainer || !textarea || !sendBtn) return;
8065
8066            function triggerTypingGlow() {
8067                inputContainer.classList.remove('is-typing');
8068                void inputContainer.offsetWidth;
8069                inputContainer.classList.add('is-typing');
8070
8071                clearTimeout(typingTimer);
8072                typingTimer = setTimeout(() => {
8073                    inputContainer.classList.remove('is-typing');
8074                }, 360);
8075            }
8076
8077            function syncInputState(shouldTriggerGlow) {
8078                const hasText = Boolean(textarea.value.trim());
8079                inputContainer.classList.toggle('is-filled', hasText);
8080                sendBtn.setAttribute('aria-disabled', String(!hasText));
8081
8082                if (config.disabledClass) {
8083                    sendBtn.classList.toggle(config.disabledClass, !hasText);
8084                }
8085
8086                if (shouldTriggerGlow) {
8087                    triggerTypingGlow();
8088                }
8089            }
8090
8091            function submitPrompt() {
8092                const message = textarea.value.trim();
8093                if (!message) return;
8094
8095                window.location.href = `${submitUrl}${encodeURIComponent(message)}`;
8096            }
8097
8098            textarea.addEventListener('input', () => syncInputState(true));
8099            textarea.addEventListener('keydown', (event) => {
8100                if (event.key === 'Enter' && !event.shiftKey) {
8101                    event.preventDefault();
8102                    submitPrompt();
8103                }
8104            });
8105            sendBtn.addEventListener('click', submitPrompt);
8106            syncInputState(false);
8107        }
8108
8109        bindPromptInput({
8110            container: '.module-1__input-container',
8111            sendBtn: '.module-1__send-btn',
8112        });
8113
8114        bindPromptInput({
8115            container: '.module-8__input-container',
8116            sendBtn: '.module-8__send-btn',
8117            disabledClass: 'module-8__send-btn--disabled',
8118        });
8119
8120        let userInfo = null;
8121
8122        try {
8123            userInfo = JSON.parse(localStorage.getItem('BOSYUNCurrent'));
8124        } catch (error) {
8125            userInfo = null;
8126        }
8127
8128        if (userInfo) {
8129            document.querySelectorAll('.module-1__unlock-popover').forEach((popover) => {
8130                const desc = popover.querySelector('.module-1__popover-desc');
8131                const action = popover.querySelector('.module-1__popover-login');
8132
8133                if (desc) {
8134                    desc.textContent = 'Go to the workspace to upload images, choose design system attachments, and more.';
8135                }
8136
8137                if (action) {
8138                    action.textContent = 'Go to workspace';
8139                }
8140            });
8141        }
8142    })();
8143</script>
vendor: 2 bytes, line 8143
8143
8144<script>
8145    // Module 9 tabs logic
8146    function bindModule9TabEvents() {
8147        const m9Tabs = document.querySelectorAll('.module-9__tab');
8148        const m9Panels = document.querySelectorAll('.module-9__panel');
8149        const m9TabsContainer = document.querySelector('.module-9__tabs-boxs');
8150
8151        m9Tabs.forEach(tab => {
8152            tab.addEventListener('click', () => {
8153                // 如果点击的是当前激活的tab,不做处理
8154                if (tab.classList.contains('is-active')) {
8155                    return;
8156                }
8157
8158                const key = tab.dataset.tab;
8159
8160                m9Tabs.forEach(t => {
8161                    const active = t === tab;
8162                    t.classList.toggle('is-active', active);
8163                    t.setAttribute('aria-selected', active ? 'true' : 'false');
8164                });
8165
8166                // 切换panel显示
8167                m9Panels.forEach(panel => {
8168                    panel.classList.toggle('is-active', panel.dataset.panel === key);
8169                });
8170
8171                // 在小屏幕下,将当前tab滚动到容器中间
8172                if (window.innerWidth <= 799 && m9TabsContainer) {
8173                    const tabLeft = tab.offsetLeft;
8174                    const tabWidth = tab.offsetWidth;
8175                    const containerWidth = m9TabsContainer.offsetWidth;
8176                    const scrollLeft = tabLeft - containerWidth / 2 + tabWidth / 2;
8177
8178                    m9TabsContainer.scrollTo({
8179                        left: scrollLeft,
8180                        behavior: 'smooth',
8181                    });
8182                }
8183            });
8184        });
8185    }
8186
8187    // 使用 IntersectionObserver 监听 module-9 进入视口
8188    function observeModule9() {
8189        const module9 = document.querySelector('.module-9');
8190        if (!module9) return;
8191
8192        const observer = new IntersectionObserver(
8193            entries => {
8194                entries.forEach(entry => {
8195                    if (entry.isIntersecting) {
8196                        // 当 module-9 进入视口时,将所有图片改为 eager 加载
8197                        const images = module9.querySelectorAll('.module-9__image');
8198                        images.forEach(img => {
8199                            img.setAttribute('loading', 'eager');
8200                        });
8201                        // 加载后取消观察
8202                        observer.unobserve(module9);
8203                    }
8204                });
8205            },
8206            {
8207                rootMargin: '0px',
8208                threshold: 0.01,
8209            }
8210        );
8211
8212        observer.observe(module9);
8213    }
8214
8215    // 初始化
8216    bindModule9TabEvents();
8217    observeModule9();
8218</script>
vendor: 2 bytes, line 8218
8218
8219<script>
8220    // Module 10 数据配置
8221    const module10Data = {
8222        recommands: [
8223            {
8224                image: 'https://pixso.net/assets/media/image-remen-1-31a8405a1c77e208.webp',
8225                alt: 'Apple CarPlay design system',
8226                title: 'Apple CarPlay design system',
8227                desc: 'Design system',
8228                link: 'https://pixso.net/community/file/pzx8b-OuoNke2efKBase3g',
8229            },
8230            {
8231                image: 'https://pixso.net/assets/media/image-remen-2-79e21dda2e7e7b02.webp',
8232                alt: 'Material 3 Design Kit',
8233                title: 'Material 3 Design Kit',
8234                desc: 'Design system',
8235                link: 'https://pixso.net/community/file/BCAaRafsJUozYGzg1Tp59Q',
8236            },
8237            {
8238                image: 'https://pixso.net/assets/media/image-remen-3-887cf6b204407f55.webp',
8239                alt: 'Almaren chat UI kit',
8240                title: 'Almaren chat UI kit',
8241                desc: 'Mobile app',
8242                link: 'https://pixso.net/community/file/t7psZwK0AjPT4IWyvmMDIQ',
8243            },
8244            {
8245                image: 'https://pixso.net/assets/media/image-remen-4-f9c16483960438b9.webp',
8246                alt: 'Linear-style web visuals',
8247                title: 'Linear-style web visuals',
8248                desc: 'Web design',
8249                link: 'https://pixso.net/community/file/-mf6JYpLGEDm2WwWpAmgpA',
8250            },
8251            {
8252                image: 'https://pixso.net/assets/media/image-remen-5-8c8d2c931d1d6298.webp',
8253                alt: 'ByteDance arco design system',
8254                title: 'ByteDance arco design system',
8255                desc: 'Design system',
8256                link: 'https://pixso.net/community/file/CpEqaBMsnJJkWs8WyLbcmA',
8257            },
8258            {
8259                image: 'https://pixso.net/assets/media/image-remen-6-942b318dad92b984.webp',
8260                alt: 'HarmonyOS Component Library',
8261                title: 'HarmonyOS Component Library',
8262                desc: 'Design system',
8263                link: 'https://pixso.net/community/file/vRFafeEEePNb_nVoCkQwQA',
8264            },
8265            {
8266                image: 'https://pixso.net/assets/media/image-remen-7-a23b4fc176974c8b.webp',
8267                alt: 'iOS and iPadOS 26',
8268                title: 'iOS and iPadOS 26',
8269                desc: 'Design system',
8270                link: 'https://pixso.net/community/file/2wTRVgXdAngzsQQ35l7i-A',
8271            },
8272            {
8273                image: 'https://pixso.net/assets/media/image-remen-8-a663fcd8bc519a48.webp',
8274                alt: '3D Avatar Assets',
8275                title: '3D Avatar Assets',
8276                desc: 'Illustrations',
8277                link: 'https://pixso.net/community/file/-0tQKVHDVFjoyeDaO3w6Ew',
8278            },
8279            {
8280                image: 'https://pixso.net/assets/media/image-remen-9-74e95bc012d6c23c.webp',
8281                alt: 'Fitness app UI kit',
8282                title: 'Fitness app UI kit',
8283                desc: 'Mobile app',
8284                link: 'https://pixso.net/community/file/OUKTLv9L24f2mYI-7M_NUw',
8285            },
8286            {
8287                image: 'https://pixso.net/assets/media/image-remen-10-c7944e9cd732b096.webp',
8288                alt: 'Finance app UI kit',
8289                title: 'Finance app UI kit',
8290                desc: 'Mobile app',
8291                link: 'https://pixso.net/community/file/vDv1vRaXOFz7cfQ5ShcC0A',
8292            },
8293            {
8294                image: 'https://pixso.net/assets/media/image-remen-11-3ab24b6a93ca7855.webp',
8295                alt: 'Dashboard Ul templates',
8296                title: 'Dashboard Ul templates',
8297                desc: 'Web design',
8298                link: 'https://pixso.net/community/file/5rVlYJY7F5tq--6PQ6I7Sg',
8299            },
8300            {
8301                image: 'https://pixso.net/assets/media/image-remen-12-858f953db24ee813.webp',
8302                alt: 'TDesign',
8303                title: 'TDesign',
8304                desc: 'Design system',
8305                link: 'https://pixso.net/community/file/Eq63tcdp7DLhNSzHwUR9YA',
8306            },
8307            {
8308                image: 'https://pixso.net/assets/media/image-remen-13-33a9fe0af85202cd.webp',
8309                alt: 'Glassmorphism icons',
8310                title: 'Glassmorphism icons',
8311                desc: 'Icon',
8312                link: 'https://pixso.net/community/file/MwjP6ll6hJNDfYpYE7fvXw',
8313            },
8314            {
8315                image: 'https://pixso.net/assets/media/image-remen-14-2bf2cf48e127ec0f.webp',
8316                alt: 'Ant Design',
8317                title: 'Ant Design',
8318                desc: 'Design system',
8319                link: 'https://pixso.net/community/file/R8CXYv9rZuUoqacyhdpHqQ',
8320            },
8321            {
8322                image: 'https://pixso.net/assets/media/add18-30e4efa36baa3bd2.svg',
8323                alt: '',
8324                title: 'More',
8325                desc: '',
8326                link: 'https://pixso.net/community/home',
8327                isAddCard: true,
8328            },
8329        ]
8330    };
8331
8332    // 渲染卡片内容 - 所有tab最后4个项目都组合成大卡片
8333    function renderModule10Panel(tabKey) {
8334        const items = module10Data[tabKey];
8335        if (!items) return;
8336        const grid = document.querySelector(
8337            '.module-10__panel .module-10__grid'
8338        );
8339        if (!grid) return;
8340        grid.innerHTML = '';
8341
8342        // 所有tab都将最后4个items组合成一个大卡片
8343        if (items.length >= 4) {
8344            const normalItems = items.slice(0, -4);
8345            const groupedItems = items.slice(-4);
8346
8347            // 渲染普通卡片
8348            normalItems.forEach(item => {
8349                const card = document.createElement('a');
8350                card.className = 'module-10__card';
8351                card.href = item.link;
8352                card.target = '_blank';
8353                card.innerHTML = `
8354        <div class="module-10__card-image">
8355          <img src="${item.image}" alt="${item.alt}" loading="lazy" />
8356        </div>
8357        <div class="module-10__card-content">
8358          <div class="module-10__card-title">${item.title}</div>
8359          <p class="module-10__card-desc">${item.desc}</p>
8360        </div>
8361      `;
8362                grid.appendChild(card);
8363            });
8364
8365            // 创建组合大卡片
8366            const groupCard = document.createElement('div');
8367            groupCard.className = 'module-10__card module-10__card--group';
8368
8369            const groupGrid = document.createElement('div');
8370            groupGrid.className = 'module-10__card-group-grid';
8371
8372            // 在大卡片内创建4个小卡片
8373            groupedItems.forEach(item => {
8374                const smallCard = document.createElement('a');
8375                smallCard.className = `module-10__card module-10__card--small ${item.isAddCard ? 'no-image' : ''
8376                    }`;
8377                smallCard.href = item.link;
8378                smallCard.target = '_blank';
8379                smallCard.innerHTML = `
8380        <div class="module-10__card-image ${item.isAddCard ? 'no-image' : ''
8381                    }">
8382          <img src="${item.image}" alt="${item.alt}" loading="lazy" />
8383        </div>
8384        <div class="module-10__card-content">
8385          <div class="module-10__card-title">${item.title}</div>
8386          <p class="module-10__card-desc">${item.desc}</p>
8387        </div>
8388      `;
8389                groupGrid.appendChild(smallCard);
8390            });
8391
8392            const groupContent = document.createElement('div');
8393            groupContent.innerHTML = `
8394      <div class="module-10__card-content">
8395        <div class="module-10__card-title">Explore more</div>
8396        <p class="module-10__card-desc">Go to community</p>
8397      </div>
8398    `;
8399
8400            groupCard.appendChild(groupGrid);
8401            groupCard.appendChild(groupContent);
8402            grid.appendChild(groupCard);
8403        } else {
8404            // 如果项目少于4个,正常渲染
8405            items.forEach(item => {
8406                const card = document.createElement('a');
8407                card.className = 'module-10__card';
8408                card.href = item.link;
8409                card.target = '_blank';
8410                card.innerHTML = `
8411        <div class="module-10__card-image">
8412          <img src="${item.image}" alt="${item.alt}" loading="lazy" />
8413        </div>
8414        <div class="module-10__card-content">
8415          <div class="module-10__card-title">${item.title}</div>
8416          <p class="module-10__card-desc">${item.desc}</p>
8417        </div>
8418      `;
8419                grid.appendChild(card);
8420            });
8421        }
8422    }
8423
8424    // tabs逻辑:切换tab时动态替换内容
8425    function bindModule10TabEvents() {
8426        const m10Tabs = document.querySelectorAll('.module-10__tab');
8427        const m10TabsContainer = document.querySelector(
8428            '.module-10__tabs-boxs'
8429        );
8430        m10Tabs.forEach(tab => {
8431            tab.addEventListener('click', () => {
8432                // 如果点击的是当前激活的tab,不做处理
8433                if (tab.classList.contains('is-active')) {
8434                    return;
8435                }
8436                const key = tab.dataset.tab;
8437                m10Tabs.forEach(t => {
8438                    const active = t === tab;
8439                    t.classList.toggle('is-active', active);
8440                    t.setAttribute('aria-selected', active ? 'true' : 'false');
8441                });
8442
8443                // 切换tab时动态渲染对应内容
8444                renderModule10Panel(key);
8445
8446                // 在小屏幕下,将当前tab滚动到容器中间
8447                if (window.innerWidth <= 799 && m10TabsContainer) {
8448                    const tabLeft = tab.offsetLeft;
8449                    const tabWidth = tab.offsetWidth;
8450                    const containerWidth = m10TabsContainer.offsetWidth;
8451                    const scrollLeft = tabLeft - containerWidth / 2 + tabWidth / 2;
8452
8453                    m10TabsContainer.scrollTo({
8454                        left: scrollLeft,
8455                        behavior: 'smooth',
8456                    });
8457                }
8458            });
8459        });
8460    }
8461
8462    // 初始化tab事件
8463    bindModule10TabEvents();
8464</script>
vendor: 2 bytes, line 8464
8464
8465<script>
8466    // Module 11 配置
8467    const MODULE_11_AUTO_SWITCH_DURATION = 6000; // 自动切换时长(毫秒)
8468
8469    // Module 11 数据配置
8470    const module11Data = [
8471        {
8472            id: 'wanxing',
8473            name: 'Wondershare',
8474            bgImage: 'https://pixso.net/assets/media/module-11-wanxing-bg-b7262147fa28d8f0.webp',
8475            logo: 'https://pixso.net/assets/media/module-11-wanxing-425c54edbeb8a6a8.webp',
8476            tabIcon: 'https://pixso.net/assets/media/module-11-wanxing-425c54edbeb8a6a8.webp',
8477            tabIconActive: 'https://pixso.net/assets/media/module-11-wanxing-425c54edbeb8a6a8.webp',
8478            text: 'We chose Pixso for two reasons: First, their customer-centric team is highly responsive to our needs. Second, compared to tools like Sketch and Adobe, Pixso offers a more intuitive user experience. Pixso eliminates the need for our designers and product managers to switch between fragmented tools, allowing us to complete our work in an all-in-one workspace and significantly boosting our productivity.',
8479            author: 'Dou Han',
8480            position: 'Manager, Wondershare',
8481            statNumber: '30%',
8482            statDesc: 'reduction in R&D cycle time',
8483        },
8484        {
8485            id: 'byd',
8486            name: 'BYD',
8487            bgImage: 'https://pixso.net/assets/media/module-11-byd-bg-6ecce5ce3fdf0dbe.webp',
8488            logo: 'https://pixso.net/assets/media/module-11-byd-logo-586682de484a2028.webp',
8489            tabIcon: 'https://pixso.net/assets/media/module-11-byd-ae6602110ad886df.webp',
8490            tabIconActive: 'https://pixso.net/assets/media/module-11-byd-actived-a9e5591c559f1ef5.webp',
8491            text: 'Pixso is more than just a design tool; it is a team-oriented product design collaboration platform. By integrating the entire workflow of design, prototyping, collaboration, and handoff into a single cloud-based tool, it has drastically improved the collaboration efficiency and productivity of our product design team. It is especially suited for teams pursuing agile development and remote collaboration.',
8492            author: 'Huang Haitao',
8493            position: 'IT team member, BYD',
8494            statNumber: '30%',
8495            statDesc: 'reduction in design handoff costs',
8496        },
8497        {
8498            id: 'sutpc',
8499            name: 'SUTPC',
8500            bgImage: 'https://pixso.net/assets/media/module-11-sutpc-bg-a2197c399cc0417f.webp',
8501            logo: 'https://pixso.net/assets/media/module-11-sutpc-logo-00e5696ac6da6493.webp',
8502            tabIcon: 'https://pixso.net/assets/media/module-11-sutpc-5bffc5456976a8e0.webp',
8503            tabIconActive: 'https://pixso.net/assets/media/module-11-sutpc-actived-64214584d30069c1.webp',
8504            text: 'Replacing Figma, which lacks on-premises deployment options in the market, with an alternative perfectly aligns with our current need for highly secure design tools. Partnering with Pixso has brought our designers significant advantages, such as low switching costs and the highly efficient communication that comes with working with our partner. We chose to team up directly with Pixso to meet our projects design needs.',
8505            author: 'Jiang Hui',
8506            position: 'Designer, SUTPC',
8507            statNumber: '40%',
8508            statDesc: 'increase in design collaboration efficiency',
8509        },
8510        {
8511            id: 'huichuan',
8512            name: 'INOVANCE',
8513            bgImage: 'https://pixso.net/assets/media/module-11-huichuan-bg-20c79c5b70777a36.webp',
8514            logo: 'https://pixso.net/assets/media/module-11-huichuan-logo-091b04c45c3f4b7c.webp',
8515            tabIcon: 'https://pixso.net/assets/media/module-11-huichuan-3b23eea7c17eeab5.webp',
8516            tabIconActive: 'https://pixso.net/assets/media/module-11-huichuan-actived-4e36afd93a03d341.webp',
8517            text: 'By streamlining all workflows and cutting component reuse time in half, Pixso makes efficient design effortless, achieving real-time collaboration with zero communication costs. With cross-platform synchronization, version history, and multiplayer co-creation, Pixso simplifies complex coordination, allowing every design idea to be quickly brought to life.',
8518            author: 'Zou Ruixian',
8519            position: 'Designer, INOVANCE',
8520            statNumber: '300%',
8521            statDesc: 'increase in component & design asset reuse rate',
8522        },
8523    ];
8524
8525    // 渲染面板 - 更新现有面板的内容
8526    function renderPanel(data) {
8527        const panel = document.querySelector('.module-11__panel');
8528        panel.dataset.tab = data.id;
8529
8530        // 更新所有带data-field属性的元素
8531        panel.querySelector('[data-field="bgImage"]').src = data.bgImage;
8532        panel.querySelector('[data-field="bgImage"]').alt = data.name;
8533        // panel.querySelector('[data-field="logo"]').src = data.logo;
8534        // panel.querySelector('[data-field="logo"]').alt = data.name;
8535        panel.querySelector('[data-field="text"]').textContent = data.text;
8536        panel.querySelector('[data-field="author"]').textContent = data.author;
8537        panel.querySelector('[data-field="position"]').textContent =
8538            data.position;
8539        panel.querySelector('[data-field="statNumber"]').textContent =
8540            data.statNumber;
8541        panel.querySelector('[data-field="statDesc"]').textContent =
8542            data.statDesc;
8543    }
8544
8545    // 渲染tabs
8546    function renderTabs() {
8547        const tabsContainer = document.getElementById('module11Tabs');
8548        tabsContainer.innerHTML = module11Data
8549            .map(
8550                (item, index) => `
8551    <button
8552      class="module-11__tab ${index === 0 ? 'is-active' : ''}"
8553      data-tab="${item.id}"
8554      role="tab"
8555      aria-selected="${index === 0 ? 'true' : 'false'}"
8556    >
8557      <img src="${index === 0 ? item.tabIconActive : item.tabIcon
8558                    }" alt="${item.name}" loading="lazy" />
8559    </button>
8560  `
8561            )
8562            .join('');
8563    }
8564
8565    // 自动切换到下一个tab
8566    let autoSwitchTimer = null;
8567    let isModuleVisible = false;
8568
8569    function startAutoSwitch() {
8570        // 清除之前的定时器
8571        if (autoSwitchTimer) {
8572            clearTimeout(autoSwitchTimer);
8573        }
8574
8575        // 只有在视口内才启动定时器
8576        if (!isModuleVisible) return;
8577
8578        autoSwitchTimer = setTimeout(() => {
8579            const m11Tabs = document.querySelectorAll('.module-11__tab');
8580            const activeTab = document.querySelector('.module-11__tab.is-active');
8581
8582            if (activeTab && m11Tabs.length > 0) {
8583                // 找到当前激活tab的索引
8584                const currentIndex = Array.from(m11Tabs).indexOf(activeTab);
8585                // 计算下一个tab的索引(循环)
8586                const nextIndex = (currentIndex + 1) % m11Tabs.length;
8587                // 触发下一个tab的点击事件
8588                m11Tabs[nextIndex].click();
8589            }
8590        }, MODULE_11_AUTO_SWITCH_DURATION);
8591    }
8592
8593    function stopAutoSwitch() {
8594        if (autoSwitchTimer) {
8595            clearTimeout(autoSwitchTimer);
8596            autoSwitchTimer = null;
8597        }
8598    }
8599
8600    function pauseAnimation() {
8601        const activeTab = document.querySelector('.module-11__tab.is-active');
8602        if (activeTab) {
8603            activeTab.classList.remove('progress-animating');
8604        }
8605    }
8606
8607    function resumeAnimation() {
8608        const activeTab = document.querySelector('.module-11__tab.is-active');
8609        if (activeTab) {
8610            void activeTab.offsetWidth;
8611            activeTab.classList.add('progress-animating');
8612            activeTab.style.setProperty(
8613                '--progress-duration',
8614                MODULE_11_AUTO_SWITCH_DURATION + 'ms'
8615            );
8616        }
8617    }
8618
8619    // 监听模块是否在视口内
8620    function setupIntersectionObserver() {
8621        const module = document.querySelector('.module-11');
8622        if (!module) return;
8623
8624        const observer = new IntersectionObserver(
8625            entries => {
8626                entries.forEach(entry => {
8627                    if (entry.isIntersecting) {
8628                        // 进入视口
8629                        isModuleVisible = true;
8630                        resumeAnimation();
8631                        startAutoSwitch();
8632                    } else {
8633                        // 离开视口
8634                        isModuleVisible = false;
8635                        pauseAnimation();
8636                        stopAutoSwitch();
8637                    }
8638                });
8639            },
8640            {
8641                threshold: 0.3, // 至少30%可见时触发
8642            }
8643        );
8644
8645        observer.observe(module);
8646    }
8647
8648    // 绑定事件
8649    function bindEvents() {
8650        const m11Tabs = document.querySelectorAll('.module-11__tab');
8651        const m11Panel = document.querySelector('.module-11__panel');
8652        const m11TabsContainer = document.getElementById('module11Tabs');
8653
8654        m11Tabs.forEach(tab => {
8655            tab.addEventListener('click', () => {
8656                const key = tab.dataset.tab;
8657                const dataItem = module11Data.find(item => item.id === key);
8658
8659                if (dataItem) {
8660                    // 更新面板内容
8661                    renderPanel(dataItem);
8662
8663                    // 更新tabs激活状态
8664                    m11Tabs.forEach(t => {
8665                        const active = t === tab;
8666                        const tabId = t.dataset.tab;
8667                        const tabData = module11Data.find(item => item.id === tabId);
8668
8669                        // 移除之前的动画类
8670                        t.classList.remove('progress-animating');
8671
8672                        t.classList.toggle('is-active', active);
8673                        t.setAttribute('aria-selected', active ? 'true' : 'false');
8674
8675                        // 切换图片src
8676                        const img = t.querySelector('img');
8677                        if (img && tabData) {
8678                            img.src = active ? tabData.tabIconActive : tabData.tabIcon;
8679                        }
8680
8681                        // 为激活的tab添加动画
8682                        if (active) {
8683                            // 强制重绘以重启动画
8684                            void t.offsetWidth;
8685                            t.classList.add('progress-animating');
8686                            t.style.setProperty(
8687                                '--progress-duration',
8688                                MODULE_11_AUTO_SWITCH_DURATION + 'ms'
8689                            );
8690                        }
8691                    });
8692
8693                    // 在小屏幕下,将当前tab滚动到容器中间
8694                    if (window.innerWidth <= 799 && m11TabsContainer) {
8695                        const tabLeft = tab.offsetLeft;
8696                        const tabWidth = tab.offsetWidth;
8697                        const containerWidth = m11TabsContainer.offsetWidth;
8698                        const scrollLeft = tabLeft - containerWidth / 2 + tabWidth / 2;
8699
8700                        m11TabsContainer.scrollTo({
8701                            left: scrollLeft,
8702                            behavior: 'smooth',
8703                        });
8704                    }
8705
8706                    // 启动自动切换
8707                    startAutoSwitch();
8708                }
8709            });
8710        });
8711    }
8712
8713    // 初始化
8714    // document.addEventListener('DOMContentLoaded', () => {
8715    renderPanel(module11Data[0]); // 初始化第一个面板
8716    renderTabs();
8717    bindEvents();
8718    setupIntersectionObserver();
8719
8720    // 初始不自动启动,等待进入视口
8721    setTimeout(() => {
8722        const activeTab = document.querySelector('.module-11__tab.is-active');
8723        if (activeTab) {
8724            activeTab.style.setProperty(
8725                '--progress-duration',
8726                MODULE_11_AUTO_SWITCH_DURATION + 'ms'
8727            );
8728            // 不立即启动动画,等待IntersectionObserver触发
8729        }
8730    }, 100);
8731</script>
vendor: 2 bytes, line 8731
8731
8732<script>
8733    document.addEventListener('DOMContentLoaded', function () {
8734        document.querySelectorAll('.common-module__tab').forEach(tab => {
8735            if (!tab.dataset.label) {
8736                tab.dataset.label = tab.textContent.trim();
8737            }
8738        });
8739        const container = document.querySelector('.module-4__logos');
8740        if (!container || container.dataset.autoScrollReady === '1') return;
8741
8742        const items = Array.from(container.children);
8743        if (!items.length) return;
8744
8745        const trackA = document.createElement('div');
8746        trackA.className = 'module-4__logos-track';
8747        const trackB = document.createElement('div');
8748        trackB.className = 'module-4__logos-track';
8749        trackB.setAttribute('aria-hidden', 'true');
8750
8751        items.forEach(item => {
8752            trackA.appendChild(item);
8753            trackB.appendChild(item.cloneNode(true));
8754        });
8755
8756        container.appendChild(trackA);
8757        container.appendChild(trackB);
8758
8759        const gap = parseFloat(getComputedStyle(container).gap) || 12;
8760        let speed = 0.6;
8761        let offset = 0;
8762        let paused = false;
8763        let rafId = null;
8764        let singleWidth = 0;
8765
8766        function measure() {
8767            singleWidth = trackA.offsetWidth + gap;
8768        }
8769
8770        function step() {
8771            if (!paused) {
8772                offset -= speed;
8773                if (Math.abs(offset) >= singleWidth) {
8774                    offset += singleWidth;
8775                }
8776                trackA.style.transform = `translateX(${offset}px)`;
8777                trackB.style.transform = `translateX(${offset}px)`;
8778            }
8779            rafId = requestAnimationFrame(step);
8780        }
8781
8782        measure();
8783        step();
8784
8785        container.addEventListener('mouseenter', () => { paused = true; });
8786        container.addEventListener('mouseleave', () => { paused = false; });
8787
8788        window.addEventListener('resize', measure);
8789        container.dataset.autoScrollReady = '1';
8790    });
8791</script>
vendor: 1 bytes, line 8791
8791
8792<script>
8793(() => {
8794  const videos = document.querySelectorAll('video[data-lazy-video]');
8795  const playVideo = (video) => video.play().catch(() => {});
8796  if ('IntersectionObserver' in window) {
8797    const videoObserver = new IntersectionObserver((entries) => {
8798      entries.forEach((entry) => {
8799        if (entry.isIntersecting) playVideo(entry.target);
8800        else entry.target.pause();
8801      });
8802    }, { rootMargin: '300px 0px' });
8803    videos.forEach((video) => videoObserver.observe(video));
8804
8805    const module8 = document.querySelector('.module-8__content-bd');
8806    if (module8) {
8807      const backgroundObserver = new IntersectionObserver((entries, observer) => {
8808        if (entries.some((entry) => entry.isIntersecting)) {
8809          module8.classList.add('perf-bg-ready');
8810          observer.disconnect();
8811        }
8812      }, { rootMargin: '600px 0px' });
8813      backgroundObserver.observe(module8);
8814    }
8815  } else {
8816    videos.forEach(playVideo);
8817    document.querySelector('.module-8__content-bd')?.classList.add('perf-bg-ready');
8818  }
8819})();
8820</script>
vendor: 1 bytes, line 8820
8820
8821<script>
8822(() => {
8823  document.querySelectorAll('.module-2__bg-video').forEach((video) => {
8824    video.addEventListener('playing', () => {
8825      video.closest('.module-2__bg-video-box')?.classList.add('is-playing');
8826    }, { once: true });
8827  });
8828})();
8829</script>
vendor: 1 bytes, line 8829
8829
8830<script id="perf-mobile-cookie-copy">
8831(() => {
8832  const compactCookieCopy = () => {
8833    if (!window.matchMedia('(max-width: 799px)').matches) return;
8834    const detail = document.querySelector('.cookie-into-sub');
8835    if (!detail || detail.dataset.perfCompact === '1') return;
8836    const fullCopy = detail.textContent.trim();
8837    detail.setAttribute('aria-label', fullCopy);
8838    detail.setAttribute('title', fullCopy);
8839    detail.textContent = 'Cookies help improve your experience.';
8840    detail.dataset.perfCompact = '1';
8841  };
8842  compactCookieCopy();
8843  new MutationObserver(compactCookieCopy).observe(document.body, { childList: true, subtree: true });
8844})();
8845</script>
8845
8846
8847
8848
8849<script id="pixso-click-video-v1">
8850(function () {
8851  'use strict';
8852  var labels = {"idle": "Watch demo", "loading": "Loading…", "playing": "Pause", "paused": "Resume", "error": "Try again"};
8853  var players = [];
8854  function createPlayer(box, video, button) {
8855    if (!box || !video || !button) return null;
8856    var pending = false, request = 0, timer = 0, hasFrame = false;
8857    function paint(state) {
8858      box.setAttribute('data-video-state', state);
8859      box.setAttribute('aria-busy', state === 'loading' ? 'true' : 'false');
8860      button.disabled = state === 'loading';
8861      button.textContent = (state === 'playing' ? 'Ⅱ ' : state === 'loading' ? '◌ ' : '▶ ') + labels[state];
8862      button.setAttribute('aria-label', labels[state] + ' — ' + (video.getAttribute('aria-label') || 'Pixso'));
8863      button.setAttribute('aria-pressed', state === 'playing' ? 'true' : 'false');
8864    }
8865    function pause() {
8866      ++request; pending = false; clearTimeout(timer); video.pause();
8867      paint(hasFrame ? 'paused' : 'idle');
8868    }
8869    function play(url) {
8870      if (pending && (!url || url === video.getAttribute('src'))) return;
8871      var wanted = url || video.getAttribute('data-src');
8872      if (!wanted) return;
8873      var changed = video.getAttribute('src') !== wanted;
8874      var ownRequest = ++request;
8875      clearTimeout(timer); pending = true;
8876      if (changed) {
8877        video.pause(); hasFrame = false; box.classList.remove('is-playing');
8878        video.setAttribute('data-src', wanted);
8879        video.setAttribute('src', wanted);
8880        video.setAttribute('data-perf-hydrated', 'true');
8881        video.load();
8882      } else if (video.error) video.load();
8883      video.controls = true;
8884      paint('loading');
8885      timer = setTimeout(function () {
8886        if (ownRequest !== request || !pending) return;
8887        pending = false; paint('error');
8888      }, 60000);
8889      var promise = video.play();
8890      if (promise && promise.catch) promise.catch(function () {
8891        if (ownRequest !== request) return;
8892        clearTimeout(timer); pending = false; paint('error');
8893      });
8894    }
8895    button.addEventListener('click', function () {
8896      if (!video.paused && !video.ended) pause(); else play();
8897    });
8898    video.addEventListener('playing', function () {
8899      clearTimeout(timer); pending = false; hasFrame = true;
8900      box.classList.add('is-playing'); box.classList.add('is-video-switched'); paint('playing');
8901    });
8902    video.addEventListener('pause', function () { if (!pending && hasFrame) paint('paused'); });
8903    video.addEventListener('ended', function () { clearTimeout(timer); pending = false; paint('paused'); });
8904    video.addEventListener('error', function () { clearTimeout(timer); pending = false; paint('error'); });
8905    video.muted = true; video.playsInline = true;
8906    paint('idle');
8907    var player = {play:play, pause:pause, video:video, box:box};
8908    players.push(player);
8909    return player;
8910  }
8911  var mainBox = document.querySelector('.module-2__bg-video-box');
8912  var main = createPlayer(mainBox, mainBox && mainBox.querySelector('video'), mainBox && mainBox.querySelector('.pixso-demo-play'));
8913  if (main) {
8914    var container = document.querySelector('.module-2__contanier');
8915    var tabs = Array.prototype.slice.call(document.querySelectorAll('.module-2__tab'));
8916    function select(tab) {
8917      var index = tab.getAttribute('data-tab');
8918      tabs.forEach(function (item) {
8919        var active = item === tab;
8920        item.classList.toggle('is-actived', active);
8921        item.setAttribute('aria-pressed', active ? 'true' : 'false');
8922      });
8923      container.className = container.className.replace(/\bactived-\d+\b/g, '').trim() + ' actived-' + index;
8924      var poster = mainBox.querySelector('.module-2__bg-video-poster');
8925      if (poster) {
8926        var image = poster.querySelector('img');
8927        var mobile = poster.querySelector('source[media="(max-width: 799px)"]');
8928        var desktop = poster.querySelector('source[media="(min-width: 800px)"]');
8929        image.src = tab.getAttribute('data-demo-poster-mobile') || tab.getAttribute('data-demo-poster');
8930        if (mobile) mobile.srcset = image.src;
8931        if (desktop) desktop.srcset = tab.getAttribute('data-demo-poster');
8932      }
8933      var bg = container.querySelector('.module-2__bg-img');
8934      if (bg && !window.matchMedia('(max-width:799px)').matches) {
8935        bg.src = tab.getAttribute('data-demo-bg'); bg.removeAttribute('srcset');
8936      }
8937      main.play(tab.getAttribute('data-demo-video'));
8938    }
8939    tabs.forEach(function (tab) {
8940      tab.setAttribute('role', 'button'); tab.setAttribute('tabindex', '0');
8941      tab.setAttribute('aria-pressed', tab.classList.contains('is-actived') ? 'true' : 'false');
8942      tab.addEventListener('click', function () { select(tab); });
8943      tab.addEventListener('keydown', function (event) {
8944        if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); select(tab); }
8945      });
8946    });
8947    main.video.addEventListener('loadedmetadata', function () {
8948      if (main.video.videoWidth && main.video.videoHeight) mainBox.style.aspectRatio = main.video.videoWidth + ' / ' + main.video.videoHeight;
8949    });
8950  }
8951  var previewBox = document.querySelector('.module-8__preview-media');
8952  createPlayer(previewBox, previewBox && previewBox.querySelector('video'), previewBox && previewBox.querySelector('.pixso-demo-play'));
8953  document.addEventListener('visibilitychange', function () {
8954    if (document.hidden) players.forEach(function (player) { player.pause(); });
8955  });
8956  // Visibility changes may pause an already requested video; they never fetch or start one.
8957  if ('IntersectionObserver' in window) {
8958    var observer = new IntersectionObserver(function (entries) {
8959      entries.forEach(function (entry) {
8960        if (!entry.isIntersecting) players.forEach(function (player) { if (player.box === entry.target && !player.video.paused) player.pause(); });
8961      });
8962    });
8963    players.forEach(function (player) { observer.observe(player.box); });
8964  }
8965})();
8966
8967</script>
8967
8968
8969<script id="pixso-desktop-background-v1">
8970(function () {
8971  'use strict';
8972  var desktop = window.matchMedia('(min-width:800px)');
8973  function restoreDesktopBackground() {
8974    if (!desktop.matches) return;
8975    Array.prototype.forEach.call(document.querySelectorAll('.module-2__bg-img[data-desktop-src]'), function (image) {
8976      var container = image.closest('.module-2__contanier');
8977      var active = container && container.querySelector('.module-2__tab.is-actived');
8978      var source = (active && active.getAttribute('data-demo-bg')) || image.getAttribute('data-desktop-src');
8979      if (!source) return;
8980      // The decorative image is desktop-only; keep native loading="lazy".
8981      // A prior mobile srcset must not override the chosen desktop tab image.
8982      image.removeAttribute('srcset');
8983      image.removeAttribute('sizes');
8984      image.src = source;
8985      image.removeAttribute('data-desktop-src');
8986    });
8987  }
8988  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', restoreDesktopBackground, { once: true });
8989  else restoreDesktopBackground();
8990  if (desktop.addEventListener) desktop.addEventListener('change', restoreDesktopBackground);
8991  else if (desktop.addListener) desktop.addListener(restoreDesktopBackground);
8992})();
8993
8994</script>
8994
8995
8996</body>
8997  
8997<script>
8998function openLoginDialog() {
8999    document.querySelector(".login-mask").classList.add("login-mask__show")
9000  }
9001  
9002$('a').click(function(e) {
9003    const href = $(this).attr('href');
9004    if (href && (href.indexOf('pixso.net/app') === -1 || href.indexOf('pixso.net/app/editor') !== -1) || !href || href.indexOf('articles') !== -1) return
9005    e.preventDefault();
9006    var userInfo = JSON.parse(localStorage.getItem("BOSYUNCurrent"));
9007    if (userInfo != null) {
9008      if ($(this).attr('target') == '_blank') {
9009        window.open(href)
9010      } else {
9011        location.href = href;
9012      }
9013    } else {
9014        // openLoginDialog();
9015        location.href="https://pixso.net/user/login/?response_type=code&redirect_uri=https://pixso.net/app/&from=1&product=pixso&ux_mode=redirect"
9016    }
9017  })
9018  
9019  const link = "https://pixso.net/app/"
9020  function isURL(str) {
9021  const pattern = /^(?:(?:https?|ftp):\/\/)?(?:www\.)?[a-z0-9\-]+\.[a-z]{2,}(?::\d{2,5})?(?:\/[^?#]*)?(?:\?[^#]*)?(?:#.*?)?$/i;
9022  return pattern.test(str);
9023}
9024  window.addEventListener('message', function(e) {
9025    try {
9026    console.log("message",e);
9027      if(e.data.event === 'third-login'){
9028        const thirdUrl = e.data?.data;
9029        if(thirdUrl && isURL(thirdUrl)){
9030            location.href = thirdUrl
9031        }
9032      }
9033      
9034      if (e.data.event === 'login-success') {
9035        location.href = link
9036      } else if (e.data.event === 'close') {
9037        document.querySelector(".login-mask").classList.remove("login-mask__show")
9038      }
9039    } catch (error) {
9040      console.log(error)
9041    }
9042  })
9043  
9044  $(".close-tdesign-banner").click(function() {
9045    $(".Tdesign-banner").remove();
9046    $(".Tdesign-banner--btn-close").remove()
9047    let distance = document.documentElement.scrollTop;
9048    if (distance < 1 && window.location.href == 'https://pixso.net/index.html') {
9049    //   $('.navbar').addClass('bg-transparent')
9050    } else {
9051    //   $('.navbar').removeClass('bg-transparent')
9052    }
9053  })
9054  var baseLang = "";
9055  if (navigator.userLanguage) {
9056    baseLang = navigator.userLanguage.substring(0, 2).toLowerCase();
9057  } else {
9058    baseLang = navigator.language.substring(0, 2).toLowerCase();
9059  }
9060  
9061  
9062  function throttle(callback, limit) {
9063    var waiting = false;
9064    return function() {
9065      if (!waiting) {
9066        callback.apply(this, arguments);
9067        waiting = true;
9068        setTimeout(function() {
9069          waiting = false;
9070        }, limit);
9071      }
9072    }
9073  }
9074  const trackEventMap = {
9075      'header': 'gw_button',
9076      'question': 'gw_qa',
9077      'bottom': 'gw_bottom',
9078      'limit': 'starter_limit',
9079    }
9080  const headerPrimaryBtnsTrack = {
9081      'key': 'tab_category',
9082      'lang': 'pricing_oversea_lang',
9083      'plan': 'starter_limit_plan'
9084    }
9085    // test
9086
9087    
9088    let isSensors = false
9089    function track(event, properties) {
9090        console.log("event",event,"properties",properties)
9091      if (isSensors) {
9092        sensors.track(event, properties);
9093        console.log(event, properties);
9094      }
9095    }
9096    const throttleTrack = throttle(track, 50);
9097    
9098    function getIndex(_this, parent) {
9099      let trackIndex = $(_this).attr('data-track')
9100      if (trackIndex == undefined) {
9101        trackIndex = $(_this).parent(parent).attr('data-track')
9102      }
9103      return trackIndex
9104    }
9105    
9106    function commonBtnTrack(_this,event, key) {
9107      let trackIndex = getIndex(_this, '[data-track]')
9108      console.log(trackIndex,"trackIndex")
9109      if (trackIndex != undefined) {
9110        throttleTrack(event, {
9111          [key]: trackIndex
9112        })
9113      }
9114    }
9115    
9116     
9117
9118  $(function() {
9119    
9120        const sensors = window["sensors"]
9121        if (sensors != undefined) {
9122          isSensors = true
9123        }
9124    
9125    
9126    $('.headerPrimaryBtnsTrack').click(function() {
9127      commonBtnTrack(this,trackEventMap['header'],headerPrimaryBtnsTrack['key'])
9128    })
9129    
9130
9131    var isGoToHomePage = $("main").hasClass('goToHomePage') || $("body").hasClass('goToHomePage');
9132    console.log(isGoToHomePage,"isGoToHomePage")
9133    if (isGoToHomePage) {
9134      var langEnDom = $(".lang-en");
9135      var langJpDom = $(".lang-jp");
9136      var langKrDom = $(".lang-kr");
9137       var langRuDom = $(".lang-ru");
9138      var localLang = localStorage.getItem("lang");
9139      var pathName = window.location.pathname;
9140      var pageNameArray = window.location.pathname.split('/');
9141      var currentPageLang = pageNameArray[1];
9142      var currentPath = "";
9143      switch (currentPageLang) {
9144        case 'jp':
9145          currentPath = pathName.replace('/jp', '');
9146          console.log(currentPath,"currentPath")
9147          langEnDom.attr('href', '/' + currentPath);
9148          langKrDom.attr('href', '/kr/' + currentPath);
9149          langRuDom.attr('href','/ru/' + currentPath);
9150          document.cookie = "lang=jp;path=/";
9151          break;
9152        case 'kr':
9153          currentPath = pathName.replace('/kr', '');
9154          langEnDom.attr('href', '/' + currentPath);
9155          langJpDom.attr('href', '/jp/' + currentPath);
9156          langRuDom.attr('href','/ru/' + currentPath);
9157          document.cookie = "lang=kr;path=/";
9158          break;
9159         case 'ru':
9160            currentPath = pathName.replace('/ru', '');
9161            langEnDom.attr('href', '/' + currentPath);
9162            langJpDom.attr('href', '/jp' + currentPath);
9163            langKrDom.attr('href', '/kr' + currentPath);
9164            document.cookie = "lang=ru;path=/";
9165         break;
9166        default:
9167          // en
9168          if(pathName == '/pixso-giveaway/') {
9169              console.log("123")
9170              langEnDom.attr('href', window.location)
9171              langJpDom.attr('href', '/jp');
9172              langKrDom.attr('href', '/kr'); 
9173            langRuDom.attr('href', '/ru' + pathName);
9174          }else{
9175              langEnDom.attr('href', window.location)
9176              langJpDom.attr('href', '/jp' + pathName);
9177              langKrDom.attr('href', '/kr' + pathName); 
9178               langRuDom.attr('href', '/ru' + pathName);
9179            document.cookie = "lang=en;path=/";
9180          }
9181          
9182      }
9183    }else{
9184        var cookieLang = getCookie("lang");
9185        if (!cookieLang) {
9186          if (baseLang === 'kr') {
9187            document.cookie = "lang=kr;path=/";
9188          } else if (baseLang === 'jp') {
9189            document.cookie = "lang=jp;path=/";
9190          } else {
9191            document.cookie = "lang=en;path=/";
9192          }
9193        }
9194    }
9195  });
9196</script>
vendor: 1 bytes, line 9196
9196
9197<script>
9198    let iClose = document.querySelectorAll('.el-icon-arrow-down')
9199    let dlHeight = document.querySelectorAll('.dl--height')
9200    
9201    let useCasesHeight = 0
9202    let exploreHeight = 0
9203    let compareHeight = 0
9204    let supportHeight = 0
9205    let aboutHeight = 0
9206    
9207    let useCasesAll = document.querySelectorAll('.use-cases-tip')
9208    for(let i = 0; i<useCasesAll.length;i++) {
9209        useCasesHeight += useCasesAll[i].offsetHeight
9210    }
9211    
9212    let exploreAll = document.querySelectorAll('.explore-tip')
9213    for(let i = 0; i<exploreAll.length;i++) {
9214        exploreHeight += exploreAll[i].offsetHeight
9215    }
9216    
9217    let compareAll = document.querySelectorAll('.compare-tip')
9218    for(let i = 0; i<compareAll.length;i++) {
9219        compareHeight += compareAll[i].offsetHeight
9220    }
9221    
9222    let supportAll = document.querySelectorAll('.support-tip')
9223    for(let i = 0; i<supportAll.length;i++) {
9224        supportHeight += supportAll[i].offsetHeight
9225    }
9226    
9227    let aboutAll = document.querySelectorAll('.about-tip')
9228    for(let i = 0; i<aboutAll.length;i++) {
9229        aboutHeight += aboutAll[i].offsetHeight
9230    }
9231    
9232    for (let i = 0; i < iClose.length; i++) {
9233        dlHeight[i].onclick = function () {
9234            console.log(dlHeight[i].style.height);
9235            // if(dlHeight[i].style.height === '240px') {
9236            // if(dlHeight[i].style.height > '40px') {
9237            if(dlHeight[i].offsetHeight > 40) {
9238                dlHeight[i].style.height = '40px'
9239                iClose[i].style.transform = 'none'
9240                return
9241            }
9242            for(let j = 0;j < dlHeight.length; j++) {
9243                dlHeight[j].style.height = '40px'
9244                iClose[j].style.transform = 'none'
9245            }
9246            // console.log("1111",i)
9247            if(i == 0) {
9248                dlHeight[i].style.height = useCasesHeight + 44 + 'px'
9249            }else if (i == 1) {
9250                dlHeight[i].style.height = exploreHeight +44+ 'px'
9251            }else if (i == 2) {
9252                dlHeight[i].style.height = compareHeight + 44 + 'px'
9253            }else if (i == 3) {
9254                dlHeight[i].style.height = supportHeight + 44 + 'px'
9255            }else if (i == 4) {
9256                dlHeight[i].style.height = aboutHeight + 44 + 'px'
9257            }
9258            // dlHeight[i].style.height = '240px'
9259            iClose[i].style.transform = 'rotate(-180deg)'
9260        }
9261    }
9262</script>
vendor: 1 bytes, line 9262
9262
9263<script>
9264    // 页面加载完成后依次加载所有模块
9265    document.addEventListener('DOMContentLoaded', async function() {
9266        initScrollAnimations();
9267    });
9268    
9269    // 初始化滚动动画
9270    function initScrollAnimations() {
9271        // 创建Intersection Observer来监听元素进入可视区域
9272        const observer = new IntersectionObserver((entries) => {
9273            entries.forEach(entry => {
9274                if (entry.isIntersecting) {
9275                    // 元素进入可视区域时添加动画类
9276                    entry.target.classList.add('animate-in');
9277                } else {
9278                    // 元素离开可视区域时移除动画类,准备下次进入时重新触发
9279                    // entry.target.classList.remove('animate-in');
9280                }
9281            });
9282        }, {
9283            threshold: 0.1, // 当元素10%进入可视区域时触发
9284            rootMargin: '0px 0px -50px 0px' // 提前50px触发动画,让动画更自然
9285        });
9286
9287        // 找到所有需要滚动动画的元素并开始观察
9288        const animateElements = document.querySelectorAll('.scroll-animate-up');
9289        animateElements.forEach(element => {
9290            observer.observe(element);
9291        });
9292    }
9293</script>
9293
9294</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.