inkreach-uni/pages/index/components/CompanyIntro.vue

<template>
  <!-- 公司简介 + 底部 -->
  <view class="company-section">
    <!-- 背景图 -->
    <view class="company-bg">
      <image
        class="bg-img"
        src="/static/images/home/公司简介背景_1461_1606.png"
        mode="widthFix"
      ></image>
    </view>

    <view class="company-content">
      <!-- 公司简介标题 - 居中 -->
      <text class="section-title">公司简介</text>

      <!-- 大标题 slogan -->
      <view class="company-slogan">
        <text class="slogan-main">用科技重新定义POD供应链</text>
        <text class="slogan-sub">让每一个创意,都能高效抵达全球</text>
      </view>

      <!-- 公司描述 -->
      <text class="company-desc">
        INKREACH印美达全球，一家以AI与智能印花技术驱动的全球化POD柔性供应链公司，致力于成为全球创业者最可靠的成长伙伴。
      </text>

      <!-- 两栏说明 -->
      <view class="company-cols">
        <view class="col-left">
          <text class="col-title">服务对象与场景</text>
          <text class="col-text">
            服务于数千家跨境独立站、TikTok、TEMU、SHEIN等平台商家，提供从海外生产到末端物流的一站式供应链服务，让电商创业者专注增长，无惧后端履约。
          </text>
        </view>
        <view class="col-right">
          <text class="col-title">愿景</text>
          <text class="col-text">
            我们坚信，每一个创意都值得被完美呈现。Inkreach将持续深耕智能供应链生态，用科技消除制造壁垒，让全球创业者专注发挥创造力，共同书写个性化电商的新纪元。
          </text>
        </view>
      </view>

      <!-- 4个核心能力卡片 -->
      <view class="ability-grid">
        <view class="ability-card" v-for="(item, index) in abilities" :key="index">
          <view class="ability-icon">
            <text class="icon-emoji">{{ getAbilityIcon(index) }}</text>
          </view>
          <text class="ability-title">{{ item.title }}</text>
          <text class="ability-desc">{{ item.desc }}</text>
        </view>
      </view>
    </view>

    <!-- 底部橙色CTA区域 -->
    <view class="cta-footer">
      <view class="qr-wrap">
        <image
          class="qr-img"
          src="/static/images/home/image_26_1496_1761.png"
          mode="aspectFit"
        ></image>
      </view>
      <text class="cta-text">联系我们,开启你的全球生意新篇</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CompanyIntro',
  props: {
    abilities: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getAbilityIcon(index) {
      const icons = ['🎨', '🤖', '🏭', '📦']
      return icons[index] || ''
    }
  }
}
</script>

<style scoped>
.company-section {
  position: relative;
  width: 100%;
  padding: 0;
  background: #f8f8f8;
  overflow: hidden;
}

/* 背景图 */
.company-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}
.bg-img {
  width: 100%;
  display: block;
}

.company-content {
  position: relative;
  z-index: 1;
  padding-top: 40rpx;
}

/* 公司简介标题 - 设计稿 20px/400/#000000 居中 */
.section-title {
  display: block;
  text-align: center;
  font-size: 38rpx;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 40rpx;
}

/* slogan - 设计稿 18px/400 */
.company-slogan {
  padding: 0 32rpx;
  margin-bottom: 24rpx;
}
.slogan-main {
  display: block;
  font-size: 34rpx;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.4;
}
.slogan-sub {
  display: block;
  font-size: 34rpx;
  font-weight: 700;
  color: #ff6800;
  line-height: 1.4;
  margin-top: 6rpx;
}

/* 公司描述 - 设计稿 12px/400/#000000 */
.company-desc {
  display: block;
  padding: 0 32rpx;
  font-size: 24rpx;
  color: #666666;
  line-height: 1.7;
  margin-bottom: 40rpx;
}

/* 两栏 - 设计稿 14px/400/#000000 标题 */
.company-cols {
  display: flex;
  padding: 0 32rpx;
  gap: 24rpx;
  margin-bottom: 50rpx;
}
.col-left,
.col-right {
  flex: 1;
}
.col-title {
  display: block;
  font-size: 26rpx;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 12rpx;
}
.col-text {
  display: block;
  font-size: 22rpx;
  color: #666666;
  line-height: 1.7;
}

/* 核心能力卡片 - 2列网格 */
.ability-grid {
  padding: 0 32rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 70rpx;
}
.ability-card {
  width: 330rpx;
  padding: 32rpx 24rpx;
  background: #ffffff;
  border-radius: 12rpx;
  border: 2rpx solid #f0f0f0;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.ability-icon {
  width: 56rpx;
  height: 56rpx;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-emoji {
  font-size: 40rpx;
}
.ability-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8rpx;
}
.ability-desc {
  font-size: 22rpx;
  color: #999999;
  line-height: 1.5;
}

/* 底部CTA - 橙色背景 */
.cta-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 60rpx 32rpx 80rpx;
  background: #ff6800;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.qr-wrap {
  width: 260rpx;
  height: 260rpx;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.qr-img {
  width: 100%;
  height: 100%;
}
.cta-text {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: 500;
  text-align: center;
}
</style>