Skip to content

O
offical_web
Commit 90959994 by qinjianhui
Options

feat: 一件定制修改之前

parent e8226ee2
Showing with 571 additions and 59 deletions
package-lock.json
......@@ -6544,9 +6544,9 @@
"dev": true
},
"fastq": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
"integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
"version": "1.18.0",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
"integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
"requires": {
"reusify": "^1.0.4"
}
......
src/assets/css/common.css
......@@ -1054,4 +1054,9 @@ ul li {
.high-light {
--tw-text-opacity: 1;
color: rgba(37, 84, 254, var(--tw-text-opacity));
}
.bg-colorBg {
--tw-bg-opacity: 1;
background-color: rgba(248, 249, 255, var(--tw-bg-opacity));
}
\ No newline at end of file
src/assets/images/product/hd.svg 0 → 100644
<?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
src/assets/images/product/help.svg 0 → 100644
<?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
src/assets/images/product/join.svg 0 → 100644
<?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
src/assets/images/product/platform.svg 0 → 100644
<?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="1735112224989" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15492" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M0 0m512 0l0 0q512 0 512 512l0 0q0 512-512 512l0 0q-512 0-512-512l0 0q0-512 512-512Z" fill="#007BF6" p-id="15493"></path><path d="M512 0h4.2496A309.248 309.248 0 0 0 512 51.2v972.8C229.2224 1024 0 794.7776 0 512S229.2224 0 512 0z" fill="#339EFA" p-id="15494"></path><path d="M757.76 348.0576L523.264 258.048a31.8464 31.8464 0 0 0-22.4768 0l-234.496 90.0096A15.872 15.872 0 0 0 256 363.008v36.9664c0 8.8064 7.168 15.9744 15.9744 15.9744h480.1024c8.8064 0 16.0256-7.168 16.0256-15.9744V363.008a16.0768 16.0768 0 0 0-10.3424-14.9504zM320 448v160.0512h-15.9744a16.0256 16.0256 0 0 0-15.9744 15.9744v48.0768h448.1536v-48.0768a16.0256 16.0256 0 0 0-15.9744-15.9744h-16.0256V448h-64v160.0512h-96.1024V448h-64v160.0512H384V448H320zM752.128 704.0512H271.9232a16.0256 16.0256 0 0 0-15.9744 15.9744v32c0 8.8064 7.168 15.9744 15.9744 15.9744h480.1024c8.8064 0 16.0256-7.168 16.0256-15.9744v-32a15.9744 15.9744 0 0 0-16.0256-15.9744z" fill="#FFFFFF" p-id="15495"></path></svg>
\ No newline at end of file
src/assets/images/product/us.svg 0 → 100644
<?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
src/assets/images/product/zx.svg 0 → 100644
<?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
src/components/product-intro.vue
......@@ -41,7 +41,7 @@
class="home-module-item flex justify-center"
v-for="(item, index) in moduleItems"
:key="index">
<div class="content flex w-full-70 gap-100 fade-up-animation">
<div class="content flex w-full-70 gap-28 fade-up-animation">
<div class="img">
<img :src="item.img" />
</div>
......@@ -108,17 +108,17 @@
p-id="6693"></path>
</svg>
<p class="reason-card-title">全生态产品</p>
<p class="text-textPrimary font-normal mt-10 text-sm font-size-18">
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
贴合跨境卖家核心使用场景
</p>
<div class="mt-16 flex flex-col items-center">
<p class="text-textPrimary mb-10 font-light font-size-14">
<div class="mt-6 flex flex-col items-center">
<p class="text-textPrimary mb-2.5 font-light text-sm">
SaaS软件，无需下载即可使用
</p>
<p class="text-textPrimary mb-10 font-light font-size-14">
<p class="text-textPrimary mb-2.5 font-light text-sm">
对接支付、物流等系统，全链路闭环管理
</p>
<p class="text-textPrimary mb-10 font-light font-size-14">
<p class="text-textPrimary mb-2.5 font-light text-sm">
功能版块全，包含进销存、财务、广告等
</p>
</div>
......@@ -154,17 +154,17 @@
p-id="8658"></path>
</svg>
<p class="reason-card-title">全方位保障</p>
<p class="text-textPrimary font-normal mt-10 text-sm font-size-18">
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
深度开发能力与数据安全护航
</p>
<div class="mt-16 flex flex-col items-center">
<p class="text-textPrimary mb-10 font-light font-size-14">
<div class="mt-6 flex flex-col items-center">
<p class="text-textPrimary mb-2.5 font-light text-sm">
自研亿级任务调度引擎，运行快速
</p>
<p class="text-textPrimary mb-10 font-light font-size-14">
<p class="text-textPrimary mb-2.5 font-light text-sm">
定期检测漏洞，签署、严守保密协议
</p>
<p class="text-textPrimary mb-10 font-light font-size-14">
<p class="text-textPrimary mb-2.5 font-light text-sm">
亚马逊SPN服务商，国家高新技术企业认定
</p>
</div>
......@@ -199,17 +199,17 @@
p-id="16055"></path>
</svg>
<p class="reason-card-title">全周期服务</p>
<p class="text-textPrimary font-normal mt-10 text-sm font-size-18">
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
全程专业服务，满足卖家需求
</p>
<div class="mt-16 flex flex-col items-center">
<p class="text-textPrimary mb-10 font-light font-size-14">
<div class="mt-6 flex flex-col items-center">
<p class="text-textPrimary mb-2.5 font-light text-sm">
软件顾问、实施、售后全流程服务
</p>
<p class="text-textPrimary mb-10 font-light font-size-14">
<p class="text-textPrimary mb-2.5 font-light text-sm">
一体化专业服务，深度赋能客户
</p>
<p class="text-textPrimary mb-10 font-light font-size-14">
<p class="text-textPrimary mb-2.5 font-light text-sm">
为软件使用负责，持续交付新功能
</p>
</div>
......
src/components/productDesc.vue
......@@ -5,7 +5,7 @@
v-for="(item, index) in moduleItems"
:data-id="item.id"
:key="index">
<div class="content mx-auto flex w-full-70 gap-100 fade-up-animation gap-20">
<div class="content mx-auto flex w-full-70 gap-28 fade-up-animation gap-20">
<div class="img">
<img :src="item.img" />
</div>
......@@ -85,7 +85,7 @@ export default {
.home-module-item:nth-child(even) .content {
flex-direction: row-reverse;
}
.home-module-item:nth-child(odd) {
.home-module-item:nth-child(even) {
background-color: #f8f9ff;
}
......
src/components/productLogisticsDesc.vue 0 → 100644
<template>
<div class="product-logistics-desc py-16">
<div class="card flex gap-10 h-96 justify-between w-full-70 mx-auto">
<img :src="moduleItems.img" class="img" />
<div class="word">
<div
class="item-content flex gap-2"
v-for="(item, index) of moduleItems.contents"
:key="index">
<div class="icon">
<img
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTIuOTQxNCIgY3k9IjEyIiByPSIxMiIgZmlsbD0iIzBGMzdGRiIgZmlsbC1vcGFjaXR5PSIwLjIiLz4KPGNpcmNsZSBjeD0iMTIuOTQxNCIgY3k9IjEyIiByPSI0IiBmaWxsPSIjMEYzN0ZGIi8+Cjwvc3ZnPgo="
width="22"
alt="" />
</div>
<div class="content mb-5">
<h4 class="text-sm font-bold mb-2">{{ item.title }}</h4>
<p class="text-xs text-gray-400">
{{ item.subTitle }}
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'productLogisticsDesc',
props: {
moduleItems: Object,
},
}
</script>
<style lang="scss" scoped>
.product-logistics-desc:nth-child(even) .card {
flex-direction: row-reverse;
}
.product-logistics-desc:nth-child(even) {
background-color: #f8f9ff;
}
</style>
src/components/templateList.vue 0 → 100644
<template>
<el-skeleton style="width: 100%" :loading="loading" animated>
<template slot="template">
<el-skeleton-item variant="image" style="width: 90%; height: 200px" />
<div style="padding: 14px">
<el-skeleton-item variant="h3" style="width: 50%" />
<div
style="
display: flex;
align-items: center;
justify-items: space-between;
margin-top: 16px;
height: 16px;
">
<el-skeleton-item variant="text" style="margin-right: 16px" />
<el-skeleton-item variant="text" style="width: 30%" />
</div>
</div>
</template>
<template>
<el-card
class="product-item"
shadow="hover"
:body-style="{ padding: '0px', marginBottom: '1px' }">
<router-link :to="`product/${product.sku}`">
<el-image
fit="contain"
:src="product.img_url | imageFilter(220)"></el-image>
<div class="title">
<span>{{ product.title }}</span>
</div>
<div class="price">
￥{{ product.min_price }} - ￥{{ product.max_price }}
</div>
</router-link>
</el-card>
</template>
</el-skeleton>
</template>
<script>
export default {
name: 'templateList',
props: ['product', 'loading'],
}
</script>
<style scoped>
.product-item {
padding: 10px 5px;
cursor: pointer;
margin: 10px 5px;
text-align: center;
}
.product-item a {
color: #333;
text-decoration: none;
}
.product-item:hover a {
color: black;
text-decoration: underline;
}
.product-item .el-image {
max-width: 100%;
transition: all 0.3s;
}
.product-item:hover .el-image {
transform: scale(1.09);
}
.product-item .title {
padding: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
.product-item .price {
margin: 5px auto;
color: #333;
font-size: 14px;
font-weight: bold;
line-height: 14px;
letter-spacing: 0px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
src/router/index.js
......@@ -9,6 +9,10 @@ import aboutPage from '../views/aboutus/aboutPage'
import helpPage from '../views/helpPage'
import productionManagement from '../views/product/productionManagement.vue'
import ProductionCustom from '../views/product/productionCustom.vue'
import ProductionLogistics from '../views/product/productionLogistics.vue'
import ProductionPlatform from '../views/product/productPlatform.vue'
import CasePage from '../views/case/casePage.vue'
import FinancialPage from '../views/support/financialPage.vue'
Vue.use(VueRouter)
......@@ -55,10 +59,30 @@ const routes = [
component: productionManagement,
},
{
path:'/product/custom',
name:'custom',
component:ProductionCustom,
}
path: '/product/custom',
name: 'custom',
component: ProductionCustom,
},
{
path: '/product/logistics',
name: 'logistics',
component: ProductionLogistics,
},
{
path: '/product/platform',
name: 'platform',
component: ProductionPlatform,
},
{
path: '/case',
name: 'case',
component: CasePage,
},
{
path: '/financial',
name: 'financial',
component: FinancialPage,
},
],
},
{
......@@ -94,8 +118,7 @@ const routes = [
{
path: '/after-sales-agreement',
name: 'after-sales-agreement',
component: (resolve) =>
require(['../views/agreement'], resolve),
component: (resolve) => require(['../views/agreement'], resolve),
},
]
......
src/views/case/casePage.vue 0 → 100644
<template>
<div class="case-page bg-colorBg">
<div class="lx-module-case-banner text-center">
<h3 class="case-banner-title">倾听企业故事，探寻出海方案最优解</h3>
<span class="text-lg">链接九猫ERP，共创您的品牌出海新高度</span>
</div>
<div class="case-swiper">
<div class="w-full-70 mx-auto bg-white pt-10 px-10 rounded-xl">
<el-carousel
indicator-position="outside"
:autoplay="false"
height="380px"
:loop="false">
<el-carousel-item
v-for="(item, index) in swiperCaseList"
:key="index">
<div class="case-swiper-container h-full flex gap-10">
<div class="left-image flex-1">
<img :src="item.img" />
</div>
<div class="right-content flex flex-col gap-4 flex-1">
<div class="company-logo h-16">
<img :src="item.companyLogo" />
</div>
<div class="company-title text-4xl font-medium">
{{ item.title }}
</div>
<div class="company-sub-title text-sm text-gray-500">
{{ item.subTitle }}
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
<div class="cooperation-case py-20">
<div class="w-full-70 mx-auto">
<div class="cooperation-case-title">合作客户案例</div>
<div class="cooperation-case-list grid grid-cols-4 gap-10 mt-10">
<div
class="case-item-card bg-white"
v-for="(item, index) in caseList"
:key="index">
<div class="image">
<img :src="item.img" />
</div>
<div class="content p-6">
<div class="logo">
<img :src="item.companyLogo" />
</div>
<div class="company-title text-xl font-medium leading-8 mt-2">
{{ item.title }}
</div>
<div class="flex items-center gap-2 justify-between text-sm mt-2">
<span class="category-tag text-gray-500">{{ item.type }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bg">
<div class="footer-banner">
<div class="footer-title">与众多优秀企业共同选择，实现业绩高效增长</div>
<!---->
</div>
</div>
</div>
</template>
<script>
export default {
name: 'casePage',
data() {
return {
swiperCaseList: [
{
img: '',
companyLogo: '',
title: 'xxxx1',
subTitle: 'xxxx11',
},
{
img: '',
companyLogo: '',
title: 'xxxx2',
subTitle: 'xxxx22',
},
{
img: '',
companyLogo: '',
title: 'xxxx3',
subTitle: 'xxxx33',
},
{
img: '',
companyLogo: '',
title: 'xxxx5',
subTitle: 'xxxx55',
},
{
img: '',
companyLogo: '',
title: 'xxxx6',
subTitle: 'xxxx66',
},
],
caseList: [
{
img: '',
companyLogo: '',
title: 'xxxx1',
type: '3C类',
},
{
img: '',
companyLogo: '',
title: 'xxxx1',
type: '制造业',
},
{
img: '',
companyLogo: '',
title: 'xxxx1',
type: '办公类用品',
},
{
img: '',
companyLogo: '',
title: 'xxxx1',
type: '办公类用品11',
},
{
img: '',
companyLogo: '',
title: 'xxxx1',
type: '母婴类',
},
],
}
},
}
</script>
<style lang="scss" scoped>
.lx-module-case-banner {
background-image: url(https://static.distributetop.com/office-site-new/office-site-upload/img/case-banner-bg.12883c4.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
height: 344px;
width: 100%;
.case-banner-title {
color: #1a2035;
font-weight: 500;
font-size: 44px;
line-height: 1;
line-height: 64px;
font-style: normal;
}
span {
color: #3a4057;
font-weight: 400;
font-size: 18px;
line-height: 1;
line-height: 28px;
margin-top: 8px;
text-align: center;
font-style: normal;
}
}
.left-image {
border: 1px solid #e5e5e5;
}
.cooperation-case-title {
font-weight: 500;
font-size: 36px;
line-height: 1;
line-height: 54px;
font-style: normal;
width: 1280px;
color: #1a2035;
}
.case-item-card {
.image {
height: 160px;
width: 100%;
overflow: hidden;
border: 1px solid #e5e5e5;
}
.logo {
width: 120px;
height: 48px;
border: 1px solid #e5e5e5;
}
.category-tag {
border-radius: 4px;
font-style: normal;
background: #e6e8ef;
padding: 4px 12px;
color: #3a4057;
}
}
.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) {
.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>
src/views/homePage/index.vue
......@@ -16,8 +16,12 @@
</el-carousel> -->
<div class="banner-container gap-20">
<div class="left-content">
<h3 class="left-content-title font-bold">在以亚马逊为主的跨境电商ERP中</h3>
<h2 class="left-content-title-high-light font-bold">九猫ERP市占率第一</h2>
<h3 class="left-content-title font-bold">
在以亚马逊为主的跨境电商ERP中
</h3>
<h2 class="left-content-title-high-light font-bold">
九猫ERP市占率第一
</h2>
<p class="left-content-description">
<span class="high-light">60万+</span>
<span>跨境卖家的一致选择，支持</span>
......@@ -39,7 +43,7 @@
<product-intro />
<div class="docking-platform flex justify-center">
<div>
<div class="flex justify-center flex-col items-center">
<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>
......@@ -240,4 +244,23 @@ export default {
.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/product/productionManagement.vue
......@@ -732,37 +732,49 @@ export default {
}
},
mounted() {
this._productModulesItems = Array.from(
this.$el.querySelectorAll('.home-module-item')
)
this.scrollParent().addEventListener('scroll', this.onScroll)
this._intersectionObserver = new IntersectionObserver(
(entries) => {
entries.forEach(({ target: el, isIntersecting, intersectionRatio }) => {
const id = el.dataset.id
console.log(id, isIntersecting, intersectionRatio)
if (!id) return
// const productNavIntersections = {}
// 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 (!isIntersecting) {
// delete productNavIntersections[id]
// return
// }
// productNavIntersections[id] = intersectionRatio
if (
!this._productNavIntersection ||
intersectionRatio > this._productNavIntersection.intersectionRatio
) {
this._productNavIntersection = { id, intersectionRatio }
// this.activeProductNavId = id
}
})
this.activeProductNavId = this._productNavIntersection?.id
},
{ rootMargin: '0px 0px -50% 0px' }
)
const elements = Array.from(this.$el.querySelectorAll('.home-module-item'))
elements.forEach((el) => {
this._intersectionObserver.observe(el)
})
// // if (
// // !this._productNavIntersection ||
// // intersectionRatio > this._productNavIntersection.intersectionRatio
// // ) {
// // this._productNavIntersection = { id, intersectionRatio }
// // // this.activeProductNavId = id
// // }
// })
// console.log(
// Object.keys(productNavIntersections)
// .sort(
// (a, b) => productNavIntersections[b] - productNavIntersections[a]
// )
// .map((key) => `${key}: ${productNavIntersections[key]}`)
// .join('\n')
// )
// this.activeProductNavId = Object.keys(productNavIntersections).sort(
// (a, b) => productNavIntersections[b] - productNavIntersections[a]
// )[0]
// },
// { rootMargin: '0px 0px -50% 0px', threshold: [0, 0.5, 1] }
// )
// const elements = Array.from(this.$el.querySelectorAll('.home-module-item'))
// elements.forEach((el) => {
// this._intersectionObserver.observe(el)
// })
},
beforeDestroy() {
this._intersectionObserver.disconnect()
......@@ -776,6 +788,22 @@ export default {
const scrollTotal = navContent.parentElement.offsetTop
const width = 70 + 30 * (top / scrollTotal)
navContent.style.width = `${width}vw`
const intersectionHeight = window.innerHeight * 0.5
this.activeProductNavId = this._productModulesItems
.map((el) => {
const id = el.dataset.id
if (!id) return
const { top, bottom } = el.getBoundingClientRect()
const ratio =
Math.max(
0,
Math.min(intersectionHeight, bottom) - Math.max(0, top)
) / intersectionHeight
return { id, ratio }
})
.filter(({ ratio }) => ratio > 0)
.sort((a, b) => b.ratio - a.ratio)[0]?.id
},
handleNavClick(item, child = item.children[0]) {
if (!child) return
......
tailwind.config.js
......@@ -2,7 +2,40 @@
module.exports = {
purge: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
extend: {
width: {
120: '30rem',
128: '32rem',
144: '36rem',
160: '40rem',
192: '48rem',
224: '56rem',
256: '64rem',
288: '72rem',
320: '80rem',
384: '96rem',
512: '128rem',
576: '144rem',
640: '160rem',
},
textSize: {
46: '46px',
48: '48px',
50: '50px',
52: '52px',
54: '54px',
56: '56px',
58: '58px',
60: '60px',
62: '62px',
64: '64px',
66: '66px',
68: '68px',
},
marginTop: {
30:'120px'
},
},
},
plugins: [],
}
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