facat/bidding_watcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/App.vue
View File

@@ -443,5 +443,14 @@ onUnmounted(() => {
.is-mobile .el-menu-item { .is-mobile .el-menu-item {
padding: 0 20px !important; padding: 0 20px !important;
min-height: 48px;
}
.is-mobile .el-button {
min-height: 44px;
}
.is-mobile .el-icon {
padding: 4px;
} }
</style> </style>

20
frontend/src/components/Bids.vue
View File

@@ -12,13 +12,13 @@
</el-select> </el-select>
</div> </div>
<el-table :data="bids" v-loading="loading" style="width: 100%" class="bids-table"> <el-table :data="bids" v-loading="loading" style="width: 100%" class="bids-table">
<el-table-column label="Pin" width="50" align="center"> <el-table-column label="Pin" width="45" align="center">
<template #default="scope"> <template #default="scope">
<el-icon <el-icon
:style="{ :style="{
color: scope.row.pin ? '#f56c6c' : '#909399', color: scope.row.pin ? '#f56c6c' : '#909399',
cursor: 'pointer', cursor: 'pointer',
fontSize: '16px' fontSize: '18px'
}" }"
@click="togglePin(scope.row)" @click="togglePin(scope.row)"
> >
@@ -26,13 +26,9 @@
</el-icon> </el-icon>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="title" label="Title"> <el-table-column prop="title" label="Title" min-width="150" />
<template #default="scope"> <el-table-column prop="source" label="Source" min-width="100" />
<a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a> <el-table-column prop="publishDate" label="Date" width="95">
</template>
</el-table-column>
<el-table-column prop="source" label="Source" width="150" />
<el-table-column prop="publishDate" label="Date" width="100">
<template #default="scope">{{ formatDate(scope.row.publishDate) }}</template> <template #default="scope">{{ formatDate(scope.row.publishDate) }}</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@@ -162,11 +158,11 @@ a:hover {
max-width: 100%; max-width: 100%;
} }
.el-table { .bids-table {
font-size: 12px; overflow-x: auto;
} }
.el-table .cell { .bids-table :deep(.el-table__cell) {
padding: 6px; padding: 6px;
} }

48
frontend/src/components/CrawlInfo.vue
View File

