feat: 一件定制页面

package.json

@@ -11,6 +11,7 @@
     "@antv/g2": "~4.1.6",
     "@sentry/tracing": "~6.1.0",
     "@sentry/vue": "~6.1.0",
+    "autoprefixer": "^9.8.8",
     "axios": "~0.19.2",
     "core-js": "^3.6.5",
     "echarts": "~5.0.2",
@@ -22,7 +23,9 @@
     "lodash": "~4.17.20",
     "moment": "~2.24.0",
     "object-assign": "~4.1.1",
+    "postcss": "^7.0.39",
     "pure-color": "~1.3.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
     "v-ctrl": "~1.1.0",
     "v-emoji-picker": "~2.3.0",
     "vue": "~2.6.11",

postcss.config.js

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/assets/images/product/design.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734750538790" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5521" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M962.048 196.593371l-141.897143-141.750857c-28.672-29.257143-75.776-29.257143-104.886857 0l-144.384 144.384 246.784 247.222857 144.384-144.822857c29.110857-29.257143 29.110857-75.776 0-105.033143z" fill="#AEC9FF" p-id="5522"></path><path d="M137.186743 632.802743l56.32-56.32 246.784 247.369143-55.734857 55.734857c-15.36 15.36-33.792 26.185143-54.272 32.768l-223.232 61.001143c-9.801143 3.072-20.48 3.072-30.281143 0-26.624-8.777143-41.398857-36.864-33.206857-63.488l60.854857-223.232c6.729143-20.041143 17.993143-38.912 32.768-53.833143z m175.689143-561.590857l647.168 646.582857a80.954514 80.954514 0 0 1 0 114.688l-134.144 134.144-0.585143 0.585143a81.495771 81.495771 0 0 1-114.688-0.585143l-68.608-68.608 117.76-116.736a40.3456 40.3456 0 0 0 0-57.344 40.608914 40.608914 0 0 0-57.344 0l-117.174857 117.321143-57.344-57.344 0.438857-0.585143 69.632-69.046857a40.3456 40.3456 0 0 0 0-57.344 40.360229 40.360229 0 0 0-57.344 0l-69.046857 69.632-0.585143 0.438857-57.782857-58.368 118.784-116.736a40.608914 40.608914 0 0 0 0-57.344 40.608914 40.608914 0 0 0-57.344 0l-117.321143 117.76-57.344-57.344 69.632-70.070857a40.3456 40.3456 0 0 0 0-57.344l-0.438857-0.585143a39.950629 39.950629 0 0 0-56.905143 0.585143l-70.070857 70.070857-57.344-57.344 117.76-117.174857a40.608914 40.608914 0 0 0 0-57.344 40.3456 40.3456 0 0 0-57.344 0l-117.76 118.198857-63.488-63.926857a80.969143 80.969143 0 0 1 0-114.688l133.558857-133.705143 0.585143-0.438857c31.744-31.744 83.382857-31.744 114.688 0z" fill="#1870FD" p-id="5523"></path></svg>
\ No newline at end of file

