DeXun/erp-next
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 完成京东风格整体改造

Browse Source 
1.  启用京东红主题，替换全局主色调为#e4393c
2.  调整侧边栏宽度为200px，优化导航样式
3.  重构顶部导航、侧边菜单、表格、卡片等全局组件样式
4.  新增JdStatusTabs和JdFilterBar通用组件
5.  统一业务页面配色风格为红白灰配色方案
6.  修复物料列表空数据展示问题，优化表格样式
7.  新增京东风格改造文档说明
This commit is contained in:
王文昊
2026-06-15 16:04:10 +08:00
parent 24ab178ec1
commit 41954f6ef1
23 changed files with 2623 additions and 851 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
ruoyi-ui/src/views/bid/quotation/index.vue
View File

@@ -3,45 +3,45 @@
<!-- ═══ 顶部统计卡片 ═══ -->
<el-row :gutter="12" class="stat-row">
<el-col :span="6">
<div class="stat-card" style="border-top-color:#1171c4">
<div class="stat-card">
<div class="stat-body">
<div class="stat-num">{{ stats.total || 0 }}</div>
<div class="stat-lbl">全部报价</div>
</div>
<i class="el-icon-document stat-icon" style="color:#1171c4"></i>
<i class="el-icon-document stat-icon"></i>
</div>
</el-col>
<el-col :span="6">
<div class="stat-card" style="border-top-color:#909399">
<div class="stat-card">
<div class="stat-body">
<div class="stat-num">{{ stats.draft || 0 }}</div>
<div class="stat-lbl">草稿</div>
</div>
<i class="el-icon-edit-outline stat-icon" style="color:#909399"></i>
<i class="el-icon-edit-outline stat-icon"></i>
</div>
</el-col>
<el-col :span="6">
<div class="stat-card" style="border-top-color:#e6a23c">
<div class="stat-card">
<div class="stat-body">
<div class="stat-num">{{ stats.submitted || 0 }}</div>
<div class="stat-lbl">待处理</div>
</div>
<i class="el-icon-time stat-icon" style="color:#e6a23c"></i>
<i class="el-icon-time stat-icon"></i>
</div>
</el-col>
<el-col :span="6">
<div class="stat-card" style="border-top-color:#67c23a">
<div class="stat-card">
<div class="stat-body">
<div class="stat-num">{{ stats.accepted || 0 }}</div>
<div class="stat-lbl">已采纳</div>
</div>
<i class="el-icon-circle-check stat-icon" style="color:#67c23a"></i>
<i class="el-icon-circle-check stat-icon"></i>
</div>
</el-col>
</el-row>
<!-- ── 搜索栏 ── -->
<el-card shadow="never" class="search-card">
<div class="jd-filter-bar">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
<el-form-item label="报价单号">
<el-input v-model="queryParams.quoteNo" placeholder="报价单号" clearable style="width:150px" @keyup.enter.native="handleQuery" />
@@ -65,7 +65,7 @@
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
<!-- ── 工具栏 ── -->
<el-row :gutter="10" class="mb8" style="margin-top:12px">
@@ -75,25 +75,25 @@
</el-row>
<!-- ── 报价列表 ── -->
<el-table v-loading="loading" :data="list" border>
<el-table v-loading="loading" :data="list" border stripe>
<el-table-column label="报价单号" prop="quoteNo" width="155" />
<el-table-column label="关联询价单" width="200">
<template slot-scope="s">
<div style="font-weight:600;color:#303133">{{ s.row.rfqNo }}</div>
<div style="font-size:12px;color:#909399;margin-top:2px" v-if="s.row.rfqTitle">{{ s.row.rfqTitle }}</div>
<div style="font-weight:600;color:#333">{{ s.row.rfqNo }}</div>
<div style="font-size:12px;color:#999;margin-top:2px" v-if="s.row.rfqTitle">{{ s.row.rfqTitle }}</div>
</template>
</el-table-column>
<el-table-column label="供应商" prop="supplierName" min-width="150">
<template slot-scope="s">
<div style="display:flex;align-items:center;gap:6px">
<el-avatar :size="28" style="background:#1171c4;flex-shrink:0">{{ (s.row.supplierName||'?').charAt(0) }}</el-avatar>
<!-- <el-avatar :size="28" style="background:var(--brand-primary);flex-shrink:0">{{ (s.row.supplierName||'?').charAt(0) }}</el-avatar> -->
<span>{{ s.row.supplierName }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="金额" width="120" align="right">
<template slot-scope="s">
<strong style="color:#409EFF;font-size:15px">¥{{ s.row.totalAmount | money }}</strong>
<strong style="color:#e4393c;font-size:15px">¥{{ s.row.totalAmount | money }}</strong>
</template>
</el-table-column>
<el-table-column label="交期" prop="deliveryDays" width="80" align="center">
@@ -230,7 +230,7 @@
</el-table-column>
<el-table-column label="金额(元)" width="110" align="right">
<template slot-scope="s">
<strong style="color:#409EFF">¥{{ itemTotal(s.row) }}</strong>
<strong style="color:#e4393c">¥{{ itemTotal(s.row) }}</strong>
</template>
</el-table-column>
<el-table-column label="交期(天)" width="85">
@@ -603,16 +603,20 @@ export default {
/* ── 顶部统计卡片 ── */
.stat-row { margin-bottom: 12px !important; }
.stat-card {
background: #fff; border-radius: 4px; border-top: 3px solid #1171c4;
padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.stat-num { font-size: 26px; font-weight: 700; color: #1a2c4e; line-height: 1.2; }
.stat-lbl { font-size: 12px; color: #8c97a8; margin-top: 4px; }
.stat-icon { font-size: 28px; opacity: 0.5; }
/* ── 搜索 ── */
.jd-filter-bar {
background: #f5f5f5;
padding: 12px 16px 4px;
border-radius: 2px;
::v-deep .el-form-item {
margin-bottom: 8px !important;
}
::v-deep .el-form-item__label {
font-size: 13px;
color: #666;
}
}
.search-card { ::v-deep .el-card__body { padding: 16px 20px 8px; } }
/* ── 状态芯片 ── */
@@ -630,10 +634,10 @@ export default {
.items-table { margin-bottom: 0; }
.form-total-bar {
text-align: right; padding: 10px 16px;
background: linear-gradient(90deg, #f9fbff, #f0f7ff);
border: 1px solid #e4e7ed; border-top: none; border-radius: 0 0 4px 4px;
font-size: 14px; color: #606266;
strong { font-size: 20px; color: #409EFF; margin-left: 6px; }
background: #fafafa;
border: 1px solid #e5e5e5; border-top: none; border-radius: 0 0 2px 2px;
font-size: 14px; color: #666;
strong { font-size: 20px; color: #e4393c; margin-left: 6px; }
}
/* ── 详情 - 状态流程 ── */
@@ -645,12 +649,12 @@ export default {
display: flex; flex-direction: column; align-items: center; gap: 4px;
color: #c0c4cc; font-size: 12px;
i { font-size: 22px; }
&.active { color: #1171c4; }
&.rejected { color: #f56c6c; }
&.active { color: var(--brand-primary); }
&.rejected { color: var(--color-danger); }
}
.step-line {
flex: 1; max-width: 80px; height: 2px; background: #e4e7ed; margin: 0 8px; margin-top: -12px;
&.active { background: #1171c4; }
flex: 1; max-width: 80px; height: 2px; background: var(--silver-border); margin: 0 8px; margin-top: -12px;
&.active { background: var(--brand-primary); }
}
/* ── PDF ── */
@@ -658,21 +662,21 @@ export default {
.pdf-header { display: flex; align-items: center; padding-bottom: 14px; }
.pdf-logo { width: 48px; height: 48px; object-fit: contain; margin-right: 16px; }
.pdf-header-text { flex: 1; }
.pdf-company { font-size: 20px; font-weight: 700; color: #1171c4; letter-spacing: 1px; }
.pdf-doc-type { font-size: 13px; color: #666; margin-top: 2px; }
.pdf-header-no { font-size: 13px; color: #888; }
.pdf-divider { border-top: 2px solid #1171c4; margin-bottom: 16px; }
.pdf-company { font-size: 20px; font-weight: 700; color: var(--brand-primary); letter-spacing: 1px; }
.pdf-doc-type { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.pdf-header-no { font-size: 13px; color: var(--text-muted); }
.pdf-divider { border-top: 2px solid var(--brand-primary); margin-bottom: 16px; }
.pdf-meta-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; td { padding: 7px 10px; border: 1px solid #e4e7ed; } }
.meta-label { background: #f5f7fa; color: #606266; font-weight: 600; width: 90px; }
.meta-val { color: #303133; }
.amount { color: #409EFF; font-weight: 700; font-size: 15px; }
.pdf-section-title { font-size: 14px; font-weight: 700; color: #1a2c4e; margin: 0 0 10px; padding-left: 8px; border-left: 4px solid #1171c4; }
.meta-label { background: var(--silver-bg); color: var(--text-secondary); font-weight: 600; width: 90px; }
.meta-val { color: var(--text-primary); }
.amount { color: var(--color-amount); font-weight: 700; font-size: 15px; }
.pdf-section-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 10px; padding-left: 8px; border-left: 4px solid var(--brand-primary); }
.pdf-items-table { width: 100%; border-collapse: collapse; margin-bottom: 20px;
th { background: #1171c4; color: #fff; padding: 8px; text-align: center; font-weight: 600; font-size: 12px; }
td { border: 1px solid #e4e7ed; padding: 7px 8px; text-align: center; font-size: 12px; }
th { background: var(--brand-primary); color: #fff; padding: 8px; text-align: center; font-weight: 600; font-size: 12px; }
td { border: 1px solid var(--silver-border); padding: 7px 8px; text-align: center; font-size: 12px; }
tbody tr:nth-child(even) td { background: #f9fbff; }
}
.amount-cell { color: #409EFF; font-weight: 600; }
.total-cell { font-size: 15px; background: #f0f7ff !important; font-weight: 700; }
.amount-cell { color: #e4393c; font-weight: 600; }
.total-cell { font-size: 15px; background: #fff5f5 !important; font-weight: 700; }
.pdf-footer { text-align: right; font-size: 11px; color: #aaa; margin-top: 10px; border-top: 1px solid #f0f2f5; padding-top: 8px; }
</style>