<!--ZM博弈概览页-->
<template>
  <div class="home-wrapper">
    <div class="home-header">
      <div class="header-left">
        <!-- <HeaderMenu></HeaderMenu> -->
      </div>
      <div class="header-right">
        <input :value="input">
      </div>
    </div>
    <div class="content-box">
      <div class="btn-box">
        <div v-for="item in riskItems" :key="item" :class="aciveBtn === item ? 'btn-select' : 'btn'"
          @click="aciveBtn = item">
          <img src="./assets/icons/btn-select-icon.png" v-if="aciveBtn === item" class="btn-icon" />{{
            item }}
        </div>
      </div>
      <RiskToday v-if="aciveBtn === '最新风险动态'" />
      <ScienceNews v-if="aciveBtn === '最新科技要闻'" />
    </div>

  </div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
// import HeaderMenu from "@/components/headerMenu.vue";
import RiskToday from './component/riskToday/index.vue'
import ScienceNews from './component/scienceNews/index.vue'
const input = ref('')
const riskItems = ref([
  "最新风险动态", "最新科技要闻", "美对我打压遏制TS", "中美科技博弈概况"
]);
const aciveBtn = ref('最新风险动态')
</script>

<style lang="scss" scoped>
.home-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: auto;

  .home-header {
    height: 64px;
    background: url("./assets/images/header-bg.png");
    box-sizing: border-box;
    padding: 0 160px;
    display: flex;
    justify-content: space-between;
  }

  .content-box {
    width: 100%;
    height: 100%;
    padding: 16px 160px;

    .btn-box {
      /* 概览页导航 */
      width: 1598px;
      height: 55px;
      /* 自动布局 */
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 8;
      padding: 4px 5px 4px 5px;
      margin-bottom: 20px;
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 10px;
      /* 业务系统/模块阴影 */
      box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
      background: rgba(255, 255, 255, 0.65);

      font-family: YouSheBiaoTiHei;
      color: rgba(59, 65, 75, 1);

      font-family: YouSheBiaoTiHei;
      font-style: Regular;
      font-size: 24px;
      font-weight: 400;
      line-height: 31px;
      letter-spacing: 0px;
      text-align: center;

      .btn {
        /* 容器 1464 */
        width: 391px;
        height: 47px;
        /* 自动布局 */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10;
        padding: 8px 66px 8px 66px;


      }

      .btn-select {
        /* 容器 1462 */
        width: 391px;
        height: 47px;
        padding: 8px 66px 8px 66px;
        box-sizing: border-box;
        border: 1px solid rgba(174, 214, 255, 1);
        border-radius: 10px;
        background: rgba(246, 250, 255, 1);
      }

      .btn-icon {
        /* 容器 1554 */
        width: 18px;
        height: 18px;
        margin-right: 10px;
      }
    }
  }

}
</style>