ContestPortal/src/views/raceInfo/index.vue

<template>
  <div class="container-1420 container">
    

    <!-- 年度比赛详细信息 -->
    <div class="year-race-info">
      <div class="left-info">
        <el-card>
          <template #header>
            <div style="display: flex;justify-content: space-between;">
              <el-breadcrumb>
                <el-breadcrumb-item
                  v-for="item in Route.matched"
                  :key="item.path"
                  :to="{ path: item.path }"
                >
                  {{ item.meta.title }}
                </el-breadcrumb-item>
              </el-breadcrumb>
              <div><el-button @click="scrollToPosition">查看详情</el-button></div>
            </div>
          </template>
          <div>
            <!-- {{  raceInfo  }} -->
            <div class="race-info">
              <div class="top">
                <div class="left">
                  <el-image
                    :src="setImageUrl(raceInfo.compLogo)"
                    style="width: 1.5625rem; height: 100%"
                    :preview-src-list="[
                      setImageUrl(raceInfo.compLogo),
                      setImageUrl(raceInfo.compImg),
                    ]"
                  ></el-image>
                </div>
                <div class="right">
                  <ul>
                    <li>
                      <div class="label">比赛名称:</div>
                      <div class="text">{{ raceInfo.compName }}</div>
                    </li>
                    <li style="width: 40%">
                      <div class="label">负责人:</div>
                      <div class="text">{{ raceInfo.createBy }}</div>
                    </li>
                    <li style="width: 60%">
                      <div class="label">负责部门:</div>
                      <div class="text">{{ raceInfo.comporderc }}</div>
                    </li>
                    <!-- <li style="width: 33%">
                      <div class="label">比赛类型:</div>
                      <div class="text">{{ raceInfo.compTypeId }}</div>
                    </li>
                    <li style="width: 33%">
                      <div class="label">比赛权重:</div>
                      <div class="text">{{ raceInfo.compweight }}</div>
                    </li>
                    <li style="width: 33%">
                      <div class="label">比赛内部排名:</div>
                      <div class="text">{{ raceInfo.compOrder }}</div>
                    </li> -->
                  </ul>
                </div>
              </div>
              <div class="center">
                <div class="label">比赛简介:</div>
                <div class="deaceiption">
                  <!-- <div v-html="raceInfo.compDetail"></div> -->
                  {{ raceInfo.compInfo }}
                  <!-- 亲爱的同学们、老师们以及各位编程爱好者们：
                  在这个充满创新与挑战的时代，一场精彩纷呈的大学生编程大赛即将拉开帷幕。
                  本次大学生编程大赛是智慧与技能的激烈碰撞，是创意与实践的完美结合。它为广大有才华、有梦想的大学生们提供了一个展现自我、超越自我的广阔舞台。
                  在这里，你将与来自不同高校、不同专业的编程高手们同场竞技。大家将用代码编织梦想，用算法开拓未来。无论是擅长网页开发、移动应用编程，还是热衷于数据分析、人工智能算法设计，都能在这个舞台上找到属于自己的一片天地。
                  大赛不仅考验选手们的编程技术水平，更注重创新思维和解决实际问题的能力。在比赛过程中，选手们将面临各种复杂的问题和挑战，需要运用所学知识，发挥创造力，提出独特而有效的解决方案。
                  同时，本次大赛也为同学们提供了一个与行业专家、企业代表交流互动的机会。他们将带来最前沿的技术资讯和行业动态，为同学们的未来发展提供宝贵的建议和指导。
                  来吧，亲爱的大学生们！加入这场编程的盛宴，释放你的无限潜力，用代码书写属于你们的辉煌篇章！让我们一起见证新一代编程之星的诞生！ -->
                </div>
                <div class="label">附件:</div>
                <div class="file">
                  <el-tag
                    v-for="item in fileList"
                    :key="item"
                    type="primary"
                    @click="doLoadFile(item)"
                    style="margin-right: 15px"
                  >
                    {{ item }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="right-history">
        <el-card style="padding: 0">
          <div class="title">历史比赛</div>
          <div class="description">往年历史赛事</div>
          <el-scrollbar height="650px">
            <ul>
              <li v-for="item in historyRaceList" :key="item.id">
                <div class="year">2024年度</div>
                <div class="name">{{ item.name }}</div>
                <div class="time">
                  报名时间:{{ item.starttime }} - {{ item.endtime }}
                </div>
                <!-- <div class="go-to" @click="goToCompetition(item.id)">
                  前往查看
                </div> -->
                <div class="icon">
                  <img src="../../assets/images/编组.png" alt="" srcset="" />
                </div>
              </li>
            </ul>
          </el-scrollbar>
        </el-card>
      </div>
    </div>
    <!-- 年度比赛列表 -->
    <div style="margin-top: 30px; font-size: 24px; font-weight: 600">
      年度比赛列表:
    </div>
    <el-card v-if="reacProjectList.length === 0" style="margin-top: 20px;">
      <div
        style="
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          color: #aaa;
        "
      >
        <svgIcon name="race-none" width="200px" height="200px" />
        <p>没有年度比赛~</p>
      </div>
    </el-card>
    <el-card style="margin-top: 20px;" v-else>
      <div class="race-list">
      <div
        class="item"
        v-for="item in reacProjectList"
        :key="item.id"
        @click="goToCompetition(item.id)"
      >
        <div class="image">
          <img :src="setImageUrl(item.image)" alt=""  v-default-image/>
        </div>
        <div class="reac-info">
          <div class="niandu">{{ item.annualname }}年度</div>
          <div
            class="reac-title"
            style="font-weight: 600; color: #000; font-size: 16px"
          >
            {{ item.name }}
          </div>
          <div class="reac-title">负责部门：{{ item.compOrgan }}</div>
          <!-- <div class="reac-project">{{ item.introduction }}</div> -->
          <div
            class="time"
            style="display: flex; justify-content: space-between"
          >
            <div>开始时间:{{ item.starttime }}</div>
            结束时间:{{ item.endtime }}
            <div></div>
          </div>
          <!-- <div class="time">
           
          </div> -->
        </div>
      </div>
    </div>
    </el-card>
   
    <h3
      style="margin-top: 20px; font-size: 24px; font-weight: 700"
      id="introduction"
    >
      比赛详情
    </h3>
    <div class="race-description" v-html="raceInfo.compDetail"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { getYearRaceList, getRaceInfo, getHistoryRaceList } from '@/api/race'
import { useRouter, useRoute } from 'vue-router'
const Route = useRoute()
const Router = useRouter()
console.log(Route, 'Route')

const defaultImageUrl = '/src/assets/images/item.png'
const reacProjectList = ref<any>([])
const getRaceProjectListEvent = async () => {
  let page = {
    id: Route.query.id,
    column: 'createTime',
    order: 'desc',
    pageNo: 1,
    pageSize: 8,
  }
  const res: any = await getYearRaceList(page)
  console.log(res)
  reacProjectList.value = res.result.slice(0, 8)
  console.log(reacProjectList.value, 'reacProjectList.value ')
}
getRaceProjectListEvent()
const setImageUrl = (url: string) => {
  return import.meta.env.VITE_APP_BASE_API + '/sys/common/static/' + url
}
// 获取比赛详情
const raceInfo = ref<any>({})
const getraceInfoEvent = async () => {
  const res: any = await getRaceInfo({ id: Route.query.id })
  console.log(res)
  createfileLink(res.result.compFile)
  raceInfo.value = res.result
}
getraceInfoEvent()

// 前往年度比赛页面
const goToCompetition = (id: any) => {
  Router.push({ path: '/competition', query: { id, raceId: Route.query.id } })
}

const doLoadFile = (url: any) => {
  // console.log( import.meta.env.VITE_APP_BASE_API + "/sys/common/static/" +  url)
  window.open(import.meta.env.VITE_APP_BASE_API + '/sys/common/static/' + url)
}

// 获取年度历史比赛
const historyRaceList = ref<any>([])
const getHistoryRaceListEvent = async () => {
  const res: any = await getHistoryRaceList({ id: Route.query.id })
  console.log(res)
  historyRaceList.value = res.result
}
getHistoryRaceListEvent()

const fileList = ref<any>([])
const createfileLink = (url: any) => {
  console.log(url)

  const list = url.split(',')
  console.log(list)

  fileList.value = list
}
const scrollToPosition = () => {
      const targetPosition = (document.getElementById('introduction')as HTMLElement).offsetTop - 100;
      window.scrollTo({
        top: targetPosition,
        behavior: 'smooth', // 平滑滚动
      });
    }
</script>

<style lang="scss" scoped>
.container {
  padding-top: 80px;
  .top-image {
    width: 100%;
    height: 300px;
    background-color: skyblue;
    text-align: center;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 300px;
  }
  .race-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    // grid-template-rows: repeat(2, 1fr);
    // gap: 10px;
    // margin-top: 10px;
    .item {
      width: 340px;
      height: 360px;
      // background-color: pink;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
      cursor: pointer;
      border-radius: 10px;
      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: #c9c9c9;
          font-size: 12px;
        }
        .reac-project {
          font-size: 16px;
          font-weight: 600;
          color: #333333;
          margin-top: 10px;
          line-height: 20px;
          height: 60px;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .time {
          font-size: 14px;
          color: #8c8b8b;
          margin-top: 30px;
        }
        .niandu {
          color: #1e2033;
          font-size: 18px;
          margin-top: 20px;
          font-weight: 600;
        }
      }
    }
    .item:hover {
      transform: translateY(-5px);
    }
    .item:nth-child(n) {
      margin-top: 20px;
    }
  }
  .year-race-info {
    display: flex;
    margin-top: 30px;
    min-height: 750px;
    .left-info {
      flex: 1;
    }
    .right-history {
      width: 300px;
      margin-left: 40px;
      .title {
        color: #1e2033;
        font-size: 28px;
        font-weight: 600;
      }
      .description {
        color: #1e2033;
        font-size: 14px;
        margin-top: 15px;
      }
      ul {
        margin-top: 30px;
        li {
          position: relative;
          width: 100%;
          height: 140px;
          // background-color: pink;
          color: #333333;
          padding: 15px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          box-shadow: 0rem 0rem 0.05208rem rgba(0, 0, 0, 0.06);
          margin-top: 10px;
          cursor: pointer;
          .year {
            font-size: 12px;
          }
          .name {
            width: 130px;
            font-size: 16px;
            font-weight: 600;
            margin-top: 10px;
          }
          .time {
            font-size: 12px;
          }
          .go-to {
            position: absolute;
            right: 0;
            top: 0;
            width: 115px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 14px;
            color: #f6f5fb;
            background: url('../../assets/images/left-top.png') no-repeat;
            background-size: contain;
          }
          .icon {
            position: absolute;
            right: 25px;
            top: 50%;
            transform: translateY(-50%);
            width: 34px;
            height: 41px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .race-info {
      .top {
        display: flex;
        height: 200px;
        .right {
          margin-left: 25px;
          flex: 1;
          ul {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 5px;
            li {
              width: 50%;
              display: flex;
              .label {
                font-size: 16px;
                color: #aaa;
                width: 100px;
              }
              .text {
                font-size: 16px;
                font-weight: 600;
              }
            }
            li:first-child {
              align-items: center;
              width: 100%;
              .text {
                font-size: 26px;
              }
            }
            li:nth-child(3n) {
              width: 33%;
            }
          }
        }
      }
      .center {
        margin-top: 25px;
        .label {
          font-size: 16px;
          color: #aaa;
        }
        .deaceiption {
          font-size: 16px;
          text-indent: 2em;
          line-height: 26px;
          margin-top: 15px;
          height: 300px;
        }
        .file {
          margin-top: 25px;
          cursor: pointer;
        }
      }
    }
  }
  .race-description {
    width: 100%;
    font-size: 14px;
    line-height: 22px;
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 20px;
    p {
      img {
        width: 100%;
      }
    }
  }
}
:deep(.el-card) {
  width: 100%;
  height: 100%;
}
img {
  width: 100%;
}
</style>