<template>
  <section id="solution-wrap">
    <div class="container">
      <h2 class="section-title">解决方案</h2>
      <p class="section-subtitle">深入剖析行业痛点，量身打造定制化的解决方案</p>

      <div class="solution-cards">
        <div class="solution-card" v-for="(solution, index) in solutions" :key="index">
          <div class="card-image">
            <img :src="solution.image" :alt="solution.title" />
          </div>
          <div class="card-content">
            <h3>{{ solution.title }}</h3>
            <p>{{ solution.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup>
import userImg from '@/assets/user.jpg'
import shopImg from '@/assets/shop.jpg'
import cityImg from '@/assets/city.jpg'
const solutions = [
  {
    id: 1,
    title: '用户角度',
    description: '汇聚海量优质商品，坚持信息透明化与品质至上原则，让每一位用户都能安心选购。',
    image: userImg,
    industry: 'Government Industry',
  },
  {
    id: 2,
    title: '零售业角度',
    description:
      '打破地域限制，显著降低商家运营成本，并通过智能数据分析持续优化库存管理与选品策略。',
    image: shopImg,
    industry: 'Electric Power Industry',
  },
  {
    id: 3,
    title: '制造业角度',
    description: '收集和分析海量的终端消费数据，理清需求趋势，适应市场变化和按需生产',
    image: cityImg,
    industry: 'Financial Industry',
  },
]
</script>

<style lang="scss" scoped>
#solution-wrap {
  padding: 60px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
    url('@/assets/ice.jpg') no-repeat;
  background-size: cover;
  background-position: 0 -300px;

  .section-title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 10px;
    color: #333;
  }

  .section-subtitle {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-bottom: 40px;
  }

  .solution-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

    .solution-card {
      background-color: #fff;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
      }

      .card-image {
        height: 180px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .card-content {
        padding: 20px;

        h3 {
          font-size: 18px;
          margin-bottom: 10px;
        }

        p {
          font-size: 14px;
          color: #666;
          margin-bottom: 15px;
        }
      }
    }
  }
}
</style>