@@ -11,33 +11,27 @@
</div> </div>
</template> </template>
<el-table :data="crawlStats" stripe style="width: 100%" v-loading="loading" class="crawl-table"> <el-table :data="crawlStats" stripe style="width: 100%" v-loading="loading" class="crawl-table" :cell-class-name="tableCellClassName">
<el-table-column prop="source" label="爬虫来源" width="230" /> <el-table-column prop="source" label="爬虫来源" min-width="120" />
<el-table-column prop="count" label="本次获取数量" width="160" sortable /> <el-table-column prop="count" label="本次获取数量" width="110" sortable />
<el-table-column label="最近更新时间" width="140"> <el-table-column label="最近更新时间" min-width="140">
<template #default="{ row }"> <template #default="{ row }">
{{ formatDateTime(row.latestUpdate) }} {{ formatDateTime(row.latestUpdate) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="最新工程时间" width="140"> <el-table-column label="最新工程时间" min-width="140">
<template #default="{ row }"> <template #default="{ row }">
{{ formatDateTime(row.latestPublishDate) }} {{ formatDateTime(row.latestPublishDate) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="状态" width="80"> <el-table-column label="状态" width="70">
<template #default="{ row }"> <template #default="{ row }">
<el-tag :type="row.error && row.error.trim() ? 'danger' : (row.count > 0 ? 'success' : 'info')"> <el-tag :type="row.error && row.error.trim() ? 'danger' : (row.count > 0 ? 'success' : 'info')" size="small">
{{ row.error && row.error.trim() ? '出错' : (row.count > 0 ? '正常' : '无数据') }} {{ row.error && row.error.trim() ? '出错' : (row.count > 0 ? '正常' : '无数据') }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="错误信息" min-width="120"> <el-table-column label="操作" width="60">
<template #default="{ row }">
<span v-if="row.error && row.error.trim()" style="color: #f56c6c; font-size: 12px;">{{ row.error }}</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="操作" width="80">
<template #default="{ row }"> <template #default="{ row }">
<el-button <el-button
type="primary" type="primary"
@@ -117,6 +111,15 @@ const fetchCrawlStats = async () => {
} }
} }
// 表格单元格类名，用于响应式处理
const tableCellClassName = ({ columnIndex }: { columnIndex: number }) => {
// 移动端隐藏错误信息列
if (columnIndex === 5) {
return 'hidden-on-mobile'
}
return ''
}
const crawlSingleSource = async (sourceName: string) => { const crawlSingleSource = async (sourceName: string) => {
crawlingSources.value.add(sourceName) crawlingSources.value.add(sourceName)
try { try {
@@ -218,12 +221,16 @@ a:hover {
font-size: 1rem; font-size: 1rem;
} }
.el-table { .crawl-table {
font-size: 11px; overflow-x: auto;
} }
.el-table .cell { .crawl-table :deep(.el-table__cell) {
padding: 4px; padding: 6px;
}
.el-table {
font-size: 12px;
} }
.el-descriptions { .el-descriptions {
@@ -233,5 +240,10 @@ a:hover {
.summary { .summary {
margin-top: 16px; margin-top: 16px;
} }
/* 移动端隐藏错误信息列 */
.crawl-table :deep(.hidden-on-mobile) {
display: none;
}
} }
</style> </style>

36
frontend/src/components/Dashboard-AI.vue
View File

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

20
frontend/src/components/Dashboard.vue
View File

@@ -50,7 +50,7 @@
</div> </div>
</div> </div>
<el-table :data="filteredTodayBids" v-loading="loading" style="width: 100%" class="bids-table"> <el-table :data="filteredTodayBids" v-loading="loading" style="width: 100%" class="bids-table">
<el-table-column label="Pin" width="60" align="center"> <el-table-column label="Pin" width="50" align="center">
<template #default="scope"> <template #default="scope">
<el-icon <el-icon
:style="{ :style="{
@@ -64,13 +64,9 @@
</el-icon> </el-icon>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="title" label="Title"> <el-table-column prop="title" label="Title" min-width="150" />
<template #default="scope"> <el-table-column prop="source" label="Source" min-width="90" />
<a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a> <el-table-column prop="publishDate" label="Date" width="100">
</template>
</el-table-column>
<el-table-column prop="source" label="Source" width="100" />
<el-table-column prop="publishDate" label="Date" width="120">
<template #default="scope">{{ formatDate(scope.row.publishDate) }}</template> <template #default="scope">{{ formatDate(scope.row.publishDate) }}</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@@ -419,12 +415,12 @@ a:hover {
max-width: 100%; max-width: 100%;
} }
.el-table { .bids-table {
font-size: 12px; overflow-x: auto;
} }
.el-table .cell { .bids-table :deep(.el-table__cell) {
padding: 8px; padding: 6px;
} }
} }
</style> </style>

22
frontend/src/components/PinnedProject.vue
View File

@@ -16,13 +16,13 @@
</div> </div>
<div v-else> <div v-else>
<el-table :data="pinnedBids" style="width: 100%" size="small" class="pinned-table"> <el-table :data="pinnedBids" style="width: 100%" size="small" class="pinned-table">
<el-table-column label="Pin" width="50" align="center"> <el-table-column label="Pin" width="45" align="center">
<template #default="scope"> <template #default="scope">
<el-icon <el-icon
:style="{ :style="{
color: '#f56c6c', color: '#f56c6c',
cursor: 'pointer', cursor: 'pointer',
fontSize: '16px' fontSize: '18px'
}" }"
@click="togglePin(scope.row)" @click="togglePin(scope.row)"
> >
@@ -30,13 +30,9 @@
</el-icon> </el-icon>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="title" label="项目名称"> <el-table-column prop="title" label="项目名称" min-width="150" />
<template #default="scope"> <el-table-column prop="source" label="来源" min-width="100" />
<a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a> <el-table-column prop="publishDate" label="发布日期" width="95">
</template>
</el-table-column>
<el-table-column prop="source" label="来源" width="230" />
<el-table-column prop="publishDate" label="发布日期" width="100">
<template #default="scope"> <template #default="scope">
{{ formatSimpleDate(scope.row.publishDate) }} {{ formatSimpleDate(scope.row.publishDate) }}
</template> </template>
@@ -142,12 +138,12 @@ a:hover {
font-size: 0.9rem; font-size: 0.9rem;
} }
.el-table { .pinned-table {
font-size: 11px; overflow-x: auto;
} }
.el-table .cell { .pinned-table :deep(.el-table__cell) {
padding: 4px; padding: 6px;
} }
.box-card { .box-card {

63
frontend/src/style.css
View File

@@ -16,62 +16,17 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
/* 移动端基础样式 */ body {
@media (max-width: 768px) { margin: 0;
:root { min-width: 320px;
font-size: 14px; min-height: 100vh;
}
body {
margin: 0;
display: flex;
place-items: flex-start;
min-width: 320px;
min-height: 100vh;
}
#app {
max-width: 100%;
margin: 0;
padding: 0.5rem;
text-align: left;
}
.card {
padding: 1em;
}
h1 {
font-size: 2em;
line-height: 1.1;
}
} }
/* 桌面端保持原有样式 */ #app {
@media (min-width: 769px) { width: 100%;
body { max-width: 1280px;
margin: 0; margin: 0 auto;
display: flex; padding: 0;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.card {
padding: 2em;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
} }
a { a {