<script setup>
const rows1 = [
  `中国电子商会
元宇宙专业委员会
副理事长单位`,
  `河北省电子商务
产教融合共同体
副理事长单位`,
  `企业信用平价
AAA级
信用企业`,
  `全国数智商业
产教融合共同体
副理事长单位`,
  `ISO 9001 
质量管理体系
认证企业`,
]

const rows2 = [
  '国家高新技术企业',
  `质量服务
诚信单位`,
  `2025-2026
诚信供应商`,
  `中国中小企业协会
副会长单位`,
  `ISO 27001
信息安全管理体系
认证企业`,
  `诚信经营
示范单位`,
]
</script>

<template>
  <div class="home-honor">
    <div class="home-honor-inner">
      <div class="home-honor-bg"></div>
      <div class="home-honor-title">
        <h2>获得荣誉</h2>
      </div>
      <div class="home-honor-main">
        <ul>
          <li v-for="item in rows1" :key="item">{{ item }}</li>
        </ul>
        <ul>
          <li v-for="item in rows2" :key="item">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.home-honor {
  background: linear-gradient(161deg, #aa1941 50%, #a24979 100%);

  .home-honor-bg {
    position: absolute;
    bottom: 0;
    right: -310px;
    width: 100%;
    height: 100%;
    background: url(~/assets/images/home/honor_cup.png) no-repeat right bottom;
  }

  .home-honor-inner {
    position: relative;
    max-width: 1300px;
    height: 580px;
    margin: 0 auto;

    .home-honor-title {
      position: relative;
      z-index: 1;

      h2 {
        padding: 90px 0 42px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 30px;
        line-height: 1;
        color: #fff;
        text-align: center;
      }
    }
  }

  .home-honor-main {
    position: relative;
    z-index: 1;

    ul {
      display: flex;
    }

    ul:first-child {
      padding: 0 40px;
      justify-content: space-evenly;
    }

    ul:last-child {
      justify-content: space-between;
    }

    li {
      position: relative;
      width: 174px;
      height: 200px;
      font-size: 18px;
      line-height: 24px;
      background: url(~/assets/images/home/honor_bg.png) no-repeat center center;
      color: #fff;
      text-align: center;
      white-space: pre-wrap;
      padding-top: 62px;

      &::before {
        content: '';
        display: block;
        width: 59px;
        height: 17px;
        background: url(~/assets/images/home/honor_star.png) no-repeat center center;
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
      }

      &:hover {
        background: url(~/assets/images/home/honor_bg_hover.png) no-repeat center center;
      }
    }
  }
}
</style>
