Add card styles

This commit is contained in:
the1812 2019-08-07 22:36:23 +08:00
parent 109ec334b4
commit b4aee6e90e
6 changed files with 99 additions and 10 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1091,7 +1091,6 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
}
.custom-navbar .activity-popup {
width: 380px;
height: 600px;
}
.custom-navbar .activity-tabs {
display: flex;
@ -1125,6 +1124,47 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
max-height: 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 .nav-header-wrapper,

View File

@ -905,6 +905,12 @@ class Activities extends NavbarComponent {
`;
this.active = document.URL.replace(/\?.*$/, "") === "https://t.bilibili.com/";
this.onPopup = this.init
}
static get latestID () {
}
static set latestID (id) {
}
async init () {
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': {},
// 'column-activity': {},
// 'photos-activity': {},