Skip to content

O
offical_web
Commit 9fac4485 by wusiyi
Options

feat: 官网2.0升级

parent 8137b59c
Showing with 1196 additions and 793 deletions
element-variables.scss
......@@ -6,37 +6,75 @@
/* Transition
-------------------------- */
$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
$--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$--fade-linear-transition: opacity 200ms linear !default;
$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$--border-transition-base: border-color 0.2s
cubic-bezier(0.645, 0.045, 0.355, 1) !default;
$--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
/* Color
-------------------------- */
/// color|1|Brand Color|0
$--color-primary: #409EFF !default;
$--color-primary: #eca217 !default;
/// color|1|Background Color|4
$--color-white: #FFFFFF !default;
$--color-white: #ffffff !default;
/// color|1|Background Color|4
$--color-black: #000000 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-primary-light-1: mix(
$--color-white,
$--color-primary,
10%
) !default; /* 53a8ff */
$--color-primary-light-2: mix(
$--color-white,
$--color-primary,
20%
) !default; /* 66b1ff */
$--color-primary-light-3: mix(
$--color-white,
$--color-primary,
30%
) !default; /* 79bbff */
$--color-primary-light-4: mix(
$--color-white,
$--color-primary,
40%
) !default; /* 8cc5ff */
$--color-primary-light-5: mix(
$--color-white,
$--color-primary,
50%
) !default; /* a0cfff */
$--color-primary-light-6: mix(
$--color-white,
$--color-primary,
60%
) !default; /* b3d8ff */
$--color-primary-light-7: mix(
$--color-white,
$--color-primary,
70%
) !default; /* c6e2ff */
$--color-primary-light-8: mix(
$--color-white,
$--color-primary,
80%
) !default; /* d9ecff */
$--color-primary-light-9: mix(
$--color-white,
$--color-primary,
90%
) !default; /* ecf5ff */
/// color|1|Functional Color|1
$--color-success: #67C23A !default;
$--color-success: #67c23a !default;
/// color|1|Functional Color|1
$--color-warning: #ff9900 !default;
/// color|1|Functional Color|1
$--color-danger: #F56C6C !default;
$--color-danger: #f56c6c !default;
/// color|1|Functional Color|1
$--color-info: #909399 !default;
......@@ -56,19 +94,19 @@ $--color-text-regular: #606266 !default;
/// color|1|Font Color|2
$--color-text-secondary: #909399 !default;
/// color|1|Font Color|2
$--color-text-placeholder: #C0C4CC !default;
$--color-text-placeholder: #c0c4cc !default;
/// color|1|Border Color|3
$--border-color-base: #DCDFE6 !default;
$--border-color-base: #dcdfe6 !default;
/// color|1|Border Color|3
$--border-color-light: #E4E7ED !default;
$--border-color-light: #e4e7ed !default;
/// color|1|Border Color|3
$--border-color-lighter: #EBEEF5 !default;
$--border-color-lighter: #ebeef5 !default;
/// color|1|Border Color|3
$--border-color-extra-light: #F2F6FC !default;
$--border-color-extra-light: #f2f6fc !default;
// Background
/// color|1|Background Color|4
$--background-color-base: #F5F7FA !default;
$--background-color-base: #f5f7fa !default;
/* Link
-------------------------- */
......@@ -92,9 +130,9 @@ $--border-radius-zero: 0 !default;
// Box-shadow
/// boxShadow|1|Shadow|1
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !default;
// boxShadow|1|Shadow|1
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12) !default;
/// boxShadow|1|Shadow|1
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
......@@ -211,8 +249,6 @@ $--checkbox-button-checked-font-color: $--color-white !default;
/// color||Color|0
$--checkbox-button-checked-border-color: $--color-primary !default;
/* Radio
-------------------------- */
/// fontSize||Font|1
......@@ -481,8 +517,8 @@ $--cascader-menu-radius: $--border-radius-base !default;
$--cascader-menu-border: solid 1px $--border-color-light !default;
$--cascader-menu-shadow: $--box-shadow-light !default;
$--cascader-node-background-hover: $--background-color-base !default;
$--cascader-node-color-disabled:$--color-text-placeholder !default;
$--cascader-color-empty:$--color-text-placeholder !default;
$--cascader-node-color-disabled: $--color-text-placeholder !default;
$--cascader-color-empty: $--color-text-placeholder !default;
$--cascader-tag-background: #f0f2f5;
/* Group
......@@ -592,7 +628,6 @@ $--button-info-background-color: $--color-info !default;
$--button-hover-tint-percent: 20% !default;
$--button-active-shade-percent: 10% !default;
/* cascader
-------------------------- */
$--cascader-height: 200px !default;
......@@ -636,11 +671,11 @@ $--table-font-color: $--color-text-regular !default;
/// color||Color|0
$--table-header-font-color: $--color-text-secondary !default;
/// color||Color|0
$--table-row-hover-background-color:#35e6dc;
$--table-current-row-background-color:#35e6dc !important;
$--table-row-hover-background-color: #35e6dc;
$--table-current-row-background-color: #35e6dc !important;
/// color||Color|0
$--table-header-background-color: $--color-white !default;
$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
/* Pagination
-------------------------- */
......@@ -828,8 +863,11 @@ $--loading-fullscreen-spinner-size: 50px !default;
/* Scrollbar
--------------------------*/
$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
$--scrollbar-background-color: rgba($--color-text-secondary, 0.3) !default;
$--scrollbar-hover-background-color: rgba(
$--color-text-secondary,
0.5
) !default;
/* Carousel
--------------------------*/
......@@ -938,7 +976,7 @@ $--link-info-font-color: $--color-info !default;
/// border||Other|4
$--calendar-border: $--table-border !default;
/// color||Other|4
$--calendar-selected-background-color: #F2F8FE !default;
$--calendar-selected-background-color: #f2f8fe !default;
$--calendar-cell-width: 85px !default;
/* Form
......@@ -951,7 +989,7 @@ $--form-label-font-size: $--font-size-base !default;
/// color||Color|0
$--avatar-font-color: #fff !default;
/// color||Color|0
$--avatar-background-color: #C0C4CC !default;
$--avatar-background-color: #c0c4cc !default;
/// fontSize||Font Size|1
$--avatar-text-font-size: 14px !default;
/// fontSize||Font Size|1
......@@ -973,23 +1011,49 @@ $--lg: 1200px !default;
$--xl: 1920px !default;
$--breakpoints: (
'xs' : (max-width: $--sm - 1),
'sm' : (min-width: $--sm),
'md' : (min-width: $--md),
'lg' : (min-width: $--lg),
'xl' : (min-width: $--xl)
'xs': (
max-width: $--sm - 1,
),
'sm': (
min-width: $--sm,
),
'md': (
min-width: $--md,
),
'lg': (
min-width: $--lg,
),
'xl': (
min-width: $--xl,
),
);
$--breakpoints-spec: (
'xs-only' : (max-width: $--sm - 1),
'sm-and-up' : (min-width: $--sm),
'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})",
'sm-and-down': (max-width: $--md - 1),
'md-and-up' : (min-width: $--md),
'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})",
'md-and-down': (max-width: $--lg - 1),
'lg-and-up' : (min-width: $--lg),
'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})",
'lg-and-down': (max-width: $--xl - 1),
'xl-only' : (min-width: $--xl),
'xs-only': (
max-width: $--sm - 1,
),
'sm-and-up': (
min-width: $--sm,
),
'sm-only': '(min-width: #{$--sm}) and (max-width: #{$--md - 1})',
'sm-and-down': (
max-width: $--md - 1,
),
'md-and-up': (
min-width: $--md,
),
'md-only': '(min-width: #{$--md}) and (max-width: #{$--lg - 1})',
'md-and-down': (
max-width: $--lg - 1,
),
'lg-and-up': (
min-width: $--lg,
),
'lg-only': '(min-width: #{$--lg}) and (max-width: #{$--xl - 1})',
'lg-and-down': (
max-width: $--xl - 1,
),
'xl-only': (
min-width: $--xl,
),
);
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -32,7 +32,9 @@
"vue-infinite-viewer": "~0.9.1",
"vue-json-viewer": "^2.2.22",
"vue-router": "^3.5.3",
"vue-seamless-scroll": "^1.1.23",
"vue-selecto": "~1.10.1",
"vue-slick-carousel": "^1.0.6",
"vuedraggable": "~2.23.2",
"vuex": "^3.4.0",
"vxe-table": "~3.3.12",
......
src/assets/css/index.css
.link {
color: #2a6ffe;
color: var(--primary-color);
text-decoration: none;
}
.link:hover {
color: #525558;
}
\ No newline at end of file
color: var(--light-color);
}
src/assets/images/home/custom.svg
<svg
t="1734072552728"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
p-id="13839"
width="48"
height="48">
<path
d="M861.376 16.448c37.12 0 66.56 30.08 66.56 67.2v869.76c0 36.48-29.44 66.56-66.56 66.56h-284.16c-37.12 0-67.2-30.08-67.2-66.56v-295.68h167.04v-83.84h-167.04v-111.36h167.04v-83.84h-167.04v-111.36h167.04v-83.84h-167.04v-99.84c0-37.12 30.08-67.2 67.2-67.2z m-72.32 822.4c0-38.4-31.36-69.76-69.76-69.76-38.4 0-69.76 31.36-69.76 69.76 0 38.4 31.36 69.76 69.76 69.76 38.4 0 69.76-31.36 69.76-69.76z"
fill="#1870FD"
p-id="13840"></path>
<path
d="M91.84 824.896h279.04v-501.76h-279.04v501.76z"
fill="#AEC9FF"
p-id="13841"></path>
<path
d="M91.84 953.344c0 36.48 30.08 66.56 67.2 66.56h144.64c37.12 0 67.2-30.08 67.2-66.56v-44.8h-279.04v44.8zM370.88 239.168L231.36 16.448l-139.52 222.72h279.04z"
fill="#1870FD"
p-id="13842"></path>
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24">
<g fill="none" stroke="#faaa15" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8">
<rect width="4" height="6" x="10" y="16" rx="2" />
<rect width="16" height="6" x="3" y="2" rx="2" />
<path d="M19 5h1q2 0 2 2q0 6-7 6q-3 0-3 3" />
</g>
</svg>
\ No newline at end of file
src/assets/images/home/earth.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512">
<path fill="#faaa15" d="m267 474l-.8-.13a.85.85 0 0 0 .8.13m181.9-286.22a5.51 5.51 0 0 0-10.67-.63A5.52 5.52 0 0 1 433 191h-15.47a5.5 5.5 0 0 1-2.84-.79l-22.38-13.42a5.5 5.5 0 0 0-2.84-.79h-35.8a5.5 5.5 0 0 0-3.06.93l-44.15 29.43A5.52 5.52 0 0 0 304 211v41.74a5.51 5.51 0 0 0 2.92 4.87l57.89 30.9a5.55 5.55 0 0 1 2.92 4.8l.27 23.49a5.53 5.53 0 0 0 2.85 4.75l23.26 12.87a5.54 5.54 0 0 1 2.85 4.83v48.6a5.52 5.52 0 0 0 9.17 4.14c9.38-8.26 22.83-20.32 24.62-23.08q4.44-6.87 8.33-14.07a207.4 207.4 0 0 0 13.6-31c12.68-36.71 2.66-102.7-3.78-136.06M286.4 302.8l-61.33-46a4 4 0 0 0-2.4-.8h-29.1a3.78 3.78 0 0 1-2.68-1.11l-13.72-13.72a4 4 0 0 0-2.83-1.17h-53.19a3.79 3.79 0 0 1-2.68-6.47l8.42-8.42a3.78 3.78 0 0 1 2.68-1.11h32.37a8 8 0 0 0 7.7-5.83l6.89-24.5a4 4 0 0 1 2-2.47L206 177.06a3.79 3.79 0 0 0 2.05-3.37v-12.5a3.8 3.8 0 0 1 .68-2.17l14.6-21.02a3.75 3.75 0 0 1 1.78-1.38l20.43-7.67a3.79 3.79 0 0 0 2.46-3.55V114a3.8 3.8 0 0 0-1.69-3.16l-20.48-13.62A3.83 3.83 0 0 0 222 97l-27.88 13.94a3.78 3.78 0 0 1-4-.41l-13.22-10.45a3.8 3.8 0 0 1 .1-6l10.74-7.91a3.78 3.78 0 0 0-.09-6.16l-16.73-11.67a3.78 3.78 0 0 0-4-.22c-6.05 3.31-23.8 13.11-30.1 17.52a209.5 209.5 0 0 0-68.16 80c-1.82 3.76-4.07 7.59-4.29 11.72s-3.46 13.35-4.81 17.08a3.78 3.78 0 0 0 .24 3.1l35.69 65.58a3.74 3.74 0 0 0 1.38 1.44l37.55 22.54a3.78 3.78 0 0 1 1.81 2.73l7.52 54.54a3.82 3.82 0 0 0 1.61 2.61l29.3 20.14a4 4 0 0 1 1.65 2.48l15.54 73.8a3.6 3.6 0 0 0 .49 1.22c1.46 2.36 7.28 11 14.3 12.28c-.65.18-1.23.59-1.88.78a48 48 0 0 1 5 1.16c2 .54 4 1 6 1.43c3.13.62 3.44 1.1 4.94-1.68c2-3.72 4.29-5 6-5.46a3.85 3.85 0 0 0 2.89-2.9l10.07-46.68a4 4 0 0 1 1.6-2.42l45-31.9a4 4 0 0 0 1.69-3.27V306a4 4 0 0 0-1.55-3.2" />
<path fill="#faaa15" d="M262 48s-3.65.21-4.39.23q-8.13.24-16.22 1.12A207.5 207.5 0 0 0 184.21 64c2.43 1.68-1.75 3.22-1.75 3.22L189 80h35l24 12l21-12Zm92.23 72.06l16.11-14a4 4 0 0 0-.94-6.65l-18.81-8.73a4 4 0 0 0-5.3 1.9l-7.75 16.21a4 4 0 0 0 1.49 5.11l10.46 6.54a4 4 0 0 0 4.74-.38m75.41 20.61l-5.83-9c-.09-.14-.17-.28-.25-.43c-1.05-2.15-9.74-19.7-17-26.51c-5.45-5.15-7-3.67-7.43-2.53a3.77 3.77 0 0 1-1.19 1.6l-28.84 23.31a4 4 0 0 1-2.51.89h-14.93a4 4 0 0 0-2.83 1.17l-12 12a4 4 0 0 0 0 5.66l12 12a4 4 0 0 0 2.83 1.17h75.17a4 4 0 0 0 4-4.17l-.55-13.15a4 4 0 0 0-.64-2.01" />
<path fill="#faaa15" d="M256 72a184 184 0 1 1-130.1 53.9A182.77 182.77 0 0 1 256 72m0-40C132.3 32 32 132.3 32 256s100.3 224 224 224s224-100.3 224-224S379.7 32 256 32" />
</svg>
\ No newline at end of file
src/assets/images/home/fincial.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 2048 2048">
<path fill="#faaa15" d="m0 1898l384-384v534H0zm512-512l384-384v1046H512zm1280-490h128v1152h-384v-918zm-448 426l64-64v790h-384V1002zm704-1066v512h-128V475l-576 575l-384-384L0 1627v-182l960-959l384 384l485-486h-293V256z" />
</svg>
\ No newline at end of file
src/assets/images/home/logistics.svg
<svg
t="1734072585485"
class="icon"
viewBox="0 0 1228 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="18777"
width="48"
height="48">
<path
d="M597.333333 213.333333h-85.333333v128.768h-85.333333V213.333333H341.333333v128.768H256V213.333333H170.666667v128.768L85.333333 341.333333v85.333334h597.333334V341.333333l-85.333334 0.768z"
fill="#8BB3F1"
p-id="18778"></path>
<path
d="M938.666667 768h-27.648A149.546667 149.546667 0 0 0 768 661.333333a149.546667 149.546667 0 0 0-143.018667 106.666667H399.018667A149.546667 149.546667 0 0 0 256 661.333333 149.546667 149.546667 0 0 0 112.938667 768H85.333333V213.333333h597.333334v320a42.666667 42.666667 0 0 0 23.552 38.186667l85.333333 42.666667 38.229333-76.373334L768 506.965333v-58.410666l170.666667 70.613333V768z m-170.666667 106.666667c-35.285333 0-64-28.714667-64-64s28.714667-64 64-64 64 28.714667 64 64-28.714667 64-64 64z m-512 0c-35.285333 0-64-28.714667-64-64s28.714667-64 64-64 64 28.714667 64 64-28.714667 64-64 64z m741.674667-423.424L768 356.224V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667H42.666667a42.666667 42.666667 0 0 0-42.666667 42.666667v640a42.666667 42.666667 0 0 0 42.666667 42.666666h70.272A149.546667 149.546667 0 0 0 256 960 149.546667 149.546667 0 0 0 399.018667 853.333333h225.962666A149.546667 149.546667 0 0 0 768 960a149.546667 149.546667 0 0 0 143.018667-106.666667H981.333333a42.666667 42.666667 0 0 0 42.666667-42.666666v-320a42.624 42.624 0 0 0-26.325333-39.424z"
fill="#1768E4"
p-id="18779"></path>
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32">
<path fill="#faaa15" d="M4 16h12v2H4zm-2-5h10v2H2z" />
<path fill="#faaa15" d="m29.919 16.606l-3-7A1 1 0 0 0 26 9h-3V7a1 1 0 0 0-1-1H6v2h15v12.556A4 4 0 0 0 19.142 23h-6.284a4 4 0 1 0 0 2h6.284a3.98 3.98 0 0 0 7.716 0H29a1 1 0 0 0 1-1v-7a1 1 0 0 0-.081-.394M9 26a2 2 0 1 1 2-2a2 2 0 0 1-2 2m14-15h2.34l2.144 5H23Zm0 15a2 2 0 1 1 2-2a2 2 0 0 1-2 2m5-3h-1.142A3.995 3.995 0 0 0 23 20v-2h5Z" />
</svg>
\ No newline at end of file
src/assets/images/home/platform.svg
<svg
t="1734072692984"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="33676"
width="48"
height="48">
<path
d="M944 224H80V112a32 32 0 0 1 32-32h800a32 32 0 0 1 32 32v112z"
fill="#EEEEEE"
p-id="33677"></path>
<path
d="M944 232H80a8 8 0 0 1-8-8V112c0-22.048 17.936-40 40-40h800c22.064 0 40 17.952 40 40v112a8 8 0 0 1-8 8z m-856-16h848V112c0-13.232-10.768-24-24-24H112c-13.232 0-24 10.768-24 24v104z"
fill="#0277BD"
p-id="33678"></path>
<path
d="M152 152m-24 0a24 24 0 1 0 48 0 24 24 0 1 0-48 0Z"
fill="#EC407A"
p-id="33679"></path>
<path
d="M152 184c-17.648 0-32-14.352-32-32s14.352-32 32-32 32 14.352 32 32-14.352 32-32 32z m0-48a16.016 16.016 0 0 0 0 32 16.016 16.016 0 0 0 0-32z"
fill="#0277BD"
p-id="33680"></path>
<path
d="M248 152m-24 0a24 24 0 1 0 48 0 24 24 0 1 0-48 0Z"
fill="#FFA726"
p-id="33681"></path>
<path
d="M248 184c-17.648 0-32-14.352-32-32s14.352-32 32-32 32 14.352 32 32-14.352 32-32 32z m0-48a16.016 16.016 0 0 0 0 32 16.016 16.016 0 0 0 0-32z"
fill="#0277BD"
p-id="33682"></path>
<path
d="M912 784H112a32 32 0 0 1-32-32V224h864v528a32 32 0 0 1-32 32z"
fill="#81D4FA"
p-id="33683"></path>
<path
d="M912 792H112A40.048 40.048 0 0 1 72 752V224a8 8 0 0 1 8-8h864a8 8 0 0 1 8 8v528c0 22.048-17.936 40-40 40z m-824-560V752c0 13.232 10.768 24 24 24h800c13.232 0 24-10.768 24-24V232h-848z"
fill="#0277BD"
p-id="33684"></path>
<path
d="M736 560H288a32 32 0 1 1 0-64h448a32 32 0 1 1 0 64z"
fill="#EEEEEE"
p-id="33685"></path>
<path
d="M736 568H288c-22.064 0-40-17.952-40-40s17.936-40 40-40h448c22.064 0 40 17.952 40 40s-17.936 40-40 40z m-448-64c-13.232 0-24 10.768-24 24s10.768 24 24 24h448c13.232 0 24-10.768 24-24s-10.768-24-24-24H288z"
fill="#0277BD"
p-id="33686"></path>
<path
d="M608 432H416a32 32 0 0 1-32-32v-32a32 32 0 0 1 32-32h192a32 32 0 0 1 32 32v32a32 32 0 0 1-32 32z"
fill="#EC407A"
p-id="33687"></path>
<path
d="M608 440H416a40.048 40.048 0 0 1-40-40v-32c0-22.048 17.936-40 40-40h192c22.064 0 40 17.952 40 40v32c0 22.048-17.936 40-40 40z m-192-96c-13.232 0-24 10.768-24 24v32c0 13.232 10.768 24 24 24h192c13.232 0 24-10.768 24-24v-32c0-13.232-10.768-24-24-24H416z"
fill="#0277BD"
p-id="33688"></path>
<path
d="M608 632H416a8 8 0 0 1 0-16h192a8 8 0 0 1 0 16z"
fill="#0277BD"
p-id="33689"></path>
<path
d="M912 120H112a8 8 0 0 1 0-16h800a8 8 0 0 1 0 16z"
fill="#FFFFFF"
p-id="33690"></path>
<path
d="M912 760H112a8 8 0 0 1 0-16h800a8 8 0 0 1 0 16z"
fill="#29B6F6"
p-id="33691"></path>
<path
d="M912 264H112a8 8 0 0 1 0-16h800a8 8 0 0 1 0 16z"
fill="#E1F5FE"
p-id="33692"></path>
<path
d="M656 720v192l64-64 96 96 64-64-96-96 64-64z"
fill="#FFA726"
p-id="33693"></path>
<path
d="M816 952a8.032 8.032 0 0 1-5.664-2.336L720 859.312l-58.336 58.336a7.92 7.92 0 0 1-8.72 1.728A7.968 7.968 0 0 1 648 912V720a8 8 0 0 1 8-8h192a8 8 0 0 1 5.664 13.664L795.312 784l90.336 90.336a8 8 0 0 1 0 11.312l-64 64A7.92 7.92 0 0 1 816 952z m-96-112c2.048 0 4.096 0.784 5.664 2.336L816 932.688 868.688 880l-90.336-90.336a8 8 0 0 1 0-11.312l50.336-50.336H664v164.688l50.336-50.336A7.936 7.936 0 0 1 720 840z"
fill="#0277BD"
p-id="33694"></path>
<path
d="M344 152m-24 0a24 24 0 1 0 48 0 24 24 0 1 0-48 0Z"
fill="#80CBC4"
p-id="33695"></path>
<path
d="M344 184c-17.648 0-32-14.352-32-32s14.352-32 32-32 32 14.352 32 32-14.352 32-32 32z m0-48a16.016 16.016 0 0 0 0 32 16.016 16.016 0 0 0 0-32z"
fill="#0277BD"
p-id="33696"></path>
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24">
<g fill="none" stroke="#faaa15" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8">
<path d="M8 13V4.5a1.5 1.5 0 0 1 3 0V12m0-.5v-2a1.5 1.5 0 0 1 3 0V12m0-1.5a1.5 1.5 0 0 1 3 0V12" />
<path d="M17 11.5a1.5 1.5 0 0 1 3 0V16a6 6 0 0 1-6 6h-2h.208a6 6 0 0 1-5.012-2.7L7 19q-.468-.718-3.286-5.728a1.5 1.5 0 0 1 .536-2.022a1.87 1.87 0 0 1 2.28.28L8 13M5 3L4 2m0 5H3m11-4l1-1m0 4h1" />
</g>
</svg>
\ No newline at end of file
src/assets/images/home/production.svg
<svg
t="1734072462423"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="6373"
width="48"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="48">
<path
d="M204.8 655.36h614.4c79.872 0 143.36 63.488 143.36 143.36s-63.488 143.36-143.36 143.36H204.8c-79.872 0-143.36-63.488-143.36-143.36s63.488-143.36 143.36-143.36z"
fill="#D9ECFF"
p-id="6374"></path>
<path
d="M839.68 655.36c79.872 0 143.36 63.488 143.36 143.36s-63.488 143.36-143.36 143.36H184.32c-79.872 0-143.36-63.488-143.36-143.36s63.488-143.36 143.36-143.36h655.36z m0 61.44H184.32c-45.056 0-81.92 36.864-81.92 81.92s36.864 81.92 81.92 81.92h655.36c45.056 0 81.92-36.864 81.92-81.92s-36.864-81.92-81.92-81.92z"
fill="#6BB0FE"
p-id="6375"></path>
<path
d="M274.432 114.688c8.192-8.192 18.432-12.288 28.672-12.288h415.744c10.24 0 20.48 4.096 28.672 12.288l57.344 73.728c10.24 10.24 14.336 24.576 14.336 36.864v40.96H204.8v-40.96c0-14.336 4.096-26.624 12.288-36.864l57.344-73.728z"
fill="#6BB0FE"
p-id="6376"></path>
<path
d="M266.24 184.32h491.52c34.816 0 61.44 26.624 61.44 61.44v348.16c0 34.816-26.624 61.44-61.44 61.44H266.24c-34.816 0-61.44-26.624-61.44-61.44V245.76c0-34.816 26.624-61.44 61.44-61.44z"
fill="#0064F9"
p-id="6377"></path>
<path
d="M409.6 184.32h204.8v245.76l-102.4-40.96-102.4 40.96z"
fill="#1DDFFF"
p-id="6378"></path>
<path
d="M409.6 184.32h204.8v245.76l-102.4-40.96-102.4 40.96z"
fill="#1DDFFF"
p-id="6379"></path>
<path
d="M327.68 798.72m-40.96 0a40.96 40.96 0 1 0 81.92 0 40.96 40.96 0 1 0-81.92 0Z"
fill="#6BB0FE"
p-id="6380"></path>
<path
d="M512 798.72m-40.96 0a40.96 40.96 0 1 0 81.92 0 40.96 40.96 0 1 0-81.92 0Z"
fill="#6BB0FE"
p-id="6381"></path>
<path
d="M696.32 798.72m-40.96 0a40.96 40.96 0 1 0 81.92 0 40.96 40.96 0 1 0-81.92 0Z"
fill="#6BB0FE"
p-id="6382"></path>
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 36 36">
<path fill="#faaa15" d="M4 18.24V7.91c0-.65 2.09-1.84 5.5-1.84S15 7.27 15 7.91V9.7a19 19 0 0 1 2-.2V7.91c0-2.52-3.77-3.84-7.5-3.84S2 5.4 2 7.91v10.33C2 20.4 4.77 21.67 7.9 22v-2C5.46 19.68 4 18.78 4 18.24" class="clr-i-outline--badged clr-i-outline-path-1--badged" />
<path fill="#faaa15" d="M18 10.85c-4.93 0-8.65 1.88-8.65 4.38v12.31c0 2.5 3.72 4.38 8.65 4.38s8.65-1.88 8.65-4.38V15.23c0-2.5-3.72-4.38-8.65-4.38m6.65 7.67c-.85 1-3.42 2-6.65 2a14.5 14.5 0 0 1-4-.52v1.46a16.3 16.3 0 0 0 4 .47a12.76 12.76 0 0 0 6.65-1.56v3.12c-.85 1-3.42 2-6.65 2a14.5 14.5 0 0 1-4-.53v1.46a16.3 16.3 0 0 0 4 .47a12.76 12.76 0 0 0 6.65-1.56v2.29C24.65 28.57 22 30 18 30s-6.65-1.43-6.65-2.38V15.23c0-.95 2.65-2.38 6.65-2.38s6.65 1.43 6.65 2.38Z" class="clr-i-outline--badged clr-i-outline-path-2--badged" />
<path fill="#faaa15" d="M21 7.91c0-.33.55-.8 1.54-1.18V6a7.5 7.5 0 0 1 .14-1.41C20.55 5.19 19 6.3 19 7.91V9.5a19 19 0 0 1 2 .2Z" class="clr-i-outline--badged clr-i-outline-path-3--badged" />
<path fill="#faaa15" d="M32 13.22v5c0 .54-1.46 1.44-3.9 1.73v2c3.13-.32 5.9-1.6 5.9-3.75v-5.9a7.5 7.5 0 0 1-2 .92" class="clr-i-outline--badged clr-i-outline-path-4--badged" />
<circle cx="30" cy="6" r="5" fill="#faaa15" class="clr-i-outline--badged clr-i-outline-path-5--badged clr-i-badge" />
<path fill="none" d="M0 0h36v36H0z" />
</svg>
\ No newline at end of file
src/assets/images/product/hd.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735112162652" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11483" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M800.1 896.2H223.9c-53 0-96-43-96-96V271.9c0-53 43-96 96-96h48v96h-48v528.2h576.3V271.9h-48v-96h48c53 0 96 43 96 96v528.2c0 53.1-43 96.1-96.1 96.1zM608 127.8h96v192.1h-96V127.8z m-144 48h96v96h-96v-96z m-144.1-48h96v192.1h-96V127.8z" fill="#0070E0" p-id="11484"></path><path d="M656.1 750.6V366.4h96v384.2h-96zM464 510.5h96v240.1h-96V510.5z m-192.1 96h96v144.1h-96V606.5z" fill="#99C6F3" p-id="11485"></path></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24">
<path fill="#faaa15" d="M22 10H2v9a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3zM7 8a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1m10 0a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1" opacity="0.5" />
<path fill="#faaa15" d="M19 4h-1v3a1 1 0 0 1-2 0V4H8v3a1 1 0 0 1-2 0V4H5a3 3 0 0 0-3 3v3h20V7a3 3 0 0 0-3-3" />
</svg>
\ No newline at end of file
src/assets/images/product/help.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735111977409" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4386" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M572.235294 654.336V707.764706h-120.470588V542.117647h59.738353a105.411765 105.411765 0 1 0-105.411765-105.411765h-120.470588c0-124.747294 101.135059-225.882353 225.882353-225.882353 124.747294 0 225.882353 101.135059 225.882353 225.882353 0 103.710118-69.888 191.096471-165.150118 217.630118zM512 1024C229.225412 1024 0 794.774588 0 512S229.225412 0 512 0s512 229.225412 512 512-229.225412 512-512 512z m0-120.470588c216.244706 0 391.529412-175.284706 391.529412-391.529412S728.244706 120.470588 512 120.470588 120.470588 295.755294 120.470588 512s175.284706 391.529412 391.529412 391.529412z m-60.235294-165.647059h120.470588v90.352941h-120.470588v-90.352941z" fill="#3481F5" p-id="4387"></path></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 48 48">
<defs>
<mask id="SVG5A3x2kwa">
<g fill="none">
<path fill="#555555" stroke="#fff" stroke-linejoin="round" stroke-width="4" d="M24 44a19.94 19.94 0 0 0 14.142-5.858A19.94 19.94 0 0 0 44 24a19.94 19.94 0 0 0-5.858-14.142A19.94 19.94 0 0 0 24 4A19.94 19.94 0 0 0 9.858 9.858A19.94 19.94 0 0 0 4 24a19.94 19.94 0 0 0 5.858 14.142A19.94 19.94 0 0 0 24 44Z" />
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M24 28.625v-4a6 6 0 1 0-6-6" />
<path fill="#fff" fill-rule="evenodd" d="M24 37.625a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5" clip-rule="evenodd" />
</g>
</mask>
</defs>
<path fill="#faaa15" d="M0 0h48v48H0z" mask="url(#SVG5A3x2kwa)" />
</svg>
\ No newline at end of file
src/assets/images/product/join.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735113645538" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24628" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M365.10055 74.4c30.3 0 58.9 10.5 81.9 29.8l8.3 7.6 61.2 61.2 58.5-58.7c23.9-24 56.4-37.5 90.3-37.4 30.3 0 58.9 10.5 81.9 29.8l8.3 7.7 231.1 231c24.1 24 37.4 56 37.4 90.3 0 30.2-10.5 58.9-29.8 81.9l-7.7 8.3-386.2 386.3c-23.9 24-56.3 37.5-90.2 37.4-30.3 0-59-10.4-82-29.7l-8.3-7.7L37.40055 529.7C13.40055 505.8-0.09945 473.4 0.00055 439.5c0-30.3 10.5-58.9 29.8-81.9l7.7-8.3 237.4-237.5c23.9-24 56.4-37.5 90.2-37.4z m-25 93.2l-5.1 4.3L97.60055 409.4c-14.8 14.8-16.7 38.1-4.4 55l4.4 5.1L479.80055 852c8.1 7.8 18.9 12.1 30.1 12l6.6-0.5c6.6-0.9 12.9-3.4 18.3-7.2l5.1-4.4 32.7-32.6-66.4-66.3c-6.4-6.4-10.6-14.6-12-23.6l-0.4-6.5c-0.1-21 15.3-38.9 36-42l6.5-0.5 6.5 0.5c6.6 1 12.8 3.5 18.3 7.4l5.3 4.5 66.4 66.4 33.4-33.4-66.4-66.4c-16.6-16.7-16.5-43.7 0.2-60.2 6.4-6.3 14.6-10.5 23.5-11.9l6.4-0.5c8.8 0 17.4 2.7 24.9 8l5.3 4.5 66.3 66.3 81.2-81.4L608.20055 385l-26.3 26.3c-29.4 29.5-69.3 46-110.9 45.9-41.6 0.1-81.4-16.4-110.8-45.9-22.6-22.7-22.6-59.5 0-82.2l96.1-96.1-61.1-61.1c-15-14.3-38-16.1-55.1-4.3z m364.5-2c-21.9-21-56.4-21-78.3 0l-88.8 88.7 1-1-118 117.8 17.6 7.4c31.6 13.3 68.3 6.4 92.8-18.1l56.4-56.4c9.9-10.1 25.7-11.7 37.5-3.8l4.7 3.8 238.3 238.5 67.8-67.8c10.3-10.3 16.2-24.2 16.3-38.8 0-14.9-5.8-28.8-16.2-39.3l-231.1-231z" fill="#3A9CFF" opacity=".3" p-id="24629"></path><path d="M665.30055 76.9c30.3 0 58.9 10.5 81.9 29.8l8.3 7.7 231.1 231c24.1 24 37.4 56 37.4 90.3 0 30.2-10.5 58.9-29.8 81.9l-7.7 8.3-118.7 118.5-310.6-310.5 30.1-30c4.1-4.2 9.4-7 15.2-8.1l5.8-0.6c5.9 0 11.6 1.7 16.5 5l4.7 3.8 238.3 238.5 67.8-67.8c10.3-10.3 16.2-24.2 16.3-38.8 0-14.9-5.8-28.8-16.2-39.3l-231.1-231c-21.9-21-56.4-21-78.3 0l-88.8 88.7 1-1-31 30.9-20.2-20.2 20.2 20.2-87 86.9 17.6 7.4c31.6 13.3 68.3 6.4 92.8-18.1l26.3-26.4 51 51.1-26.3 26.3c-29.4 29.5-69.3 46-110.9 45.9-41.6 0.1-81.4-16.4-110.8-45.9-20.5-20.6-22.8-53.1-5.3-76.3l5.2-6 96.1-96.1 60.1-60.1 0.2 0.2 58.5-58.7c23.9-24 56.4-37.5 90.3-37.5z" fill="#3A9CFF" p-id="24630"></path></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24">
<path fill="#faaa15" d="M12.22 19.85c-.18.18-.5.21-.71 0a.504.504 0 0 1 0-.71l3.39-3.39l-1.41-1.41l-3.39 3.39c-.19.2-.51.19-.71 0a.504.504 0 0 1 0-.71l3.39-3.39l-1.41-1.41l-3.39 3.39c-.18.18-.5.21-.71 0a.513.513 0 0 1 0-.71l3.39-3.39l-1.42-1.41l-3.39 3.39c-.18.18-.5.21-.71 0a.513.513 0 0 1 0-.71L9.52 8.4l1.87 1.86c.95.95 2.59.94 3.54 0c.98-.98.98-2.56 0-3.54l-1.86-1.86l.28-.28c.78-.78 2.05-.78 2.83 0l4.24 4.24c.78.78.78 2.05 0 2.83z" opacity="0.3" />
<path fill="#faaa15" d="M12.22 19.85c-.18.18-.5.21-.71 0a.504.504 0 0 1 0-.71l3.39-3.39l-1.41-1.41l-3.39 3.39c-.19.2-.51.19-.71 0a.504.504 0 0 1 0-.71l3.39-3.39l-1.41-1.41l-3.39 3.39c-.18.18-.5.21-.71 0a.513.513 0 0 1 0-.71l3.39-3.39l-1.42-1.41l-3.39 3.39c-.18.18-.5.21-.71 0a.513.513 0 0 1 0-.71L9.52 8.4l1.87 1.86c.95.95 2.59.94 3.54 0c.98-.98.98-2.56 0-3.54l-1.86-1.86l.28-.28c.78-.78 2.05-.78 2.83 0l4.24 4.24c.78.78.78 2.05 0 2.83zm9.61-6.78a4.01 4.01 0 0 0 0-5.66l-4.24-4.24a4.01 4.01 0 0 0-5.66 0l-.28.28l-.28-.28a4.01 4.01 0 0 0-5.66 0L2.17 6.71a3.99 3.99 0 0 0-.4 5.19l1.45-1.45a2 2 0 0 1 .37-2.33l3.54-3.54c.78-.78 2.05-.78 2.83 0l3.56 3.56c.18.18.21.5 0 .71s-.53.18-.71 0L9.52 5.57l-5.8 5.79c-.98.97-.98 2.56 0 3.54c.39.39.89.63 1.42.7a2.46 2.46 0 0 0 2.12 2.12a2.46 2.46 0 0 0 2.12 2.12c.07.54.31 1.03.7 1.42c.47.47 1.1.73 1.77.73s1.3-.26 1.77-.73z" />
</svg>
\ No newline at end of file
src/assets/images/product/safety.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24">
<g fill="none">
<path fill="#fff" d="m12 23.29l8.33-3.92l2.45-15.19L12 .75L1.22 4.18l2.45 15.19z" />
<path fill="#f7ead4" d="m20.33 19.35l2.45-15.19L12 .73v22.54z" />
<path stroke="#faaa15" stroke-linecap="round" stroke-linejoin="round" d="m11.854 15.92l4.9-4.9l-2.45-2.94l-2.45 1.96l-2.45-1.96l-2.45 2.94z" stroke-width="1.3" />
<path stroke="#faaa15" stroke-linecap="round" stroke-linejoin="round" d="m12 23.27l8.33-3.92l2.45-15.19L12 .73L1.22 4.16l2.45 15.19z" stroke-width="1.3" />
<path stroke="#faaa15" stroke-linecap="round" stroke-linejoin="round" d="m12 20.82l6.37-2.94l1.96-12.25L12 2.69L3.67 5.63l1.96 12.25z" stroke-width="1.3" />
</g>
</svg>
\ No newline at end of file
src/assets/images/product/service.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
<g fill="#faaa15">
<path d="M16 152h32v56H16a8 8 0 0 1-8-8v-40a8 8 0 0 1 8-8M192.54 40A39.12 39.12 0 0 0 156 64a39.12 39.12 0 0 0-36.54-24C97.67 40 80 58.31 80 80c0 14.56 7 27.71 16.73 40H140a20 20 0 0 1 0 40h4l37.78-8.68C203.82 135.07 232 109.23 232 80c0-21.69-17.67-40-39.46-40" opacity="0.2" />
<path d="M230.33 141.06a24.34 24.34 0 0 0-18.61-4.77C230.5 117.33 240 98.48 240 80c0-26.47-21.29-48-47.46-48A47.58 47.58 0 0 0 156 48.75A47.58 47.58 0 0 0 119.46 32C93.29 32 72 53.53 72 80c0 11 3.24 21.69 10.06 33a31.87 31.87 0 0 0-14.75 8.4L44.69 144H16a16 16 0 0 0-16 16v40a16 16 0 0 0 16 16h104a8 8 0 0 0 1.94-.24l64-16a7 7 0 0 0 1.19-.4L226 182.82l.44-.2a24.6 24.6 0 0 0 3.93-41.56ZM119.46 48a31.15 31.15 0 0 1 29.14 19a8 8 0 0 0 14.8 0a31.15 31.15 0 0 1 29.14-19C209.59 48 224 62.65 224 80c0 19.51-15.79 41.58-45.66 63.9l-11.09 2.55A28 28 0 0 0 140 112h-39.32C92.05 100.36 88 90.12 88 80c0-17.35 14.41-32 31.46-32M16 160h24v40H16Zm203.43 8.21l-38 16.18L119 200H56v-44.69l22.63-22.62A15.86 15.86 0 0 1 89.94 128H140a12 12 0 0 1 0 24h-28a8 8 0 0 0 0 16h32a8.3 8.3 0 0 0 1.79-.2l67-15.41l.31-.08a8.6 8.6 0 0 1 6.3 15.9Z" />
</g>
</svg>
\ No newline at end of file
src/assets/images/product/universe.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
<g fill="#faaa15">
<path d="M216 128a88 88 0 1 1-88-88a88 88 0 0 1 88 88" opacity="0.4" />
<path d="M245.11 60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93 95.93 0 0 0 32 128a98 98 0 0 0 .78 12.31C5.09 169 5.49 186 10.9 195.32C16 204.16 26.64 208 40.64 208a124 124 0 0 0 28.79-4A95.93 95.93 0 0 0 224 128a97 97 0 0 0-.77-12.25c12.5-13 20.82-25.35 23.65-35.92c1.95-7.32 1.36-13.76-1.77-19.15M128 48a80.11 80.11 0 0 1 78 62.2c-17.06 16.06-40.15 32.53-62.07 45.13c-27.55 15.81-51.45 25.67-70.51 31.07A79.94 79.94 0 0 1 128 48M24.74 187.29c-1.46-2.51-.65-7.24 2.22-13a79 79 0 0 1 10.29-15.05a96 96 0 0 0 18 31.32c-17.25 2.9-28.01 1.05-30.51-3.27M128 208a79.45 79.45 0 0 1-38.56-9.94a370 370 0 0 0 62.43-28.86c21.58-12.39 40.68-25.82 56.07-39.08A80.07 80.07 0 0 1 128 208M231.42 75.69c-1.7 6.31-6.19 13.53-12.63 21.13a95.7 95.7 0 0 0-18-31.35c14.21-2.35 27.37-2.17 30.5 3.24c.9 1.57.95 3.92.13 6.98" />
</g>
</svg>
\ No newline at end of file
src/assets/images/product/us.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735113584264" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22404" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M731.8528 775.0144c-25.0368-106.3424-97.3824-190.6688-191.7952-233.0624 58.4704-44.8 95.0784-116.6848 90.7776-196.8128-6.2464-115.7632-99.2768-210.4832-214.9376-218.5216C280.576 117.1968 167.4752 224.5632 167.4752 357.888c0 74.9568 35.7888 141.6704 91.136 184.064-94.4128 42.3936-166.7584 126.72-191.7952 233.0624-7.168 30.4128-15.6672 71.6288 5.632 95.1296 18.6368 20.5824 62.464 21.76 90.2144 21.76h487.9872c4.9152 0 43.4688-1.1264 48.2304-2.304 48.4352-11.9296 43.8784-68.1472 32.9728-114.5856z m-196.2496 42.9568H267.008c-25.856 0-46.7968-20.9408-46.7968-46.7968 0-25.856 20.9408-46.7968 46.7968-46.7968h268.5952c25.856 0 46.7968 20.9408 46.7968 46.7968 0 25.856-20.992 46.7968-46.7968 46.7968z" fill="#2595E8" p-id="22405"></path><path d="M540.0064 541.952c55.3472-42.3936 91.136-109.1072 91.136-184.064 0-127.8464-103.9872-231.8336-231.8336-231.8336-127.8464 0-231.8336 103.9872-231.8336 231.8336 0 74.9568 35.7888 141.6704 91.136 184.064-94.4128 42.3936-166.7584 126.72-191.7952 233.0624-6.656 28.3136-16.896 65.6384 1.8944 87.9616 7.0144 8.3456 19.8656 16.6912 36.9664 20.6848 42.496 9.3184 87.3472 6.0416 132.6592 6.0416 104.0896 0 202.0864-25.9584 287.8976-71.7312H267.008c-25.856 0-46.7968-20.9408-46.7968-46.7968 0-25.856 20.9408-46.7968 46.7968-46.7968h268.5952c25.856 0 46.7968 20.9408 46.7968 46.7968 0 5.0688-0.8192 9.8816-2.304 14.4384 42.8544-28.8256 81.92-62.9248 116.1728-101.376a339.44576 339.44576 0 0 0-156.2624-142.2848z" fill="#3A9CED" p-id="22406"></path><path d="M829.1328 515.1744c38.3488-36.6592 62.3104-88.2688 62.3104-145.3568 0-110.9504-90.2656-201.2672-201.2672-201.2672-24.9856 0-45.2608 20.2752-45.2608 45.2608s20.2752 45.2608 45.2608 45.2608c61.0304 0 110.6944 49.664 110.6944 110.6944 0 57.1392-43.4688 104.2432-99.072 110.08-3.84-0.1536-7.7312-0.3072-11.6224-0.3072-24.9856 0-45.2608 20.2752-45.2608 45.2608v0.9216c0 24.9856 20.2752 45.2608 45.2608 45.2608 4.3008 0 8.6016-0.2048 12.8512-0.4608 103.8336 6.656 186.3168 93.2352 186.3168 198.7072 0 24.9856 20.2752 45.2608 45.2608 45.2608s45.2608-20.2752 45.2608-45.2608c0.0512-109.312-60.9792-204.7488-150.7328-254.0544z" fill="#2595E8" p-id="22407"></path><path d="M850.9952 248.9856c-36.7616-48.7936-95.1808-80.4352-160.8192-80.4352-24.9856 0-45.2608 20.2752-45.2608 45.2608s20.2752 45.2608 45.2608 45.2608c61.0304 0 110.6944 49.664 110.6944 110.6944 0 57.1392-43.4688 104.2432-99.072 110.08-3.84-0.1536-7.7312-0.3072-11.6224-0.3072-24.9856 0-45.2608 20.2752-45.2608 45.2608v0.9216c0 24.9856 20.2752 45.2608 45.2608 45.2608 4.3008 0 8.6016-0.2048 12.8512-0.4608 22.8352 1.4848 44.6464 6.8096 64.768 15.36 53.248-90.88 83.8144-196.6592 83.8144-309.6064 0-9.1136-0.2048-18.2272-0.6144-27.2896z" fill="#3A9CED" p-id="22408"></path><path d="M644.864 213.8112c0 11.1104 4.0448 21.2992 10.7008 29.184 7.3216-23.1936 13.2608-46.9504 17.7664-71.2192-16.64 6.7072-28.4672 22.9888-28.4672 42.0352zM110.592 670.5152c229.5296-14.7968 424.6528-155.8528 516.6592-354.4576-19.7632-107.9296-114.432-190.0032-227.9936-190.0032-127.8464 0-231.8336 103.9872-231.8336 231.8336 0 74.9568 35.7888 141.6704 91.136 184.064-60.7232 27.2384-112.1792 71.936-147.968 128.5632z" fill="#59ADF8" p-id="22409"></path><path d="M455.936 133.0688c-18.1248-4.5568-37.12-7.0144-56.6272-7.0144-127.8464 0-231.8336 103.9872-231.8336 231.8336 0 14.1824 1.28 28.0576 3.7376 41.5744 121.344-55.6032 221.4912-149.5552 284.7232-266.3936z" fill="#6BC2FC" p-id="22410"></path></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24">
<path fill="#faaa15" d="M16.67 13.13C18.04 14.06 19 15.32 19 17v3h4v-3c0-2.18-3.57-3.47-6.33-3.87M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24a5.98 5.98 0 0 1 0 7.52c.42.14.86.24 1.33.24m-6 0c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0-6c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m0 7c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4m6 5H3v-.99C3.2 16.29 6.3 15 9 15s5.8 1.29 6 2z" />
</svg>
\ No newline at end of file
src/assets/images/product/zx.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735112261447" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19531" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M763.9 99.7H260.1c-58.8 0-106.5 47.7-106.5 106.5v662.7c0 40.1 41.7 66.5 77.9 49.4l234.6-110.8c28.8-13.6 62.1-13.6 90.9-0.1l235.5 110.9c36.2 17.1 77.9-9.4 77.9-49.4V206.2c0-58.8-47.7-106.5-106.5-106.5z m-92.5 479.4H352.6c-21 0-38.1-17-38.1-38s17-38.1 38-38.1h318.7c21.1 0 38.1 17.1 38.1 38.1s-16.9 38-37.9 38z m0-173.8H352.6c-21 0-38.1-17-38.1-38.1 0-21 17-38.1 38.1-38.1h318.7c21 0 38.1 17 38.1 38.1s-17 38.1-38 38.1z" fill="#2595E8" p-id="19532"></path><path d="M870.4 471.3v-265c0-58.8-47.7-106.5-106.5-106.5H260.1c-58.8 0-106.5 47.7-106.5 106.5v632.9c44.5 9.7 90 14.6 135.6 14.6 31.9 0 63.2-2.4 93.8-6.9l83.2-39.3c23.6-11.1 50.1-13 74.8-5.9C688.4 737.5 806.7 619 870.4 471.3z m-199 107.8H352.6c-21 0-38.1-17-38.1-38s17-38.1 38-38.1h318.7c21.1 0 38.1 17.1 38.1 38.1s-16.9 38-37.9 38z m0-173.8H352.6c-21 0-38.1-17-38.1-38.1 0-21 17-38.1 38.1-38.1h318.7c21 0 38.1 17 38.1 38.1s-17 38.1-38 38.1z" fill="#3A9CED" p-id="19533"></path><path d="M362.9 579.1h-10.3c-21 0-38.1-17-38.1-38s17-38.1 38-38.1h142.6c38.1-28.6 72.9-61.4 103.6-97.6H352.6c-21 0-38.1-17-38.1-38.1 0-21 17-38.1 38.1-38.1h301.6c43.5-70.1 72.7-148 86.1-229.4H260.1c-58.8 0-106.5 47.7-106.5 106.5V628c73.9-4.4 144.4-21.4 209.3-48.9z" fill="#59ADF8" p-id="19534"></path><path d="M498.5 99.7H260.1c-58.8 0-106.5 47.7-106.5 106.5v167.7C298.8 326.5 420.8 228 498.5 99.7z" fill="#6BC2FC" p-id="19535"></path></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 48 48">
<defs>
<mask id="SVG2m4WoNWP">
<g fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="4">
<path fill="#555555" d="M8 44V6a2 2 0 0 1 2-2h28a2 2 0 0 1 2 2v38l-16-8.273z" />
<path stroke-linecap="round" d="M16 18h16" />
</g>
</mask>
</defs>
<path fill="#faaa15" d="M0 0h48v48H0z" mask="url(#SVG2m4WoNWP)" />
</svg>
\ No newline at end of file
src/components/footBanner.vue 0 → 100644
<template>
<div class="footer-bg" v-if="bannerContent">
<div class="footer-banner">
<p class="footer-title">{{ bannerContent.title }}</p>
<p class="footer-description">{{ bannerContent.description }}</p>
<button class="footer-register-btn" @click="goToLogin">立即使用</button>
<Register v-if="registerDialog" @close="registerDialog = false" />
</div>
</div>
</template>
<script>
import Register from '../views/homePage/register.vue'
export default {
name: 'FootBanner',
components: {
Register,
},
inject: {
scrollParent: 'scrollParent',
},
data() {
return {
registerDialog: false,
}
},
computed: {
bannerContent() {
const path =
(this.$route && this.$route.path) ||
(typeof window !== 'undefined' ? window.location.pathname : '/home')
const contentMap = {
'/home': {
url: '/home',
title: '人效全面提升、业绩翻倍增长，从此刻开始！',
description: '九猫ERP将帮助您提升每一个人员效率，快速实现业务增长',
},
'/product/production': {
url: '/product/production',
title: '亚马逊ERP一体化管理，开启高效决策新体验',
description:
'九猫ERP助力精准核算业务利润与高效决策，业财一体化不再是难事',
},
'/price': {
url: '/price',
title: '选择九猫，开始高效管理跨境电商业务',
description: '已有超过60万卖家在使用九猫ERP，提升业务管理效益',
},
'/about': {
url: '/about',
title: '选择九猫，全面提升跨境业务效益！',
description: '已有60万+跨境卖家选择九猫ERP，实现业务高效增长',
},
}
return contentMap[path] || null
},
},
methods: {
async goToLogin() {
// 跳转到首页
await this.$router.push('/home').catch(() => {})
// 使用 scrollParent 进行滚动
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
},
}
</script>
<style scoped lang="scss">
.footer-banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 15px;
background-color: var(--primary-color);
background-image: linear-gradient(
to bottom,
#efad32 0%,
#efae32 60%,
rgba(239, 174, 50, 0) 100%
),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23a8894d' fill-opacity='0.43'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat, repeat;
background-size: 100% 100%, 24px 24px;
background-position: 0 0, 0 0;
.footer-title {
font-weight: 500;
font-size: 36px;
margin-bottom: 20px;
max-width: 70vw;
text-align: center;
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
.footer-description {
font-weight: 400;
font-size: 18px;
margin-top: 8px;
margin-bottom: 40px;
color: rgba(255, 255, 255, 1);
}
}
.footer-register-btn {
width: 200px;
height: 60px;
display: block;
background: rgba(var(--primary-color), 0.5);
border-radius: 10px;
border: 1px solid #ffffffd8;
font-size: 18px;
color: #e9e9e9;
cursor: pointer;
transition: all 0.3s ease;
}
.footer-register-btn:hover {
background: rgba(255, 255, 255, 0.9);
color: var(--primary-color);
}
</style>
src/components/footer.vue
<template>
<footer class="banner_footer">
<FootBanner />
<div
class="footer-container flex justify-between text-white w-full-70 w-full-90 mx-auto py-12 px-6 lg:py-20 lg:px-0">
<div class="footer-content-left">
......@@ -11,7 +12,9 @@
<div class="flex flex-col items-center mr-35px">
<div class="rounded-sm bg-white overflow-hidden">
<div class="w-32 h-32 border">
<img class="w-full h-full" src="../assets/images/home/wx.png"/>
<img
class="w-full h-full"
src="../assets/images/home/wx.png" />
</div>
</div>
<p class="mt-3 font-light text-xs text-white text-opacity-65">
......@@ -21,7 +24,9 @@
<div class="flex flex-col items-center">
<div class="rounded-sm bg-white overflow-hidden">
<div class="w-32 h-32 border">
<img class="w-full h-full" src="../assets/images/home/qywx.png"/>
<img
class="w-full h-full"
src="../assets/images/home/qywx.png" />
</div>
</div>
<p class="mt-3 font-light text-xs text-white text-opacity-65">
......@@ -31,7 +36,9 @@
<div class="flex flex-col items-center">
<div class="rounded-sm bg-white overflow-hidden">
<div class="w-32 h-32 border">
<img class="w-full h-full" src="../assets/images/home/xhs.png"/>
<img
class="w-full h-full"
src="../assets/images/home/xhs.png" />
</div>
</div>
<p class="mt-3 font-light text-xs text-white text-opacity-65">
......@@ -268,8 +275,12 @@
</footer>
</template>
<script>
import FootBanner from './footBanner.vue'
export default {
name: 'PageFooter',
components: {
FootBanner,
},
data() {
return {
isShowProduct: false,
......
src/components/head.vue
<template>
<div class="header" :class="{ 'no-shadow': !shadow }" ref="header">
<headerNavMobile
v-if="$isMobile"
:userInfo="userInfo"></headerNavMobile>
<headerNavMobile v-if="$isMobile" :userInfo="userInfo"></headerNavMobile>
<div class="container" v-else>
<div class="logo">
<span class="logo_text">
......@@ -17,8 +15,10 @@
v-for="item in navbar"
@click="changePath"
:key="item.path">
<a class="navbar_item_a" :href="item.path">{{ item.name }}</a>
<i v-if="item.children" class="el-icon-arrow-down"></i>
<a class="navbar_item_a" :href="item.path">
<span>{{ item.name }}</span>
<i v-if="item.children" class="el-icon-arrow-down"></i>
</a>
<template v-if="item.children">
<div
class="navbar-panel"
......@@ -54,7 +54,7 @@
</div>
</div>
<a class="right-bottom-content" href="/financial">
<img width="30" src="../assets/images/home/fincial.png" />
<img width="30" src="../assets/images/home/fincial.svg" />
<span>如何通过财务管控向内部要效益?</span>
</a>
</div>
......@@ -90,7 +90,7 @@
<div
class="right-content-item"
:class="{ lfActive: $route.path === '/help' }">
<a class="item-router" href="">
<a class="item-router" href="/help">
<img src="../assets/images/product/help.svg" />
<div class="content-name">
<div class="name">帮助中心</div>
......@@ -165,11 +165,11 @@ import { mapMutations } from 'vuex'
import headerNavMobile from './headerNavMobile.vue'
import productionSvg from '../assets/images/home/production.svg'
import customSvg from '../assets/images/home/custom.svg'
import supplyChainSvg from '../assets/images/home/earth.svg'
import logisticsSvg from '../assets/images/home/logistics.svg'
import platformSvg from '../assets/images/home/platform.svg'
import hdSvg from '../assets/images/product/hd.svg'
import zxSvg from '../assets/images/product/zx.svg'
import platform from '../assets/images/product/platform.svg'
import usSvg from '../assets/images/product/us.svg'
import joinSvg from '../assets/images/product/join.svg'
......@@ -193,28 +193,28 @@ export default {
expanding: false,
children: [
{
name: '独⽴站和平台ERP',
subTitle: '精细化运营和供应链⼀体化解决⽅案',
path: '/product/production',
name: '九猫ERP',
subTitle: '精细化运营和供应链一体化解决方案',
path: '/product/production?tab=product',
icon: productionSvg,
},
{
name: 'POD和满印供应链',
subTitle: '⼏⼗万件底胚库存，多种⼯艺，五千多款模型，品类⻬全',
path: '/product/custom-chain',
path: '/product/production?tab=custom-chain',
icon: customSvg,
},
{
name: '海外POD供应链',
name: '九猫美国供应链 [LA POD]',
subTitle: '美国本⼟海外⽣产线，平台客户⾸选',
path: '/product/logistics',
icon: logisticsSvg,
path: '/product/production?tab=supply-chain',
icon: supplyChainSvg,
},
{
name: '九猫物流',
subTitle: '集成国内主流物流，价格优惠时效快',
path: '/product/platform',
icon: platformSvg,
path: '/product/production?tab=logistics',
icon: logisticsSvg,
},
],
},
......@@ -286,8 +286,6 @@ export default {
if (this.userInfo && this.$route.query.shopKey) {
this.$router.push('/contact')
}
},
mounted() {
this.scrollParent().addEventListener('scroll', this.onScroll)
},
beforeDestroy() {
......@@ -313,14 +311,28 @@ export default {
top: 0,
})
},
login() {
async login() {
if (this.$route.query && this.$route.query.shopKey) {
this.setShopKey(this.$route.query.shopKey)
}
this.$router.push('/login')
// 跳转到首页
await this.$router.push('/home').catch(() => {})
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
register() {
this.$router.push('/register')
async register() {
// 跳转到首页
await this.$router.push('/home').catch(() => {})
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
freeTrial() {
window.open('https://demo.jomalls.com')
......@@ -403,11 +415,8 @@ export default {
.navbar_item {
position: relative;
i {
position: absolute;
top: 50%;
right: -20px;
transform: translateY(-50%);
font-size: 16px;
margin-left: 4px;
}
}
.navbar_item_wrap {
......@@ -421,10 +430,11 @@ export default {
line-height: 60px;
}
.navbar_item:hover .navbar_item_a {
color: #2253fd;
color: var(--primary-color);
}
.navbar_item .navbar_item_a {
display: block;
display: flex;
align-items: center;
text-decoration: none;
color: #000;
font-size: 16px;
......@@ -477,7 +487,7 @@ export default {
}
.active .navbar_item_a {
color: #2253fd;
color: var(--darker-text-color);
font-weight: bold;
}
......@@ -485,7 +495,7 @@ export default {
content: '';
width: 20px;
height: 2px;
background-color: #2253fd;
background-color: var(--darker-text-color);
border-radius: 4px;
display: block;
position: absolute;
......@@ -532,15 +542,16 @@ export default {
.left-content-item {
padding: 10px;
width: 350px;
border-radius: 3px;
&:not(:last-child) {
margin-bottom: 20px;
}
&:hover {
background-color: #f8f9ff;
background-color: var(--background-color);
}
&.lfActive {
background-color: #eef1ff;
background-color: var(--darker-background-color);
}
img {
width: 30px;
......@@ -610,7 +621,7 @@ export default {
cursor: pointer;
padding: 10px;
&:hover {
background-color: #eef1ff;
background-color: var(--background-color);
}
}
}
......
src/plugins/element.js
......@@ -58,6 +58,7 @@ import {
Tag,
Scrollbar,
RadioButton,
Divider,
} from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'mini' }
......@@ -94,6 +95,8 @@ Vue.use(Tag)
Vue.use(Scrollbar)
Vue.use(RadioButton)
Vue.use(Cascader)
Vue.use(Divider)
Vue.use(Tabs)
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$message = (message) =>
typeof message === 'string'
......
src/router/index.js
......@@ -6,8 +6,9 @@ import FunctionPage from '../views/function/functionPage.vue'
import PricePage from '../views/price/pricePage.vue'
import demandPage from '../views/demand/demandPage.vue'
import aboutPage from '../views/aboutus/aboutPage'
import helpPage from '../views/helpPage'
import productionManagement from '../views/product/productionManagement.vue'
import helpPage from '../views/help/helpPage'
import production from '../views/product/production.vue'
import ProductionCustom from '../views/product/productionCustom.vue'
import ProductionLogistics from '../views/product/productionLogistics.vue'
import ProductionPlatform from '../views/product/productPlatform.vue'
......@@ -48,10 +49,11 @@ const routes = [
name: 'help',
component: helpPage,
},
{
path: '/product/production',
name: 'production',
component: productionManagement,
component: production,
},
{
path: '/product/custom-chain',
......@@ -83,6 +85,11 @@ const routes = [
name: 'about',
component: aboutPage,
},
{
path: '/help',
name: 'help',
component: helpPage,
},
],
},
{
......
src/styles/index.scss
:root {
--primary-color: #2253fd;
--primary-color: #eca217;
--border-color: #dfe7f9;
--shadow-color: rgba(216, 187, 26, 0.32);
--background-color: #faf7f2b0;
--darker-background-color: #f5ede0b0;
--light-color: #e9b95f;
--darker-text-color: #faaa15;
}
@tailwind base;
......
src/views/aboutus/aboutPage.vue
......@@ -53,16 +53,19 @@
</p>
</div>
</div>
<img
width="452px"
src="https://static.distributetop.com/office-site-new/office-site-resource/image/0e0f127374698f8a97694c65650aac91.jpg"
data-aos="fade-left"
class="mt-8 !h-395px lg:mt-0" />
<div class="video-container">
<video
width="100%"
class="video"
src="../../assets/video/abount-jomalls2-video.mp4"
controls></video>
</div>
</div>
<div class="flex justify-between w-full mt-8 lg:mt-24">
<div class="flex-col flex h-20 border-colorIcon lg:w-full">
<div
class="flex text-xl lg:text-5xl !lg:leading-10 text-blue-600 justify-start">
class="flex text-xl lg:text-5xl !lg:leading-10 justify-start"
style="color: var(--primary-color)">
TOP 1
</div>
<div
......@@ -72,7 +75,8 @@
</div>
<div class="flex-col flex h-20 border-colorIcon lg:w-full border-l-2">
<div
class="flex text-xl lg:text-5xl !lg:leading-10 text-blue-600 justify-center">
class="flex text-xl lg:text-5xl !lg:leading-10 justify-center"
style="color: var(--primary-color)">
600000+
</div>
<div
......@@ -82,7 +86,8 @@
</div>
<div class="flex-col flex h-20 border-colorIcon lg:w-full border-l-2">
<div
class="flex text-xl lg:text-5xl !lg:leading-10 text-blue-600 justify-center">
class="flex text-xl lg:text-5xl !lg:leading-10 justify-center"
style="color: var(--primary-color)">
20+
</div>
<div
......@@ -92,7 +97,8 @@
</div>
<div class="flex-col flex h-20 border-colorIcon lg:w-full border-l-2">
<div
class="flex text-xl lg:text-5xl !lg:leading-10 text-blue-600 justify-center">
class="flex text-xl lg:text-5xl !lg:leading-10 justify-center"
style="color: var(--primary-color)">
100+
</div>
<div
......@@ -103,22 +109,19 @@
</div>
</div>
</div>
<div class="footer-bg mt-14 lg:mt-28">
<div class="footer-banner">
<div class="footer-title">选择九猫，全面提升跨境业务效益！</div>
<div class="footer-description">
已有60万+跨境卖家选择九猫ERP，实现业务高效增长
</div>
</div>
</div>
<timeline />
</div>
</template>
<script>
import Timeline from './timeline.vue'
export default {
name: 'aboutUs',
components: {
Timeline,
},
}
</script>
<style scoped>
<style scoped lang="scss">
.left-content {
width: 30%;
display: flex;
......@@ -135,41 +138,26 @@ export default {
object-fit: fill;
}
}
.video-container {
width: 50%;
position: relative;
height: 100%;
margin: 50px auto;
.video {
width: 100%;
height: 100%;
object-fit: fill;
}
}
.border-colorIcon {
&:not(:last-child) {
border-right: 2px solid rgba(214, 222, 240, 1);
}
}
.footer-bg {
background: linear-gradient(180deg, #2554fe, #3572ff);
}
.footer-banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 15px;
background-image: url(../../assets/images/home/06.png);
background-position-y: bottom;
background-repeat: no-repeat;
background-size: 100% 90px;
.footer-title {
font-weight: 500;
font-size: 36px;
margin-bottom: 20px;
max-width: 70vw;
text-align: center;
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
.footer-description {
font-weight: 300;
font-size: 18px;
margin-top: 8px;
margin-bottom: 40px;
color: rgba(255, 255, 255, 1);
}
.about-section {
background-color: var(--background-color);
padding: 50px 0;
}
@media (max-width: 1100px) {
......@@ -185,23 +173,5 @@ export default {
border-right: none;
}
}
.footer-banner {
padding: 40px 10px;
.footer-title {
font-size: 18px;
margin-bottom: 10px;
max-width: 90vw;
text-align: center;
color: rgba(255, 255, 255, 1);
}
.footer-description {
font-weight: 300;
font-size: 12px;
margin-top: 8px;
margin-bottom: 20px;
color: rgba(255, 255, 255, 1);
}
}
}
</style>
src/views/aboutus/timeline.vue 0 → 100644
<template>
<div class="py-16">
<h3 class="timeline-title">发展历程</h3>
<div class="timeline-content flex justify-center items-center">
<div v-for="(item, index) in timelineItems" :key="index">
<div class="flex items-center">
<div
class="timeline-dot w-5 h-5 rounded-full cursor-pointer transition-all duration-200"
@click="selectTime(index)"
:class="{ 'timeline-dot-current': currentIndex === index }"></div>
<div
v-if="index !== timelineItems.length - 1"
class="timeline-line"></div>
</div>
<div class="-ml-3">{{ item.title }}</div>
</div>
</div>
<VueSlickCarousel
v-bind="settings"
ref="slick"
@beforeChange="beforeChange">
<div v-for="(item, index) in timelineItems" :key="index">
<div
class="timeline-card"
:class="{ 'timeline-card-current': currentIndex === index }">
<div class="card-title">
{{ item.title }}
</div>
<div class="card-devider"></div>
<div
v-for="(content, index) in item.content"
:key="index"
class="card-content">
{{ content }}
</div>
</div>
</div>
</VueSlickCarousel>
</div>
</template>
<script>
// vue-slick 组件中文文档： https://www.cnblogs.com/isylar/p/11103570.html
// vue-slick 组件官方文档： https://gs-shop.github.io/vue-slick-carousel/#/
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
// optional style for arrows & dots
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
export default {
components: {
VueSlickCarousel,
},
data() {
return {
// VueSlickCarousel 设置
settings: {
arrows: false,
dots: false,
centerMode: true,
focusOnSelect: true,
// 这里使用false会导致后半内容无法居中
infinite: true,
slidesToShow: 3,
autoplay: false,
},
timelineItems: [
{
title: '2022年',
content: ['111', '222', '333'],
},
{
title: '2023年',
content: ['111', '222', '333'],
},
{
title: '2024年',
content: ['111', '222', '333'],
},
{
title: '2025年',
content: ['111', '222', '333'],
},
],
currentIndex: 0,
}
},
methods: {
selectTime(index) {
this.currentIndex = index
this.$refs.slick.goTo(index)
},
beforeChange(oldindex, index) {
this.currentIndex = index
},
},
created() {
this.currentIndex = this.timelineItems.length - 1
},
}
</script>
<style scoped lang="scss">
::v-deep .slick-list {
overflow: visible !important;
}
::v-deep .slick-slide {
outline: none; /* 防止点击时出现默认 outline 导致“深色”闪烁感 */
}
.timeline-container {
padding: 50px 0;
}
.timeline-title {
width: 100%;
font-size: 30px;
font-weight: 600;
color: #414141;
text-align: center;
}
.timeline-content {
height: 100px;
}
.timeline-times {
display: flex;
align-items: center;
}
.timeline-dot {
background-color: #eca1177a;
}
.timeline-dot:hover {
background-color: var(--primary-color);
}
.timeline-dot-current {
background-color: var(--primary-color);
}
.timeline-line {
width: 300px;
height: 1px;
background-color: var(--light-color);
}
.timeline-card {
height: 300px;
width: 400px;
margin-right: 30px;
box-shadow: 0 5px 10px 4px rgba(0, 0, 0, 0.1);
border-radius: 10px;
cursor: pointer;
border: 1px solid transparent;
background-image: linear-gradient(
to bottom,
#ffffff 50%,
#ffffff 80%,
rgba(255, 255, 255, 0) 100%
),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='18' viewBox='0 0 100 18'%3E%3Cpath fill='%23e3ba6d' fill-opacity='0.25' d='M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C98.76 6.05 97.43 6 96 6c-9.59 0-14.23 2.23-23.13 9.34-1.28 1.03-2.39 1.9-3.4 2.66h-7.65zm-23.64 0H22.52c-1-.76-2.1-1.63-3.4-2.66C11.57 9.3 7.08 6.78 0 6.16V0c6.25 0 11.44 1.16 16.14 3.42 3.53 1.7 5.87 3.35 10.73 7.24 4.45 3.56 7.84 5.9 11.31 7.34zM61.82 0h7.66a39.57 39.57 0 0 1-7.34 4.58C57.44 6.84 52.25 8 46 8S34.56 6.84 29.86 4.58A39.57 39.57 0 0 1 22.52 0h15.66C41.65 1.44 45.21 2 50 2c4.8 0 8.35-.56 11.82-2z'%3E%3C/path%3E%3C/svg%3E");
background-repeat: repeat;
transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
&:hover {
transform: scale(1.05);
}
}
.timeline-card-current {
transform: scale(1.05);
border-color: rgba(153, 151, 148, 0.548);
}
.card-title {
height: 60px;
width: 100%;
padding: 35px 0 0 40px;
font-size: 20px;
font-weight: 600;
color: #414141;
}
.card-devider {
height: 1px;
width: 80%;
background-color: #e0e0e0;
margin: 12px auto 0;
}
.card-content {
padding: 20px 0 0 70px;
font-size: 16px;
color: #414141;
position: relative;
&::before {
background-color: var(--primary-color);
border-radius: 50%;
position: absolute;
left: 50px;
top: 30px;
content: '';
width: 6px;
height: 6px;
box-shadow: 0 0 0 5px var(--shadow-color);
}
}
</style>
src/views/case/casePage.vue
......@@ -73,6 +73,7 @@
<div class="footer-bg">
<div class="footer-banner">
<div class="footer-title">与众多优秀企业共同选择，实现业绩高效增长</div>
<button class="footer-register-btn" @click="goToLogin">立即使用</button>
</div>
</div>
</div>
......@@ -80,6 +81,9 @@
<script>
export default {
name: 'casePage',
inject: {
scrollParent: 'scrollParent',
},
data() {
return {
swiperCaseList: [
......@@ -148,6 +152,19 @@ export default {
],
}
},
methods: {
async goToLogin() {
// 跳转到首页
await this.$router.push('/home').catch(() => {})
// 使用 scrollParent 进行滚动
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
},
}
</script>
<style lang="scss" scoped>
......@@ -211,7 +228,7 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 15px;
padding: 60px 15px;
background-image: url(../../assets/images/home/06.png);
background-position-y: bottom;
background-repeat: no-repeat;
......@@ -234,6 +251,23 @@ export default {
color: rgba(255, 255, 255, 1);
}
}
.footer-register-btn {
width: 200px;
height: 60px;
display: block;
background: rgba(59, 130, 246, 0.5);
border-radius: 10px;
border: 1px solid #ffffffd8;
font-size: 18px;
color: #e9e9e9;
cursor: pointer;
transition: all 0.3s ease;
}
.footer-register-btn:hover {
background: rgba(255, 255, 255);
color: rgba(59, 130, 246);
}
@media (max-width: 1100px) {
.footer-banner {
padding: 40px 10px;
......
src/views/help/helpPage.vue 0 → 100644
<template>
<div>
<div class="top h-50px"></div>
</div>
</template>
<script>
export default {
name: 'helpPage',
}
</script>
<style scoped lang="scss">
.top {
background-color: var(--primary-color);
height: 200px;
}
</style>
src/views/homePage/index.vue
......@@ -14,100 +14,72 @@
</h2>
<p class="left-content-description text-center lg:text-left">
<!-- <span class="high-light">60万+</span> -->
<span>跨境全链路智能解决方案,一站式跨境电商操作系统</span>
<span>
跨境全链路智能解决方案，一站式跨境电商操作系统
<br />
</span>
<span class="high-light">20+</span>
<span>主流跨境平台，助力卖家全球出海</span>
</p>
<button class="register-btn-text" @click="registerDialog = true">
立即注册
</button>
</div>
<div class="right-content">
<video
width="100%"
class="video"
src="../../assets/video/home-video.mp4"
autoplay
loop
muted></video>
<login />
</div>
</div>
</div>
<platform />
<product-intro />
<div class="docking-platform flex justify-center">
<div>
<div class="flex justify-center flex-col items-center mb-10 gap-2">
<h3 class="text-textContent lx-title mb-8" style="text-align: center">
对接平台
</h3>
<div class="text-sm font-light text-textContent text-center">
国家权威机构及亚马逊多重实力认证
</div>
</div>
<div class="platforms mt-30">
<div class="platform-item"><img src="../../assets/logo1.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo2.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo3.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo4.jpg" /></div>
<div class="platform-item">
<a href="https://hubs.ly/Q02Y1gQR0" target="_blank">
<img src="../../assets/logo19.png" />
</a>
</div>
<div class="platform-item"><img src="../../assets/logo6.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo7.png" /></div>
<div class="platform-item"><img src="../../assets/logo8.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo9.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo10.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo11.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo12.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo13.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo14.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo15.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo16.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo17.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo18.jpg" /></div>
</div>
</div>
</div>
<div class="footer-bg">
<div class="footer-banner">
<p class="footer-title">人效全面提升、业绩翻倍增长，从此刻开始！</p>
<p class="footer-description">
九猫ERP将帮助您提升每一个人员效率，快速实现业务增长
</p>
</div>
</div>
<Register v-if="registerDialog" @close="registerDialog = false" />
</div>
</template>
<script>
import ProductIntro from '../../components/product-intro.vue'
import Login from './login.vue'
import Register from './register.vue'
import Platform from './platform.vue'
export default {
name: 'homePage',
components: {
ProductIntro,
Login,
Register,
Platform,
},
inject: {
scrollParent: 'scrollParent',
},
data() {
return {
bannerImages: [
{ image: require('../../assets/banner/1.jpg') },
{ image: require('../../assets/banner/2.jpg') },
{ image: require('../../assets/banner/3.jpg') },
{ image: require('../../assets/banner/4.jpg') },
{ image: require('../../assets/banner/5.jpg') },
{ image: require('../../assets/banner/6.jpg') },
{ image: require('../../assets/banner/7.jpg') },
{ image: require('../../assets/banner/8.jpg') },
{ image: require('../../assets/banner/9.jpg') },
],
registerDialog: false,
}
},
methods: {
async goToLogin() {
// 跳转到首页
await this.$router.push('/home').catch(() => {})
// 使用 scrollParent 进行滚动
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
},
}
</script>
<style scoped>
<style scoped lang="scss">
.banner-images {
width: 70vw;
margin: 0 auto;
height: 30vw;
padding-top: 40px;
height: 28vw;
padding-top: 0px;
}
/* .banner-images-inner {
......@@ -119,168 +91,43 @@ export default {
height: 100%;
}
.left-content {
width: 30%;
width: 40%;
display: flex;
flex-direction: column;
gap: 20px;
}
.right-content {
width: 70%;
height: 100%;
border-radius: 20px;
.video {
/* .video {
width: 100%;
height: 100%;
object-fit: fill;
}
} */
}
.left-content-title {
/* font-size: 24px; */
/* removed empty .left-content-title to satisfy linter */
.register-btn-text {
width: 150px;
height: 42px;
display: block;
background: var(--primary-color);
box-shadow: 0 4px 8px 0 var(--shadow-color);
border-radius: 4px;
font-size: 18px;
color: #fff;
cursor: pointer;
}
.left-content-title-high-light {
font-size: 40px;
color: #2253fd;
color: var(--darker-text-color);
}
.left-content-description {
font-size: 18px;
color: #777;
}
.high-light {
color: #2253fd;
color: var(--primary-color);
font-weight: bold;
}
.docking-platform {
background: #ebf1fc;
padding: 100px 0;
}
.docking-platform h2 {
color: #000;
font-weight: 500;
}
.platforms {
display: grid;
gap: 10px;
grid-template-columns: repeat(9, 1fr);
}
.footer-bg {
background: linear-gradient(180deg, #2554fe, #3572ff);
}
.footer-banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 15px;
background-image: url(../../assets/images/home/06.png);
background-position-y: bottom;
background-repeat: no-repeat;
background-size: 100% 90px;
.footer-title {
font-weight: 500;
font-size: 36px;
margin-bottom: 20px;
max-width: 70vw;
text-align: center;
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
.footer-description {
font-weight: 300;
font-size: 18px;
margin-top: 8px;
margin-bottom: 40px;
color: rgba(255, 255, 255, 1);
}
}
@media screen and (max-width: 1440px) {
.platforms {
grid-template-columns: repeat(6, 1fr);
}
}
@media screen and (max-width: 1100px) {
.docking-platform {
padding: 40px 20px 40px;
}
.footer-banner {
padding: 40px 10px;
.footer-title {
font-size: 18px;
margin-bottom: 10px;
max-width: 90vw;
text-align: center;
color: rgba(255, 255, 255, 1);
}
.footer-description {
font-weight: 300;
font-size: 12px;
margin-top: 8px;
margin-bottom: 20px;
color: rgba(255, 255, 255, 1);
}
}
.banner-images {
width: 100%;
height: auto;
padding-top: unset;
}
.left-content-title-high-light {
font-size: 24px;
}
.left-content {
width: 100%;
gap: 6px;
}
.right-content {
width: 100%;
}
.left-content-description {
font-size: 12px;
}
.platforms {
grid-template-columns: repeat(3, 1fr);
}
.platform-item {
padding: 10px !important;
}
.home-page::v-deep .el-carousel__indicators {
display: none;
}
}
.platform-item {
padding: 20px;
background-color: #fff;
overflow: hidden;
border-radius: 6px;
}
.platforms img {
width: 100%;
}
.lx-title {
font-size: 2.25rem;
color: #1a2035;
font-weight: 500;
font-size: 1.25rem;
line-height: 1.75rem;
margin-bottom: 0.25rem;
max-width: 840px;
text-align: center;
--tw-text-opacity: 1;
color: rgba(26, 32, 53, var(--tw-text-opacity));
letter-spacing: 1px;
}
@media (min-width: 1024px) {
.lx-title {
font-size: 2.25rem;
line-height: 2.75rem;
}
}
</style>
src/views/homePage/platform.vue 0 → 100644
<template>
<div class="docking-platform flex justify-center">
<div>
<div class="flex justify-center flex-col items-center mb-5 gap-2">
<h3 class="text-textContent lx-title mb-8" style="text-align: center">
对接平台
</h3>
<div class="text-sm font-light text-textContent text-center">
国家权威机构及亚马逊多重实力认证
</div>
<div class="platforms mt-30 platforms-marquee">
<vue-seamless-scroll
:data="platforms"
:class-option="classOption"
class="warp">
<ul class="marquee-track">
<li
class="platform-item"
v-for="platform in platforms"
:key="platform.name">
<a v-if="platform.link" :href="platform.link" target="_blank">
<img
class="platform-image"
:src="
require(`../../assets/platforms/${platform.name}.${platform.type}`)
"
:alt="platform.name" />
</a>
<img
v-else
class="platform-image"
:src="
require(`../../assets/platforms/${platform.name}.${platform.type}`)
"
:alt="platform.name" />
</li>
</ul>
</vue-seamless-scroll>
<!-- <div class="marquee-track">
<div
class="platform-item"
v-for="platform in platforms"
:key="platform.name">
<a v-if="platform.link" :href="platform.link" target="_blank">
<img
class="platform-image"
:src="
require(`../../assets/platforms/${platform.name}.${platform.type}`)
"
:alt="platform.name" />
</a>
<img
v-else
class="platform-image"
:src="
require(`../../assets/platforms/${platform.name}.${platform.type}`)
"
:alt="platform.name" />
</div>
</div> -->
</div>
</div>
</div>
</div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
name: 'platform',
components: {
vueSeamlessScroll,
},
data() {
return {
platforms: [
{ name: 'logo1', type: 'jpg' },
{ name: 'logo2', type: 'jpg' },
{ name: 'logo3', type: 'jpg' },
{ name: 'logo4', type: 'jpg' },
{ name: 'logo5', type: 'jpg' },
{ name: 'logo6', type: 'jpg' },
{ name: 'logo7', type: 'png' },
{ name: 'logo8', type: 'jpg' },
{ name: 'logo9', type: 'jpg' },
{ name: 'logo10', type: 'jpg' },
{ name: 'logo11', type: 'jpg' },
{ name: 'logo12', type: 'jpg' },
{ name: 'logo13', type: 'jpg' },
{ name: 'logo14', type: 'jpg' },
{ name: 'logo15', type: 'jpg' },
{ name: 'logo16', type: 'jpg' },
{ name: 'logo17', type: 'jpg' },
{ name: 'logo18', type: 'jpg' },
{ name: 'logo19', type: 'png', link: 'https://hubs.ly/Q02Y1gQR0' },
],
classOption: {
step: 1.5, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 2, // 0向下 1向上 2向左 3向右
autoPlay: true, // 是否自动滚动
openWatch: true, // 开启数据实时监控刷新dom
},
}
},
}
</script>
<style scoped lang="scss">
.docking-platform {
background: var(--background-color);
padding: 30px 0;
}
.docking-platform h2 {
color: #000;
font-weight: 500;
}
.warp {
width: 2000px;
}
.lx-title {
font-size: 2.25rem;
color: #1a2035;
font-weight: 500;
line-height: 1.75rem;
margin-bottom: 0.25rem;
max-width: 840px;
text-align: center;
--tw-text-opacity: 1;
color: rgba(26, 32, 53, var(--tw-text-opacity));
letter-spacing: 1px;
}
.platforms {
display: grid;
gap: 10px;
grid-template-columns: repeat(9, 1fr);
}
.platforms-marquee .marquee-track {
display: flex;
align-items: center;
gap: 20px;
white-space: nowrap;
will-change: transform;
}
.platforms-marquee .platform-item {
flex: 0 0 auto;
width: 140px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.platforms-marquee .platform-item a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
transition: opacity 0.3s ease;
}
.platform-image {
width: 120px;
height: auto;
max-height: 80px;
object-fit: contain;
transition: filter 0.3s ease;
}
</style>
src/views/price/pricePage.vue
......@@ -10,13 +10,16 @@
</div>
</div>
<div class="content-body">
<div class="price-container">
<PriceTable />
<!-- <div class="price-container">
<div class="price-columns">
<div
v-for="(c, i) in priceColumns"
:key="i"
class="price-column"
:class="`${c.labelClass || ''} ${c.class || ''}`">
:class="`${c.labelClass || ''} ${c.class || ''} ${
i === priceColumns.length - 1 ? 'last-column' : ''
}`">
{{ c.label }}
</div>
</div>
......@@ -26,13 +29,15 @@
v-for="(c, j) in priceColumns"
:key="j"
class="price-value"
:class="`${c.valueClass || ''} ${c.class || ''}`"
:class="`${c.valueClass || ''} ${c.class || ''} ${
j === priceColumns.length - 1 ? 'last-value' : ''
}`"
v-html="value(c, p)"></div>
</div>
</div>
</div>
</div> -->
</div>
<div class="lx-section py-12 bg-colorBg lg:px-0 lg:mt-28 lg:py-28">
<div class="lx-section py-8 bg-colorBg lg:px-0 lg:mt-28 lg:py-16">
<div
class="flex justify-between items-center flex-col-reverse lg:flex-row mx-auto w-full-70 w-full-90">
<div class="lx-l-section lg:w-2/4">
......@@ -70,6 +75,7 @@
</div>
</div>
</div>
<button class="register-btn-text">获取报价</button>
<div
class="lx-r-section flex flex-col justify-center items-center lg:w-2/4">
<h3
......@@ -101,7 +107,8 @@
<div class="lx-question-card">
<div class="mb-4 flex items-center" style="font-size: 0px">
<span
class="inline-flex flex-shrink-0 justify-center items-center text-white text-lg font-medium w-10 h-10 mr-4 rounded-full bg-blue-600">
class="inline-flex flex-shrink-0 justify-center items-center text-white text-lg font-medium w-10 h-10 mr-4 rounded-full"
style="background: var(--primary-color)">
01
</span>
<span class="text-lg text-textTitle font-medium">
......@@ -116,7 +123,8 @@
<div class="lx-question-card">
<div class="mb-4 flex items-center" style="font-size: 0px">
<span
class="inline-flex flex-shrink-0 justify-center items-center text-white text-lg font-medium w-10 h-10 mr-4 rounded-full bg-blue-600">
class="inline-flex flex-shrink-0 justify-center items-center text-white text-lg font-medium w-10 h-10 mr-4 rounded-full"
style="background: var(--primary-color)">
02
</span>
<span class="text-lg text-textTitle font-medium">
......@@ -130,7 +138,8 @@
<div class="lx-question-card">
<div class="mb-4 flex items-center" style="font-size: 0px">
<span
class="inline-flex flex-shrink-0 justify-center items-center text-white text-lg font-medium w-10 h-10 mr-4 rounded-full bg-blue-600">
class="inline-flex flex-shrink-0 justify-center items-center text-white text-lg font-medium w-10 h-10 mr-4 rounded-full"
style="background: var(--primary-color)">
03
</span>
<span class="text-lg text-textTitle font-medium">
......@@ -150,7 +159,8 @@
<div class="lx-question-card">
<div class="mb-4 flex items-center" style="font-size: 0px">
<span
class="inline-flex flex-shrink-0 justify-center items-center text-white text-lg font-medium w-10 h-10 mr-4 rounded-full bg-blue-600">
class="inline-flex flex-shrink-0 justify-center items-center text-white text-lg font-medium w-10 h-10 mr-4 rounded-full"
style="background: var(--primary-color)">
04
</span>
<span class="text-lg text-textTitle font-medium">
......@@ -193,20 +203,19 @@
</div>
</div>
</div>
<div class="footer-bg">
<div class="footer-banner">
<div class="footer-title">选择九猫，开始高效管理跨境电商业务</div>
<div class="footer-description">
已有超过60万卖家在使用九猫ERP，提升业务管理效益
</div>
<!---->
</div>
</div>
</div>
</template>
<script>
import PriceTable from './priceTable.vue'
export default {
name: 'pricePage',
components: {
PriceTable,
},
inject: {
scrollParent: 'scrollParent',
},
data() {
return {
priceColumns: [
......@@ -228,6 +237,7 @@ export default {
return d
},
valueClass: 'list',
class: 'h-2x',
},
{
label: '价格',
......@@ -511,6 +521,17 @@ export default {
}
return value
},
async goToLogin() {
// 跳转到首页
await this.$router.push('/home').catch(() => {})
// 使用 scrollParent 进行滚动
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
},
}
</script>
......@@ -596,9 +617,20 @@ export default {
.content-body {
width: 1400px;
margin: 0 auto;
padding: 100px 0;
padding: 30px 0;
}
.register-btn-text {
width: 150px;
height: 42px;
display: block;
background: var(--primary-color);
box-shadow: 0 4px 8px 0 var(--shadow-color);
border-radius: 4px;
font-size: 18px;
color: #fff;
cursor: pointer;
margin-top: 400px;
}
.price-container {
display: flex;
border-radius: 8px;
......@@ -617,6 +649,7 @@ export default {
display: flex;
align-items: center;
white-space: nowrap;
border-bottom: solid 1px #eee;
}
.price-column {
......@@ -652,6 +685,18 @@ export default {
.price-item:not(:last-child) {
border-right: solid 1px #eee;
}
.price-item:last-child {
border-right: solid 1px #eee;
}
.last-value {
border-bottom: none !important;
}
.last-column {
border-bottom: none;
}
</style>
<style scoped lang="scss">
.price-container .fs-20 {
......@@ -704,7 +749,7 @@ export default {
color: #1a2035;
font-size: 1.25rem;
--tw-text-opacity: 1;
color: rgba(37, 84, 254, var(--tw-text-opacity));
color: var(--primary-color);
line-height: 1;
}
.lx-question-card {
......@@ -761,44 +806,13 @@ export default {
width: 8px;
height: 8px;
border-radius: 50%;
background: #70b3ff;
background: var(--light-color);
position: absolute;
left: -20px;
top: 8px;
}
}
.footer-bg {
background: linear-gradient(180deg, #2554fe, #3572ff);
}
.footer-banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 15px;
background-image: url(../../assets/images/home/06.png);
background-position-y: bottom;
background-repeat: no-repeat;
background-size: 100% 90px;
.footer-title {
font-weight: 500;
font-size: 36px;
margin-bottom: 20px;
max-width: 70vw;
text-align: center;
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
.footer-description {
font-weight: 300;
font-size: 18px;
margin-top: 8px;
margin-bottom: 40px;
color: rgba(255, 255, 255, 1);
}
}
@media (min-width: 1024px) {
.lx-title {
font-size: 2.25rem;
......@@ -830,24 +844,6 @@ export default {
}
}
}
.footer-banner {
padding: 40px 10px;
.footer-title {
font-size: 18px;
margin-bottom: 10px;
max-width: 90vw;
text-align: center;
color: rgba(255, 255, 255, 1);
}
.footer-description {
font-weight: 300;
font-size: 12px;
margin-top: 8px;
margin-bottom: 20px;
color: rgba(255, 255, 255, 1);
}
}
.lx-question-card {
padding: 1.5rem;
}
......@@ -923,5 +919,13 @@ export default {
.price-item {
padding-bottom: 0;
}
.last-value {
border-bottom: none !important;
}
.last-column {
border-bottom: none;
}
}
</style>
src/views/product/productPlatform.vue
......@@ -41,66 +41,6 @@
</div>
</div>
</div>
<div
class="platforms mt-4 grid grid-cols-3 lg:grid-cols-9 gap-x-5 gap-y-8 w-full-70 w-full-90 mx-auto">
<div class="platform-item">
<img src="../../assets/logo1.jpg" />
</div>
<div class="platform-item">
<img src="../../assets/logo2.jpg" />
</div>
<div class="platform-item">
<img src="../../assets/logo3.jpg" />
</div>
<div class="platform-item">
<img src="../../assets/logo4.jpg" />
</div>
<div class="platform-item">
<a href="https://hubs.ly/Q02Y1gQR0" target="_blank">
<img src="../../assets/logo19.png" />
</a>
</div>
<div class="platform-item">
<img src="../../assets/logo6.jpg" />
</div>
<div class="platform-item">
<img src="../../assets/logo7.png" />
</div>
<div class="platform-item">
<img src="../../assets/logo8.jpg" />
</div>
<div class="platform-item">
<img src="../../assets/logo9.jpg" />
</div>
<div class="platform-item">
<img src="../../assets/logo10.jpg" />
</div>
<div class="platform-item">
<img src="../../assets/logo11.jpg" />
</div>
<div class="platform-item">
<img src="../../assets/logo12.jpg" />
</div>
<div class="platform-item">
<img src="../../assets/logo13.jpg" />
</div>
<div class="platform-item">
<img src="../../assets/logo14.jpg" />
</div>
<div class="platform-item">
<img src="../../assets/logo15.jpg" />
</div>
<div class="platform-item">
<img src="../../assets/logo16.jpg" />
</div>
<div class="platform-item">
<img src="../../assets/logo17.jpg" />
</div>
<div class="platform-item">
<img src="../../assets/logo18.jpg" />
</div>
</div>
</div>
<div class="platform-module mt-12 lg:mt-28">
<div class="cont-title">
......@@ -122,7 +62,7 @@
<div class="footer-description">
选用九猫ERP，让你的跨境电商全面高效增长
</div>
<!---->
<button class="footer-register-btn" @click="goToLogin">立即使用</button>
</div>
</div>
</div>
......@@ -136,6 +76,9 @@ import adImg from '../../assets/images/home/04.png'
export default {
name: 'productPlatform',
components: { ProductDesc },
inject: {
scrollParent: 'scrollParent',
},
data() {
return {
moduleItems: [
......@@ -694,6 +637,19 @@ export default {
],
}
},
methods: {
async goToLogin() {
// 跳转到首页
await this.$router.push('/home').catch(() => {})
// 使用 scrollParent 进行滚动
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
},
}
</script>
<style lang="scss" scoped>
......@@ -732,7 +688,7 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 15px;
padding: 60px 15px;
background-image: url(../../assets/images/home/06.png);
background-position-y: bottom;
background-repeat: no-repeat;
......@@ -755,6 +711,23 @@ export default {
color: rgba(255, 255, 255, 1);
}
}
.footer-register-btn {
width: 200px;
height: 60px;
display: block;
background: rgba(59, 130, 246, 0.5);
border-radius: 10px;
border: 1px solid #ffffffd8;
font-size: 18px;
color: #e9e9e9;
cursor: pointer;
transition: all 0.3s ease;
}
.footer-register-btn:hover {
background: rgba(255, 255, 255);
color: rgba(59, 130, 246);
}
@media (max-width: 1100px) {
.left-content {
width: 100%;
......
src/views/product/productionCustom.vue
......@@ -35,7 +35,8 @@
<div class="product-custom-cont bg-colorBg py-14 mt-10 lg:mt-28 lg:py-28">
<div class="custom-container mx-auto">
<div class="cont-title">
<div class="flex justify-center flex-col items-center gap-2 mb-14 lg:mb-28">
<div
class="flex justify-center flex-col items-center gap-2 mb-14 lg:mb-28">
<h3
class="font-medium text-xl lg:text-3xl"
style="text-align: center">
......@@ -211,7 +212,7 @@
<div class="footer-banner">
<div class="footer-title">高效选品 潮流热卖</div>
<div class="footer-description">追求柔性供应链最优解 支持独品/代工</div>
<!---->
<button class="footer-register-btn" @click="goToLogin">立即使用</button>
</div>
</div>
</div>
......@@ -226,6 +227,9 @@ import adImg from '../../assets/images/home/04.png'
export default {
name: 'productionCustom',
components: { ProductDesc },
inject: {
scrollParent: 'scrollParent',
},
data() {
return {
isLeftHover: true,
......@@ -385,6 +389,17 @@ export default {
this.isRightHover = true
this.isLeftHover = false
},
async goToLogin() {
// 跳转到首页
await this.$router.push('/home').catch(() => {})
// 使用 scrollParent 进行滚动
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
},
}
</script>
......@@ -501,7 +516,7 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 15px;
padding: 60px 15px;
background-image: url(../../assets/images/home/06.png);
background-position-y: bottom;
background-repeat: no-repeat;
......@@ -530,6 +545,23 @@ export default {
.product-custom-bottom-module {
width: 70vw;
}
.footer-register-btn {
width: 200px;
height: 60px;
display: block;
background: rgba(59, 130, 246, 0.5);
border-radius: 10px;
border: 1px solid #ffffffd8;
font-size: 18px;
color: #e9e9e9;
cursor: pointer;
transition: all 0.3s ease;
}
.footer-register-btn:hover {
background: rgba(255, 255, 255);
color: rgba(59, 130, 246);
}
@media (max-width: 1100px) {
.content-container {
width: 90vw;
......
src/views/product/productionLogistics.vue
......@@ -184,7 +184,7 @@
<div class="footer-description text-center lg:text-left">
九猫ERP助力精准核算业务利润与高效决策，业财一体化不再是难事
</div>
<!---->
<button class="footer-register-btn" @click="goToLogin">立即使用</button>
</div>
</div>
</div>
......@@ -196,6 +196,9 @@ export default {
components: {
ProductLogisticsDesc,
},
inject: {
scrollParent: 'scrollParent',
},
data() {
return {
navigateKey: 'df',
......@@ -371,6 +374,17 @@ export default {
this.navigateKey = key
this.$refs.logisticsCarousel.setActiveItem(index)
},
async goToLogin() {
// 跳转到首页
await this.$router.push('/home').catch(() => {})
// 使用 scrollParent 进行滚动
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
},
}
</script>
......@@ -474,7 +488,7 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 15px;
padding: 60px 15px;
background-image: url(../../assets/images/home/06.png);
background-position-y: bottom;
background-repeat: no-repeat;
......@@ -497,6 +511,23 @@ export default {
color: rgba(255, 255, 255, 1);
}
}
.footer-register-btn {
width: 200px;
height: 60px;
display: block;
background: rgba(59, 130, 246, 0.5);
border-radius: 10px;
border: 1px solid #ffffffd8;
font-size: 18px;
color: #e9e9e9;
cursor: pointer;
transition: all 0.3s ease;
}
.footer-register-btn:hover {
background: rgba(255, 255, 255);
color: rgba(59, 130, 246);
}
@media (max-width: 1100px) {
.content-container {
height: auto;
......
src/views/product/productionManagement.vue
......@@ -134,15 +134,6 @@
</div>
</div>
</div>
<div class="footer-bg">
<div class="footer-banner">
<div class="footer-title">亚马逊ERP一体化管理，开启高效决策新体验</div>
<div class="footer-description text-center lg:text-left">
九猫ERP助力精准核算业务利润与高效决策，业财一体化不再是难事
</div>
<!---->
</div>
</div>
</div>
</template>
<script>
......@@ -176,8 +167,7 @@ export default {
id: 'realtime-profit-stats',
img: financesImg,
title: '实时利润统计',
subTitle:
'利润数据每小时更新，把握业务盈利情况，及时调整策略',
subTitle: '利润数据每小时更新，把握业务盈利情况，及时调整策略',
items: [
{
title: '即时查看平台利润',
......@@ -192,35 +182,30 @@ export default {
title: '店铺费用自动分摊',
subTitle: '站点实时查看成本和利润',
},
],
},
{
id: 'settlement-center',
img: cwglImg,
title: '财务管理',
subTitle:
'在线审批报销，财务直接在系统进行业绩统计，工资绩效分配',
subTitle: '在线审批报销，财务直接在系统进行业绩统计，工资绩效分配',
items: [
{
title: '财务审批',
subTitle:
'订单退款财务直接线上审批核实，省时省力',
subTitle: '订单退款财务直接线上审批核实，省时省力',
},
{
title: '工资绩效管理',
subTitle:
'入职即可管理工资和绩效，根据店铺分红直接统计每月工资',
subTitle: '入职即可管理工资和绩效，根据店铺分红直接统计每月工资',
},
{
title: '对账系统',
subTitle:
'工厂生产对账、广告对账、物流对账一应俱全',
subTitle: '工厂生产对账、广告对账、物流对账一应俱全',
},
],
},
{
id: 'replenishment-advice',
img: productionImg,
......@@ -446,13 +431,11 @@ export default {
id: 'visualization-ad-report',
img: adImg,
title: '广告管理',
subTitle:
'统一管理所有类型广告，整合提供多维广告报告',
subTitle: '统一管理所有类型广告，整合提供多维广告报告',
items: [
{
title: '多类型广告统一管理',
subTitle:
'支持一站式管理Google、Facebook、TikTok广告账户',
subTitle: '支持一站式管理Google、Facebook、TikTok广告账户',
},
{
title: '广告数据集成分析',
......@@ -461,13 +444,11 @@ export default {
},
{
title: '导出账单',
subTitle:
'支持导出多个广告账户账单，方便财务后期核算',
subTitle: '支持导出多个广告账户账单，方便财务后期核算',
},
{
title: '广告预警',
subTitle:
'设置广告花费上限或者预算，一旦超支会电话通知',
subTitle: '设置广告花费上限或者预算，一旦超支会电话通知',
},
],
},
......@@ -475,13 +456,11 @@ export default {
id: 'ad-analysis',
img: lrImg,
title: '利润统计',
subTitle:
'实时利润统计把握业务盈利情况，及时调整策略',
subTitle: '实时利润统计把握业务盈利情况，及时调整策略',
items: [
{
title: '即时查看平台利润',
subTitle:
'即时获取店铺账单数据，以及销售SKU数据',
subTitle: '即时获取店铺账单数据，以及销售SKU数据',
},
{
title: '支持当日利润分析',
......@@ -490,8 +469,7 @@ export default {
},
{
title: '订单自动算出利润',
subTitle:
'根据商品成本、物流费用、工艺费用等算出订单利润率',
subTitle: '根据商品成本、物流费用、工艺费用等算出订单利润率',
},
],
},
......@@ -499,23 +477,19 @@ export default {
id: 'keyword-management',
img: keywordImg,
title: '业绩报表',
subTitle:
'自动抓取整合业绩指标，业绩趋势一表尽览',
subTitle: '自动抓取整合业绩指标，业绩趋势一表尽览',
items: [
{
title: '人员业绩高效核算',
subTitle:
'负责人、开发人双维度业绩统计，自动计算毛利润和毛利率',
subTitle: '负责人、开发人双维度业绩统计，自动计算毛利润和毛利率',
},
{
title: '业绩统计维度广',
subTitle:
'支持条件筛选，统计不同SKU、新老品类的利润表现等',
subTitle: '支持条件筛选，统计不同SKU、新老品类的利润表现等',
},
{
title: '每日业绩排名',
subTitle:
'提供不同人员每日销售排名，直观清晰查看绩效变动',
subTitle: '提供不同人员每日销售排名，直观清晰查看绩效变动',
},
{
title: '店铺经营结果自动统计',
......@@ -524,10 +498,6 @@ export default {
},
],
},
],
subKey: 'realtime-profit-stats',
productNavs: [
......@@ -709,6 +679,17 @@ export default {
el.scrollIntoView({ behavior: 'smooth', block: 'center' })
}
},
async goToLogin() {
// 跳转到首页
await this.$router.push('/home').catch(() => {})
// 使用 scrollParent 进行滚动
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
},
}
</script>
......@@ -865,37 +846,6 @@ export default {
.banner-title {
// font-size: 36px;
}
.footer-bg {
background: linear-gradient(180deg, #2554fe, #3572ff);
}
.footer-banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 15px;
background-image: url(../../assets/images/home/06.png);
background-position-y: bottom;
background-repeat: no-repeat;
background-size: 100% 90px;
.footer-title {
font-weight: 500;
font-size: 36px;
margin-bottom: 20px;
max-width: 70vw;
text-align: center;
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
.footer-description {
font-weight: 300;
font-size: 18px;
margin-top: 8px;
margin-bottom: 40px;
color: rgba(255, 255, 255, 1);
}
}
.high-light {
--tw-text-opacity: 1;
color: rgba(37, 84, 254, var(--tw-text-opacity));
......@@ -978,24 +928,6 @@ export default {
margin: 0 auto;
height: auto;
}
.footer-banner {
padding: 40px 10px;
.footer-title {
font-size: 18px;
margin-bottom: 10px;
max-width: 90vw;
text-align: center;
color: rgba(255, 255, 255, 1);
}
.footer-description {
font-weight: 300;
font-size: 12px;
margin-top: 8px;
margin-bottom: 20px;
color: rgba(255, 255, 255, 1);
}
}
.cooperation-container {
width: 90vw;
}
......
src/views/support/financialPage.vue
......@@ -254,6 +254,7 @@
<div class="footer-description">
九猫ERP，将为您提供全维的业务解决方案
</div>
<button class="footer-register-btn" @click="goToLogin">立即使用</button>
</div>
</div>
</div>
......@@ -268,6 +269,9 @@ import adImg from '../../assets/images/home/04.png'
export default {
name: 'financialPage',
components: { ProductDesc },
inject: {
scrollParent: 'scrollParent',
},
data() {
return {
financialControlList: [
......@@ -482,6 +486,19 @@ export default {
],
}
},
methods: {
async goToLogin() {
// 跳转到首页
await this.$router.push('/home').catch(() => {})
// 使用 scrollParent 进行滚动
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
},
}
</script>
<style lang="scss" scoped>
......@@ -528,7 +545,7 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 15px;
padding: 60px 15px;
background-image: url(../../assets/images/home/06.png);
background-position-y: bottom;
background-repeat: no-repeat;
......@@ -551,6 +568,23 @@ export default {
color: rgba(255, 255, 255, 1);
}
}
.footer-register-btn {
width: 200px;
height: 60px;
display: block;
background: rgba(59, 130, 246, 0.5);
border-radius: 10px;
border: 1px solid #ffffffd8;
font-size: 18px;
color: #e9e9e9;
cursor: pointer;
transition: all 0.3s ease;
}
.footer-register-btn:hover {
background: rgba(255, 255, 255);
color: rgba(59, 130, 246);
}
@media (max-width: 1100px) {
.footer-banner {
padding: 40px 10px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment