mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add card styles
This commit is contained in:
parent
109ec334b4
commit
b4aee6e90e
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
min/custom-navbar.min.css
vendored
2
min/custom-navbar.min.css
vendored
File diff suppressed because one or more lines are too long
2
min/custom-navbar.min.js
vendored
2
min/custom-navbar.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1091,7 +1091,6 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
|||||||
}
|
}
|
||||||
.custom-navbar .activity-popup {
|
.custom-navbar .activity-popup {
|
||||||
width: 380px;
|
width: 380px;
|
||||||
height: 600px;
|
|
||||||
}
|
}
|
||||||
.custom-navbar .activity-tabs {
|
.custom-navbar .activity-tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1125,6 +1124,47 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
|||||||
max-height: unset;
|
max-height: unset;
|
||||||
max-width: unset;
|
max-width: unset;
|
||||||
}
|
}
|
||||||
|
.custom-navbar .video-activity {
|
||||||
|
padding: 12px;
|
||||||
|
overflow: auto;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
.custom-navbar .video-activity-card {
|
||||||
|
--card-width: 172px;
|
||||||
|
width: var(--card-width);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-shadow: rgba(0,0,0,0.2) 0 4px 8px 0px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.custom-navbar.dark .video-activity-card {
|
||||||
|
box-shadow: rgba(0,0,0,0.3) 0 4px 8px 0px;
|
||||||
|
}
|
||||||
|
.custom-navbar .video-activity-card .cover {
|
||||||
|
width: var(--card-width);
|
||||||
|
}
|
||||||
|
.custom-navbar .video-activity-card .title {
|
||||||
|
font-size: 10pt;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 8px;
|
||||||
|
}
|
||||||
|
.custom-navbar .video-activity-card .up {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 8px;
|
||||||
|
}
|
||||||
|
.custom-navbar .video-activity-card .up .face {
|
||||||
|
width: 28px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.round-corner .custom-navbar .video-activity-card {
|
||||||
|
border-radius: var(--large-corner-radius);
|
||||||
|
}
|
||||||
|
.round-corner .custom-navbar .video-activity-card .cover {
|
||||||
|
border-radius: var(--large-corner-radius) var(--large-corner-radius) 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
body.all-navbar-fill .link-navbar,
|
body.all-navbar-fill .link-navbar,
|
||||||
body.all-navbar-fill .nav-header-wrapper,
|
body.all-navbar-fill .nav-header-wrapper,
|
||||||
|
|||||||
@ -905,6 +905,12 @@ class Activities extends NavbarComponent {
|
|||||||
`;
|
`;
|
||||||
this.active = document.URL.replace(/\?.*$/, "") === "https://t.bilibili.com/";
|
this.active = document.URL.replace(/\?.*$/, "") === "https://t.bilibili.com/";
|
||||||
this.onPopup = this.init
|
this.onPopup = this.init
|
||||||
|
}
|
||||||
|
static get latestID () {
|
||||||
|
|
||||||
|
}
|
||||||
|
static set latestID (id) {
|
||||||
|
|
||||||
}
|
}
|
||||||
async init () {
|
async init () {
|
||||||
this.popupVM = new Vue({
|
this.popupVM = new Vue({
|
||||||
@ -933,7 +939,50 @@ class Activities extends NavbarComponent {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// 'video-activity': {},
|
'video-activity': {
|
||||||
|
template: /*html*/`
|
||||||
|
<div class="video-activity">
|
||||||
|
<div v-if="loading" class="loading">加载中...</div>
|
||||||
|
<div v-else class="video-activity-card" v-for="card of cards">
|
||||||
|
<img class="cover" :src="card.coverUrl">
|
||||||
|
<h1 class="title">{{card.title}}</h1>
|
||||||
|
<div class="up">
|
||||||
|
<img class="face" :src="card.faceUrl">
|
||||||
|
<span class="name">{{card.upName}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cards: [],
|
||||||
|
loading: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
(async () => {
|
||||||
|
try {
|
||||||
|
const json = await Ajax.getJsonWithCredentials(`https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/dynamic_new?uid=${userInfo.mid}&type_list=8`)
|
||||||
|
if (json.code !== 0) {
|
||||||
|
throw new Error(json.message)
|
||||||
|
}
|
||||||
|
this.cards = json.data.cards.map(card => {
|
||||||
|
const cardJson = JSON.parse(card.card)
|
||||||
|
return {
|
||||||
|
coverUrl: cardJson.pic,
|
||||||
|
title: cardJson.title,
|
||||||
|
faceUrl: card.desc.user_profile.info.face,
|
||||||
|
upName: card.desc.user_profile.info.uname,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
logError(`加载视频动态失败, error = ${error}`)
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
},
|
||||||
|
},
|
||||||
// 'bangumi-activity': {},
|
// 'bangumi-activity': {},
|
||||||
// 'column-activity': {},
|
// 'column-activity': {},
|
||||||
// 'photos-activity': {},
|
// 'photos-activity': {},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user