|
|
@@ -40,15 +40,46 @@
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="two">
|
|
|
- <el-col
|
|
|
+ <el-row
|
|
|
:span="24"
|
|
|
class="list"
|
|
|
v-for="(item, index) in list"
|
|
|
:key="index"
|
|
|
@click="toView(item)"
|
|
|
>
|
|
|
- {{ item }}
|
|
|
- </el-col>
|
|
|
+ <div class="join" :class="[item.match_status == '0' ? 'join0' : 'join1']">
|
|
|
+ {{ getDict(item.match_status, 'status') }}
|
|
|
+ </div>
|
|
|
+ <el-col :span="4" class="left">
|
|
|
+ <el-image
|
|
|
+ v-if="item.file && item.file.length > 0"
|
|
|
+ class="image"
|
|
|
+ :src="item.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(item.form, 'form') }}</span>
|
|
|
+ <span class="title">{{ item.name || '暂无比赛名称' }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="right_2">
|
|
|
+ 组织单位：{{ item.organization || '暂无组织单位' }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="right_3">
|
|
|
+ <el-col :span="20" class="right_3Left">
|
|
|
+ 比赛日期：{{ getTime(item.time) }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="right_3Right">
|
|
|
+ {{ item.money || '免费' }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="right_4">
|
|
|
+ <el-tag type="primary">{{ getDict(item.type, 'type') }}</el-tag>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="thr">
|
|
|
<el-pagination
|
|
|
@@ -72,6 +103,7 @@
|
|
|
<script setup>
|
|
|
const $checkRes = inject('$checkRes')
|
|
|
import { Search } from '@element-plus/icons-vue'
|
|
|
+import { get } from 'lodash-es'
|
|
|
// 接口
|
|
|
import { DictDataStore } from '@/store/api/system/dictData'
|
|
|
import { MatchStore } from '@/store/api/platform/match'
|
|
|
@@ -79,6 +111,7 @@ const store = MatchStore()
|
|
|
const dictDataStore = DictDataStore()
|
|
|
// 图片引入
|
|
|
import innovation from '@/assets/innovation.png'
|
|
|
+import news from '@/assets/news.png'
|
|
|
// 路由
|
|
|
const router = useRouter()
|
|
|
// 加载中
|
|
|
@@ -119,7 +152,9 @@ const list = ref([])
|
|
|
let skip = 0
|
|
|
let limit = inject('limit')
|
|
|
const total = ref(20)
|
|
|
-
|
|
|
+const typeList = ref([])
|
|
|
+const formList = ref([])
|
|
|
+const statusList = ref([])
|
|
|
// 请求
|
|
|
onMounted(async () => {
|
|
|
loading.value = true
|
|
|
@@ -128,10 +163,16 @@ onMounted(async () => {
|
|
|
loading.value = false
|
|
|
})
|
|
|
const searchOther = async () => {
|
|
|
- // let result
|
|
|
- // // 技术领域
|
|
|
- // result = await dictDataStore.query({ code: 'field', is_use: '0' })
|
|
|
- // if ($checkRes(result)) fieldList.value = result.data
|
|
|
+ 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 (query = { skip: 0, limit }) => {
|
|
|
const info = {
|
|
|
@@ -152,10 +193,22 @@ const activeName = ref('first')
|
|
|
const handleClick = (tab, event) => {
|
|
|
console.log(tab, event)
|
|
|
}
|
|
|
+// 字典数据转换
|
|
|
+const getDict = (data, model) => {
|
|
|
+ let res
|
|
|
+ if (model == 'form') res = formList.value.find((f) => f.value == data)
|
|
|
+ else if (model == 'type') res = typeList.value.find((f) => f.value == data)
|
|
|
+ else if (model == 'status') res = statusList.value.find((f) => f.value == data)
|
|
|
+ return get(res, 'label')
|
|
|
+}
|
|
|
// 查看
|
|
|
const toView = (item) => {
|
|
|
router.push({ path: '/innovation/detail', query: { id: item.id || item._id } })
|
|
|
}
|
|
|
+// 时间
|
|
|
+const getTime = (data) => {
|
|
|
+ if (data) return `${data[0]} - ${data[1]}`
|
|
|
+}
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.main {
|
|
|
@@ -214,9 +267,123 @@ const toView = (item) => {
|
|
|
padding: 15px;
|
|
|
|
|
|
.list {
|
|
|
- margin-bottom: 30px;
|
|
|
- border-bottom: 1px solid #ebebeb;
|
|
|
- padding-bottom: 10px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
