ContestPortal/src/views/home/index.vue

<template>
  <div
    :class="{
      'container-1420': useThemeStore.currentTheme.name !== '白蓝主题' && useThemeStore.currentTheme.name !== '白紫主题',
      'container-100': useThemeStore.currentTheme.name === '白蓝主题' || useThemeStore.currentTheme.name === '白紫主题',
    }"
    v-if="isLoading"
  >
    <div
      class="banner"
      :class="{
        'dark-layout': useThemeStore.isDark,
        'light-blue-layout': useThemeStore.currentTheme.name === '白蓝主题',
        'light-purple-layout': useThemeStore.currentTheme.name === '白紫主题',
        'light-green-layout': useThemeStore.currentTheme.name === '暗夜绿主题',
      }"
    >
      <div class="banner-left">
        <div class="href" v-if="useThemeStore.isDark">
          <a href="https://www.baidu.com">https://www.baidu.com</a>
          <div>网址</div>
        </div>
        <div class="title">
          {{ reacProjectList[0].compName }}
          <br v-if="useThemeStore.isDark" />
          火热报名中
        </div>
        <div class="description">
          <div v-html="reacProjectList[0].compInfo"></div>
        </div>
        <div
          class="application gradient"
          @click="toDetail(reacProjectList[0].id)"
        >
          立即报名
        </div>
      </div>
      <div class="banner-right">
        <img
          src="../../assets/images/pk.png"
          alt="Banner Image"
          v-if="useThemeStore.currentTheme.name === '暗夜主题'"
        />
        <img
          src="../../assets/images/hl.png"
          alt="Banner Image"
          v-else-if="useThemeStore.currentTheme.name === '暗夜绿主题'"
        />
        <img src="../../assets/images/bl.png" alt="Banner Image" v-else />
      </div>
    </div>
    <!-- 比赛列表 -->
    <div class="content" v-if="useThemeStore.currentTheme.name === '白蓝主题'">
      <ul>
        <li>
          <div class="title">1830+</div>
          <div class="description">已报名人数</div>
        </li>
        <li>
          <div class="title">220</div>
          <div class="description">比赛数</div>
        </li>
        <li>
          <div class="title">390</div>
          <div class="description">项目数</div>
        </li>
        <li>
          <div class="title">830+</div>
          <div class="description">获奖数</div>
        </li>
      </ul>
    </div>
    <!-- 新闻列表 -->
   
    <!-- 报名板块 -->
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getRaceList } from '@/api/race'
import { useRouter } from 'vue-router'
import { ElLoading } from 'element-plus'
import { getColumnListApi, queryEssayListApi } from '@/api/news'
import themeStore from '@/store/module/theme'

// 动态导入图片
const pkImage = new URL('@/assets/images/pk.png', import.meta.url).href
const newsImage = new URL('@/assets/images/news.png', import.meta.url).href

const router = useRouter()
const useThemeStore = themeStore()
const reacProjectList = ref<any>([])
const isLoading = ref(false)

const News = ref<any>(['全部', '通知公告', '赛事资讯', '活动速递', '政策文件'])
const getRaceProjectListEvent = async () => {
  let page = {
    column: 'createTime',
    order: 'desc',
    pageNo: 1,
    pageSize: 8,
  }
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(255, 255, 255, 0.7)',
  })
  const res: any = await getRaceList(page)
  console.log(res)
  reacProjectList.value = res.result.slice(0, 8)
  console.log(reacProjectList.value, 'reacProjectList.value ')

  isLoading.value = true
  loading.close()
}
getRaceProjectListEvent()
const active = ref(0)
const setImageUrl = (url: string) => {
  return import.meta.env.VITE_APP_BASE_API + '/sys/common/static/' + url
}

