<script setup lang="ts">
let pageTitle: any = ref("公司简介-深圳市合科泰电子有限公司");
useHead(() => ({
  title: pageTitle.value,
}));
import banner from "@/assets/img/about-us/banner.png";
import { useAll } from "~/api/pubAll/service";
const { getContent } = useAll();
let pageData: any = ref([]);
const { data: ssrGetContent } = await useAsyncData<any>("getContentJj", () =>
  getContent({
    language: 1,
    code: 5,
  })
);
setData(ssrGetContent.value);

function setData(res: any) {
  console.log(res)
  if (res.httpCode == 200) {
    pageData.value = res?.data;
  }
}
</script>
<template>
  <div class="page-wrapper">
    <div class="page-main">
      <section class="section banner-wrap" style="margin-bottom: 0;" :style="'background-image:url('+pageData[0][0].list[0].image+')'">
        <div class="main-width banner-con">
          <p class="title-tip"><span>关于HKT</span></p>
          <ul>
            <li class="mr40">
              <h3>33</h3>
              <p>33年行业经验</p>
            </li>
            <li class="mr40">
              <h3>5<span>w+</span></h3>
              <p>服务终端客户</p>
            </li>
            <li class="mr40">
              <h3>60<span>+</span></h3>
              <p>服务于多个国家与地区</p>
            </li>
          </ul>
        </div>
      </section>
      <!-- 面包屑 -->
      <div class="breadcrumb-wrap section">
        <div class="breadcrumb">
          您现在的位置：<NuxtLink to="/">首页</NuxtLink>&nbsp;> 关于我们
        </div>
      </div>

      <div class="container">
        <!-- 公司简介 -->
        <section class="section company-intro" id="company-intro">
          <h2 class="section-title">公司简介</h2>
          <div class="intro-content">
            <div class="intro-text">
              <h3 class="intro-subtitle">深圳市合科泰电子有限公司</h3>
              <p class="intro-paragraph">
                深圳市合科泰电子有限公司为台科泰集团总部，1992年初于美国德克萨斯成立，专业从事半导体模拟芯片、集成电路、分立器件及被动元件的研发、设计、销售，是深圳市专精特新和国家级高新技术企业。
              </p>
              <p class="intro-paragraph">
                HKT旗下有两大生产基地分别位于：四川省南充市顺庆区科华中路17、18号楼和广东省惠州市博罗县的台科泰产业园，产品远销海内外。
              </p>
              <p class="intro-paragraph">
                一、主动器件类产品如下系列1、贴片电阻类全系列规格产品，并可承接ODM/OEM业务：主要有LDO、锂电保护IC、充电管理IC及整流桥，MOSFET（场效应管），三极管、整流、特快恢复、瞬变、肖特基二极管等分立器件。
              </p>
              <p class="intro-paragraph">
                二、被动元件类产品如下系列1、贴片电阻类全系列规格产品，并可承接ODM/OEM业务：透明薄膜、高功率薄膜、高精密薄膜、抗浪涌薄膜、抗脉冲薄膜、宽边厚膜等贴片电阻；合金电阻、金属膜电阻、合金体电阻、瓷电极合金体电阻、分流电阻等金属电阻；2、贴片电容类全系列规格产品。
              </p>
            </div>
            <div class="intro-img">
              <img src="@/assets/img/about-us/about-us.png" alt="合科泰公司大楼" class="img-responsive">
            </div>
          </div>
        </section>

        <!-- 企业文化 -->
        <section class="section culture" id="company-culture">
          <h2 class="section-title">企业文化</h2>
          <div class="culture-list">
            <div class="culture-item">
              <div class="culture-icon icon-1"></div>
              <h3 class="culture-title">合芯凝聚</h3>
              <p class="culture-desc">打造电子元器件国产替代品牌</p>
            </div>
            <div class="culture-item">
              <div class="culture-icon icon-2"></div>
              <h3 class="culture-title">科技兴国</h3>
              <p class="culture-desc">以技术回应客户期待<br>以温度拓展服务边界</p>
            </div>
            <div class="culture-item">
              <div class="culture-icon icon-3"></div>
              <h3 class="culture-title">泰志传承</h3>
              <p class="culture-desc">将每一份品质锻造成为穿越时光的承诺</p>
            </div>
            <div class="culture-item">
              <div class="culture-icon icon-4"></div>
              <h3 class="culture-title">匠心制造</h3>
              <p class="culture-desc">客户至上 合作共赢<br>专业务实 高效创新</p>
            </div>
          </div>
        </section>

        <!-- 发展历程 -->
        <section class="section timeline" id="company-history">
          <h2 class="section-title">发展历程</h2>
          <div class="timeline-container">
            <!-- 时间轴主线 -->
            <div class="timeline-line"></div>

            <!-- 左侧事件 -->
            <div class="timeline-group timeline-left">
              <div class="timeline-item">
                <div class="timeline-dot"></div>
                <div class="timeline-content">
                  <div class="timeline-year">1992</div>
                  <p class="timeline-text">成立深圳台科泰电子。</p>
                </div>
              </div>
              <div class="timeline-item">
                <div class="timeline-content">
                  <div class="timeline-year">2000</div>
                  <p class="timeline-text">成立深圳市台科泰电子有限公司，自创品牌运营。</p>
                </div>
                <div class="timeline-dot"></div>
              </div>
              <div class="timeline-item">
                <div class="timeline-dot"></div>
                <div class="timeline-content">
                  <div class="timeline-year">2009</div>
                  <p class="timeline-text">
                    1. 台科泰电子系列产品获得由中国名牌产品培育委员会颁发的中国消费者首选品牌铜质证书。<br>
                    2. 荣获慧聪网颁发“中国电子行业半导体分立器件杰出企业”奖。
                  </p>
                </div>
              </div>
              <div class="timeline-item">
                <div class="timeline-content">
                  <div class="timeline-year">2010</div>
                  <p class="timeline-text">广东台科泰实业有限公司东莞工厂投入使用。</p>
                </div>
                <div class="timeline-dot"></div>
              </div>
              <div class="timeline-item">
                <div class="timeline-dot"></div>
                <div class="timeline-content">
                  <div class="timeline-year">2018</div>
                  <p class="timeline-text">成立先进研发中心及实验室，总投资3000万以上，自主研发电源管理芯片、MOSFET芯片。</p>
                </div>
              </div>
              <div class="timeline-item">
                <div class="timeline-content">
                  <div class="timeline-year">2022</div>
                  <p class="timeline-text">台科泰董事长陈国斌先生当选深圳市电子商会第六届理事会常务副会长。</p>
                </div>
                <div class="timeline-dot"></div>
              </div>
              <div class="timeline-item">
                <div class="timeline-dot"></div>
                <div class="timeline-content">
                  <div class="timeline-year">2023</div>
                  <p class="timeline-text">惠州台科泰科技有限公司开工建设，建成后预计产能将提升20亿颗/年。</p>
                </div>
              </div>
              <div class="timeline-item">
                <div class="timeline-content">
                  <div class="timeline-year">2024</div>
                  <p class="timeline-text">
                    台科泰集团向四川南充项目重点打造三家子公司：<br>
                    1. 四川顺半半导体科技有限公司（研发生产集成电路功率器件）；<br>
                    2. 南充芯安奥电子有限公司（研发生产芯片晶圆）；<br>
                    3. 南充芯晶鹏新材料科技有限责任公司（研发生产半导体材料）；
                  </p>
                </div>
                <div class="timeline-dot"></div>
              </div>
            </div>
          </div>
        </section>

        <!-- 荣誉证书 -->
        <section class="section honors" id="company-award">
          <h2 class="section-title">荣誉证书</h2>
          <div class="honors-list">
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_1.png" alt="深圳市专精特新企业" class="honor-img">
              <p class="honor-name">深圳市专精特新企业</p>
            </div>
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_2.png" alt="深圳市创新型企业" class="honor-img">
              <p class="honor-name">深圳市创新型企业</p>
            </div>
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_3.png" alt="国家级高新技术企业" class="honor-img">
              <p class="honor-name">国家级高新技术企业</p>
            </div>
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_4.png" alt="科技创新先锋奖" class="honor-img">
              <p class="honor-name">科技创新先锋奖</p>
            </div>
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_5.png" alt="深圳市电子商务金点奖" class="honor-img">
              <p class="honor-name">深圳市电子商务金点奖</p>
            </div>
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_6.png" alt="金奖类最具市场力产品奖" class="honor-img">
              <p class="honor-name">金奖类最具市场力产品奖</p>
            </div>
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_7.png" alt="创新突破蓝点奖" class="honor-img">
              <p class="honor-name">创新突破蓝点奖</p>
            </div>
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_8.png" alt="工程技术研究中心认定" class="honor-img">
              <p class="honor-name">工程技术研究中心认定</p>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main-width {
  margin: 0 auto;
  max-width: 1600px;
  padding: 0px;
}
.banner-wrap {
  height: 350px;
  width: 100%;
  position: relative;
  background: url(@/assets/img/about-us/banner.png) no-repeat center center;
  background-size: 100% 100%;
  .banner-con {
    display: flex;
    justify-content: space-between;
    padding: 80px 32px 0 32px;
    flex-direction: column;
    ul {
      display: flex;
      margin-top: 50px;
    }
    li {
      color: #fff;
      h3 {
        font-weight: bold;
        line-height: 70px;
        height: 70px;
        font-size: 60px;
        letter-spacing: 3px;
        span {
          font-size: 36px;
          margin-left: 5px;
        }
      }
      p {
        font-size: 16px;
        font-weight: 400;
      }
    }
    .title-tip {
      font-size: 60px;
      color: #fff;
      font-weight: bold;
      line-height: 80px;
      position: relative;
      letter-spacing: 2px;
      &::before {
        position: absolute;
        content: "";
        width: 120px;
        height: 4px;
        background: #fff;
        bottom: -3px;
        left: 0;
      }
    }
  }
}

