<template>
  <div class="pageHeader flex-col justify-end" :style="{
    background: `url(${bcUrl}) 100% no-repeat`,
    backgroundSize: '100% 100%'
  }">
    <!-- 使用HeaderNav组件替代重复的导航栏 -->
    <HeaderNav/>
    <div class="flex-row">
      <div class="flex-col pageBox">
        <div class="flex-col">
          <span class="title">{{ title }}</span>
          <span class="desc">{{ desc }}</span>
        </div>
        <img class="line" src="@/assets/common/line.png"/>
      </div>
      <span class="secondTitle">{{ secondTitle }}</span>
    </div>
    <div class="page_btn_box flex-row">
      <div class="box_group_left flex-row">
        <div v-for="item in btnGroup">
          <div class=" align-center justify-around flex-col" @click="toPage(item)"
               :class="item.isSelect == true ? 'item_select':'item_noselect'">
            <span class="itemName">{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="box_group_right justify-around align-center">
        <div @click="toPage({url:'/'})">
          <span class="home_title">HOME</span>
          <img src="@/assets/common/home.png"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import HeaderNav from './HeaderNav.vue'
import {
  useRouter
} from 'vue-router/dist/vue-router';


const props = defineProps({
  title: '',
  desc: '',
  bcUrl: '',
  secondTitle: '',
  btnGroup: []
})

const router = useRouter()
const toPage = (item) => {
  router.push(item.url)
}
</script>

<style scoped>
.pageHeader {
  height: calc(100vw / 16 * 7.60);
  width: 100vw;
}

.pageBox {
  width: 36vw;
  margin-left: 14vw;
}

.secondTitle {
  width: 36vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.87vw;
  font-family: OPPOSans-R;
  position: relative;
  top: 1vw;
}

.title {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 4vw;
  font-family: Gilroy-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.desc {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.6vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
}

.line {
  width: 0.27vw;
  height: 3vw;
  margin-left: 0.2vw;
  margin-top: 1vw;
}

.page_btn_box {
  width: 86vw;
  height: 5.2vw;
  margin: 12.4vw 0 0 14vw;
  background-color: #00C7DA;
  background-size: 100% 100%;
}

.box_group_left {
  width: 70vw;
}

.box_group_right {
  width: 16vw;
  height: 5.2vw;
}

.item_select {
  height: 5.2vw;
  background-color: #0052D9;
  background-size: 100% 100%;
  width: 18vw;
}

.item_noselect {
  height: 5.2vw;
  background-size: 100% 100%;
  width: 18vw;
}

.itemName {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.6vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
}

.home_title {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1vw;
  font-family: Gilroy-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  margin-right: 1vw;
  position: relative;
  top: -0.1vw;
}
</style>