<template>
  <section class="company-intro">
    <div class="intro-content">
      <div class="intro-card">
        <h2 class="card-title">简介<br />友福同享</h2>
        <p class="card-desc">友福同享—<br />AI精准健康的领航者</p>
        <p class="card-text">
          友福同享（深圳）智能科技有限公司以人工智能为核心驱动力，专注于生命科学与AI技术融合，打造主动式精准健康管理平台。<br />
          公司依托先进的算法模型与多维度数据体系，为个人提供精准预测与个性化健康方案，业务覆盖全球20+国家和地区，同时深度赋能企业、政府及医疗健康机构，提供标准化、场景化的AI健康解决方案，构建健康产业新生态。
        </p>
      </div>
      <div class="team-info">
        <h3 class="team-title">专业团队，引领AI健康未来</h3>
        <ul class="team-list">
          <li>汇聚华为/腾讯/IBM技术领袖 + 清华/康奈尔/中科院学术权威，团队具备：</li>
          <br />
          <li>✔️ 20年以上跨领域行业经验</li>
          <li>✔️ 半导体芯片异构、生物医学工程、数字安全等复合技术背景</li>
          <li>✔️ 联合国组技术标准制定参与经验</li>
        </ul>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
/* 无业务逻辑 */
</script>

<style scoped lang="less">
.company-intro {
  padding: 0px 192px 100px 192px;
  .intro-content {
    display: flex;
    align-items: center;
    gap: 198px;

    .intro-card {
      //position: absolute;
      //top: -430px;
      //left: 192px;
      margin-top: -430px;
      z-index: 9;
      width: 622px;
      background: #313fa8;
      color: #fff;
      padding: 160px 40px;
      text-align: left;
      .card-title {
        font-size: 80px;
        .mb(82px);
        border-bottom: 1px solid #fff;
      }

      .card-desc {
        font-size: 40px;
        margin-top: 40px;
      }

      .card-text {
        font-size: @font-size-lg;
        line-height: 36px;
        .mt(20px);
      }
    }

    .team-info {
      flex: 1;
      text-align: left;
      .team-title {
        font-size: 50px;
        font-weight: bold;
        color: @text-color;
        margin-bottom: 20px;
      }

      .team-list {
        font-size: @font-size-lg;
        color: @text-color-secondary;
        list-style: none;

        line-height: 34px;
        li {
          margin: 10px 0;

          &::before {
            content: ' ';
            color: @primary-color;
          }
        }
      }
    }
  }

  @media (max-width: @tablet-breakpoint) {
    padding: 40px 20px;
    .intro-content {
      flex-direction: column;

      .intro-card {
        order: 2;
      }

      .team-info {
        order: 1;
        margin-bottom: 40px;
      }
    }
  }
}
</style>