// 前往比赛综述
const toDetail = (id: number) => {
  router.push({
    path: '/race-info',
    query: {
      id,
    },
  })
}
const toNewsDetail = (id: number) => {
  router.push({
    path: '/detail/' + id,
  })
}
// 获取新闻栏目
const newList = ref<any>([])
const getNewsList = async () => {
  const res: any = await getColumnListApi()
  // console.log(res)
  newList.value = res.result.slice(0, 4)
  // console.log(newList.value, 'newList.value')
  newInfo.value = newList.value[0]
  getNewInfo(newList.value[0].id)
}
getNewsList()

// 新闻详情
const newInfo = ref<any>({})
// 栏目下的新闻
const childrenNewList = ref<any>([])
const getNewInfo = async (id: any) => {
  const res: any = await queryEssayListApi(id)
  childrenNewList.value = res.result.records
  // console.log(childrenNewList, 'childrenNewList')
}

// 切换tab
const toggleTab = (item: any, index: number) => {
  active.value = index
  newInfo.value = item
  getNewInfo(newInfo.value.id)
}
</script>
<script lang="ts">
export default {
  name: 'Home', // 必须显式设置
}
</script>
<style lang="scss" scoped>
.banner {
  position: relative;
  width: 100%;
  height: 692px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // padding: 0 100px;
  background-image: url('../../assets/images/banner1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0 20px;

  &:not(.dark-layout):not(.light-blue-layout):not(.light-purple-layout) {
    .banner-left {
      position: relative;
      z-index: 2;
      width: 100%;
      text-align: center;
      .title {
        font-size: 32px;
        font-weight: 600;
        color: var(--text-color);
        margin-bottom: 37px;
        line-height: 40px;
        margin-top: 20px;
      }

      .description {
        // width: 1074px;
        text-align: center;
        font-size: 14px;
        color: var(--text-color);
        opacity: 0.65;
        line-height: 28px;
        margin-bottom: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .href {
        display: flex;
        align-items: center;
        a {
          background: linear-gradient(90deg, #61f7ee, #2ce2af, #2370e6);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 40px;
          font-weight: 600;
        }
        div {
          background: linear-gradient(90deg, #fcf69c, #fdca43, #fcf69c);
          color: #3d1100;
          width: 74px;
          height: 37px;
          border-radius: 5px;
          margin-left: 20px;
          font-size: 18px;
          text-align: center;
          line-height: 37px;
        }
      }
      .application {
        width: 160px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-radius: 10px;
        font-size: 20px;
        cursor: pointer;
        color: #fff;
        background: var(--gradient-color);
        transition: all 0.3s;
        margin: 0 auto;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
      }
    }

    .banner-right {
      display: none;
    }
  }

  &.dark-layout {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    background: var(--background-color);
    background-image: none !important;

    .banner-left {
      flex: 1;
      text-align: left;
      padding-right: 60px;

      .title {
        font-size: 50px;
        font-weight: 600;
        color: var(--text-color);
        margin-bottom: 37px;
        line-height: 65px;
        margin-top: 20px;
      }

      .description {
        width: 100%;
        text-align: left;
        font-size: 20px;
        color: var(--text-color);
        opacity: 0.65;
        line-height: 32px;
        margin-bottom: 50px;
        overflow: visible;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .application {
        width: 160px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-radius: 10px;
        font-size: 20px;
        cursor: pointer;
        color: #fff;
        background: var(--gradient-color);
        transition: all 0.3s;
        margin: 0 auto;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
      }

      .href {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        a {
          background: linear-gradient(90deg, #61f7ee, #2ce2af, #2370e6);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 40px;
          font-weight: 600;
        }
        div {
          background: linear-gradient(90deg, #fcf69c, #fdca43, #fcf69c);
          color: #3d1100;
          width: 74px;
          height: 37px;
          border-radius: 5px;
          margin-left: 20px;
          font-size: 18px;
          text-align: center;
          line-height: 37px;
        }
      }
    }

    .banner-right {
      display: flex;
      flex: 1;
      height: 65%;
      align-items: center;
      justify-content: center;

      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 12px;
        // box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      }
    }
  }

  &.light-blue-layout {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    background: var(--background-color);
    background-image: none !important;

    .banner-left {
      flex: 1;
      text-align: left;
      padding-right: 60px;
      margin-left: 180px;

      .title {
        font-size: 50px;
        font-weight: 600;
        color: var(--text-color);
        margin-bottom: 37px;
        line-height: 65px;
        margin-top: 20px;
      }

      .description {
        width: 100%;
        text-align: left;
        font-size: 20px;
        color: var(--text-color);
        opacity: 0.65;
        line-height: 32px;
        margin-bottom: 50px;
        overflow: visible;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .application {
        width: 160px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-radius: 10px;
        font-size: 20px;
        cursor: pointer;
        color: #fff;
        background: var(--gradient-color);
        transition: all 0.3s;
        margin: 0 auto;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
      }

      .href {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        a {
          background: linear-gradient(90deg, #61f7ee, #2ce2af, #2370e6);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 40px;
          font-weight: 600;
        }
        div {
          background: linear-gradient(90deg, #fcf69c, #fdca43, #fcf69c);
          color: #3d1100;
          width: 74px;
          height: 37px;
          border-radius: 5px;
          margin-left: 20px;
          font-size: 18px;
          text-align: center;
          line-height: 37px;
        }
      }
    }

    .banner-right {
      display: flex;
      width: 845px;
      height: 65%;
      align-items: center;
      justify-content: center;

      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 12px;
        // box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      }
    }
    .news-list {
      width: 1200px;
    }
  }

  &.light-purple-layout {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    background: var(--background-color);
    background-image: url(../../assets/images/bzbanner.png);

    .banner-left {
      flex: 1;
      text-align: left;
      padding-right: 60px;
      margin-left: 180px;

      .title {
        font-size: 50px;
        font-weight: 600;
        color: var(--text-color);
        margin-bottom: 37px;
        line-height: 65px;
        margin-top: 20px;
      }

      .description {
        width: 100%;
        text-align: left;
        font-size: 20px;
        color: var(--text-color);
        opacity: 0.65;
        line-height: 32px;
        margin-bottom: 50px;
        overflow: visible;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .application {
        width: 160px;
        height: 64px;
        text-align: center;
        line-height: 64px;
        border-radius: 10px;
        font-size: 24px;
        color: #fff;
        cursor: pointer;
        background: linear-gradient(90deg, #B46EFD, #684FFF);
        transition: all 0.3s;
        margin: 0;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
      }
    }

    .banner-right {
      display: flex;
      width: 845px;
      height: 65%;
      align-items: center;
      justify-content: center;

      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 12px;
      }
    }
    .news-list {
      width: 1200px;
    }
  }
}

// 白蓝主题特殊样式
:deep(.light) {
  .banner {
    width: 100vw;
    background-color: #ffffff;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    background-image: none;
  }
}
.race-list {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  margin-top: 40px;
  .item {
    width: 340px;
    height: 360px;
    background-color: var(--card-bg-color);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    transition: all 0.2s;
    .image {
      width: 100%;
      height: 194px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .reac-info {
      padding: 0 8px;
      .reac-title {
        margin-top: 19px;
        color: var(--text-color);
        opacity: 0.45;
        font-size: 12px;
      }
      .reac-project {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-color);
        margin-top: 10px;
      }
      .time {
        font-size: 14px;
        color: var(--text-color);
        opacity: 0.65;
        margin-top: 40px;
      }
    }
  }
  .item:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
  }
  .item:nth-child(n) {
    margin-top: 20px;
  }
  .more {
    position: absolute;
    right: 20px;
    top: -20px;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 14px;
  }
}
.news-list {
  margin-top: 170px;
  background: var(--background-color);
  .news-title {
    .top {
      font-size: 40px;
      font-weight: 600;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-color);
      div {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 10px;
      }
      div:last-child {
        cursor: pointer;
        transition: all 0.2s;
        &:hover {
          color: var(--primary-color);
          transform: scale(1.2);
        }
      }
    }
    .bottom {
      font-size: 16px;
      text-align: center;
      margin-top: 10px;
      color: var(--text-color);
      opacity: 0.65;
    }
  }
  .newa-panel {
    width: 100%;
    height: 630px;
    background: var(--card-bg-color);
    backdrop-filter: blur(10px);
    box-shadow: 2px 6px 14px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    margin-top: 25px;
    padding-top: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;

    .tab {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 90%;
      .item {
        width: 152px;
        height: 70px;
        border-radius: 10px;
        text-align: center;
        line-height: 70px;
        color: var(--text-color);
        font-size: 18px;
        background: var(--card-bg-color);
        border: 1px solid var(--border-color);
        cursor: pointer;
        transition: all 0.2s;
        margin-right: 48px;
      }
      .item:hover {
        transform: scale(1.1);
        background: var(--gradient-color);
      }
      .item:last-child {
        margin: 0;
      }
      .active {
        color: #fff;
        background: var(--primary-color);
        background: var(--gradient-color);
      }
    }
    .newa-main {
      width: 90%;
      height: 465px;
      padding: 58px 54px 19px 25px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        width: 546px;
        height: 388px;
        background-color: #1f1f1f;
        border-radius: 15px;
        overflow: hidden;
        img {
          border-radius: 10px;
        }
      }
      .right {
        flex: 1;
        height: 388px;
        margin-left: 89px;
        padding: 15px 0;

        &.full-width {
          margin-left: 0;
          width: 100%;
        }

        .title {
          font-size: 24px;
          font-weight: 600;
          color: var(--text-color);
        }
        .description {
          font-size: 14px;
          margin-top: 10px;
          color: var(--text-color);
          opacity: 0.65;
        }
        .newa-main-list {
          width: 100%;
          height: 270px;
          margin-top: 38px;
          ul {
            width: 100%;
            height: 100%;
            li {
              width: 100%;
              height: 65px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 20px;
              border-bottom: 1px solid var(--border-color);
              border-radius: 8px;

              &:last-child {
                border-bottom: none;
              }

              &:hover {
                background-color: rgba(97, 247, 238, 0.1);
              }

              .time {
                font-size: 14px;
                color: var(--text-color);
                opacity: 0.45;
              }
              .info {
                position: relative;
                font-size: 14px;
                color: var(--text-color);
                flex: 1;
                margin-right: 20px;

                &:hover {
                  color: var(--primary-color);
                }
              }
            }
          }
        }
      }
    }
  }
}
.light-blue-news {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .newa-panel {
    width: 1110px;
    height: auto !important;
    border: none;
    box-shadow: none;
    .newa-main{
      width: 100% !important;
    height: auto !important;

    }
  }
  .tab {
    .item {
      width: 152px;
      height: 70px;
      border-radius: 8px;
      margin-right: 48px;
      border: none;
      box-shadow: 0.01042rem 0.03125rem 0.07292rem rgba(0, 0, 0, 0.25);
    }
  }
  .newa-main {
  padding: 0 !important;
    .right {
    height: auto !important;

      .title{
        display: none !important;
      }
      margin-left: 0 !important;
      .newa-main-list {
        height: auto !important;

        // overflow: hidden !important;
        ul {
        display: flex;
        flex-wrap: wrap;
          li {
            padding: 0 !important;
          flex-direction: column !important;
        align-items: start !important;
        // box-shadow: 0.01042rem 0.03125rem 0.07292rem rgba(0, 0, 0, 0.25);
            border: none !important;
          justify-content: start !important;
            width: 350px !important;
            height: 358px !important;
            transition: all 0.2s !important;
            .img{
              width: 100%;
              height: 200px;
              // height: 100%;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .info{
              margin-top: 10px;
              color: #292D33;
              height: 50px;
              font-size: 18px !important;
              font-weight: 600 !important;
              // height: 30px !important;
              flex: none !important;
              padding: 0 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              line-height: 25px;
            }
            .time{
              margin-top: 10px;
              padding: 0 10px;
            }
            &:not(:nth-child(3n)){
              margin-right: 30px;
            }
            &:hover{
              background: #fff !important;
              transform: translateY(-5px) !important;
              box-shadow: 0px -4px 18px 1px rgba(0,0,0,0.15);

            }
          }
        }
      }
    }
  }
}
.light-purple-news {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .newa-panel {
    width: 1110px;
    height: auto !important;
    border: none;
    box-shadow: none;
    .newa-main{
      width: 100% !important;
      height: auto !important;
    }
  }
  .tab {
    .item {
      width: 152px;
      height: 70px;
      border-radius: 8px;
      margin-right: 48px;
      border: none;
      box-shadow: 0.01042rem 0.03125rem 0.07292rem rgba(0, 0, 0, 0.25);
    }
  }
  .newa-main {
    padding: 0 !important;
    .right {
      height: auto !important;
      .title{
        display: none !important;
      }
      margin-left: 0 !important;
      .newa-main-list {
        height: auto !important;
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            padding: 0 !important;
            flex-direction: column !important;
            align-items: start !important;
            border: none !important;
            justify-content: start !important;
            width: 350px !important;
            height: 358px !important;
            transition: all 0.2s !important;
            .img{
              width: 100%;
              height: 200px;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .info{
              margin-top: 10px;
              color: #292D33;
              height: 50px;
              font-size: 18px !important;
              font-weight: 600 !important;
              flex: none !important;
              padding: 0 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              line-height: 25px;
            }
            .time{
              margin-top: 10px;
              padding: 0 10px;
            }
            &:not(:nth-child(3n)){
              margin-right: 30px;
            }
            &:hover{
              background: #fff !important;
              transform: translateY(-5px) !important;
              box-shadow: 0px -4px 18px 1px rgba(0,0,0,0.15);
            }
          }
        }
      }
    }
  }
}
.signup-section {
  padding: 40px 0;
  background-color: var(--card-bg-color);
  border-radius: 12px;
  margin: 20px 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;

  .signup-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    gap: 40px;

    .signup-text {
      flex: 1;
      text-align: left;

      h2 {
        font-size: 28px;
        color: var(--text-color);
        margin-bottom: 16px;
        font-weight: 600;
      }

      p {
        font-size: 16px;
        color: var(--text-color);
        opacity: 0.8;
        margin-bottom: 24px;
        line-height: 1.6;
      }

      .signup-button {
        display: inline-block;
        padding: 12px 32px;
        background: var(--gradient-color);
        color: white;
        border-radius: 25px;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s;
        border: none;
        cursor: pointer;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
      }
    }

    .signup-image {
      flex: 1;
      max-width: 500px;
      height: 300px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s;

        &:hover {
          transform: scale(1.05);
        }
      }
    }
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
}

// 在暗黑主题下调整样式
:deep(.dark) {
  .signup-section {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);

    .signup-content {
      .signup-text {
        h2 {
          color: var(--text-color);
        }
        p {
          color: var(--text-color);
        }
      }
    }
  }
}
.content {
  width: 100%;
  // left: -240px;
  position: relative;
  height: 244px;
  background-color: #185cff;
  display: flex;
  justify-content: center;
  ul {
    width: 1420px;
    display: flex;
    align-items: center;
    justify-content: center;
    li {
      width: 25%;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title {
        font-size: 40px;
        font-weight: 600;
      }
      .description {
        font-size: 16px;
        margin-top: 20px;
      }
      &:not(:last-child) {
        border-right: 1px solid #ffffff44;
      }
    }
  }
}
</style>