<!--
 * @Date: 2024-10-17 11:13:44
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-18 16:26:32
 * @FilePath: /hager/src/views/about/honors.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-about-honors-page">
    <hager-box>
      <div style="margin-top: 1.5rem;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>关于海格</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </hager-box>
    <hager-box>
      <div :class="['top-img', is_xs ? 'xs' : '']"></div>
    </hager-box>
    <hager-box>
      <div class="select-btn-box">
        <div @click="onClickBtn(0)" :class="['btn', active_idx === 0 ? 'active' : 'normal']">行业荣誉</div>
        <div @click="onClickBtn(1)":class="['btn', active_idx === 1 ? 'active' : 'normal']">美学设计</div>
        <div @click="onClickBtn(2)":class="['btn', active_idx === 2 ? 'active' : 'normal']">卓越发展</div>
      </div>
    </hager-box>
    <hager-box v-for="(item, index) in years_list" :key="index">
      <p class="list-title">{{ item.year }}年</p>
      <div class="list-wrapper">
        <div class="card" v-for="(x, idx) in item.list" :key="idx">
          <div class="card-image-box">
            <div class="card-image" :style="{ backgroundImage: `url(${x.img})` }"></div>
          </div>
          <div class="card-content">
            <h3>{{ x.title }}</h3>
            <p>{{ x.content }}</p>
          </div>
        </div>
      </div>
    </hager-box>
    <hager-box>
      <hager-load-more></hager-load-more>
    </hager-box>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerLoadMore from '@/components/hagerLoadMore.vue';

export default {
  components: { hagerBox, hagerLoadMore },
  mixins: [mixin.init],
  data () {
    return {
      active_idx: 0,
      years_list: [{
        year: '2022',
        list: [{
          img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
          title: '金牌合作单位',
          content: '由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。'
        }, {
          img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
          title: '中国建筑学会建筑电气分会',
          content: '海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位'
        }]
      }, {
        year: '2023',
        list: [{
          img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
          title: '金牌合作单位',
          content: '由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。'
        }, {
          img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
          title: '中国建筑学会建筑电气分会',
          content: '海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位'
        }]
      }]
    }
  },
  mounted () {

  },
  methods: {
    onClickBtn (idx) {
      this.active_idx = idx;
    }
  }
}
</script>

<style lang="less" scoped>
  .hager-about-honors-page {
    .top-img {
      height: 22rem;
      background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g21@2x.png);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      margin: 2rem 0;
      &.xs {
        // background-size: contain;
        height: 8rem;
      }
    }

    .select-btn-box {
      margin-bottom: 2rem;
      .btn {
        width: 8rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        display: inline-block;
        padding: 0.5rem 0;
        margin-right: 1rem;
        &.active {
          background-color: @primary-color;
          color: #fff;
          font-weight: bold;
        }
        &.normal {
          background-color: #F3F3F3;
          color: @text-color;
          font-weight: none;
        }
        &:hover {
          cursor: pointer;
        }
      }
    }

    .list-title {
      font-size: 1.75rem;
      font-weight: bold;
      margin-bottom: 1rem;
      color: @secondary-color;
    }

    .list-wrapper {
      margin-bottom: 1rem;
      .card-image-box {
        padding: 1rem;
        background-color: #E3F1F7;
      }
      .card-image {
        width: 100%;
        height: 17rem;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .card-content {
        background-color: #F7F7F7;
        padding: 2rem 1.5rem;
        height: 12rem;
        overflow: scroll;
        h3 {
          color: @secondary-color;
          font-size: 1rem;
          margin: 0;
          margin-bottom: 0.5rem;
        }
        p {
          font-size: 0.95rem;
          line-height: 1.8;
        }
      }
    }

    .list-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start; /* 保证剩余元素靠左对齐 */
    }

    .card {
      flex: 0 0 32.33%; /* 设置宽度为 1/3 */
      margin-bottom: 1rem;
      margin-right: 1.5%; /* 每个项目之间的右侧留空 */
      box-sizing: border-box; /* 保证 padding 和 margin 不影响宽度计算 */
    }

    /* 确保每行的第三个元素没有右边距 */
    .card:nth-child(3n) {
      margin-right: 0;
    }

    /* 伪元素填充最后一行的剩余空间，确保它靠左对齐 */
    .list-wrapper::after {
      content: "";
      flex: auto;
    }

    /* 针对IE的处理 */
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .card {
        width: 32.33%; /* 使用百分比宽度替代 flex-basis 以支持 IE */
        margin-right: 1.5%;
      }

      .card:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
</style>