Fix img
JiXieShi
parent
97d31651c6
commit
60f9fdf116
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -447,3 +447,22 @@ hr:after{
|
|||
width:26px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.dividingline{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
color: var(--primary, #673ab7);
|
||||
}
|
||||
.dividingline::before,.dividingline::after{
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
}
|
||||
.dividingline::before{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.dividingline::after{
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -1,202 +1,7 @@
|
|||
{{template "header" .}}
|
||||
<div class="sub-title">- {{ .Title }} -</div>
|
||||
<style>
|
||||
/* 页面初始化 */
|
||||
div#page {
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[data-theme=dark] #twikoo .tk-content,
|
||||
#twikoo .tk-content {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.talk_item,
|
||||
.tk-expand,
|
||||
.tk-comments-container>.tk-comment,
|
||||
.tk-submit:nth-child(1){
|
||||
background: var(--card-bg);
|
||||
border: 1px solid #e0e3ed;
|
||||
box-shadow: 0 5px 10px rgb(189 189 189 / 10%);
|
||||
transition: all .3s ease-in-out;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.talk_item:hover,
|
||||
.tk-comments-container>.tk-comment:hover,
|
||||
.tk-submit:nth-child(1):hover {
|
||||
border-color: var(--primary,#673ab7);;
|
||||
}
|
||||
|
||||
.tk-submit {
|
||||
padding: 20px 10px 0;
|
||||
}
|
||||
|
||||
.tk-comments-container>.tk-comment {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* 页面初始化结束 */
|
||||
|
||||
#talk{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#talk .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);
|
||||
}
|
||||
|
||||
#talk .loading img {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.talk_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin: 0 !important;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
.talk_bottom,
|
||||
.talk_meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.talk_bottom{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 10px;
|
||||
}
|
||||
span.talk_nick {
|
||||
color: #6dbdc3;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
svg.is-badge.icon {
|
||||
width: 15px;
|
||||
margin-left: 5px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
span.talk_date {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.talk_content {
|
||||
line-height: 1.5;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.zone_imgbox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
--w: calc(25% - 8px);
|
||||
gap: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.zone_imgbox a {
|
||||
display: block;
|
||||
border-radius: 12px;
|
||||
width: var(--w);
|
||||
aspect-ratio: 1/1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zone_imgbox img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
/* 底部 */
|
||||
|
||||
.talk_bottom {
|
||||
opacity: .9;
|
||||
}
|
||||
.talk_bottom .icon {
|
||||
color: var(--primary,#673ab7);
|
||||
float: right;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.talk_bottom .icon:hover {
|
||||
color: #49b1f5;
|
||||
}
|
||||
|
||||
span.talk_tag{
|
||||
font-size: 14px;
|
||||
}
|
||||
.talk_content>a {
|
||||
margin: 0 3px;
|
||||
color: #ff7d73 !important;
|
||||
}
|
||||
.talk_content>a:hover{
|
||||
text-decoration: none !important;
|
||||
color: #ff5143 !important
|
||||
}
|
||||
|
||||
/* 提醒 */
|
||||
|
||||
.limit {
|
||||
transition: all .3s ease-in-out;
|
||||
color: rgba(76, 73, 72, 0.6);
|
||||
}
|
||||
|
||||
[data-theme=dark] .limit {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.limit {
|
||||
display: none;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
color: var(--primary,#673ab7);
|
||||
}
|
||||
@media screen and (max-width: 900px) {
|
||||
.zone_imgbox {
|
||||
--w: calc(33% - 5px);
|
||||
}
|
||||
#talk{
|
||||
margin: 10px 3px 0
|
||||
}
|
||||
#post-comment{
|
||||
margin: 0 3px
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.zone_imgbox {
|
||||
gap: 6px;
|
||||
}
|
||||
.zone_imgbox {
|
||||
--w: calc(50% - 3px);
|
||||
}
|
||||
span.talk_date {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
div#page{background:none;border:0;padding:0}[data-theme=dark] #twikoo .tk-content,#twikoo .tk-content{padding:0;background:transparent}.talk_item,.tk-expand,.tk-comments-container>.tk-comment,.tk-submit:nth-child(1){background:var(--card-bg);border:1px solid #e0e3ed;box-shadow:0 5px 10px rgb(189 189 189 / 10%);transition:all .3s ease-in-out;border-radius:12px}.talk_item:hover,.tk-comments-container>.tk-comment:hover,.tk-submit:nth-child(1):hover{border-color:var(--primary,#673ab7)}.tk-submit{padding:20px 10px 0}.tk-comments-container>.tk-comment{padding:15px}#talk{margin-top:1rem}#talk .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)}#talk .loading img{height:60px;width:60px}.talk_item{display:flex;flex-direction:column;padding:20px;margin-bottom:15px}.avatar{margin:0 !important;width:60px;height:60px;border-radius:10px}.talk_bottom,.talk_meta{display:flex;align-items:center;width:100%;line-height:1.5}.talk_bottom{justify-content:space-between}.info{display:flex;flex-direction:column;margin-left:10px}span.talk_nick{color:#6dbdc3;font-size:1.2rem}svg.is-badge.icon{width:15px;margin-left:5px;padding-top:3px}span.talk_date{opacity:.6}.talk_content{line-height:1.5;margin-top:10px}.zone_imgbox{display:flex;flex-wrap:wrap;--w:calc(25% - 8px);gap:10px;margin-top:5px}.zone_imgbox a{display:block;border-radius:12px;width:var(--w);aspect-ratio:1/1;position:relative}.zone_imgbox img{width:100%;height:100%;margin:0 !important;object-fit:cover}.talk_bottom{opacity:.9}.talk_bottom .icon{color:var(--primary,#673ab7);float:right;transition:all .3s}.talk_bottom .icon:hover{color:#49b1f5}span.talk_tag{font-size:14px}.talk_content>a{margin:0 3px;color:#ff7d73 !important}.talk_content>a:hover{text-decoration:none !important;color:#ff5143 !important}.limit{transition:all .3s ease-in-out;color:rgba(76,73,72,0.6)}[data-theme=dark] .limit{color:rgba(255,255,255,0.5)}.limit{display:none;text-align:center;margin-top:20px;color:var(--primary,#673ab7)}@media screen and (max-width:900px){.zone_imgbox{--w:calc(33% - 5px)}#talk{margin:10px 3px 0}#post-comment{margin:0 3px}}@media screen and (max-width:768px){.zone_imgbox{gap:6px}.zone_imgbox{--w:calc(50% - 3px)}span.talk_date{font-size:14px}}
|
||||
</style>
|
||||
|
||||
<div id="talk">
|
||||
|
|
|
|||
Loading…
Reference in New Issue