Fix img
This commit is contained in:
JiXieShi
@@ -66,159 +66,7 @@
|
||||
}).catch()
|
||||
</script>
|
||||
<style>
|
||||
|
||||
#bilibili {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#bilibili .loading {
|
||||
/*vertical-align: middle;*/
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--primary, #673ab7);
|
||||
}
|
||||
|
||||
#bilibili .loading img {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.bilibili_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.bilibili_box {
|
||||
display: flex;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid #e0e3ed;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
color: var(--primary, #673ab7) !important;
|
||||
text-decoration: none !important;
|
||||
transition: 0.3s;
|
||||
maxWidth768()
|
||||
}
|
||||
|
||||
.bilibili_box:hover {
|
||||
border-color: #4976f5;
|
||||
}
|
||||
|
||||
.bilibili_box .bilibili_cover {
|
||||
width: 234px;
|
||||
position: relative;
|
||||
maxWidth768()
|
||||
}
|
||||
|
||||
.bilibili_box .bilibili_cover img {
|
||||
width: 100%;
|
||||
filter: none;
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.bilibili_box .bilibili_cover .play_icon {
|
||||
position: absolute;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
opacity: 0.8;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.bilibili_box .bilibili_cover span {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 5px;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 3px #7a7a7a;
|
||||
}
|
||||
|
||||
.bilibili_box .bilibili_info {
|
||||
padding: 10px 10px 10px 18px;
|
||||
line-height: 1;
|
||||
width: calc(100% - 200px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
maxWidth768()
|
||||
}
|
||||
|
||||
.bilibili_box .bilibili_info .title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.bilibili_box .bilibili_info .desc {
|
||||
font-size: 15px;
|
||||
margin: 2px 0 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
maxWidth768()
|
||||
}
|
||||
|
||||
.bilibili_box .bilibili_info .stat {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.bilibili_box .bilibili_info .stat svg {
|
||||
margin-right: 3px;
|
||||
font-size: 18px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.bilibili_box .bilibili_info .stat svg path {
|
||||
fill: var(--primary, #673ab7);
|
||||
}
|
||||
|
||||
.bilibili_box .bilibili_info .stat span {
|
||||
margin-right: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bilibili_box .bilibili_info .owner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.bilibili_box .bilibili_info .owner .tip {
|
||||
color: #f69;
|
||||
border: 1px solid;
|
||||
padding: 3px 6px;
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.bilibili_box .bilibili_info .owner img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50% !important;
|
||||
object-fit: cover;
|
||||
margin: 0 5px 0 0 !important;
|
||||
}
|
||||
|
||||
[data-theme='light'] .bilibili_box .bilibili_info .stat svg, [data-theme='dark'] .bilibili_cover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
#bilibili{margin-top:1rem}#bilibili .loading{display:flex;align-items:center;justify-content:center;flex-direction:column;margin:0 auto;width:100px;height:100px;border-radius:8px;background-color:var(--primary,#673ab7)}#bilibili .loading img{height:60px;width:60px}.bilibili_item{display:flex;flex-direction:column;padding:20px;margin-bottom:5px;color:var(--primary,#673ab7) !important;text-decoration:none !important;transition:0.3s;border-radius:10px;border:1px solid #e0e3ed}.bilibili_item:hover{border-color:#4976f5}.bilibili_box{display:flex;background:var(--card-bg);border:1px solid #e0e3ed;border-radius:10px;overflow:hidden;color:var(--primary,#673ab7) !important;text-decoration:none !important;transition:0.3s;maxWidth768()}.bilibili_box:hover{border-color:rgb(from hotpink r g b)}.bilibili_box .bilibili_cover{width:234px;position:relative;maxWidth768()}.bilibili_box .bilibili_cover img{width:100%;filter:none;margin:0 !important;border-radius:0 !important}.bilibili_box .bilibili_cover .play_icon{position:absolute;width:45px;height:45px;opacity:0.8;top:50%;left:50%;transform:translate(-50%,-50%)}.bilibili_box .bilibili_cover span{position:absolute;bottom:0px;right:5px;color:#fff;text-shadow:0 1px 3px #7a7a7a}.bilibili_box .bilibili_info{padding:10px 10px 10px 18px;line-height:1;width:calc(100% - 200px);display:flex;flex-direction:column;justify-content:space-around;maxWidth768()}.bilibili_box .bilibili_info .title{font-size:1.2rem;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5;color:rgb(from var(--primary,#000000) calc(1 - r) calc(1 - g) calc(1 - b))}.bilibili_box .bilibili_info .desc{font-size:15px;margin:2px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgb(from var(--primary,#000000) calc(1 - r) calc(1 - g) calc(1 - b));maxWidth768()}.bilibili_box .bilibili_info .stat{font-size:15px}.bilibili_box .bilibili_info .stat svg{margin-right:3px;font-size:18px;width:1em;height:1em}.bilibili_box .bilibili_info .stat svg path{fill:rgb(from hotpink r g b)}.bilibili_box .bilibili_info .stat span{margin-right:10px;display:inline-flex;align-items:center}.bilibili_box .bilibili_info .owner{display:flex;align-items:center;line-height:1;font-size:15px}.bilibili_box .bilibili_info .owner .tip{color:#f69;border:1px solid;padding:3px 6px;font-size:12px;border-radius:5px;margin-right:10px}.bilibili_box .bilibili_info .owner img{width:22px;height:22px;border-radius:50% !important;object-fit:cover;margin:0 5px 0 0 !important}[data-theme='light'] .bilibili_box .bilibili_info .stat svg,[data-theme='dark'] .bilibili_cover{opacity:0.8}
|
||||
</style>
|
||||
<div id="bilibili">
|
||||
<div class='loading'><img src="/public/img/loading.svg" alt="加载中...">
|
||||
@@ -246,6 +94,7 @@
|
||||
data.forEach(item => {
|
||||
items.push(Formatv(item))
|
||||
})
|
||||
html+='<span class="dividingline">Videos</span>'
|
||||
for (const item of items) {
|
||||
html += `<div class="bilibili_item"><span>${item.text}</span>`
|
||||
for (const id of item.ids) {
|
||||
|
||||
Reference in New Issue
Block a user