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

feat: 添加移动端响应式布局和样式优化

Browse Source
This commit is contained in:
dmy
2026-01-19 13:47:41 +08:00
parent fffc17b9ad
commit 95dfcd0278
9 changed files with 732 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,22 +1,20 @@
<template>
<div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<h2 style="margin: 0;">Dashboard AI</h2>
<div class="dashboard-ai-container">
<div class="dashboard-header">
<h2 class="dashboard-title">Dashboard AI</h2>
<el-button type="primary" :loading="loading" @click="fetchAIRecommendations">
<el-icon style="margin-right: 5px"><MagicStick /></el-icon>
获取 AI 推荐
</el-button>
</div>
<PinnedProject ref="pinnedProjectRef" @pin-changed="handlePinChanged" />
<el-row :gutter="20">
<el-row :gutter="20" class="ai-section">
<el-col :span="24">
<el-card class="box-card" shadow="hover">
<!-- <template #header> -->
<div class="card-header">
<span>AI 推荐项目</span>
<el-tag type="success">{{ aiRecommendations.length }} 个推荐</el-tag>
</div>
<!-- </template> -->
<div class="card-header">
<span>AI 推荐项目</span>
<el-tag type="success">{{ aiRecommendations.length }} 个推荐</el-tag>
</div>
<div v-if="loading" style="text-align: center; padding: 40px;">
<el-icon class="is-loading" :size="30"><Loading /></el-icon>
<p style="margin-top: 10px; color: #909399;">AI 正在分析中...</p>
@@ -27,14 +25,14 @@
<p style="font-size: 12px; margin-top: 5px;">点击上方按钮获取 AI 推荐</p>
</div>
<div v-else>
<el-table :data="aiRecommendations" style="width: 100%" size="small">
<el-table-column label="Pin" width="60" align="center">
<el-table :data="aiRecommendations" style="width: 100%" size="small" class="ai-table">
<el-table-column label="Pin" width="50" align="center">
<template #default="scope">
<el-icon
:style="{
color: scope.row.pin ? '#f56c6c' : '#909399',
cursor: 'pointer',
fontSize: '18px'
fontSize: '16px'
}"
@click="togglePin(scope.row)"
>
@@ -47,13 +45,13 @@
<a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
</template>
</el-table-column>
<el-table-column prop="source" label="来源" width="200" />
<el-table-column prop="publishDate" label="发布日期" width="180">
<el-table-column prop="source" label="来源" width="100" />
<el-table-column prop="publishDate" label="发布日期" width="100">
<template #default="scope">
{{ formatDate(scope.row.publishDate) }}
</template>
</el-table-column>
<el-table-column prop="confidence" label="推荐度" width="120">
<el-table-column prop="confidence" label="推荐度" width="80">
<template #default="scope">
<el-tag :type="getConfidenceType(scope.row.confidence)">
{{ scope.row.confidence }}%
@@ -65,26 +63,28 @@
</el-card>
</el-col>
</el-row>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<h3 style="margin: 0;">选择日期范围</h3>
<div style="display: flex; gap: 10px;">
<div class="filter-section">
<h3 class="filter-title">选择日期范围</h3>
<div class="filter-controls">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="To"
start-placeholder="Start Date"
end-placeholder="End Date"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
clearable
style="width: 240px;"
class="date-picker"
/>
<el-button type="primary" @click="setLast3Days">3天</el-button>
<el-button type="primary" @click="setLast7Days">7天</el-button>
<el-button type="success" :loading="bidsLoading" @click="fetchBidsByDateRange">
<el-icon style="margin-right: 5px"><List /></el-icon>
列出时间范围内所有工程
</el-button>
<div class="button-group">
<el-button type="primary" @click="setLast3Days">3天</el-button>
<el-button type="primary" @click="setLast7Days">7天</el-button>
<el-button type="success" :loading="bidsLoading" @click="fetchBidsByDateRange">
<el-icon style="margin-right: 5px"><List /></el-icon>
列出时间范围内所有工程
</el-button>
</div>
</div>
</div>
<el-row v-if="showAllBids" :gutter="20" style="margin-top: 20px;">
@@ -105,14 +105,14 @@
<p style="margin-top: 10px;">该时间范围内暂无工程</p>
</div>
<div v-else>
<el-table :data="bidsByDateRange" style="width: 100%" size="small">
<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="200" />
<el-table-column prop="publishDate" label="发布日期" width="180">
<el-table-column prop="source" label="来源" width="100" />
<el-table-column prop="publishDate" label="发布日期" width="100">
<template #default="scope">
{{ formatDate(scope.row.publishDate) }}
</template>
@@ -358,18 +358,72 @@ const togglePin = async (item: AIRecommendation) => {
</script>
<style scoped>
.dashboard-ai-container {
padding: 0;
}
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 10px;
}
.dashboard-title {
margin: 0;
font-size: 1.25rem;
}
.ai-section {
margin-top: 16px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.box-card{
.box-card {
margin-top: 10px;
margin-bottom: 10px;
}
.filter-section {
margin-bottom: 16px;
margin-top: 20px;
}
.filter-title {
margin: 0 0 12px 0;
font-size: 1rem;
}
.filter-controls {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.date-picker {
width: 100%;
max-width: 280px;
}
.button-group {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.ai-table,
.bids-table {
width: 100%;
}
a {
text-decoration: none;
color: inherit;
@@ -378,4 +432,43 @@ a {
a:hover {
color: #409eff;
}
/* 移动端响应式样式 */
@media (max-width: 768px) {
.dashboard-header {
flex-direction: column;
align-items: flex-start;
}
.dashboard-title {
font-size: 1.1rem;
}
.filter-controls {
flex-direction: column;
align-items: stretch;
}
.date-picker {
max-width: 100%;
}
.button-group {
justify-content: center;
}
.el-table {
font-size: 12px;
}
.el-table .cell {
padding: 6px;
}
.card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
</style>