fiee-official-website/src/views/BusinessServices/index.vue

<template>
  <div class="business-page">
    <!-- 渐变背景标题区 -->
    <section class="hero-section">
      <div class="hero-content container">
        <h1 class="hero-title">
          {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
        </h1>
        <div class="hero-description">
          <p>{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}</p>
          <p>{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}</p>
        </div>
      </div>
    </section>

    <!-- 业务核心解决方案 -->
    <main class="container">
      <!-- 解决方案网格 -->
      <div class="solution-grid">
        <!-- 每个解决方案卡片 -->
        <div
          v-for="(item, index) in solutions"
          :key="index"
          class="solution-card"
          :style="{ '--delay': index * 0.1 + 's' }"
        >
          <div class="card-header">
            <div class="decorative-line"></div>
            <h2 class="card-title">{{ item.title }}</h2>
          </div>
          <ul class="card-content">
            <li
              v-for="(point, pIndex) in item.points"
              :key="pIndex"
              class="content-point"
            >
              <div class="point-icon">➤</div>
              <div class="point-text">{{ point }}</div>
            </li>
          </ul>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { computed } from "vue";

const { t } = useI18n();

const solutions = computed(() => [
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENTTWO"),
    ],
  },
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENTTWO"),
    ],
  },
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTWO"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTHREE"),
    ],
  },
  {
    title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.TITLE"),
    points: [
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENT"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTWO"),
      t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTHREE"),
    ],
  },
]);
</script>

<style scoped>
/* 基础样式 */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* 标题区样式 */
.hero-section {
  background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
  padding: 8rem 0 6rem;
  position: relative;
  overflow: hidden;
}

.hero-section::after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 100%;
  height: 100px;
  background: white;
  transform: skewY(-3deg);
}

.hero-title {
  font-size: 3.5rem;
  color: #2c3e50;
  margin-bottom: 2rem;
  animation: slideIn 1s ease;
}

.hero-description {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #5a6d80;
}

/* 解决方案网格 */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 4rem 0;
}

/* 卡片样式 */
.solution-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transform: translateY(20px);
  opacity: 0;
  animation: cardEnter 0.6s ease forwards;
  animation-delay: var(--delay);
  transition: transform 0.3s ease;
}

.solution-card:hover {
  transform: translateY(-5px);
}

.card-header {
  position: relative;
  margin-bottom: 1.5rem;
}

.decorative-line {
  width: 40px;
  height: 3px;
  background: #4a90e2;
  margin-bottom: 1rem;
  opacity: 0.8;
}

.card-title {
  font-size: 1.5rem;
  color: #34495e;
  margin-bottom: 1rem;
}

/* 内容点样式 */
.content-point {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #f0f4f8;
}

.point-icon {
  color: #4a90e2;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.point-text {
  color: #5a6d80;
  line-height: 1.6;
}

/* 动画效果 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .solution-grid {
    grid-template-columns: 1fr;
  }
}
</style>