/* 全局基础样式 */
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
  color: #333;
  .section {
    scroll-margin-top: 140px;
  }
}

/* 面包屑 */
.breadcrumb-wrap {
  box-shadow: 0 5px 20px #f9f9f9;
}
.breadcrumb {
  font-size: 14px;
  color: #666;
  height: 80px;
  display: flex;
  align-items: center;
  width: 90%;
  max-width: 1600px;
  margin: 0 auto;
  padding-left: 15px;
  font-size: 15px;
}

/* 通用区块样式 */
.section {
  margin-bottom: 60px;
  position: relative;
}

.section-title {
  font-size: 34px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 50px;
  color: #333;
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background-color: #e53935;
  margin: 10px auto 0;
}

/* 图片响应式 */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 公司简介 */
.intro-content {
  display: flex;
  flex-direction: column;
  margin-top: 80px;
}

.intro-subtitle {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 45px;
  color: #222;
}

.intro-paragraph {
  margin-bottom: 15px;
  font-size: 16px;
  color: #666;
}

.intro-text {
  background-color: #f9f9f9;
  padding: 50px 60px 30px;
  border-radius: 8px;
}

.intro-img {
  overflow: hidden;
  margin-top: -60px;
}

/* 企业文化 */
.culture-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.culture-item {
  background-color: #f0f0f0;
  padding: 25px 15px;
  border-radius: 8px;
  text-align: center;
}

