修改创新大赛的详情

src/views/innovation/detail.vue

@@ -2,26 +2,324 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <el-col :span="24" class="one"> 详情 </el-col>
+        <div class="w_1200">
+          <el-col :span="24" class="one">
+            <el-row :span="24" class="list">
+              <div class="join" :class="[info.match_status == '0' ? 'join0' : 'join1']">
+                {{ getDict(info.match_status, 'status') }}
+              </div>
+              <el-col :span="4" class="left">
+                <el-image
+                  v-if="info.file && info.file.length > 0"
+                  class="image"
+                  :src="info.file[0].url"
+                  fit="fill"
+                />
+                <el-image v-else class="image" :src="news" fit="fill" />
+              </el-col>
+              <el-col :span="20" class="right">
+                <el-col :span="24" class="right_1">
+                  <span class="type">{{ getDict(info.form, 'form') }}</span>
+                  <span class="title">{{ info.name || '暂无比赛名称' }}</span>
+                </el-col>
+                <el-col :span="24" class="right_2">
+                  组织单位：{{ info.organization || '暂无组织单位' }}
+                </el-col>
+                <el-col :span="24" class="right_3">
+                  <el-col :span="20" class="right_3Left">
+                    比赛日期：{{ getTime(info.time) }}
+                  </el-col>
+                  <el-col :span="4" class="right_3Right">
+                    {{ info.money || '免费' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="right_4">
+                  <el-tag type="primary">{{ getDict(info.type, 'type') }}</el-tag>
+                </el-col>
+              </el-col>
+            </el-row>
+          </el-col>
+          <el-col :span="24" class="two">
+            <el-row class="two_1">
+              <el-col :span="22" class="twoLeft">
+                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+                  <el-tab-pane label="赛制规则" name="first"></el-tab-pane>
+                  <el-tab-pane label="数据与评测" name="second"></el-tab-pane>
+                  <el-tab-pane label="常见问题" name="third"></el-tab-pane>
+                </el-tabs>
+              </el-col>
+              <el-col :span="2" class="twoRight">
+                <a-button type="primary" @click="toChat"> 报名参赛 </a-button>
+              </el-col>
+            </el-row>
+            <el-row class="two_2" v-if="activeName === 'first'">
+              <el-container style="height: 500px">
+                <el-aside width="200px">
+                  <el-menu default-active="rules1" class="el-menu" @select="selectOpen">
+                    <el-menu-item
+                      :index="item.label"
+                      v-for="(item, index) in menuList"
+                      :key="index"
+                    >
+                      <el-icon><Opportunity /></el-icon>
+                      <span>{{ item.title }}</span>
+                    </el-menu-item>
+                  </el-menu>
+                </el-aside>
+                <el-main>
+                  <el-col :span="24" v-if="rulesInfo.key !== 'rules12'">
+                    <h2>{{ rulesInfo.title }}</h2>
+                    <p>{{ rulesInfo.content }}</p>
+                  </el-col>
+                  <el-col :span="24" v-else>
+                    <h2>{{ rulesInfo.title }}</h2>
+                    <div v-html="rulesInfo.content"></div>
+                  </el-col>
+                </el-main>
+              </el-container>
+            </el-row>
+            <el-row class="two_2" v-if="activeName === 'second'"> 数据与评测 </el-row>
+            <el-row class="two_2" v-if="activeName === 'third'">
+              <div v-html="info.brief"></div>
+            </el-row>
+          </el-col>
+        </div>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script setup>
+import { get } from 'lodash-es'
+const $checkRes = inject('$checkRes')
+// 接口
+import { DictDataStore } from '@/store/api/system/dictData'
+import { MatchStore } from '@/store/api/platform/match'
+const store = MatchStore()
+const dictDataStore = DictDataStore()
+// 图片引入
+import news from '@/assets/news.png'
+// 路由
+const route = useRoute()
 // 加载中
 const loading = ref(false)
 const info = ref({})
-
+const rulesInfo = ref({})
+const activeName = ref('first')
+// 字典表
+const statusList = ref([])
+const typeList = ref([])
+const formList = ref([])
+const menuList = ref([
+  { title: '大赛背景', label: 'rules1' },
+  { title: '大赛主题和目标', label: 'rules2' },
+  { title: '大赛基本情况介绍', label: 'rules3' },
+  { title: '赛题任务', label: 'rules4' },
+  { title: '赛程安排', label: 'rules5' },
+  { title: '赛制阶段', label: 'rules6' },
+  { title: '参赛资格', label: 'rules7' },
+  { title: '参赛报名', label: 'rules8' },
+  { title: '奖项设置与奖励办法', label: 'rules9' },
+  { title: '组织单位', label: 'rules10' },
+  { title: '赛事联络', label: 'rules11' },
+  { title: '赛事交流', label: 'rules12' }
+])
 // 请求
 onMounted(async () => {
   loading.value = true
-  search()
+  await searchOther()
+  await search()
   loading.value = false
 })
-const search = async () => {}
+const searchOther = async () => {
+  let result
+  // 类型
+  result = await dictDataStore.query({ code: 'matchType', is_use: '0' })
+  if ($checkRes(result)) typeList.value = result.data
+  // 类别
+  result = await dictDataStore.query({ code: 'matchForm', is_use: '0' })
+  if ($checkRes(result)) formList.value = result.data
+  // 赛事状态
+  result = await dictDataStore.query({ code: 'matchStatus', is_use: '0' })
+  if ($checkRes(result)) statusList.value = result.data
+}
+
+const search = async () => {
+  let id = route.query.id
+  if (id) {
+    let res = await store.fetch(id)
+    if (res.errcode == '0') {
+      info.value = res.data
+      rulesInfo.value = { title: '大赛背景', key: 'rules1', content: res.data.rules.rules1 }
+    }
+  }
+}
+// 字典数据转换
+const getDict = (data, model) => {
+  let res
+  if (model == 'status') res = statusList.value.find((f) => f.value == data)
+  else if (model == 'type') res = typeList.value.find((f) => f.value == data)
+  else if (model == 'form') res = formList.value.find((f) => f.value == data)
+  return get(res, 'label')
+}
+// 时间
+const getTime = (data) => {
+  if (data) return `${data[0]} - ${data[1]}`
+}
+const selectOpen = (key, keyPath) => {
+  const res = menuList.value.find((f) => f.label == key)
+  if (res) {
+    rulesInfo.value = { title: get(res, 'title'), key, content: get(info.value.rules, key) }
+  }
+}
 </script>
 <style scoped lang="scss">
 .main {
+  background: rgb(248, 248, 248);
+  .one {
+    margin-top: 20px;
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
+
+    .list {
+      display: flex;
+      align-items: center;
+      min-height: 150px;
+      width: 100%;
+      margin-bottom: 10px;
+      position: relative;
+      overflow: hidden;
+      border: 1px solid #f5f5f5;
+      .left {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .image {
+          width: 180px;
+          height: 120px;
+        }
+      }
+      .right {
+        .right_1 {
+          padding: 10px 0 0 0;
+          .type {
+            padding-left: 4px;
+            padding-right: 4px;
+            height: 22px;
+            line-height: 20px;
+            background: #f8f9fc;
+            border-radius: 1px;
+            border: 1px solid #dde2e7;
+            font-size: 12px;
+            font-family:
+              PingFangSC-Regular,
+              PingFang SC;
+            font-weight: 400;
+            color: #a9b2c6;
+            text-align: center;
+            vertical-align: top;
+            display: inline-block;
+            margin-right: 8px;
+          }
+          .title {
+            max-width: 88%;
+            display: inline-block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 16px;
+            font-family:
+              PingFangSC-Medium,
+              PingFang SC;
+            font-weight: 500;
+            color: #222;
+            line-height: 22px;
+          }
+        }
+        .right_2 {
+          padding: 5px 0;
+          font-size: 12px;
+          font-family:
+            PingFangSC-Regular,
+            PingFang SC;
+          font-weight: 400;
+          color: #666;
+        }
+        .right_3 {
+          padding: 5px 0;
+          display: flex;
+          justify-content: space-between;
+          .right_3Left {
+            font-size: 12px;
+            font-family:
+              PingFangSC-Regular,
+              PingFang SC;
+            font-weight: 400;
+            color: #949fb8;
+          }
+          .right_3Right {
+            text-align: right;
+            font-size: 16px;
+            font-family:
+              PingFangSC-Semibold,
+              PingFang SC;
+            font-weight: 600;
+            color: #ff5602;
+          }
+        }
+        .right_4 {
+          padding-top: 10px;
+          border-top: 1px solid #f3f3f3;
+        }
+      }
+      .join {
+        position: absolute;
+        right: -23px;
+        top: 10px;
+        font-size: 12px;
+        font-family:
+          PingFangSC-Normal,
+          PingFang SC;
+        color: #fff;
+        line-height: 21px;
+        height: 21px;
+        width: 100px;
+        text-align: center;
+        -ms-transform: rotate(45deg);
+        transform: rotate(45deg);
+        -webkit-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        padding-left: 9px;
+      }
+      .join0 {
+        background: #e6f4fe;
+        color: #638aa5;
+      }
+      .join1 {
+        background: #ededed;
+        color: #666c7d;
+      }
+    }
+  }
+  .two {
+    margin: 20px 0;
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
+    .two_1 {
+      border-bottom: 1px solid #e4e7ed;
+      :deep(.el-tabs__nav-wrap:after) {
+        background-color: transparent !important;
+      }
+    }
+    .two_2 {
+      padding: 15px;
+      min-height: 500px;
+      :deep(.el-aside)::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
 }
 </style>

src/views/innovation/index.vue

@@ -225,7 +225,7 @@ const getTime = (data) => {
     padding: 15px;
     margin: 10px 0;
     .one_1 {
-      border-bottom: 2px solid #e4e7ed;
+      border-bottom: 1px solid #e4e7ed;
       :deep(.el-tabs__nav-wrap:after) {
         background-color: transparent !important;
       }