<template>
  <div style="padding-top: 90px;">
    <div class="custom-wrapper">
      <div class="banner-wrapper">
        <div class="banner-info">
          <div class="custom-main-w">
            <h5 class="title">合作伙伴</h5>
            <h5 class="sub-title">PARTNER</h5>
            <div class="txt">合作、共创、互赢</div>
          </div>
        </div>
        <img src="@/assets/images/partners/hzhb-3.jpg" alt=""/>
      </div>
      <div class="custom-main-w">
        <div class="partner-title">
          <h5>我们的合作伙伴</h5>
          <p>OUR PARTNER</p></div>
        <div class="partner-list">
          <el-row :gutter="15">
            <el-col :span="8" class="is-guttered" v-for="(i,index) in partnerList" :key="index">
              <div class="partner-item">
                <div class="img">
                  <img
                      :src="i.image"
                      alt=""/>
                </div>
                <div class="title">{{ i.title }}</div>
                <p class="desc" v-html="i.description"></p>
                <div class="btn-box">
                  <button @click="handleOpen(i.url)" aria-disabled="false" type="button"
                          class="el-button el-button--default is-plain">
                    <span class="">查看官网 </span>
                  </button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="joinus-box">
        <div class="custom-main-w joinus-inner-box">
          <div class="cell-1 left">
            <h5 class="title">
              普惠算力公共服务平台，期待您的加入</h5>
            <p class="desc">
              让我们共同引领行业创新浪潮，共绘算力时代蓝图，成为超算互联网服务领域的佼佼者</p></div>
          <div class="">
            <a class="a-btn">加入我们</a>
          </div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import {getPartner} from "@/api/industry.js";

const partnerList = ref([])

function getPartnerList() {
  getPartner().then((res) => {
    partnerList.value = res.data
  })
}

function handleOpen(url) {
  if (url) {
    window.open(url);
  }
}

getPartnerList()
</script>

<style scoped lang="scss">
.banner-wrapper {
  height: 400px;
  width: 100%;
  position: relative;
  background: url("@/assets/images/partners/hzhb-2.jpeg") 0 0 / cover;
}

.banner-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  z-index: 1;
  background: url('@/assets/images/partners/hzhb-2.jpeg') 0 0 / cover;
}

.banner-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
}

.banner-info {
  position: absolute;
  inset: 120px 0 90px;
  z-index: 2;
  color: rgb(255, 255, 255);
}

.banner-info .custom-main-w {
  padding-left: 160px;
}

.banner-info .title {
  line-height: 1.6;
  font-size: 30px;
  font-weight: 700;
}

.banner-info .sub-title {
  font-size: 20px;
  line-height: 1.6;
}

.banner-info .txt {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  padding: 0px 20px;
  margin: 20px 0px 0px;
  background-color: rgb(15, 167, 229);
}

.partner-title {
  padding: 80px 0px 30px;
  text-align: center;
}

.partner-title h5 {
  font-size: 30px;
  font-weight: 700;
  line-height: 2;
}

.partner-title p {
  color: rgb(154, 154, 154);
  font-size: 20px;
  line-height: 2;
}

.partner-list {
  margin: 0px 45px;
  padding-bottom: 120px;
}

.partner-item {
  background: rgb(251, 252, 254);
  border-radius: 10px;
  padding: 30px 40px 40px;
  margin-bottom: 50px;
}

.partner-item .img {
  width: 160px;
  height: 70px;
  margin: 0px auto 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.partner-item .img img {
  width: auto;
  max-height: 100%;
  max-width: 100%;
  display: inline-block;
}

.partner-item .title {
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  height: 36px;
  line-height: 36px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  color: rgb(51, 51, 51);
}

.partner-item .desc {
  font-weight: 400;
  font-size: 16px;
  color: rgb(102, 102, 102);
  line-height: 24px;
  margin-top: 9px;
  margin-bottom: 30px;
  height: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.partner-item .btn-box {
  text-align: center;
}

.partner-item .btn-box .el-button {
  height: 40px;
  width: 110px;
  border-radius: 10px;
}

</style>