src/assets/images/product/fh.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734750809525" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19050" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M132.824 492.655l131.252-57.685 95.548-137.296h131.928v244.595h403.624v109.403H132.824z" fill="#03A7FE" p-id="19051"></path><path d="M895.883 652.379H132.117V492.193l0.422-0.186 131.069-57.604 95.646-137.436h133.004v244.594h403.624v110.818z m-762.352-1.414h760.938V542.976H490.845V298.381H359.994l-95.451 137.156-131.011 57.579v157.849z" fill="#FFFFFF" p-id="19052"></path><path d="M234.817 655.796a67.851 67.06 0 1 0 135.702 0 67.851 67.06 0 1 0-135.702 0Z" fill="#03A7FE" p-id="19053"></path><path d="M302.668 727.032c-39.717 0-72.029-31.956-72.029-71.236s32.312-71.236 72.029-71.236 72.029 31.956 72.029 71.236-32.312 71.236-72.029 71.236z m0-134.119c-35.11 0-63.674 28.209-63.674 62.883s28.564 62.883 63.674 62.883 63.674-28.209 63.674-62.883-28.563-62.883-63.674-62.883z" fill="#FFFFFF" p-id="19054"></path><path d="M614.743 655.796a68.682 67.06 0 1 0 137.364 0 68.682 67.06 0 1 0-137.364 0Z" fill="#03A7FE" p-id="19055"></path><path d="M683.425 727.032c-40.175 0-72.858-31.956-72.858-71.236s32.684-71.236 72.858-71.236 72.858 31.956 72.858 71.236-32.683 71.236-72.858 71.236z m0-134.119c-35.568 0-64.505 28.209-64.505 62.883s28.937 62.883 64.505 62.883 64.505-28.209 64.505-62.883-28.937-62.883-64.505-62.883z" fill="#FFFFFF" p-id="19056"></path><path d="M388.511 341.698h59.22v102.986H324.38c-8.762 0-13.992-11.964-9.139-20.906l28.639-52.768c9.938-18.31 26.69-29.312 44.631-29.312z" fill="#FFFFFF" p-id="19057"></path><path d="M448.461 445.415H324.38c-3.812 0-7.267-2.132-9.478-5.848-2.878-4.838-2.997-11.171-0.303-16.137l28.639-52.768c10.092-18.593 27.016-29.694 45.273-29.694h59.95v104.447z m-59.95-102.987c-17.712 0-34.157 10.815-43.989 28.931l-28.639 52.768c-2.454 4.521-2.347 10.289 0.274 14.692 1.941 3.263 4.938 5.134 8.223 5.134H447V342.428h-58.489z" fill="#03A7FE" p-id="19058"></path><path d="M668.552 371.951h143.926v176.416H668.552zM579.368 442.766h86.152v105.601h-86.152z" fill="#03A7FE" p-id="19059"></path></svg>
\ No newline at end of file

