首页第二版

src/views/home/index.vue

@@ -1,43 +1,70 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import getAssetsFile from '@/util/pubUse'
+import { ref } from "vue";
+import getAssetsFile from "@/util/pubUse";
 let steps = ref([
   {
-    name: '步骤一',
-    tip: '注册平台账号'
+    name: "步骤一",
+    tip: "注册平台账号",
   },
   {
-    name: '步骤二',
-    tip: '填写资料'
+    name: "步骤二",
+    tip: "填写资料",
   },
   {
-    name: '步骤三',
-    tip: '商务签合'
+    name: "步骤三",
+    tip: "商务签合",
   },
   {
-    name: '步骤四',
-    tip: '接入'
+    name: "步骤四",
+    tip: "接入",
   },
-])
-let partners = ref([])
+]);
+let partners = ref([]);
 let banners = ref([
   {
-    imgUrl: `background: url(../../assets/images/8-0.png) no-repeat`,
-    con: '优巨引擎开放平台',
-    con1: '与伙伴一起共同成长',
-    con2: '猎豹AI提供丰富的开放能力和成熟的合作机制，助力合作伙伴在猎豹AI平台上构建本地数字化AI配送平台，焦距全网生态链。'
+    imgUrl: `8-0.png`,
+    con: "优巨引擎开放平台",
+    con1: "与伙伴一起共同成长",
+    con2: "猎豹AI提供丰富的开放能力和成熟的合作机制，助力合作伙伴在猎豹AI平台上构建本地数字化AI配送平台，焦距全网生态链。",
+  },
+  {
+    imgUrl: `8-1.png`,
+    con: "优巨引擎开放平台",
+    con1: "与伙伴一起共同成长",
+    con2: "猎豹AI提供丰富的开放能力和成熟的合作机制，助力合作伙伴在猎豹AI平台上构建本地数字化AI配送平台，焦距全网生态链。",
+  },
+  {
+    imgUrl: `8-2.png`,
+    con: "优巨引擎开放平台",
+    con1: "与伙伴一起共同成长",
+    con2: "猎豹AI提供丰富的开放能力和成熟的合作机制，助力合作伙伴在猎豹AI平台上构建本地数字化AI配送平台，焦距全网生态链。",
+  },
+]);
+let advantageList = ref([
+  {
+    img: '12-1.png',
+    name: '高效对接',
+    tip: '高效对接 鼎力配合'
+  },
+  {
+    img: '12-2.png',
+    name: '全网运力',
+    tip: '商户可以选择多平台运力'
   },
   {
-    imgUrl: `background: url(../../assets/images/8-1.png) no-repeat`,
-    con: '优巨引擎开放平台1',
-    con1: '与伙伴一起共同成长1',
-    con2: '猎豹AI提供丰富的开放能力和成熟的合作机制，助力合作伙伴在猎豹AI平台上构建本地数字化AI配送平台，焦距全网生态链。'
+    img: '12-3.png',
+    name: '全渠道履约',
+    tip: '全渠道履约，为商户提供全方面保障'
   },
   {
-    imgUrl: `background: url(../../assets/images/8-2.png) no-repeat`,
-    con: '优巨引擎开放平台2',
-    con1: '与伙伴一起共同成长2',
-    con2: '猎豹AI提供丰富的开放能力和成熟的合作机制，助力合作伙伴在猎豹AI平台上构建本地数字化AI配送平台，焦距全网生态链。'
+    img: '12-4.png',
+    name: '配送效率高',
+    tip: '自动接单、自动打印、自动配送'
+  },
+  {
+    img: '12-5.png',
+    name: '数字化赋能',
+    tip: '推动上下游产业的数字化进程'
   },
 ])
 </script>
