<template>
  <div class="relative">
    <Header />
    <div class="carousel w-full relative">
      <div class="carousel-item w-full">
        <img src="../assets/carousel1.png" class="w-full" alt="Tailwind CSS Carousel component" />
      </div>
      <div class="carousel-item w-full">
        <img src="../assets/carousel2.png" class="w-full" alt="Tailwind CSS Carousel component" />
      </div>

    </div>
    <div class="absolute top-[200px] w-full  text-carousel-text">
      <div class="max-w-screen-xl mx-auto">
        <h1 class="text-3xl font-bold mb-[35px]">三优生物样品管理平台</h1>
        <h1 class="text-4xl font-bold text-white mb-[35px]">专业面向生物药企的样品管理平台</h1>
        <div class="button">
          <button
            class="btn bg-[linear-gradient(274.67deg,_#52E8FF_-5.78%,_#0D90FF_96.22%)] text-white rounded-full border-none h-[50px] w-[128px]">
            立即体验
          </button>

        </div>
      </div>
    </div>
    <div class="max-w-screen-xl mx-auto py-[100px]">
      <div class="flex space-x-10 justify-between items-center  mb-[166px]">
        <div class="flex-1">
          <h1 class="text-3xl font-bold">替代Excel</h1>
          <h1 class="text-3xl font-bold">为您的实验室</h1>
          <h1 class="text-3xl font-bold mb-[30px]">搭建样本中央数据库</h1>
          <div class="text-[14px] line-height-[20px]">
            系统基于Web浏览器便捷的交互方式，帮助实验人员进行样本数据管理与业务流程管理，彻底替代纸质与Excel。
          </div>
          <div class="text-[14px] line-height-[20px]">
            样本数据保管在中心化的服务器中，方便所有人共同创建、查询、使用样本信息，不再需要成员之间进行样本资料的传递。
          </div>
          <div class="text-[14px] line-height-[20px]">
            我们将为您的提供足够安全的数据管理策略，保障服务器中的数据安全。
          </div>
        </div>
        <div class="flex-1">
          <img src="../assets/Group 20.png" class="w-full" alt="Tailwind CSS Carousel component" />
        </div>
      </div>

      <div class="flex space-x-10 justify-between items-center mb-[166px]">
        <div class="flex-1">
          <img src="../assets/Group 21.png" class="w-full" alt="Tailwind CSS Carousel component" />
        </div>
        <div class="flex-1">
          <h1 class="text-3xl font-bold mb-[30px]">精于库位管理，不止于库位管理</h1>
          <div class="text-[14px] line-height-[20px]">
            系统提供出色的库位管理方案，帮助库管人员直观精确地对样本进行定位。
            另外，空间剩余情况统计、碎片化统计、空间不足提醒、盘库工具等业务，可有效提升库区管理效率。
          </div>
          <div class="text-[14px] line-height-[20px]">
            如果您还在为库内情况不明而烦恼，三优云试剂管家不失为您的效率之选。
          </div>
        </div>
      </div>
      <div class="text-center text-[36px] font-bold mb-[40px]">
        全流程覆盖，提升您的样本管理效率
      </div>
      <div class="flex">
        <div class="join join-vertical bg-group-btn">
          <button @click="handleClick(index)" v-for="(item, index) in btnList" :key="item.name"
            :class="[ 'p-[10px] join-item h-[60px] w-[120px]', item.active ? 'btn-active-custom text-white' : '' ]">{{
              item.name }}</button>
        </div>

        <div class="flex-1 ml-[43px]">
          <div class="text-[24px] font-bold mb-[10px]">
            样品登记
          </div>
          <div class="text-[14px] line-height-[20px] mb-[10px]">
            在药企样本管理过程中，样本的登记入库是发生频率非常高的场景。针对样品登记，我们的产品设计始终遵循贴合场景、简化操作、减少重复的原则。
          </div>
          <div class="flex gap-[20px]">
            <div class="flex flex-col gap-[10px] w-[208px]">
              <div class="h-[208px] w-[208px]  rounded-full rounded-full-color flex justify-center items-center">
                <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto"
                  alt="Tailwind CSS Carousel component" />
              </div>
              <div class="text-[14px] line-height-[20px] text-center">
                符合药企特点，以批次为单位登记，无需逐份登记
              </div>
            </div>

            <div class="flex flex-col gap-[10px] w-[208px]">
              <div class="h-[208px] w-[208px]  rounded-full rounded-full-color flex justify-center items-center">
                <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto"
                  alt="Tailwind CSS Carousel component" />
              </div>
              <div class="text-[14px] line-height-[20px] text-center">
                符合药企特点，以批次为单位登记，无需逐份登记
              </div>
            </div>

            <div class="flex flex-col gap-[10px] w-[208px]">
              <div class="h-[208px] w-[208px]  rounded-full rounded-full-color flex justify-center items-center">
                <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto"
                  alt="Tailwind CSS Carousel component" />
              </div>
              <div class="text-[14px] line-height-[20px] text-center">
                符合药企特点，以批次为单位登记，无需逐份登记
              </div>
            </div>
            <div class="flex flex-col gap-[10px] w-[208px]">
              <div class="h-[208px] w-[208px]  rounded-full rounded-full-color flex justify-center items-center">
                <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto"
                  alt="Tailwind CSS Carousel component" />
              </div>
              <div class="text-[14px] line-height-[20px] text-center">
                符合药企特点，以批次为单位登记，无需逐份登记
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>
    <div class="w-full custom-bgc-introduce py-[100px]">
      <div class="max-w-screen-xl mx-auto">
        <div class="flex items-center mb-[82px]">
          <div class="flex flex-col   text-introduce-text mr-[100px]">
            <h1 class="text-3xl font-bold ">灵活自定义</h1>
            <h1 class="text-3xl font-bold ">可完美适配</h1>
            <h1 class="text-3xl font-bold">您独特的样品管理场景</h1>
          </div>

          <div class="flex-1 text-[18px] line-height-[20px] text-white">
            鉴于公司业务的差异，各实验室均有自己样本管理上的独特性。
            因此，为了能够充分适配具体的管理特点，系统在管理要素上提供足够的自定义空间，包括但不限于样本类型、样本属性、容器结构、冻存架（盒）结构、编码方式、标签模板等等...
            以此，系统可确保与具体样本管理场景的灵活适配。
          </div>
        </div>
        <div class="flex gap-[20px] justify-between">
          <div class="flex flex-col items-center">
            <img src="../assets/image 83.png" class="w-[170px] h-[170px] mb-[20px]" />
            <div class="text-[14px] line-height-[20px] text-white">
              样本类型
            </div>
          </div>
          <div class="flex flex-col items-center">
            <img src="../assets/image 83.png" class="w-[170px] h-[170px] mb-[20px]" />
            <div class="text-[14px] line-height-[20px] text-white">
              样本类型
            </div>
          </div>
          <div class="flex flex-col items-center">
            <img src="../assets/image 83.png" class="w-[170px] h-[170px] mb-[20px]" />
            <div class="text-[14px] line-height-[20px] text-white">
              样本类型
            </div>
          </div>
          <div class="flex flex-col items-center">
            <img src="../assets/image 83.png" class="w-[170px] h-[170px] mb-[20px]" />
            <div class="text-[14px] line-height-[20px] text-white">
              样本类型
            </div>
          </div>
          <div class="flex flex-col items-center">
            <img src="../assets/image 83.png" class="w-[170px] h-[170px] mb-[20px]" />
            <div class="text-[14px] line-height-[20px] text-white">
              样本类型
            </div>
          </div>
        </div>
        <!-- <img src="../assets/image 20.png" class="w-full" alt="Tailwind CSS Carousel component" /> -->
      </div>
    </div>

    <div class="max-w-screen-xl mx-auto py-[100px]">
      <div class="text-center text-[32px] font-bold mb-[40px]">
        面向生物药场景而设计，适合各细分领域
      </div>
      <div class="flex-1 text-[18px] line-height-[20px] mb-[40px]">
        药企样品管理场景在业务流程、操作方式、数据管理、实施落地方面均有其特殊性，这也是通用型或者医院型样本管理软件无法完全胜任的原因。三优云试剂管家
        专门面向生物药企的样本管理场景而设计，如果您的实验室属于生物药及相关范畴，那么本产品将是您样本管理的不二之选。
      </div>
      <div class="flex gap-[20px] justify-between mb-[100px]">
        <div class="flex flex-col items-center">
          <img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" />
          <div class="text-[14px] line-height-[20px]">
            抗体药物
          </div>
        </div>
        <div class="flex flex-col items-center">
          <img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" />
          <div class="text-[14px] line-height-[20px]">
            CGT
          </div>
        </div>
        <div class="flex flex-col items-center">
          <img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" />
          <div class="text-[14px] line-height-[20px]">
            疫苗
          </div>
        </div>
        <div class="flex flex-col items-center">
          <img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" />
          <div class="text-[14px] line-height-[20px]">
            发酵工程
          </div>
        </div>
        <div class="flex flex-col items-center">
          <img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" />
          <div class="text-[14px] line-height-[20px]">
            生物试剂
          </div>
        </div>

        <div class="flex flex-col items-center">
          <img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" />
          <div class="text-[14px] line-height-[20px]">
            CRO/CDMO
          </div>
        </div>

        <div class="flex flex-col items-center">
          <img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" />
          <div class="text-[14px] line-height-[20px]">
            其他生物实验室
          </div>
        </div>

      </div>
      <div class="text-left text-[32px] font-bold">
        可供多研发项目/多部门
      </div>
      <div class="text-left text-[32px] font-bold mb-[40px]">
        共同管理样本
      </div>
      <div class="flex mb-[40px]">
        <div class="text-[16px] w-[500px]">
          系统通过样本数据的灵活授权、数据分级等方式，可确保各个项目/各个部门单独管理自己的容器与样本，而不会相互干扰
        </div>
        <div class="flex-1 flex gap-[10px] justify-end">
          <div class="custom-btn-bg">
            <img class="w-[56px]" src="../assets/Frame 43.png" />
            <span class="text-[12px] leading-3">RESEARCH AND DEVELOPMENT</span>
          </div>
          <div class="custom-btn-bg">
            <img class="w-[56px]" src="../assets/Frame 45.png" />
            <span class="text-[12px] leading-3">CONDUCT PRODUCTION</span>
          </div>
          <div class="custom-btn-bg">
            <img class="w-[56px]" src="../assets/Frame 47.png" />
            <span class="text-[12px] leading-3">CONDUCT QUALITY CHECK</span>
          </div>
          <!-- <img src="../assets/image 29.png" class="w-[154px] h-[154px] mb-[20px]" /> -->
        </div>
      </div>
      <img src="../assets/Group 33.png" class="w-full mb-[90px]" alt="Tailwind CSS Carousel component" />
      <div class="text-center text-[32px] font-bold mb-[40px]">
        系统具备完善的软硬件扩展能力
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'

const handleClick = (index) => {
  btnList.value.forEach((item) => {
    item.active = false
  })
  btnList.value[index].active = true
}

const btnList = ref([
  {
    name: '样品登记',
    active: true
  },
  {
    name: '样品入库',
    active: false
  },
  {
    name: '样品数据',
    active: false
  },
  {
    name: '库区管理',
    active: false
  },
  {
    name: '库区安全',
    active: false
  },
  {
    name: '系统合规',
    active: false
  },

])
</script>
<style scoped>
.btn-active-custom {
  background: linear-gradient(270deg, #5B63F6 -3.11%, #0D90FF 100%);
  transition: all 0.3s ease;
}

.rounded-full-color {
  background: linear-gradient(180deg, rgba(131, 193, 210, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
}

.custom-bgc-introduce {
  background: linear-gradient(98.33deg, #003EA0 0%, #0AA9F8 100.12%);

}

.custom-btn-bg {
  border: 2px solid #0D90FF;
  width: 190px;
  height: 42px;
  border-radius: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 11px;
  gap: 10px;
}
</style>
