html添加下方导航条；添加B站热搜页
This commit is contained in:
parent
7bc8517cfa
commit
d22327a34b
1
html/assets/image/bilibili.svg
Normal file
1
html/assets/image/bilibili.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 1129 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="200"><path d="M234.909 9.656a80.468 80.468 0 0 1 68.398 0 167.374 167.374 0 0 1 41.843 30.578l160.937 140.82h115.07l160.936-140.82a168.983 168.983 0 0 1 41.843-30.578A80.468 80.468 0 0 1 930.96 76.445a80.468 80.468 0 0 1-17.703 53.914 449.818 449.818 0 0 1-35.406 32.187 232.553 232.553 0 0 1-22.531 18.508h100.585a170.593 170.593 0 0 1 118.289 53.109 171.397 171.397 0 0 1 53.914 118.288v462.693a325.897 325.897 0 0 1-4.024 70.007 178.64 178.64 0 0 1-80.468 112.656 173.007 173.007 0 0 1-92.539 25.75h-738.7a341.186 341.186 0 0 1-72.421-4.024A177.835 177.835 0 0 1 28.91 939.065a172.202 172.202 0 0 1-27.36-92.539V388.662a360.498 360.498 0 0 1 0-66.789A177.03 177.03 0 0 1 162.487 178.64h105.414c-16.899-12.07-31.383-26.555-46.672-39.43a80.468 80.468 0 0 1-25.75-65.984 80.468 80.468 0 0 1 39.43-63.57M216.4 321.873a80.468 80.468 0 0 0-63.57 57.937 108.632 108.632 0 0 0 0 30.578v380.615a80.468 80.468 0 0 0 55.523 80.469 106.218 106.218 0 0 0 34.601 5.632h654.208a80.468 80.468 0 0 0 76.444-47.476 112.656 112.656 0 0 0 8.047-53.109v-354.06a135.187 135.187 0 0 0 0-38.625 80.468 80.468 0 0 0-52.304-54.719 129.554 129.554 0 0 0-49.89-7.242H254.22a268.764 268.764 0 0 0-37.82 0z m0 0" fill="#20B0E3"></path><path d="M348.369 447.404a80.468 80.468 0 0 1 55.523 18.507 80.468 80.468 0 0 1 28.164 59.547v80.468a80.468 80.468 0 0 1-16.094 51.5 80.468 80.468 0 0 1-131.968-9.656 104.609 104.609 0 0 1-10.46-54.719v-80.468a80.468 80.468 0 0 1 70.007-67.593z m416.02 0a80.468 80.468 0 0 1 86.102 75.64v80.468a94.148 94.148 0 0 1-12.07 53.11 80.468 80.468 0 0 1-132.773 0 95.757 95.757 0 0 1-12.875-57.133V519.02a80.468 80.468 0 0 1 70.007-70.812z m0 0" fill="#20B0E3"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
1
html/assets/image/weibo.svg
Normal file
1
html/assets/image/weibo.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2278" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1012.49 451.553v0.159c-6.697 20.66-28.861 31.99-49.449 25.288a39.352 39.352 0 0 1-25.287-49.582l-0.067-0.031c20.536-63.6 7.516-136.156-40.315-189.363-47.892-53.212-118.502-73.554-183.731-59.659-21.222 4.537-42.133-9.047-46.638-30.3-4.506-21.253 9.021-42.194 30.239-46.73 91.709-19.563 191.114 8.98 258.467 83.881 67.36 74.839 85.515 176.85 56.781 266.337z" fill="#D32024"></path><path d="M740.429 304.348v-0.03c-18.217 3.973-36.178-7.732-40.06-26.01-3.947-18.31 7.763-36.373 25.98-40.254 44.692-9.548 93.143 4.322 125.885 40.781 32.866 36.496 41.631 86.17 27.607 129.772a33.833 33.833 0 0 1-42.562 21.847c-17.782-5.76-27.484-24.914-21.724-42.69h-0.062c6.887-21.346 2.565-45.635-13.46-63.473-16.026-17.818-39.752-24.546-61.604-19.943z m30.05 192.184c-14.46-4.352-24.352-7.326-16.774-26.352 16.333-41.313 18.027-76.964 0.317-102.385-33.31-47.734-124.451-45.133-228.838-1.28 0-0.061-32.799 14.367-24.412-11.704 16.056-51.774 13.645-95.186-11.361-120.192-56.658-56.878-207.304 2.12-336.477 131.64C56.187 463.32 0 566.14 0 655.1 0 825.18 217.503 928.594 430.28 928.594c278.917 0 464.527-162.504 464.527-291.59 0-77.936-65.546-122.193-124.329-140.472zM430.842 867.62c-169.774 16.84-316.35-60.155-327.368-171.96-11.049-111.74 117.72-216.034 287.488-232.873 169.805-16.84 316.355 60.16 327.368 171.904 11.018 111.866-117.683 216.09-287.488 232.929z" fill="#D32024"></path><path d="M447.805 548.859c-80.783-21.09-172.119 19.287-207.206 90.65-35.743 72.862-1.188 153.681 80.44 180.1 84.578 27.357 184.233-14.525 218.88-93.148 34.181-76.81-8.478-155.94-92.114-177.602zM386.12 734.792c-16.43 26.29-51.584 37.806-78.065 25.661-26.107-11.889-33.833-42.44-17.403-68.045 16.215-25.538 50.207-36.869 76.498-25.856 26.604 11.392 35.087 41.687 18.97 68.24z" fill="#D32024"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
70
html/bilibili.html
Normal file
70
html/bilibili.html
Normal file
@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cn">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>B站热搜</title>
|
||||
<style>
|
||||
#list {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-spacing: 0;
|
||||
border: 0.4px solid black;
|
||||
}
|
||||
|
||||
#list tr {
|
||||
height: min(1.85rem, 50px);
|
||||
}
|
||||
|
||||
#list td {
|
||||
margin: 0;
|
||||
border: 0.4px solid black;
|
||||
}
|
||||
|
||||
/* 热搜的 label 样式 */
|
||||
.hotband-label {
|
||||
color: white;
|
||||
padding: 3px;
|
||||
border-radius: 6px;
|
||||
font-size: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="text-align: center;">
|
||||
<h1>B站热搜榜</h1>
|
||||
<hr>
|
||||
<div>
|
||||
显示字段：
|
||||
<br>
|
||||
<button id="btn_show_all">全选</button>
|
||||
<button id="btn_show_none">全不选</button>
|
||||
|
|
||||
<button id="btn_show_concise">简洁</button>
|
||||
<button id="btn_show_default">普通</button>
|
||||
<button id="btn_show_detailed">详细</button>
|
||||
</div>
|
||||
</div>
|
||||
<p id="latestUpdateTime" style="font-size: 12px; display: inline-block; vertical-align: middle;"></p>
|
||||
<nobr>
|
||||
<button id="btn_refresh">重新拉取</button>
|
||||
</nobr>
|
||||
<nobr>
|
||||
<label for="auto_refresh">
|
||||
<input type="checkbox" class="filter_checkbox" name="auto_refresh" id="auto_refresh">自动拉取<span
|
||||
id="auto_refresh_countdown"></span>
|
||||
</label>
|
||||
</nobr>
|
||||
<nobr>
|
||||
<span id="update-finish-info" style="color: green; font-weight: bold; display: none;">拉取成功，数据已更新</span>
|
||||
</nobr>
|
||||
<table id="list"></table>
|
||||
<script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -29,8 +29,6 @@
|
||||
padding: 3px;
|
||||
border-radius: 6px;
|
||||
font-size: 10px;
|
||||
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@ -79,12 +77,18 @@
|
||||
</div>
|
||||
</div>
|
||||
<p id="latestUpdateTime" style="font-size: 12px; display: inline-block; vertical-align: middle;"></p>
|
||||
<button id="btn_refresh">重新拉取</button>
|
||||
<label for="auto_refresh">
|
||||
<input type="checkbox" class="filter_checkbox" name="auto_refresh" id="auto_refresh">自动拉取<span
|
||||
id="auto_refresh_countdown"></span>
|
||||
</label>
|
||||
<span id="update-finish-info" style="color: green; font-weight: bold; display: none;">拉取成功，数据已更新</span>
|
||||
<nobr>
|
||||
<button id="btn_refresh">重新拉取</button>
|
||||
</nobr>
|
||||
<nobr>
|
||||
<label for="auto_refresh">
|
||||
<input type="checkbox" class="filter_checkbox" name="auto_refresh" id="auto_refresh">自动拉取<span
|
||||
id="auto_refresh_countdown"></span>
|
||||
</label>
|
||||
</nobr>
|
||||
<nobr>
|
||||
<span id="update-finish-info" style="color: green; font-weight: bold; display: none;">拉取成功，数据已更新</span>
|
||||
</nobr>
|
||||
<table id="list"></table>
|
||||
<script>
|
||||
/**
|
||||
@ -201,10 +205,10 @@
|
||||
// 此时还未拉取数据，所以进入 render 函数会直接返回，不会多次渲染
|
||||
let initWidth = document.body.offsetWidth;
|
||||
// console.log(initWidth);
|
||||
if (initWidth < 400) {
|
||||
/* if (initWidth < 400) {
|
||||
btnShowNone.click();
|
||||
btnShowNone.innerHTML += "(默认)";
|
||||
} else if (initWidth < 600) {
|
||||
} else */ if (initWidth < 600) {
|
||||
btnShowConcise.click();
|
||||
btnShowConcise.innerHTML += "(默认)";
|
||||
} else if (initWidth < 1900) {
|
||||
72
index.html
72
index.html
@ -17,11 +17,81 @@
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 50px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#float-container.bt {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: #fdfdfd;
|
||||
box-shadow: 0 -2px 10px 0 rgb(0 0 0 / 10%);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#float-container.bt .navbar-item {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#float-container.bt .navbar-item .navbar-image {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
#float-container.bt .navbar-item .navbar-title {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
#float-container.bt .navbar-item.active .navbar-image {
|
||||
filter: initial;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<iframe src="html/index.html" frameborder="0" style="width: 100%; height: 100%"></iframe>
|
||||
<div class="container">
|
||||
<iframe src="html/weibo.html" frameborder="0" style=""></iframe>
|
||||
<div id="float-container" class="bt">
|
||||
<div class="navbar-item active" targetPage="html/weibo.html">
|
||||
<img class="navbar-image" src="./html/assets/image/weibo.svg" />
|
||||
<p class="navbar-title">微博</p>
|
||||
</div>
|
||||
<div class="navbar-item" targetPage="html/bilibili.html">
|
||||
<img class="navbar-image" src="./html/assets/image/bilibili.svg" style="transform: scale(0.84);" />
|
||||
<p class="navbar-title">B站</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let navbarItems = document.querySelectorAll('.navbar-item');
|
||||
let iframe = document.querySelector('iframe');
|
||||
navbarItems.forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
navbarItems.forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
item.classList.add('active');
|
||||
iframe.src = item.getAttribute('targetPage');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user