baison/yudao-ui-admin-vue3
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

info

Browse Source
This commit is contained in:
ouhaolan
2026-02-27 09:47:06 +08:00
commit f935832c9e
1739 changed files with 281459 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/views/ydoyun/report/lijun/reportpage6/KBStyle.HTML Normal file
View File

@@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>男装采购决策-高密度版</title>
<style>
:root {
--primary: #1F2937;
--blue: #2563EB;
--red: #EF4444;
--green: #10B981;
--orange: #F59E0B;
--bg: #F0F2F5;
}
body { font-family: -apple-system, sans-serif; background: var(--bg); margin: 0; font-size: 12px; color: #333; }
/* 紧凑型页眉 */
.header { background: var(--primary); color: #fff; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; }
.header-main { display: flex; align-items: baseline; gap: 8px; }
.header-val { font-size: 20px; font-weight: bold; }
.container { padding: 8px; }
/* 紧凑按钮组 */
.action-row { display: flex; gap: 6px; margin-bottom: 8px; }
.btn-sm { flex: 1; padding: 8px; border-radius: 6px; color: white; text-align: center; font-weight: bold; font-size: 12px; text-decoration: none; }
.bg-gradient-purple { background: linear-gradient(90deg, #6366F1, #8B5CF6); }
.bg-gradient-orange { background: linear-gradient(90deg, #F59E0B, #EA580C); }
.card { background: #fff; border-radius: 8px; padding: 10px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.card-title { font-size: 13px; font-weight: bold; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
/* 极窄标签栏 */
.filter-bar { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 8px; padding-bottom: 2px; }
.filter-bar::-webkit-scrollbar { display: none; }
.pill { white-space: nowrap; padding: 2px 8px; background: #F3F4F6; border-radius: 4px; font-size: 11px; color: #666; border: 0.5px solid #E5E7EB; }
.pill.active { background: var(--blue); color: #fff; border-color: var(--blue); }
/* 高密度表格 */
.dense-table { width: 100%; border-collapse: collapse; }
.dense-table th { text-align: left; font-size: 10px; color: #999; padding: 4px 2px; border-bottom: 1px solid #EEE; font-weight: normal; }
.dense-table td { padding: 6px 2px; border-bottom: 0.5px solid #F9FAFB; font-size: 12px; vertical-align: middle; }
/* 状态微标签 */
.s-tag { font-size: 9px; padding: 0px 3px; border-radius: 2px; margin-left: 2px; display: inline-block; vertical-align: middle; }
.red { background: #FEE2E2; color: var(--red); }
.blue { background: #DBEAFE; color: var(--blue); }
.orange { background: #FEF3C7; color: var(--orange); }
.green { background: #D1FAE5; color: var(--green); }
.num { font-family: "Monaco", monospace; font-weight: 500; }
.dim { color: #999; font-size: 10px; }
.expand-link { text-align: center; color: var(--blue); padding-top: 8px; font-size: 11px; cursor: pointer; }
.hidden { display: none !important; }
</style>
</head>
<body>
<div class="header">
<div class="header-main">
<span style="font-size: 11px; opacity: 0.8;">今日男装</span>
<span class="header-val">¥128,402</span>
</div>
<div style="text-align: right">
<div style="font-size: 11px;">毛利 <span style="color:var(--green)">42.5%</span></div>
</div>
</div>
<div class="container">
<div class="action-row">
<a class="btn-sm bg-gradient-purple">上新中心 ➔</a>
<a class="btn-sm bg-gradient-orange">补货预警 (12)</a>
</div>
<div class="card" id="cat-card">
<div class="card-title">品类表现 (Top 10)</div>
<div class="filter-bar">
<div class="pill active" data-f="all">全部</div>
<div class="pill" data-f="low-m">低毛利</div>
<div class="pill" data-f="stockout">缺货</div>
<div class="pill" data-f="overstock">积压</div>
</div>
<table class="dense-table">
<thead>
<tr>
<th width="35%">品类/标签</th>
<th width="20%">毛利</th>
<th width="20%">库销比</th>
<th width="25%" style="text-align:right">销售额</th>
</tr>
</thead>
<tbody id="cat-body">
<tr data-t="stockout"><td>夹克<span class="s-tag blue">缺</span></td><td class="num">48%</td><td class="num red">1.2</td><td class="num" align="right">42,100</td></tr>
<tr data-t="low-m"><td>衬衫<span class="s-tag red">低</span></td><td class="num red">22%</td><td class="num">4.2</td><td class="num" align="right">31,200</td></tr>
<tr data-t="overstock"><td>T恤<span class="s-tag orange">压</span></td><td class="num">35%</td><td class="num orange">8.5</td><td class="num" align="right">12,500</td></tr>
<tr data-t="low-m"><td>长裤<span class="s-tag red">低</span></td><td class="num red">28%</td><td class="num">3.5</td><td class="num" align="right">10,200</td></tr>
<tr data-t="stockout"><td>针织衫<span class="s-tag blue">缺</span></td><td class="num">41%</td><td class="num red">1.8</td><td class="num" align="right">9,800</td></tr>
<tr class="extra hidden" data-t="stockout"><td>卫衣<span class="s-tag blue">缺</span></td><td class="num">38%</td><td class="num red">1.5</td><td class="num" align="right">7,402</td></tr>
<tr class="extra hidden" data-t="overstock"><td>牛仔<span class="s-tag orange">压</span></td><td class="num">32%</td><td class="num orange">9.1</td><td class="num" align="right">6,200</td></tr>
</tbody>
</table>
<div class="expand-link" onclick="toggleRows('cat-card')">展开更多数据 ▾</div>
</div>
<div class="card" id="store-card">
<div class="card-title">门店业绩排行</div>
<div class="filter-bar">
<div class="pill active" data-f="all">全部</div>
<div class="pill" data-f="high">高效</div>
<div class="pill" data-f="discount">强折</div>
<div class="pill" data-f="stockout">缺货</div>
</div>
<table class="dense-table">
<thead>
<tr>
<th width="40%">门店名称</th>
<th width="20%">毛利</th>
<th width="20%">正价%</th>
<th width="20%" style="text-align:right">销售</th>
</tr>
</thead>
<tbody id="store-body">
<tr data-t="high"><td>淮海旗舰店<span class="s-tag green">优</span></td><td class="num">52%</td><td class="num">82%</td><td class="num" align="right">1.8w</td></tr>
<tr data-t="discount"><td>万象城店<span class="s-tag orange">折</span></td><td class="num red">18%</td><td class="num red">30%</td><td class="num" align="right">1.5w</td></tr>
<tr data-t="stockout"><td>北京SKP<span class="s-tag blue">缺</span></td><td class="num">41%</td><td class="num">95%</td><td class="num" align="right">1.4w</td></tr>
<tr data-t="high"><td>南京德基<span class="s-tag green">优</span></td><td class="num">49%</td><td class="num">78%</td><td class="num" align="right">1.2w</td></tr>
<tr data-t="discount"><td>广州太古汇<span class="s-tag orange">折</span></td><td class="num red">25%</td><td class="num red">45%</td><td class="num" align="right">1.1w</td></tr>
<tr class="extra hidden" data-t="stockout"><td>万象天地<span class="s-tag blue">缺</span></td><td class="num">39%</td><td class="num">88%</td><td class="num" align="right">9.8k</td></tr>
</tbody>
</table>
<div class="expand-link" onclick="toggleRows('store-card')">展开更多数据 ▾</div>
</div>
</div>
<script>
// 简易过滤与展开逻辑
document.querySelectorAll('.pill').forEach(pill => {
pill.addEventListener('click', function() {
const card = this.closest('.card');
const filter = this.getAttribute('data-f');
card.querySelectorAll('.pill').forEach(p => p.classList.remove('active'));
this.classList.add('active');
const rows = card.querySelectorAll('tbody tr');
rows.forEach(row => {
const tags = row.getAttribute('data-t');
if(filter === 'all' || (tags && tags.includes(filter))) {
row.classList.remove('hidden');
} else {
row.classList.add('hidden');
}
});
});
});
function toggleRows(cardId) {
const card = document.getElementById(cardId);
const extraRows = card.querySelectorAll('.extra');
const link = card.querySelector('.expand-link');
const isHidden = extraRows[0].classList.contains('hidden');
extraRows.forEach(row => {
if(isHidden) row.classList.remove('hidden');
else row.classList.add('hidden');
});
link.innerText = isHidden ? '收起数据 ▴' : '展开更多数据 ▾';
}
</script>
</body>
</html>