Skip to content

O
offical_web
Commit 2107f255 by qinjianhui
Options

temp: 集成 tailwind css 之前

parent d1c569f1
Showing with 1570 additions and 131 deletions
package-lock.json
......@@ -2269,6 +2269,87 @@
"webpack-chain": "^6.4.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.8.3",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
}
},
"@vue/cli-shared-utils": {
......@@ -8813,7 +8894,7 @@
"normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
"dev": true
},
"normalize-url": {
......@@ -8854,7 +8935,7 @@
"num2fraction": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
"integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
"integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==",
"dev": true
},
"numerify": {
......@@ -13183,87 +13264,6 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.8.3",
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.4",
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-navigation": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/vue-navigation/-/vue-navigation-1.1.4.tgz",
......
src/assets/css/common.css
......@@ -171,6 +171,10 @@ ul li {
width: 70vw;
}
.mx-auto {
margin: 0 auto;
}
.gap-100 {
gap: 100px;
}
......@@ -193,15 +197,200 @@ ul li {
.text-sm {
font-size: 18px;
}
.w-full {
width: 100%;
}
.font-size-24 {
font-size: 24px;
}
.high-light {
color: #2554fe;
}
.font-bold {
font-weight: bold;
}
.font-medium {
font-weight: 500;
}
.font-light {
font-weight: 300;
}
.text-colorPrimary-100 {
--tw-text-opacity: 1;
color: rgba(37, 84, 254, var(--tw-text-opacity));
}
.text-xl {
font-size: 20px;
}
.px-15px {
padding-left: 15px;
padding-right: 15px;
}
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.text-textContent {
--tw-text-opacity: 1;
color: rgba(92, 94, 102, var(--tw-text-opacity));
}
.mt-4 {
margin-top: 1rem;
}
.text-sm {
font-size: .875rem;
}
.font-light {
font-weight: 300;
}
.mt-6 {
margin-top: 1.5rem;
}
.ml-2 {
margin-left: .5rem;
}
.text-xs {
font-size: .75rem;
}
.text-textTitle {
--tw-text-opacity: 1;
color: rgba(26, 32, 53, var(--tw-text-opacity));
}
.text-textSup {
--tw-text-opacity: 1;
color: rgba(155, 158, 169, var(--tw-text-opacity));
}
.mt-0\.5 {
margin-top: .125rem;
}
.text-center {
text-align: center;
}
.footer-bg {
background: linear-gradient(180deg, #2554fe, #3572ff);
}
@media screen and (max-width: 1100px) {
.lx-title {
font-size: 20px;
}
.text-sm {
font-size: 12px;
}
}
@media (min-width: 1024px) {
.lg\:font-medium {
font-weight: 500;
}
.lg\:text-lg {
font-size: 1.125rem;
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:px-0 {
padding-left: 0;
padding-right: 0;
}
.lg\:text-left {
text-align: left;
}
.lg\:text-4xl {
font-size: 36px;
}
.lg\:block {
display: block;
}
.lg\:text-base {
font-size: 1rem;
}
.lg\:font-normal {
font-weight: 400;
}
.lg\:py-30 {
padding-top: 7.5rem;
padding-bottom: 7.5rem;
}
.\!lg\:leading-\[54px\] {
line-height: 54px !important;
}
.lg\:block {
display: block;
}
.lg\:mt-3 {
margin-top: 12px;
}
.lg\:font-normal {
font-weight: 400;
}
.lg\:text-textTitle {
--tw-text-opacity: 1;
color: rgba(26, 32, 53, var(--tw-text-opacity));
}
.lg\:text-base {
font-size: 16px;
}
.lg\:mt-10 {
margin-top: 2.5rem;
}
.lg\:ml-5 {
margin-left: 1.25rem;
}
.lg\:mt-2 {
margin-top: .5rem;
}
.lg\:text-sm {
font-size: .875rem;
}
.lg\:font-normal {
font-weight: 400;
}
}
\ No newline at end of file
src/assets/css/index.css
......@@ -6,8 +6,3 @@
.link:hover {
color: #525558;
}
\ No newline at end of file
.text-center {
text-align: center;
}
\ No newline at end of file
src/assets/images/home/custom.svg 0 → 100644
<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>
\ No newline at end of file
src/assets/images/home/logistics.svg 0 → 100644
<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>
\ No newline at end of file
src/assets/images/home/platform.svg 0 → 100644
<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>
\ No newline at end of file
src/assets/images/home/production.svg 0 → 100644
<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>
\ No newline at end of file
src/assets/logo.png
src/assets/logo.png

14.2 KB | W: | H:

src/assets/logo.png

12.7 KB | W: | H:

src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/components/head.vue
<template>
<header class="header" :class="{ 'no-shadow': !shadow }">
<headerNavMobile v-if="$isMobile" :nav="navbar" :userInfo="userInfo"></headerNavMobile>
<div class="header" :class="{ 'no-shadow': !shadow }" ref="header">
<headerNavMobile
v-if="$isMobile"
:nav="navbar"
:userInfo="userInfo"></headerNavMobile>
<div class="container" v-else>
<div class="logo">
<span class="logo_text">
......@@ -15,7 +18,45 @@
v-for="item in navbar"
@click="changePath"
:key="item.path">
<a :href="item.path">{{ item.name }}</a>
<a class="navbar_item_a" :href="item.path">{{ item.name }}</a>
<i v-if="item.children" class="el-icon-arrow-down"></i>
<div class="navbar-panel" v-if="item.children">
<div class="navbar-panel-left">
<div class="left-title">
<span>九猫产品</span>
</div>
<div class="left-content">
<div
class="left-content-item"
:class="{ active: $route.path === child.path }"
v-for="child in item.children"
:key="child.path">
<a :href="child.path" class="item-router">
<img :src="child.icon" />
<div class="content-name">
<div class="name">{{ child.name }}</div>
<div class="sub-title">{{ child.subTitle }}</div>
</div>
</a>
</div>
</div>
</div>
<div class="navbar-panel-right">
<div class="right-title">
<span>2分钟了解九猫ERP</span>
</div>
<div class="banner-image" @click="playVideo">
<img src="../assets/images/home/07.png" />
<div class="play-icon">
<img src="../assets/images/home/play.png" />
</div>
</div>
<div class="right-bottom-content">
<img width="30" src="../assets/images/home/fincial.png" />
<span>如何通过财务管控向内部要效益?</span>
</div>
</div>
</div>
</li>
</ul>
</nav>
......@@ -23,8 +64,8 @@
<!-- <el-button type="primary" size="mini" @click="login">登录</el-button>
<el-button size="mini" @click="register">注册</el-button> -->
<div class="user-operate" v-if="!userInfo">
<span class="login-btn" @click="login">登录</span>
<span class="reg-btn" @click="register">注册</span>
<el-button class="login-btn" @click="login">登录</el-button>
<el-button class="reg-btn" @click="register">注册</el-button>
</div>
<div class="user-info" v-else>
<div class="user-msg">
......@@ -38,12 +79,26 @@
<el-button type="primary" @click="freeTrial">免费试用</el-button>
</div>
</div>
</header>
<div class="video-cont" :class="playIcon ? 'active' : ''">
<div class="video-player">
<video
ref="nav-player"
controls
src="../assets/video/head-video.mp4"
class="video"></video>
<i class="el-icon-circle-close" @click="closeVideo"></i>
</div>
</div>
</div>
</template>
<script>
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 logisticsSvg from '../assets/images/home/logistics.svg'
import platformSvg from '../assets/images/home/platform.svg'
export default {
props: {
......@@ -59,7 +114,36 @@ export default {
return {
navbar: [
{ name: '首页', path: '/home' },
{ name: '产品', path: '/product' },
{
name: '产品',
path: '/product/production',
children: [
{
name: '生产管理',
subTitle: '生产管理生产管理生产管理生产管理',
path: '/product/production',
icon: productionSvg,
},
{
name: '一件定制',
subTitle: '一件定制一件定制一件定制一件定制',
path: '/product/custom',
icon: customSvg,
},
{
name: '海外仓物流',
subTitle: '海外仓物流海外仓物流海外仓物流海外仓物流',
path: '/product/logistics',
icon: logisticsSvg,
},
{
name: '自建站平台',
subTitle: '自建站平台自建站平台自建站平台自建站平台',
path: '/product/platform',
icon: platformSvg,
},
],
},
// { name: '核心功能', path: '/function' },
// { name: '价格', path: '/price' },
{ name: '需求痛点', path: '/demand_pain_point' },
......@@ -67,7 +151,8 @@ export default {
{ name: '关于我们', path: '/about_us' },
{ name: '帮助', path: '/help' },
],
userInfo:JSON.parse(localStorage.getItem('userInfo'))
userInfo: JSON.parse(localStorage.getItem('userInfo')),
playIcon: false,
}
},
computed: {
......@@ -77,15 +162,33 @@ export default {
},
},
mounted() {
if(this.$route.query.shopKey){
if (this.$route.query.shopKey) {
localStorage.setItem('shopifyObj', JSON.stringify(this.$route.query))
}
if(this.userInfo && this.$route.query.shopKey){
if (this.userInfo && this.$route.query.shopKey) {
this.$router.push('/contact')
}
},
mounted() {
this.scrollParent().addEventListener('scroll', this.onScroll)
},
beforeDestroy() {
this.scrollParent().removeEventListener('scroll', this.onScroll)
},
methods: {
...mapMutations(['setUserInfo','setShopKey']),
...mapMutations(['setUserInfo', 'setShopKey']),
onScroll() {
if (this.$isMobile) return
if (this.$route.path !== '/product/production') return
const top = this.scrollParent().scrollTop
if (top - 400 >= this.$refs.header.offsetHeight) {
this.$refs.header.style.top = '-60px'
} else if (top - 60 >= this.$refs.header.offsetHeight) {
this.$refs.header.style.top = '-30px'
} else {
this.$refs.header.style.top = '0'
}
},
changePath() {
this.scrollParent().scrollTo({
behavior: 'smooth',
......@@ -93,7 +196,7 @@ export default {
})
},
login() {
if(this.$route.query&&this.$route.query.shopKey){
if (this.$route.query && this.$route.query.shopKey) {
this.setShopKey(this.$route.query.shopKey)
}
this.$router.push('/login')
......@@ -109,11 +212,19 @@ export default {
this.setUserInfo(undefined)
this.$router.push('/login')
},
playVideo() {
this.playIcon = true
this.$refs['nav-player'].play()
},
closeVideo() {
this.playIcon = false
this.$refs['nav-player'].pause()
},
},
}
</script>
<style scoped>
<style scoped lang="scss">
/* .header {
position: fixed;
z-index: 999;
......@@ -134,12 +245,20 @@ export default {
margin-right: 30px;
}
.container {
width: 70rem;
width: 70vw;
margin: 0 auto;
display: flex;
align-items: center;
height: 100%;
}
@media screen and (max-width: 1500px) {
.navbar_item_wrap {
gap: 40px !important;
}
.container {
width: 80vw !important;
}
}
@media screen and (max-width: 1100px) {
.header {
......@@ -152,30 +271,36 @@ export default {
}
.navbar {
flex: 1;
overflow: hidden;
}
.navbar_item {
position: relative;
i {
position: absolute;
top: 50%;
right: -20px;
transform: translateY(-50%);
font-size: 16px;
}
}
.navbar_item_wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
gap: 80px;
width: 100%;
overflow: hidden;
padding: 0;
height: 60px;
line-height: 60px;
}
.navbar_item:hover a {
color: #409EFF;
.navbar_item:hover .navbar_item_a {
color: #2253fd;
}
.navbar_item a {
.navbar_item .navbar_item_a {
display: block;
height: 60px;
line-height: 60px;
text-decoration: none;
color: #000;
font-size: 16px;
white-space: nowrap;
}
.right_btn,
.user-info {
......@@ -200,14 +325,12 @@ export default {
.login-btn {
position: relative;
margin-right: 20px;
margin-right: 10px;
cursor: pointer;
font-size: 16px;
}
.reg-btn {
cursor: pointer;
font-size:16px;
}
.login-btn::after {
......@@ -225,8 +348,8 @@ export default {
margin-right: 10px;
}
.active a {
color: #409EFF;
.active .navbar_item_a {
color: #2253fd;
font-weight: bold;
}
......@@ -234,7 +357,7 @@ export default {
content: '';
width: 20px;
height: 2px;
background-color: #409EFF;
background-color: #2253fd;
border-radius: 4px;
display: block;
position: absolute;
......@@ -242,4 +365,140 @@ export default {
bottom: 8px;
transform: translateX(-50%);
}
.navbar-panel {
position: absolute;
visibility: hidden;
left: 100%;
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
z-index: 10000;
display: flex;
gap: 20px;
}
.navbar_item:hover .navbar-panel {
left: 50%;
visibility: visible;
transform: translateX(-50%);
transition: all 0.2s ease-in-out;
}
.left-title {
font-weight: 500;
font-size: 16px;
padding-bottom: 20px;
width: 100%;
color: #91a0c3;
border-bottom: 1px solid #91a0c3;
line-height: initial;
}
.left-content {
margin-top: 20px;
line-height: initial;
}
.navbar-panel-left {
border-right: 1px solid #eee;
padding: 20px;
}
.left-content-item {
padding: 10px;
&:not(:last-child) {
margin-bottom: 20px;
}
&:hover {
background-color: #f8f9ff;
}
&.active {
background-color: #eef1ff;
}
img {
width: 30px;
vertical-align: middle;
}
.item-router {
display: flex;
align-items: flex-start;
gap: 20px;
white-space: nowrap;
text-decoration: none;
color: #000;
}
.content-name {
.name {
font-size: 16px;
margin-bottom: 8px;
}
.sub-title {
font-size: 14px;
color: #777;
}
}
}
.navbar-panel-right {
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
line-height: initial;
.banner-image {
width: 260px;
position: relative;
cursor: pointer;
img {
width: 100%;
border-radius: 10px;
}
.play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.right-title {
white-space: nowrap;
font-size: 16px;
}
.right-bottom-content {
white-space: nowrap;
font-size: 14px;
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
}
}
.video-cont {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100000;
&.active {
display: flex;
justify-content: center;
align-items: center;
}
.video-player {
width: 60vw;
height: 600px;
margin: auto;
position: relative;
.video {
width: 100%;
height: 100%;
}
i {
position: absolute;
top: 5px;
right: 30px;
cursor: pointer;
font-size: 30px;
}
}
}
</style>
src/components/product-intro.vue
......@@ -701,7 +701,7 @@ export default {
.product-pros-card {
margin-top: 40px;
}
.home-module-container[data-v-3ba2a52e] {
.home-module-container {
margin-top: 20px;
}
.home-module-item {
......
src/components/productDesc.vue 0 → 100644
<template>
<div class="home-module">
<div
class="home-module-item flex justify-center"
v-for="(item, index) in moduleItems"
:data-id="item.id"
:key="index">
<div class="content flex w-full-70 gap-100 fade-up-animation">
<div class="img">
<img :src="item.img" />
</div>
<div class="module-content">
<div class="title">
<span class="main-title">{{ item.title }}</span>
<span class="sub-title">{{ item.subTitle }}</span>
</div>
<div class="desc">
<div
class="desc-item"
v-for="(t, index) in item.items"
:key="index">
<div class="desc-title">
<span class="desc-main-title">{{ t.title }}</span>
<span class="desc-sub-title">{{ t.subTitle }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'productDesc',
props: {
moduleItems: {
type: Array,
default: () => [],
},
},
data() {
return {}
},
mounted() {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-up-visible')
} else {
entry.target.classList.remove('fade-up-visible')
}
})
})
this.$el.querySelectorAll('.fade-up-animation').forEach((item) => {
observer.observe(item)
})
this._animationObserver = observer
},
beforeDestroy() {
this._animationObserver.disconnect()
},
}
</script>
<style lang="scss" scoped>
.home-module-container {
margin-top: 100px;
}
.home-module-item {
padding: 150px 0;
margin: 0 auto;
.img {
flex: 1;
img {
width: 100%;
height: 100%;
}
}
.module-content {
flex: 1;
letter-spacing: 2px;
}
}
.home-module-item:nth-child(even) .content {
flex-direction: row-reverse;
}
.home-module-item:nth-child(odd) {
background-color: #f8f9ff;
}
.home-module-item:not(:last-child) {
margin-bottom: 18px;
}
.module-content {
.title {
display: flex;
flex-direction: column;
margin-bottom: 36px;
.main-title {
font-size: 36px;
margin-bottom: 10px;
}
.sub-title {
font-size: 16px;
color: #000;
}
}
.desc {
padding-left: 24px;
.desc-item {
position: relative;
&::before {
background-color: #2554fe;
border-radius: 50%;
position: absolute;
left: -23px;
top: 10px;
content: '';
width: 6px;
height: 6px;
box-shadow: 0 0 0 5px rgba(37, 84, 254, 0.1);
}
&:not(:last-child) {
margin-bottom: 18px;
}
.desc-title {
display: flex;
flex-direction: column;
gap: 8px;
.desc-main-title {
color: #000;
font-size: 20px;
}
.desc-sub-title {
font-size: 16px;
color: #606266;
}
}
}
}
}
.product-intro::v-deep {
.fade-up-animation {
transition: all 0.3s ease;
opacity: 0.2;
transform: translateY(100px);
}
.fade-up-visible {
opacity: 1;
transform: translateY(0);
}
}
.section-reason {
margin: 0 auto;
}
.section-reason-item {
background-color: rgba(255, 255, 255, 1);
border-radius: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-shadow: 0 0 16px 0 rgba(180, 189, 221, 1),
0 6px 14px 0 hsla(0, 0%, 100%, 0.3), 0 16px 20px 0 rgba(180, 189, 221, 0.25);
transition: all 0.4s ease-in-out;
.reason-card-type {
overflow: hidden;
padding-top: 20px;
padding-bottom: 30px;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, 1);
width: 100%;
border-radius: 0 0 16px 16px;
background-image: url(../assets/images/home/05.png);
background-size: 100% 100%;
background-repeat: no-repeat;
.reason-tip {
font-family: Helvetica Neue;
font-size: 32px;
letter-spacing: 2px;
font-weight: 500;
line-height: 40px;
}
}
}
.section-reason-item:hover {
transform: translateY(-8px);
box-shadow: 10px 10px 38px 0 hsla(0, 0%, 100%, 0.3),
0 0 14px 0 rgba(202, 210, 238, 0.2),
28px 36px 50px 0 rgba(180, 189, 221, 0.46);
}
.season-top {
padding: 24px 40px 36px;
}
.reason-card-title {
font-weight: 500;
font-size: 30px;
margin-top: 16px;
--tw-text-opacity: 1;
color: rgba(26, 32, 53, 1);
}
.text-textPrimary {
color: rgba(58, 64, 87, 1);
}
.reason-list {
margin-top: 80px;
}
.home-module::v-deep {
.fade-up-animation {
transition: all 0.3s ease;
opacity: 0.2;
transform: translateY(100px);
}
.fade-up-visible {
opacity: 1;
transform: translateY(0);
}
}
@media screen and (max-width: 1100px) {
.home-module-container {
margin-top: 20px;
}
.home-module-item {
padding: 10px 0;
.content {
width: 90vw;
display: block;
}
.img {
width: 100%;
}
}
}
</style>
src/main.js
......@@ -21,11 +21,11 @@ import './styles/index.scss'
const isMobile = () => window.innerWidth <= 1100
Vue.util.defineReactive(Vue.prototype, '$isMobile', isMobile())
document.querySelector('html').style.fontSize = window.innerWidth / 100 + 'px'
window.addEventListener('resize', () => {
Vue.prototype.$isMobile = isMobile()
document.querySelector('html').style.fontSize = window.innerWidth / 100 + 'px'
})
// document.querySelector('html').style.fontSize = window.innerWidth / 100 + 'px'
// window.addEventListener('resize', () => {
// Vue.prototype.$isMobile = isMobile()
// document.querySelector('html').style.fontSize = window.innerWidth / 100 + 'px'
// })
new Vue({
store,
......
src/router/index.js
......@@ -7,6 +7,7 @@ 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'
Vue.use(VueRouter)
......@@ -47,6 +48,11 @@ const routes = [
name: 'help',
component: helpPage,
},
{
path: '/product/production',
name: 'production',
component: productionManagement,
}
],
},
{
......
src/views/home.vue
......@@ -49,22 +49,24 @@ export default {
.jomalls-home-page {
box-sizing: border-box;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
/* overflow: hidden; */
/* display: flex; */
/* flex-direction: column; */
overflow-y: auto;
overflow-x: hidden;
}
.home-main::-webkit-scrollbar {
.jomalls-home-page::-webkit-scrollbar {
width: 6px;
}
.home-main::-webkit-scrollbar-thumb {
.jomalls-home-page::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(162, 161, 161, 0.2);
}
.home-main::-webkit-scrollbar-track {
.jomalls-home-page::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
......@@ -74,6 +76,10 @@ export default {
transition: all 0.3s;
border: 1px solid #eee;
background: #fff;
height: 60px;
position: sticky;
top: 0;
z-index: 100;
}
.jomalls-home-page.scrolling .header {
......@@ -85,7 +91,7 @@ export default {
.home-main {
/* padding-top: 60px; */
flex: 1;
overflow-y: auto;
/* overflow-y: auto; */
/* background-color: #f5f5f5; */
}
</style>
src/views/product/productionManagement.vue 0 → 100644
<template>
<div class="productionManagement">
<div class="banner-container">
<div class="content-container flex items-center">
<div class="left-content">
<h3 class="banner-title">做亚马逊，用九猫ERP</h3>
<div class="text-sm lg:text-lg">
<span>市占率第一，亚马逊业务一体化管理，助力，</span>
<span class="high-light font-bold">60万+</span>
<span>卖家业务增长</span>
</div>
</div>
<div class="right-image">
<video
width="100%"
class="video"
src="../../assets/video/product-video.mp4"
autoplay
loop
muted></video>
</div>
</div>
</div>
<div class="product-content">
<div class="blank-area"></div>
<div class="nav-content">
<div class="module-nav" ref="navContent">
<div
class="module-nav-item"
v-for="(item, index) in productNavs"
@click="handleNavClick(item)"
:class="{
active: item.children.some(
(child) => child.id === activeProductNavId
),
}"
:key="index">
<span>{{ item.name }}</span>
<i class="el-icon-arrow-right"></i>
<div class="module-child-list">
<div
class="module-child-item"
:class="{ active: child.id === activeProductNavId }"
v-for="(child, cIndex) in item.children"
:key="cIndex"
@click.stop="handleNavClick(item, child)">
<span>{{ child.name }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="product-module">
<ProductDesc :moduleItems="moduleItems" />
</div>
</div>
<div class="py-12 px-15px lg:py-30 lg:px-0 bg-white">
<div class="w-full-70 mx-auto">
<div
class="flex flex-col justify-between items-center lg:flex-row max-w-7xl mx-auto">
<div class="text-center lg:text-left">
<div
class="text-xl inline-block lg:text-4xl lg:block !lg:leading-[54px] font-medium text-colorPrimary-100">
600000+
</div>
<div
class="text-xl inline-block lg:text-4xl lg:block font-medium text-textTitle">
跨境企业的共同选择
</div>
<div
class="text-sm mt-1 text-textContent font-light lg:text-base lg:mt-3 lg:text-textTitle lg:font-normal">
跨境电商上市企业和亿级规模卖家数量行业领先
</div>
</div>
<div class="product-rumor">
<div class="product-rumor-bg"></div>
<div class="title">重新定义SaaS ERP</div>
<div
class="mt-4 text-sm font-light text-textContent lg:text-base lg:font-normal">
做一个好用且易用的ERP，让跨境电商更简单
</div>
<div class="mt-6 flex items-center lg:mt-10">
<div class="avatar">
<img
src="https://static.distributetop.com/office-site-new/office-site-resource/image/cf90da50d0a4c1c2d138ff0e1ba8af95.png"
alt="" />
</div>
<div class="ml-2 lg:ml-5">
<p class="text-xs lg:text-base lg:font-medium text-textTitle">
xxx
</p>
<p
class="text-xs font-light mt-0.5 text-textSup lg:text-sm lg:mt-2 lg:font-normal">
九猫CEO
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bg">
<div class="footer-banner">
<div class="footer-title">亚马逊ERP一体化管理，开启高效决策新体验</div>
<div class="footer-description">
九猫ERP助力精准核算业务利润与高效决策，业财一体化不再是难事
</div>
<!---->
</div>
</div>
</div>
</template>
<script>
import ProductDesc from '../../components/productDesc.vue'
import purchaseImg from '../../assets/images/home/01.png'
import financesImg from '../../assets/images/home/02.png'
import statementsImg from '../../assets/images/home/03.png'
import adImg from '../../assets/images/home/04.png'
export default {
name: 'productionManagement',
components: { ProductDesc },
inject: {
scrollParent: 'scrollParent',
setHeaderShadow: 'setHeaderShadow',
},
data() {
return {
moduleItems: [
{
id: 'realtime-profit-stats',
img: purchaseImg,
title: '进销存一体管理',
subTitle:
'打通采购、发货、物流等环节，1688一键下单，智能提供补货建议',
items: [
{
title: '采购业务场景全覆盖',
subTitle: '支持1688下单/委外加工/退换货等采购方式，可多维度管理',
},
{
title: '智能补货建议',
subTitle:
'自动追踪全球销量与库存情况，区分物流渠道运输时效和费用提供补货方案',
},
{
title: '物流全链条追踪管理',
subTitle: '全链条跟踪物流轨迹，对比物流价格，优化物流成本',
},
{
title: '一站式管库存',
subTitle:
'集成海外仓与物流商，统一管理本地仓/海外仓/FBA仓库存和在途库存',
},
],
},
{
id: 'performance-report',
img: financesImg,
title: '财务精准管理',
subTitle:
'每日实时利润统计，订单级回款跟踪，自动提现，业财一体化管理',
items: [
{
title: '实时看利润',
subTitle: '精准核算利润，实时整合提供利润报表，反哺销售决策调整',
},
{
title: '成本严控制',
subTitle: '业务成本一目了然，隐形费用自动识别，精准统计所有成本',
},
{
title: '资金流追踪',
subTitle: '全链条跟踪物流轨迹，对比物流价格，优化物流成本',
},
],
},
{
id: 'logistics-management',
img: statementsImg,
title: '多维度数据报表',
subTitle:
'自动形成利润报表、采购报表、库存报表、业绩报表等，数据可视化',
items: [
{
title: '利润报表',
subTitle:
'实时整合平台数据，精准核算利润，每日出具利润报表，支撑财务核算所需',
},
{
title: '产品表现报表',
subTitle:
'整合Listing所有运营数据，支持同比、环比分析，快速识别爆款产品',
},
{
title: 'BI自定义数据分析',
subTitle:
'自定义经营数据驾驶舱，实时监测业务数据，可联动分析，了解业务实况',
},
],
},
{
id: 'operation-tool',
img: adImg,
title: '全流程广告管理',
subTitle:
'投放前挖掘优质词，投中使用自动规则提效，投后溯源、对比分析广告转化率',
items: [
{
title: '投放前：挖优质词定策略',
subTitle:
'自动分析广告历史表现、行业大盘表现、挖优质词，规划广告投放结构，助力卖家抢量',
},
{
title: '投放中：自动规则提效',
subTitle:
'跨广告类型管理，分时策略、自动规则、关键词抢位等工具高效投放，实时数据优化调整',
},
{
title: '投放后：精准透视分析',
subTitle:
'全局分析广告效果，对比、细分、溯源、透视广告表现，分析词根，挖掘优质投放策略',
},
],
},
{
id: 'keyword-management',
img: adImg,
title: '全流程广告管理',
subTitle:
'投放前挖掘优质词，投中使用自动规则提效，投后溯源、对比分析广告转化率',
items: [
{
title: '投放前：挖优质词定策略',
subTitle:
'自动分析广告历史表现、行业大盘表现、挖优质词，规划广告投放结构，助力卖家抢量',
},
{
title: '投放中：自动规则提效',
subTitle:
'跨广告类型管理，分时策略、自动规则、关键词抢位等工具高效投放，实时数据优化调整',
},
{
title: '投放后：精准透视分析',
subTitle:
'全局分析广告效果，对比、细分、溯源、透视广告表现，分析词根，挖掘优质投放策略',
},
],
},
],
productNavs: [
{
name: '财务',
children: [
{ id: 'realtime-profit-stats', name: '实时利润统计' },
{ id: 'profit-report-daily', name: '每日利润报表' },
{ id: 'settlement-center', name: '结算中心' },
{ id: 'performance-report', name: '业绩报表' },
],
},
{
name: '供应链',
children: [
{ id: 'replenishment-advice', name: '补货建议' },
{ id: 'shipping-management', name: '发货管理' },
{ id: 'warehouse-management', name: '海外仓备货' },
{ id: 'purchasing-management', name: '采购管理' },
{ id: 'self-delivery', name: '自发货' },
{ id: 'logistics-management', name: '物流管理' },
{ id: 'inventory-management', name: '库存管理' },
],
},
{
name: '运营',
children: [
{ id: 'data-decision', name: '数据决策' },
{ id: 'operation-tool', name: '运营工具' },
{ id: 'ai-tool', name: 'AI工具' },
{ id: 'authority-management', name: '权限管理' },
{ id: 'terminal-applicable', name: '对终端适用' },
],
},
{
name: '广告管理',
children: [
{ id: 'visualization-ad-report', name: '可视化广告报表' },
{ id: 'ad-analysis', name: '广告溯源分析' },
{ id: 'keyword-management', name: '关键词管理' },
{ id: 'ad-budget-management', name: '广告预算管理' },
{ id: 'ad-placement-management', name: '广告投放管理' },
{ id: 'ad-efficiency-tool', name: '高效投放工具' },
{ id: 'ad-smart-suggestion', name: '智能化建议' },
],
},
],
activeProductNavId: null,
}
},
mounted() {
this.scrollParent().addEventListener('scroll', this.onScroll)
this._intersectionObserver = new IntersectionObserver((entries) => {
entries.forEach(({ target: el, isIntersecting, intersectionRatio }) => {
const id = el.dataset.id
if (!id) return
if (!isIntersecting) {
if (this._productNavIntersection?.id === id) {
this._productNavIntersection = undefined
}
return
}
if (
!this._productNavIntersection ||
intersectionRatio > this._productNavIntersection.intersectionRatio
) {
this._productNavIntersection = { id, intersectionRatio }
this.activeProductNavId = id
}
})
}, { rootMargin: '0px 0px -50% 0px' })
const elements = Array.from(this.$el.querySelectorAll('.home-module-item'))
elements.forEach((el) => {
this._intersectionObserver.observe(el)
})
},
beforeDestroy() {
this._intersectionObserver.disconnect()
this.scrollParent().removeEventListener('scroll', this.onScroll)
},
methods: {
onScroll() {
const top = this.scrollParent().scrollTop
const navContent = this.$refs.navContent
const scrollTotal = navContent.parentElement.offsetTop
const width = 70 + 30 * (top / scrollTotal)
navContent.style.width = `${width}vw`
},
handleNavClick(item, child = item.children[0]) {
if (!child) return
const el = this.$el.querySelector(
'.home-module-item[data-id="' + child.id + '"]'
)
if (el) {
el.scrollIntoView({ behavior: 'smooth', block: 'center' })
}
},
},
}
</script>
<style scoped lang="scss">
.content-container {
width: 70vw;
height: 30vw;
margin: 0 auto;
padding-top: 40px;
}
.left-content {
width: 30%;
display: flex;
flex-direction: column;
gap: 20px;
}
.right-image {
width: 70%;
position: relative;
height: 100%;
.video {
width: 100%;
height: 100%;
object-fit: fill;
}
}
.product-content {
padding-top: 100px;
}
.nav-content {
background-color: #f8f9ff;
position: sticky;
top: 0;
z-index: 999;
}
.module-nav {
display: flex;
width: 70vw;
margin: 0 auto;
font-size: 18px;
font-weight: bold;
background-color: #fff;
transition: all 0.3s ease-in-out;
height: 62px;
}
.module-nav-item {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 18px 0px;
border: 1px solid #e1e6f5;
cursor: pointer;
transition: all 0.3s ease-in-out;
&.active {
flex-grow: 0;
flex-shrink: 0;
padding-left: 20px;
padding-right: 20px;
background-color: #2554fe;
color: #fff;
border-bottom: none;
.module-child-list {
display: flex;
}
}
&:hover {
border-bottom-color: #2554fe;
}
}
.module-nav-item:nth-child(2) {
border-left: unset;
border-right: unset;
}
.module-nav-item:nth-child(2) {
border-left: unset;
}
.module-nav-item:nth-child(3) {
border-right: unset;
}
.blank-area {
height: 80px;
background-color: #f8f9ff;
}
.module-child-list {
display: none;
font-size: 16px;
font-weight: normal;
gap: 30px;
margin-left: 20px;
}
.module-child-item.active {
color: red;
}
.product-rumor {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
border-radius: 1rem;
box-sizing: border-box;
margin-top: 2.5rem;
margin-left: 1.5rem;
padding: 1.5rem 1rem;
position: relative;
width: 19.75rem;
box-shadow: 0 0 16px 0 rgba(180, 189, 221, 0.1),
0 6px 14px 0 hsla(0, 0%, 100%, 0.3), 0 10px 10px 0 rgba(180, 189, 221, 0.2);
transform-style: preserve-3d;
}
.product-rumor-bg {
z-index: -1;
position: absolute;
border-radius: 16px;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(214, 222, 240, 0.4);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.product-rumor .title {
font-weight: 500;
font-size: 0.875rem;
--tw-text-opacity: 1;
color: rgba(26, 32, 53, var(--tw-text-opacity));
}
.product-rumor .avatar {
border-radius: 50%;
height: 2.75rem;
width: 2.75rem;
overflow: hidden;
img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
.banner-title {
font-size: 36px;
}
.footer-banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2.5rem 15px;
background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/history-card-sm-bg.cbfbf77.png);
background-position-y: bottom;
background-repeat: no-repeat;
background-size: 100% 5.375rem;
}
.footer-banner .footer-title {
font-weight: 500;
font-size: 1.25rem;
margin-bottom: 1.25rem;
text-align: center;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
letter-spacing: 2px;
}
.footer-banner .footer-description {
line-height: 1.75rem;
display: none;
font-weight: 300;
font-size: 1.125rem;
margin-top: 0.5rem;
margin-bottom: 2.5rem;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
@media (min-width: 1024px) {
.product-rumor {
margin-top: 0;
margin-left: 0;
padding: 3rem 4rem;
width: 40rem;
}
.product-rumor {
margin-top: 0;
margin-left: 0;
padding: 3rem 4rem;
width: 40rem;
}
.product-rumor-bg {
transform: translateX(-2.5rem) rotate3d(1, 1, 1, -15deg);
}
.product-rumor .title {
font-size: 22px;
line-height: 1;
}
.product-rumor .avatar {
height: 4.5rem;
width: 4.5rem;
border: 1.5px solid #e6e8f0;
}
.footer-banner {
padding: 5rem 0;
background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/app-promotion-bg.252059a.png);
background-size: cover;
}
.footer-banner .footer-title {
font-size: 2.25rem;
line-height: 3.125rem;
margin-bottom: 0;
}
.footer-banner .footer-description {
display: block;
}
}
</style>
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