mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
1 line
6.5 KiB
JavaScript
1 line
6.5 KiB
JavaScript
(()=>(e,i)=>{const t=`<a class=video-card target=_blank :href="epID ? ('https://www.bilibili.com/bangumi/play/ep' + epID) : ('https://www.bilibili.com/' + bvid)":class="{vertical: orientation === 'vertical'}"><div class=cover-container><dpi-img class=cover :src=coverUrl :size="{height: 120, width: 200}"></dpi-img><div v-if=durationText class=duration>{{durationText}}</div><div v-if="durationText && watchlater !== null && watchlater !== undefined"class=watchlater @click.stop.prevent=toggleWatchlater(aid)><i class=mdi :class="{'mdi-clock-outline': !watchlater, 'mdi-check-circle': watchlater}"></i>{{watchlater ? '已添加' : '稍后再看'}}</div></div><h1 class=title :title=title>{{title}}</h1><div class=topics v-if="topics && topics.length"><a class=topic v-for="topic of topics.slice(0,3)":key=topic.id target=_blank :href="'https://t.bilibili.com/topic/name/' + topic.name + '/feed'">#{{topic.name}}#</a></div><p class=description :title=description v-else>{{description}}</p><a class=up :class="{'no-face': !upFaceUrl}"target=_blank :href="upID ? ('https://space.bilibili.com/' + upID) : null"><dpi-img v-if=upFaceUrl class=face :src=upFaceUrl :size=24></dpi-img><icon v-else icon=up type=extended></icon><div class=name :title=upName>{{upName}}</div></a><div class=stats><template v-if="like && !vertical"><icon type=extended icon=like-outline></icon>{{like}}</template><template v-if="coins && !vertical"><icon type=home icon=coin-outline></icon>{{coins}}</template><template v-if=favorites><icon type=home icon=favorites-outline></icon>{{favorites}}</template><icon type=extended icon=play></icon>{{playCount}}<template v-if=danmakuCount><icon type=extended icon=danmaku></icon>{{danmakuCount}}</template></div></a>`;i.applyStyleFromText(`.video-card{display:grid;grid-template-columns:200px 1fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:"cover title" "cover description" "cover up";height:var(--card-height);width:var(--card-width);color:#000;background-color:#fff;border-radius:16px;box-shadow:0 4px 8px 0 #0001;margin-right:var(--card-margin);margin-bottom:var(--card-margin);position:relative}body.dark .video-card,body.dark .video-card:hover{background-color:#282828;color:#eee}.video-card:hover{color:#000}.video-card.vertical{grid-template-columns:auto auto;grid-template-rows:2fr 1fr 1fr;grid-template-areas:"cover cover" "title title" "up up"}.video-card.vertical .description,.video-card.vertical .topics{display:none}.video-card.vertical .cover-container{border-radius:16px 16px 0 0}.video-card.vertical .title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:3em;word-break:break-all;white-space:normal;line-height:1.5;font-size:11pt}.video-card.vertical .up{align-self:start;white-space:nowrap}.video-card.vertical .up .name{text-overflow:ellipsis;overflow:hidden}.video-card.vertical .up:not(.no-face){margin-left:8px;max-width:calc(var(--card-width) - 16px)}.video-card.vertical .up.no-face{margin-top:8px;max-width:calc(var(--card-width) - 24px)}.video-card.vertical .stats{align-self:end;justify-self:start;margin-bottom:8px;margin-right:0}.video-card>*{justify-self:self-start;align-self:center}.video-card:hover .cover{transform:scale(1.05);transition:.1s cubic-bezier(.39,.58,.57,1)}.video-card:hover .duration,.video-card:hover .watchlater{opacity:1}.video-card .duration,.video-card .watchlater{opacity:0}body.always-show-duration .video-card .duration{opacity:1}.video-card .cover-container{grid-area:cover;border-radius:16px 0 0 16px;position:relative;width:100%;height:100%;overflow:hidden}.video-card .cover-container .cover{object-fit:cover;width:100%;height:100%}.video-card .cover-container>:not(.cover){position:absolute}.video-card .cover-container .duration,.video-card .cover-container .watchlater{bottom:6px;padding:4px 8px;background-color:#000a;color:#fff;border-radius:14px;height:24px;box-sizing:border-box}.video-card .cover-container .duration .mdi,.video-card .cover-container .watchlater .mdi{font-size:12pt;line-height:1;margin-right:4px}.video-card .cover-container .duration{left:6px}.video-card .cover-container .watchlater{right:6px;display:flex;align-items:center;padding-left:4px}.video-card .title{grid-area:title;font-size:12pt;font-weight:700;color:inherit;padding:0 12px;white-space:nowrap;overflow:hidden;justify-self:stretch;text-overflow:ellipsis}.video-card .topics{grid-area:description;display:flex;align-items:center;margin-left:12px}.video-card .topics .topic{color:inherit;padding:4px 8px;background-color:#8882;margin-right:8px;border-radius:14px;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}.video-card .topics .topic:hover{background-color:#8884;color:var(--theme-color)}.video-card .description{grid-area:description;color:inherit;overflow:hidden;align-self:stretch;justify-self:stretch;margin:0 12px;line-height:1.5;height:3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;scrollbar-width:none!important}.video-card .description::-webkit-scrollbar{width:0!important}.video-card .description.single-line{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.video-card .stats,.video-card .up{grid-area:up}.video-card .up{margin-left:12px;display:flex;align-items:center;padding:2px;background-color:#8882;border-radius:14px;color:inherit}.video-card .up.no-face{background-color:transparent;padding:0}.video-card .up.no-face .be-icon{font-size:14pt;opacity:.75}.video-card .up .face{border-radius:50%;width:24px;height:24px}.video-card .up .name{margin:0 8px}.video-card .up:not(.no-face):hover{background-color:#8884}.video-card .up:hover .be-icon,.video-card .up:hover .name{color:var(--theme-color)}.video-card .stats{justify-self:self-end;margin-right:12px;display:flex;align-items:center;opacity:.5}.video-card .stats .be-icon{font-size:12pt;margin:0 4px 0 12px}.video-card .stats .be-icon.be-iconfont-favorites-outline{font-size:14pt}.video-card .stats .be-icon.be-iconfont-coin-outline{font-size:11pt}`,"video-card-style");return{export:Object.assign({template:t},{props:["data","orientation"],store:store,components:{"dpi-img":()=>i.importAsync("dpi-img.vue"),Icon:()=>i.importAsync("icon.vue")},data(){return{upFaceUrl:"",danmakuCount:"",like:"",coins:"",favorites:"",dynamic:"",topics:[],upID:0,epID:0,..._.omit(this.data,"watchlater"),watchlaterInit:this.data.watchlater}},computed:{vertical(){return this.orientation==="vertical"},...Vuex.mapState(["watchlaterList"]),watchlater(){if(getUID()&&this.watchlaterInit!==null){return this.watchlaterList.includes(this.aid)}else{return null}}},methods:{...Vuex.mapActions(["toggleWatchlater"])}})}})(); |