<template>
  <div class="page flex h-screen flex-col bg-#000000">
    <!-- <BaseHeader class="flex-shrink-0"></BaseHeader> -->
    <div class="flex justify-between pt-40px px-68px">
      <img src="@/assets/images/ejet_logo.png" class="2xl:w-180px lg:w-140px object-contain" alt="" srcset="" />
      <img src="@/assets/images/ejet_small_logo.png" class="2xl:w-35px lg:w-28px object-contain" alt="" srcset="" />
    </div>
    <div class="flex main pos-relative">
      <div class="side-left h-full flex justify-center items-center">
        <div>
          <div class="text-#4DD8D8 w-fit fw-700 text-14px b-1px b-rd-226px b-solid b-#4DD8D8 py-8px px-15px">
            全方位的供应链出海解决方案，助力中国品牌全球化
          </div>
          <div class="lg:mt-16px lg:mb-10px 2xl:mt-25px 2xl:mb-14px 2xl:text-36px lg:text-28px text-#fff">携手共创供应链品牌</div>
          <div class="2xl:text-42px lg:text-32px fw-700 custom-font-gradient">出海新未来</div>
          <div class="2xl:my-60px lg:mt-20px lg:mb-60px">
            <div class="text-12px text-#fff 2xl:mb-44px lg:mb-30px">入驻易杰，即可享受以下三大核心服务：</div>
            <div v-for="item in list" :key="item.id" class="2xl:mb-60px lg:mb-30px last:mb-0 flex items-center">
              <img :src="item.img" class="2xl:w-56px lg:w-40px mr-28px object-contain" alt="" srcset="" />
              <div>
                <img :src="item.logo" class="w-135px h-25px mb-14px" alt="" />
                <div class="text-12px w-300px text-#fff lh-20px font-title">{{ item.title }}</div>
              </div> 
            </div>
          </div>
        </div>
      </div>
      <div class="pos-absolute flex 2xl:bottom-60px lg:bottom-30px left-70px">
        <div v-for="(item, index) in platForms" :key="index">
          <a-popover placement="top">
            <template #content>
              <img :src="item.img2" class="w-140px h-140px" alt="" />
            </template>
            <img class="mr-30px" :src="item.img" :style="item.style" alt="" />
          </a-popover>
        </div>
      </div>
      <div class="side-right w-50% flex items-center px-12 justify-center">
        <div class="pos-relative">
          <slot></slot>
          <img
            src="@/assets/images/bg_img01.png"
            class="2xl:w-750px lg:w-600px 2xl:h-210px lg:h-150px pos-absolute pointer-events-none left-50% transform-translate-x--50% 2xl:bottom--108px lg:bottom--80px"
            alt=""
            srcset=""
          />
        </div>
        <!-- <img src="@/assets/images/bg_img02.png" alt="pos-absolute bottom-0" srcset="" /> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import BaseHeader from 'Components/layout/BaseHeader.vue'
import img01 from '@/assets/images/ejet_img01.png'
import img02 from '@/assets/images/ejet_img02.png'
import img03 from '@/assets/images/ejet_img03.png'
import logo01 from '@/assets/images/ejet_logo01.png'
import logo02 from '@/assets/images/ejet_logo02.png'
import logo03 from '@/assets/images/ejet_logo03.png'

import platform01 from '@/assets/images/wechat.png'
import platform02 from '@/assets/images/wechatVideo.png'
import platform03 from '@/assets/images/douyin.png'
import platform04 from '@/assets/images/xhs.png'
import platform011 from '@/assets/images/wechat_code.png'
import platform021 from '@/assets/images/wechatVideo_code.jpeg'
import platform031 from '@/assets/images/douyin_code.jpeg'
import platform041 from '@/assets/images/xhs_code.jpeg'

const list = [
  {
    id: 1,
    img: img01,
    logo: logo01,
    title: '提供全方位的出海营销和品牌赋能服务，助力中国制造商进入国际市场。',
  },
  {
    id: 2,
    img: img02,
    logo: logo02,
    title: '精选中国优质供应链品牌，打造高效国际商贸平台，帮助品牌走向全球。',
  },
  {
    id: 3,
    img: img03,
    logo: logo03,
    title: '提供全球智慧采购解决方案，优化流程、降低成本，提升国际竞争力。',
  },
]
const platForms = [
  {
    img: platform01,
    img2: platform011,
    style: {
      width: '20px',
      height: '20px',
    },
  },
  {
    img: platform02,
    img2: platform021,
    style: {
      width: '26px',
      height: '26px',
    },
  },
  {
    img: platform03,
    img2: platform031,
    style: {
      width: '26px',
      height: '26px',
    },
  },
  {
    img: platform04,
    img2: platform041,
    style: {
      width: '26px',
      height: '26px',
    },
  },
]
</script>

<style scoped lang="less">
.page {
  background-image: url('../../assets/images/bg_img02.png');
  background-size: cover;
  background-position: center;

  .main {
    min-height: calc(100vh - 80px);
    height: fit-content;
  }

  .side-left {
    width: 50%;
    height: 100%;

    // background-image: url('../../assets/images/login_bg.jpg');
    // background-size: cover;
    // background-position: center;
    .custom-font-gradient {
      color: transparent;
      /* 字体颜色设为透明，因为我们用背景色来显示 */
      background-image: linear-gradient(to right, #0068ff, #10ffd1);
      /* 线性渐变从左到右，颜色从#ff7e5f渐变到#feb47b */
      -webkit-background-clip: text;
      /* 非标准属性，用于旧版WebKit浏览器 */
      background-clip: text;
      /* 标准属性 */
      -webkit-text-fill-color: transparent;
      /* 禁止文本填充颜色，只显示背景色 */
    }

    .font-title {
      letter-spacing: 3px;
    }
  }
}
</style>
