90 lines
3.1 KiB
HTML
90 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>建议收集系统</title>
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>建议收集系统</h1>
|
||
|
||
<div class="tabs">
|
||
<button class="tab active" data-tab="submit">提交建议</button>
|
||
<button class="tab" data-tab="query">查询进度</button>
|
||
</div>
|
||
|
||
<div id="submit-panel" class="panel active">
|
||
<form id="suggestion-form">
|
||
<div class="form-group">
|
||
<label for="title">建议标题 *</label>
|
||
<input type="text" id="title" name="title" required placeholder="请输入建议标题">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="type">建议类型 *</label>
|
||
<select id="type" name="type" required>
|
||
<option value="">请选择类型</option>
|
||
<option value="网站建议">网站建议</option>
|
||
<option value="其他建议">其他建议</option>
|
||
<option value="个人建议">个人建议</option>
|
||
<option value="开发建议">开发建议</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="text">建议内容 *</label>
|
||
<textarea id="text" name="text" required placeholder="请详细描述您的建议" rows="5"></textarea>
|
||
</div>
|
||
|
||
<button type="submit" class="btn">提交建议</button>
|
||
</form>
|
||
|
||
<div id="submit-result" class="result" style="display: none;">
|
||
<p>建议提交成功！</p>
|
||
<p>您的查询ID: <strong id="suggestion-id"></strong></p>
|
||
<p class="tip">请妥善保存此ID，用于查询建议进度</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="query-panel" class="panel">
|
||
<div class="form-group">
|
||
<label for="query-id">请输入查询ID</label>
|
||
<input type="text" id="query-id" placeholder="请输入您的查询ID">
|
||
</div>
|
||
<button id="query-btn" class="btn">查询</button>
|
||
|
||
<div id="query-result" class="result" style="display: none;">
|
||
<h3>建议详情</h3>
|
||
<div class="detail-row">
|
||
<span class="label">标题：</span>
|
||
<span id="detail-title"></span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="label">类型：</span>
|
||
<span id="detail-type"></span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="label">内容：</span>
|
||
<span id="detail-text"></span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="label">状态：</span>
|
||
<span id="detail-status" class="status-badge"></span>
|
||
</div>
|
||
<div class="progress-section">
|
||
<label>处理进度：</label>
|
||
<div class="progress-bar">
|
||
<div id="progress-fill" class="progress-fill"></div>
|
||
</div>
|
||
<span id="progress-text">0%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/js/app.js"></script>
|
||
</body>
|
||
</html>
|