779 lines
20 KiB
HTML
779 lines
20 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>开品参考填写预览</title>
|
||
<style>
|
||
:root {
|
||
--page: #f8f9fa;
|
||
--shell: #eef3f7;
|
||
--card: #ffffff;
|
||
--soft: #f7f9fb;
|
||
--line: #dce3ea;
|
||
--text: #111c27;
|
||
--muted: #617182;
|
||
--faint: #8c98a5;
|
||
--dark: #405766;
|
||
--active: #202a33;
|
||
--blue-soft: #e9f3ff;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
min-width: 1360px;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
background: var(--page);
|
||
color: var(--text);
|
||
font-family:
|
||
Manrope,
|
||
Inter,
|
||
"PingFang SC",
|
||
"Microsoft YaHei",
|
||
Arial,
|
||
sans-serif;
|
||
font-size: 13px;
|
||
}
|
||
|
||
button,
|
||
input,
|
||
textarea {
|
||
font: inherit;
|
||
}
|
||
|
||
.top-nav {
|
||
position: fixed;
|
||
inset: 0 0 auto 0;
|
||
z-index: 20;
|
||
height: 64px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 32px;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||
background: rgba(255, 255, 255, 0.92);
|
||
backdrop-filter: blur(24px);
|
||
}
|
||
|
||
.brand {
|
||
display: flex;
|
||
min-width: 172px;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: #2d3335;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.brand-mark {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 6px;
|
||
display: grid;
|
||
place-items: center;
|
||
background: #0d1520;
|
||
color: #fff;
|
||
font-size: 18px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.brand strong {
|
||
display: block;
|
||
font-size: 13px;
|
||
font-weight: 900;
|
||
line-height: 1;
|
||
}
|
||
|
||
.brand span {
|
||
display: block;
|
||
margin-top: 5px;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
color: rgba(90, 96, 98, 0.55);
|
||
}
|
||
|
||
.divider {
|
||
width: 1px;
|
||
height: 32px;
|
||
margin: 0 28px;
|
||
background: rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.nav-link {
|
||
height: 40px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
border-radius: 6px;
|
||
padding: 0 12px;
|
||
color: rgba(90, 96, 98, 0.72);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nav-link.active {
|
||
background: rgba(0, 0, 0, 0.04);
|
||
color: #2d3335;
|
||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
|
||
}
|
||
|
||
.nav-icon {
|
||
width: 15px;
|
||
height: 15px;
|
||
border: 1.7px solid currentColor;
|
||
border-radius: 4px;
|
||
opacity: 0.75;
|
||
}
|
||
|
||
.top-tools {
|
||
margin-left: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
border-left: 1px solid rgba(0, 0, 0, 0.04);
|
||
padding-left: 24px;
|
||
}
|
||
|
||
.round,
|
||
.user {
|
||
height: 38px;
|
||
border: 1px solid rgba(15, 23, 42, 0.08);
|
||
background: #fff;
|
||
color: #5a6062;
|
||
}
|
||
|
||
.round {
|
||
width: 38px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.user {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
border-radius: 999px;
|
||
padding: 0 14px 0 10px;
|
||
}
|
||
|
||
.avatar {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
display: grid;
|
||
place-items: center;
|
||
background: #eef1f4;
|
||
color: #7b858f;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.main {
|
||
height: calc(100vh - 64px);
|
||
margin-top: 64px;
|
||
overflow: hidden;
|
||
padding: 0 0 16px 16px;
|
||
background: var(--page);
|
||
}
|
||
|
||
.split {
|
||
height: 100%;
|
||
display: flex;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(255, 255, 255, 0.72);
|
||
border-radius: 32px;
|
||
background: var(--shell);
|
||
box-shadow: 0 18px 44px rgba(27, 45, 58, 0.08);
|
||
}
|
||
|
||
.content {
|
||
min-width: 0;
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 12px;
|
||
}
|
||
|
||
.content-inner {
|
||
min-height: 100%;
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
background: var(--card);
|
||
padding: 12px;
|
||
}
|
||
|
||
.info-card {
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
background: #fff;
|
||
padding: 12px;
|
||
}
|
||
|
||
.section-title {
|
||
margin: 0 0 12px;
|
||
font-size: 15px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.top-summary {
|
||
display: grid;
|
||
grid-template-columns: 220px minmax(0, 1fr);
|
||
gap: 16px;
|
||
}
|
||
|
||
.image-box {
|
||
height: 174px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
background:
|
||
linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(222, 229, 235, 0.18)),
|
||
#f3f6f9;
|
||
display: grid;
|
||
place-items: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.desk {
|
||
position: relative;
|
||
width: 154px;
|
||
height: 86px;
|
||
}
|
||
|
||
.desk::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 5px;
|
||
right: 5px;
|
||
top: 14px;
|
||
height: 28px;
|
||
border-radius: 6px;
|
||
transform: perspective(120px) rotateX(6deg);
|
||
background: #6a452e;
|
||
box-shadow: inset 0 -9px 0 rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.leg {
|
||
position: absolute;
|
||
top: 40px;
|
||
width: 8px;
|
||
height: 50px;
|
||
background: #3b281e;
|
||
}
|
||
|
||
.leg.one {
|
||
left: 24px;
|
||
}
|
||
|
||
.leg.two {
|
||
left: 62px;
|
||
}
|
||
|
||
.leg.three {
|
||
right: 62px;
|
||
}
|
||
|
||
.leg.four {
|
||
right: 24px;
|
||
}
|
||
|
||
.field-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||
gap: 22px 36px;
|
||
align-content: start;
|
||
}
|
||
|
||
.field span,
|
||
.line-field span {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.field input,
|
||
.field textarea,
|
||
.line-field input,
|
||
.line-field textarea {
|
||
width: 100%;
|
||
border: 0;
|
||
background: transparent;
|
||
color: #071522;
|
||
outline: none;
|
||
padding: 0;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.field input::placeholder,
|
||
.field textarea::placeholder {
|
||
color: #a2acb7;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.soft-input {
|
||
min-height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1px solid var(--line);
|
||
border-radius: 10px;
|
||
background: #f8fafc;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.soft-input input {
|
||
height: 28px;
|
||
}
|
||
|
||
.select-pill {
|
||
height: 32px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
background: #f3f6f9;
|
||
padding: 0 10px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 24px;
|
||
height: 18px;
|
||
border-radius: 999px;
|
||
background: #425966;
|
||
color: #fff;
|
||
font-size: 11px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.divider-line {
|
||
margin: 16px 0 12px;
|
||
height: 1px;
|
||
background: var(--line);
|
||
}
|
||
|
||
.line-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||
gap: 18px 34px;
|
||
}
|
||
|
||
.line-field.wide-2 {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
.line-field.wide-3 {
|
||
grid-column: span 3;
|
||
}
|
||
|
||
.textarea-box {
|
||
min-height: 54px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 10px;
|
||
background: #f8fafc;
|
||
padding: 9px 10px;
|
||
}
|
||
|
||
.textarea-box textarea {
|
||
min-height: 36px;
|
||
resize: vertical;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.sub-card {
|
||
margin-top: 14px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
background: #fff;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sub-head {
|
||
padding: 12px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.sub-head h2 {
|
||
margin: 0;
|
||
font-size: 15px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.sub-head p {
|
||
margin: 5px 0 0;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.reference-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.reference-table th,
|
||
.reference-table td {
|
||
border-bottom: 1px solid var(--line);
|
||
padding: 10px 12px;
|
||
text-align: left;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.reference-table th {
|
||
color: var(--muted);
|
||
font-weight: 800;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.mini-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.mini-btn {
|
||
height: 26px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 7px;
|
||
background: #f7f9fb;
|
||
color: #334b5f;
|
||
padding: 0 9px;
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.mini-btn.primary {
|
||
border-color: var(--dark);
|
||
background: var(--dark);
|
||
color: #fff;
|
||
}
|
||
|
||
.mini-btn.danger {
|
||
color: #c73646;
|
||
}
|
||
|
||
.bottom-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
padding: 12px;
|
||
}
|
||
|
||
.btn {
|
||
height: 38px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 10px;
|
||
background: #f7f9fb;
|
||
color: var(--text);
|
||
padding: 0 18px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.btn.primary {
|
||
border-color: var(--dark);
|
||
background: var(--dark);
|
||
color: #fff;
|
||
}
|
||
|
||
.right-panel {
|
||
width: 224px;
|
||
min-width: 224px;
|
||
max-width: 224px;
|
||
overflow-y: auto;
|
||
border-left: 1px solid var(--line);
|
||
background: #fff;
|
||
padding: 12px;
|
||
}
|
||
|
||
.side-card {
|
||
min-height: 100%;
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
background: #fff;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.side-head {
|
||
padding: 14px 12px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.side-head h2 {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.side-head p {
|
||
margin: 7px 0 0;
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.node-list {
|
||
display: grid;
|
||
gap: 8px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.node {
|
||
height: 38px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border: 1px solid var(--line);
|
||
border-radius: 10px;
|
||
background: #fff;
|
||
color: #334b5f;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.node.active {
|
||
background: #e6eef5;
|
||
color: #27495f;
|
||
}
|
||
|
||
.node.dark {
|
||
border-color: var(--active);
|
||
background: var(--active);
|
||
color: #fff;
|
||
}
|
||
|
||
.count {
|
||
min-width: 24px;
|
||
height: 24px;
|
||
display: grid;
|
||
place-items: center;
|
||
border-radius: 999px;
|
||
background: #f6f8fa;
|
||
color: var(--muted);
|
||
font-weight: 900;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.dark .count {
|
||
background: #40515f;
|
||
color: #fff;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="top-nav">
|
||
<a class="brand" href="#">
|
||
<div class="brand-mark">J</div>
|
||
<div>
|
||
<strong>壹点产品开发平台</strong>
|
||
<span>正式产品</span>
|
||
</div>
|
||
</a>
|
||
<div class="divider"></div>
|
||
<nav class="nav-links">
|
||
<a class="nav-link" href="#"><i class="nav-icon"></i>首页概览</a>
|
||
<a class="nav-link" href="#"><i class="nav-icon"></i>资产中心</a>
|
||
<a class="nav-link" href="#"><i class="nav-icon"></i>辅助装配</a>
|
||
<a class="nav-link" href="#"><i class="nav-icon"></i>草稿组</a>
|
||
<a class="nav-link active" href="#"><i class="nav-icon"></i>正式产品</a>
|
||
<a class="nav-link" href="#"><i class="nav-icon"></i>仓库管理</a>
|
||
</nav>
|
||
<div class="top-tools">
|
||
<button class="round" aria-label="通知"></button>
|
||
<button class="round" aria-label="切换主题"></button>
|
||
<button class="user"><span class="avatar">L</span>LocalAdmin⌄</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="main">
|
||
<section class="split">
|
||
<div class="content">
|
||
<div class="content-inner">
|
||
<section class="info-card">
|
||
<h1 class="section-title">开品参考填写</h1>
|
||
<div class="top-summary">
|
||
<div class="image-box">
|
||
<div class="desk">
|
||
<span class="leg one"></span>
|
||
<span class="leg two"></span>
|
||
<span class="leg three"></span>
|
||
<span class="leg four"></span>
|
||
</div>
|
||
</div>
|
||
<div class="field-grid">
|
||
<div class="field">
|
||
<span>开品名称</span>
|
||
<div class="soft-input"><input value="胡桃木色窄边书桌" /></div>
|
||
</div>
|
||
<div class="field">
|
||
<span>临时编号</span>
|
||
<div class="soft-input"><input value="KP20260428-001" /></div>
|
||
</div>
|
||
<div class="field">
|
||
<span>品牌</span>
|
||
<input value="基本盘" />
|
||
</div>
|
||
<div class="field">
|
||
<span>适配品牌</span>
|
||
<div class="select-pill">基本盘 <i class="badge">+3</i> ▼</div>
|
||
</div>
|
||
<div class="field">
|
||
<span>当前阶段</span>
|
||
<input value="立项前" />
|
||
</div>
|
||
|
||
<div class="field">
|
||
<span>商品类目</span>
|
||
<input value="书桌" />
|
||
</div>
|
||
<div class="field">
|
||
<span>销售类目</span>
|
||
<input value="书桌" />
|
||
</div>
|
||
<div class="field">
|
||
<span>设计师</span>
|
||
<input value="徐霞客" />
|
||
</div>
|
||
<div class="field">
|
||
<span>企划负责人</span>
|
||
<input value="徐霞客" />
|
||
</div>
|
||
<div class="field">
|
||
<span>年份</span>
|
||
<input value="2026" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="divider-line"></div>
|
||
|
||
<div class="line-grid">
|
||
<div class="line-field wide-2">
|
||
<span>竞品链接 / 参考链接</span>
|
||
<div class="soft-input"><input value="https://example.com/reference-desk" /></div>
|
||
</div>
|
||
<div class="line-field">
|
||
<span>目标价格带</span>
|
||
<input value="待评审确认" />
|
||
</div>
|
||
<div class="line-field">
|
||
<span>尺寸</span>
|
||
<input value="140/60/78" />
|
||
</div>
|
||
<div class="line-field">
|
||
<span>材质</span>
|
||
<input value="胡桃木色 / 橡胶木方向" />
|
||
</div>
|
||
<div class="line-field">
|
||
<span>是否急开</span>
|
||
<input value="否" />
|
||
</div>
|
||
|
||
<div class="line-field wide-3">
|
||
<span>开品理由</span>
|
||
<div class="textarea-box">
|
||
<textarea>看中竞品窄边桌面比例和轻量化视觉，适合基础盘补一个中低价位书桌款。</textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sub-card">
|
||
<div class="sub-head">
|
||
<div style="display: flex; align-items: center; justify-content: space-between; gap: 12px">
|
||
<div>
|
||
<h2>参考资料</h2>
|
||
<p>这里上传前期参考文档、截图整理和竞品资料，不放 SKU，也不放完整基础信息。</p>
|
||
</div>
|
||
<button class="mini-btn primary">上传文档</button>
|
||
</div>
|
||
</div>
|
||
<table class="reference-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 80px">序号</th>
|
||
<th style="width: 220px">文档名称</th>
|
||
<th style="width: 150px">类型</th>
|
||
<th>备注</th>
|
||
<th style="width: 150px">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>竞品截图整理.pdf</td>
|
||
<td>参考文档</td>
|
||
<td>主图、侧面图、结构截图，供产品资料和立项评审参考。</td>
|
||
<td>
|
||
<div class="mini-actions">
|
||
<button class="mini-btn">下载</button>
|
||
<button class="mini-btn danger">删除</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>目标价格带.xlsx</td>
|
||
<td>价格资料</td>
|
||
<td>竞品价格、尺寸、卖点和链接初步整理。</td>
|
||
<td>
|
||
<div class="mini-actions">
|
||
<button class="mini-btn">下载</button>
|
||
<button class="mini-btn danger">删除</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>参考外观图.zip</td>
|
||
<td>图片资料</td>
|
||
<td>外观图片、局部结构图、材质参考图。</td>
|
||
<td>
|
||
<div class="mini-actions">
|
||
<button class="mini-btn">下载</button>
|
||
<button class="mini-btn danger">删除</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="bottom-actions">
|
||
<button class="btn">保存草稿</button>
|
||
<button class="btn primary">保存开品参考</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="right-panel">
|
||
<div class="side-card">
|
||
<div class="side-head">
|
||
<h2>图片与文档</h2>
|
||
<p>右侧按分类切换工作区</p>
|
||
</div>
|
||
<div class="node-list">
|
||
<button class="node active"><span>开品参考</span><i class="count">0</i></button>
|
||
<button class="node"><span>产品资料</span><i class="count">1</i></button>
|
||
<button class="node"><span>设计卖点</span><i class="count">1</i></button>
|
||
<button class="node"><span>立项评审</span><i class="count">0</i></button>
|
||
<button class="node dark"><span>基础信息</span><i class="count">锁</i></button>
|
||
<button class="node"><span>样品评审</span><i class="count">锁</i></button>
|
||
<button class="node"><span>产品实拍</span><i class="count">锁</i></button>
|
||
<button class="node"><span>安装方式</span><i class="count">锁</i></button>
|
||
<button class="node"><span>包装细节</span><i class="count">锁</i></button>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|