@@ -45,186 +72,75 @@ let banners = ref([
 <template>
   <div class="content">
     <a-carousel autoplay effect="fade">
-      <div class="top-con" :style="v.imgUrl"
-        v-for="(v, i) in banners" :key="i">
-        <div class="con">{{ v.con }}</div>
-        <div class="con1">{{ v.con1 }}</div>
-        <div class="con2">{{ v.con2 }}</div>
+      <div v-for="(v, i) in banners" :key="i">
+        <div class="bg-center h-610px pt-150px pl-220px text-white" :style="`background: url(${getAssetsFile(v.imgUrl)}) no-repeat`">
+          <div class="text-60px font-bold">{{ v.con }}</div>
+          <div class="text-60px font-bold my-20px">{{ v.con1 }}</div>
+          <div class="w-600px text-16px font-500 leading-23px">{{ v.con2 }}</div>
+        </div>
       </div>
     </a-carousel>
 
     <!-- 接入流程 -->
-    <!-- <div class="access-process">
-      <div class="title">
-        <div class="title-en">ACCESS PROCESS</div>
-        <div class="title-ch">接入流程</div>
-        <div class="line"></div>
+    <div class="pt-70px h-604px access-process">
+      <div class="flex flex-col justify-center">
+        <div class="flex justify-center items-center">
+          <img class="w-93px h-21px" src="@/assets/images/10 (1).png" alt="" srcset="">
+          <div class="mx-30px text-32px leading-38px text-dark-400 font-bold">接入流程</div>
+          <img class="w-93px h-21px" src="@/assets/images/10 (2).png" alt="" srcset="">
+        </div>
+        <div class="text-16px leading-19px text-gray-600 text-center font-500 uppercase mt-10px">access process</div>
       </div>
-      <div class="steps">
-        <div class="step" :class="i % 2 === 0 ? 'step1' : ''"
-          :style="`background: url(${getAssetsFile(`4-${i + 1}.png`)}) no-repeat`" v-for="(v, i) in steps" :key="i">
-          <div class="name">{{ v.name }}</div>
-          <div class="tip">{{ v.tip }}</div>
+      <div class="flex justify-center items-center mt-50px">
+        <div class="flex items-center" v-for="(v, i) in steps" :key="i">
+          <div class="flex flex-col items-center w-200px h-207px !bg-cover" :style="`background: url(${getAssetsFile(`11-2.png`)}) no-repeat`">
+            <div class="text-20px text-white mt-25px">{{i+1}}</div>
+            <div class="text-16px font-500 text-dark-100 mt-90px">{{v.tip}}</div>
+          </div>
+          <img v-if="i !== steps.length-1" class="mx-50px w-50px h-47px" src="@/assets/images/11 (1).png" alt="" srcset="">
         </div>
       </div>
-      <div class="register">立即注册</div>
-      <img class="box" src="@/assets/images/5.png" alt="" srcset="">
-    </div> -->
+      <div class="mt-50px mx-auto w-200px h60px rounded-4px leading-60px text-center text-18px text-white font-500 cursor-pointer register">立即注册</div>
+    </div>
+    <!-- 优势 -->
+    <div class="flex justify-evenly items-center advantage">
+      <div class="flex flex-col items-center text-white" v-for="(v,i) in advantageList" :key="i">
+        <img class="w-60px h-60px" :src="getAssetsFile(v.img)" alt="">
+        <div class="text-18px font-500 my-10px">{{v.name}}</div>
+        <div class="text-14px font-400">{{v.tip}}</div>
+
+      </div>
+    </div>
     <!-- 合作伙伴 -->
-    <!-- <div class="cooperative-partner">
-      <div class="title">
-        <div class="title-en">COOPERATIVE PARTNER</div>
-        <div class="title-ch">合作伙伴</div>
-        <div class="line"></div>
+    <div class="pt-70px">
+      <div class="flex flex-col justify-center">
+        <div class="flex justify-center items-center">
+          <img class="w-93px h-21px" src="@/assets/images/10 (1).png" alt="" srcset="">
+          <div class="mx-30px text-32px leading-38px text-dark-400 font-bold">合作伙伴</div>
+          <img class="w-93px h-21px" src="@/assets/images/10 (2).png" alt="" srcset="">
+        </div>
+        <div class="text-16px leading-19px text-gray-600 text-center font-500 uppercase mt-10px">cooperative partner</div>
       </div>
-      <div class="partners">
-        <img class="partner" :src="getAssetsFile(`7-${i + 1}.png`)" alt="" v-for="(v, i) in 15" :key="i">
+      <div class="flex justify-center flex-wrap mt-22px mb-70px ">
+        <img class="w-248px h-88px mx-35px mb-40px" :src="getAssetsFile(`9 (${i + 1}).png`)" alt="" v-for="(v, i) in 15" :key="i">
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped >
 .content {
 
-  .top-con {
-    // background: url(@/assets/images/8-2.png) no-repeat;
-    background-position-x: center;
-    height: 610px;
-    padding: 110px 0 0 220px;
-    color: #ffffff;
-
-    .con {
-      font-size: 30px;
-      font-weight: bold;
-    }
-
-    .con1 {
-      font-size: 60px;
-      font-weight: bold;
-    }
-
-    .con2 {
-      width: 600px;
-      font-size: 16px;
-      font-weight: 500;
-      line-height: 23px;
-    }
-  }
-
-  .access-process,
-  .cooperative-partner {
-    position: relative;
-    width: 100%;
-    margin-top: -150px;
-
-    .box {
-      position: absolute;
-      top: 0;
-      right: 127px;
-    }
-
-    .title {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      .title-en {
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: 50px;
-        font-weight: 500;
-        color: rgba(255, 255, 255, 0.2);
-        line-height: 59px;
-      }
-
-      .title-ch {
-        margin: 26px 0 10px;
-        font-size: 34px;
-        font-weight: bold;
-        color: #FFFFFF;
-        line-height: 40px;
-      }
-
-      .line {
-        width: 80px;
-        height: 8px;
-        background: #2A4FAC;
-        border-radius: 0px 0px 0px 0px;
-      }
-    }
-
-    .steps {
-      display: flex;
-      justify-content: space-evenly;
-      color: #ffffff;
-      margin-top: 25px;
-      padding: 0 100px;
-
-      .step {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-end;
-        width: 200px;
-        height: 200px;
-        background-size: 200px !important;
-        cursor: pointer;
-
-        .name {
-          font-size: 18px;
-          font-weight: bold;
-          line-height: 23px;
-        }
-
-        .tip {
-          font-size: 14px;
-          font-weight: 400;
-          color: rgba(255, 255, 255, 0.6);
-          line-height: 19px;
-          margin-bottom: 30px;
-        }
-      }
-
-      .step1 {
-        margin-top: 120px;
-      }
-
-    }
-
-    .partners {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      padding: 0 100px 100px;
-
-      .partner {
-        // background-size: 100% 100%;
-        width: 380px;
-        height: 90px;
-        margin-top: 60px;
-      }
-    }
-
+  .access-process {
+    background: #e5eef6;
     .register {
-      width: 200px;
-      height: 60px;
-      background: linear-gradient(253deg, #84D3FF 0%, #2A4FAC 35%, #0F1E6C 100%);
-      border-radius: 10px 10px 10px 10px;
-      font-size: 18px;
-      font-weight: 500;
-      color: #FFFFFF;
-      line-height: 60px;
-      text-align: center;
-      margin: 40px auto 0;
-      cursor: pointer;
+      background: linear-gradient(141deg, #50A7FF 0%, #1B8DFF 100%);
     }
   }
-
-  .cooperative-partner {
-    margin-top: 73px;
+  .advantage {
+    height: 240px;
+    background: url(@/assets/images/13.png) no-repeat;
+    background-position-x: center;
   }
 }
 </style>