mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add blackboards
This commit is contained in:
parent
0fe88061bd
commit
027ca9207f
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
@ -134,7 +134,7 @@
|
||||
"settings-tooltip.min.js": "E9ABA72B3C29CA850342109E57B055B193F3356DD59876B202E8E908AE6247C9",
|
||||
"settings-tooltip.zh-CN.min.js": "AD93F86107EC6840A24BCFF7DE3DB87C620A7591D88CFD4A2E41C058B7ED5585",
|
||||
"show-dead-video-title.min.js": "8D591930421EBA43A1BDF50DC8B645C1BD1A17E109FB1CFBCD6B78E6C74E1D68",
|
||||
"simple-home.vue.min.js": "030C853AE068A918E540BCD491A40831F069BC88375230E40BB4B964E4252FB2",
|
||||
"simple-home.vue.min.js": "197187651A2B9B545445D3F9663FDF165FC653625779B831A4C4A1E93C78A23B",
|
||||
"simplify-home.min.css": "50F0FA046D61ECE5183409CF97C8DBECB4CF64918DF813CD2B39BF9FBD314B42",
|
||||
"simplify-home.min.js": "F6D7F8E0D45847C3E056711AECE3832785603E7EF85A4B995C028F5CBE539C94",
|
||||
"simplify-home.vue.min.js": "CE3C3E09348AA20C36E3EE7A4023CF7DCDE304412D3EC440ABF316CFD0A31C6E",
|
||||
|
||||
BIN
min/bundle.zip
BIN
min/bundle.zip
Binary file not shown.
2
min/simple-home.vue.min.js
vendored
2
min/simple-home.vue.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(e,t)=>{const s=`<div class=simple-home>快了, 已经在路上了.jpg</div>`;return{export:Object.assign({template:s},{})}}})();
|
||||
(()=>{return(o,a)=>{const e=`<div class=simple-home><div class=blackboards><div class=header><div class=title>活动</div><div class=more><icon type=mdi icon=dots-horizontal></icon>更多</div></div><div class=jump-dots><div class=jump-dot v-for="(b, i) of blackboards":key=i :class="{active: i === currentBlackboardIndex}"></div></div><div class=blackboard-cards><a class=blackboard-card target=_blank v-for="(b, i) of blackboards":key=i :href=b.url :title=b.title><img :src=b.imageUrl :alt=b.title><div class=title>{{b.title}}</div></a></div></div></div>`;a.applyStyleFromText(`.simple-home{--title-color:black;color:#444}body.dark .simple-home{--title-color:white;color:#ddd}.simple-home .more{background-color:#ddd;cursor:pointer;padding:2px 16px 2px 8px;display:flex;align-items:center;border-radius:16px;font-size:14px}.simple-home .more .be-icon{margin-right:8px;transition:.3s cubic-bezier(.25,.46,.45,.94)}.simple-home .more:hover .be-icon{transform:rotate(180deg)}body.dark .simple-home .more{background-color:#333}.simple-home .blackboards{display:grid;grid-template-areas:"header header" "dots cards";grid-template-columns:8px 1fr;grid-template-rows:1fr 250px;row-gap:16px;column-gap:16px}.simple-home .blackboards .header{grid-area:header;display:flex;justify-content:space-between;align-items:center}.simple-home .blackboards .header .title{color:var(--title-color);font-weight:700;font-size:24px}.simple-home .blackboards .jump-dots{grid-area:dots;align-self:center;justify-self:center}.simple-home .blackboards .jump-dots .jump-dot{background-color:#ddd;width:8px;height:20px;border-radius:8px;cursor:pointer}.simple-home .blackboards .jump-dots .jump-dot.active{background-color:var(--theme-color);height:40px}.simple-home .blackboards .jump-dots .jump-dot:not(:last-child){margin-bottom:6px}body.dark .simple-home .blackboards .jump-dots .jump-dot:not(.active){background-color:#444}.simple-home .blackboards .blackboard-cards{grid-area:cards;width:500px;height:250px;overflow:auto;scroll-snap-type:y mandatory;scrollbar-width:none!important}.simple-home .blackboards .blackboard-cards::-webkit-scrollbar{width:0!important;height:0!important}.simple-home .blackboards .blackboard-cards .blackboard-card{width:100%;height:100%;scroll-snap-align:start;position:relative;display:block}.simple-home .blackboards .blackboard-cards .blackboard-card img{width:100%;height:100%;object-fit:fill;border-radius:16px;display:block}.simple-home .blackboards .blackboard-cards .blackboard-card .title{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);padding:4px 16px;color:#fff;background-color:#000a;font-size:14px;font-weight:700;border-radius:14px;white-space:nowrap}`,"simple-home-style");return{export:Object.assign({template:e},{components:{Icon:()=>a.importAsync("icon.vue")},data(){return{blackboards:[],currentBlackboardIndex:0}},async mounted(){const{getBlackboards:o}=await a.importAsync("blackboard");this.blackboards=o().filter(o=>!o.isAd)}})}}})();
|
||||
@ -96,7 +96,7 @@ class FeedsCardsManager extends EventTarget {
|
||||
parseCard(element: HTMLElement): FeedsCard {
|
||||
const getText = (selector: string) => {
|
||||
if (element.querySelector(selector) === null) {
|
||||
// console.log(element, selector)
|
||||
console.warn(element, selector)
|
||||
return ''
|
||||
}
|
||||
return (element.querySelector(selector) as HTMLElement).innerText
|
||||
|
||||
@ -1,10 +1,169 @@
|
||||
<template>
|
||||
<div class="simple-home">
|
||||
快了, 已经在路上了.jpg
|
||||
<div class="blackboards">
|
||||
<div class="header">
|
||||
<div class="title">活动</div>
|
||||
<div class="more">
|
||||
<icon type="mdi" icon="dots-horizontal"></icon>更多
|
||||
</div>
|
||||
</div>
|
||||
<div class="jump-dots">
|
||||
<div
|
||||
class="jump-dot"
|
||||
v-for="(b, i) of blackboards"
|
||||
:key="i"
|
||||
:class="{active: i === currentBlackboardIndex}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="blackboard-cards">
|
||||
<a
|
||||
class="blackboard-card"
|
||||
target="_blank"
|
||||
v-for="(b, i) of blackboards"
|
||||
:key="i"
|
||||
:href="b.url"
|
||||
:title="b.title"
|
||||
>
|
||||
<img :src="b.imageUrl" :alt="b.title" />
|
||||
<div class="title">{{b.title}}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rankings">
|
||||
<div class="header">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Blackboard } from './blackboard'
|
||||
export default {
|
||||
|
||||
components: {
|
||||
Icon: () => import('../../icon.vue'),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
blackboards: [] as Blackboard[],
|
||||
currentBlackboardIndex: 0
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
const { getBlackboards } = await import('./blackboard')
|
||||
this.blackboards = getBlackboards().filter(it => !it.isAd)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.simple-home {
|
||||
--title-color: black;
|
||||
color: #444;
|
||||
|
||||
body.dark & {
|
||||
--title-color: white;
|
||||
color: #ddd;
|
||||
}
|
||||
.more {
|
||||
background-color: #ddd;
|
||||
cursor: pointer;
|
||||
padding: 2px 16px 2px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 16px;
|
||||
font-size: 14px;
|
||||
.be-icon {
|
||||
margin-right: 8px;
|
||||
transition: .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
&:hover {
|
||||
.be-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
body.dark & {
|
||||
background-color: #333;
|
||||
}
|
||||
}
|
||||
.blackboards {
|
||||
display: grid;
|
||||
grid-template-areas: 'header header' 'dots cards';
|
||||
grid-template-columns: 8px 1fr;
|
||||
grid-template-rows: 1fr 250px;
|
||||
row-gap: 16px;
|
||||
column-gap: 16px;
|
||||
|
||||
.header {
|
||||
grid-area: header;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.title {
|
||||
color: var(--title-color);
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.jump-dots {
|
||||
grid-area: dots;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
.jump-dot {
|
||||
background-color: #ddd;
|
||||
width: 8px;
|
||||
height: 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
background-color: var(--theme-color);
|
||||
height: 40px;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
body.dark &:not(.active) {
|
||||
background-color: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
.blackboard-cards {
|
||||
grid-area: cards;
|
||||
width: 500px;
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
scroll-snap-type: y mandatory;
|
||||
scrollbar-width: none !important;
|
||||
&::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
.blackboard-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
scroll-snap-align: start;
|
||||
position: relative;
|
||||
display: block;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
border-radius: 16px;
|
||||
display: block;
|
||||
}
|
||||
.title {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 4px 16px;
|
||||
color: white;
|
||||
background-color: #000a;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
border-radius: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user