<script setup lang="ts">
const solutions = [
  { icon: 'icon-tongxin', text: '通信行业' },
  { icon: 'icon-jinrong', text: '金融行业' },
  { icon: 'icon-qiche', text: '汽车制造行业' },
  { icon: 'icon-zhengfu', text: '政府及公共事业' },
  { icon: 'icon-ditu', text: 'GIS应用' }
]

const products = [
  { icon: 'icon-tongxin', text: '通信行业' },
  { icon: 'icon-jinrong', text: '金融行业' },
  { icon: 'icon-qiche', text: '汽车制造行业' },
  { icon: 'icon-zhengfu', text: '政府及公共事业' }
]
</script>

<template>
  <div class="blue-print">
    <div class="center-width print-main">
      <!-- <div class="title"></div> -->
      <div class="title serve-title">
        <div class="index">02</div>
        <div class="name">产品解决方案</div>
        <div class="english">PRODUCT SOLUTIONS</div>
      </div>
      <div class="product">
        <div class="left">依托在通信、金融、汽车制造、政府及公共事业等领域的长期积累 、以客户为核心延伸IT服务价值，由个性化向整体化迈进。</div>
        <div class="right plan">
          <div class="title-text">解决方案</div>
          <div class="title-english">SOLUTION</div>
          <div style="clear: both;"></div>
          <ul class="print-ul">
            <li v-for="(item, index) in solutions" :key="index">
              <i :class="item.icon"></i>{{ item.text }}
            </li>
          </ul>
        </div>
        <div class="right">
          <div class="title-text">软件产品</div>
          <div class="title-english">SOFTWARE PRODUCTS</div>
          <div style="clear: both;"></div>
          <ul class="print-ul">
            <li v-for="(item, index) in products" :key="index">
              <i :class="item.icon"></i>{{ item.text }}
            </li>
          </ul>
        </div>
        <div style="clear: both;"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.blue-print {
  width: 100%;
  background: linear-gradient(135deg, #d4e0f0 0%, #f0f5fa 100%);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.product>.right {
  border-radius: 10px;
}
/* .product>.right:hover{
  margin-top: -10px;
  transition: 0.5s;
} */
</style>