rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

```

Browse Source 
feat(sidepanel): 优化时间戳工具页面布局与响应式样式

新增 datetime-box 和 input-group 容器类，用于优化时间戳转换和日期时间转换功能的
界面结构。调整 input-text、select-box 和 convert-button 的宽度及响应式行为，使其在
移动端设备上能够自适应显示。同时更新 HTML 结构以匹配新的 CSS 类名和布局方式，提升
用户体验与界面可读性。
```
This commit is contained in:
雨霖铃
2025-11-14 00:20:35 +08:00
parent 43ee47751b
commit 3b9e362bc9
2 changed files with 111 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sidepanel/index.html
+58 -18
View File
@@ -18,7 +18,6 @@
<!-- 页面内容容器 -->
<div class="content">
<!-- 时间戳工具页面 -->
<div id="page-timestamp" class="page active">
<h2>时间戳工具</h2>
@@ -37,30 +36,71 @@
<!-- 时间戳转日期时间 -->
<div>
<h2>时间戳转日期时间</h2>
<div>
<input type="text" id="input-timestamp" placeholder="请输入时间戳" class="input-text" />
<select class="select-box">
<option value="milliseconds">毫秒(ms)</option>
<option value="seconds">秒(s)</option>
</select>
</div>
<div>
<button id="convert-timestamp-btn" class="convert-button">转换</button>
</div>
<div>
<input type="text" id="timestamp-input-result" placeholder="转换结果" class="input-text"></input>
<select class="select-box">
<option>Asia/Shanghai</option>
</select>
<div class="datetime-box">
<div class="input-group">
<input
type="text"
id="input-timestamp"
placeholder="请输入时间戳"
class="input-text"
/>
<select class="select-box">
<option value="milliseconds">毫秒(ms)</option>
<option value="seconds">秒(s)</option>
</select>
</div>
<div class="input-group">
<button id="convert-timestamp-btn" class="convert-button">转换</button>
</div>
<div class="input-group">
<input
type="text"
id="timestamp-input-result"
placeholder="转换结果"
class="input-text"
/>
<select class="select-box">
<option>Asia/Shanghai</option>
</select>
</div>
</div>
</div>
<!-- 日期时间转时间戳 -->
<div>
<h2>日期时间转时间戳</h2>
<div class="datetime-box">
<div class="input-group">
<input
type="text"
id="input-datetime"
placeholder="输入日期时间"
class="input-text"
/>
<select class="select-box">
<option>Asia/Shanghai</option>
</select>
</div>
<button id="convert-datetime-btn">转换</button>
<p id="converted-timestamp"></p>
<div class="input-group">
<button id="convert-datetime-btn" class="convert-button">转换</button>
</div>
<div class="input-group">
<input
type="text"
id="datetime-input-result"
placeholder="转换结果"
class="input-text"
/>
<select class="select-box">
<option value="milliseconds">毫秒(ms)</option>
<option value="seconds">秒(s)</option>
</select>
</div>
</div>
</div>
</div>