| | |
| | | <template> |
| | | <div class="list-container w-full h-full"> |
| | | <div class="list-content w-full overflow-x-hidden"> |
| | | <el-row :gutter="20"> |
| | | <el-row :gutter="10"> |
| | | <el-col :span="6" v-for="item in tableData" class="margin-col"> |
| | | <el-card shadow="hover" class="list-card cursor-pointer" :body-style="{ padding: 0 }"> |
| | | <div class="img-container w-full"> |
| | | <img src="@/assets/list-card-bg.jpg" class="width-img"> |
| | | </div> |
| | | <div class="item-info p-3"> |
| | | <div class="item-info p-3" style="position: relative"> |
| | | <div class="info-text" style="position: absolute; top: 2px; 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 class="info-title">{{ item.meetName }}</div> |
| | | <div class="info-teacherName"> |
| | | <div class="info-label">主讲:</div> |
| | | <div class="info-text">{{ item.teacherNamesStr }}</div> |
| | | <div class="info-teacherName" style="margin-top: 5px"> |
| | | <div class="info-label" style="flex: 1">主讲:</div> |
| | | <div class="info-text" style="flex:6">{{ item.teacherNamesStr }}</div> |
| | | </div> |
| | | <div class="info-time"> |
| | | <div class="info-label">状态:</div> |
| | | <div class="info-text">{{ translateStatus(item.status) }}</div> |
| | | </div> |
| | | <div class="info-time"> |
| | | <div class="info-time" style="margin-top: 10px"> |
| | | <div class="info-label">开始时间:</div> |
| | | <div class="info-text">{{ item.startTime }}</div> |
| | | </div> |
| | |
| | | |
| | | .list-card { |
| | | border-radius: 10px; |
| | | height: 330px; |
| | | } |
| | | |
| | | .item-info { |
| | | padding: 12px; |
| | | color: #8a8a8a; |
| | | } |
| | | .info-teacherName { |
| | | display: flex; |
| | | flex-direction: row; |
| | | font-size: 14px; |
| | | } |
| | | .info-label { |
| | | display: flex; |
| | | flex-wrap: nowrap; |
| | | } |
| | | .info-text { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .info-title { |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .info-teacherName { |
| | | display: flex; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .info-time { |