<script setup lang="ts">
let pageTitle: any = ref("About Us - Shenzhen Hotking Electronics Co., Ltd.");
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: 2,
    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>About HKT</span></p>
          <ul>
            <li class="mr40">
              <h3>33</h3>
              <p>33 Years of Industry Experience</p>
            </li>
            <li class="mr40">
              <h3>50<span>K+</span></h3>
              <p>End Customers Served</p>
            </li>
            <li class="mr40">
              <h3>60<span>+</span></h3>
              <p>Serving Multiple Countries and Regions</p>
            </li>
          </ul>
        </div>
      </section>
      <!-- 面包屑 -->
      <div class="breadcrumb-wrap section">
        <div class="breadcrumb">
          Current Location: <NuxtLink to="/">Home</NuxtLink>&nbsp;> About Us
        </div>
      </div>

      <div class="container">
        <!-- 公司简介 -->
        <section class="section company-intro" id="company-intro">
          <h2 class="section-title">Company Profile</h2>
          <div class="intro-content">
            <div class="intro-text">
              <h3 class="intro-subtitle">Shenzhen Hotking Electronics Co., Ltd.</h3>
              <p class="intro-paragraph">
                Shenzhen Hotking Electronics Co., Ltd., the headquarters of the Hotking Group, was founded in Texas, USA in early 1992. The company specializes in the R&D, design, and sales of semiconductor analog chips, integrated circuits, discrete devices, and passive components, and is recognized as both a Shenzhen specialized and innovative enterprise and a national high-tech enterprise.
              </p>
              <p class="intro-paragraph">
                HKT operates two major manufacturing bases located at Buildings 17 and 18, Kehua Middle Road, Shunqing District, Nanchong, Sichuan, and at the Hotking Industrial Park in Boluo County, Huizhou, Guangdong. Its products are sold worldwide.
              </p>
              <p class="intro-paragraph">
                1. Active component product lines support full ODM/OEM services and mainly include LDOs, lithium battery protection ICs, charging management ICs, bridge rectifiers, MOSFETs, transistors, rectifier diodes, ultra-fast recovery diodes, transient suppression devices, Schottky diodes, and other discrete devices.
              </p>
              <p class="intro-paragraph">
                2. Passive component product lines also support full ODM/OEM services, covering thin-film, high-power film, high-precision film, anti-surge film, anti-pulse film, and wide-side thick-film chip resistors; alloy resistors, metal film resistors, alloy body resistors, ceramic-electrode alloy body resistors, shunt resistors, and other metal resistors; as well as full-series chip capacitor products.
              </p>
            </div>
            <div class="intro-img">
              <img src="@/assets/img/about-us/about-us.png" alt="Hotking office building" class="img-responsive">
            </div>
          </div>
        </section>

        <!-- 企业文化 -->
        <section class="section culture" id="company-culture">
          <h2 class="section-title">Corporate Culture</h2>
          <div class="culture-list">
            <div class="culture-item">
              <div class="culture-icon icon-1"></div>
              <h3 class="culture-title">United by Core</h3>
              <p class="culture-desc">Building a trusted domestic alternative brand for electronic components</p>
            </div>
            <div class="culture-item">
              <div class="culture-icon icon-2"></div>
              <h3 class="culture-title">Technology for the Nation</h3>
              <p class="culture-desc">Responding to customer expectations with technology<br>Expanding service boundaries with care</p>
            </div>
            <div class="culture-item">
              <div class="culture-icon icon-3"></div>
              <h3 class="culture-title">Legacy of Commitment</h3>
              <p class="culture-desc">Turning every standard of quality into a promise that stands the test of time</p>
            </div>
            <div class="culture-item">
              <div class="culture-icon icon-4"></div>
              <h3 class="culture-title">Crafted Manufacturing</h3>
              <p class="culture-desc">Customer first, win-win cooperation<br>Professional, pragmatic, efficient, and innovative</p>
            </div>
          </div>
        </section>

        <!-- 发展历程 -->
        <section class="section timeline" id="company-history">
          <h2 class="section-title">Development History</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">Established Shenzhen Taiketai Electronics.</p>
                </div>
              </div>
              <div class="timeline-item">
                <div class="timeline-content">
                  <div class="timeline-year">2000</div>
                  <p class="timeline-text">Founded Shenzhen Taiketai Electronics Co., Ltd. and began operating its own brand.</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. Taiketai Electronics products received the Bronze Certificate of China's Preferred Brand by Consumers from the China Famous Brand Product Cultivation Committee.<br>
                    2. Received the "Outstanding Enterprise in Semiconductor Discrete Devices of China's Electronics Industry" award from HC Network.
                  </p>
                </div>
              </div>
              <div class="timeline-item">
                <div class="timeline-content">
                  <div class="timeline-year">2010</div>
                  <p class="timeline-text">The Dongguan factory of Guangdong Taiketai Industrial Co., Ltd. was put into operation.</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">Established an advanced R&D center and laboratory with a total investment of over RMB 30 million, independently developing power management chips and MOSFET chips.</p>
                </div>
              </div>
              <div class="timeline-item">
                <div class="timeline-content">
                  <div class="timeline-year">2022</div>
                  <p class="timeline-text">Mr. Chen Guobin, Chairman of Taiketai, was elected Executive Vice President of the 6th Council of the Shenzhen Electronics Chamber of Commerce.</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">Construction of Huizhou Taiketai Technology Co., Ltd. began, with expected capacity to increase by 2 billion units per year upon completion.</p>
                </div>
              </div>
              <div class="timeline-item">
                <div class="timeline-content">
                  <div class="timeline-year">2024</div>
                  <p class="timeline-text">
                    For the Nanchong, Sichuan project, Taiketai Group focused on building three subsidiaries:<br>
                    1. Sichuan Shunban Semiconductor Technology Co., Ltd. (R&D and production of integrated circuit power devices);<br>
                    2. Nanchong Xinanao Electronics Co., Ltd. (R&D and production of chip wafers);<br>
                    3. Nanchong Xinjingpeng New Materials Technology Co., Ltd. (R&D and production of semiconductor materials).
                  </p>
                </div>
                <div class="timeline-dot"></div>
              </div>
            </div>
          </div>
        </section>

        <!-- 荣誉证书 -->
        <section class="section honors" id="company-award">
          <h2 class="section-title">Honors & Certificates</h2>
          <div class="honors-list">
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_1.png" alt="Shenzhen Specialized and Innovative Enterprise" class="honor-img">
              <p class="honor-name">Shenzhen Specialized and Innovative Enterprise</p>
            </div>
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_2.png" alt="Shenzhen Innovative Enterprise" class="honor-img">
              <p class="honor-name">Shenzhen Innovative Enterprise</p>
            </div>
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_3.png" alt="National High-Tech Enterprise" class="honor-img">
              <p class="honor-name">National High-Tech Enterprise</p>
            </div>
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_4.png" alt="Technology Innovation Pioneer Award" class="honor-img">
              <p class="honor-name">Technology Innovation Pioneer Award</p>
            </div>
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_5.png" alt="Shenzhen E-Commerce Golden Dot Award" class="honor-img">
              <p class="honor-name">Shenzhen E-Commerce Golden Dot Award</p>
            </div>
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_6.png" alt="Most Market-Competitive Product Gold Award" class="honor-img">
              <p class="honor-name">Most Market-Competitive Product Gold Award</p>
            </div>
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_7.png" alt="Innovation Breakthrough Blue Dot Award" class="honor-img">
              <p class="honor-name">Innovation Breakthrough Blue Dot Award</p>
            </div>
            <div class="honor-item">
              <img src="@/assets/img/about-us/r_8.png" alt="Engineering Technology Research Center Certification" class="honor-img">
              <p class="honor-name">Engineering Technology Research Center Certification</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>
