60 lines
5.3 KiB
HTML
60 lines
5.3 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>App 任务预览 - 低保真原型</title>
|
||
<style>
|
||
:root{color-scheme:light;--ink:#17212b;--muted:#5d6973;--line:#cbd3d9;--surface:#fff;--bg:#eef1f3;--primary:#176b52;--warn:#8b5a08;--focus:#c57414}
|
||
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;letter-spacing:0;padding-top:38px}
|
||
.prototype{position:fixed;z-index:30;top:0;left:0;right:0;height:38px;display:grid;place-items:center;background:#2d343a;color:#fff;font-size:12px;font-weight:700}.phone{width:min(100%,420px);min-height:calc(100vh - 38px);margin:auto;background:#f7f8f9;border-inline:1px solid var(--line);padding-bottom:94px}
|
||
header{height:58px;display:flex;align-items:center;gap:14px;padding:0 16px;background:#fff;border-bottom:1px solid var(--line)}h1{font-size:19px;margin:0}.back{min-width:44px;min-height:44px;display:grid;place-items:center;color:var(--ink);text-decoration:none;border-radius:6px;font-size:22px}
|
||
main{padding:16px}.task-id{color:var(--muted);margin:0 0 14px}.panel{padding:16px;margin-bottom:14px;background:#fff;border:1px solid var(--line);border-radius:6px}.panel h2{font-size:16px;margin:0 0 12px}
|
||
.reference{height:150px;display:grid;place-items:center;margin-bottom:14px;border:1px dashed #88949d;background:linear-gradient(135deg,#e4e8ea 25%,#f7f8f9 25%,#f7f8f9 50%,#e4e8ea 50%,#e4e8ea 75%,#f7f8f9 75%);background-size:18px 18px;color:#34414b;font-weight:700;text-align:center}
|
||
dl{display:grid;grid-template-columns:84px 1fr;gap:10px 12px;margin:0}dt{color:var(--muted)}dd{margin:0;font-weight:650}.constraint{font-size:18px;color:var(--primary)}
|
||
.derived{border-left:4px solid #b57a20;background:#fff8e9}.derived p{margin:0;color:#574619}.notice{padding:12px;border-left:4px solid var(--primary);background:#e9f3ef}.notice.warn{border-color:var(--warn);background:#fff4dc}.notice strong,.notice span{display:block}.notice span{color:var(--muted);margin-top:3px}
|
||
label{font-size:13px;font-weight:700}select,button,a{font:inherit}select{width:100%;min-height:44px;padding:8px;margin-top:6px;border:1px solid #89959e;border-radius:6px;background:#fff}
|
||
.bottom{position:fixed;z-index:10;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,420px);padding:12px 18px 16px;background:#fff;border-top:1px solid var(--line)}.primary{width:100%;min-height:52px;border:0;border-radius:6px;background:var(--primary);color:#fff;font-weight:800}.primary:disabled{opacity:.5}
|
||
a:focus-visible,button:focus-visible,select:focus{outline:3px solid color-mix(in srgb,var(--focus) 45%,transparent);outline-offset:2px}@media(max-width:420px){.phone{border:0}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="prototype">PROTOTYPE - 仅供确认布局和交互，不是生产实现</div>
|
||
<div class="phone">
|
||
<header><a class="back" href="android-task-home.html" aria-label="返回任务主页">‹</a><h1>任务预览</h1></header>
|
||
<main>
|
||
<p class="task-id">任务 #DEMO-2407 · 状态 CLAIMED</p>
|
||
<section class="panel" aria-labelledby="originalTitle">
|
||
<h2 id="originalTitle">管理员原始要求</h2>
|
||
<div class="reference" role="img" aria-label="脱敏的收纳盒参考图占位">脱敏参考图<br>收纳盒样例</div>
|
||
<dl>
|
||
<dt>商品标题</dt><dd>透明抽屉式桌面收纳盒</dd>
|
||
<dt>SKU</dt><dd>白色 · 中号</dd>
|
||
<dt>数量</dt><dd class="constraint">2 件</dd>
|
||
<dt>最高预算</dt><dd class="constraint">¥ 48.00 / 件</dd>
|
||
<dt>描述</dt><dd>带把手，可叠放，优先选择相同外观。</dd>
|
||
</dl>
|
||
</section>
|
||
<section class="panel derived" aria-labelledby="derivedTitle">
|
||
<h2 id="derivedTitle">AI 辅助理解 · 待验证</h2>
|
||
<p>可能关键词：透明、抽屉式、中号、可叠放。最终数量和预算始终以原始要求为准。</p>
|
||
</section>
|
||
<section class="panel">
|
||
<label for="scenario">原型状态</label>
|
||
<select id="scenario">
|
||
<option value="ready">租约有效，可以开始</option>
|
||
<option value="expired">任务租约已释放</option>
|
||
</select>
|
||
<div class="notice" id="notice" role="status"><strong>开始前请再次检查</strong><span>开始后将打开拼多多并执行有界检索。</span></div>
|
||
</section>
|
||
</main>
|
||
<div class="bottom"><button class="primary" id="start" type="button">开始采购</button></div>
|
||
</div>
|
||
<script>
|
||
const scenario=document.querySelector("#scenario"),notice=document.querySelector("#notice"),start=document.querySelector("#start");
|
||
scenario.addEventListener("change",()=>{const expired=scenario.value==="expired";notice.className="notice "+(expired?"warn":"");notice.innerHTML=expired?"<strong>任务已释放</strong><span>不能继续执行，请返回任务主页重新获取。</span>":"<strong>开始前请再次检查</strong><span>开始后将打开拼多多并执行有界检索。</span>";start.textContent=expired?"返回任务主页":"开始采购";start.dataset.expired=expired});
|
||
start.addEventListener("click",()=>{location.href=start.dataset.expired==="true"?"android-task-home.html":"android-task-running.html"});
|
||
</script>
|
||
</body>
|
||
</html>
|