.culture-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  &.icon-1 {
    background: url(@/assets/img/about-us/icon-1.png) no-repeat center center;
    background-size: 80px 80px;
  }
  &.icon-2 {
    background: url(@/assets/img/about-us/icon-2.png) no-repeat center center;
    background-size: 80px 80px;
  }
  &.icon-3 {
    background: url(@/assets/img/about-us/icon-3.png) no-repeat center center;
    background-size: 80px 80px;
  }
  &.icon-4 {
    background: url(@/assets/img/about-us/icon-4.png) no-repeat center center;
    background-size: 80px 80px;
  }
}

.culture-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
  line-height: 32px;
}

.culture-desc {
  font-size: 14px;
  color: #666;
}

/* 发展历程 */
.timeline-container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #e53935;
  transform: translateX(-50%);
  z-index: 1;
}

.timeline-group {
  width: 100%;
  margin-bottom: 30px;
  overflow: hidden;
}

.timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  &:nth-child(2n) {
    position: relative;
    left: calc(50% + 30px);
    text-align: left;
    .timeline-content {
      text-align: left;
    }
    .timeline-dot {
      left: -30px;
    }
  }
}

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #e53935;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.timeline-content {
  width: calc(50% - 30px);
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  font-size: 14px;
}

.timeline-left .timeline-content {
  margin-right: auto;
  margin-left: 0;
  text-align: right;
}

.timeline-right {
  margin-top: -500px;
  .timeline-content {
    margin-left: auto;
    margin-right: 0;
    text-align: left;
  }
}

.timeline-year {
  font-weight: bold;
  color: #e53935;
  margin-bottom: 5px;
  font-size: 22px;
}

.timeline-text {
  color: #666;
}

/* 荣誉证书 */
.honors-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px 30px;
}

.honor-item {
  background-color: #fff;
  border-radius: 8px;
  text-align: center;
}

.honor-img {
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 10px;
}

.honor-name {
  font-size: 24px;
  color: #333;
}

/* 响应式适配 - 平板 */
@media (min-width: 768px) {
  /* 公司简介 */
  .intro-content {
    flex-direction: row;
  }
  .intro-text,
  .intro-img {
    width: 50%;
  }

  /* 企业文化 */
  .culture-list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 荣誉证书 */
  .honors-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 响应式适配 - 桌面端 */
@media (min-width: 992px) {
  /* 企业文化 */
  .culture-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 小屏手机适配 */
@media (max-width: 767px) {
  .timeline-line {
    left: 20px;
    transform: none;
  }
  .timeline-dot {
    left: 20px;
    transform: none;
  }
  .timeline-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .timeline-content {
    width: calc(100% - 40px);
    margin-left: 40px !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
}
</style>
