PageSourceSearch

https://pixso.net/pricing/

html pixso.net collected 2026-10-04 00:28:07 UTC 364,178 bytes, 7,722 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="Compare Pixso plans for individuals and teams. Review design files, collaboration, AI access, and enterprise options to choose a plan for your work.">
8<meta name="keywords" content="pixso pricing, pixso price, pricing for pixso">
9<title>Pixso Pricing Plans for Starter, Organization and Enterprise</title>
10<link rel="canonical" href="https://pixso.net/pricing/">
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 Pricing Plans for Starter, Organization and Enterprise">
15<meta property="og:description" content="Compare Pixso plans for individuals and teams. Review design files, collaboration, AI access, and enterprise options to choose a plan for your work.">
16<meta property="og:url" content="https://pixso.net/pricing/">
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 Pricing Plans for Starter, Organization and Enterprise">
24<meta name="twitter:description" content="Compare Pixso plans for individuals and teams. Review design files, collaboration, AI access, and enterprise options to choose a plan for your work.">
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<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
1404
1405<style>
1406    [v-cloak] {
1407        opacity: 0;
1408    }
1409
1410    p {
1411        margin-bottom: 0;
1412    }
1413
1414    .flx {
1415        display: flex;
1416    }
1417
1418    .flx-align__center {
1419        display: flex;
1420        align-items: center;
1421    }
1422
1423    .flx-align__center-space__between {
1424        display: flex;
1425        justify-content: space-between;
1426        align-items: center;
1427    }
1428
1429    .flx__center {
1430        display: flex;
1431        justify-content: center;
1432        align-items: center;
1433    }
1434
1435    body {
1436        overflow-x: hidden;
1437        width: 100vw;
1438    }
1439
1440    .content {
1441        display: block;
1442    }
1443
1444    .price-module__header {
1445        display: flex;
1446        margin-top: 53px;
1447        max-width: 86.25rem;
1448        height: 23.375rem;
1449        flex-direction: column;
1450        justify-content: center;
1451        align-items: center;
1452        gap: 1.25rem;
1453        border-right: 1px solid #EFF0F1;
1454        border-left: 1px solid #EFF0F1;
1455        border-bottom: 1px solid #EFF0F1;
1456        position: relative;
1457    }
1458
1459    .price-item-sub {
1460        color: rgba(0, 0, 0, 0.60);
1461
1462        font-size: 14px;
1463        font-style: normal;
1464        font-weight: 400;
1465        line-height: 115.296%;
1466        /* 16.141px */
1467        height: 36px;
1468        display: flex;
1469        align-items: center;
1470    }
1471
1472    .price-module__header h1 {
1473        color: #000;
1474        text-align: center;
1475        font-family: Figtree;
1476        font-size: 2.875rem;
1477        font-style: normal;
1478        font-weight: 700;
1479        line-height: 115.296%;
1480    }
1481
1482    .price-module__header-desc {
1483        gap: 0.625rem;
1484        color: #000;
1485        text-align: center;
1486
1487        font-size: 1rem;
1488        font-style: normal;
1489        font-weight: 400;
1490        line-height: 115.296%;
1491        flex-wrap: wrap;
1492        justify-content: center;
1493        /* 1.15294rem */
1494    }
1495
1496    .price-module__header-link {
1497        color: #306EFF;
1498        text-align: center;
1499
1500        font-size: 1rem;
1501        font-style: normal;
1502        font-weight: 400;
1503        line-height: 115.296%;
1504    }
1505
1506    .price-module__header-link:hover {
1507        color: #306EFF;
1508    }
1509
1510    .price-module__header-bg {
1511        position: absolute;
1512        width: 33.75rem;
1513        height: 11.25rem;
1514        bottom: 0;
1515    }
1516
1517    .price-module__header-bg.left {
1518        left: -253px;
1519    }
1520
1521    .price-module__header-bg.right {
1522        right: -253px;
1523    }
1524
1525    .price-module__plan {
1526        flex-wrap: wrap;
1527        position: relative;
1528    }
1529
1530    .price-module__plan::after {
1531        content: '';
1532        position: absolute;
1533        bottom: 0;
1534        left: -100vw;
1535        height: 1px;
1536        width: 200vw;
1537        background: #EFF0F1;
1538    }
1539
1540    .price-module__content-item {
1541        flex: 1;
1542        border-right: 1px solid #EFF0F1;
1543    }
1544
1545    .price-module__content-item:first-child {
1546        border-left: 1px solid #EFF0F1;
1547    }
1548
1549    .select-plan-item {
1550        display: flex;
1551        height: 48.3125rem;
1552        padding: 1.125rem;
1553        flex-direction: column;
1554        align-items: flex-start;
1555        gap: 0.625rem;
1556        flex: 1 0 0;
1557        min-width: 300px;
1558    }
1559
1560    .select-plan-item__header {
1561        display: flex;
1562        height: 7.1875rem;
1563        padding: 0.875rem;
1564        flex-direction: column;
1565        align-items: flex-start;
1566        gap: 0.5rem;
1567        flex-shrink: 0;
1568        align-self: stretch;
1569        border-radius: 0.75rem;
1570        background: #F2F3F5;
1571    }
1572
1573    .select-plan-item__pro-radio {
1574        display: flex;
1575        width: 100%;
1576        height: 1.75rem;
1577        padding: 0.1875rem;
1578        align-items: flex-start;
1579        flex-shrink: 0;
1580        border-radius: 0.5rem;
1581        background: rgba(0, 0, 0, 0.15);
1582    }
1583
1584    .select-plan-item__pro-radio-item {
1585        display: flex;
1586        padding: 0 0.625rem;
1587        justify-content: center;
1588        align-items: center;
1589        gap: 0.625rem;
1590        flex: 1 0 0;
1591        align-self: stretch;
1592        color: #FFF;
1593        text-align: center;
1594
1595        font-size: 0.75rem;
1596        font-style: normal;
1597        font-weight: 400;
1598        line-height: 115.296%;
1599        white-space: nowrap;
1600        cursor: pointer;
1601        /* 0.86469rem */
1602    }
1603
1604    .select-plan-item__pro-radio-item-tip {
1605        display: inline-block;
1606        opacity: 1;
1607        font-size: 0.625rem;
1608        font-weight: 400;
1609        line-height: 115.296%;
1610        opacity: 0.5;
1611    }
1612
1613    .select-plan-item__pro-radio-item.is-active {
1614        border-radius: 0.25rem;
1615        background: #FFF;
1616        color: #000;
1617    }
1618
1619    .select-plan-item__title {
1620        color: #000;
1621        text-align: center;
1622
1623        font-size: 1.25rem;
1624        font-style: normal;
1625        font-weight: 600;
1626        line-height: 115.296%;
1627        /* 1.44119rem */
1628    }
1629
1630    .select-plan-item__sub-title {
1631        color: rgba(0, 0, 0, 0.50);
1632        text-align: left;
1633        font-size: 0.75rem;
1634        font-style: normal;
1635        font-weight: 400;
1636        line-height: 115.296%;
1637        /* 0.86469rem */
1638    }
1639
1640    .select-plan-item__content {
1641        width: 100%;
1642    }
1643
1644    .select-plan-item__price-content {
1645        height: 14.5rem;
1646        width: 100%;
1647    }
1648
1649    .select-plan-item__price-row {
1650        display: flex;
1651        height: 3.625rem;
1652        padding: 0.375rem 0.625rem;
1653        justify-content: space-between;
1654        align-items: center;
1655        align-self: stretch;
1656    }
1657
1658    .select-plan-item__price-label {
1659        color: #000;
1660        text-align: center;
1661
1662        font-size: 0.875rem;
1663        font-style: normal;
1664        font-weight: 400;
1665        line-height: 115.296%;
1666        /* 1.00881rem */
1667    }
1668
1669    .select-plan-item__price-value {
1670        display: flex;
1671        align-items: center;
1672        gap: 0.12rem;
1673    }
1674
1675    .select-plan-item__price-value-number {
1676        color: #000;
1677        text-align: center;
1678        font-family: Figtree;
1679        font-size: 1rem;
1680        font-style: normal;
1681        font-weight: 600;
1682        line-height: 115.296%;
1683        /* 1.15294rem */
1684    }
1685
1686    .select-plan-item__price-value-unit {
1687        color: #000;
1688        text-align: center;
1689
1690        font-size: 0.875rem;
1691        font-style: normal;
1692        font-weight: 400;
1693        line-height: 115.296%;
1694        opacity: 0.5;
1695        /* 1.00881rem */
1696    }
1697
1698    .select-plan-item__price-label-text {
1699        text-align: left;
1700    }
1701
1702    .select-plan-item__price-label-icons {
1703        margin-top: 0.38rem;
1704        gap: 0.38rem;
1705    }
1706
1707    .select-plan-item__btn {
1708        margin-top: 1.24rem;
1709        display: flex;
1710        height: 2.75rem;
1711        padding: 0.625rem 0.75rem;
1712        justify-content: center;
1713        align-items: center;
1714        gap: 0.625rem;
1715        align-self: stretch;
1716        border-radius: 0.5rem;
1717        background: #FFF;
1718        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.10), 0 0 1px 0 rgba(0, 0, 0, 0.40);
1719        text-align: center;
1720
1721        font-size: 1rem;
1722        font-style: normal;
1723        font-weight: 400;
1724        line-height: 115.296%;
1725        transform-origin: center center;
1726        transition: all 0.2s ease-in-out;
1727        cursor: pointer;
1728        /* 1.15294rem */
1729    }
1730
1731    .select-plan-item__btn:hover {
1732        border-radius: 0.5rem;
1733        background: rgba(0, 0, 0, 0.03);
1734        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.10), 0 0 1px 0 rgba(0, 0, 0, 0.40);
1735    }
1736
1737    .select-plan-item__btn:active {
1738        transform: scale(0.98);
1739    }
1740
1741    .select-plan-item__btn.is-black {
1742        border-radius: 0.5rem;
1743        border: 1px solid #000;
1744        background: #222;
1745        box-shadow: 0 0.8px 0 0 rgba(255, 255, 255, 0.3) inset;
1746        color: #FFF;
1747    }
1748
1749    .select-plan-item__btn.is-black:hover {
1750        border-radius: 0.5rem;
1751        border: 1px solid #000;
1752        background: #303030;
1753        box-shadow: 0 0.8px 0 0 rgba(255, 255, 255, 0.3) inset;
1754    }
1755
1756    .select-plan-item__features {
1757        margin-top: 0.62rem;
1758    }
1759
1760    .select-plan-item__feature-item {
1761        display: flex;
1762        height: 1.875rem;
1763        padding: 0 0.5rem;
1764        align-items: center;
1765        gap: 0.25rem;
1766        align-self: stretch;
1767        color: rgba(0, 0, 0, 0.70);
1768        text-align: center;
1769
1770        font-size: 0.75rem;
1771        font-style: normal;
1772        font-weight: 400;
1773        line-height: 115.296%;
1774        /* 0.86469rem */
1775    }
1776
1777    .select-plan-item__feature-item.is-first {
1778        color: #000;
1779        text-align: center;
1780
1781        font-size: 0.75rem;
1782        font-style: normal;
1783        font-weight: 500;
1784        line-height: 115.296%;
1785        /* 0.86469rem */
1786        opacity: 0.5;
1787    }
1788
1789    .price-module__content-item:hover {
1790        background: #fafafa;
1791    }
1792
1793    .price-module__content-item:hover .select-plan-item__title {
1794        color: #fff;
1795    }
1796
1797    .price-module__content-item:hover .select-plan-item__sub-title {
1798        color: #fff;
1799    }
1800
1801    .price-module__content-item:hover .select-plan__item--free .select-plan-item__header {
1802        background: url("https://pixso.net/assets/media/free-price-bg-985a80f86cae1763.webp") no-repeat center;
1803        background-size: 100% 100%;
1804    }
1805
1806    .price-module__content-item:hover .select-plan__item--pro .select-plan-item__header {
1807        background: url("https://pixso.net/assets/media/pro-price-bg-e6c386c4d4fbf658.webp") no-repeat center;
1808        background-size: 100% 100%;
1809    }
1810
1811    .price-module__content-item:hover .select-plan__item--ent .select-plan-item__header {
1812        background: url("https://pixso.net/assets/media/ent-price-bg-8927a348457a4908.webp") no-repeat center;
1813        background-size: 100% 100%;
1814    }
1815
1816    .price-module__content-item:hover .select-plan__item--pri .select-plan-item__header {
1817        background: url("https://pixso.net/assets/media/pri-price-bg-fa7c8ab45b7e8fe8.webp") no-repeat center;
1818        background-size: 100% 100%;
1819    }
1820
1821    .price-module__example-title {
1822        color: #000;
1823        text-align: center;
1824
1825        font-size: 1rem;
1826        font-style: normal;
1827        font-weight: 600;
1828        line-height: 115.296%;
1829        padding-top: 3.56rem;
1830        opacity: 0.6;
1831        margin-bottom: 1.89rem;
1832        /* 1.15294rem */
1833    }
1834
1835    .price-module__example {
1836        padding: 0 7.5rem 3.56rem;
1837        position: relative;
1838        border-left: solid 1px #EFF0F1;
1839        border-right: solid 1px #EFF0F1;
1840    }
1841
1842    .price-module__example::before {
1843        content: '';
1844        position: absolute;
1845        bottom: 0;
1846        left: -100vw;
1847        height: 1px;
1848        width: 200vw;
1849        background: #EFF0F1;
1850    }
1851
1852    .price-module__example-list {
1853        display: grid;
1854        grid-template-columns: repeat(5, 1fr);
1855        row-gap: 0.63rem;
1856    }
1857
1858    .price-module__example-item {
1859        width: 100%;
1860    }
1861
1862    .price-module__example-item img {
1863        width: 8.6rem;
1864        height: 3.3rem;
1865        aspect-ratio: 137.60/52.80;
1866    }
1867
1868    @media(max-width:980px) {
1869        .price-module__example {
1870            padding: 0;
1871        }
1872    }
1873
1874    @media(max-width:770px) {
1875        .price-module__example-list {
1876            grid-template-columns: repeat(3, 1fr);
1877        }
1878    }
1879
1880    @media(max-width:430px) {
1881        .price-module__example-list {
1882            grid-template-columns: repeat(2, 1fr);
1883        }
1884    }
1885
1886
1887    .price-module__compare-bg {
1888        width: 100%;
1889        height: 3.75rem;
1890        background: url("https://pixso.net/assets/media/line-bg-df43389b6b97825d.webp") no-repeat center;
1891        background-size: 100% 100%;
1892    }
1893
1894    .price-module__compare {
1895        position: relative;
1896        padding-bottom: 6.88rem;
1897    }
1898
1899    .price-module__compare::before {
1900        content: '';
1901        position: absolute;
1902        top: 0;
1903        left: -100vw;
1904        height: 1px;
1905        width: 200vw;
1906        background: #EFF0F1;
1907    }
1908
1909    .price-module__compare::after {
1910        content: '';
1911        position: absolute;
1912        left: -100vw;
1913        top: 0;
1914        bottom: 0;
1915        right: 0;
1916        width: 200vw;
1917        background: #FBFBFB;
1918        z-index: -1;
1919    }
1920
1921    .price-module__version:before {
1922        content: '';
1923        position: absolute;
1924        top: 0;
1925        left: -100vw;
1926        height: 1px;
1927        width: 200vw;
1928        background: #EFF0F1;
1929    }
1930
1931
1932    .price-module__version:after {
1933        content: '';
1934        position: absolute;
1935        bottom: 0;
1936        left: -100vw;
1937        height: 1px;
1938        width: 200vw;
1939        background: #EFF0F1;
1940    }
1941
1942    .price-module__compare-title {
1943        color: #000;
1944        text-align: center;
1945
1946        font-size: 2.5rem;
1947        font-style: normal;
1948        font-weight: 600;
1949        line-height: 115.296%;
1950        padding: 6.88rem 0 3.12rem;
1951        position: relative;
1952        border-left: solid 1px #EFF0F1;
1953        border-right: solid 1px #EFF0F1;
1954        /* 2.88238rem */
1955    }
1956
1957    .price-module__compare-item {
1958        flex: 1;
1959        border-right: solid 1px #EFF0F1;
1960        min-width: 271px;
1961    }
1962
1963    .price-module__compare-item:hover {
1964        background: #fff;
1965    }
1966
1967    .price-module__compare-item:last-child {
1968        border-right: none;
1969    }
1970
1971    .price-module__compare-list {
1972        border: 1px solid #EFF0F1;
1973        flex-wrap: wrap;
1974    }
1975
1976    .price-module__compare-item-header {
1977        border-bottom: 1px solid #EFF0F1;
1978        padding: 24px 20px;
1979    }
1980
1981    .price-module__compare-item-name {
1982        color: #000;
1983
1984        font-size: 1rem;
1985        font-style: normal;
1986        font-weight: 600;
1987        line-height: 115.296%;
1988        margin-top: 1rem;
1989        /* 1.15294rem */
1990    }
1991
1992    .price-module__compare-item-sub {
1993        color: #000;
1994
1995        font-size: 0.875rem;
1996        font-style: normal;
1997        font-weight: 400;
1998        line-height: 115.296%;
1999        /* 1.00881rem */
2000        opacity: 0.4;
2001        margin-top: 0.5rem;
2002        min-height: 32px;
2003    }
2004
2005    .price-module__compare-item-content {
2006        padding: 1.5rem;
2007    }
2008
2009    .price-module__compare-item-content-item {
2010        height: 2.25rem;
2011        gap: 0.25rem;
2012        opacity: 0.4;
2013    }
2014
2015    .price-module__compare-item-content-item.is-active {
2016        opacity: 1;
2017    }
2018
2019    .price-module-feature-text {
2020        color: rgba(0, 0, 0, 0.80);
2021        text-align: center;
2022
2023        font-size: 0.875rem;
2024        font-style: normal;
2025        font-weight: 400;
2026        line-height: 115.296%;
2027        /* 1.00881rem */
2028    }
2029
2030    .price-module__compare-inner-bg {
2031        position: absolute;
2032        top: 0;
2033        left: 0;
2034        background: #FBFBFB;
2035    }
2036
2037    .price-module__version {
2038        padding-top: 6.88rem;
2039        padding-bottom: 6.68rem;
2040        border-right: 1px solid #EFF0F1;
2041        border-left: 1px solid #EFF0F1;
2042        position: relative;
2043    }
2044
2045    .price-module__version-title {
2046        color: #000;
2047        text-align: center;
2048
2049        font-size: 2.5rem;
2050        font-style: normal;
2051        font-weight: 600;
2052        line-height: 115.296%;
2053        /* 2.88238rem */
2054    }
2055
2056    .price-module__version-sub {
2057        color: #000;
2058        text-align: center;
2059
2060        font-size: 1rem;
2061        font-style: normal;
2062        font-weight: 400;
2063        line-height: 115.296%;
2064        /* 1.15294rem */
2065        opacity: 0.7;
2066        margin-top: 0.62rem;
2067        margin-bottom: 3.12rem;
2068    }
2069
2070    .price-module__version-header {
2071        height: 8rem;
2072        border: 1px solid #EFF0F1;
2073        border-left: none;
2074        border-right: none;
2075        background: #FDFDFD;
2076        position: sticky;
2077        top: 53px;
2078        z-index: 90;
2079        width: 100%;
2080    }
2081
2082    .price-module__version-header-item-list-blank {
2083        width: 100%;
2084        flex: 1;
2085        max-width: 28.5rem;
2086        opacity: 0;
2087    }
2088
2089    .price-module__version-header-item {
2090        width: 100%;
2091        max-width: 14.375rem;
2092        display: flex;
2093        padding: 1rem 1.5rem;
2094        flex-direction: column;
2095        justify-content: center;
2096        align-items: flex-start;
2097        gap: 0.875rem;
2098        flex: 1 0 0;
2099        align-self: stretch;
2100        border-left: 1px solid #EFF0F1;
2101    }
2102
2103    .price-module__version-header-item-label {
2104        color: #000;
2105        text-align: center;
2106
2107        font-size: 1rem;
2108        font-style: normal;
2109        font-weight: 600;
2110        line-height: 115.296%;
2111        /* 1.15294rem */
2112    }
2113
2114    .price-module__version-header-item-btn {
2115        display: flex;
2116        height: 2.125rem;
2117        padding: 0.625rem 0.75rem;
2118        justify-content: center;
2119        align-items: center;
2120        gap: 0.625rem;
2121        border-radius: 0.5rem;
2122        background: #FFF;
2123        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.10), 0 0 1px 0 rgba(0, 0, 0, 0.40);
2124        text-align: center;
2125
2126        font-size: 0.875rem;
2127        font-style: normal;
2128        font-weight: 400;
2129        line-height: 115.296%;
2130        transition: all 0.2s ease-in-out;
2131        cursor: pointer;
2132        /* 1.00881rem */
2133    }
2134
2135    .price-module__version-header-item-btn:hover {
2136        background: rgba(0, 0, 0, 0.03);
2137        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.10), 0 0 1px 0 rgba(0, 0, 0, 0.40);
2138    }
2139
2140    .price-module__version-header-item-btn:active {
2141        transform: scale(0.98);
2142    }
2143
2144    .version-header__item--team .price-module__version-header-item-btn,
2145    .version-header__item--ent .price-module__version-header-item-btn {
2146        border-radius: 0.5rem;
2147        border: 1px solid #000;
2148        background: #222;
2149        box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.30) inset;
2150        color: #FFF;
2151    }
2152
2153    .version-header__item--team .price-module__version-header-item-btn:hover,
2154    .version-header__item--ent .price-module__version-header-item-btn:hover {
2155        border: 1px solid #000;
2156        background: #303030;
2157        box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.30) inset;
2158    }
2159
2160    .price-module-version-content-item-title {
2161        display: flex;
2162        height: 3.75rem;
2163        align-items: center;
2164        width: 100%;
2165        justify-content: space-between;
2166        align-self: stretch;
2167        /*border-right: 1px solid #EFF0F1;*/
2168        /*border-left: 1px solid #EFF0F1;*/
2169        border-bottom: 1px solid #EFF0F1;
2170        background: #FFF;
2171        color: #000;
2172        text-align: center;
2173
2174        font-size: 1rem;
2175        font-style: normal;
2176        font-weight: 600;
2177        line-height: 115.296%;
2178        padding: 0 1.12rem;
2179        /* 1.15294rem */
2180        cursor: pointer;
2181    }
2182
2183    .price-module-version-content-item-title:hover {
2184        background: #FAFAFA;
2185    }
2186
2187    .price-module-version-content-item-title.sticky {
2188        position: sticky;
2189        top: 179px;
2190        z-index: 10;
2191        width: 100%;
2192    }
2193
2194    .features-item-label {
2195        width: 100%;
2196        flex: 1;
2197        max-width: 28.5rem;
2198        padding: 0 1.12rem;
2199        justify-content: space-between;
2200        color: rgba(0, 0, 0, 0.80);
2201        text-align: center;
2202
2203        font-size: 0.875rem;
2204        font-style: normal;
2205        font-weight: 400;
2206        line-height: 115.296%;
2207        /* 1.00881rem */
2208    }
2209
2210    .features-item-label.with-underline {
2211        text-decoration-line: underline;
2212        text-decoration-style: solid;
2213        text-decoration-skip-ink: none;
2214        text-decoration-thickness: 6%;
2215        /* 0.84px */
2216        text-underline-offset: 25%;
2217        /* 3.5px */
2218        text-underline-position: from-font;
2219    }
2220
2221    .tip-icon {
2222        position: relative;
2223    }
2224
2225    .tip-text {
2226        white-space: nowrap;
2227        width: fit-content;
2228        background-color: black;
2229        color: #fff;
2230        text-align: left;
2231        border-radius: 6px;
2232        padding: 8px 12px;
2233        position: absolute;
2234        z-index: 99;
2235        bottom: 125%;
2236        left: 50%;
2237        margin-left: -60px;
2238        opacity: 0;
2239        visibility: hidden;
2240        transition: opacity 0.3s;
2241        font-size: 14px;
2242    }
2243
2244    .tip-text::after {
2245        content: '';
2246        position: absolute;
2247        top: 100%;
2248        left: 55px;
2249        border-width: 5px;
2250        border-style: solid;
2251        border-color: black transparent transparent transparent;
2252    }
2253
2254    .tip-icon:hover .tip-text {
2255        opacity: 1;
2256        visibility: visible;
2257    }
2258
2259    .price-module-version-content-item-features {
2260        border-bottom: 1px solid #EFF0F1;
2261        /*border-left: 1px solid #EFF0F1;*/
2262    }
2263
2264    .features-item {
2265        border-bottom: 1px solid #EFF0F1;
2266    }
2267
2268    .features-item:hover {
2269        background: #FAFAFA;
2270    }
2271
2272    .features-item:last-child {
2273        border-bottom: none;
2274    }
2275
2276    .features-item-children {
2277        flex: 1;
2278        /*border-right: 1px solid #EFF0F1;*/
2279    }
2280
2281    .features-item-children-item {
2282        width: 100%;
2283        max-width: 14.375rem;
2284        display: flex;
2285        padding: 1rem 1.5rem;
2286        flex-direction: column;
2287        justify-content: center;
2288        align-items: center;
2289        gap: 0.875rem;
2290        flex: 1;
2291        align-self: stretch;
2292        color: rgba(0, 0, 0, 0.80);
2293        text-align: center;
2294
2295        font-size: 0.875rem;
2296        font-style: normal;
2297        font-weight: 400;
2298        line-height: 115.296%;
2299        /* 1.00881rem */
2300        border-left: 1px solid #EFF0F1;
2301    }
2302
2303    .select-plan__subtitle span {
2304        opacity: 0.7;
2305        display: block;
2306        margin-left: 5px;
2307    }
2308
2309    .select-plan__subtitle img {
2310        display: block;
2311    }
2312
2313    .select-plan__version-item {
2314        margin-right: 5px;
2315    }
2316
2317    .select-plan__subtitle {
2318        position: absolute;
2319        bottom: 12px;
2320        font-size: 14px;
2321    }
2322
2323    .select-plan__subtitle {
2324        gap: 0.625rem;
2325        color: #000;
2326        text-align: center;
2327        font-size: 1rem;
2328        font-style: normal;
2329        font-weight: 400;
2330        line-height: 115.296%;
2331        flex-wrap: wrap;
2332        justify-content: center;
2333        /* 1.15294rem */
2334    }
2335
2336    @media (max-width: 1440px) {
2337        .price-module__version-header {
2338            display: grid;
2339            grid-template-columns: repeat(5, 1fr);
2340        }
2341
2342        .features-item {
2343            display: grid;
2344            grid-template-columns: 20% 80%;
2345        }
2346
2347        .features-item-label {
2348            font-size: 13px;
2349        }
2350
2351        .tip-text {
2352            font-size: 13px;
2353        }
2354
2355        .features-item-children-item {
2356            font-size: 13px;
2357        }
2358
2359        .features-item-children {
2360            display: grid;
2361            grid-template-columns: repeat(4, 1fr);
2362        }
2363    }
2364
2365    @media(max-width: 1268px) {
2366        .price-module__content-item {
2367            flex: auto;
2368            width: 50%;
2369        }
2370    }
2371
2372    @media(max-width: 1210px) {
2373        .price-module__header-bg {
2374            display: none;
2375        }
2376
2377        .price-module__compare-item {
2378            flex: auto;
2379            width: 50%;
2380        }
2381    }
2382
2383    @media (max-width: 886px) {
2384        .price-module-version-wrapper {
2385            max-width: 100%;
2386            overflow-x: auto;
2387        }
2388
2389        .price-module__version-header {
2390            width: 886px;
2391        }
2392
2393        .features-item:first-child {
2394            position: sticky;
2395            left: 0;
2396            z-index: 10;
2397        }
2398
2399        .price-module-version-content-item {
2400            width: 886px;
2401        }
2402    }
2403
2404    @media(max-width: 768px) {
2405        .price-module__header {
2406            height: 25rem;
2407        }
2408
2409        .price-module__content-item {
2410            flex: auto;
2411            width: 100%;
2412        }
2413
2414        .price-module__compare-item {
2415            flex: auto;
2416            width: 100%;
2417        }
2418    }
2419
2420    @media(max-width: 576px) {
2421        .price-module__header {
2422            height: 30rem;
2423        }
2424    }
2425
2426    /* Responsive */
2427    /* 1920+ */
2428    @media (min-width: 1920px) {
2429        .home-module__content {
2430            padding: 0 calc((100% - 1380px) / 2);
2431        }
2432    }
2433
2434    /* Large screen */
2435    /* 1860+ */
2436    @media (min-width: 1860px) and (max-width: 1919px) {
2437        .home-module__content {
2438            padding: 0 max(240px, calc((100% - 1380px) / 2));
2439        }
2440    }
2441
2442    /* Medium screen */
2443    /* 1280-1859 */
2444    @media (min-width: 1280px) and (max-width: 1859px) {
2445        .home-module__content {
2446            padding: 0 max(32px, calc((100% - 1380px) / 2));
2447        }
2448    }
2449
2450    /* Small screen */
2451    /* 1080-1279 */
2452    @media (min-width: 1080px) and (max-width: 1279px) {
2453        .home-module__content {
2454            padding: 0 max(32px, calc((100% - 1380px) / 2));
2455        }
2456    }
2457
2458    /* Tablet landscape */
2459    /* 800-1079 */
2460    @media (min-width: 800px) and (max-width: 1079px) {
2461        .home-module__content {
2462            padding: 0 max(32px, calc((100% - 1380px) / 2));
2463        }
2464    }
2465
2466    /* Mobile */
2467    /* 1-799 */
2468    @media (max-width: 799px) {
2469        .home-module__content {
2470            padding: 0 max(16px, calc((100% - 1380px) / 2));
2471        }
2472
2473    }
2474</style>
2475<style>
2476    .price-module__ai {
2477        position: relative;
2478    }
2479
2480    .stroke-wrapper-1_2 {
2481        position: relative;
2482        width: 100%;
2483        height: fit-content;
2484        display: flex;
2485        flex-shrink: 0;
2486    }
2487
2488    .stroke-1_2 {
2489        position: absolute;
2490        inset: 0px;
2491        border-radius: 0px 0px 0px 0px;
2492        pointer-events: none;
2493        border-width: 0px 0px 1px 0px;
2494        border-style: solid;
2495        box-sizing: border-box;
2496        border-color: rgba(239, 239.6999969482422, 241, 1);
2497    }
2498
2499    .Pixso-frame-1_3 {
2500        width: 100%;
2501        height: 100%;
2502        position: relative;
2503        flex-shrink: 0;
2504        display: flex;
2505        flex-direction: column;
2506        align-items: center;
2507        max-width: 1380px;
2508        background-color: rgba(250.2350311279297, 250.2350311279297, 250.2350311279297, 1);
2509    }
2510
2511    .frame-content-1_3 {
2512        display: flex;
2513        flex-direction: column;
2514        gap: 44px;
2515        align-items: center;
2516        max-width: 1380px;
2517        padding: 80px 0px 90px 0px;
2518        width: 100%;
2519        position: relative;
2520    }
2521
2522    .stroke-wrapper-1_3 {
2523        position: relative;
2524        width: 1380px;
2525        height: auto;
2526        display: flex;
2527        flex-shrink: 0;
2528        max-width: 1380px;
2529    }
2530
2531    .stroke-1_3 {
2532        position: absolute;
2533        inset: 0px;
2534        border-radius: 0px 0px 0px 0px;
2535        pointer-events: none;
2536        border-width: 0px 1px 0px 1px;
2537        border-style: solid;
2538        box-sizing: border-box;
2539        border-color: rgba(239, 240, 241, 1);
2540    }
2541
2542    .Pixso-paragraph-1_4 {
2543        font-size: 24px;
2544
2545        font-weight: 600;
2546        text-align: center;
2547        letter-spacing: 0em;
2548        line-height: 115.29569625854492%;
2549        color: rgba(0, 0, 0, 1);
2550        width: auto;
2551        height: auto;
2552        position: relative;
2553        flex-shrink: 0;
2554        white-space: pre;
2555        flex-grow: 0;
2556    }
2557
2558    .Pixso-frame-1_5 {
2559        width: 100%;
2560        height: auto;
2561        overflow: hidden;
2562        position: relative;
2563        flex-shrink: 0;
2564        display: flex;
2565        flex-direction: row;
2566        justify-content: center;
2567        align-items: flex-start;
2568        background-color: transparent;
2569    }
2570
2571    .frame-content-1_5 {
2572        display: flex;
2573        flex-direction: row;
2574        gap: 30px;
2575        align-items: flex-start;
2576        justify-content: center;
2577        padding: 0px 80px 0px 80px;
2578        width: 100%;
2579        position: relative;
2580    }
2581
2582    .stroke-wrapper-1_3,
2583    .stroke-wrapper-1_3 * {
2584        white-space: normal !important;
2585        word-break: break-word;
2586        overflow-wrap: anywhere;
2587        min-width: 0;
2588    }
2589
2590    @media (max-width: 1280px) {
2591        .stroke-wrapper-1_2 {
2592            height: auto;
2593        }
2594
2595        .stroke-wrapper-1_3 {
2596            width: 100%;
2597            max-width: 100%;
2598        }
2599
2600        .frame-content-1_3 {
2601            padding: 60px 24px 70px;
2602            gap: 32px;
2603        }
2604
2605        .Pixso-paragraph-1_4 {
2606            font-size: 22px;
2607            white-space: normal;
2608            text-align: center;
2609        }
2610
2611        .frame-content-1_5 {
2612            flex-direction: column;
2613            gap: 16px;
2614            padding: 0 24px;
2615        }
2616
2617        .frame-content-1_5>.stroke-wrapper-1_6,
2618        .frame-content-1_5>.stroke-wrapper-1_43 {
2619            width: 100%;
2620            height: auto;
2621            flex-basis: auto;
2622        }
2623
2624        .stroke-wrapper-1_6 {
2625            height: auto;
2626        }
2627
2628        .frame-content-1_7,
2629        .frame-content-1_44 {
2630            padding: 20px;
2631        }
2632
2633        .Pixso-paragraph-1_9,
2634        .Pixso-paragraph-1_46 {
2635            font-size: 15px;
2636        }
2637
2638        .Pixso-paragraph-1_10,
2639        .Pixso-paragraph-1_47 {
2640            width: 100%;
2641            font-size: 13px;
2642            white-space: normal;
2643        }
2644
2645        .Pixso-paragraph-1_20_0,
2646        .Pixso-paragraph-1_29_0,
2647        .Pixso-paragraph-1_40_0,
2648        .Pixso-paragraph-1_42_0,
2649        .Pixso-span-1_20_0_1,
2650        .Pixso-span-1_20_0_2,
2651        .Pixso-span-1_29_0_1,
2652        .Pixso-span-1_29_0_2,
2653        .Pixso-span-1_40_0_1,
2654        .Pixso-span-1_40_0_2,
2655        .Pixso-span-1_42_0_1,
2656        .Pixso-span-1_42_0_2,
2657        .Pixso-span-1_42_0_3,
2658        .Pixso-text-1_20,
2659        .Pixso-text-1_29,
2660        .Pixso-text-1_40 {
2661            font-size: 13px;
2662            white-space: normal;
2663            word-break: break-word;
2664        }
2665
2666        .frame-content-1_12,
2667        .frame-content-1_21,
2668        .frame-content-1_30,
2669        .frame-content-1_41,
2670        .frame-content-1_49,
2671        .frame-content-1_62 {
2672            padding: 14px 18px;
2673        }
2674
2675        .Pixso-paragraph-1_54,
2676        .Pixso-paragraph-1_67 {
2677            font-size: 13px;
2678        }
2679
2680
2681
2682        .stroke-wrapper-1_3 [class*="Pixso-frame-"],
2683        .stroke-wrapper-1_3 [class*="stroke-wrapper-"] {
2684            max-width: 100%;
2685        }
2686
2687        .stroke-wrapper-1_3 .Pixso-frame-1_8,
2688        .stroke-wrapper-1_3 .Pixso-frame-1_19,
2689        .stroke-wrapper-1_3 .Pixso-frame-1_28,
2690        .stroke-wrapper-1_3 .Pixso-frame-1_39,
2691        .stroke-wrapper-1_3 .Pixso-frame-1_45,
2692        .stroke-wrapper-1_3 .Pixso-frame-1_53,
2693        .stroke-wrapper-1_3 .Pixso-frame-1_66 {
2694            width: 100% !important;
2695            flex: 1 1 auto !important;
2696        }
2697
2698        .stroke-wrapper-1_3 .Pixso-paragraph-1_10,
2699        .stroke-wrapper-1_3 .Pixso-paragraph-1_47,
2700        .stroke-wrapper-1_3 .Pixso-text-1_20,
2701        .stroke-wrapper-1_3 .Pixso-text-1_29,
2702        .stroke-wrapper-1_3 .Pixso-text-1_40,
2703        .stroke-wrapper-1_3 .Pixso-text-1_42 {
2704            width: 100% !important;
2705            max-width: 100% !important;
2706            flex: 1 1 auto !important;
2707            flex-shrink: 1 !important;
2708        }
2709
2710        .stroke-wrapper-1_3 .Pixso-frame-1_55,
2711        .stroke-wrapper-1_3 .Pixso-frame-1_68 {
2712            flex-wrap: wrap;
2713        }
2714    }
2715
2716    @media (max-width: 768px) {
2717        .frame-content-1_3 {
2718            padding: 40px 0 48px;
2719            gap: 24px;
2720        }
2721
2722        .Pixso-paragraph-1_4 {
2723            padding: 0 16px;
2724            font-size: 20px;
2725        }
2726
2727        .frame-content-1_5 {
2728            flex-direction: column;
2729            gap: 16px;
2730            padding: 0 16px;
2731        }
2732
2733        .frame-content-1_5>.stroke-wrapper-1_6,
2734        .frame-content-1_5>.stroke-wrapper-1_43 {
2735            width: 100%;
2736            height: auto;
2737            flex-basis: auto;
2738        }
2739
2740        .frame-content-1_7,
2741        .frame-content-1_44 {
2742            padding: 16px;
2743            gap: 10px;
2744        }
2745
2746        .Pixso-paragraph-1_9,
2747        .Pixso-paragraph-1_46 {
2748            font-size: 14px;
2749            line-height: 1.4;
2750        }
2751
2752        .Pixso-paragraph-1_10,
2753        .Pixso-paragraph-1_47 {
2754            font-size: 12px;
2755            line-height: 1.5;
2756        }
2757
2758        .frame-content-1_12,
2759        .frame-content-1_21,
2760        .frame-content-1_30,
2761        .frame-content-1_41,
2762        .frame-content-1_49,
2763        .frame-content-1_62 {
2764            padding: 12px 14px;
2765            gap: 8px;
2766        }
2767
2768        .Pixso-frame-1_13,
2769        .Pixso-frame-1_22,
2770        .Pixso-frame-1_31,
2771        .Pixso-frame-1_50,
2772        .Pixso-frame-1_63 {
2773            width: 28px;
2774            height: 28px;
2775            flex-shrink: 0;
2776        }
2777
2778        .Pixso-text-1_20,
2779        .Pixso-text-1_29,
2780        .Pixso-text-1_40,
2781        .Pixso-span-1_20_0_1,
2782        .Pixso-span-1_20_0_2,
2783        .Pixso-span-1_29_0_1,
2784        .Pixso-span-1_29_0_2,
2785        .Pixso-span-1_40_0_1,
2786        .Pixso-span-1_40_0_2,
2787        .Pixso-span-1_42_0_1,
2788        .Pixso-span-1_42_0_2,
2789        .Pixso-span-1_42_0_3 {
2790            font-size: 12px;
2791        }
2792
2793        .Pixso-paragraph-1_54,
2794        .Pixso-paragraph-1_67 {
2795            font-size: 12px;
2796        }
2797
2798        .stroke-wrapper-1_3 p,
2799        .stroke-wrapper-1_3 span {
2800            font-size: 12px;
2801            line-height: 1.5;
2802        }
2803
2804        .stroke-wrapper-1_3 .Pixso-paragraph-1_4 {
2805            font-size: 18px;
2806            line-height: 1.3;
2807        }
2808
2809        .stroke-wrapper-1_3 .Pixso-paragraph-1_9,
2810        .stroke-wrapper-1_3 .Pixso-paragraph-1_46 {
2811            font-size: 14px;
2812            line-height: 1.4;
2813        }
2814    }
2815
2816    @media (max-width: 480px) {
2817
2818        .stroke-wrapper-1_3 p,
2819        .stroke-wrapper-1_3 span {
2820            font-size: 11px;
2821        }
2822
2823        .stroke-wrapper-1_3 .Pixso-paragraph-1_4 {
2824            font-size: 16px;
2825        }
2826
2827        .stroke-wrapper-1_3 .Pixso-paragraph-1_9,
2828        .stroke-wrapper-1_3 .Pixso-paragraph-1_46 {
2829            font-size: 13px;
2830        }
2831
2832        .frame-content-1_7,
2833        .frame-content-1_44 {
2834            padding: 14px;
2835        }
2836
2837        .frame-content-1_12,
2838        .frame-content-1_21,
2839        .frame-content-1_30,
2840        .frame-content-1_41,
2841        .frame-content-1_49,
2842        .frame-content-1_62 {
2843            padding: 10px 12px;
2844        }
2845
2846        .Pixso-frame-1_13,
2847        .Pixso-frame-1_22,
2848        .Pixso-frame-1_31,
2849        .Pixso-frame-1_50,
2850        .Pixso-frame-1_63 {
2851            width: 24px;
2852            height: 24px;
2853        }
2854    }
2855
2856    .Pixso-frame-1_6 {
2857        width: 100%;
2858        height: 100%;
2859        overflow: hidden;
2860        position: relative;
2861        flex-shrink: 1;
2862        display: flex;
2863        flex-direction: column;
2864        align-items: flex-start;
2865        flex-grow: 1;
2866        flex-basis: 0;
2867        align-self: stretch;
2868        background-color: transparent;
2869    }
2870
2871    .frame-content-1_6 {
2872        display: flex;
2873        flex-direction: column;
2874        align-items: flex-start;
2875        width: 100%;
2876        height: 100%;
2877        position: relative;
2878    }
2879
2880    .stroke-wrapper-1_6 {
2881        position: relative;
2882        width: 50%;
2883        height: fit-content;
2884        display: flex;
2885        flex-shrink: 1;
2886        flex-grow: 1;
2887        flex-basis: 0;
2888    }
2889
2890    .stroke-1_6 {
2891        position: absolute;
2892        inset: 0px;
2893        border-radius: 0px 0px 0px 0px;
2894        pointer-events: none;
2895        border-width: 1px 1px 1px 1px;
2896        border-style: solid;
2897        box-sizing: border-box;
2898        border-color: rgba(239, 240, 241, 1);
2899    }
2900
2901    .Pixso-frame-1_7 {
2902        width: 100%;
2903        height: 100%;
2904        position: relative;
2905        flex-shrink: 0;
2906        display: flex;
2907        flex-direction: column;
2908        align-items: flex-start;
2909        background-color: rgba(255, 255, 255, 1);
2910    }
2911
2912    .frame-content-1_7 {
2913        display: flex;
2914        flex-direction: column;
2915        gap: 16px;
2916        align-items: flex-start;
2917        padding: 24px 24px 24px 24px;
2918        width: 100%;
2919        position: relative;
2920    }
2921
2922    .stroke-wrapper-1_7 {
2923        position: relative;
2924        width: 100%;
2925        height: auto;
2926        display: flex;
2927        flex-shrink: 0;
2928        flex: 1;
2929    }
2930
2931    .stroke-1_7 {
2932        position: absolute;
2933        inset: 0px;
2934        border-radius: 0px 0px 0px 0px;
2935        pointer-events: none;
2936        border-width: 0px 0px 1px 0px;
2937        border-style: solid;
2938        box-sizing: border-box;
2939        border-color: rgba(239, 240, 241, 1);
2940    }
2941
2942    .Pixso-frame-1_8 {
2943        width: auto;
2944        height: auto;
2945        position: relative;
2946        flex-shrink: 0;
2947        display: flex;
2948        flex-direction: column;
2949        gap: 8px;
2950        align-items: flex-start;
2951    }
2952
2953    .Pixso-paragraph-1_9 {
2954        font-size: 16px;
2955
2956        font-weight: 600;
2957        text-align: center;
2958        letter-spacing: 0em;
2959        line-height: 115.29569625854492%;
2960        color: rgba(0, 0, 0, 1);
2961        width: auto;
2962        height: auto;
2963        position: relative;
2964        flex-shrink: 0;
2965        white-space: pre;
2966        flex-grow: 0;
2967    }
2968
2969    .Pixso-paragraph-1_10 {
2970        font-size: 14px;
2971
2972        font-weight: 400;
2973        letter-spacing: 0em;
2974        line-height: 150%;
2975        color: rgba(0, 0, 0, 1);
2976        width: 100%;
2977        height: auto;
2978        position: relative;
2979        flex-shrink: 0;
2980        flex-grow: 0;
2981        opacity: 0.6000000238418579;
2982    }
2983
2984    .Pixso-frame-1_11 {
2985        width: 100%;
2986        height: auto;
2987        position: relative;
2988        flex-shrink: 0;
2989        display: flex;
2990        flex-direction: column;
2991        align-items: center;
2992        flex-grow: 1;
2993        background-color: rgba(255, 255, 255, 1);
2994    }
2995
2996    .frame-content-1_11 {
2997        display: flex;
2998        flex-direction: column;
2999        align-items: center;
3000        width: 100%;
3001        height: 100%;
3002        position: relative;
3003    }
3004
3005    .Pixso-frame-1_12 {
3006        width: 100%;
3007        height: 100%;
3008        overflow: hidden;
3009        position: relative;
3010        flex-shrink: 0;
3011        display: flex;
3012        flex-direction: row;
3013        align-items: center;
3014        flex-grow: 1;
3015        background-color: transparent;
3016    }
3017
3018    .frame-content-1_12 {
3019        display: flex;
3020        flex-direction: row;
3021        gap: 10px;
3022        align-items: flex-start;
3023        padding: 18px 36px 18px 24px;
3024        width: 100%;
3025        height: 100%;
3026        position: relative;
3027    }
3028
3029    .stroke-wrapper-1_12 {
3030        position: relative;
3031        width: 100%;
3032        height: auto;
3033        display: flex;
3034        flex-shrink: 0;
3035        flex-grow: 1;
3036    }
3037
3038    .stroke-1_12 {
3039        position: absolute;
3040        inset: 0px;
3041        border-radius: 0px 0px 0px 0px;
3042        pointer-events: none;
3043        border-width: 0px 0px 1px 0px;
3044        border-style: solid;
3045        box-sizing: border-box;
3046        border-color: rgba(239, 240, 241, 1);
3047    }
3048
3049    .Pixso-frame-1_13 {
3050        width: 34px;
3051        height: 34px;
3052        overflow: hidden;
3053        position: relative;
3054        flex-shrink: 0;
3055        border-radius: 6.181818008422852px 6.181818008422852px 6.181818008422852px 6.181818008422852px;
3056        background-color: rgba(0, 0, 0, 0.029999999329447746);
3057    }
3058
3059    .Pixso-vector-1_14 {
3060        width: 55.88%;
3061        height: 55.88%;
3062        background-image: url(https://pixso.net/assets/media/frame4-d97b7075e5448422.webp);
3063        background-size: 100% 100%;
3064        background-repeat: no-repeat;
3065        position: absolute;
3066        left: 22.06%;
3067        right: 22.06%;
3068        top: 24.33%;
3069        bottom: 19.79%;
3070    }
3071
3072    .Pixso-frame-1_19 {
3073        width: 100%;
3074        height: auto;
3075        position: relative;
3076        flex-shrink: 1;
3077        display: flex;
3078        flex-direction: row;
3079        align-items: flex-start;
3080        flex-grow: 1;
3081        flex-basis: 0;
3082    }
3083
3084    .frame-content-1_19 {
3085        display: flex;
3086        flex-direction: row;
3087        gap: 4px;
3088        align-items: flex-start;
3089        width: 100%;
3090        position: relative;
3091        flex-wrap: wrap;
3092    }
3093
3094    .Pixso-text-1_20 {
3095        font-size: 14px;
3096
3097        font-weight: Semibold;
3098        letter-spacing: 0em;
3099        line-height: 150%;
3100        color: rgba(0, 0, 0, 1);
3101        width: auto;
3102        height: auto;
3103        position: relative;
3104        flex-shrink: 0;
3105        white-space: nowrap;
3106        flex-grow: 0;
3107        flex: 1;
3108    }
3109
3110    .Pixso-paragraph-1_20_0 {
3111        line-height: 21px;
3112        position: relative;
3113        flex-shrink: 0;
3114    }
3115
3116    .Pixso-span-1_20_0_1 {
3117        font-size: 14px;
3118
3119        font-weight: 400;
3120        color: rgba(0, 0, 0, 1);
3121        position: relative;
3122        flex-shrink: 0;
3123    }
3124
3125    .Pixso-span-1_20_0_2 {
3126        white-space: pre-wrap;
3127        font-size: 14px;
3128
3129        font-weight: 600;
3130        color: rgba(0, 0, 0, 0.699999988079071);
3131        position: relative;
3132        flex-shrink: 0;
3133    }
3134
3135    .Pixso-frame-1_21 {
3136        width: 100%;
3137        height: 100%;
3138        overflow: hidden;
3139        position: relative;
3140        flex-shrink: 0;
3141        display: flex;
3142        flex-direction: row;
3143        align-items: center;
3144        flex-grow: 1;
3145        background-color: transparent;
3146    }
3147
3148    .frame-content-1_21 {
3149        display: flex;
3150        flex-direction: row;
3151        gap: 10px;
3152        align-items: flex-start;
3153        padding: 18px 36px 18px 24px;
3154        width: 100%;
3155        height: 100%;
3156        position: relative;
3157    }
3158
3159    .stroke-wrapper-1_21 {
3160        position: relative;
3161        width: 100%;
3162        height: auto;
3163        display: flex;
3164        flex-shrink: 0;
3165        flex-grow: 1;
3166    }
3167
3168    .stroke-1_21 {
3169        position: absolute;
3170        inset: 0px;
3171        border-radius: 0px 0px 0px 0px;
3172        pointer-events: none;
3173        border-width: 0px 0px 1px 0px;
3174        border-style: solid;
3175        box-sizing: border-box;
3176        border-color: rgba(239, 240, 241, 1);
3177    }
3178
3179    .Pixso-frame-1_22 {
3180        width: 34px;
3181        height: 34px;
3182        overflow: hidden;
3183        position: relative;
3184        flex-shrink: 0;
3185        border-radius: 6.181818008422852px 6.181818008422852px 6.181818008422852px 6.181818008422852px;
3186        background-color: rgba(0, 0, 0, 0.029999999329447746);
3187    }
3188
3189    .Pixso-vector-1_23 {
3190        width: 55.88%;
3191        height: 55.88%;
3192        background-image: url(https://pixso.net/assets/media/frame3-ad1997d0c5db1811.webp);
3193        background-size: 100% 100%;
3194        background-repeat: no-repeat;
3195        position: absolute;
3196        left: 22.06%;
3197        right: 22.06%;
3198        top: 24.33%;
3199        bottom: 19.79%;
3200    }
3201
3202    .Pixso-frame-1_28 {
3203        width: 100%;
3204        height: auto;
3205        position: relative;
3206        flex-shrink: 1;
3207        display: flex;
3208        flex-direction: row;
3209        align-items: flex-start;
3210        flex-grow: 1;
3211        flex-basis: 0;
3212    }
3213
3214    .frame-content-1_28 {
3215        display: flex;
3216        flex-direction: row;
3217        gap: 4px;
3218        align-items: flex-start;
3219        width: 100%;
3220        position: relative;
3221    }
3222
3223    .Pixso-text-1_29 {
3224        font-size: 14px;
3225
3226        font-weight: Semibold;
3227        letter-spacing: 0em;
3228        line-height: 150%;
3229        color: rgba(0, 0, 0, 1);
3230        width: 100%;
3231        height: auto;
3232        position: relative;
3233        flex-shrink: 1;
3234        flex-grow: 1;
3235        flex-basis: 0;
3236    }
3237
3238    .Pixso-paragraph-1_29_0 {
3239        line-height: 21px;
3240        position: relative;
3241        flex-shrink: 0;
3242    }
3243
3244    .Pixso-span-1_29_0_1 {
3245        font-size: 14px;
3246
3247        font-weight: 400;
3248        color: rgba(0, 0, 0, 1);
3249        position: relative;
3250        flex-shrink: 0;
3251    }
3252
3253    .Pixso-span-1_29_0_2 {
3254        font-size: 14px;
3255
3256        font-weight: 600;
3257        color:
3257 rgba(0, 0, 0, 0.699999988079071);
3258        position: relative;
3259        flex-shrink: 0;
3260    }
3261
3262    .Pixso-frame-1_30 {
3263        width: 100%;
3264        height: 100%;
3265        overflow: hidden;
3266        position: relative;
3267        flex-shrink: 0;
3268        display: flex;
3269        flex-direction: row;
3270        align-items: center;
3271        flex-grow: 1;
3272        background-color: transparent;
3273    }
3274
3275    .frame-content-1_30 {
3276        display: flex;
3277        flex-direction: row;
3278        gap: 10px;
3279        align-items: flex-start;
3280        padding: 18px 36px 18px 24px;
3281        width: 100%;
3282        height: 100%;
3283        position: relative;
3284    }
3285
3286    .stroke-wrapper-1_30 {
3287        position: relative;
3288        width: 100%;
3289        height: auto;
3290        display: flex;
3291        flex-shrink: 0;
3292        flex-grow: 1;
3293    }
3294
3295    .stroke-1_30 {
3296        position: absolute;
3297        inset: 0px;
3298        border-radius: 0px 0px 0px 0px;
3299        pointer-events: none;
3300        border-width: 0px 0px 1px 0px;
3301        border-style: solid;
3302        box-sizing: border-box;
3303        border-color: rgba(239, 240, 241, 1);
3304    }
3305
3306    .Pixso-frame-1_31 {
3307        width: 34px;
3308        height: 34px;
3309        overflow: hidden;
3310        position: relative;
3311        flex-shrink: 0;
3312        border-radius: 6.181818008422852px 6.181818008422852px 6.181818008422852px 6.181818008422852px;
3313        background-color: rgba(0, 0, 0, 0.029999999329447746);
3314    }
3315
3316    .Pixso-vector-1_32 {
3317        width: 55.88%;
3318        height: 55.88%;
3319        background-image: url(https://pixso.net/assets/media/frame2-96b37311da81a66e.webp);
3320        background-size: 100% 100%;
3321        background-repeat: no-repeat;
3322        position: absolute;
3323        left: 22.06%;
3324        right: 22.06%;
3325        top: 20.59%;
3326        bottom: 23.53%;
3327    }
3328
3329    .Pixso-frame-1_39 {
3330        width: 100%;
3331        height: auto;
3332        position: relative;
3333        flex-shrink: 1;
3334        display: flex;
3335        flex-direction: row;
3336        align-items: flex-start;
3337        flex-grow: 1;
3338        flex-basis: 0;
3339    }
3340
3341    .frame-content-1_39 {
3342        display: flex;
3343        flex-direction: row;
3344        gap: 4px;
3345        align-items: flex-start;
3346        width: 100%;
3347        position: relative;
3348    }
3349
3350    .Pixso-text-1_40 {
3351        font-size: 14px;
3352
3353        font-weight: Semibold;
3354        letter-spacing: 0em;
3355        line-height: 150%;
3356        color: rgba(0, 0, 0, 1);
3357        width: 100%;
3358        height: auto;
3359        position: relative;
3360        flex-shrink: 1;
3361        flex-grow: 1;
3362        flex-basis: 0;
3363    }
3364
3365    .Pixso-paragraph-1_40_0 {
3366        line-height: 21px;
3367        position: relative;
3368        flex-shrink: 0;
3369    }
3370
3371    .Pixso-span-1_40_0_1 {
3372        font-size: 14px;
3373
3374        font-weight: 400;
3375        color: rgba(0, 0, 0, 1);
3376        position: relative;
3377        flex-shrink: 0;
3378    }
3379
3380    .Pixso-span-1_40_0_2 {
3381        font-size: 14px;
3382
3383        font-weight: 600;
3384        color: rgba(0, 0, 0, 0.699999988079071);
3385        position: relative;
3386        flex-shrink: 0;
3387    }
3388
3389    .Pixso-frame-1_41 {
3390        width: 100%;
3391        height: 100%;
3392        overflow: hidden;
3393        position: relative;
3394        flex-shrink: 0;
3395        display: flex;
3396        flex-direction: row;
3397        align-items: center;
3398        flex-grow: 1;
3399        background-color: transparent;
3400    }
3401
3402    .frame-content-1_41 {
3403        display: flex;
3404        flex-direction: row;
3405        gap: 10px;
3406        align-items: center;
3407        padding: 18px 24px 18px 24px;
3408        width: 100%;
3409        height: 100%;
3410        position: relative;
3411    }
3412
3413    .stroke-wrapper-1_41 {
3414        position: relative;
3415        width: 100%;
3416        height: fit-content;
3417        display: flex;
3418        flex-shrink: 0;
3419        flex-grow: 1;
3420    }
3421
3422    .stroke-1_41 {
3423        position: absolute;
3424        inset: 0px;
3425        border-radius: 0px 0px 0px 0px;
3426        pointer-events: none;
3427        border-width: 0px 0px 1px 0px;
3428        border-style: solid;
3429        box-sizing: border-box;
3430        border-color: rgba(0, 0, 0, 0.07999999821186066);
3431    }
3432
3433    .Pixso-text-1_42 {
3434        font-size: 13px;
3435        font-weight: Regular;
3436        letter-spacing: 0em;
3437        line-height: 150%;
3438        color: rgba(0, 0, 0, 0.800000011920929);
3439        width: auto;
3440        height: auto;
3441        /* position: absolute; */
3442        /* left: 24px; */
3443        /* top: 50%; */
3444        /* transform: translateY(calc(-50% + 1px)); */
3445        white-space: nowrap;
3446        flex-grow: 0;
3447    }
3448
3449    .Pixso-paragraph-1_42_0 {
3450        line-height: 20px;
3451        position: relative;
3452        flex-shrink: 0;
3453    }
3454
3455    .Pixso-span-1_42_0_1 {
3456        font-size: 13px;
3457
3458        font-weight: 400;
3459        color: rgba(0, 0, 0, 0.800000011920929);
3460        position: relative;
3461        flex-shrink: 0;
3462    }
3463
3464    .Pixso-span-1_42_0_2 {
3465        display: block;
3466        white-space: pre-wrap;
3467        font-size: 13px;
3468
3469        font-weight: 400;
3470        color: rgba(0, 0, 0, 0.5);
3471        position: relative;
3472        flex-shrink: 0;
3473    }
3474
3475    .Pixso-span-1_42_0_3 {
3476        font-size: 13px;
3477
3478        font-weight: 400;
3479        color: rgba(0, 0, 0, 0.800000011920929);
3480        position: relative;
3481        flex-shrink: 0;
3482    }
3483
3484    .Pixso-frame-1_43 {
3485        width: 100%;
3486        height: 100%;
3487        overflow: hidden;
3488        position: relative;
3489        flex-shrink: 1;
3490        display: flex;
3491        flex-direction: column;
3492        align-items: flex-start;
3493        flex-grow: 1;
3494        flex-basis: 0;
3495        background-color: transparent;
3496    }
3497
3498    .frame-content-1_43 {
3499        display: flex;
3500        flex-direction: column;
3501        align-items: flex-start;
3502        width: 100%;
3503        position: relative;
3504    }
3505
3506    .stroke-wrapper-1_43 {
3507        position: relative;
3508        width: 50%;
3509        height: auto;
3510        display: flex;
3511        flex-shrink: 1;
3512        flex-grow: 1;
3513        flex-basis: 0;
3514    }
3515
3516    .stroke-1_43 {
3517        position: absolute;
3518        inset: 0px;
3519        border-radius: 0px 0px 0px 0px;
3520        pointer-events: none;
3521        border-width: 1px 1px 1px 1px;
3522        border-style: solid;
3523        box-sizing: border-box;
3524        border-color: rgba(239, 240, 241, 1);
3525    }
3526
3527    .Pixso-frame-1_44 {
3528        width: 100%;
3529        height: 100%;
3530        position: relative;
3531        flex-shrink: 0;
3532        display: flex;
3533        flex-direction: column;
3534        align-items: flex-start;
3535        background-color: rgba(255, 255, 255, 1);
3536    }
3537
3538    .frame-content-1_44 {
3539        display: flex;
3540        flex-direction: column;
3541        gap: 16px;
3542        align-items: flex-start;
3543        padding: 24px 24px 24px 24px;
3544        width: 100%;
3545        position: relative;
3546    }
3547
3548    .stroke-wrapper-1_44 {
3549        position: relative;
3550        width: 100%;
3551        height: auto;
3552        display: flex;
3553        flex-shrink: 0;
3554    }
3555
3556    .stroke-1_44 {
3557        position: absolute;
3558        inset: 0px;
3559        border-radius: 0px 0px 0px 0px;
3560        pointer-events: none;
3561        border-width: 0px 0px 1px 0px;
3562        border-style: solid;
3563        box-sizing: border-box;
3564        border-color: rgba(239, 240, 241, 1);
3565    }
3566
3567    .Pixso-frame-1_45 {
3568        width: auto;
3569        height: auto;
3570        position: relative;
3571        flex-shrink: 0;
3572        display: flex;
3573        flex-direction: column;
3574        gap: 8px;
3575        align-items: flex-start;
3576    }
3577
3578    .Pixso-paragraph-1_46 {
3579        font-size: 16px;
3580
3581        font-weight: 600;
3582        text-align: center;
3583        letter-spacing: 0em;
3584        line-height: 115.29569625854492%;
3585        color: rgba(0, 0, 0, 1);
3586        width: auto;
3587        height: auto;
3588        position: relative;
3589        flex-shrink: 0;
3590        white-space: pre;
3591        flex-grow: 0;
3592    }
3593
3594    .Pixso-paragraph-1_47 {
3595        font-size: 14px;
3596
3597        font-weight: 400;
3598        letter-spacing: 0em;
3599        line-height: 150%;
3600        color: rgba(0, 0, 0, 1);
3601        white-space: pre-line;
3602        width: auto;
3603        height: auto;
3604        position: relative;
3605        flex-shrink: 0;
3606        white-space: pre;
3607        flex-grow: 0;
3608        opacity: 0.6000000238418579;
3609    }
3610
3611    .Pixso-frame-1_48 {
3612        width: 100%;
3613        height: auto;
3614        position: relative;
3615        flex-shrink: 0;
3616        display: flex;
3617        flex-direction: column;
3618        align-items: center;
3619        background-color: rgba(255, 255, 255, 1);
3620    }
3621
3622    .frame-content-1_48 {
3623        display: flex;
3624        flex-direction: column;
3625        align-items: center;
3626        width: 100%;
3627        position: relative;
3628    }
3629
3630    .Pixso-frame-1_49 {
3631        width: 100%;
3632        height: 100%;
3633        overflow: hidden;
3634        position: relative;
3635        flex-shrink: 0;
3636        display: flex;
3637        flex-direction: row;
3638        align-items: center;
3639        background-color: transparent;
3640    }
3641
3642    .frame-content-1_49 {
3643        display: flex;
3644        flex-direction: row;
3645        gap: 10px;
3646        align-items: center;
3647        padding: 21px 24px 21px 24px;
3648        width: 100%;
3649        position: relative;
3650    }
3651
3652    .stroke-wrapper-1_49 {
3653        position: relative;
3654        width: 100%;
3655        height: auto;
3656        display: flex;
3657        flex-shrink: 0;
3658    }
3659
3660    .stroke-1_49 {
3661        position: absolute;
3662        inset: 0px;
3663        border-radius: 0px 0px 0px 0px;
3664        pointer-events: none;
3665        border-width: 0px 0px 1px 0px;
3666        border-style: solid;
3667        box-sizing: border-box;
3668        border-color: rgba(239, 240, 241, 1);
3669    }
3670
3671    .Pixso-frame-1_50 {
3672        width: 34px;
3673        height: 34px;
3674        overflow: hidden;
3675        position: relative;
3676        flex-shrink: 0;
3677        border-radius: 6.181818008422852px 6.181818008422852px 6.181818008422852px 6.181818008422852px;
3678        background-color: rgba(151, 95, 255, 0.11999999731779099);
3679    }
3680
3681    .Pixso-vector-1_51 {
3682        width: 54.54%;
3683        height: 54.55%;
3684        background-image: url(https://pixso.net/assets/media/frame1-c20960a172d4c940.webp);
3685        background-size: 100% 100%;
3686        background-repeat: no-repeat;
3687        position: absolute;
3688        left: 22.73%;
3689        right: 22.73%;
3690        top: 25%;
3691        bottom: 20.45%;
3692    }
3693
3694    .Pixso-frame-1_53 {
3695        width: auto;
3696        height: auto;
3697        position: relative;
3698        flex-shrink: 0;
3699        display: flex;
3700        flex-direction: row;
3701        gap: 6px;
3702        align-items: center;
3703    }
3704
3705    .Pixso-paragraph-1_54 {
3706        font-size: 14px;
3707
3708        font-weight: 600;
3709        letter-spacing: 0em;
3710        line-height: 150%;
3711        color: rgba(0, 0, 0, 1);
3712        width: auto;
3713        height: auto;
3714        position: relative;
3715        flex-shrink: 0;
3716        white-space: pre;
3717        flex-grow: 0;
3718    }
3719
3720    .Pixso-frame-1_55 {
3721        width: 100%;
3722        height: auto;
3723        position: relative;
3724        flex-shrink: 1;
3725        display: flex;
3726        flex-direction: row;
3727        flex-wrap: wrap;
3728        gap: 7px;
3729        align-items: flex-start;
3730    }
3731
3732    .Pixso-frame-1_56 {
3733        width: auto;
3734        max-width: 100%;
3735        height: auto;
3736        position: relative;
3737        flex-shrink: 1;
3738        display: flex;
3739        flex-direction: row;
3740        gap: 10px;
3741        justify-content: center;
3742        align-items: center;
3743        padding: 4px 10px 4px 10px;
3744        border-radius: 6px 6px 6px 6px;
3745        background-color: rgba(0, 0, 0, 0.03999999910593033);
3746    }
3747
3748    .Pixso-paragraph-1_57 {
3749        font-size: 12px;
3750
3751        font-weight: 400;
3752        letter-spacing: 0em;
3753        line-height: 150%;
3754        color: rgba(0, 0, 0, 1);
3755        width: auto;
3756        height: auto;
3757        position: relative;
3758        flex-shrink: 1;
3759        white-space: normal;
3760        word-break: break-word;
3761        overflow-wrap: anywhere;
3762        flex-grow: 0;
3763        opacity: 0.8999999761581421;
3764    }
3765
3766    .Pixso-frame-1_58 {
3767        width: auto;
3768        max-width: 100%;
3769        height: auto;
3770        position: relative;
3771        flex-shrink: 1;
3772        display: flex;
3773        flex-direction: row;
3774        gap: 10px;
3775        justify-content: center;
3776        align-items: center;
3777        padding: 4px 10px 4px 10px;
3778        border-radius: 6px 6px 6px 6px;
3779        background-color: rgba(0, 0, 0, 0.03999999910593033);
3780    }
3781
3782    .Pixso-paragraph-1_59 {
3783        font-size: 12px;
3784
3785        font-weight: 400;
3786        letter-spacing: 0em;
3787        line-height: 150%;
3788        color: rgba(0, 0, 0, 1);
3789        width: auto;
3790        height: auto;
3791        position: relative;
3792        flex-shrink: 1;
3793        white-space: normal;
3794        word-break: break-word;
3795        overflow-wrap: anywhere;
3796        flex-grow: 0;
3797        opacity: 0.8999999761581421;
3798    }
3799
3800    .Pixso-frame-1_60 {
3801        width: auto;
3802        max-width: 100%;
3803        height: auto;
3804        position: relative;
3805        flex-shrink: 1;
3806        display: flex;
3807        flex-direction: row;
3808        gap: 10px;
3809        justify-content: center;
3810        align-items: center;
3811        padding: 4px 10px 4px 10px;
3812        border-radius: 6px 6px 6px 6px;
3813        background-color: rgba(0, 0, 0, 0.03999999910593033);
3814    }
3815
3816    .Pixso-paragraph-1_61 {
3817        font-size: 12px;
3818
3819        font-weight: 400;
3820        letter-spacing: 0em;
3821        line-height: 150%;
3822        color: rgba(0, 0, 0, 1);
3823        width: auto;
3824        height: auto;
3825        position: relative;
3826        flex-shrink: 1;
3827        white-space: normal;
3828        word-break: break-word;
3829        overflow-wrap: anywhere;
3830        flex-grow: 0;
3831        opacity: 0.8999999761581421;
3832    }
3833
3834    .Pixso-frame-1_62 {
3835        width: 100%;
3836        height: 100%;
3837        overflow: hidden;
3838        position: relative;
3839        flex-shrink: 0;
3840        display: flex;
3841        flex-direction: row;
3842        align-items: center;
3843        background-color: transparent;
3844    }
3845
3846    .frame-content-1_62 {
3847        display: flex;
3848        flex-direction: row;
3849        gap: 10px;
3850        align-items: center;
3851        padding: 21px 24px 21px 24px;
3852        width: 100%;
3853        position: relative;
3854    }
3855
3856    .stroke-wrapper-1_62 {
3857        position: relative;
3858        width: 100%;
3859        height: auto;
3860        display: flex;
3861        flex-shrink: 0;
3862    }
3863
3864    .stroke-1_62 {
3865        position: absolute;
3866        inset: 0px;
3867        border-radius: 0px 0px 0px 0px;
3868        pointer-events: none;
3869        border-width: 0px 0px 1px 0px;
3870        border-style: solid;
3871        box-sizing: border-box;
3872        border-color: rgba(239, 240, 241, 1);
3873    }
3874
3875    .Pixso-frame-1_63 {
3876        width: 34px;
3877        height: 34px;
3878        overflow: hidden;
3879        position: relative;
3880        flex-shrink: 0;
3881        border-radius: 6.181818008422852px 6.181818008422852px 6.181818008422852px 6.181818008422852px;
3882        background-color: rgba(66.6520767211914, 132.5738525390625, 255, 0.11999999731779099);
3883    }
3884
3885    .Pixso-vector-1_64 {
3886        width: 54.56%;
3887        height: 54.56%;
3888        background-image: url(https://pixso.net/assets/media/frame0-80f9ae2154d2b73e.webp);
3889        background-size: 100% 100%;
3890        background-repeat: no-repeat;
3891        position: absolute;
3892        left: 23.53%;
3893        right: 21.91%;
3894        top: 23.53%;
3895        bottom: 21.91%;
3896    }
3897
3898    .Pixso-frame-1_66 {
3899        width: auto;
3900        height: auto;
3901        position: relative;
3902        flex-shrink: 0;
3903        display: flex;
3904        flex-direction: row;
3905        gap: 6px;
3906        align-items: center;
3907    }
3908
3909    .Pixso-paragraph-1_67 {
3910        font-size: 14px;
3911
3912        font-weight: 600;
3913        letter-spacing: 0em;
3914        line-height: 150%;
3915        color: rgba(0, 0, 0, 1);
3916        width: auto;
3917        height: auto;
3918        position: relative;
3919        flex-shrink: 0;
3920        white-space: pre;
3921        flex-grow: 0;
3922    }
3923
3924    .Pixso-frame-1_68 {
3925        width: auto;
3926        height: auto;
3927        position: relative;
3928        flex-shrink: 0;
3929        display: flex;
3930        flex-direction: row;
3931        gap: 10px;
3932        align-items: flex-start;
3933    }
3934
3935    .Pixso-frame-1_69 {
3936        width: auto;
3937        height: auto;
3938        position: relative;
3939        flex-shrink: 0;
3940        display: flex;
3941        flex-direction: row;
3942        gap: 10px;
3943        justify-content: center;
3944        align-items: center;
3945        padding: 4px 10px 4px 10px;
3946        border-radius: 6px 6px 6px 6px;
3947        background-color: rgba(0, 0, 0, 0.03999999910593033);
3948    }
3949
3950    .Pixso-paragraph-1_70 {
3951        font-size: 12px;
3952
3953        font-weight: 400;
3954        letter-spacing: 0em;
3955        line-height: 150%;
3956        color: rgba(0, 0, 0, 1);
3957        width: auto;
3958        height: auto;
3959        position: relative;
3960        flex-shrink: 0;
3961        white-space: pre;
3962        flex-grow: 0;
3963        opacity: 0.8999999761581421;
3964    }
3965
3966    .Pixso-frame-1_71 {
3967        width: auto;
3968        height: auto;
3969        position: relative;
3970        flex-shrink: 0;
3971        display: flex;
3972        flex-direction: row;
3973        gap: 10px;
3974        justify-content: center;
3975        align-items: center;
3976        padding: 4px 10px 4px 10px;
3977        border-radius: 6px 6px 6px 6px;
3978        background-color: rgba(0, 0, 0, 0.03999999910593033);
3979    }
3980
3981    .Pixso-paragraph-1_72 {
3982        font-size: 12px;
3983
3984        font-weight: 400;
3985        letter-spacing: 0em;
3986        line-height: 150%;
3987        color: rgba(0, 0, 0, 1);
3988        width: auto;
3989        height: auto;
3990        position: relative;
3991        flex-shrink: 0;
3992        white-space: pre;
3993        flex-grow: 0;
3994        opacity: 0.8999999761581421;
3995    }
3996
3997    .Pixso-frame-1_73 {
3998        width: 100%;
3999        height: 100%;
4000        overflow: hidden;
4001        position: relative;
4002        flex-shrink: 0;
4003        display: flex;
4004        flex-direction: row;
4005        align-items: center;
4006        background-color: transparent;
4007    }
4008
4009    .frame-content-1_73 {
4010        display: flex;
4011        flex-direction: row;
4012        gap: 10px;
4013        align-items: center;
4014        padding: 21px 24px 21px 24px;
4015        width: 100%;
4016        position: relative;
4017    }
4018
4019    .stroke-wrapper-1_73 {
4020        position: relative;
4021        width: 100%;
4022        height: auto;
4023        display: flex;
4024        flex-shrink: 0;
4025    }
4026
4027    .stroke-1_73 {
4028        position: absolute;
4029        inset: 0px;
4030        border-radius: 0px 0px 0px 0px;
4031        pointer-events: none;
4032        border-width: 0px 0px 1px 0px;
4033        border-style: solid;
4034        box-sizing: border-box;
4035        border-color: rgba(239, 240, 241, 1);
4036    }
4037
4038    .Pixso-frame-1_74 {
4039        width: 34px;
4040        height: 34px;
4041        overflow: hidden;
4042        position: relative;
4043        flex-shrink: 0;
4044        border-radius: 6.181818008422852px 6.181818008422852px 6.181818008422852px 6.181818008422852px;
4045        background-color: rgba(31, 200, 67, 0.11999999731779099);
4046    }
4047
4048    .Pixso-vector-1_75 {
4049        width: 54.54%;
4050        height: 54.55%;
4051        background-image: url(https://pixso.net/assets/media/frame-ea90245697cde772.webp);
4052        background-size: 100% 100%;
4053        background-repeat: no-repeat;
4054        position: absolute;
4055        left: 22.73%;
4056        right: 22.73%;
4057        top: 25%;
4058        bottom: 20.45%;
4059    }
4060
4061    .Pixso-frame-1_77 {
4062        width: auto;
4063        height: auto;
4064        position: relative;
4065        flex-shrink: 0;
4066        display: flex;
4067        flex-direction: row;
4068        gap: 6px;
4069        align-items: center;
4070    }
4071
4072    .Pixso-paragraph-1_78 {
4073        font-size: 14px;
4074
4075        font-weight: 600;
4076        letter-spacing: 0em;
4077        line-height: 150%;
4078        color: rgba(0, 0, 0, 1);
4079        width: auto;
4080        height: auto;
4081        position: relative;
4082        flex-shrink: 0;
4083        white-space: pre;
4084        flex-grow: 0;
4085    }
4086
4087    .Pixso-frame-1_79 {
4088        width: auto;
4089        height: auto;
4090        position: relative;
4091        flex-shrink: 0;
4092        display: flex;
4093        flex-direction: row;
4094        gap: 10px;
4095        align-items: flex-start;
4096    }
4097
4098    .Pixso-frame-1_80 {
4099        width: auto;
4100        height: auto;
4101        position: relative;
4102        flex-shrink: 0;
4103        display: flex;
4104        flex-direction: row;
4105        gap: 10px;
4106        justify-content: center;
4107        align-items: center;
4108        padding: 4px 10px 4px 10px;
4109        border-radius: 6px 6px 6px 6px;
4110        background-color: rgba(0, 0, 0, 0.03999999910593033);
4111    }
4112
4113    .Pixso-paragraph-1_81 {
4114        font-size: 12px;
4115
4116        font-weight: 400;
4117        letter-spacing: 0em;
4118        line-height: 150%;
4119        color: rgba(0, 0, 0, 1);
4120        width: auto;
4121        height: auto;
4122        position: relative;
4123        flex-shrink: 0;
4124        white-space: pre;
4125        flex-grow: 0;
4126        opacity: 0.8999999761581421;
4127    }
4128
4129    .Pixso-frame-1_82 {
4130        width: 100%;
4131        height: auto;
4132        overflow: hidden;
4133        position: relative;
4134        flex-shrink: 0;
4135        display: flex;
4136        flex-direction: row;
4137        align-items: center;
4138        background-color: transparent;
4139    }
4140
4141    .frame-content-1_82 {
4142        display: flex;
4143        flex-direction: row;
4144        gap: 10px;
4145        align-items: center;
4146        padding: 21px 24px 21px 24px;
4147        width: 100%;
4148        position: relative;
4149    }
4150
4151    .Pixso-vector-1_83 {
4152        width: 34px;
4153        height: 34px;
4154        background-image: url(https://pixso.net/assets/media/frame2147225482
4154-58ae0568fd9d4c5a.webp);
4155        background-size: 100% 100%;
4156        background-repeat: no-repeat;
4157        position: relative;
4158        flex-shrink: 0;
4159    }
4160
4161    .Pixso-frame-1_85 {
4162        width: auto;
4163        height: auto;
4164        position: relative;
4165        flex-shrink: 0;
4166        display: flex;
4167        flex-direction: row;
4168        gap: 6px;
4169        align-items: center;
4170    }
4171
4172    .Pixso-paragraph-1_86 {
4173        font-size: 14px;
4174
4175        font-weight: 600;
4176        letter-spacing: 0em;
4177        line-height: 150%;
4178        color: rgba(0, 0, 0, 1);
4179        width: auto;
4180        height: auto;
4181        position: relative;
4182        flex-shrink: 0;
4183        white-space: pre;
4184        flex-grow: 0;
4185    }
4186
4187    .Pixso-frame-1_87 {
4188        width: auto;
4189        height: auto;
4190        position: relative;
4191        flex-shrink: 0;
4192        display: flex;
4193        flex-direction: row;
4194        gap: 10px;
4195        align-items: flex-start;
4196    }
4197
4198    .Pixso-frame-1_88 {
4199        width: auto;
4200        height: auto;
4201        position: relative;
4202        flex-shrink: 0;
4203        display: flex;
4204        flex-direction: row;
4205        gap: 10px;
4206        justify-content: center;
4207        align-items: center;
4208        padding: 4px 10px 4px 10px;
4209        border-radius: 6px 6px 6px 6px;
4210        background-color: rgba(0, 0, 0, 0.03999999910593033);
4211    }
4212
4213    .Pixso-paragraph-1_89 {
4214        font-size: 12px;
4215        font-weight: 400;
4216        letter-spacing: 0em;
4217        line-height: 150%;
4218        color: rgba(0, 0, 0, 1);
4219        width: auto;
4220        height: auto;
4221        position: relative;
4222        flex-shrink: 0;
4223        white-space: pre;
4224        flex-grow: 0;
4225        opacity: 0.8999999761581421;
4226    }
4227</style>
4228<style>
4229    .price-module__faq {
4230        display: flex;
4231        width: 100%;
4232        max-width: 86.25rem;
4233        padding: 6.875rem 0;
4234        flex-direction: column;
4235        align-items: center;
4236        gap: 3.125rem;
4237        border-right: 1px solid #EFF0F1;
4238        border-left: 1px solid #EFF0F1;
4239    }
4240
4241    .price-module__faq-title {
4242        width: 100%;
4243        margin: 0;
4244        color: #000;
4245        text-align: center;
4246        font-size: 2.5rem;
4247        font-style: normal;
4248        font-weight: 600;
4249        line-height: 115.296%;
4250    }
4251
4252    .price-module__faq-list {
4253        display: flex;
4254        width: 100%;
4255        max-width: 86.25rem;
4256        padding: 2.5rem 7.5rem;
4257        flex-direction: column;
4258        align-items: center;
4259        border-top: 1px solid #EFF0F1;
4260        border-bottom: 1px solid #EFF0F1;
4261    }
4262
4263    .price-module__faq-item {
4264        width: 100%;
4265        border-bottom: 1px solid #EFF0F1;
4266    }
4267
4268    .price-module__faq-item:last-child {
4269        border-bottom: 0;
4270    }
4271
4272    .price-module__faq-question {
4273        display: flex;
4274        width: 100%;
4275        min-height: 4rem;
4276        padding: 1.25rem 0;
4277        justify-content: space-between;
4278        align-items: center;
4279        gap: 1.5rem;
4280        border: 0;
4281        background: transparent;
4282        color: #000;
4283        font-size: 1rem;
4284        font-style: normal;
4285        font-weight: 400;
4286        line-height: 115.296%;
4287        text-align: left;
4288        cursor: pointer;
4289    }
4290
4291    .price-module__faq-question-text {
4292        flex: 1;
4293    }
4294
4295    .price-module__faq-icon {
4296        position: relative;
4297        width: 1.5rem;
4298        height: 1.5rem;
4299        flex: 0 0 1.5rem;
4300    }
4301
4302    .price-module__faq-icon::before,
4303    .price-module__faq-icon::after {
4304        content: "";
4305        position: absolute;
4306        left: 50%;
4307        top: 50%;
4308        width: 0.875rem;
4309        height: 0.09375rem;
4310        border-radius: 1px;
4311        background: #000;
4312        transform: translate(-50%, -50%);
4313        transition: transform .2s ease, opacity .2s ease;
4314    }
4315
4316    .price-module__faq-icon::after {
4317        transform: translate(-50%, -50%) rotate(90deg);
4318    }
4319
4320    .price-module__faq-question.is-active .price-module__faq-icon::after {
4321        transform: translate(-50%, -50%) rotate(0deg);
4322        opacity: 0;
4323    }
4324
4325    .price-module__faq-answer {
4326        max-width: 68rem;
4327        padding: 0 0 3.75rem;
4328        color: rgba(0, 0, 0, 0.70);
4329        font-size: 0.875rem;
4330        font-style: normal;
4331        font-weight: 400;
4332        line-height: 150%;
4333        white-space: pre-line;
4334    }
4335    .price-module__faq-answer a{
4336            color: rgba(48.47336959838867, 110.43135833740234, 255, 1);
4337        }
4338
4339    @media(max-width: 980px) {
4340        .price-module__faq {
4341            padding: 4.5rem 1.25rem;
4342            gap: 2rem;
4343            border-right: 0;
4344            border-left: 0;
4345        }
4346
4347        .price-module__faq-title {
4348            font-size: 2rem;
4349        }
4350
4351        .price-module__faq-list {
4352            max-width: 100%;
4353            padding: 1.5rem 1.25rem;
4354        }
4355
4356        .price-module__faq-answer {
4357            max-width: 100%;
4358            padding-bottom: 2rem;
4359        }
4360    }
4361
4362    @media(max-width: 576px) {
4363        .price-module__faq {
4364            padding: 3.5rem 1rem;
4365            gap: 1.5rem;
4366        }
4367
4368        .price-module__faq-title {
4369            font-size: 1.75rem;
4370        }
4371
4372        .price-module__faq-list {
4373            padding: 1rem;
4374        }
4375
4376        .price-module__faq-question {
4377            min-height: 3.75rem;
4378            padding: 1rem 0;
4379            gap: 1rem;
4380            font-size: 0.9375rem;
4381            line-height: 140%;
4382        }
4383
4384        .price-module__faq-answer {
4385            padding-bottom: 1.5rem;
4386            font-size: 0.8125rem;
4387        }
4388    }
4389
4390    button:focus-visible,
4391    button:focus {
4392        outline: none;
4393    }
4394</style>
4395<style>
4396    #app {
4397        position: relative;
4398    }
4399
4400    .price-module-header-tip {
4401        z-index: 3;
4402        display: flex;
4403        justify-content: center;
4404        pointer-events: none;
4405    }
4406
4407    .price-module-header-tip__inner {
4408        width: fit-content;
4409        max-width: 86.25rem;
4410        min-height: 32px;
4411        height: auto;
4412        position: relative;
4413        flex-shrink: 0;
4414        display: flex;
4415        flex-direction: row;
4416        flex-wrap: wrap;
4417        gap: 12px;
4418        justify-content: center;
4419        align-items: center;
4420        padding: 7px 14px 7px 10px;
4421        border-radius: 100px;
4422        background-color: rgba(246.7822265625, 246.7822265625, 246.7822265625, 1);
4423        color: inherit;
4424        text-decoration: none;
4425        pointer-events: auto;
4426    }
4427
4428    .price-module-header-tip__message {
4429        width: auto;
4430        height: auto;
4431        position: relative;
4432        flex: 1 1 auto;
4433        display: flex;
4434        flex-direction: row;
4435        gap: 2px;
4436        align-items: center;
4437        min-width: 0;
4438    }
4439
4440    .price-module-header-tip__icon,
4441    .price-module-header-tip__arrow {
4442        width: 18px;
4443        height: 18px;
4444        position: relative;
4445        flex-shrink: 0;
4446        display: block;
4447    }
4448
4449    .price-module-header-tip__text {
4450        font-size: 14px;
4451        font-weight: 400;
4452        text-align: center;
4453        letter-spacing: 0;
4454        line-height: 115.29569625854492%;
4455        color: rgba(0, 0, 0, 1);
4456        width: auto;
4457        height: auto;
4458        position: relative;
4459        flex: 1 1 auto;
4460        white-space: normal;
4461        opacity: 0.699999988079071;
4462    }
4463
4464    .price-module-header-tip__link {
4465        width: auto;
4466        height: auto;
4467        position: relative;
4468        flex-shrink: 0;
4469        display: flex;
4470        flex-direction: row;
4471        justify-content: center;
4472        align-items: center;
4473    }
4474
4475    .price-module-header-tip__link-text {
4476        font-size: 14px;
4477        font-weight: 400;
4478        text-align: center;
4479        letter-spacing: 0;
4480        line-height: 115.29569625854492%;
4481        color: rgba(48.47336959838867, 110.43135833740234, 255, 1);
4482        width: auto;
4483        height: auto;
4484        position: relative;
4485        flex-shrink: 0;
4486        white-space: nowrap;
4487        flex-grow: 0;
4488    }
4489
4490    @media(max-width: 430px) {
4491        .price-module-header-tip {
4492            padding: 0 12px;
4493        }
4494
4495        .price-module-header-tip__inner {
4496            width: min(318px, 100%);
4497            gap: 8px;
4498            padding: 7px 12px 7px 9px;
4499        }
4500
4501        .price-module-header-tip__message {
4502            flex: 1 1 auto;
4503        }
4504
4505        .price-module-header-tip__text {
4506            flex: 1 1 auto;
4507            overflow: visible;
4508            text-overflow: clip;
4509            white-space: normal;
4510            font-size: 12px;
4511        }
4512
4513        .price-module-header-tip__link-text {
4514            font-size: 12px;
4515        }
4516    }
4517
4518    @media(max-width: 360px) {
4519
4520        .price-module-header-tip__icon,
4521        .price-module-header-tip__arrow {
4522            width: 16px;
4523            height: 16px;
4524        }
4525
4526        .price-module-header-tip__text,
4527        .price-module-header-tip__link-text {
4528            font-size: 11px;
4529        }
4530    }
4531</style>
4532<!-- PIXSO_HREFLANG_STATIC_V2: endpoint-aware published canonical HTTP 200 groups -->
4533
4534
4535
4536
4537
4538<link rel="alternate" hreflang="en" href="https://pixso.net/pricing/">
4539<link rel="alternate" hreflang="ja" href="https://pixso.net/jp/pricing/">
4540<link rel="alternate" hreflang="ko" href="https://pixso.net/kr/pricing/">
4541<link rel="alternate" hreflang="ru" href="https://pixso.net/ru/pricing/">
4542<link rel="alternate" hreflang="es" href="https://pixso.net/es/pricing/">
4543<link rel="alternate" hreflang="x-default" href="https://pixso.net/pricing/">
4544
4545
4546
4547<!-- /PIXSO_HREFLANG_STATIC_V2 -->
4548</head>
4549<body data-pro="pixso" data-cat="template" data-nav="basic" data-sys="auto" data-dev="auto" data-tar="auto" data-lan="zh">
4550<header id="wsc-header">
4551    <nav class="navbar navbar-expand-1024 flex-column p-0  fixed-top">
4552        <div class="container-padding home-module__content header-container h-100">
4553            <div class="header-logo-container">
4554                <a class="navbar-logo" href="/">
4555                    <img class="navbar-logo__img" src="https://pixso.net/assets/media/px-logo-074d2a64fdeed33d.webp"
4556                        alt="pixso" />
4557                </a>
4558                <!---<div class="header-logo-tip" >
4559                        拖拽 LOGO 到地址栏收藏网站
4560                        <img class="header-logo-tip-arrow"
4561                            src="https://pixso.net/assets/media/header-logo-tip-28130517727881d9.svg" alt="pixso-logo-tip">
4562                    </div> -->
4563            </div>
4564
4565            <!---移动端折叠按钮 -->
4566            <div class="order-2 icon-box">
4567                <button class="navbar-toggler" style="padding:0" type="button" data-toggle="collapse"
4568                    data-target="#navbarMainContent" aria-controls="navbarMainContent" aria-expanded="false"
4569                    aria-label="Toggle navigation">
4570                    <i class="wsc-icon aria-expanded-false-show" data-icon="symbol-menu">
4571                    </i>
4572                    <i class="wsc-icon aria-expanded-true-show" data-icon="symbol-close" style="width: 12px;">
4573                    </i>
4574                </button>
4575            </div>
4576            <!---列表 -->
4577            <div class="collapse navbar-collapse order-3" id="navbarMainContent">
4578                <ul class="navbar-nav h-100 d-flex position-relative">
4579                    <!---产品 -->
4580                    <li
4581                        class="nav-item header-dropdown-item with-hand dropdown-nav-item h-100 position-relative with-hand headerTabCategory">
4582                        <div class="nav-link px-10 d-inline-flex align-items-center h-100">
4583                            <span>Product</span>
4584                            <svg class="dropdown--arrow" width="16" height="16" viewBox="0 0 16 16" fill="none"
4585                                xmlns="http://www.w3.org/2000/svg">
4586                                <path d="M4.5 6.25L8 9.75L11.5 6.25" stroke="black" stroke-linecap="round"
4587                                    stroke-linejoin="round" />
4588                            </svg>
4589                        </div>
4590                        <div class="header-item-container position-absolute header-item-container--product">
4591                            <!---产品 -->
4592                            <div class="header-item-container-col">
4593                                <div class="header-item-container-col-title">
4594                                    Product
4595                                </div>
4596                                <a class="header-item flx-align__center" href="https://pixso.net/"
4597                                    data-track="Pixso design">
4598                                    <div class="header-item-container-icon-wrap">
4599                                        <img class="header-item-container-icon"
4600                                            src="https://pixso.net/assets/media/header-pixso-icon-ac1a464464a5eace.webp"
4601                                            alt="Pixso design">
4602                                    </div>
4603                                    <div class="header-item-wrap">
4604                                        <div class="header-item-title">
4605                                            Pixso
4606                                        </div>
4607                                        <div class="header-item-description">
4608                                            All-in-one UI/UX design tool
4609                                        </div>
4610                                    </div>
4611                                    <img class="header-item-arrow"
4612                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4613                                        alt="arrow-right">
4614                                </a>
4615                                <a class="header-item flx-align__center"
4616                                    href="https://pixso.net/app/recent" data-track="Pixso AI">
4617                                    <div class="header-item-container-icon-wrap">
4618                                        <img class="header-item-container-icon"
4619                                            src="https://pixso.net/assets/media/header-pixsoai-icon-72fa574549d5bbcf.webp"
4620                                            alt="Pixso AI">
4621                                    </div>
4622                                    <div class="header-item-wrap">
4623                                        <div class="header-item-title">
4624                                            Pixso AI
4625                                        </div>
4626                                        <div class="header-item-description">
4627                                            Explore smart design
4628                                        </div>
4629                                    </div>
4630                                    <img class="header-item-arrow"
4631                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4632                                        alt="arrow-right">
4633                                </a>
4634                                
4635                                <a class="header-item flx-align__center" href="https://boardmix.com/"
4636                                    data-track="Boardmix">
4637                                    <div class="header-item-container-icon-wrap">
4638                                        <img class="header-item-container-icon"
4639                                            src="https://pixso.net/assets/media/header-boardmix-icon-052c529659093c26.webp"
4640                                            alt="Boardmix">
4641                                    </div>
4642                                    <div class="header-item-wrap">
4643                                        <div class="header-item-title">
4644                                            Boardmix
4645                                        </div>
4646                                        <div class="header-item-description">
4647                                            Online collaboration whiteboard
4648                                        </div>
4649                                    </div>
4650                                    <img class="header-item-arrow"
4651                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4652                                        alt="arrow-right">
4653                                </a>
4654                                <a class="header-item flx-align__center" href="https://presenti.ai/"
4655                                    data-track="Presenti AI">
4656                                    <div class="header-item-container-icon-wrap">
4657                                        <img class="header-item-container-icon"
4658                                            src="https://pixso.net/assets/media/presenti-logo-42eb16999453e437.webp"
4659                                            alt="Presenti AI">
4660                                    </div>
4661                                    <div class="header-item-wrap">
4662                                        <div class="header-item-title">
4663                                            Presenti AI
4664                                        </div>
4665                                        <div class="header-item-description">
4666                                            AI presentation maker
4667                                        </div>
4668                                    </div>
4669                                    <img class="header-item-arrow"
4670                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4671                                        alt="arrow-right">
4672                                </a>
4673                            </div>
4674                            <!---AI -->
4675                            <div class="header-item-container-col">
4676                                <div class="header-item-container-col-title">
4677                                    AI
4678                                </div>
4679                                <div class="header-item--ai-col">
4680                                    <a class="paico-ai-card" href="https://paico.ai/" data-track="Paico"
4681                                        aria-label="Paico">
4682                                        <div class="paico-ai-card__rings" aria-hidden="true">
4683                                            <div class="paico-ai-card__ring paico-ai-card__ring--1"></div>
4684                                            <div class="paico-ai-card__ring paico-ai-card__ring--2"></div>
4685                                            <div class="paico-ai-card__ring paico-ai-card__ring--3"></div>
4686                                            <div class="paico-ai-card__ring paico-ai-card__ring--4"></div>
4687                                        </div>
4688                                        <img class="paico-ai-card__preview"
4689                                            src="https://pixso.net/assets/media/paico-preview-5fd4155439f6e40f.webp" alt="">
4690                                        <div class="paico-ai-card__icon" aria-hidden="true">
4691                                            <img class="paico-ai-card__logo-main"
4692                                                src="https://pixso.net/assets/media/paico-logo-main-50a18ef75f3d8e43.webp"
4693                                                alt="">
4694                                            <img class="paico-ai-card__logo-spark"
4695                                                src="https://pixso.net/assets/media/paico-logo-spark-945da90dc02a03e7.webp"
4696                                                alt="">
4697                                        </div>
4698                                        <p class="paico-ai-card__title">Paico</p>
4699                                        <p class="paico-ai-card__description">Build any type of web and mobile app UI</p>
4700                                        <div class="paico-ai-card__arrow">
4701                                            <img src="https://pixso.net/assets/media/paico-arrow-81f40e563c6e1b57.svg"
4702                                                srcset="">
4703                                        </div>
4704                                    </a>
4705                                </div>
4706                            </div>
4707                            <!---资源与下载 -->
4708                            <div class="header-item-container-col">
4709                                <div class="header-item-container-col-title">
4710                                    Download
4711                                </div>
4712                                
4713                                <a class="header-item--box header-download-box" href="https://pixso.net/download/">
4714                                    <div class="header-item--box-title header-item--box-arrow">
4715                                        Get Pixso for Desktop
4716                                    </div>
4717                                    <p class="header-item--box-description">
4718                                        Available for Windows & Mac
4719                                    </p>
4720                                </a>
4721                            </div>
4722                        </div>
4723                    </li>
4724                    <!---AI生成设计稿 -->
4725                    <li
4726                            class="nav-item header-dropdown-item with-hand dropdown-nav-item h-100 position-relative with-hand headerTabCategory">
4727                            <div class="nav-link px-10 d-inline-flex align-items-center h-100">
4728                                <span>AI</span>
4729                                <svg class="dropdown--arrow" width="16" height="16" viewBox="0 0 16 16" fill="none"
4730                                    xmlns="http://www.w3.org/2000/svg">
4731                                    <path d="M4.5 6.25L8 9.75L11.5 6.25" stroke="black" stroke-linecap="round"
4732                                        stroke-linejoin="round" />
4733                                </svg>
4734                            </div>
4735                            <div class="header-item-container position-absolute header-item-container-ai">
4736                                <!-- AI -->
4737                                <div class="header-item-container-col">
4738                                    <a class="header-item flx-align__center" href="https://paico.ai/"
4739                                        data-track="Paico full-stack builder">
4740                                        <div class="header-item-container-icon-wrap">
4741                                            <img class="header-item-container-icon"
4742                                                src="https://pixso.net/assets/media/header-paico-icon-1311e2ddcaaac582.webp"
4743                                                alt="Paico full-stack builder">
4744                                        </div>
4745                                        <div class="header-item-wrap">
4746                                            <div class="header-item-title">
4747                                                Paico full-stack builder
4748                                            </div>
4749                                            <div class="header-item-description">
4750                                                Build any type of web and mobile app UI
4751                                            </div>
4752                                        </div>
4753                                        <img class="header-item-arrow"
4754                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4755                                            alt="arrow-right">
4756                                    </a>
4757                                    <a class="header-item flx-align__center" href="https://pixso.net/app/recent"
4758                                        data-track="Pixso AI design">
4759                                        <div class="header-item-container-icon-wrap">
4760                                            <img class="header-item-container-icon"
4761                                                src="https://pixso.net/assets/media/header-pixsoai-icon-72fa574549d5bbcf.webp"
4762                                                alt="Pixso AI design">
4763                                        </div>
4764                                        <div class="header-item-wrap">
4765                                            <div class="header-item-title">
4766                                                Pixso AI smart design
4767                                            </div>
4768                                            <div class="header-item-description">
4769                                                Generate and optimize designs directly on the canvas
4770                                            </div>
4771                                        </div>
4772                                        <img class="header-item-arrow"
4773                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4774                                            alt="arrow-right">
4775                                    </a>
4776                                </div>
4777                            </div>
4778                        </li>
4779                    <!-- 终身版 -->
4780                    <li class="nav-item h-100 position-relative with-hand">
4781                        <a class="nav-link px-10 h-100 d-inline-flex align-items-center"
4782                            href="https://pixso.net/pixso-lifetime-plan/"><span class="nav-item-lifetime">Lifetime
4783                                plan</span></a>
4784                    </li>
4785                    <!---解决方案 -->
4786                    <li
4787                            class="nav-item header-resource header-dropdown-item with-hand dropdown-nav-item h-100 position-relative with-hand headerTabCategory">
4788                            <div class="nav-link px-10 d-inline-flex align-items-center h-100">
4789                                <span class="">Solutions</span>
4790                                <svg class="dropdown--arrow" width="16" height="16" viewBox="0 0 16 16" fill="none"
4791                                    xmlns="http://www.w3.org/2000/svg">
4792                                    <path d="M4.5 6.25L8 9.75L11.5 6.25" stroke="black" stroke-linecap="round"
4793                                        stroke-linejoin="round" />
4794                                </svg>
4795                            </div>
4796                            <div class="header-item-container position-absolute header-item-container--solution">
4797                                <div class="header-item-container-col header-item-container-without-title">
4798                                    <a class="header-item flx-align__center"
4799                                        href="https://pixso.net/ui-design-collaboration/" data-track="UI design">
4800                                        <div class="header-item-container-icon-wrap">
4801                                            <img class="header-item-container-icon"
4802                                                src="https://pixso.net/assets/media/header-ui-icon-f17fba0b6512916e.svg"
4803                                                alt="UI design">
4804                                        </div>
4805                                        <div class="header-item-wrap">
4806                                            <div class="header-item-title">
4807                                                UI design
4808                                            </div>
4809                                            <div class="header-item-description">
4810                                                Efficient UI design
4811                                            </div>
4812                                        </div>
4813                                        <img class="header-item-arrow"
4814                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4815                                            alt="arrow-right">
4816                                    </a>
4817                                    <a class="header-item flx-align__center"
4818                                        href="https://pixso.net/ux-design-collaboration/" data-track="UX design">
4819                                        <div class="header-item-container-icon-wrap">
4820                                            <img class="header-item-container-icon"
4821                                                src="https://pixso.net/assets/media/header-ux-icon-398763026d6636ca.svg"
4822                                                alt="UX design">
4823                                        </div>
4824                                        <div class="header-item-wrap">
4825                                            <div class="header-item-title">
4826                                                UX design
4827                                            </div>
4828                                            <div class="header-item-description">
4829                                                Optimize user experience
4830                                            </div>
4831                                        </div>
4832                                        <img class="header-item-arrow"
4833                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4834                                            alt="arrow-right">
4835                                    </a>
4836                                    <a class="header-item flx-align__center" href="https://pixso.net/prototyping/"
4837                                        data-track="Prototyping">
4838                                        <div class="header-item-container-icon-wrap">
4839                                            <img class="header-item-container-icon"
4840                                                src="https://pixso.net/assets/media/header-proto-icon-d0089fbd7ad57776.svg"
4841                                                alt="Prototyping">
4842                                        </div>
4843                                        <div class="header-item-wrap">
4844                                            <div class="header-item-title">
4845                                                Prototyping
4846                                            </div>
4847                                            <div class="header-item-description">
4848                                                Simulate interaction flows with ease
4849                                            </div>
4850                                        </div>
4851                                        <img class="header-item-arrow"
4852                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4853                                            alt="arrow-right">
4854                                    </a>
4855                                </div>
4856                                <div class="header-item-container-col header-item-container-without-title">
4857                                    <a class="header-item flx-align__center" href="https://pixso.net/web-designing/"
4858                                        data-track="Web design">
4859                                        <div class="header-item-container-icon-wrap">
4860                                            <img class="header-item-container-icon"
4861                                                src="https://pixso.net/assets/media/web-design-df4b6ba0bd15fd80.svg"
4862                                                alt="Web design">
4863                                        </div>
4864                                        <div class="header-item-wrap">
4865                                            <div class="header-item-title">
4866                                                Web design
4867                                            </div>
4868                                            <div class="header-item-description">
4869                                                Design responsive web pages
4870                                            </div>
4871                                        </div>
4872                                        <img class="header-item-arrow"
4873                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4874                                            alt="arrow-right">
4875                                    </a>
4876                                    <a class="header-item flx-align__center" href="https://pixso.net/design-system/"
4877                                        data-track="Design system">
4878                                        <div class="header-item-container-icon-wrap">
4879                                            <img class="header-item-container-icon"
4880                                                src="https://pixso.net/assets/media/desgn-sys-9f2ddd0a3f72a572.svg"
4881                                                alt="Design system">
4882                                        </div>
4883                                        <div class="header-item-wrap">
4884                                            <div class="header-item-title">
4885                                                Design system
4886                                            </div>
4887                                            <div class="header-item-description">
4888                                                Standardize and manage enterprise-grade assets
4889                                            </div>
4890                                        </div>
4891                                        <img class="header-item-arrow"
4892                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4893                                            alt="arrow-right">
4894                                    </a>
4895                                    <a class="header-item flx-align__center" href="https://pixso.net/pixso-whiteboard/"
4896                                        data-track="Design whiteboard">
4897                                        <div class="header-item-container-icon-wrap">
4898                                            <img class="header-item-container-icon"
4899                                                src="https://pixso.net/assets/media/desgn-whiteboard-a33b0de55c133662.svg"
4900                                                alt="Design whiteboard">
4901                                        </div>
4902                                        <div class="header-item-wrap">
4903                                            <div class="header-item-title">
4904                                                Design whiteboard
4905                                            </div>
4906                                            <div class="header-item-description">
4907                                                Brainstorming & workflow mapping
4908                                            </div>
4909                                        </div>
4910                                        <img class="header-item-arrow"
4911                                            src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4912                                            alt="arrow-right">
4913                                    </a>
4914                                </div>
4915                            </div>
4916                        </li>
4917                    <!---社区 -->
4918                    <li
4919                        class="nav-item header-resource header-dropdown-item with-hand dropdown-nav-item h-100 position-relative with-hand headerTabCategory">
4920                        <div class="nav-link px-10 d-inline-flex align-items-center h-100">
4921                            <span class="">Resource</span>
4922                            <svg class="dropdown--arrow" width="16" height="16" viewBox="0 0 16 16" fill="none"
4923                                xmlns="http://www.w3.org/2000/svg">
4924                                <path d="M4.5 6.25L8 9.75L11.5 6.25" stroke="black" stroke-linecap="round"
4925                                    stroke-linejoin="round" />
4926                            </svg>
4927                        </div>
4928                        <div class="header-item-container position-absolute header-item-container--community">
4929                            <div class="header-item-container-col header-item-container-without-title">
4930                                <a class="header-item flx-align__center"
4931                                    href="https://pixso.net/community/home?classify=file"
4932                                    data-track="Design Assets">
4933                                    <div class="header-item-container-icon-wrap">
4934                                        <img class="header-item-container-icon"
4935                                            src="https://pixso.net/assets/media/header-deisgn-icon-b1d99f9aa5cbd1d2.svg"
4936                                            alt="Design Assets">
4937                                    </div>
4938                                    <div class="header-item-wrap">
4939                                        <div class="header-item-title">
4940                                            Design assets
4941                                        </div>
4942                                        <div class="header-item-description">
4943                                            Get high-quality design files for free
4944                                        </div>
4945                                    </div>
4946                                    <img class="header-item-arrow"
4947                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4948                                        alt="arrow-right">
4949                                </a>
4950                                <a class="header-item flx-align__center"
4951                                    href="https://pixso.net/community/home?classify=library"
4952                                    data-track="Component Libraries">
4953                                    <div class="header-item-container-icon-wrap">
4954                                        <img class="header-item-container-icon"
4955                                            src="https://pixso.net/assets/media/header-component-icon-5f7e7501aa2690fc.svg"
4956                                            alt="Component Libraries">
4957                                    </div>
4958                                    <div class="header-item-wrap">
4959                                        <div class="header-item-title">
4960                                            Component libraries
4961                                        </div>
4962                                        <div class="header-item-description">
4963                                            Components from top tech companies
4964                                        </div>
4965                                    </div>
4966                                    <img class="header-item-arrow"
4967                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4968                                        alt="arrow-right">
4969                                </a>
4970                                <a class="header-item flx-align__center" href="https://pixso.net/plugins/"
4971                                    data-track="Plugin Community">
4972                                    <div class="header-item-container-icon-wrap">
4973                                        <img class="header-item-container-icon"
4974                                            src="https://pixso.net/assets/media/header-proto-icon-d0089fbd7ad57776.svg"
4975                                            alt="Plugin Community">
4976                                    </div>
4977                                    <div class="header-item-wrap">
4978                                        <div class="header-item-title">
4979                                            Plugin community
4980                                        </div>
4981                                        <div class="header-item-description">
4982                                            Extend design possibilities with plugins
4983                                        </div>
4984                                    </div>
4985                                    <img class="header-item-arrow"
4986                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
4987                                        alt="arrow-right">
4988                                </a>
4989                            </div>
4990                            <!---热门精选 -->
4991                            <div class="header-item-container-col">
4992                                <div class="header-item-container-col-title">
4993                                    Featured
4994                                </div>
4995                                <a class="header-item--box header-popular-box"
4996                                    href="https://pixso.net/community/home">
4997                                    <img src="https://pixso.net/assets/media/header-popular-dd6c26936cf82f1b.webp"
4998                                        alt="Featured">
4999                                </a>
5000                                <!---设计技巧 -->
5001                                <div class="header-item-container-col-title" style="margin-top: 24px;">
5002                                    Blog
5003                                </div>
5004                                <a class="header-item--box header-skill-box" href="https://pixso.net/articles/">
5005                                </a>
5006                            </div>
5007                        </div>
5008                    </li>
5009                    <!---定价 -->
5010                    <li class="nav-item h-100 position-relative with-hand">
5011                        <a class="nav-link px-10  h-100 d-inline-flex align-items-center headerPrimaryBtnsTrack"
5012                            href="https://pixso.net/pricing/" data-track="Pricing"><span>Pricing</span></a>
5013                    </li>
5014                    <!---企业服务 -->
5015                    <li
5016                        class="nav-item header-resource header-dropdown-item with-hand dropdown-nav-item h-100 position-relative with-hand headerTabCategory">
5017                        <div class="nav-link px-10 d-inline-flex align-items-center h-100">
5018                            <span class="">Enterprise</span>
5019                            <svg class="dropdown--arrow" width="16" height="16" viewBox="0 0 16 16" fill="none"
5020                                xmlns="http://www.w3.org/2000/svg">
5021                                <path d="M4.5 6.25L8 9.75L11.5 6.25" stroke="black" stroke-linecap="round"
5022                                    stroke-linejoin="round" />
5023                            </svg>
5024                        </div>
5025                        <div class="header-item-container position-absolute header-item-container--enterprise">
5026                            <div class="header-item-container-col header-item-container-without-title">
5027                                <a class="header-item flx-align__center"
5028                                    href="https://pixso.net/organization-application/"
5029                                    data-track="Apply for Free Trial">
5030                                    <div class="header-item-container-icon-wrap">
5031                                        <img class="header-item-container-icon"
5032                                            src="https://pixso.net/assets/media/header-ent1-153193ffa462fb3b.svg"
5033                                            alt="Apply for Free Trial">
5034                                    </div>
5035                                    <div class="header-item-wrap">
5036                                        <div class="header-item-title">
5037                                            Apply for free trial
5038                                        </div>
5039                                    </div>
5040                                    <img class="header-item-arrow"
5041                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5042                                        alt="arrow-right">
5043                                </a>
5044                                <a class="header-item flx-align__center" href="https://pixso.net/pixso-enterprise/"
5045                                    data-track="Enterprise Edition">
5046                                    <div class="header-item-container-icon-wrap">
5047                                        <img class="header-item-container-icon"
5048                                            src="https://pixso.net/assets/media/header-ent2-24574057725cf6f9.svg"
5049                                            alt="Enterprise Edition">
5050                                    </div>
5051                                    <div class="header-item-wrap">
5052                                        <div class="header-item-title">
5053                                            Enterprise edition
5054                                        </div>
5055                                    </div>
5056                                    <img class="header-item-arrow"
5057                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5058                                        alt="arrow-right">
5059                                </a>
5060                                <a class="header-item flx-align__center"
5061                                    href="https://pixso.net/private-deployment/" data-track="Private Deployment">
5062                                    <div class="header-item-container-icon-wrap">
5063                                        <img class="header-item-container-icon"
5064                                            src="https://pixso.net/assets/media/header-ent3-4f51e4f0fd861c84.svg"
5065                                            alt="Private Deployment">
5066                                    </div>
5067                                    <div class="header-item-wrap">
5068                                        <div class="header-item-title">
5069                                            Private deployment
5070                                        </div>
5071                                    </div>
5072                                    <img class="header-item-arrow"
5073                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5074                                        alt="arrow-right">
5075                                </a>
5076                            </div>
5077                        </div>
5078                    </li>
5079                    <!---帮助支持 -->
5080                    <li
5081                        class="nav-item header-resource header-dropdown-item with-hand dropdown-nav-item h-100 position-relative with-hand headerTabCategory">
5082                        <div class="nav-link px-10 d-inline-flex align-items-center h-100">
5083                            <span class="">Support</span>
5084                            <svg class="dropdown--arrow" width="16" height="16" viewBox="0 0 16 16" fill="none"
5085                                xmlns="http://www.w3.org/2000/svg">
5086                                <path d="M4.5 6.25L8 9.75L11.5 6.25" stroke="black" stroke-linecap="round"
5087                                    stroke-linejoin="round" />
5088                            </svg>
5089                        </div>
5090                        <div class="header-item-container position-absolute header-item-container--support">
5091                            <div class="header-item-container-col header-item-container-without-title">
5092                                <a class="header-item flx-align__center" href="https://pixso.net/contact-us/"
5093                                    data-track="Contact Us">
5094                                    <div class="header-item-container-icon-wrap">
5095                                        <img class="header-item-container-icon"
5096                                            src="https://pixso.net/assets/media/header-support1-2bb2e388c6174c9a.svg"
5097                                            alt="Contact Us">
5098                                    </div>
5099                                    <div class="header-item-wrap">
5100                                        <div class="header-item-title">
5101                                            Contact us
5102                                        </div>
5103                                    </div>
5104                                    <img class="header-item-arrow"
5105                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5106                                        alt="arrow-right">
5107                                </a>
5108                                <a class="header-item flx-align__center" href="https://pixso.net/help/"
5109                                    data-track="Help Center">
5110                                    <div class="header-item-container-icon-wrap">
5111                                        <img class="header-item-container-icon"
5112                                            src="https://pixso.net/assets/media/header-support2-3923551c4b0fccee.svg"
5113                                            alt="Help Center">
5114                                    </div>
5115                                    <div class="header-item-wrap">
5116                                        <div class="header-item-title">
5117                                            Help center
5118                                        </div>
5119                                    </div>
5120                                    <img class="header-item-arrow"
5121                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5122                                        alt="arrow-right">
5123                                </a>
5124                                <a class="header-item flx-align__center" href="https://pixso.net/faq/"
5125                                    data-track="FAQ">
5126                                    <div class="header-item-container-icon-wrap">
5127                                        <img class="header-item-container-icon"
5128                                            src="https://pixso.net/assets/media/header-support3-bbafdabd18ed0519.svg"
5129                                            alt="FAQ">
5130                                    </div>
5131                                    <div class="header-item-wrap">
5132                                        <div class="header-item-title">
5133                                            FAQ
5134                                        </div>
5135                                    </div>
5136                                    <img class="header-item-arrow"
5137                                        src="https://pixso.net/assets/media/header-arrow-right-3d99301823099738.svg"
5138                                        alt="arrow-right">
5139                                </a>
5140                            </div>
5141                        </div>
5142                    </li>
5143                    <div class="header-container__rt">
5144                        <div class="login-contanier beforeLogin">
5145                            <div class="login-item">
5146                                <a href="https://pixso.net/app/" class="login-txt login">Log in</a>
5147                            </div>
5148                            <div class="login-item login-btn px-common-btn">
5149                                <a href="https://pixso.net/app/" class="login-txt">Get started</a>
5150                            </div>
5151                        </div>
5152
5153                        <div class="nav-item h-100 with-hand toWorkbench-container afterLogin" style="display:none">
5154                            <div class="toWorkbench headerPrimaryBtnsTrack px-common-btn">
5155                                <a href="https://pixso.net/app/" class="login-txt">Go to workspace</a>
5156                            </div>
5157                        </div>
5158                    </div>
5159                </ul>
5160            </div>
5161        </div>
5162    </nav>
5163</header>
5164<div id="app" class="home-module__content content">
5165        <div class="price-module__header">
5166            <!--<div class="price-module-header-tip">-->
5167            <!--    <a class="price-module-header-tip__inner" href="https://pixso.net/announcement/"-->
5168            <!--        aria-label="Announcement">-->
5169            <!--        <span class="price-module-header-tip__message">-->
5170            <!--            <img class="price-module-header-tip__icon"-->
5171            <!--                src="https://pixso.net/assets/media/notice-icon-252db99c4296314e.webp" alt="">-->
5172            <!--            <span class="price-module-header-tip__text">Monthly seats will be discontinued on June 1, 2026 (UTC+8).-->
5173            <!--                Please adjust your subscription plans accordingly.</span>-->
5174            <!--        </span>-->
5175            <!--        <span class="price-module-header-tip__link">-->
5176            <!--            <span class="price-module-header-tip__link-text">Announcement</span>-->
5177            <!--            <img class="price-module-header-tip__arrow"-->
5178            <!--                src="https://pixso.net/assets/media/notice-arrow-958174486784c024.webp" alt="">-->
5179            <!--        </span>-->
5180            <!--    </a>-->
5181            <!--</div>-->
5182            <h1>
5183                Pixso Subscription Plans & Pricing
5184            </h1>
5185            <div class="price-module__header-desc flx-align__center">
5186                <p style="opacity: 0.7;">Choose seats for the people who design, develop and collaborate with your team.</p>
5187                <!--<a href="https://pixso.net/new-benefit-structure/" class="price-module__header-link flx-align__center">-->
5188                <!--    Benefits-->
5189                <!--    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">-->
5190                <!--        <path d="M7 5.5L11 9.5L7 13.5" stroke="#306EFF" stroke-linecap="round"-->
5191                <!--            stroke-linejoin="round" />-->
5192                <!--    </svg>-->
5193                <!--</a>-->
5194            </div>
5195            <img src="https://pixso.net/assets/media/price-header-bg-60bff82360a0d50c.webp" class="price-module__header-bg left" alt srcset>
5196            <img src="https://pixso.net/assets/media/price-header-bg-60bff82360a0d50c.webp" class="price-module__header-bg right" alt srcset>
5197            <div class="select-plan__subtitle mt__4 flx__center">
5198                <span>
5199                    Please choose the plan that fits you best.
5200                </span>
5201                <div class="select-plan__version ml__4 flx-align__center">
5202                    <div class="select-plan__version-item  flx-align__center">
5203                        <div data-v-6511f09d class="ed-svg-icon flx__center" svg-inline icon-name="select-plan-design" style="width: 24px; height: 24px;">
5204                            <img src="https://pixso.net/assets/media/design-c0177a0a2972839d.svg" class alt>
5205                        </div> <span> Design files</span>
5206                    </div>
5207                    <div class="select-plan__version-item  flx-align__center">
5208                        <div data-v-6511f09d class="ed-svg-icon flx__center" svg-inline icon-name="select-plan-whiteboard" style="width: 24px; height: 24px;">
5209                            <img src="https://pixso.net/assets/media/board-3333dd588838747b.svg" class alt>
5210                        </div> <span>Whiteboard files</span>
5211                    </div>
5212                    <div class="select-plan__version-item  flx-align__center">
5213                        <div data-v-6511f09d class="ed-svg-icon flx__center" svg-inline icon-name="select-plan-dev" style="width: 24px; height: 24px;">
5214                            <img src="https://pixso.net/assets/media/dev-d7e6f462ba09c3c9.svg" class alt>
5215                        </div> <span>Dev view</span>
5216                    </div>
5217                </div>
5218            </div>
5219        </div>
5220        <div class="price-module__plan flx-align__center">
5221            <div v-for="item in SelectPlanList" :key="item.tag" class="price-module__content-item">
5222                <div class="select-plan-item pt__8" :class="item.customClass">
5223                    <div class="select-plan-item__header">
5224                        <div class="select-plan-item__title">
5225                            <span v-text="item.title"></span>
5226                        </div>
5227                        <div class="select-plan-item__sub-title">
5228                            <span v-text="item.subTitle"></span>
5229                        </div>
5230                        <div v-if="item.tag === 'pro'" class="select-plan-item__pro-radio">
5231                            <div class="select-plan-item__pro-radio-item" style="gap: 0.25rem;" :class="{'is-active': teamVersion === 0}" @click="teamVersion = 0">
5232                                <span>
5233                                    Monthly
5234                                </span>
5235                                <!--<span class="select-plan-item__pro-radio-item-tip">To be discontinued</span>-->
5236                            </div>
5237                            <div class="select-plan-item__pro-radio-item" :class="{'is-active': teamVersion === 1}" @click="teamVersion = 1">
5238                                Annual
5239                            </div>
5240                        </div>
5241                    </div>
5242                    <div class="select-plan-item__content">
5243                        <div class="select-plan-item__price">
5244                            <div class="select-plan-item__price-content">
5245                                <div v-if="item.tag === 'free'" class="select-plan-item__price-row" style="flex-direction: column;align-items: flex-start;justify-content: flex-start;">
5246                                    <div class="select-plan-item__price-label">
5247                                        Free
5248                                    </div>
5249                                    <div class="select-plan-item__price-value" style="font-size: 12px;color: #8b8c8f;line-height: 20px;">
5250                                        Unlimited free viewer seats
5251                                    </div>
5252                                </div>
5253                                <template v-else-if="item.tag === 'pro'">
5254                                    <div v-for="seat in licenseList" :key="seat.key" class="select-plan-item__price-row">
5255                                        <div class="select-plan-item__price-label">
5256                                            <p class="select-plan-item__price-label-text">
5257                                                <span v-text="seat.name"></span>
5258                                            </p>
5259                                            <div class="select-plan-item__price-label-icons flx-align__center">
5260                                                <img v-for="icon in seat.icons" :src="icon" class alt>
5261                                            </div>
5262                                        </div>
5263                                        <div class="select-plan-item__price-value">
5264                                            <span class="select-plan-item__price-value-number">
5265                                                $<span v-text="teamVersion === 0 ? teamMonthlyPrice[seat.key] : teamAnnualPrice[seat.key]"></span>
5266                                            </span>
5267                                            <span class="select-plan-item__price-value-unit">
5268                                                <span v-text="teamVersion === 0 ? '/month/seat' : '/year/seat'"></span>
5269                                            </span>
5270                                        </div>
5271                                    </div>
5272                                </template>
5273                                <template v-else-if="item.tag === 'ent'">
5274                                    <div v-for="seat in licenseList" :key="seat.key" class="select-plan-item__price-row">
5275                                        <div class="select-plan-item__price-label">
5276                                            <p class="select-plan-item__price-label-text">
5277                                                <span v-text="seat.name"></span>
5278                                            </p>
5279                                            <div class="select-plan-item__price-label-icons flx-align__center">
5280                                                <img v-for="icon in seat.icons" :src="icon" class alt>
5281                                            </div>
5282                                        </div>
5283                                        <div class="select-plan-item__price-value">
5284                                            <span class="select-plan-item__price-value-number">
5285                                                $<span v-text="entAnnualPrice[seat.key]"></span>
5286                                            </span>
5287                                            <span class="select-plan-item__price-value-unit">
5288                                                /year/seat
5289                                            </span>
5290                                        </div>
5291                                    </div>
5292                                </template>
5293                                <div v-if="item.tag === 'pri'" class="select-plan-item__price-row">
5294                                    <div class="select-plan-item__price-label">
5295                                        Custom
5296                                    </div>
5297                                    <div class="select-plan-item__price-value">
5298                                        <span class="select-plan-item__price-value-number">
5299
5300                                        </span>
5301                                        <span class="select-plan-item__price-value-unit">
5302                                            Contact us for more
5303                                        </span>
5304                                    </div>
5305                                </div>
5306                            </div>
5307                            <div class="select-plan-item__btn" :class="{'is-black': item.tag !== 'free'}" @click="handleClick(item.tag)">
5308                                <span v-text="item.btnText"></span>
5309                            </div>
5310                        </div>
5311                        <div class="select-plan-item__features">
5312                            <div class="select-plan-item__feature-item flx-align__center" :class="{'is-first': index === 0}" v-for="(feature, index) in item.features" :key="index">
5313                                <svg v-if="index > 0" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
5314                                    <path d="M5 9L8 12L14 6" stroke="black" stroke-opacity="0.7" stroke-linecap="round" stroke-linejoin="round"/>
5315                                </svg>
5316                                <span class="feature-item-text" :class="[index === 0 ? 't-title-12' : 't-body-12']">
5317                                    <span v-text="feature"></span>
5318                                </span>
5319                            </div>
5320                        </div>
5321                    </div>
5322                </div>
5323            </div>
5324        </div>
5325        <div class="price-module__ai">
5326            <div id="1_2" class="stroke-wrapper-1_2">
5327                <div class="Pixso-frame-1_2" style="width: 100%;">
5328                    <div class="frame-content-1_2">
5329                        <div id="1_3" class="stroke-wrapper-1_3">
5330                            <div class="Pixso-frame-1_3">
5331                                <div class="frame-content-1_3">
5332                                    <p id="1_4" class="Pixso-paragraph-1_4">Overview of in-editor AI features in Pixso
5333                                    </p>
5334                                    <div id="1_5" class="Pixso-frame-1_5">
5335                                        <div class="frame-content-1_5">
5336                                            <div id="1_6" class="stroke-wrapper-1_6">
5337                                                <div class="Pixso-frame-1_6">
5338                                                    <div class="frame-content-1_6">
5339                                                        <div id="1_7" class="stroke-wrapper-1_7">
5340                                                            <div class="Pixso-frame-1_7">
5341                                                                <div class="frame-content-1_7">
5342                                                                    <div id="1_8" class="Pixso-frame-1_8">
5343                                                                        <p id="1_9" class="Pixso-paragraph-1_9">
5344                                                                            How subscription plans affect AI credit
5345                                                                            usage and availability</p>
5346                                                                        <p id="1_10" class="Pixso-paragraph-1_10">
5347                                                                            To accommodate diverse collaboration needs,
5348                                                                            we offer 3 independent and
5349                                                                            <br>non-transferable types of AI credits:
5350                                                                        </p>
5351                                                                    </div>
5352                                                                </div>
5353                                                            </div>
5354                                                            <div class="stroke-1_7"></div>
5355                                                        </div>
5356                                                        <div id="1_11" class="Pixso-frame-1_11">
5357                                                            <div class="frame-content-1_11">
5358                                                                <div id="1_12" 
5358class="stroke-wrapper-1_12">
5359                                                                    <div class="Pixso-frame-1_12">
5360                                                                        <div class="frame-content-1_12">
5361                                                                            <div id="1_13" class="Pixso-frame-1_13">
5362                                                                                <div id="1_14" class="Pixso-vector-1_14"></div>
5363                                                                            </div>
5364                                                                            <div id="1_19" class="Pixso-frame-1_19">
5365                                                                                <div class="frame-content-1_19">
5366                                                                                    <div id="1_20" class="Pixso-text-1_20">
5367                                                                                        <p id="1_20_0" class="Pixso-paragraph-1_20_0">
5368                                                                                            <span id="1_20_0_1" class="Pixso-span-1_20_0_1">Personal
5369                                                                                                credits:</span><span id="1_20_0_2" class="Pixso-span-1_20_0_2">
5370                                                                                                Valid
5371                                                                                                only for AI actions
5372                                                                                                initiated in your
5373                                                                                                personal drafts.
5374                                                                                                Strictly for individual
5375                                                                                                use.</span>
5376                                                                                        </p>
5377                                                                                    </div>
5378                                                                                </div>
5379                                                                            </div>
5380                                                                        </div>
5381                                                                    </div>
5382                                                                    <div class="stroke-1_12"></div>
5383                                                                </div>
5384                                                                <div id="1_21" class="stroke-wrapper-1_21">
5385                                                                    <div class="Pixso-frame-1_21">
5386                                                                        <div class="frame-content-1_21">
5387                                                                            <div id="1_22" class="Pixso-frame-1_22">
5388                                                                                <div id="1_23" class="Pixso-vector-1_23"></div>
5389                                                                            </div>
5390                                                                            <div id="1_28" class="Pixso-frame-1_28">
5391                                                                                <div class="frame-content-1_28">
5392                                                                                    <div id="1_29" class="Pixso-text-1_29">
5393                                                                                        <p id="1_29_0" class="Pixso-paragraph-1_29_0">
5394                                                                                            <span id="1_29_0_1" class="Pixso-span-1_29_0_1">Team
5395                                                                                                credits:</span><span id="1_29_0_2" class="Pixso-span-1_29_0_2">
5396                                                                                                Valid
5397                                                                                                only for AI actions
5398                                                                                                within the team space.
5399                                                                                                Shared among team
5400                                                                                                members to facilitate
5401                                                                                                group
5402                                                                                                collaboration.</span>
5403                                                                                        </p>
5404                                                                                    </div>
5405                                                                                </div>
5406                                                                            </div>
5407                                                                        </div>
5408                                                                    </div>
5409                                                                    <div class="stroke-1_21"></div>
5410                                                                </div>
5411                                                                <div id="1_30" class="stroke-wrapper-1_30">
5412                                                                    <div class="Pixso-frame-1_30">
5413                                                                        <div class="frame-content-1_30">
5414                                                                            <div id="1_31" class="Pixso-frame-1_31">
5415                                                                                <div id="1_32" class="Pixso-vector-1_32"></div>
5416                                                                            </div>
5417                                                                            <div id="1_39" class="Pixso-frame-1_39">
5418                                                                                <div class="frame-content-1_39">
5419                                                                                    <div id="1_40" class="Pixso-text-1_40">
5420                                                                                        <p id="1_40_0" class="Pixso-paragraph-1_40_0">
5421                                                                                            <sp
5421an id="1_40_0_1" class="Pixso-span-1_40_0_1">Enterprise
5422                                                                                                credits:</span><span id="1_40_0_2" class="Pixso-span-1_40_0_2">
5423                                                                                                Valid
5424                                                                                                only for AI actions
5425                                                                                                within the enterprise
5426                                                                                                space. Shared among
5427                                                                                                enterprise members for
5428                                                                                                centralized management
5429                                                                                                and resource
5430                                                                                                allocation.</span>
5431                                                                                        </p>
5432                                                                                    </div>
5433                                                                                </div>
5434                                                                            </div>
5435                                                                        </div>
5436                                                                    </div>
5437                                                                    <div class="stroke-1_30"></div>
5438                                                                </div>
5439                                                                <div id="1_41" class="stroke-wrapper-1_41">
5440                                                                    <div class="Pixso-frame-1_41">
5441                                                                        <div class="frame-content-1_41">
5442                                                                            <div id="1_42" class="Pixso-text-1_42">
5443                                                                                <p id="1_42_0" class="Pixso-paragraph-1_42_0">
5444                                                                                    <span id="1_42_0_1" class="Pixso-span-1_42_0_1">*Note:</span><span id="1_42_0_2" class="Pixso-span-1_42_0_2">AI
5445                                                                                        credits in the Pixso editor and
5446                                                                                        Paico text-to-design are
5447                                                                                        completely separate and
5448                                                                                        <br>non-transferable.</span><span id="1_42_0_3" class="Pixso-span-1_42_0_3"></span>
5449                                                                                </p>
5450                                                                            </div>
5451                                                                        </div>
5452                                                                    </div>
5453                                                                    <div class="stroke-1_41"></div>
5454                                                                </div>
5455                                                            </div>
5456                                                        </div>
5457                                                    </div>
5458                                                </div>
5459                                                <div class="stroke-1_6"></div>
5460                                            </div>
5461                                            <div id="1_43" class="stroke-wrapper-1_43">
5462                                                <div class="Pixso-frame-1_43">
5463                                                    <div class="frame-content-1_43">
5464                                                        <div id="1_44" class="stroke-wrapper-1_44">
5465                                                            <div class="Pixso-frame-1_44">
5466                                                                <div class="frame-content-1_44">
5467                                                                    <div id="1_45" class="Pixso-frame-1_45">
5468                                                                        <p id="1_46" class="Pixso-paragraph-1_46">AI
5469                                                                            feature availability by seat type</p>
5470                                                                        <p id="1_47" class="Pixso-paragraph-1_47">
5471                                                                            The availability of AI features across files
5472                                                                            is determined by the specific capabilities
5473                                                                            <br>of your seat type, and is indirectly
5474                                                                            limited
5475                                                                            by your file editing permissions.
5476                                                                        </p>
5477                                                                    </div>
5478                                                                </div>
5479                                                            </div>
5480                                                            <div class="stroke-1_44"></div>
5481                                                        </div>
5482                                                        <div id="1_48" class="Pixso-frame-1_48">
5483                                                            <div class="frame-content-1_48">
5484                                                                <div id="1_49" class="stroke-wrapper-1_49">
5485                                                                    <div class="Pixso-frame-1_49">
5486                                                                        <div class="frame-content-1_49">
5487                                                                            <div id="1_50" class="Pixso-frame-1_50">
5488                                                                                <div id="1_51" class="Pixso-vector-1_51"></div>
5489                                                                            </div>
5490                                                                            <div id="1_53" class="Pixso-frame-1_53">
5491                                                                                <p id="1_54" class="Pixso-paragraph-1_54">Creator
5492                                                                                    seat
5493                                                                                </p>
5494                                                                                <div id="1_55" class="Pixso-frame-1_55">
5495                                                                                    <div id="1_56" class="Pixso-frame-1_56">
5496                                                                                        <p id="1_57" class="Pixso-paragraph-1_57">
5497                                                                                            Design files + Design AI</p>
5498                                                                                    </div>
5499                                                                                    <div id="1_60" class="Pixso-frame-1_60">
5500                                                                                        <p id="1_61" class="Pixso-paragraph-1_61">
5501                                                                                            Whiteboard files +
5502                                                                                            Whiteboard AI</p>
5503                                                                                    </div>
5504                                                                                </div>
5505                                                                            </div>
5506                                                                        </div>
5507                                                                    </div>
5508                                                                    <div class="stroke-1_49"></div>
5509                                                                </div>
5510                                                                <div id="1_73" class="stroke-wrapper-1_73">
5511                                                                    <div class="Pixso-frame-1_73">
5512                                                                        <div class="frame-content-1_73">
5513                                                                            <div id="1_74" 
5513class="Pixso-frame-1_74">
5514                                                                                <div id="1_75" class="Pixso-vector-1_75"></div>
5515                                                                            </div>
5516                                                                            <div id="1_77" class="Pixso-frame-1_77">
5517                                                                                <p id="1_78" class="Pixso-paragraph-1_78">
5518                                                                                    Developer seat
5519                                                                                </p>
5520                                                                                <div id="1_79" class="Pixso-frame-1_79">
5521                                                                                    <div id="1_80" class="Pixso-frame-1_80">
5522                                                                                        <p id="1_81" class="Pixso-paragraph-1_81">
5523                                                                                            Whiteboard files +
5524                                                                                            Whiteboard AI</p>
5525                                                                                    </div>
5526                                                                                </div>
5527                                                                            </div>
5528                                                                        </div>
5529                                                                    </div>
5530                                                                    <div class="stroke-1_73"></div>
5531                                                                </div>
5532                                                                <div id="1_82" class="Pixso-frame-1_82">
5533                                                                    <div class="frame-content-1_82">
5534                                                                        <div id="1_83" class="Pixso-vector-1_83"></div>
5535                                                                        <div id="1_85" class="Pixso-frame-1_85">
5536                                                                            <p id="1_86" class="Pixso-paragraph-1_86">
5537                                                                                Collaborator seat</p>
5538                                                                            <div id="1_87" class="Pixso-frame-1_87">
5539                                                                                <div id="1_88" class="Pixso-frame-1_88">
5540                                                                                    <p id="1_89" class="Pixso-paragraph-1_89">
5541                                                                                        Whiteboard files + Whiteboard AI
5542                                                                                    </p>
5543                                                                                </div>
5544                                                                            </div>
5545                                                                        </div>
5546                                                                    </div>
5547                                                                </div>
5548                                                            </div>
5549                                                        </div>
5550                                                    </div>
5551                                                </div>
5552                                                <div class="stroke-1_43"></div>
5553                                            </div>
5554                                        </div>
5555                                    </div>
5556                                </div>
5557                            </div>
5558                            <div class="stroke-1_3"></div>
5559                        </div>
5560                    </div>
5561                </div>
5562                <div class="stroke-1_2"></div>
5563            </div>
5564        </div>
5565        <!--<div class="price-module__example">-->
5566        <!--    <div class="price-module__example-title">-->
5567        <!--        Trusted by 10,000+ companies-->
5568        <!--    </div>-->
5569        <!--    <div class="price-module__example-list">-->
5570        <!--        <div class="price-module__example-item flx__center" v-for="(item,index) in 20" :key="item">-->
5571        <!--            <img :src="`https://pixso.net/assets/image/pricev2/exp${index+1}.png`" alt="">-->
5572        <!--        </div>-->
5573        <!--    </div>-->
5574        <!--</div>-->
5575        <!--<div class="price-module__compare-bg">-->
5576        <!--</div>-->
5577        <div class="price-module__compare">
5578            <div class="price-module__compare-inner-bg">
5579            </div>
5580            <h2 class="price-module__compare-title">
5581                Seat comparison
5582            </h2>
5583            <div class="price-module__compare-list flx-align__center">
5584                <div class="price-module__compare-item" v-for="item in compareList" :key="item.key">
5585                    <div class="price-module__compare-item-header">
5586                        <div class="price-module__compare-item-icon">
5587                            <img :src="item.icon" alt>
5588                        </div>
5589                        <div class="price-module__compare-item-name">
5590                            <span v-text="item.name"></span>
5591                        </div>
5592                        <div class="price-module__compare-item-sub">
5593                            <span v-text="item.sub"></span>
5594                        </div>
5595                    </div>
5596                    <div class="price-module__compare-item-content">
5597                        <div class="price-item-sub"><span v-text="item.features.length > 0 ? 'Create/Edit:' : 'View-only access'"></span>
5598                        </div>
5599                        <div class="price-module__compare-item-content-item flx-align__center" :class="{'is-active': item.features.includes(feature.key)}" v-for="feature in compareFeatures" :key="feature.key">
5600                            <svg v-if="item.features.includes(feature.key)" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
5601                                <path d="M5 9L8 12L14 6" stroke="black" stroke-opacity="0.8" stroke-linecap="round" stroke-linejoin="round"/>
5602                            </svg>
5603                            <svg v-else="" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
5604                                <path d="M5 9L13 9" stroke="black" stroke-opacity="0.4" stroke-linecap="round" stroke-linejoin="round"/>
5605                            </svg>
5606                            <span class="price-module-feature-text">
5607                                <span v-text="feature.name"></span>
5608                            </span>
5609                        </div>
5610                    </div>
5611                </div>
5612            </div>
5613        </div>
5614        <div class="price-module__version">
5615            <h2 class="price-module__version-title">Plan comparison</h2>
5616            <div class="price-module__version-sub">
5617                Find the plan that fits you best
5618            </div>
5619            <div class="price-module-version-wrapper">
5620                <div class="price-module__version-header flx-align__center">
5621                    <div class="price-module__version-header-item-list-blank">
5622                        <div class="features-item-label flx-align__center">
5623                            Feature comparison
5624                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
5625                                <g clip-path="url(#clip0_4761_98805)">
5626                                    <path d="M7.00002 9.33342V7.00008M7.00002 4.66675H7.00585M12.8334 7.00008C12.8334 10.2217 10.2217 12.8334 7.00002 12.8334C3.77836 12.8334 1.16669 10.2217 1.16669 7.00008C1.16669 3.77842 3.77836 1.16675 7.00002 1.16675C10.2217 1.16675 12.8334 3.77842 12.8334 7.00008Z" stroke="black" stroke-opacity="0.6" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
5627                                </g>
5628                                <defs>
5629                                    <clipPath id="clip0_4761_98805">
5630                                        <rect width="14" height="14" fill="white"/>
5631                                    </clipPath>
5632                                </defs>
5633                            </svg>
5634                        </div>
5635                    </div>
5636                    <div class="price-module__version-header-item" v-for="item in versionHeaderList" :key="item.label" :class="item.class">
5637                        <div class="price-module__version-header-item-label">
5638                            <span v-text="item.label"></span>
5639                        </div>
5640                        <div class="price-module__version-header-item-btn" @click="handleClick(item.tag)">
5641                            <span v-text="item.btnText"></span>
5642                        </div>
5643                    </div>
5644                </div>
5645                <div class="price-module-version-content">
5646                    <div v-for="(item,idx) in versionContentList" :key="item.label" class="price-module-version-content-item">
5647                        <div class="price-module-version-content-item-title" @click="toggleVersionExpand(idx)">
5648                            <span v-text="item.label"></span>
5649                            <div>
5650                                <svg v-if="versionExpandList[idx]" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
5651                                    <path d="M4 7L9 12L14 7" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
5652                                </svg>
5653                                <svg v-else="" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
5654                                    <path d="M4 11L9 6L14 11" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
5655                                </svg>
5656                            </div>
5657                        </div>
5658                        <div class="price-module-version-content-item-features" v-if="versionExpandList[idx]">
5659                            <div class="features-item flx-align__center" v-for="(feature,index) in item.features" :key="index">
5660                                <div class="features-item-label flx-align__center" :class="{'with-underline':!!feature.tip}">
5661                                    <span v-text="feature.label"></span>
5662                                    <div class="tip-icon" v-if="feature.tip">
5663                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
5664                                            <g clip-path="url(#clip0_4761_98805)">
5665                                                <path d="M7.00002 9.33342V7.00008M7.00002 4.66675H7.00585M12.8334 7.00008C12.8334 10.2217 10.2217 12.8334 7.00002 12.8334C3.77836 12.8334 1.16669 10.2217 1.16669 7.00008C1.16669 3.77842 3.77836 1.16675 7.00002 1.16675C10.2217 1.16675 12.8334 3.77842 12.8334 7.00008Z" stroke="black" stroke-opacity="0.6" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
5666                                            </g>
5667                                            <defs>
5668                                                <clipPath id="clip0_4761_98805">
5669                                                    <rect width="14" height="14" fill="white"/>
5670                                                </clipPath>
5671                                            </defs>
5672                                        </svg>
5673                                        <div class="tip-text">
5674                                            <span v-text="feature.tip"></span>
5675                                        </div>
5676                                    </div>
5677                                </div>
5678                                <div class="features-item-children flx-align__center">
5679                                    <div class="features-item-children-item" v-for="child in feature.children" :key="child">
5680                                        <template v-if="child === 'checked'">
5681                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
5682                                                <path d="M3.5 9L7.5 13L15.5 5" stroke="black" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
5683                                            </svg>
5684                                        </template>
5685                                        <template v-else-if="child === 'unChecked'">
5686                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
5687                                                <path d="M4 9H14" stroke="black" stroke-opacity="0.4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
5688                                            </svg>
5689                                        </template>
5690                                        <template v-else>
5691                                            <div v-html="child">
5692                                        </div></template>
5693                                    </div>
5694                                </div>
5695                            </div>
5696                        </div>
5697                    </div>
5698                </div>
5699            </div>
5700
5701        </div>
5702        <div class="price-module__faq">
5703            <h2 class="price-module__faq-title">Pixso in-editor AI features & credits FAQ</h2>
5704            <div class="price-module__faq-list">
5705                <div class="price-module__faq-item" v-for="(item, index) in faqList" :key="item.question">
5706                    <button class="price-module__faq-question" :class="{'is-active': faqExpandList[index]}" type="button" @click="toggleFaqExpand(index)" :aria-expanded="faqExpandList[index]">
5707                        <span class="price-module__faq-question-text"><span v-text="item.question"></span></span>
5708                        <span class="price-module__faq-icon" aria-hidden="true"></span>
5709                    </button>
5710                    <div class="price-module__faq-answer" v-if="faqExpandList[index]" v-html="item.answer">
5711                      
5712                    </div>
5713                </div>
5714            </div>
5715        </div>
5716    </div>
5717    
5717<script>
5718        const { createApp, computed, ref } = Vue;
5719
5720        var app = createApp({
5721            data() {
5722                const licenseList = [
5723                    {
5724                        name: "Creator seat",
5725                        key: "creator",
5726                        icons: [
5727                            "https://pixso.net/assets/media/design-c0177a0a2972839d.svg",
5728                            // "https://pixso.net/assets/media/product-1576a8e4c4a7b65d.svg",
5729                            "https://pixso.net/assets/media/board-3333dd588838747b.svg",
5730                            "https://pixso.net/assets/media/dev-d7e6f462ba09c3c9.svg",
5731                            "https://pixso.net/assets/media/ai-8d797be62972c80e.svg",
5732                        ]
5733                    },
5734                    // {
5735                    //     name: "Product seat",
5736                    //     key: "product",
5737                    //     icons: [
5738                    //         "https://pixso.net/assets/media/product-1576a8e4c4a7b65d.svg",
5739                    //         "https://pixso.net/assets/media/board-3333dd588838747b.svg",
5740                    //         "https://pixso.net/assets/media/ai-8d797be62972c80e.svg",
5741                    //     ]
5742                    // },
5743                    {
5744                        name: "Developer seat",
5745                        key: "developer",
5746                        icons: [
5747                            "https://pixso.net/assets/media/dev-d7e6f462ba09c3c9.svg",
5748                            "https://pixso.net/assets/media/board-3333dd588838747b.svg",
5749                            "https://pixso.net/assets/media/ai-8d797be62972c80e.svg",
5750                        ]
5751                    },
5752                    {
5753                        name: "Collaborator seat",
5754                        key: "collaborator",
5755                        icons: [
5756                            "https://pixso.net/assets/media/board-3333dd588838747b.svg",
5757                            "https://pixso.net/assets/media/ai-8d797be62972c80e.svg",
5758                        ]
5759                    }
5760                ]
5761
5762                const teamVersion = ref(0) // 0 = monthly, 1 = annual
5763
5764                const teamMonthlyPrice = {
5765                    ["collaborator"]: 4,
5766                    ["product"]: 38,
5767                    ["developer"]: 8,
5768                    ["creator"]: 12,
5769                }
5770                const teamAnnualPrice = {
5771                    ["collaborator"]: 24,
5772                    ["product"]: 380,
5773                    ["developer"]: 72,
5774                    ["creator"]: 120,
5775                }
5776                const entAnnualPrice = {
5777                    ["collaborator"]: 90,
5778                    ["product"]: 780,
5779                    ["developer"]: 120,
5780                    ["creator"]: 280,
5781                }
5782
5783                const SelectPlanList = computed(() => [
5784                    {
5785                        tag: "free",
5786                        title: "Free",
5787                        subTitle: "For personal creation, prototyping, and exploration",
5788                        btnText: "Get started",
5789                        features: [
5790                            "Free plan includes:",
5791                            "Unlimited viewer seats",
5792                            "Unlimited draft files",
5793                            "3 free design files",
5794                            "3 free whiteboard files",
5795                            "MCP (Limited-time free)",
5796                            // "300 free personal AI credits"
5797                        ],
5798                        customClass: "select-plan__item--free",
5799                        btnType: "secondary",
5800                        btnDisabled: true,
5801                    },
5802                    {
5803                        tag: "pro",
5804                        title: "Team",
5805                        subTitle: "For growing startups and SMBs",
5806                        btnText: "Upgrade to Team",
5807                        features: [
5808                            "Everything in Free, plus:",
5809                            "Unlimited projects",
5810                            "Unlimited files",
5811                            "Unlimited pages",
5812                            "Unlimited version history",
5813                            "Team resource libraries",
5814                            "Team font libraries",
5815                            "Private files",
5816                        ],
5817                        customClass: "select-plan__item--pro",
5818                        btnType: "primary",
5819                    },
5820                    {
5821                        tag: "ent",
5822                        title: "Enterprise",
5823                        subTitle: "For SMBs and organizations",
5824                        btnText: "Upgrade to Enterprise",
5825                        features: [
5826                            "Everything in Team, plus:",
5827                            "Advanced permissions",
5828                            "Member seat management",
5829                            "Collaboration logs",
5830                            "Enterprise resource libraries",
5831                            "Enterprise font libraries",
5832                            "Enterprise security",
5833                            "Custom domain",
5834                            "Private files",
5835                            "SSO (Single Sign-On)",
5836                        ],
5837                        customClass: "select-plan__item--ent",
5838                        btnType: "primary",
5839                    },
5840                    {
5841                        tag: "pri",
5842                        title: "On-premise",
5843                        subTitle: "For enterprises requiring large-scale delivery and collaboration",
5844                        btnText: "Contact us",
5845                        features: [
5846                            "Everything in Enterprise, plus:",
5847                            "On-premises deployment",
5848                            "Custom feature development",
5849                            "Core data encryption",
5850                            "Dedicated custom solutions",
5851                            "Dedicated technical consultant",
5852                        ],
5853                        customClass: "select-plan__item--pri",
5854                        btnType: "primary",
5855                    },
5856                ]);
5857
5858                const compareFeatures = [
5859                    {
5860                        key: "board",
5861                        name: "Whiteboard files"
5862                    },
5863                    {
5864                        key: "design",
5865                        name: "Design files"
5866                    },
5867                    {
5868                        key: "dev",
5869                        name: "Dev view"
5870                    },
5871                    {
5872                        key: "d2c",
5873                        name: "D2C (Design to Code)"
5874                    },
5875                    {
5876                        key: "ai",
5877                        name: "AI capabilities"
5878                    },
5879                    {
5880                        key: "dsm",
5881                        name: "DSM (Design System Management)"
5882                    },
5883                    // {
5884                    //     key: "delivery",
5885                    //     name: "Delivery"
5886                    // }
5887                ];
5888                const compareList = [
5889                    {
5890                        icon: "https://pixso.net/assets/media/compare-design-2267ca6b101746c7.svg",
5891                        name: "Creator seat",
5892                        sub: "Realize your dream product from start to finish.",
5893                        features: [
5894                            "board",
5895                            "product",
5896                            "dev",
5897                            "d2c",
5898                            "ai",
5899                            "delivery",
5900                            "dsm",
5901                            "design"
5902                        ]
5903                    },
5904                    {
5905                        icon: "https://pixso.net/assets/media/compare-dev-f82a3bd2cc55c5a4.svg",
5906                        name: "Developer seat",
5907                        sub: "Code and implement products.",
5908                        features: [
5909                            "board",
5910                            "dev",
5911                            "d2c",
5912                            "ai",
5913                            "dsm"
5914                        ]
5915                    },
5916                    {
5917                        icon: "https://pixso.net/assets/media/compare-collaborator-b5ada1c22bb689cd.svg",
5918                        name: "Collaborator seat",
5919                        sub: "Brainstorming, research, and collaboration.",
5920                        features: [
5921                            "board",
5922                            "ai"
5923                        ]
5924                    },
5925                    {
5926                        icon: "https://pixso.net/assets/media/compare-view-1933d4b1b5d7d7eb.svg",
5927                        name: "Viewer seat",
5928                        sub: "Unlimited free viewer seats.",
5929                        features: []
5930                    }
5931                ]
5932
5933                const versionHeaderList = [
5934                    {
5935                        label: "Free",
5936                        class: "version-header__item--free",
5937                        btnText: "Get started",
5938                        tag: "free",
5939                    },
5940                    {
5941                        label: "Team",
5942                        class: "version-header__item--team",
5943                        btnText: "Upgrade to Team",
5944                        tag: "pro",
5945                    },
5946                    {
5947                        label: "Enterprise",
5948                        class: "version-header__item--ent",
5949                        btnText: "Upgrade to Enterprise",
5950                        tag: "ent",
5951                    },
5952                    {
5953                        label: "On-premise",
5954                        class: "version-header__item--pri",
5955                        btnText: "Contact us",
5956                        tag: "pri",
5957                    },
5958                ];
5959
5960                const versionContentList = [
5961                    {
5962                        label: "Basic",
5963                        features: [
5964                            {
5965                                label: "Draft files",
5966                                tip: "Drafts allowed in personal space",
5967                                children: [
5968                                    "Unlimited",
5969                                    "Unlimited",
5970                                    "Unlimited",
5971                                    "Unlimited",
5972                                ]
5973                            },
5974                            // {
5975                            //     label: "Teams",
5976                            //     tip: "Teams allowed in personal space",
5977                            //     children: [
5978                            //         "Unlimited",
5979                            //         "Unlimited",
5980                            //         "Unlimited",
5981                            //         "Unlimited",
5982                            //     ]
5983                            // },
5984                            {
5985                                label: "Team members",
5986                                tip: "Members allowed per team",
5987                                children: [
5988                                    "Unlimited",
5989                                    "Unlimited",
5990                                    "Unlimited",
5991                                    "Unlimited",
5992                                ]
5993                            },
5994                            {
5995                                label: "Projects per team",
5996                                tip: "Projects allowed per team",
5997                                children: [
5998                                    "1",
5999                                    "Unlimited",
6000                                    "Unlimited",
6001                                    "Unlimited",
6002                                ]
6003                            },
6004                            {
6005                                label: "Design files per project",
6006                                tip: "Design files allowed in team projects",
6007                                children: [
6008                                    "3",
6009                                    "Unlimited",
6010                                    "Unlimited",
6011                                    "Unlimited",
6012                                ]
6013                            },
6014                            {
6015                                label: "Pages per design file",
6016                                tip: "Pages allowed per design file",
6017                                children: [
6018                                    "3",
6019                                    "Unlimited",
6020                                    "Unlimited",
6021                                    "Unlimited",
6022                                ]
6023                            },
6024                            {
6025                                label: "Whiteboard files per project",
6026                                tip: "Whiteboard files allowed in team projects",
6027                                children: [
6028                                    "3",
6029                                    "Unlimited",
6030                                    "Unlimited",
6031                                    "Unlimited",
6032                                ]
6033                            },
6034                        ]
6035                    },
6036                    {
6037                        label: "Smart delivery",
6038                        features: [
6039                            {
6040                                label: "Dev view",
6041                                tip: "",
6042                                children: [
6043                                    "unChecked",
6044                                    "checked",
6045                                    "checked",
6046                                    "checked",
6047                                ]
6048                            },
6049                            {
6050                                label: "AI in design editor",
6051                                tip: "",
6052                                children: [
6053                                    "unChecked",
6054                                    "checked",
6055                                    "checked",
6056                                    "checked",
6057                                ]
6058                            },
6059                            {
6060                                label: "D2C (Design to Code)",
6061                                tip: "Design to code",
6062                                children: [
6063                                    "unChecked",
6064                                    "checked",
6065                                    "checked",
6066                                    "checked",
6067                                ]
6068                            },
6069                            {
6070                                label: "C2D (Code to Design)",
6071                                tip: "Convert code to editable designs in Pixso",
6072                                children: [
6073                                    "checked",
6074                                    "checked",
6075                                    "checked",
6076                                    "checked",
6077                                ]
6078                            },
6079                            {
6080                                label: "MCP (Model Context Protocol)",
6081                                tip: "Pixso client required",
6082                                children: [
6083                                    "checked",
6084                                    "checked",
6085                                    "checked",
6086                                    "checked",
6087                                ]
6088                            }
6089                        ]
6090                    },
6091                    {
6092                        label: "Sharing & collaboration",
6093                        features: [
6094                            {
6095                                label: "Cross-platform collaboration",
6096                                tip: "",
6097                                children: [
6098                                    "checked",
6099                                    "checked",
6100                                    "checked",
6101                                    "checked",
6102                                ]
6103                            },
6104                            {
6105                                label: "Real-time collaboration",
6106                                tip: "Real-time multiplayer editing in the same file.",
6107                                children: [
6108                                    "checked",
6109                                    "checked",
6110                                    "checked",
6111                                    "checked",
6112                                ]
6113                            },
6114                            {
6115                                label: "Unlimited viewers",
6116                                tip: "",
6117                                children: [
6118                                    "checked",
6119                                    "checked",
6120                                    "checked",
6121                                    "checked",
6122                                ]
6123                            },
6124                            {
6125                                label: "Share file link",
6126                                tip: "Invite collaborators via link with permission controls.",
6127                                children: [
6128                                    "View only",
6129                                    "checked",
6130                                    "checked",
6131                                    "checked",
6132                                ]
6133                            },
6134                            {
6135                                label: "Advanced share permissions",
6136                                tip: "Control copying, sharing, and exporting.",
6137                                children: [
6138                                    "checked",
6139                                    "checked",
6140                                    "checked",
6141                                    "checked",
6142                                ]
6143                            },
6144                            {
6145                                label: "Prototype presentation",
6146                                tip: "",
6147                                children: [
6148                                    "checked",
6149                                    "checked",
6150                                    "checked",
6151                                    "checked",
6152                                ]
6153                            },
6154                            {
6155                                label: "Shareable prototype links",
6156                                tip: "Share standalone prototype links with clients instead of the full file link.",
6157                                children: [
6158                                    "checked",
6159                                    "checked",
6160                                    "checked",
6161                                    "checked",
6162                                ]
6163                            },
6164                            {
6165                                label: "Real-time comments",
6166                                tip: "Comments supported in prototype, design, and whiteboard files.",
6167                                children: [
6168                                    "checked",
6169                                    "checked",
6170                                    "checked",
6171                                    "checked",
6172                                ]
6173                            },
6174                            {
6175                                label: "Observer mode",
6176                                tip: "Follow a specific user's view, ideal for testing and demos.",
6177                                children: [
6178                                    "checked",
6179                                    "checked",
6180                                    "checked",
6181                                    "checked",
6182                                ]
6183                            },
6184                        ]
6185                    },
6186                    {
6187                        label: "Design files",
6188                        features: [
6189                            {
6190                                label: "Basic design",
6191                                tip: "Includes canvas, layers, shapes, vectors, constraints, fills, etc.",
6192                                children: [
6193                                    "checked",
6194                                    "checked",
6195                                    "checked",
6196                                    "checked",
6197                                ]
6198                            },
6199                            {
6200                                label: "Advanced design",
6201                                tip: "Specialized Web/UI features like Smart Selection and Vector Networks.",
6202                                children: [
6203                                    "checked",
6204                                    "checked",
6205                                    "checked",
6206                                    "checked",
6207                                ]
6208                            },
6209                            {
6210                                label: "Auto layout",
6211                                tip: "",
6212                                children: [
6213                                    "checked",
6214                                    "checked",
6215                                    "checked",
6216                                    "checked",
6217                                ]
6218                            },
6219                            {
6220                                label: "Components",
6221                                tip: "",
6222                                children: [
6223                                    "checked",
6224                                    "checked",
6225                                    "checked",
6226                                    "checked",
6227                                ]
6228                            },
6229                            {
6230                                label: "Styles",
6231                                tip: "",
6232                                children: [
6233                                    "checked",
6234                                    "checked",
6235                                    "checked",
6236                                    "checked",
6237                                ]
6238                            },
6239                            {
6240                                label: "Design Tokens",
6241                                tip: "",
6242                                children: [
6243                                    "1 design token collection, <br>2 modes",
6244                                    "checked",
6245                                    "checked",
6246                                    "checked",
6247                                ]
6248                            },
6249                            {
6250                                label: "Axure/Figma import",
6251                                tip: "",
6252                                children: [
6253                                    "checked",
6254                                    "checked",
6255                                    "checked",
6256                                    "checked",
6257                                ]
6258                            },
6259                            {
6260                                label: "Sketch/Adobe XD import & export",
6261                                tip: "",
6262                                children: [
6263                                    "checked",
6264                                    "checked",
6265                                    "checked",
6266                                    "checked",
6267                                ]
6268                            },
6269                            {
6270                                label: "Built-in design assets",
6271                                tip: "",
6272                                children: [
6273                                    "checked",
6274                                    "checked",
6275                                    "checked",
6276                                    "checked",
6277                                ]
6278                            },
6279                            {
6280                                label: "Plugins",
6281                                tip: "A wide range of plugins is available in the editor and Pixso community.",
6282                                children: [
6283                                    "checked",
6284                                    "checked",
6285                                    "checked",
6286                                    "checked",
6287                                ]
6288                            },
6289                            {
6290                                label: "Export & slicing",
6291                                tip: "",
6292                                children: [
6293                                    "checked",
6294                                    "checked",
6295                                    "checked",
6296                                    "checked",
6297                                ]
6298                            },
6299                            {
6300                                label: "Custom export specs",
6301                                tip: "",
6302                                children: [
6303                                    "checked",
6304                                    "checked",
6305                                    "checked",
6306                                    "checked",
6307                                ]
6308                            },
6309                            {
6310                                label: "Team resource library",
6311                                tip: "",
6312                                children: [
6313                                    "unChecked",
6314                                    "checked",
6315                                    "checked",
6316                                    "checked",
6317                                ]
6318                            },
6319                            {
6320                                label: "Team font library",
6321                                tip: "",
6322                                children: [
6323                                    "unChecked",
6324                                    "checked",
6325                                    "checked",
6326                                    "checked",
6327                                ]
6328                            },
6329                            {
6330                                label: "Local fonts",
6331                                tip: "Access local fonts via Font Assistant",
6332                                children: [
6333                                    "checked",
6334                                    "checked",
6335                                    "checked",
6336                                    "checked",
6337                                ]
6338                            },
6339                            {
6340                                label: "Interactions",
6341                                tip: "",
6342                                children: [
6343                                    "checked",
6344                                    "checked",
6345                                    "checked",
6346                                    "checked",
6347                                ]
6348                            },
6349                            {
6350                                label: "Video/GIF import & demo",
6351                                tip: "",
6352                                children: [
6353                                    "checked",
6354                                    "checked",
6355                                    "checked",
6356                                    "checked",
6357                                ]
6358                            },
6359                            {
6360                                label: "Interactive animation",
6361                                tip: "",
6362                                children: [
6363                                    "checked",
6364                                    "checked",
6365                                    "checked",
6366                                    "checked",
6367                                ]
6368                            },
6369                            {
6370                                label: "Smart animate",
6371                                tip: "",
6372                                children: [
6373                                    "checked",
6374                                    "checked",
6375                                    "checked",
6376                                    "checked",
6377                                ]
6378                            },
6379                        ]
6380                    },
6381
6382                    {
6383                        label: "Whiteboard files",
6384                        features: [
6385                            {
6386                                label: "Export - HD image",
6387                                tip: "",
6388                                children: [
6389                                    "unChecked",
6390                                    "checked",
6391                                    "checked",
6392                                    "checked",
6393                                ]
6394                            },
6395                            {
6396                                label: "Export - by page",
6397                                tip: "",
6398                                children: [
6399                                    "unChecked",
6400                                    "checked",
6401                                    "checked",
6402                                    "checked",
6403                                ]
6404                            },
6405                            {
6406                                label: "Export - no watermark",
6407                                tip: "",
6408                                children: [
6409                                    "unChecked",
6410                                    "checked",
6411                                    "checked",
6412                                    "checked",
6413                                ]
6414                            },
6415                            {
6416                                label: "Export - Xmind",
6417                                tip: "",
6418                                children: [
6419                                    "unChecked",
6420                                    "checked",
6421                                    "checked",
6422                                    "checked",
6423                                ]
6424                            },
6425                            {
6426                                label: "Export - Word",
6427                                tip: "",
6428                                children: [
6429                                    "unChecked",
6430                                    "checked",
6431                                    "checked",
6432                                    "checked",
6433                                ]
6434                            },
6435                            {
6436                                label: "Export - presentation",
6437                                tip: "",
6438                                children: [
6439                                    "unChecked",
6440                                    "checked",
6441                                    "checked",
6442                                    "checked",
6443                                ]
6444                            },
6445                            {
6446                                label: "Mind map themes",
6447                                tip: "",
6448                                children: [
6449                                    "unChecked",
6450                                    "checked",
6451                                    "checked",
6452                                    "checked",
6453                                ]
6454                            },
6455                            {
6456                                label: "Canvas upload limit",
6457                                tip: "",
6458                                children: [
6459                                    "5MB file, 5MB image",
6460                                    "checked",
6461                                    "checked",
6462                                    "checked",
6463                                ]
6464                            },
6465                            {
6466                                label: "Limited features",
6467                                tip: "",
6468                                children: [
6469                                    "unChecked",
6470                                    "checked",
6471                                    "checked",
6472                                    "checked",
6473                                ]
6474                            },
6475                            {
6476                                label: "Community/official templates free",
6477                                tip: "",
6478                                children: [
6479                                    "unChecked",
6480                                    "checked",
6481                                    "checked",
6482                                    "checked",
6483                                ]
6484                            },
6485                            {
6486                                label: "Asset library capacity",
6487                                tip: "",
6488                                children: [
6489                                    "unChecked",
6490                                    "checked",
6491                                    "checked",
6492                                    "checked",
6493                                ]
6494                            },
6495                            {
6496                                label: "Shape themes",
6497                                tip: "",
6498                                children: [
6499                                    "unChecked",
6500                                    "checked",
6501                                    "checked",
6502                                    "checked",
6503                                ]
6504                            },
6505                            {
6506                                label: "Shape library",
6507                                tip: "",
6508                                children: [
6509                                    "unChecked",
6510                                    "checked",
6511                                    "checked",
6512                                    "checked",
6513                                ]
6514                            },
6515                            {
6516                                label: "Convert to Jira card",
6517                                tip: "",
6518                                children: [
6519                                    "unChecked",
6520                                    "checked",
6521                                    "checked",
6522                                    "checked",
6523                                ]
6524                            },
6525                        ],
6526                    },
6527                    {
6528                        label: "Security",
6529                        features: [
6530                            {
6531                                label: "Enterprise admin",
6532                                tip: "",
6533                                children: [
6534                                    "unChecked",
6535                                    "unChecked",
6536                                    "checked",
6537                                    "checked",
6538                                ]
6539                            },
6540                            {
6541                                label: "Member management",
6542                                tip: "",
6543                                children: [
6544                                    "unChecked",
6545                                    "unChecked",
6546                                    "checked",
6547                                    "checked",
6548                                ]
6549                            },
6550                            {
6551                                label: "Seat management",
6552                                tip: "",
6553                                children: [
6554                                    "unChecked",
6555                                    "unChecked",
6556                                    "checked",
6557                                    "checked",
6558                                ]
6559                            },
6560                            {
6561                                label: "Team management",
6562                                tip: "",
6563                                children: [
6564                                    "unChecked",
6565                                    "unChecked",
6566                                    "checked",
6567                                    "checked",
6568                                ]
6569                            },
6570                            {
6571                                label: "Analytics dashboard",
6572                                tip: "",
6573                                children: [
6574                                    "unChecked",
6575                                    "unChecked",
6576                                    "checked",
6577                                    "checked",
6578                                ]
6579                            },
6580                            {
6581                                label: "Activity dashboard",
6582                                tip: "",
6583                                children: [
6584                                    "unChecked",
6585                                    "unChecked",
6586                                    "checked",
6587                                    "checked",
6588                                ]
6589                            },
6590                            {
6591                                label: "Enterprise resource library",
6592                                tip: "",
6593                                children: [
6594                                    "unChecked",
6595                                    "unChecked",
6596                                    "checked",
6597                                    "checked",
6598                                ]
6599                            },
6600                            {
6601                                label: "Enterprise font library",
6602                                tip: "",
6603                                children: [
6604                                    "unChecked",
6605                                    "unChecked",
6606                                    "checked",
6607                                    "checked",
6608                                ]
6609                            },
6610                            {
6611                                label: "Offboarding handover",
6612                                tip: "",
6613                                children: [
6614                                    "unChecked",
6615                                    "unChecked",
6616                                    "checked",
6617                                    "checked",
6618                                ]
6619                            },
6620                            {
6621                                label: "Asset archive",
6622                                tip: "",
6623                                children: [
6624                                    "unChecked",
6625                                    "unChecked",
6626                                    "checked",
6627                                    "checked",
6628                                ]
6629                            },
6630                            {
6631                                label: "Enterprise logs",
6632                                tip: "Audit log",
6633                                children: [
6634                                    "unChecked",
6635                                    "unChecked",
6636                                    "checked",
6637                                    "checked",
6638                                ]
6639                            },
6640                            {
6641                                label: "Permission control",
6642                                tip: "",
6643                                children: [
6644                                    "unChecked",
6645                                    "unChecked",
6646                                    "checked",
6647                                    "checked",
6648                                ]
6649                            },
6650                            {
6651                                label: "SSO (Single Sign-On)",
6652                                tip: "",
6653                                children: [
6654                                    "unChecked",
6655                                    "unChecked",
6656                                    "checked",
6657                                    "checked",
6658                                ]
6659                            },
6660                            {
6661                                label: "Custom domain",
6662                                tip: "",
6663                                children: [
6664                                    "unChecked",
6665                                    "unChecked",
6666                                    "checked",
6667                                    "checked",
6668                                ]
6669                            },
6670                        ]
6671                    },
6672                    {
6673                        label: "Support",
6674                        features: [
6675                            {
6676                                label: "Pixso Help Center",
6677                                tip: "",
6678                                children: [
6679                                    "checked",
6680                                    "checked",
6681                                    "checked",
6682                                    "checked",
6683                                ]
6684                            },
6685                            {
6686                                label: "Pixso community",
6687                                tip: "",
6688                                children: [
6689                                    "checked",
6690                                    "checked",
6691                                    "checked",
6692                                    "checked",
6693                                ]
6694                            },
6695                            {
6696                                label: "Third-party integrations",
6697                                tip: "",
6698                                children: [
6699                                    "unChecked",
6700                                    "unChecked",
6701                                    "checked",
6702                                    "checked",
6703                                ]
6704                            },
6705                            {
6706                                label: "Dedicated account manager",
6707                                tip: "",
6708                                children: [
6709                                    "unChecked",
6710                                    "unChecked",
6711                                    "checked",
6712                                    "checked",
6713                                ]
6714                            },
6715                            {
6716                                label: "Deployment support",
6717                                tip: "",
6718                                children: [
6719                                    "unChecked",
6720                                    "unChecked",
6721                                    "checked",
6722                                    "checked",
6723                                ]
6724                            },
6725                            {
6726                                label: "On-site training",
6727                                tip: "",
6728                                children: [
6729                                    "unChecked",
6730                                    "unChecked",
6731                                    "checked",
6732                                    "checked",
6733                                ]
6734                            },
6735                        ]
6736                    }
6737                ]
6738
6739                const versionExpandList = ref([
6740                    true,
6741                    true,
6742                    true,
6743                    true,
6744                    true,
6745                    true,
6746                    true,
6747                    true,
6748                ])
6749                const toggleVersionExpand = (index) => {
6750                    versionExpandList.value[index] = !versionExpandList.value[index];
6751                }
6752                const goApp = () => {
6753                    window.open("https://pixso.net/app/recent")
6754                }
6755                const goAppPrice = () => {
6756                    window.open("https://pixso.net/app/recent?select_plan=1")
6757                }
6758                const goEnt = () => {
6759                    window.open("https://pixso.net/organization-application/")
6760                }
6761                const goPri = () => {
6762                    window.open("https://docs.google.com/forms/d/e/1FAIpQLSfxoB-lS5OUBYEApLHg05f89p0EEsRzd_uJNGHvvJ_0aIjUbg/viewform?pli=1")
6763                }
6764                const handleClick = (tag) => {
6765                    if (tag === "pro") {
6766                        goAppPrice();
6767                    } else if (tag === "free") {
6768                        goApp();
6769                    } else if (tag === "ent") {
6770                        goEnt();
6771                    } else if (tag === "pri") {
6772                        goPri();
6773                    }
6774                }
6775
6776                const faqList = [
6777                    {
6778                        question: "Are AI credits shared between Pixso design files and Paico text-to-design?",
6779                        answer: "No. Pixso design files and Paico text-to-design operate as two distinct platforms. The AI in Pixso design files focuses on enhancing overall editing efficiency, whereas Paico text-to-design is tailored for rapidly building websites from scratch."
6780                    },
6781                    {
6782                        question: "What is the functional difference between the two?",
6783                        answer: "Pixso in-editor AI is geared towards rapid daily generative tasks, offering more comprehensive feature coverage. \nMeanwhile, Paico text-to-design is dedicated to professional and systematic web page design."
6784                    },
6785                    {
6786                        question: "What can Pixso in-editor AI do?",
6787                        answer: "Design files: AI editing to boost layout and editing efficiency. \nWhiteboard files: AI Copilot for one-click generation of mind maps, brainstorming sessions, and information summarization."
6788                    },
6789                    {
6790                        question: "Can I purchase AI features for specific files individually?",
6791                        answer: "AI feature access depends on your seat type, file editing permissions, and the AI credits available in the relevant workspace."
6792                    },
6793                    {
6794                        question: "Do purchased seats include complimentary AI credits?",
6795                        answer: `Seats do not come with complimentary AI credits at this time. However, if you purchase a lifetime license, a set amount of AI credits will be allocated on a tiered basis according to the benefits of your selected plan. For more details, please refer to the <a target="_blank" href="https://pixso.net/pixso-lifetime-plan/">Lifetime License</a> information page.`
6796                    },
6797                    {
6798                        question: "Do AI credits expire?",
6799                        answer: "Purchased personal, team, and enterprise AI credits do not expire. Each balance applies to its corresponding workspace, and using an AI feature also requires the appropriate seat and file permissions."
6800                    },
6801
6802                ]
6803                const faqExpandList = ref(faqList.map((_, index) => index === 2))
6804                const toggleFaqExpand = (index) => {
6805                    faqExpandList.value[index] = !faqExpandList.value[index];
6806                }
6807
6808                return {
6809                    SelectPlanList,
6810                    licenseList,
6811                    teamVersion,
6812                    teamMonthlyPrice,
6813                    teamAnnualPrice,
6814                    entAnnualPrice,
6815                    compareList,
6816                    compareFeatures,
6817                    versionHeaderList,
6818                    versionContentList,
6819                    versionExpandList,
6820                    toggleVersionExpand,
6821                    handleClick,
6822                    goAppPrice,
6823                    faqList,
6824                    faqExpandList,
6825                    toggleFaqExpand,
6826                }
6827            },
6828            mounted() {
6829                // Init scroll animation after Vue mount
6830                this.initScrollAnimations();
6831                // Init sticky header
6832                this.initTitleSticky();
6833            },
6834            methods: {
6835                // Init scroll animation
6836                initScrollAnimations() {
6837                    // Intersection Observer for scroll-in animation
6838                    const observer = new IntersectionObserver((entries) => {
6839                        entries.forEach(entry => {
6840                            if (entry.isIntersecting) {
6841                                // Add animation class when in view
6842                                entry.target.classList.add('animate-in');
6843                            } else {
6844                                // Remove when leaving view (re-trigger on next enter)
6845                                // entry.target.classList.remove('animate-in');
6846                            }
6847                        });
6848                    }, {
6849                        threshold: 0.1, // Trigger when 10% in view
6850                        rootMargin: '0px 0px -50px 0px' // Trigger 50px early
6851                    });
6852
6853                    const animateElements = document.querySelectorAll('.scroll-animate-up');
6854                    animateElements.forEach(element => {
6855                        observer.observe(element);
6856                    });
6857                },
6858                initTitleSticky() {
6859                    setTimeout(() => {
6860                        const items = document.querySelectorAll('.price-module-version-content-item');
6861                        const titles = document.querySelectorAll('.price-module-version-content-item-title');
6862                        let ticking = false;
6863                        const handleScroll = () => {
6864                            if (!ticking) {
6865                                window.requestAnimationFrame(() => {
6866                                    items.forEach((item, index) => {
6867                                        const title = titles[index];
6868                                        if (!title) return;
6869                                        const rect = item.getBoundingClientRect();
6870                                        if (rect.top <= 179 && rect.bottom > 0) {
6871                                            title.classList.add('sticky');
6872                                        } else {
6873                                            title.classList.remove('sticky');
6874                                        }
6875                                    });
6876                                    ticking = false;
6877                                });
6878                                ticking = true;
6879                            }
6880                        };
6881
6882                        // Initial check
6883                        handleScroll();
6884
6885                        // Listen to scroll
6886                        window.addEventListener('scroll', handleScroll, { passive: true });
6887                    }, 0);
6888                }
6889            }
6890        });
6891        var el = document.querySelector('#app');
6892        if (el) {
6893            app.mount('#app');
6894        } else {
6895            document.addEventListener('DOMContentLoaded', function () {
6896                app.mount('#app');
6897            });
6898        }
6899    </script>
6899
6900<footer id="common-footer" class="home-module__content">
6901        <div class="home-module__mid ">
6902            <h2 class='common-footer__title'>
6903                A new experience in efficient product design starts with Pixso
6904            </h2>
6905            <a class='px-common-btn' href="https://pixso.net/app/recent">
6906                Get started
6907            </a>
6908            <div class='common-footer__opera flex_center'>
6909                <div class='common-footer__opera-item '>
6910                    <img src='https://pixso.net/assets/media/footer-item-0-fbfe61e891967d5c.svg' alt='' />
6911                </div>
6912                <div class='common-footer__opera-item'>
6913                    <img src='https://pixso.net/assets/media/footer-item-1-4a7f7939ac05cc56.svg' alt='' />
6914                </div>
6915                <div class='common-footer__opera-item'>
6916                    <img src='https://pixso.net/assets/media/footer-item-2-9cf4712074fd8b10.svg' alt='' />
6917                </div>
6918                <div class='common-footer__opera-item'>
6919                    <img src='https://pixso.net/assets/media/footer-item-3-2900dae9cdd76f4a.svg' alt='' />
6920                </div>
6921                <div class='common-footer__opera-item'>
6922                    <img src='https://pixso.net/assets/media/footer-item-4-3bdd8b37fea3e4ef.svg' alt='' />
6923                </div>
6924            </div>
6925            <div class="module-12__content">
6926                <div class="left-slash-bg dotted-top-boder dotted-bottom-boder"></div>
6927                <div class="right-slash-bg dotted-top-boder dotted-bottom-boder"></div>
6928                <div class='common-footer__bd scroll-animate-up'>
6929                    <div class='common-footer__bd-top' style="position: relative;z-index: 2;">
6930                        <div class='common-footer__bd-lf'>
6931                            <div class='common-footer__bd-primary'>
6932                                <img src='https://pixso.net/assets/media/px-logo-074d2a64fdeed33d.webp' alt='' />
6933                                <div class='common-footer__bd-desc'>
6934                                    All-in-one product design & collaboration tool
6935                                </div>
6936                            </div>
6937                            <div class="d-flex common-footer-media" style="margin-top:17px;gap:8px;">
6938                                <a href="https://www.facebook.com/profile.php?id=61555904130090" target="_blank" rel="nofollow">
6939                                    <img class="media-logo"
6940                                        src="https://pixso.net/assets/media/footer-logo6-298d6728c443f94f.webp">
6941                                </a>
6942                                <a href="https://twitter.com/PixsoOfficial" target="_blank" rel="nofollow">
6943                                    <img class="media-logo"
6944                                        src="https://pixso.net/assets/media/footer-logo1-ac0192502ae22a10.webp">
6945                                </a>
6946                                <a href="https://www.youtube.com/channel/UCEtQnXbK7V2G1i7G9zjJ-lw" target="_blank" rel="nofollow">
6947                                    <img class="media-logo"
6948                                        src="https://pixso.net/assets/media/footer-logo2-0831df2faf8948f5.webp">
6949                                </a>
6950                                <a href="https://www.instagram.com/pixsoofficial/" target="_blank" rel="nofollow">
6951                                    <img class="media-logo"
6952                                        src="https://pixso.net/assets/media/footer-logo3-0ca91dfac7171ae2.webp">
6953                                </a>
6954                                <a href="https://www.pinterest.com/pixsooffical/" target="_blank"
6955                                    rel="nofollow">
6956                                    <img class="media-logo"
6957                                        src="https://pixso.net/assets/media/footer-logo4-25e8594394806ff4.webp">
6958                                </a>
6959                                <a href="https://discord.gg/4VNRCPAGum" target="_blank"
6960                                    rel="nofollow">
6961                                    <img class="media-logo"
6962                                        src="https://pixso.net/assets/media/footer-logo7-9a627525791186ba.webp">
6963                                </a>
6964                                <a href="https://t.me/+GzSQOC26LzBlNTE9" target="_blank"
6965                                    rel="nofollow">
6966                                    <img class="media-logo"
6967                                        src="https://pixso.net/assets/media/footer-logo5-98d2a6764729064e.webp">
6968                                </a>
6969                            </div>
6970                            <div class="h-100 footer-lang"
6971                                style="cursor:pointer; width: 114px; flex: 0 0 114px;text-align: center;position: relative;margin-top: 45px;">
6972                                <div class="footer-lang-content"
6973                                    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;
6973height: 34px;background: rgba(255, 255, 255, 1);border-radius: 8px;text-align: left;">
6974                                    <span class="current-lang" style="font-size: 14px;">English</span>
6975                                    <svg style="min-width: 10px;" class="footer-lang--arrow"
6976                                        xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"
6977                                        fill="none">
6978                                        <path d="M1 1L5.24264 5.24264L9.48528 1" stroke="currentColor"
6979                                            stroke-opacity="0.8">
6980                                        </path>
6981                                    </svg>
6982                                </div>
6983
6984                                <div class="footer-lang-box lang-dropdown-box">
6985                                    <div class="lang position-absolute" style="top: 39px;left:0">
6986                                        <div class="lang-dropdown-list">
6987                                            <a href="/" class="lang-item lang-en" data-lang="en-US" data-track="English">
6988                                                English
6989                                            </a>
6990                                            <a href="/jp/" class="lang-item lang-jp" data-lang="ja-JP" data-track="Japanese">
6991                                                日本語
6992                                            </a>
6993                                            <a href="/kr/" class="lang-item lang-kr" data-lang="ko-KR" data-track="Korean">
6994                                                한국어
6995                                            </a>
6996                                            <a href="/ru/" class="lang-item lang-ru" data-lang="ko-KR" data-track="Russian">
6997                                                Русский
6998                                            </a>
6999                                            <a href="/es/" class="lang-item lang-es" data-lang="es-ES"
7000                                                data-track="Spanish">
7001                                                Español
7002                                            </a>
7003                                        </div>
7004                                    </div>
7005                                </div>
7006                            </div>
7007                        </div>
7008                        <div class='common-footer__bd-rt'>
7009                            <div class="common-footer__bd-list" style="opacity: 0;">
7010                                <p class="list-title">Product</p>
7011                                <ul class="list-items">
7012                                    <p class="css-nf5ac4 css-v27th6 css-4qnv0t css-19nviu textContents">Whiteboard
7013                                    </p>
7014                                    <p class="css-nf5ac4 css-v27th6 css-4qnv0t css-19nviu textContents">Prototype
7015                                    </p>
7016                                    <p class="css-nf5ac4 css-v27th6 css-4qnv0t css-19nviu textContents">Design</p>
7017                                    <p class="css-nf5ac4 css-v27th6 css-4qnv0t css-19nviu textContents">Dev view</p>
7018                                    <p class="css-nf5ac4 css-v27th6 css-4qnv0t css-19nviu textContents">Paico</p>
7019                                </ul>
7020                            </div>
7021                            <div class="common-footer__bd-list">
7022                                <p class="list-title">Solutions</p>
7023                                <ul class="list-items">
7024                                    <li>
7025                                        <a href="https://pixso.net/ui-design-collaboration/" class="bottomTypeTrack"
7026                                            data-track="UI Design">UI design</a>
7027                                    </li>
7028                                    <li>
7029                                        <a href="https://pixso.net/ux-design-collaboration/" class="bottomTypeTrack"
7030                                            data-track="UX Design">UX design</a>
7031                                    </li>
7032                                    <li>
7033                                        <a href="https://pixso.net/prototyping/" class="bottomTypeTrack"
7034                                            data-track="Prototyping">Prototyping</a>
7035                                    </li>
7036                                    <li>
7037                                        <a href="https://pixso.net/design-system/" class="bottomTypeTrack"
7038                                            data-track="Design system">Design system</a>
7039                                    </li>
7040                                    <li>
7041                                        <a href="https://pixso.net/web-designing/" class="bottomTypeTrack"
7042                                            data-track="Web designing">Web design</a>
7043                                    </li>
7044                                    <li>
7045                                        <a href="https://pixso.net/pixso-whiteboard/" class="bottomTypeTrack"
7046                                            data-track="Web designing">Whiteboard</a>
7047                                    </li>
7048                                </ul>
7049                            </div>
7050                            <div class="common-footer__bd-list">
7051                                <p class="list-title">Explore</p>
7052                                <ul class="list-items">
7053                                    <li>
7054                                        <a href="https://pixso.net/articles/" class="bottomTypeTrack"
7055                                            data-track="All articles">All articles</a>
7056                                    </li>
7057                                    <li>
7058                                        <a href="https://pixso.net/news/" class="bottomTypeTrack"
7059                                            data-track="News">News</a>
7060                                    </li>
7061                                    <li>
7062                                        <a href="https://pixso.net/reviews/" class="bottomTypeTrack"
7063                                            data-track="Reviews">Reviews</a>
7064                                    </li>
7065                                    <li>
7066                                        <a href="https://pixso.net/tips/" class="bottomTypeTrack"
7067                                            data-track="Tips">Tips</a>
7068                                    </li>
7069                                    <li>
7070                                        <a href="https://pixso.net/releases/" class="bottomTypeTrack"
7071                                            data-track="Releases">Releases</a>
7072                                    </li>
7073                                </ul>
7074                            </div>
7075                            <div class="common-footer__bd-list">
7076                                <p class="list-title">Compare</p>
7077                                <ul class="list-items">
7078                                    <li>
7079                                        <a href="https://pixso.net/pixso-vs-figma/" class="bottomTypeTrack"
7080                                            data-track="Figma">Figma</a>
7081                                    </li>
7082                                    <li>
7083                                        <a href="https://pixso.net/pixso-vs-adobe-xd/" class="bottomTypeTrack"
7084                                            data-track="Adobe XD">Adobe XD</a>
7085                                    </li>
7086                                    <li>
7087                                        <a href="https://pixso.net/pixso-vs-axure/" class="bottomTypeTrack"
7088                                            data-track="Axure">Axure</a>
7089                                    </li>
7090                                    <li>
7091                                        <a href="https://pixso.net/pixso-vs-sketch/" class="bottomTypeTrack"
7092                                            data-track="Sketch">Sketch</a>
7093                                    </li>
7094                                    <li>
7095                                        <a href="https://pixso.net/pixso-vs-invision/" class="bottomTypeTrack"
7096                                            data-track="InVision Studio">InVision</a>
7097                                    </li>
7098                                </ul>
7099                            </div>
7100                            <div class="common-footer__bd-list">
7101                                <p class="list-title">Support</p>
7102                                <ul class="list-items">
7103                                    <li>
7104                                        <a href="https://pixso.net/private-deployment/" class="bottomTypeTrack"
7105                                            data-track="Enterprise security">Enterprise security</a>
7106                                    </li>
7107                                    </li>
7108                                    <li>
7109                                        <a href="https://pixso.net/contact-us/" class="bottomTypeTrack"
7110                                            data-track="Contact us">Contact us</a>
7111                                    </li>
7112                                    <li>
7113                                        <a href="https://pixso.net/help/" class="bottomTypeTrack"
7114                                            data-track="Help center">Help center</a>
7115                                    </li>
7116                                    <li>
7117                                        <a href="https://pixso.net/faq/" class="bottomTypeTrack"
7118                                            data-track="FAQ">FAQ</a>
7119                                    </li>
7120                                </ul>
7121                            </div>
7122                            <div class="common-footer__bd-list">
7123                                <p class="list-title">Company</p>
7124                                <ul class="list-items">
7125                                    <li>
7126                                        <a href="https://pixso.net/about/" class="bottomTypeTrack"
7127                                            data-track="About Us">About us</a>
7128                                    </li>
7129                                    <li>
7130                                        <a href="https://pixso.net/private-policy/" class="bottomTypeTrack"
7131                                            data-track="Privacy Policy">Privacy policy</a>
7132                                    </li>
7133                                    <li>
7134                                        <a href="https://pixso.net/cookie-policy/" class="bottomTypeTrack"
7135                                            data-track="Cookies Policy">Cookies policy</a>
7136                                    </li>
7137                                    <li>
7138                                        <a href="https://pixso.net/refund-policy/" class="bottomTypeTrack"
7139                                            data-track="Refund Policy">Refund policy</a>
7140                                    </li>
7141                                    <li>
7142                                        <a href="https://pixso.net/terms-conditions/" class="bottomTypeTrack"
7143                                            data-track="Terms & Conditions">Terms & Conditions</a>
7144                                    </li>
7145                                    <li>
7146                                        <a href="https://pixso.net/license-agreement/" class="bottomTypeTrack"
7147                                            data-track="License Agreement">License agreement</a>
7148                                    </li>
7149                                    <li>
7150                                        <a href="https://pixso.net/subscription-terms/" class="bottomTypeTrack"
7151                                            data-track="Subscription Terms">Subscription terms</a>
7152                                    </li>
7153                                </ul>
7154                            </div>
7155                        </div>
7156                    </div>
7157                    <div class='common-footer__bd-bottom'>
7158                        <p>
7159                            Copyright © 2026 Shenzhen Pixso Technology Co.,Ltd All rights reserved.
7160                        </p>
7161                        <img class="footer-payment-logo"
7162                            src="https://pixso.net/assets/media/footer-payment-b47e4d38217569a0.webp">
7163                    </div>
7164                </div>
7165            </div>
7166        </div>
7167        <div class='common-footer__bg'>
7168            <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='' />
7169        </div>
7170        <div class='common-footer__logo'>
7171            <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" />
7172        </div>
7173    </footer>
7174<script id="pixso-deferred-footer-media-v1">
7175(function () {
7176  function init() {
7177    var images = Array.prototype.slice.call(document.querySelectorAll('#common-footer img[data-perf-src]'));
7178    if (!images.length) return;
7179    function load(image) {
7180      var source = image.getAttribute('data-perf-src');
7181      if (!source) return;
7182      image.src = source;
7183      image.removeAttribute('data-perf-src');
7184    }
7185    if (!('IntersectionObserver' in window)) { images.forEach(load); return; }
7186    var observer = new IntersectionObserver(function (entries) {
7187      entries.forEach(function (entry) {
7188        if (!entry.isIntersecting) return;
7189        load(entry.target);
7190        observer.unobserve(entry.target);
7191      });
7192    }, { rootMargin: '160px 0px' });
7193    images.forEach(function (image) { observer.observe(image); });
7194  }
7195  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true });
7196  else init();
7197})();
7198</script>
vendor: 1 bytes, line 7198
7198
7199<script>
7200window.wscConf = window.wscConf || {};
7201window.wscConf.setting_style_font_google = [];
7202</script>
vendor: 1 bytes, line 7202
7202
7203<script src="https://pixso.net/assets/js/wsc-vendor.js"></script>
vendor: 2 bytes, line 7203
7203
7204<script src="https://pixso.net/assets/js/wsc-common.js"></script>
vendor: 2 bytes, line 7204
7204
7205<script>$(function () { wsc.common.init() })</script>
vendor: 2 bytes, line 7205
7205
7206<script>
7207      var userInfo = JSON.parse(localStorage.getItem('BOSYUNCurrent'));
7208      if(userInfo != null){
7209         $('.beforeLogin').hide()
7210        $('.afterLogin').show()
7211      }
7212  
7213       var timeout = null;
7214        function backTop(e) {
7215            e.preventDefault();
7216            $('html, body').animate({
7217                scrollTop: 0
7218            }, '300');
7219        }
7220       $('.fic-to-top__home').click(function(e){backTop(e)})
7221        function handleIconFade(dom, className, timer) {
7222            let _timer = timer || 500
7223            if (dom) {
7224                if (timeout !== null) clearTimeout(timeout);
7225                timeout = setTimeout(function () {
7226                    var scrollTop = this.scrollY;
7227                    if (scrollTop > 400) {
7228                        dom.addClass(className)
7229                    } else {
7230                        dom.removeClass(className)
7231                    }
7232                }.bind(this), _timer);
7233            }
7234        }
7235        function backTopIconFade() {
7236           handleIconFade($('.fic-to-top'), 'fic-to-top__show')
7237        }
7238        window.addEventListener('scroll', backTopIconFade);
7239    const baseActivityUrl = 'https://api.pixso.net'
7240    const activityId = 4
7241    let isDeskTop = document.body.clientWidth > 1300
7242    if (isDeskTop) {
7243        if (!$('.community-box--works').hasClass('d-none')) {
7244            let workControlFlag = 1
7245            let headerTimer = null
7246            let isCloseAutoSwiper = false
7247            $('.header-resource').mouseenter(function () {
7248                headerTimer = setInterval(function () {
7249                    if (workControlFlag > 4) {
7250                        workControlFlag = 1
7251                    }
7252                    $('.header-swiper--right').attr('checked', false)
7253                    $('#header-swiper--right' + workControlFlag).attr('checked',
7254                        true)
7255                    workControlFlag = workControlFlag + 1
7256                }, 2000)
7257            })
7258            $('.header-resource').mouseleave(function () {
7259                clearInterval(headerTimer)
7260            })
7261            $('.header-swiper--control-btn').click(function () {
7262                clearInterval(headerTimer)
7263                $('.header-swiper--right').attr('checked', false)
7264                workControlFlag = Number($(this).attr('data-index'))
7265            })
7266            $('.header-swiper--link').mouseover(function () {
7267                clearInterval(headerTimer)
7268            })
7269        } else {
7270            $.ajax({
7271                type: 'get',
7272                url: baseActivityUrl + '/api/cmt/activity/activity/info',
7273                dataType: 'json',
7274                data: {
7275                    activity_id: activityId
7276                },
7277                success: function (res) {
7278                    if (res.code === 200) {
7279                        const data = res.data
7280                        if (!!data.view_num) {
7281                            $('.header-views--number').text(data.view_num)
7282                        }
7283                        if (!!data.participate_num) {
7284                            $('.header-user--number').text(data.participate_num)
7285                        }
7286                        if (!!data.cover) {
7287                            $('.community-box--activity-img').attr('src', data.cover)
7288                        }
7289                    }
7290                }
7291            })
7292        }
7293    }
7294</script>
vendor: 2 bytes, line 7294
7294
7295<script>
7296  $(function() {
7297    let headerNav = $("header nav");
7298    let header = $("#wsc-header");
7299    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/']
7300    let currentHref = window.location.href.replace('index.html', '')
7301    let isWhiteList;
7302    if (whiteList.indexOf(currentHref) != -1) {
7303      isWhiteList = true
7304    } else {
7305      isWhiteList = false
7306    }
7307    const handleScroll = ()=>{
7308        let distance = document.documentElement.scrollTop;
7309        headerNav[0].style.borderBottom = distance < 10 ? "1px solid transparent" : "1px solid #eeeeee";
7310        if (distance < 1 && isWhiteList && document.body.clientWidth > 1200) {
7311        // $('.pixso-header').addClass('bg-transparent')
7312        } else {
7313        // $('.pixso-header').removeClass('bg-transparent')
7314        }
7315    }
7316    window.addEventListener("scroll", handleScroll);
7317    handleScroll();
7318  });
7319</script>
7319
7320<!-- 更新桌面端下载地址 -->
7321<script src="https://pixso.net/assets/js/js-yaml.js" defer></script>
vendor: 2 bytes, line 7321
7321
7322<script>
7323    const _platform = navigator.platform;
7324		const isWin = _platform.toLowerCase().includes('win');
7325		const isMac = _platform.toLowerCase().includes('mac');
7326		const yamlFileURL = isWin ? 'https://api.pixso.net/api/upgrade/desktop/bosyun/latest.yml' : 'https://api.pixso.net/api/upgrade/desktop/bosyun/latest-mac.yml'
7327		const downLoadDOM = isWin ? document.querySelector('.set-download-url.sys-win') : document.querySelector('.set-download-url.sys-mac')
7328		if(downLoadDOM){
7329		  fetch(yamlFileURL)
7330			.then(response => response.text())
7331			.then(yamlContent => {
7332				const yamlData = jsyaml.load(yamlContent);
7333				downLoadDOM.setAttribute('href', yamlData.downloadUrl);
7334			})
7335			.catch(error => {
7336				console.error(error)
7337			});
7338		}
7339		
7340</script>
vendor: 2 bytes, line 7340
7340
7341<script>
7342  const closeBtn = document.querySelector(".global-banner-close");
7343  if(closeBtn){
7344    closeBtn.addEventListener("click", function(event) {
7345      event.preventDefault();
7346      document.querySelector(".global-banner").style.display = 'none'
7347    });
7348  }
7349</script>
7349
7350<!-- Google Tag Manager (noscript) -->
vendor: 69 bytes, lines 7350-7351
7350
7351<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
7351GTM-5BV5J2KZ
vendor: 85 bytes, lines 7351-7352
7351"
7352height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
7353<!-- End Google Tag Manager (noscript) -->
7354<!--px cookie 设置-->
7355<div id="index1713496655072"><div><!--v-if--><!--v-if--></div></div>
7356<link rel="stylesheet" href="https://pixso.net/assets/css/cookie-setting.css">
7357  
7357<script>
7358      
7359    $(function () {
7360            const loadVue3ForCookieSetting = () => new Promise((resolve, reject) => {
7361                if (window.__pxCookieVue3 && window.__pxCookieVue3.defineComponent) {
7362                    resolve(window.__pxCookieVue3);
7363                    return;
7364                }
7365
7366                const previousVue = window.Vue;
7367                const existingScript = document.querySelector('script[data-px-cookie-vue3]');
7368                const finish = () => {
7369                    window.__pxCookieVue3 = window.Vue;
7370                    window.Vue = previousVue;
7371
7372                    if (window.__pxCookieVue3 && window.__pxCookieVue3.defineComponent) {
7373                        resolve(window.__pxCookieVue3);
7374                    } else {
7375                        reject(new Error('Vue3 failed to load for cookie setting'));
7376                    }
7377                };
7378
7379                if (existingScript) {
7380                    existingScript.addEventListener('load', finish, { once: true });
7381                    existingScript.addEventListener('error', reject, { once: true });
7382                    return;
7383                }
7384
7385                const script = document.createElement('script');
7386                script.async = false;
7387                script.src = 'https://unpkg.com/vue@3/dist/vue.global.prod.js';
7388                script.dataset.pxCookieVue3 = 'true';
7389                script.onload = finish;
7390                script.onerror = () => {
7391                    window.Vue = previousVue;
7392                    reject(new Error('Vue3 failed to load for cookie setting'));
7393                };
7394                document.head.appendChild(script);
7395            });
7396            const useVueSetting = () => {
7397                "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 }
7397, 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
7397Slot(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) {
7398                    const i = e.resolveComponent("IconClose"), d = e.resolveComponent("IconHover"), s = e.resolveComponent("PxButton"); return e.openBlock(), e.createBlock(e.Transition, { name: "dialog-fade" }, {
7399                        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
7400                                        name="close"
7401                                        @click="onClose"
7402                                        :size="dialogSize === 'small' ? 28 : 32"
7403                                    /> `), 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
7404                    })
7405                } 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 } }
7405, $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") }
7405, 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
7405Slot(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.
740500098 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) =>
7405 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
7405Slot(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() }
7405, 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(() =>
7405 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 
740512.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 =>
7405 { 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) {
7406                    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
7407                      class="flx__center"
7408                      v-tippy="{
7409                        placement: 'bottom',
7410                        arrow: true,
7411                        a11y: false,
7412                        delay: [500, 100],
7413                      }"
7414                      :content="minDisabledTip"
7415                    > `), 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)])
7416                } const zl = w(Ll, [["render", Tl]]); S(zl, { IconMinus: O, IconAdd: R });
7416 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
7416ing-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
7416ing-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");
7417            };
7418            loadVue3ForCookieSetting()
7419                .then(useVueSetting)
7420                .catch(error => console.error("[PxCookie] Failed to load isolated Vue3:", error));
7421        });
7422  </script>
7422
7423
7424</body>
7425  
7425<script>
7426function openLoginDialog() {
7427    document.querySelector(".login-mask").classList.add("login-mask__show")
7428  }
7429  
7430$('a').click(function(e) {
7431    const href = $(this).attr('href');
7432    if (href && (href.indexOf('pixso.net/app') === -1 || href.indexOf('pixso.net/app/editor') !== -1) || !href || href.indexOf('articles') !== -1) return
7433    e.preventDefault();
7434    var userInfo = JSON.parse(localStorage.getItem("BOSYUNCurrent"));
7435    if (userInfo != null) {
7436      if ($(this).attr('target') == '_blank') {
7437        window.open(href)
7438      } else {
7439        location.href = href;
7440      }
7441    } else {
7442        // openLoginDialog();
7443        location.href="https://pixso.net/user/login/?response_type=code&redirect_uri=https://pixso.net/app/&from=1&product=pixso&ux_mode=redirect"
7444    }
7445  })
7446  
7447  const link = "https://pixso.net/app/"
7448  function isURL(str) {
7449  const pattern = /^(?:(?:https?|ftp):\/\/)?(?:www\.)?[a-z0-9\-]+\.[a-z]{2,}(?::\d{2,5})?(?:\/[^?#]*)?(?:\?[^#]*)?(?:#.*?)?$/i;
7450  return pattern.test(str);
7451}
7452  window.addEventListener('message', function(e) {
7453    try {
7454    console.log("message",e);
7455      if(e.data.event === 'third-login'){
7456        const thirdUrl = e.data?.data;
7457        if(thirdUrl && isURL(thirdUrl)){
7458            location.href = thirdUrl
7459        }
7460      }
7461      
7462      if (e.data.event === 'login-success') {
7463        location.href = link
7464      } else if (e.data.event === 'close') {
7465        document.querySelector(".login-mask").classList.remove("login-mask__show")
7466      }
7467    } catch (error) {
7468      console.log(error)
7469    }
7470  })
7471  
7472  $(".close-tdesign-banner").click(function() {
7473    $(".Tdesign-banner").remove();
7474    $(".Tdesign-banner--btn-close").remove()
7475    let distance = document.documentElement.scrollTop;
7476    if (distance < 1 && window.location.href == 'https://pixso.net/index.html') {
7477    //   $('.navbar').addClass('bg-transparent')
7478    } else {
7479    //   $('.navbar').removeClass('bg-transparent')
7480    }
7481  })
7482  var baseLang = "";
7483  if (navigator.userLanguage) {
7484    baseLang = navigator.userLanguage.substring(0, 2).toLowerCase();
7485  } else {
7486    baseLang = navigator.language.substring(0, 2).toLowerCase();
7487  }
7488  
7489  
7490  function throttle(callback, limit) {
7491    var waiting = false;
7492    return function() {
7493      if (!waiting) {
7494        callback.apply(this, arguments);
7495        waiting = true;
7496        setTimeout(function() {
7497          waiting = false;
7498        }, limit);
7499      }
7500    }
7501  }
7502  const trackEventMap = {
7503      'header': 'gw_button',
7504      'question': 'gw_qa',
7505      'bottom': 'gw_bottom',
7506      'limit': 'starter_limit',
7507    }
7508  const headerPrimaryBtnsTrack = {
7509      'key': 'tab_category',
7510      'lang': 'pricing_oversea_lang',
7511      'plan': 'starter_limit_plan'
7512    }
7513    // test
7514
7515    
7516    let isSensors = false
7517    function track(event, properties) {
7518        console.log("event",event,"properties",properties)
7519      if (isSensors) {
7520        sensors.track(event, properties);
7521        console.log(event, properties);
7522      }
7523    }
7524    const throttleTrack = throttle(track, 50);
7525    
7526    function getIndex(_this, parent) {
7527      let trackIndex = $(_this).attr('data-track')
7528      if (trackIndex == undefined) {
7529        trackIndex = $(_this).parent(parent).attr('data-track')
7530      }
7531      return trackIndex
7532    }
7533    
7534    function commonBtnTrack(_this,event, key) {
7535      let trackIndex = getIndex(_this, '[data-track]')
7536      console.log(trackIndex,"trackIndex")
7537      if (trackIndex != undefined) {
7538        throttleTrack(event, {
7539          [key]: trackIndex
7540        })
7541      }
7542    }
7543    
7544     
7545
7546  $(function() {
7547    
7548        const sensors = window["sensors"]
7549        if (sensors != undefined) {
7550          isSensors = true
7551        }
7552    
7553    
7554    $('.headerPrimaryBtnsTrack').click(function() {
7555      commonBtnTrack(this,trackEventMap['header'],headerPrimaryBtnsTrack['key'])
7556    })
7557    
7558
7559    var isGoToHomePage = $("main").hasClass('goToHomePage') || $("body").hasClass('goToHomePage');
7560    console.log(isGoToHomePage,"isGoToHomePage")
7561    if (isGoToHomePage) {
7562      var langEnDom = $(".lang-en");
7563      var langJpDom = $(".lang-jp");
7564      var langKrDom = $(".lang-kr");
7565       var langRuDom = $(".lang-ru");
7566      var localLang = localStorage.getItem("lang");
7567      var pathName = window.location.pathname;
7568      var pageNameArray = window.location.pathname.split('/');
7569      var currentPageLang = pageNameArray[1];
7570      var currentPath = "";
7571      switch (currentPageLang) {
7572        case 'jp':
7573          currentPath = pathName.replace('/jp', '');
7574          console.log(currentPath,"currentPath")
7575          langEnDom.attr('href', '/' + currentPath);
7576          langKrDom.attr('href', '/kr/' + currentPath);
7577          langRuDom.attr('href','/ru/' + currentPath);
7578          document.cookie = "lang=jp;path=/";
7579          break;
7580        case 'kr':
7581          currentPath = pathName.replace('/kr', '');
7582          langEnDom.attr('href', '/' + currentPath);
7583          langJpDom.attr('href', '/jp/' + currentPath);
7584          langRuDom.attr('href','/ru/' + currentPath);
7585          document.cookie = "lang=kr;path=/";
7586          break;
7587         case 'ru':
7588            currentPath = pathName.replace('/ru', '');
7589            langEnDom.attr('href', '/' + currentPath);
7590            langJpDom.attr('href', '/jp' + currentPath);
7591            langKrDom.attr('href', '/kr' + currentPath);
7592            document.cookie = "lang=ru;path=/";
7593         break;
7594        default:
7595          // en
7596          if(pathName == '/pixso-giveaway/') {
7597              console.log("123")
7598              langEnDom.attr('href', window.location)
7599              langJpDom.attr('href', '/jp');
7600              langKrDom.attr('href', '/kr'); 
7601            langRuDom.attr('href', '/ru' + pathName);
7602          }else{
7603              langEnDom.attr('href', window.location)
7604              langJpDom.attr('href', '/jp' + pathName);
7605              langKrDom.attr('href', '/kr' + pathName); 
7606               langRuDom.attr('href', '/ru' + pathName);
7607            document.cookie = "lang=en;path=/";
7608          }
7609          
7610      }
7611    }else{
7612        var cookieLang = getCookie("lang");
7613        if (!cookieLang) {
7614          if (baseLang === 'kr') {
7615            document.cookie = "lang=kr;path=/";
7616          } else if (baseLang === 'jp') {
7617            document.cookie = "lang=jp;path=/";
7618          } else {
7619            document.cookie = "lang=en;path=/";
7620          }
7621        }
7622    }
7623  });
7624</script>
vendor: 1 bytes, line 7624
7624
7625<script>
7626    let iClose = document.querySelectorAll('.el-icon-arrow-down')
7627    let dlHeight = document.querySelectorAll('.dl--height')
7628    
7629    let useCasesHeight = 0
7630    let exploreHeight = 0
7631    let compareHeight = 0
7632    let supportHeight = 0
7633    let aboutHeight = 0
7634    
7635    let useCasesAll = document.querySelectorAll('.use-cases-tip')
7636    for(let i = 0; i<useCasesAll.length;i++) {
7637        useCasesHeight += useCasesAll[i].offsetHeight
7638    }
7639    
7640    let exploreAll = document.querySelectorAll('.explore-tip')
7641    for(let i = 0; i<exploreAll.length;i++) {
7642        exploreHeight += exploreAll[i].offsetHeight
7643    }
7644    
7645    let compareAll = document.querySelectorAll('.compare-tip')
7646    for(let i = 0; i<compareAll.length;i++) {
7647        compareHeight += compareAll[i].offsetHeight
7648    }
7649    
7650    let supportAll = document.querySelectorAll('.support-tip')
7651    for(let i = 0; i<supportAll.length;i++) {
7652        supportHeight += supportAll[i].offsetHeight
7653    }
7654    
7655    let aboutAll = document.querySelectorAll('.about-tip')
7656    for(let i = 0; i<aboutAll.length;i++) {
7657        aboutHeight += aboutAll[i].offsetHeight
7658    }
7659    
7660    for (let i = 0; i < iClose.length; i++) {
7661        dlHeight[i].onclick = function () {
7662            console.log(dlHeight[i].style.height);
7663            // if(dlHeight[i].style.height === '240px') {
7664            // if(dlHeight[i].style.height > '40px') {
7665            if(dlHeight[i].offsetHeight > 40) {
7666                dlHeight[i].style.height = '40px'
7667                iClose[i].style.transform = 'none'
7668                return
7669            }
7670            for(let j = 0;j < dlHeight.length; j++) {
7671                dlHeight[j].style.height = '40px'
7672                iClose[j].style.transform = 'none'
7673            }
7674            // console.log("1111",i)
7675            if(i == 0) {
7676                dlHeight[i].style.height = useCasesHeight + 44 + 'px'
7677            }else if (i == 1) {
7678                dlHeight[i].style.height = exploreHeight +44+ 'px'
7679            }else if (i == 2) {
7680                dlHeight[i].style.height = compareHeight + 44 + 'px'
7681            }else if (i == 3) {
7682                dlHeight[i].style.height = supportHeight + 44 + 'px'
7683            }else if (i == 4) {
7684                dlHeight[i].style.height = aboutHeight + 44 + 'px'
7685            }
7686            // dlHeight[i].style.height = '240px'
7687            iClose[i].style.transform = 'rotate(-180deg)'
7688        }
7689    }
7690</script>
vendor: 1 bytes, line 7690
7690
7691<script>
7692    // 页面加载完成后依次加载所有模块
7693    document.addEventListener('DOMContentLoaded', async function() {
7694        initScrollAnimations();
7695    });
7696    
7697    // 初始化滚动动画
7698    function initScrollAnimations() {
7699        // 创建Intersection Observer来监听元素进入可视区域
7700        const observer = new IntersectionObserver((entries) => {
7701            entries.forEach(entry => {
7702                if (entry.isIntersecting) {
7703                    // 元素进入可视区域时添加动画类
7704                    entry.target.classList.add('animate-in');
7705                } else {
7706                    // 元素离开可视区域时移除动画类,准备下次进入时重新触发
7707                    // entry.target.classList.remove('animate-in');
7708                }
7709            });
7710        }, {
7711            threshold: 0.1, // 当元素10%进入可视区域时触发
7712            rootMargin: '0px 0px -50px 0px' // 提前50px触发动画,让动画更自然
7713        });
7714
7715        // 找到所有需要滚动动画的元素并开始观察
7716        const animateElements = document.querySelectorAll('.scroll-animate-up');
7717        animateElements.forEach(element => {
7718            observer.observe(element);
7719        });
7720    }
7721</script>
7721
7722</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.