Skip to content

O
offical_web
Commit 2107f255 by qinjianhui
Options

temp: 集成 tailwind css 之前

parent d1c569f1
Showing with 720 additions and 102 deletions
package-lock.json
...@@ -2269,6 +2269,87 @@ ...@@ -2269,6 +2269,87 @@
"webpack-chain": "^6.4.0", "webpack-chain": "^6.4.0",
"webpack-dev-server": "^3.11.0", "webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2" "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": { "@vue/cli-shared-utils": {
...@@ -8813,7 +8894,7 @@ ...@@ -8813,7 +8894,7 @@
"normalize-range": { "normalize-range": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", "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 "dev": true
}, },
"normalize-url": { "normalize-url": {
...@@ -8854,7 +8935,7 @@ ...@@ -8854,7 +8935,7 @@
"num2fraction": { "num2fraction": {
"version": "1.2.2", "version": "1.2.2",
"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", "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 "dev": true
}, },
"numerify": { "numerify": {
...@@ -13183,87 +13264,6 @@ ...@@ -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": { "vue-navigation": {
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/vue-navigation/-/vue-navigation-1.1.4.tgz", "resolved": "https://registry.npmjs.org/vue-navigation/-/vue-navigation-1.1.4.tgz",
......
src/assets/css/common.css
...@@ -171,6 +171,10 @@ ul li { ...@@ -171,6 +171,10 @@ ul li {
width: 70vw; width: 70vw;
} }
.mx-auto {
margin: 0 auto;
}
.gap-100 { .gap-100 {
gap: 100px; gap: 100px;
} }
...@@ -193,15 +197,200 @@ ul li { ...@@ -193,15 +197,200 @@ ul li {
.text-sm { .text-sm {
font-size: 18px; font-size: 18px;
} }
.w-full { .w-full {
width: 100%; 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) { @media screen and (max-width: 1100px) {
.lx-title { .lx-title {
font-size: 20px; font-size: 20px;
} }
.text-sm { .text-sm {
font-size: 12px; 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 @@ ...@@ -6,8 +6,3 @@
.link:hover { .link:hover {
color: #525558; color: #525558;
} }
.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/product-intro.vue
...@@ -701,7 +701,7 @@ export default { ...@@ -701,7 +701,7 @@ export default {
.product-pros-card { .product-pros-card {
margin-top: 40px; margin-top: 40px;
} }
.home-module-container[data-v-3ba2a52e] { .home-module-container {
margin-top: 20px; margin-top: 20px;
} }
.home-module-item { .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' ...@@ -21,11 +21,11 @@ import './styles/index.scss'
const isMobile = () => window.innerWidth <= 1100 const isMobile = () => window.innerWidth <= 1100
Vue.util.defineReactive(Vue.prototype, '$isMobile', isMobile()) Vue.util.defineReactive(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', () => { // window.addEventListener('resize', () => {
Vue.prototype.$isMobile = isMobile() // Vue.prototype.$isMobile = isMobile()
document.querySelector('html').style.fontSize = window.innerWidth / 100 + 'px' // document.querySelector('html').style.fontSize = window.innerWidth / 100 + 'px'
}) // })
new Vue({ new Vue({
store, store,
......
src/router/index.js
...@@ -7,6 +7,7 @@ import PricePage from '../views/price/pricePage.vue' ...@@ -7,6 +7,7 @@ import PricePage from '../views/price/pricePage.vue'
import demandPage from '../views/demand/demandPage.vue' import demandPage from '../views/demand/demandPage.vue'
import aboutPage from '../views/aboutus/aboutPage' import aboutPage from '../views/aboutus/aboutPage'
import helpPage from '../views/helpPage' import helpPage from '../views/helpPage'
import productionManagement from '../views/product/productionManagement.vue'
Vue.use(VueRouter) Vue.use(VueRouter)
...@@ -47,6 +48,11 @@ const routes = [ ...@@ -47,6 +48,11 @@ const routes = [
name: 'help', name: 'help',
component: helpPage, component: helpPage,
}, },
{
path: '/product/production',
name: 'production',
component: productionManagement,
}
], ],
}, },
{ {
......
src/views/home.vue
...@@ -49,22 +49,24 @@ export default { ...@@ -49,22 +49,24 @@ export default {
.jomalls-home-page { .jomalls-home-page {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
overflow: hidden; /* overflow: hidden; */
display: flex; /* display: flex; */
flex-direction: column; /* flex-direction: column; */
overflow-y: auto;
overflow-x: hidden;
} }
.home-main::-webkit-scrollbar { .jomalls-home-page::-webkit-scrollbar {
width: 6px; width: 6px;
} }
.home-main::-webkit-scrollbar-thumb { .jomalls-home-page::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(162, 161, 161, 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); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0; border-radius: 0;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
...@@ -74,6 +76,10 @@ export default { ...@@ -74,6 +76,10 @@ export default {
transition: all 0.3s; transition: all 0.3s;
border: 1px solid #eee; border: 1px solid #eee;
background: #fff; background: #fff;
height: 60px;
position: sticky;
top: 0;
z-index: 100;
} }
.jomalls-home-page.scrolling .header { .jomalls-home-page.scrolling .header {
...@@ -85,7 +91,7 @@ export default { ...@@ -85,7 +91,7 @@ export default {
.home-main { .home-main {
/* padding-top: 60px; */ /* padding-top: 60px; */
flex: 1; flex: 1;
overflow-y: auto; /* overflow-y: auto; */
/* background-color: #f5f5f5; */ /* background-color: #f5f5f5; */
} }
</style> </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