style: 优化移动端表格样式和响应式布局

This commit is contained in:
dmy
2026-01-19 17:01:16 +08:00
parent 1453e03c76
commit e3880408b7
7 changed files with 88 additions and 130 deletions

View File

@@ -26,13 +26,13 @@
</div>
<div v-else>
<el-table :data="aiRecommendations" style="width: 100%" size="small" class="ai-table">
<el-table-column label="Pin" width="50" align="center">
<el-table-column label="Pin" width="45" align="center">
<template #default="scope">
<el-icon
:style="{
color: scope.row.pin ? '#f56c6c' : '#909399',
cursor: 'pointer',
fontSize: '16px'
fontSize: '18px'
}"
@click="togglePin(scope.row)"
>
@@ -40,20 +40,16 @@
</el-icon>
</template>
</el-table-column>
<el-table-column prop="title" label="项目名称">
<template #default="scope">
<a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
</template>
</el-table-column>
<el-table-column prop="source" label="来源" width="150" />
<el-table-column prop="publishDate" label="发布日期" width="100">
<el-table-column prop="title" label="项目名称" min-width="150" />
<el-table-column prop="source" label="来源" min-width="80" />
<el-table-column prop="publishDate" label="发布日期" width="95">
<template #default="scope">
{{ formatDate(scope.row.publishDate) }}
</template>
</el-table-column>
<el-table-column prop="confidence" label="推荐度" width="80">
<el-table-column prop="confidence" label="推荐度" width="70">
<template #default="scope">
<el-tag :type="getConfidenceType(scope.row.confidence)">
<el-tag :type="getConfidenceType(scope.row.confidence)" size="small">
{{ scope.row.confidence }}%
</el-tag>
</template>
@@ -106,13 +102,9 @@
</div>
<div v-else>
<el-table :data="bidsByDateRange" style="width: 100%" size="small" class="bids-table">
<el-table-column prop="title" label="项目名称">
<template #default="scope">
<a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
</template>
</el-table-column>
<el-table-column prop="source" label="来源" width="100" />
<el-table-column prop="publishDate" label="发布日期" width="100">
<el-table-column prop="title" label="项目名称" min-width="150" />
<el-table-column prop="source" label="来源" min-width="80" />
<el-table-column prop="publishDate" label="发布日期" width="95">
<template #default="scope">
{{ formatDate(scope.row.publishDate) }}
</template>
@@ -457,11 +449,13 @@ a:hover {
justify-content: center;
}
.el-table {
font-size: 12px;
.ai-table,
.bids-table {
overflow-x: auto;
}
.el-table .cell {
.ai-table :deep(.el-table__cell),
.bids-table :deep(.el-table__cell) {
padding: 6px;
}