src/assets/images/product/kd.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734750652048" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7610" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M85.333333 490.666667a405.333333 405.333333 0 1 1 810.666667 0 405.333333 405.333333 0 0 1-810.666667 0z" fill="#2171FE" p-id="7611"></path><path d="M794.325333 840.618667c-8.661333 16.298667-23.552 26.837333-39.68 30.378666-2.432 0-6.144 1.152-9.898666 1.152-27.221333 0-43.349333-19.84-43.349334-49.024 0-37.376 23.552-54.869333 53.248-63.061333 16.128-3.498667 34.730667-4.693333 53.333334-4.693333v14.08c0 26.837333 1.194667 47.786667-13.653334 71.168z m13.653334-138.88c-16.128 1.152-34.730667 2.304-53.333334 4.608-28.458667 3.584-56.96 8.192-80.469333 18.730666-45.824 17.493333-76.842667 54.869333-76.842667 109.653334C597.333333 903.68 644.437333 938.666667 703.957333 938.666667c19.754667 0 35.882667-2.346667 50.688-5.802667 23.637333-7.04 43.392-19.882667 66.901334-43.221333 13.653333 17.493333 17.408 25.685333 40.917333 44.373333 6.186667 2.304 12.416 2.304 17.322667-1.152 18.432-14.506667 36.608-29.312 54.528-44.373333 6.229333-4.693333 4.992-11.733333 1.237333-17.493334-13.653333-16.384-27.306667-30.378667-27.306667-61.866666V704c0-44.373333 3.797333-85.205333-30.890666-115.541333-28.501333-24.448-73.130667-33.834667-107.818667-33.834667h-14.890667c-63.146667 3.413333-130.005333 29.141333-144.938666 102.698667-2.474667 9.386667 4.992 12.8 9.941333 13.994666l69.376 8.192c7.424-1.194667 11.178667-7.04 12.373333-12.8 6.186667-25.728 28.501333-38.570667 53.248-40.917333h4.992c14.933333 0 30.976 5.845333 39.68 17.493333 9.856 14.037333 8.661333 32.725333 8.661334 49.066667v9.386667-0.042667z" fill="#74E7C4" p-id="7612"></path><path d="M769.536 554.666667c34.688 0 79.317333 9.386667 107.818667 33.834666 1.92 1.706667 3.754667 3.413333 5.461333 5.162667a404.565333 404.565333 0 0 1-85.333333 161.877333c-15.018667 0.384-29.738667 1.706667-42.837334 4.522667-29.696 8.192-53.248 25.685333-53.248 63.061333 0 4.608 0.426667 9.002667 1.194667 13.098667a402.346667 402.346667 0 0 1-97.152 43.306667 117.76 117.76 0 0 1-8.106667-44.8c0-54.784 31.018667-92.16 76.8-109.653334 23.552-10.538667 52.053333-15.146667 80.512-18.730666 18.602667-2.304 37.205333-3.456 53.333334-4.608v-9.301334c0-16.384 1.194667-35.072-8.661334-49.066666-8.704-11.690667-24.746667-17.493333-39.68-17.493334h-4.992c-24.746667 2.304-47.061333 15.146667-53.248 40.874667l-0.853333 2.858667a14.506667 14.506667 0 0 1-11.52 9.941333l-69.376-8.192c-4.949333-1.152-12.373333-4.608-9.941333-13.994667 14.933333-73.557333 81.792-99.242667 144.938666-102.698666z" fill="#00ACFF" p-id="7613"></path><path d="M682.24 243.328c3.626667-20.650667-17.962667-36.522667-36.949333-27.306667l-462.933334 227.072a21.333333 21.333333 0 0 0-2.730666 36.352l101.589333 73.045334c10.026667 4.864 19.968 4.864 29.994667-4.864L576 311.765333l10.026667 4.864-239.786667 250.581334c-5.034667 4.864-5.034667 9.813333-5.034667 14.72v108.074666c0 9.856 4.992 19.712 14.933334 24.576 10.026667 4.906667 19.968 0 25.002666-4.864l59.946667-59.008 125.738667 72.533334c9.344 5.376 21.248 0 23.296-10.496l92.16-469.418667z" fill="#FFFFFF" p-id="7614"></path></svg>
\ No newline at end of file

src/assets/images/product/sc.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734750749287" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12926" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M847.872 859.648c-4.096 0-7.68-1.536-10.752-4.096l-225.792-179.2c-14.848 6.144-27.648 10.752-41.984 10.752-84.48 8.704-162.816-52.736-171.008-137.216-2.048-18.944 0-37.888 4.096-54.784 2.048-6.144 6.656-10.752 12.8-12.8 5.632-1.536 11.776-1.024 16.896 2.048l92.672 75.776 48.64-59.392L480.256 424.96c-4.096-4.608-6.656-10.752-6.144-16.896 0-6.144 4.096-10.752 10.752-14.848 16.896-8.192 35.84-14.848 52.736-16.896 84.48-8.192 162.816 52.736 171.008 137.216 2.048 14.848 2.048 29.696-2.048 44.544l225.792 179.712c4.096 2.048 6.144 8.192 6.144 12.8 0 4.096 0 10.752-4.096 12.8l-69.632 88.576c-6.656 5.632-10.752 7.68-16.896 7.68z" fill="#1890FF" opacity=".5" p-id="12927"></path><path d="M613.376 973.824H425.472c-8.192 0-16.896-6.144-18.944-16.896L397.824 870.4c-8.704-2.56-17.408-6.144-25.6-10.752l-67.584 54.784c-6.144 6.144-16.896 6.144-25.6-2.048L140.288 773.12c-6.144-6.144-6.144-16.896 0-25.6l56.832-67.584c-4.096-8.704-6.144-16.896-10.752-25.6l-86.528-8.704c-8.704 0-16.896-8.192-16.896-18.944V431.104c0-8.704 6.144-16.896 16.896-18.944l86.528-8.192c2.048-8.704 6.144-16.896 10.752-25.6L142.336 310.784c-6.144-6.144-6.144-16.896 2.048-25.088l139.264-139.264c6.144-6.144 16.896-6.144 25.6 0l67.584 56.832c8.192-4.096 16.896-6.144 25.6-10.752l8.192-86.528c0-8.192 8.192-16.896 18.944-16.896h196.608c8.192 0 16.896 6.144 18.944 16.896l8.192 86.528c8.704 2.048 16.896 6.144 25.6 10.752L746.496 148.48c8.704-6.144 18.944-6.144 25.6 2.048l152.064 173.056c4.608 4.096 6.144 10.752 4.096 16.896-2.048 6.144-6.656 10.752-12.8 12.8-124.416 35.84-158.208 46.592-168.96 48.64-12.8 4.096-20.992-4.096-50.688-33.792l-10.752-10.752c-82.432-63.488-208.896-63.488-297.472 2.048-50.688 35.84-78.336 95.232-78.336 166.912C307.2 655.36 404.48 752.64 524.8 752.64h6.144c6.144 0 14.848 4.096 16.896 10.752l82.432 185.856c2.048 6.144 2.048 12.8-2.048 16.896-2.048 5.632-8.704 7.68-14.848 7.68z" fill="#1890FF" p-id="12928"></path></svg>
\ No newline at end of file

