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 {
padding: 0 20px !important;
min-height: 48px;
}
.is-mobile .el-button {
min-height: 44px;
}
.is-mobile .el-icon {
padding: 4px;
}
</style>

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

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

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

@@ -11,33 +11,27 @@
</div>
</template>
<el-table :data="crawlStats" stripe style="width: 100%" v-loading="loading" class="crawl-table">
<el-table-column prop="source" label="爬虫来源" width="230" />
<el-table-column prop="count" label="本次获取数量" width="160" sortable />
<el-table-column label="最近更新时间" width="140">
<el-table :data="crawlStats" stripe style="width: 100%" v-loading="loading" class="crawl-table" :cell-class-name="tableCellClassName">
<el-table-column prop="source" label="爬虫来源" min-width="120" />
<el-table-column prop="count" label="本次获取数量" width="110" sortable />
<el-table-column label="最近更新时间" min-width="140">
<template #default="{ row }">
{{ formatDateTime(row.latestUpdate) }}
</template>
</el-table-column>
<el-table-column label="最新工程时间" width="140">
<el-table-column label="最新工程时间" min-width="140">
<template #default="{ row }">
{{ formatDateTime(row.latestPublishDate) }}
</template>
</el-table-column>
<el-table-column label="状态" width="80">
<el-table-column label="状态" width="70">
<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 ? '正常' : '无数据') }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="错误信息" min-width="120">
<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">
<el-table-column label="操作" width="60">
<template #default="{ row }">
<el-button
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) => {
crawlingSources.value.add(sourceName)
try {
@@ -218,12 +221,16 @@ a:hover {
font-size: 1rem;
}
.el-table {
font-size: 11px;
.crawl-table {
overflow-x: auto;
}
.el-table .cell {
padding: 4px;
.crawl-table :deep(.el-table__cell) {
padding: 6px;
}
.el-table {
font-size: 12px;
}
.el-descriptions {
@@ -233,5 +240,10 @@ a:hover {
.summary {
margin-top: 16px;
}
/* 移动端隐藏错误信息列 */
.crawl-table :deep(.hidden-on-mobile) {
display: none;
}
}
</style>

36
frontend/src/components/Dashboard-AI.vue
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;
}

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

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

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

@@ -16,13 +16,13 @@
</div>
<div v-else>
<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">
<el-icon
:style="{
color: '#f56c6c',
cursor: 'pointer',
fontSize: '16px'
fontSize: '18px'
}"
@click="togglePin(scope.row)"
>
@@ -30,13 +30,9 @@
</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="230" />
<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="100" />
<el-table-column prop="publishDate" label="发布日期" width="95">
<template #default="scope">
{{ formatSimpleDate(scope.row.publishDate) }}
</template>
@@ -142,12 +138,12 @@ a:hover {
font-size: 0.9rem;
}
.el-table {
font-size: 11px;
.pinned-table {
overflow-x: auto;
}
.el-table .cell {
padding: 4px;
.pinned-table :deep(.el-table__cell) {
padding: 6px;
}
.box-card {

63
frontend/src/style.css
View File

@@ -16,62 +16,17 @@
-moz-osx-font-smoothing: grayscale;
}
/* 移动端基础样式 */
@media (max-width: 768px) {
:root {
font-size: 14px;
}
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;
}
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
}
/* 桌面端保持原有样式 */
@media (min-width: 769px) {
body {
margin: 0;
display: flex;
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;
}
#app {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0;
}
a {