<template>
  <div style="background: #F5F5FA;">
    <a-carousel class="carousel">
      <div class="first-carousel">
        <div class="first-carousel-content-div">
          <div class="title">公开、公平、公正、诚实信用</div>
          <div class="sub-title">以透明接受监督，以公平维系秩序，以公正树立权威，以信用铸就基石</div>
          <div class="icon"></div>
        </div>
      </div>
      <div></div>
      <div></div>
    </a-carousel>
    <div class="list-div">
      <div class="menu-div">
        <div class="title">招标专区</div>
        <div :class="`menu-button ${activeMenu == '招标公告'? 'menu-active': ''}`" @click="changeMenu('招标公告')">招标公告</div>
        <div :class="`menu-button ${activeMenu == '变更公告'? 'menu-active': ''}`" @click="changeMenu('变更公告')">变更公告</div>
        <div :class="`menu-button ${activeMenu == '中标公告'? 'menu-active': ''}`" @click="changeMenu('中标公告')">中标公告</div>
        <div :class="`menu-button ${activeMenu == '废标公告'? 'menu-active': ''}`" @click="changeMenu('废标公告')">废标公告</div>
      </div>
      <div class="content-div">
        <div class="content-menu">
          <div class="menu-item" @click="changeContentMenu('全部')">
            全部
            <div v-if="contentActiveMenu == '全部'" class="menu-item-active"></div>
          </div>
          <div class="menu-item" @click="changeContentMenu('材料')">
            材料
            <div v-if="contentActiveMenu == '材料'" class="menu-item-active"></div>
          </div>
          <div class="menu-item" @click="changeContentMenu('工程')">
            工程
            <div v-if="contentActiveMenu == '工程'" class="menu-item-active"></div>
          </div>
          <div class="menu-item" @click="changeContentMenu('服务')">
            服务
            <div v-if="contentActiveMenu == '服务'" class="menu-item-active"></div>
          </div>
        </div>
        <div class="content-list">
          <div class="content-list-item" v-for="value in 10">
            <div style="display: flex; align-items: center;">
              <div class="list-icon"></div>
              <div class="list-title">材料｜XXXXXXXXX省文化旅游科技有限公司2025年品牌推广及会务会展公开招标公告…</div>
            </div>
            <div class="list-time">[ 2025-10-08 ]</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const activeMenu = ref('招标公告')
const contentActiveMenu = ref('全部')
const changeMenu = (type) => {
  activeMenu.value = type
}
const changeContentMenu = (type) => {
  contentActiveMenu.value = type
}
</script>

<style lang="scss" scoped>


:deep(.slick-slide h3) {
  color: #fff;
}
.carousel{
  margin-bottom: 36px;
  :deep(.slick-slide) {
    text-align: center;
    height: 621px;
    // line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }
  :deep(.slick-dots){
    li{
      width: 62px;
    }
  }
  .first-carousel{
    position: relative;
    width: 100%;
    height: 621px;
    aspect-ratio: 1920 / 621;
    background-image: url('/public/homepage/homepage_first_carousel.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    .first-carousel-content-div{
      position: absolute;
      top: 62px;
      left: 135px;
      .title{
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        font-size: 80px;
        color: #FFFFFF;
        line-height: 112px;
        text-align: left;
        font-style: normal;
        margin-bottom: 13px;
      }
      .sub-title{
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        font-size: 30px;
        color: #FFFFFF;
        line-height: 42px;
        text-align: left;
        margin-bottom: 50px;
      }
      .icon{
        width: 68px;
        height: 4px;
        background: #FFFFFF;
      }
    }
  }
}
.list-div{
  margin: auto;
  width: 1440px;
  height: 756px;
  margin-bottom: 66px;
  display: flex;
  .menu-div{
    width: 394px;
    height: 756px;
    padding-top: 31px;
    padding-left: 43px;
    background-image: url('/public/homepage/homepage_menu.png');
    background-size: 100% 100%;
    .title{
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      font-size: 46px;
      color: #FFFFFF;
      line-height: 65px;
      text-align: left;
      margin-bottom: 42px;
    }
    .menu-button{
      width: 100%;
      height: 74px;
      margin-bottom: 16px;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      font-size: 30px;
      color: #FFFFFF;
      line-height: 42px;
      padding-left: 42px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .menu-active{
      border-radius: 37px 0px 0px 37px;
      background: linear-gradient( 126deg, #F5F7FB 0%, #F8F9FF 100%);
      border-radius: 37px 0px 0px 37px;
      color: #175DD6;
    }
  }
  .content-div{
    width: 1046px;
    padding: 22px 38px 69px 35px;
    background: #FFFFFF;
    box-shadow: 0px 5px 10px 0px rgba(241,242,250,0.5);
    border-radius: 0px 12px 12px 0px;
    .content-menu{
      height: 65px;
      background: #F5F7FB;
      padding-top: 16px;
      padding-left: 19px;
      display: flex;
      margin-bottom: 7px;
      .menu-item{
        width: 94px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 22px;
        color: #1C1C1C;
        line-height: 34px;
        text-align: left;
        // margin-bottom: 9px;
        margin-right: 74px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        cursor: pointer;
      }
      .menu-item-active{
        margin-top: 9px;
        width: 100%;
        height: 6px;
        background: #0081FF;
        border-radius: 5px 5px 0px 0px;
      }
    }
    .content-list{
      padding-left: 17px;
      .content-list-item{
        width: 100%;
        height: 65px;
        border-bottom: 1px dashed rgba(87, 112, 134, 0.3);
        display: flex;
        padding-left: 4px;
        padding-right: 6px;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        .list-icon{
          width: 6px;
          height: 6px;
          background: #0081FF;
          margin-right: 11px;
          border-radius: 50%;
        }
        .list-title{
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 16px;
          color: #1C1C1C;
          line-height: 34px;
        }
        .list-time{
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 16px;
          color: #1C1C1C;
          line-height: 34px;
          opacity: 0.48;
        }
      }
      .content-list-item:hover{
        background: #F5F7FB;
        .list-title{
          color: #0081FF;
        }
        .list-time{
          opacity: 1;
        }
      }
    }
  }
}
</style>