src/components/head.vue

@@ -251,6 +251,16 @@ export default {
   align-items: center;
   height: 100%;
 }
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  height: 100%;
+  img {
+    height: 40px;
+  }
+}
 @media screen and (max-width: 1500px) {
   .navbar_item_wrap {
     gap: 40px !important;

src/components/headerNavMobile.vue

@@ -106,6 +106,7 @@ export default {
 .header-nav-mobile_logo img {
   width: 100%;
   object-fit: contain;
+  height: 100%;
 }
 
 .header-nav-mobile_login {

src/components/product-intro.vue

@@ -5,7 +5,8 @@
         <h3 class="text-textContent lx-title mb-8" style="text-align: center">
           核心功能
         </h3>
-        <div class="text-sm font-light text-textContent text-center">
+        <div
+          class="max-w-840px text-sm px-15px lg:text-lg lg:px-0 font-light text-textContent text-center">
           打通跨境电商业务全流程，闭环管理业务，实现业绩增长
         </div>
       </div>
@@ -245,9 +246,7 @@ export default {
         {
           icon: 'icon-dingdanguanli35',
           title: '订单管理',
-          texts: [
-            { text: '订单批量审核，异常状态标识归纳，超时自动拆单发货' },
-        ]
+          texts: [{ text: '订单批量审核，异常状态标识归纳，超时自动拆单发货' }],
         },
         {
           icon: 'icon-cangku_cangchuguanli_o',
@@ -656,7 +655,25 @@ export default {
 .reason-list {
   margin-top: 80px;
 }
-
+.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;
+  }
+}
 @media screen and (max-width: 1100px) {
   .function_bg {
     width: 90vw;

src/components/productDesc.vue

 <template>
   <div class="home-module">
     <div
-      class="home-module-item flex justify-center"
+      class="home-module-item flex"
       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="content mx-auto flex w-full-70 gap-100 fade-up-animation gap-20">
         <div class="img">
           <img :src="item.img" />
         </div>

src/router/index.js

@@ -8,6 +8,7 @@ import demandPage from '../views/demand/demandPage.vue'
 import aboutPage from '../views/aboutus/aboutPage'
 import helpPage from '../views/helpPage'
 import productionManagement from '../views/product/productionManagement.vue'
+import ProductionCustom from '../views/product/productionCustom.vue'
 
 Vue.use(VueRouter)
 
@@ -52,6 +53,11 @@ const routes = [
         path: '/product/production',
         name: 'production',
         component: productionManagement,
+      },
+      {
+        path:'/product/custom',
+        name:'custom',
+        component:ProductionCustom,
       }
     ],
   },

src/styles/index.scss

 :root {
   --primary-color:#f19240;
-}
\ No newline at end of file
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/views/homePage/index.vue

@@ -14,10 +14,10 @@
             style="width: 100vw; height: 100%; object-fit: cover" />
         </el-carousel-item>
       </el-carousel> -->
-      <div class="banner-container">
+      <div class="banner-container gap-20">
         <div class="left-content">
-          <h3 class="left-content-title">在以亚马逊为主的跨境电商ERP中</h3>
-          <h2 class="left-content-title-high-light">九猫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>

src/views/product/productionCustom.vue

+<template>
+  <div class="production-custom">
+    <div class="banner-container">
+      <div class="content-container flex items-center gap-20">
+        <div class="left-content">
+          <h3 class="banner-title font-semibold text-4xl">
+            按需打印供应链平台 0基础创业
+          </h3>
+          <div
+            class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
+            <span>定制选品 / 高效生产 / 一件代发 / 无忧售后</span>
+          </div>
+          <div>
+            <span class="high-light font-bold">1,512</span>
+            款产品可定制，累计已设计
+            <span class="high-light font-bold">752,062,105</span>
+            次
+          </div>
+        </div>
+
+        <div class="right-image">
+          <video
+            width="100%"
+            class="video"
+            src="../../assets/video/custom-video.mp4"
+            autoplay
+            loop
+            muted></video>
+        </div>
+      </div>
+    </div>
+    <div class="product-custom-cont bg-colorBg py-28">
+      <div class="w-full-70 mx-auto">
+        <div class="cont-title">
+          <div class="flex justify-center flex-col items-center gap-2">
+            <h3 class="font-medium text-3xl" style="text-align: center">
+              按需打印商品销售全球
+            </h3>
+            <div
+              class="text-xs px-8 lg:text-lg lg:px-0 font-light text-textContent mt-[6px] mb-8">
+              0成本 · 0库存
+            </div>
+          </div>
+        </div>
+        <div class="cont-content">
+          <div class="cont-content-left flex items-center gap-20">
+            <div class="left-container flex items-center gap-10">
+              <div>
+                <div class="btn-title">您负责</div>
+                <div class="flex flex-col gap-5">
+                  <div class="flex gap-4">
+                    <div class="icon">
+                      <img
+                        src="../../assets/images/product/design.svg"
+                        width="30" />
+                    </div>
+                    <div class="text flex flex-col gap-2">
+                      <div class="text-lg font-bold">选品&设计</div>
+                      <div class="text-sm text-gray-500">
+                        海量产品批量设计，免费生成高清商品效果图
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex gap-2">
+                    <div class="icon">
+                      <img
+                        src="../../assets/images/product/kd.svg"
+                        width="30" />
+                    </div>
+                    <div class="text">
+                      <div class="text-lg font-bold">刊登&销售</div>
+                      <div class="text-sm text-gray-500">
+                        批量汇出，主流电商一键刊登，便捷销售
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <img src="../../assets/images/product/01.png" />
+              </div>
+            </div>
+            <div class="right-container flex items-center gap-10">
+              <div>
+                <div class="btn-title">JMDIY负责</div>
+                <div class="flex flex-col gap-5">
+                  <div class="flex gap-2">
+                    <div class="icon">
+                      <img
+                        src="../../assets/images/product/sc.svg"
+                        width="30" />
+                    </div>
+                    <div class="text">
+                      <div class="text-lg font-bold">生产</div>
+                      <div class="text-sm text-gray-500">
+                        一件起订，极速生产，一件享批发价
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex gap-2">
+                    <div class="icon">
+                      <img
+                        src="../../assets/images/product/fh.svg"
+                        width="30" />
+                    </div>
+                    <div class="text">
+                      <div class="text-lg font-bold">发货</div>
+                      <div class="text-sm text-gray-500">
+                        高效稳定物流，一件代发，全球交付
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <img src="../../assets/images/product/02.png" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.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;
+  }
+}
+</style>

tailwind.config.js

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  purge: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}