<template>
  <div class="page flex-col">
    <!-- 使用HeaderNav组件替代重复的导航栏 -->

    <SecondHeader :title="'EVENT INFORMATION'"
                  :bcUrl="bgHeaderUrl" :desc="'企业资质'"
                  :btnGroup="[{ name:'企业资质', url:'/certification', isSelect:true
			}]"/>

    <div class="flex-col">
      <div class="group_3 flex-row">
        <div class="block_2 flex-col">
          <span class="text_5">企业资质</span>
          <span class="text_6">法定与经营合法性</span>
          <img class="image_3" src="@/assets/certification/yyzz.png" alt=""/>
        </div>
        <img class="image_4" src="@/assets/common/caidai.png" alt=""/>
        <img class="image_5" src="@/assets/common/erweima.png" alt=""/>
      </div>
      <div class="group_4 flex-col">
        <span class="text_7">核心技术知识产权</span>
        <span class="text_8">创新是我们的基因。强大的技术专利壁垒，为您构筑无法复制的核心竞争力，确保市场独家优势。</span>
        <div class="image-wrapper_1 flex-row">
          <img class="image_6" :src="item.url" v-for="(item, index) in imgList" :key="index" alt=""/>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import SecondHeader from '../components/second_header.vue';
import {ref} from "vue";
import bgHeaderUrl from '@/assets/certification/topBC.png'
import img1 from '@/assets/certification/img1.png'
import img2 from '@/assets/certification/img2.png'
import img3 from '@/assets/certification/img3.png'
import img4 from '@/assets/certification/img4.png'

const imgList = ref([
  {
    url: img1,
  },
  {
    url: img2,
  },
  {
    url: img3,
  },
  {
    url: img4,
  },
])
</script>
<style src="./common.css"/>
<style scoped>
.page {
  position: relative;
  width: 100vw;
  overflow: hidden;
}

.group_3 {
  width: 85.47vw;
  height: 51.57vw;
  margin: 7.29vw 0 0 13.48vw;
}

.block_2 {
  width: 64.43vw;
  height: 51.57vw;
}

.text_5 {
  background-image: linear-gradient(90deg,
  rgba(0, 82, 217, 1) 0,
  rgba(0, 82, 217, 1) 0,
  rgba(0, 199, 218, 1) 100%,
  rgba(0, 199, 218, 1) 100%);
  overflow-wrap: break-word;
  color: rgba(0, 82, 217, 1);
  font-size: 2.5vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text_6 {
  overflow-wrap: break-word;
  color: rgba(49, 49, 49, 1);
  font-size: 1.87vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.image_3 {
  width: 55.79vw;
  height: 40.63vw;
  border: 1px solid rgba(210, 210, 210, 1);
  margin: 2.91vw 0 0 8.64vw;
}

.image_4 {
  width: 2.09vw;
  height: 0.63vw;
  margin-left: 6.46vw;
}

.image_5 {
  width: 11.46vw;
  height: 19.12vw;
  margin-left: 1.05vw;
}

.group_4 {
  width: 100vw;
  height: 49.38vw;
  background: url(@/assets/certification/bottomBC.png) 100% no-repeat;
  background-size: 100% 100%;
  margin: 6.25vw 0 10.36vw 0;
}

.text_7 {
  width: 14.95vw;
  height: 1.88vw;
  overflow-wrap: break-word;
  color: rgba(49, 49, 49, 1);
  font-size: 1.87vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 1.57vw;
  margin: 6.25vw 0 0 13.54vw;
}

.text_8 {
  width: 52.97vw;
  height: 1.36vw;
  overflow-wrap: break-word;
  color: rgba(49, 49, 49, 1);
  font-size: 1.25vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 1.57vw;
  margin: 2.7vw 0 0 13.48vw;
}

.image-wrapper_1 {
  width: 72.92vw;
  height: 21.88vw;
  justify-content: space-between;
  margin: 5.67vw 0 9.63vw 13.54vw;
}

.image_6 {
  width: 16.67vw;
  height: 21.88vw;
  margin-right: 2.09vw;
}

</style>