Add blackboards

This commit is contained in:
the1812 2019-10-24 10:53:20 +08:00
parent 0fe88061bd
commit 027ca9207f
9 changed files with 171 additions and 12 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

@ -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",

Binary file not shown.

View File

@ -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)}})}}})();

View File

@ -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

View File

@ -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>
<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>