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

94
ruoyi-ui/src/views/bid/order/closeDate.vue
View File

@@ -1,35 +1,47 @@
<template>
<div class="cd-page">
<!-- ═══ 统计卡片 ═══ -->
<div class="jd-cd-page">
<!-- ═══ JD 统计卡片 ═══ -->
<el-row :gutter="12" class="stat-row">
<el-col :span="6" v-for="c in statCards" :key="c.key">
<div class="stat-card" :style="{ borderTopColor: c.color }">
<div class="stat-card">
<div class="stat-body"><div class="stat-num">{{ stats[c.key] != null ? stats[c.key] : '-' }}</div><div class="stat-lbl">{{ c.label }}</div></div>
<i :class="c.icon" class="stat-icon" :style="{ color: c.color }"></i>
<i :class="c.icon" class="stat-icon"></i>
</div>
</el-col>
</el-row>
<!-- ═══ JD 筛选栏 ═══ -->
<div class="jd-filter">
<div class="filter-left">
<el-input v-model="q.doNo" placeholder="搜索单号" clearable size="small" class="filter-input" @keyup.enter.native="handleSearch" />
<el-select v-model="q.deliveryStatus" placeholder="状态" clearable size="small" style="width:100px" @change="getList">
<el-option label="待发" value="pending" />
<el-option label="在途" value="transit" />
<el-option label="历史" value="history" />
</el-select>
<el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
<el-button size="small" @click="resetSearch">重置</el-button>
</div>
<div class="filter-right">
<el-button size="small" icon="el-icon-refresh" @click="getList">刷新</el-button>
</div>
</div>
<div class="cd-body">
<!-- ═══ 左侧列表 ═══ -->
<div class="cd-left">
<div class="left-header">
<span class="left-title">订单列表</span>
<div class="left-tools">
<el-input v-model="q.doNo" placeholder="搜索单号" clearable size="small" style="width:130px" @keyup.enter.native="handleSearch" />
<el-select v-model="q.deliveryStatus" placeholder="状态" clearable size="small" style="width:100px" @change="getList">
<el-option label="待发" value="pending" />
<el-option label="在途" value="transit" />
<el-option label="历史" value="history" />
</el-select>
<el-button size="small" icon="el-icon-search" @click="handleSearch">搜索</el-button>
</div>
</div>
<el-table ref="table" v-loading="loading" :data="list" border stripe size="small"
@selection-change="onSelectionChange" class="cd-table" style="width:100%"
:row-class-name="rowClass">
@selection-change="onSelectionChange" class="jd-table"
style="width:100%" :row-class-name="rowClass">
<el-table-column type="selection" width="38" align="center" />
<el-table-column label="单号" prop="doNo" width="125" />
<el-table-column label="单号" width="130">
<template slot-scope="s">
<span class="order-link">{{ s.row.doNo }}</span>
</template>
</el-table-column>
<el-table-column label="供应商" prop="supplierName" min-width="120" show-overflow-tooltip />
<el-table-column label="交货期" prop="deliveryDate" width="85" align="center" />
<el-table-column label="收货日期" width="115" align="center">
@@ -50,6 +62,7 @@
</template>
</el-table-column>
</el-table>
<el-empty v-if="!loading && list.length === 0" description="暂无数据" style="padding:40px 0" />
<pagination v-show="total>0" :total="total" :page.sync="q.pageNum" :limit.sync="q.pageSize" @pagination="getList" />
</div>
@@ -100,7 +113,7 @@ export default {
batchDate: null,
q: { pageNum: 1, pageSize: 50, doNo: "", deliveryStatus: "" },
statCards: [
{ key: "pendingClose", label: "已收货未结单", icon: "el-icon-document", color: "#4A6FA5" },
{ key: "pendingClose", label: "已收货未结单", icon: "el-icon-document", color: "#e4393c" },
{ key: "todayClosed", label: "今日结单", icon: "el-icon-circle-check", color: "#67c23a" },
{ key: "weekClosed", label: "本周结单", icon: "el-icon-data-line", color: "#e6a23c" },
{ key: "avgCycleDays", label: "平均周期(天)", icon: "el-icon-time", color: "#8e44ad" }
@@ -129,6 +142,7 @@ export default {
request({ url: '/bid/delivery/closeDate/stats', method: 'get' }).then(r => { this.stats = r.data || {} }).catch(() => {})
},
handleSearch() { this.q.pageNum = 1; this.getList() },
resetSearch() { this.q.doNo = ""; this.q.deliveryStatus = ""; this.handleSearch() },
onSelectionChange(rows) { this.selected = rows },
rowClass({ row }) { return this.selected.includes(row) ? 'selected-row' : '' },
@@ -166,42 +180,40 @@ export default {
</script>
<style scoped>
.cd-page { background: #f5f7fa; padding: 12px; min-height: calc(100vh - 84px); }
.jd-cd-page { padding: 12px; min-height: calc(100vh - 84px); }
.stat-row { margin-bottom: 12px !important; }
.stat-card {
background: #fff; border-radius: 4px; border-top: 3px solid #4A6FA5;
padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;
}
.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 { display: flex; align-items: center; background: #f5f5f5; padding: 10px 16px; border-radius: 2px; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.filter-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-right { margin-left: auto; }
.filter-input { width: 130px; }
.cd-body { display: flex; gap: 12px; align-items: flex-start; }
/* ═══ 左侧列表 ═══ */
.cd-left { flex: 1; background: #fff; border-radius: 4px; padding: 12px; }
.left-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.left-title { font-size: 14px; font-weight: 700; color: #1a2c4e; white-space: nowrap; }
.left-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cd-left { flex: 1; background: #fff; border-radius: 2px; border: 1px solid #e5e5e5; padding: 14px; }
.left-header { display: flex; align-items: center; margin-bottom: 12px; }
.left-title { font-size: 14px; font-weight: 700; color: #333; }
/* ═══ 右侧操作区 ═══ */
.cd-right { width: 320px; flex-shrink: 0; background: #fff; border-radius: 4px; padding: 16px; }
.right-panel { }
.right-title { font-size: 14px; font-weight: 700; color: #1a2c4e; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #4A6FA5; }
.jd-table { border: none !important; }
.cd-right { width: 320px; flex-shrink: 0; background: #fff; border-radius: 2px; border: 1px solid #e5e5e5; padding: 16px; }
.right-title { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #e4393c; }
.right-section { margin-bottom: 20px; }
.rs-header { font-size: 12px; color: #606266; margin-bottom: 8px; }
.rs-list { max-height: 150px; overflow-y: auto; border: 1px solid #ebeef5; border-radius: 4px; padding: 4px; }
.rs-item { padding: 4px 8px; font-size: 12px; color: #303133; border-bottom: 1px solid #f5f7fa; }
.rs-header { font-size: 12px; color: #666; margin-bottom: 8px; }
.rs-list { max-height: 150px; overflow-y: auto; border: 1px solid #e5e5e5; border-radius: 2px; padding: 4px; }
.rs-item { padding: 4px 8px; font-size: 12px; color: #333; border-bottom: 1px solid #f5f5f5; }
.rs-item:last-child { border-bottom: none; }
.rs-empty { text-align: center; padding: 20px; color: #c0c4cc; font-size: 12px; }
.rs-empty { text-align: center; padding: 20px; color: #999; font-size: 12px; }
.rs-date-row { display: flex; gap: 6px; margin-bottom: 8px; }
.rs-quick { display: flex; gap: 6px; }
.rs-warn { font-size: 11px; color: #f56c6c; margin-top: 6px; }
/* ═══ 选中行高亮 ═══ */
::v-deep .selected-row td { background: #ecf5ff !important; }
.order-link { color: #005ea7; cursor: pointer; }
.order-link:hover { color: #e4393c; }
::v-deep .selected-row td { background: #fff5f5 !important; }
/* ═══ 差异颜色 ═══ */
.diff-early { color: #67c23a; font-weight: 600; }
.diff-late { color: #f56c6c; font-weight: 600; }
</style>