进行一波页面改进
This commit is contained in:
parent
00f9926016
commit
076449b9f9
@ -63,17 +63,62 @@
|
|||||||
/* 添加边框 */
|
/* 添加边框 */
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
/* 添加内边距 */
|
/* 添加内边距 */
|
||||||
|
background-color: #343942ba;
|
||||||
|
/* 浅灰色背景 */
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spacer {
|
.spacer {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
/* 设置行间距 */
|
/* 设置行间距 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-section {
|
||||||
|
flex-basis: 50%;
|
||||||
|
/* 占满宽度 */
|
||||||
|
padding: 20px;
|
||||||
|
border: 2px solid #000;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
background-color: #FFCDD2;
|
||||||
|
/* 淡蓝色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-section input {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-section button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 18px;
|
||||||
|
background-color: #b3ffe8;
|
||||||
|
/* 淡蓝色 */
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-section button:hover {
|
||||||
|
background-color: #90CAF9;
|
||||||
|
/* 深蓝色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-display {
|
||||||
|
flex-basis: 100%;
|
||||||
|
/* 占满宽度 */
|
||||||
|
padding: 20px;
|
||||||
|
border: 2px solid #000;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
background-color: #E1BEE7;
|
||||||
|
/* 淡紫色 */
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="spacer"></div> <!-- 添加空白元素 -->
|
<div class="spacer"></div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="box2">
|
<div class="box2">
|
||||||
<div class="title">最新数据</div>
|
<div class="title">最新数据</div>
|
||||||
@ -83,7 +128,7 @@
|
|||||||
<div>blake hash: <span class="monospace">|MAX_HASH|</span></div>
|
<div>blake hash: <span class="monospace">|MAX_HASH|</span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="spacer"></div> <!-- 添加空白元素 -->
|
<div class="spacer"></div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title">最新飞船</div>
|
<div class="title">最新飞船</div>
|
||||||
@ -98,6 +143,66 @@
|
|||||||
<div>blake hash: <span class="monospace">|MAX_SAVE_HASH|</span></div>
|
<div>blake hash: <span class="monospace">|MAX_SAVE_HASH|</span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="spacer"></div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="input-section">
|
||||||
|
<input type="number" id="dataId" placeholder="输入ID">
|
||||||
|
<button onclick="fetchData()">获取数据</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="spacer"></div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="result-display">
|
||||||
|
<div class="title">请求结果</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function fetchData() {
|
||||||
|
// 获取输入框中的 ID
|
||||||
|
const dataId = document.getElementById('dataId').value;
|
||||||
|
if (!dataId) {
|
||||||
|
alert('请输入 ID');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (dataId < 76858) {
|
||||||
|
alert('ID 不能小于 76858 (这个是目前最小的 ID)');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 发送请求
|
||||||
|
fetch(`/info/${dataId}`)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
// 获取结果显示区域
|
||||||
|
const resultDisplay = document.querySelector('.result-display');
|
||||||
|
// 清空结果显示区域
|
||||||
|
resultDisplay.innerHTML = '';
|
||||||
|
// 创建结果显示区域的元素
|
||||||
|
const resultTitle = document.createElement('div');
|
||||||
|
resultTitle.classList.add('title');
|
||||||
|
resultTitle.innerText = '请求结果';
|
||||||
|
resultDisplay.appendChild(resultTitle);
|
||||||
|
// 先判断数据拿没拿到
|
||||||
|
if (data["code"] != 200) {
|
||||||
|
// 没拿到
|
||||||
|
const resultContent = document.createElement('div');
|
||||||
|
resultContent.innerText = data["msg"];
|
||||||
|
resultDisplay.appendChild(resultContent);
|
||||||
|
} else {
|
||||||
|
// 拿到了
|
||||||
|
// 创建结果显示区域的元素
|
||||||
|
const resultContent = document.createElement('div');
|
||||||
|
const inner_data = data["data"];
|
||||||
|
// 添加数据
|
||||||
|
resultContent.innerHTML = `<div>id: ${inner_data["save_id"]}</div>
|
||||||
|
<div>类型: ${inner_data["save_type"]}</div>
|
||||||
|
<div>长度: ${inner_data["len"]}</div>
|
||||||
|
<div>blake hash: <span class="monospace">${inner_data["blake_hash"]}</span></div>`;
|
||||||
|
resultDisplay.appendChild(resultContent);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue
Block a user