From 0d3af1e3612bf691d11ecaf8b013638808a73d7f Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期二, 29 十月 2024 14:37:08 +0800
Subject: [PATCH] 会议列表状态样式优化
---
src/views/train/data-list/index.vue | 24 +++++++++++++++++++-----
1 files changed, 19 insertions(+), 5 deletions(-)
diff --git a/src/views/train/data-list/index.vue b/src/views/train/data-list/index.vue
index 977a7bc..adf6dab 100644
--- a/src/views/train/data-list/index.vue
+++ b/src/views/train/data-list/index.vue
@@ -6,26 +6,37 @@
<el-col :span="6" v-for="item in props.dataList" class="mb-5">
<el-card
shadow="hover"
- class="list-card cursor-pointer"
+ :class="{'list-card': true, 'cursor-pointer':item.status === 1, 'disable-click': item.status !== 1}"
:body-style="{ padding: 0 }"
@click="itemClick(item)"
>
<div class="img-container w-full">
<img src="@/assets/image/list-card-bg.jpg" class="w-full" />
</div>
- <div class="item-info p-3">
+ <div class="item-info p-3" style="position: relative">
<div class="info-title font-bold">{{ item.meetName }}</div>
<div class="info-teacher flex text-sm text-gray-500">
- <div class="info-label">涓昏:</div>
+ <div class="info-label">涓昏锛�</div>
<div class="info-text">{{ item.teacherName }}</div>
</div>
<div class="info-time flex text-sm text-gray-500">
- <div class="info-label">寮�濮嬫椂闂�:</div>
+ <div class="info-label">寮�濮嬫椂闂达細</div>
<div class="info-text">{{ item.startTime }}</div>
</div>
<div class="info-time flex text-sm text-gray-500">
- <div class="info-label">缁撴潫鏃堕棿:</div>
+ <div class="info-label">缁撴潫鏃堕棿锛�</div>
<div class="info-text">{{ item.endTime }}</div>
+ </div>
+ <div class="info-text" style="position: absolute; top: 12px; right: 2px">
+ <el-tag type="info" effect="dark" v-if="item.status === 0">
+ 寰呭紑濮�
+ </el-tag>
+ <el-tag type="danger" effect="dark" v-else-if="item.status === 1">
+ 杩涜涓�
+ </el-tag>
+ <el-tag type="warning" effect="dark" v-else-if="item.status === 2">
+ 宸茬粨鏉�
+ </el-tag>
</div>
</div>
</el-card>
@@ -75,6 +86,9 @@
</script>
<style lang="scss" scoped>
+.disable-click {
+ pointer-events: none;
+}
.item {
width: 100%;
min-height: 120px;
--
Gitblit v1.8.0