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.min.js": "E9ABA72B3C29CA850342109E57B055B193F3356DD59876B202E8E908AE6247C9",
|
||||||
"settings-tooltip.zh-CN.min.js": "AD93F86107EC6840A24BCFF7DE3DB87C620A7591D88CFD4A2E41C058B7ED5585",
|
"settings-tooltip.zh-CN.min.js": "AD93F86107EC6840A24BCFF7DE3DB87C620A7591D88CFD4A2E41C058B7ED5585",
|
||||||
"show-dead-video-title.min.js": "8D591930421EBA43A1BDF50DC8B645C1BD1A17E109FB1CFBCD6B78E6C74E1D68",
|
"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.css": "50F0FA046D61ECE5183409CF97C8DBECB4CF64918DF813CD2B39BF9FBD314B42",
|
||||||
"simplify-home.min.js": "F6D7F8E0D45847C3E056711AECE3832785603E7EF85A4B995C028F5CBE539C94",
|
"simplify-home.min.js": "F6D7F8E0D45847C3E056711AECE3832785603E7EF85A4B995C028F5CBE539C94",
|
||||||
"simplify-home.vue.min.js": "CE3C3E09348AA20C36E3EE7A4023CF7DCDE304412D3EC440ABF316CFD0A31C6E",
|
"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 {
|
parseCard(element: HTMLElement): FeedsCard {
|
||||||
const getText = (selector: string) => {
|
const getText = (selector: string) => {
|
||||||
if (element.querySelector(selector) === null) {
|
if (element.querySelector(selector) === null) {
|
||||||
// console.log(element, selector)
|
console.warn(element, selector)
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
return (element.querySelector(selector) as HTMLElement).innerText
|
return (element.querySelector(selector) as HTMLElement).innerText
|
||||||
|
|||||||
@ -1,10 +1,169 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="simple-home">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { Blackboard } from './blackboard'
|
||||||
export default {
|
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