feat: 调整页面布局

This commit is contained in:
涵曦 2024-09-15 22:53:59 +08:00
parent 270076b9a7
commit 30926c6b79
4 changed files with 33 additions and 18 deletions

View File

@ -5,7 +5,7 @@
<title>小爱音箱操控面板</title>
<script src="/static/jquery-3.7.1.min.js?version=1726274250"></script>
<script src="/static/app.js?version=1726274250"></script>
<link rel="stylesheet" type="text/css" href="/static/style.css?version=1726274250">
<link rel="stylesheet" type="text/css" href="/static/style.css?version=17262742506">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>

BIN
xiaomusic/static/qrcode.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

View File

@ -49,20 +49,15 @@ var vConsole = new window.VConsole();
<label for="hostname">*XIAOMUSIC_HOSTNAME(IP或域名):</label>
<input id="hostname" type="text"></input>
</div>
<hr>
<div class="rows">
<label for="verbose">是否开启调试日志:</label>
<select id="verbose">
<option value="true" selected>true</option>
<option value="false">false</option>
</select>
<div>
<button class="save-button">保存</button>
<button onclick="location.href='/';">返回首页</button>
</div>
</div>
<hr>
<div class="rows">
<label for="group_list">设备分组配置:</label>
<input id="group_list" type="text" placeholder="did1:组名1,did2:组名1,did3:组名2"></input>
@ -177,17 +172,24 @@ var vConsole = new window.VConsole();
</div>
</div>
<hr>
<button onclick="location.href='/';">返回首页</button>
<button id="get_music_list">获取歌单</button>
<button class="save-button">保存</button>
<hr>
<a class="button" href="/downloadlog" download="xiaomusic.txt">下载日志文件</a>
<button onclick="location.href='/docs';">查看接口文档</button>
<a class="button" href="/static/m3u.html" target="_blank">m3u文件转换</a>
<hr>
<a href="/static/m3u.html" target="_blank">m3u文件转换工具</a>
<hr>
<a href="/static/debug.html" target="_blank">调试工具</a>
<a class="button" href="/static/debug.html" target="_blank">调试工具</a>
<a class="button" href="https://afdian.com/a/imhanxi" target="_blank">💰 爱发电</a>
<a class="button" href="https://github.com/hanxi/xiaomusic" target="_blank">点个 Star ⭐</a>
<div class="rows">
<img class="qrcode" src="/static/qrcode.png" alt="请涵曦喝奶茶🧋">
</div>
<footer>
<p>Powered by <a href="https://github.com/hanxi/xiaomusic" target="_blank">xiaomusic</a></p>
</footer>

View File

@ -24,16 +24,19 @@ label {
width: 300px;
}
input,select {
margin: 10px;
width: 300px;
margin-left: 5%;
margin-right: 5%;
margin-top: 10px;
margin-bottom: 10px;
width: 90%;
max-width: 400px;
height: 40px;
}
.rows {
display: flex;
flex-direction: column;
margin-left: 20px;
margin-right: 20px;
justify-content: center;
}
footer {
@ -44,8 +47,12 @@ footer {
}
textarea{
margin: 10px;
width: 300px;
margin-left: 5%;
margin-right: 5%;
margin-top: 10px;
margin-bottom: 10px;
width: 90%;
max-width: 400px;
height: 200px;
}
@ -77,3 +84,9 @@ footer {
text-decoration: none;
display: inline-block;
}
.qrcode {
width: 100%;
max-width: 480px;
height: auto;
}