获取年度比赛项目id

src/api/race.ts

@@ -127,4 +127,12 @@ export const cancelRace = (params: any) => {
     method: 'GET',
     params,
   })
-}
+}
+// 获取项目id
+export const getProjectId = (params: any) => {
+  return request({
+    url: '/comp/comp/findanncomppid',
+    method: 'GET',
+    params,
+  })
+}

src/styles/index.scss

@@ -46,4 +46,9 @@
 }
 img{
   width: 100%;
+}
+.race-description{
+  p{
+    line-height: 30px;
+  }
 }

src/views/raceInfo/index.vue

@@ -1,13 +1,11 @@
 <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;">
+            <div style="display: flex; justify-content: space-between">
               <el-breadcrumb>
                 <el-breadcrumb-item
                   v-for="item in Route.matched"
@@ -17,7 +15,9 @@
                   {{ item.meta.title }}
                 </el-breadcrumb-item>
               </el-breadcrumb>
-              <div><el-button @click="scrollToPosition">查看详情</el-button></div>
+              <div>
+                <el-button @click="scrollToPosition">查看详情</el-button>
+              </div>
             </div>
           </template>
           <div>
@@ -121,7 +121,7 @@
     <div style="margin-top: 30px; font-size: 24px; font-weight: 600">
       年度比赛列表:
     </div>
-    <el-card v-if="reacProjectList.length === 0" style="margin-top: 20px;">
+    <el-card v-if="reacProjectList.length === 0" style="margin-top: 20px">
       <div
         style="
           display: flex;
@@ -135,43 +135,43 @@
         <p>没有年度比赛~</p>
       </div>
     </el-card>
-    <el-card style="margin-top: 20px;" v-else>
+    <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
+          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="time">
+          <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>
-    </div>
     </el-card>
-   
+
     <h3
       style="margin-top: 20px; font-size: 24px; font-weight: 700"
       id="introduction"
@@ -184,7 +184,12 @@
 
 <script lang="ts" setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
-import { getYearRaceList, getRaceInfo, getHistoryRaceList } from '@/api/race'
+import {
+  getYearRaceList,
+  getRaceInfo,
+  getHistoryRaceList,
+  getProjectId,
+} from '@/api/race'
 import { useRouter, useRoute } from 'vue-router'
 const Route = useRoute()
 const Router = useRouter()
@@ -220,7 +225,11 @@ const getraceInfoEvent = async () => {
 getraceInfoEvent()
 
 // 前往年度比赛页面
-const goToCompetition = (id: any) => {
+const goToCompetition = async (id: any) => {
+  const projectId = await getProjectId({ anncmopid: id })
+  console.log(projectId)
+
+  return
   Router.push({ path: '/competition', query: { id, raceId: Route.query.id } })
 }
 
@@ -248,12 +257,13 @@ const createfileLink = (url: any) => {
   fileList.value = list
 }
 const scrollToPosition = () => {
-      const targetPosition = (document.getElementById('introduction')as HTMLElement).offsetTop - 100;
-      window.scrollTo({
-        top: targetPosition,
-        behavior: 'smooth', // 平滑滚动
-      });
-    }
+  const targetPosition =
+    (document.getElementById('introduction') as HTMLElement).offsetTop - 100
+  window.scrollTo({
+    top: targetPosition,
+    behavior: 'smooth', // 平滑滚动
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -471,7 +481,7 @@ const scrollToPosition = () => {
     font-size: 14px;
     line-height: 22px;
     border: 1px solid #ccc;
-    padding: 10px;
+    padding: 20px;
     margin-top: 20px;
     p {
       img {