mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add styles
This commit is contained in:
parent
2f63d786c4
commit
5126b0473a
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
@ -66,26 +66,26 @@
|
||||
"hide-category.min.js": "64125DCFE1F7DB269049CB839B52E38B4E2D574E7A1AF6A5439BF0B77EB93EC1",
|
||||
"hide-old-entry.min.js": "82C5BB63906A244E1A8CAF2162F502A31188E8437387829B4AC9950E8836100E",
|
||||
"hide-top-search.min.js": "19641CCB6A883DB5DD143A768606DEF0C571572D91CCD3FD5A9302A2A916E19B",
|
||||
"home-video.vue.min.js": "1C53B2430F56C0663D663580F6DB1B84080282E5946C194841AAA4CAA49D2C51",
|
||||
"home-video.vue.min.js": "D1A4CFB69C8224247D1C085D0AC61011B18F349F551A835C1449E12B9693C963",
|
||||
"i18n.de-DE.min.js": "5BDAC5F0493F447A98B4D308817B21AB2787BEF9E3929EA37F0D2ACD3D879337",
|
||||
"i18n.en-US.min.js": "3881C855B9044CF350A66CA56E3C42A5CEAC32FF75C563450BBF3BFA60E446AC",
|
||||
"i18n.ja-JP.min.js": "983B1F62E834C6B3B00006164E774042164E8068F188060A4433342CDF331A97",
|
||||
"i18n.min.css": "6B6A1C2F3E222CF1B686BF94F939B494471C979CC6A5F53CFBAC2F4E32048DD4",
|
||||
"i18n.min.js": "7FCB933FD43C05A152B672D4BD721F3ECEBA6AD29648379947DAAFC403907B38",
|
||||
"i18n.zh-TW.min.js": "803F67270809E3258E2B302ADE542B12EF222C83EDC67FB8C68301C5F4E3A1CC",
|
||||
"icon.vue.min.js": "B6162958FC6475DC94798AB6325A3F9C1FC8E1D29D45C5BB52821B4A223328A5",
|
||||
"icons.min.css": "CE45E84BCB125A434F3DE11F992BED59D39643B4A7314705809B285732615994",
|
||||
"image-resolution.min.js": "0D9679DD7D7CF2709368FC4811F03CC0379EE7286432B98DB7AAB45227D20C76",
|
||||
"image-viewer.min.css": "219E206912EC6FCB0E9F0EC447D19073272A959F66A782D9DF55522FD8A488B5",
|
||||
"image-viewer.min.html": "763742E79923A7918F281AEBB3CEE76FE2A0AE94CACE325AE4BEE1AED451DAEA",
|
||||
"index.min.html": "94B83D9EBB9005C1286A7E0759A7683932F8DADA20D07E5E9D8FF867B04D4B95",
|
||||
"keymap.min.js": "A8EE3D74A3B47DFEE2842B8719DBB13FC7A2E6A5C268E42A606642B1EC036887",
|
||||
"logo.vue.min.js": "5CCF36D4D24982832E019E60A2B5E37041CFB4E7B1BA935173565FF7D3BF72BE",
|
||||
"magic-grid.min.js": "83C4A66DE2E0EB3C4335241E4105AD0A95906F7B5EA129B4CD80E9985D2E09B4",
|
||||
"mdi.min.js": "8A22F2F37F88F74FC07CE2FECA7CE135182058BE24409BAF3DEF0D5845B0BE1A",
|
||||
"medal-helper.min.css": "205A02CC6E8B2DBDA222A0660D83EA6E4B24F0B5A753E269FED099AB8AE31B6C",
|
||||
"medal-helper.min.html": "5D7057259368BE97DED3375DD904695B245AA2BF338C5E18CB3CF61DD913617C",
|
||||
"medal-helper.min.js": "33751914C5DE205D79E059F7BF285E325E4D6DBFC68AE7E4D4B6307672F23B6E",
|
||||
"minimal-home.vue.min.js": "33ED89559FC288FB255813BF57360CDD0C9D7E562D43A455EB9EA357298A3720",
|
||||
"minimal-home.vue.min.js": "4135584D6C8629768DF7FC8C08B49E52EC0182DC6A8C5E493CC81D460CC8C412",
|
||||
"narrow-danmaku.min.js": "12475431A527EFF15100AF57C9C53D0603BC27723126D966CB01240917602253",
|
||||
"new-styles.min.js": "3D7E8E25C5B5B6BD3F784BC05D403C35F0658E67197F878874A9554C2FF5127B",
|
||||
"no-banner.min.css": "DA096F94E7FA26992F3F71245E704D69A1C222D0ADA6F1990FA5D948507CE15F",
|
||||
@ -107,7 +107,7 @@
|
||||
"screenshot.min.css": "C8BFD4B0A76A758477B767338ABA1D0A49408EDBA861351EA5CB57070515CE76",
|
||||
"screenshot.min.js": "DF1F34103A1DB88A7A4F6DDAA3C8F55710FC6C11802CED917A026D66A9F7FE3B",
|
||||
"scrollbar.min.css": "9792340121B6EE6E618A3F62AABD9C992D9C325803DF4879C8A74F02DA0E2213",
|
||||
"search.vue.min.js": "FC4ACD824E870EE9AFF791B7702406801B1F23498BD8DCAAB970F9B6123E43B8",
|
||||
"search.vue.min.js": "1A4E23DFE187B1A3792F3D8E7847B9F2E8593043A8527C7B1D644CA171FC8376",
|
||||
"seeds-to-coins.min.js": "3F1D383501A6E989255808A82850903EB10931CBE0ADE652AADED69FB9502C57",
|
||||
"settings-search.min.js": "C3B605AF2581F562415B6AA30F7B1D825A74EB0B2B83A5F17A303B7B5646E261",
|
||||
"settings-side-bar.min.js": "CC0E3477BF8574606720D3261C4A0202713E42B30CFE737403E629CBA97B2A98",
|
||||
@ -119,8 +119,9 @@
|
||||
"settings-tooltip.zh-CN.min.js": "1D5476BD30DDA2930A2CEA032348FCCBC1B2EC6BED599AD1E26A63C9DDE59DD5",
|
||||
"show-dead-video-title.min.js": "945C4F0E5FB2C62DB21C42FCE01829BAE7B13F4FBD90731CB85C38B82801B1A8",
|
||||
"simple-home.vue.min.js": "F64C88FB33612D715A4ED98A398E6D0E003DCDBF7A2CEDBA9FEC56A63E761A3C",
|
||||
"simplify-home.min.css": "37DC1F7ABDA7BD514F1DF5B3D470C620CEDC4AD1D9EFDFD8D9E43F6A45B3CEB3",
|
||||
"simplify-home.min.js": "A81F7063A6EBA963E80673B0E285173D142C354388894AB4A872BFC73DEA4789",
|
||||
"simplify-home.vue.min.js": "3880EB46A18080E6DADA60E30C82BE267902D63C44B3FA7C6914789967DF8B94",
|
||||
"simplify-home.vue.min.js": "D67FE9B51098D65B863854879CA3EF8026F342912CA9B56F5DBB10A8C4BC948B",
|
||||
"simplify-liveroom.min.css": "0F24C08B156121AF7B321448572996B29519881CC08D2EAA340BE2510E90B458",
|
||||
"simplify-liveroom.min.js": "68750BB42318229348198961E88AC92E4F8D4F2AF9A8CAEFF4C6F228FC037AE6",
|
||||
"skip-charge-list.min.css": "D3C988CE131CEBFAC8A60360529C83EC4AE1B9EA122F9A6924F19963E25A4FE9",
|
||||
|
||||
BIN
min/bundle.zip
BIN
min/bundle.zip
Binary file not shown.
2
min/home-video.vue.min.js
vendored
2
min/home-video.vue.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(i,a)=>{const d=`<div class=home-video><div class=loading v-if=loading><i class="mdi mdi-18px mdi-loading mdi-spin"></i>加载中...</div><div class=cards v-else-if=cards.length><a class=home-video-card v-for="card in cards":key=card.id target=_blank :href="'https://www.bilibili.com/av' + card.aid"><div class=cover-container><dpi-img class=cover :src=card.coverUrl :size="{height: 240}"></dpi-img><div class=duration>{{card.durationText}}</div><div class=topics><a class=topic v-for="topic of card.topics":key=topic.id target=_blank :href="'https://t.bilibili.com/topic/name/' + card.name + '/feed'">{{topic.name}}</a></div><div class=watchlater></div></div><h1 class=title>{{card.title}}</h1><pre class=description>{{card.description}}</pre><dpi-img class=face :src=card.upFaceUrl :size=36></dpi-img><div class=up>{{card.upName}}</div><div class=stats>{{card.playCount}} {{card.danmakuCount}}</div></a></div><div class=empty v-else>空空如也哦 = ̄ω ̄=</div></div>`;return{export:Object.assign({template:d},{components:{"dpi-img":()=>a.importAsync("dpi-img.vue")},data(){return{cards:[],loading:true}},async mounted(){try{const i=await Ajax.getJsonWithCredentials(`https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/dynamic_new?uid=${getUID()}&type_list=8`);if(i.code!==0){Toast.error(i.message,"视频动态",3e3);return}this.cards=i.data.cards.map(i=>{const a=JSON.parse(i.card);const d=_.get(a,"display.topic_info.topic_details",[]).map(i=>{return{id:i.topic_id,name:i.topic_name}});return{id:i.desc.dynamic_id_str,aid:a.aid,title:a.title,upName:i.desc.user_profile.info.uname,upFaceUrl:i.desc.user_profile.info.face,coverUrl:a.pic,description:a.desc,topics:d,duration:a.duration,durationText:formatDuration(a.duration,0),playCount:a.stat.view,danmakuCount:a.stat.danmaku}})}finally{this.loading=false}}})}}})();
|
||||
(()=>{return(e,i)=>{const a=`<div class=home-video><div class=loading v-if=loading><i class="mdi mdi-18px mdi-loading mdi-spin"></i>加载中...</div><div class=cards v-else-if=cards.length><a class=home-video-card v-for="card in cards":key=card.id target=_blank :href="'https://www.bilibili.com/av' + card.aid"><div class=cover-container><dpi-img class=cover :src=card.coverUrl :size="{height: 160, width: 280}"></dpi-img><div class=duration>{{card.durationText}}</div><div class=topics><a class=topic v-for="topic of card.topics":key=topic.id target=_blank :href="'https://t.bilibili.com/topic/name/' + card.name + '/feed'">{{topic.name}}</a></div><div class=watchlater></div></div><h1 class=title>{{card.title}}</h1><pre class=description>{{card.description}}</pre><dpi-img class=face :src=card.upFaceUrl :size=24></dpi-img><div class=up>{{card.upName}}</div><div class=stats><icon type=extended icon=play></icon>{{card.playCount}}<icon type=extended icon=danmaku></icon>{{card.danmakuCount}}</div></a></div><div class=empty v-else>空空如也哦 = ̄ω ̄=</div></div>`;i.applyStyleFromText(`.home-video .cards{display:flex;flex-wrap:wrap;align-items:center}.home-video .cards .home-video-card{display:grid;grid-template-columns:280px 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;border-radius:16px;box-shadow:0 2px 6px 0 #0002;margin-right:var(--card-margin);margin-bottom:var(--card-margin)}body.dark .home-video .cards .home-video-card{background-color:#282828;color:#fff}.home-video .cards .home-video-card>*{justify-self:self-start;align-self:center}.home-video .cards .home-video-card .cover-container{grid-area:cover;position:relative}.home-video .cards .home-video-card .cover-container .cover{border-radius:16px 0 0 16px;object-fit:cover}.home-video .cards .home-video-card .cover-container>:not(.cover){position:absolute}.home-video .cards .home-video-card .title{grid-area:title;font-size:16pt;font-weight:700;color:inherit;padding:0 12px;white-space:nowrap;overflow:hidden;justify-self:stretch;text-overflow:ellipsis}.home-video .cards .home-video-card .description{grid-area:description;color:inherit;overflow:auto;align-self:stretch;justify-self:stretch;margin:0 12px;white-space:pre-wrap;line-height:1.5;scrollbar-width:none!important}.home-video .cards .home-video-card .description::-webkit-scrollbar{width:0!important}.home-video .cards .home-video-card .face,.home-video .cards .home-video-card .stats,.home-video .cards .home-video-card .up{grid-area:up}.home-video .cards .home-video-card .face{margin-left:12px;border-radius:50%}.home-video .cards .home-video-card .up{margin-left:48px}.home-video .cards .home-video-card .stats{justify-self:self-end;margin-right:12px}`,"home-video-style");return{export:Object.assign({template:a},{components:{"dpi-img":()=>i.importAsync("dpi-img.vue"),Icon:()=>i.importAsync("icon.vue")},data(){return{cards:[],loading:true}},async mounted(){try{const e=await Ajax.getJsonWithCredentials(`https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/dynamic_new?uid=${getUID()}&type_list=8`);if(e.code!==0){Toast.error(e.message,"视频动态",3e3);return}this.cards=e.data.cards.map(e=>{const i=JSON.parse(e.card);const a=_.get(i,"display.topic_info.topic_details",[]).map(e=>{return{id:e.topic_id,name:e.topic_name}});return{id:e.desc.dynamic_id_str,aid:i.aid,title:i.title,upName:e.desc.user_profile.info.uname,upFaceUrl:e.desc.user_profile.info.face,coverUrl:i.pic,description:i.desc,topics:a,duration:i.duration,durationText:formatDuration(i.duration,0),playCount:i.stat.view,danmakuCount:i.stat.danmaku}})}finally{this.loading=false}}})}}})();
|
||||
1
min/icon.vue.min.js
vendored
Normal file
1
min/icon.vue.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
(()=>{return(o,e)=>{const n=`<i class=be-icon :class=classes></i>`;e.applyStyleFromText(`@font-face{font-family:be-main-iconfont;src:url(//s1.hdslb.com/bfs/seed/jinkela/header/asserts/iconfont.ttf) format("truetype")}@font-face{font-family:be-extended-iconfont;src:url(//s1.hdslb.com/bfs/static/jinkela/video/asserts/iconfont.4bab144.ttf) format("truetype")}@font-face{font-family:be-home-iconfont;src:url(//s1.hdslb.com/bfs/static/jinkela/international-home/asserts/iconfont.ttf) format("truetype")}.be-icon{color:inherit;font-size:24px;font-style:normal}.be-icon.be-main-iconfont{font-family:be-main-iconfont!important}.be-icon.be-extended-iconfont{font-family:be-extended-iconfont!important}.be-icon.be-home-iconfont{font-family:be-home-iconfont!important}.be-icon.be-iconfont-logo::before{content:""}.be-icon.be-iconfont-lv0::before{content:"";color:#9a9a9a}.be-icon.be-iconfont-lv1::before{content:"";color:#646464}body.dark .be-icon.be-iconfont-lv0::before{color:#777}body.dark .be-icon.be-iconfont-lv1::before{color:#ddd}.be-icon.be-iconfont-lv2::before{content:"";color:#1bc861}.be-icon.be-iconfont-lv3::before{content:"";color:#22baea}.be-icon.be-iconfont-lv4::before{content:"";color:#eaa722}.be-icon.be-iconfont-lv5::before{content:"";color:#ff7631}.be-icon.be-iconfont-lv6::before{content:"";color:#ff3131}.be-icon.be-iconfont-profile::before{content:""}.be-icon.be-iconfont-posts::before{content:""}.be-icon.be-iconfont-wallet::before{content:""}.be-icon.be-iconfont-live-center::before{content:""}.be-icon.be-iconfont-order-center::before{content:""}.be-icon.be-iconfont-logout::before{content:""}.be-icon.be-iconfont-ok::before{content:""}.be-icon.be-iconfont-cancel::before{content:""}.be-icon.be-iconfont-bind-phone::before{content:""}.be-icon.be-iconfont-bind-email::before{content:""}.be-icon.be-iconfont-coin::before{content:""}.be-icon.be-iconfont-b-coin::before{content:""}.be-icon.be-iconfont-activity::before{content:""}.be-icon.be-iconfont-message::before{content:""}.be-icon.be-iconfont-favorite::before{content:""}.be-icon.be-iconfont-history::before{content:""}.be-icon.be-iconfont-vip::before{content:""}.be-icon.be-iconfont-play::before{content:""}.be-icon.be-iconfont-danmaku::before{content:""}.be-icon.be-iconfont-like::before{content:""}`,"icon-style");return{export:Object.assign({template:n},{props:{icon:String,type:String},computed:{classes(){if(this.icon===""||this.type===""){return[]}return[`be-iconfont-${this.icon}`,`be-${this.type}-iconfont`]}}})}}})();
|
||||
1
min/logo.vue.min.js
vendored
1
min/logo.vue.min.js
vendored
@ -1 +0,0 @@
|
||||
(()=>{return(o,i)=>{const l=`<div class="bilibili-logo bilibili-logo-icon"></div>`;i.applyStyleFromText(`@font-face{font-family:bilibili-logo-iconfont;src:url(//s1.hdslb.com/bfs/seed/jinkela/header/asserts/iconfont.ttf) format("truetype")}.bilibili-logo{color:var(--theme-color);font-family:bilibili-logo-iconfont!important;font-size:24px;font-style:normal}.bilibili-logo::before{content:""}`,"logo-style");return{export:Object.assign({template:l},{})}}})();
|
||||
2
min/minimal-home.vue.min.js
vendored
2
min/minimal-home.vue.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(e,i)=>{const a=`<div class=minimal-home><div class=minimal-home-header><logo class=logo></logo><div class=home-tabs><div v-for="(tab, index) of tabs":key=index class=tab :class="{active: tab.active}":data-tab=tab.name @click=changeTab(tab)>{{tab.displayName}}</div></div><search></search></div><div class=minimal-home-content><component :is=content></component></div></div>`;i.applyStyleFromText(`.minimal-home,.minimal-home *{box-sizing:border-box}.minimal-home .logo{font-size:48px}`,"minimal-home-style");return{export:Object.assign({template:a},{components:{Logo:()=>i.importAsync("logo.vue"),Search:()=>i.importAsync("search.vue"),HomeVideo:()=>i.importAsync("home-video.vue")},data(){return{tabs:[{name:"video",displayName:"视频动态",active:true,more:"https://t.bilibili.com/?tab=8"},{name:"ranking7",displayName:"一周排行",active:true,more:"https://www.bilibili.com/ranking/all/0/0/7"},{name:"ranking3",displayName:"三日排行",active:true,more:"https://www.bilibili.com/ranking"},{name:"ranking1",displayName:"昨日排行",active:true,more:"https://www.bilibili.com/ranking/all/0/0/1"}],content:"HomeVideo"}},methods:{changeTab(e){if(e.active){window.open(e.more,"_blank");return}const i=this.tabs.find(e=>e.active);i.active=false;e.active=true}}})}}})();
|
||||
(()=>{return(e,i)=>{const a=`<div class=minimal-home><div class=minimal-home-header><icon class=logo icon=logo type=main></icon><div class=home-tabs><div v-for="(tab, index) of tabs":key=index class=tab :class="{active: tab.active}":data-tab=tab.name @click=changeTab(tab)>{{tab.displayName}}</div></div><search></search></div><div class=minimal-home-content><component :is=content></component></div></div>`;i.applyStyleFromText(`.minimal-home,.minimal-home *{box-sizing:border-box}.minimal-home .logo{font-size:48px;color:var(--theme-color)}.minimal-home .minimal-home-header{display:flex;align-items:center;justify-content:space-between}.minimal-home .minimal-home-header .home-tabs{display:flex;flex-grow:1;justify-content:space-around}.minimal-home .minimal-home-content{margin-top:64px;width:calc(var(--card-column-count) * (var(--card-width) + var(--card-margin)))}`,"minimal-home-style");return{export:Object.assign({template:a},{components:{Icon:()=>i.importAsync("icon.vue"),Search:()=>i.importAsync("search.vue"),HomeVideo:()=>i.importAsync("home-video.vue")},data(){return{tabs:[{name:"video",displayName:"视频动态",active:true,more:"https://t.bilibili.com/?tab=8"},{name:"ranking7",displayName:"一周排行",active:false,more:"https://www.bilibili.com/ranking/all/0/0/7"},{name:"ranking3",displayName:"三日排行",active:false,more:"https://www.bilibili.com/ranking"},{name:"ranking1",displayName:"昨日排行",active:false,more:"https://www.bilibili.com/ranking/all/0/0/1"}],content:"HomeVideo"}},methods:{changeTab(e){if(e.active){window.open(e.more,"_blank");return}const i=this.tabs.find(e=>e.active);i.active=false;e.active=true}}})}}})();
|
||||
2
min/search.vue.min.js
vendored
2
min/search.vue.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(e,t)=>{const r=`<div class=search></div>`;t.applyStyleFromText(`WARNING: Invalid character(s) '\ufeff' at 1:0. Ignoring.`,"search-style");return{export:Object.assign({template:r},{})}}})();
|
||||
(()=>{return(e,t)=>{const r=`<div class=search></div>`;return{export:Object.assign({template:r},{})}}})();
|
||||
1
min/simplify-home.min.css
vendored
Normal file
1
min/simplify-home.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.international-footer,.international-header .b-wrap,.international-home>:not(.international-header){display:none!important}
|
||||
2
min/simplify-home.vue.min.js
vendored
2
min/simplify-home.vue.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(e,m)=>{const o=`<div class=simplify-home><component :is=activeComponent></component></div>`;return{export:Object.assign({template:o},{components:{"minimal-home":()=>m.importAsync("minimal-home.vue"),"simple-home":()=>m.importAsync("simple-home.vue")},computed:{activeComponent(){return this.homeStyle==="清爽"?"simple-home":"minimal-home"}},props:{homeStyle:String}})}}})();
|
||||
(()=>{return(e,m)=>{const i=`<div class=simplify-home><component class=simplify-home-component :is=activeComponent></component></div>`;m.applyStyleFromText(`.simplify-home{margin-top:64px;display:flex;align-items:center;justify-content:center;--card-width:700px;--card-height:160px;--card-margin:16px;--card-column-count:1}.simplify-home .simplify-home-component{max-width:80%}`,"simplify-home-style");return{export:Object.assign({template:i},{components:{"minimal-home":()=>m.importAsync("minimal-home.vue"),"simple-home":()=>m.importAsync("simple-home.vue")},computed:{activeComponent(){return this.homeStyle==="清爽"?"simple-home":"minimal-home"}},props:{homeStyle:String}})}}})();
|
||||
@ -637,6 +637,7 @@ Resource.manifest = {
|
||||
},
|
||||
simplifyHome: {
|
||||
path: 'simplify-home.min.js',
|
||||
style: 'instant',
|
||||
displayNames: {
|
||||
simplifyHome: '简化首页'
|
||||
},
|
||||
|
||||
150
src/style/icon.vue
Normal file
150
src/style/icon.vue
Normal file
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<i class="be-icon" :class="classes"></i>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
props: {
|
||||
icon: String,
|
||||
type: String
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
if (this.icon === '' || this.type === '') {
|
||||
return []
|
||||
}
|
||||
return [`be-iconfont-${this.icon}`, `be-${this.type}-iconfont`]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@font-face {
|
||||
font-family: 'be-main-iconfont';
|
||||
src: url('//s1.hdslb.com/bfs/seed/jinkela/header/asserts/iconfont.ttf')
|
||||
format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'be-extended-iconfont';
|
||||
src: url('//s1.hdslb.com/bfs/static/jinkela/video/asserts/iconfont.4bab144.ttf')
|
||||
format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'be-home-iconfont';
|
||||
src: url('//s1.hdslb.com/bfs/static/jinkela/international-home/asserts/iconfont.ttf')
|
||||
format('truetype');
|
||||
}
|
||||
.be-icon {
|
||||
color: inherit;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
&.be-main-iconfont {
|
||||
font-family: 'be-main-iconfont' !important;
|
||||
}
|
||||
&.be-extended-iconfont {
|
||||
font-family: 'be-extended-iconfont' !important;
|
||||
}
|
||||
&.be-home-iconfont {
|
||||
font-family: 'be-home-iconfont' !important;
|
||||
}
|
||||
|
||||
&.be-iconfont-logo::before {
|
||||
content: '\E725';
|
||||
}
|
||||
&.be-iconfont-lv0::before {
|
||||
content: '\E6CB';
|
||||
color: #9a9a9a;
|
||||
}
|
||||
&.be-iconfont-lv1::before {
|
||||
content: '\E6CC';
|
||||
color: #646464;
|
||||
}
|
||||
body.dark &.be-iconfont-lv0::before {
|
||||
color: #777;
|
||||
}
|
||||
body.dark &.be-iconfont-lv1::before {
|
||||
color: #ddd;
|
||||
}
|
||||
&.be-iconfont-lv2::before {
|
||||
content: '\E6CD';
|
||||
color: #1bc861;
|
||||
}
|
||||
&.be-iconfont-lv3::before {
|
||||
content: '\E6CE';
|
||||
color: #22baea;
|
||||
}
|
||||
&.be-iconfont-lv4::before {
|
||||
content: '\E6CF';
|
||||
color: #eaa722;
|
||||
}
|
||||
&.be-iconfont-lv5::before {
|
||||
content: '\E6D0';
|
||||
color: #ff7631;
|
||||
}
|
||||
&.be-iconfont-lv6::before {
|
||||
content: '\E6D1';
|
||||
color: #ff3131;
|
||||
}
|
||||
&.be-iconfont-profile::before {
|
||||
content: '\E722';
|
||||
}
|
||||
&.be-iconfont-posts::before {
|
||||
content: '\E723';
|
||||
}
|
||||
&.be-iconfont-wallet::before {
|
||||
content: '\E71F';
|
||||
}
|
||||
&.be-iconfont-live-center::before {
|
||||
content: '\E720';
|
||||
}
|
||||
&.be-iconfont-order-center::before {
|
||||
content: '\E71E';
|
||||
}
|
||||
&.be-iconfont-logout::before {
|
||||
content: '\E721';
|
||||
}
|
||||
&.be-iconfont-ok::before {
|
||||
content: '\E749';
|
||||
}
|
||||
&.be-iconfont-cancel::before {
|
||||
content: '\E74A';
|
||||
}
|
||||
&.be-iconfont-bind-phone::before {
|
||||
content: '\E733';
|
||||
}
|
||||
&.be-iconfont-bind-email::before {
|
||||
content: '\E735';
|
||||
}
|
||||
&.be-iconfont-coin::before {
|
||||
content: '\E734';
|
||||
}
|
||||
&.be-iconfont-b-coin::before {
|
||||
content: '\E736';
|
||||
}
|
||||
&.be-iconfont-activity::before {
|
||||
content: '\E732';
|
||||
}
|
||||
&.be-iconfont-message::before {
|
||||
content: '\E731';
|
||||
}
|
||||
&.be-iconfont-favorite::before {
|
||||
content: '\E730';
|
||||
}
|
||||
&.be-iconfont-history::before {
|
||||
content: '\E72F';
|
||||
}
|
||||
&.be-iconfont-vip::before {
|
||||
content: '\E72E';
|
||||
}
|
||||
&.be-iconfont-play::before {
|
||||
content: '\E6E6';
|
||||
}
|
||||
&.be-iconfont-danmaku::before {
|
||||
content: '\E6E7';
|
||||
}
|
||||
&.be-iconfont-like::before {
|
||||
content: '\E6E0';
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<div class="bilibili-logo bilibili-logo-icon"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@font-face {
|
||||
font-family: "bilibili-logo-iconfont";
|
||||
src: url("//s1.hdslb.com/bfs/seed/jinkela/header/asserts/iconfont.ttf") format("truetype");
|
||||
}
|
||||
.bilibili-logo {
|
||||
color: var(--theme-color);
|
||||
font-family: "bilibili-logo-iconfont" !important;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
&::before {
|
||||
content: "\E725";
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -7,7 +7,3 @@ export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -4,21 +4,35 @@
|
||||
<i class="mdi mdi-18px mdi-loading mdi-spin"></i>加载中...
|
||||
</div>
|
||||
<div class="cards" v-else-if="cards.length">
|
||||
<a class="home-video-card" v-for="card in cards" :key="card.id" target="_blank" :href="'https://www.bilibili.com/av' + card.aid">
|
||||
<a
|
||||
class="home-video-card"
|
||||
v-for="card in cards"
|
||||
:key="card.id"
|
||||
target="_blank"
|
||||
:href="'https://www.bilibili.com/av' + card.aid"
|
||||
>
|
||||
<div class="cover-container">
|
||||
<dpi-img class="cover" :src="card.coverUrl" :size="{height: 240}"></dpi-img>
|
||||
<dpi-img class="cover" :src="card.coverUrl" :size="{height: 160, width: 280}"></dpi-img>
|
||||
<div class="duration">{{card.durationText}}</div>
|
||||
<div class="topics">
|
||||
<a class="topic" v-for="topic of card.topics" :key="topic.id" target="_blank" :href="'https://t.bilibili.com/topic/name/' + card.name + '/feed'">{{topic.name}}</a>
|
||||
<a
|
||||
class="topic"
|
||||
v-for="topic of card.topics"
|
||||
:key="topic.id"
|
||||
target="_blank"
|
||||
:href="'https://t.bilibili.com/topic/name/' + card.name + '/feed'"
|
||||
>{{topic.name}}</a>
|
||||
</div>
|
||||
<div class="watchlater"></div>
|
||||
</div>
|
||||
<h1 class="title">{{card.title}}</h1>
|
||||
<pre class="description">{{card.description}}</pre>
|
||||
<dpi-img class="face" :src="card.upFaceUrl" :size="36"></dpi-img>
|
||||
<dpi-img class="face" :src="card.upFaceUrl" :size="24"></dpi-img>
|
||||
<div class="up">{{card.upName}}</div>
|
||||
<div class="stats">
|
||||
<Icon type="extended" icon="play"></Icon>
|
||||
{{card.playCount}}
|
||||
<Icon type="extended" icon="danmaku"></Icon>
|
||||
{{card.danmakuCount}}
|
||||
</div>
|
||||
</a>
|
||||
@ -47,7 +61,8 @@ interface VideoCard {
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
'dpi-img': () => import('../../dpi-img.vue')
|
||||
'dpi-img': () => import('../../dpi-img.vue'),
|
||||
Icon: () => import('../../icon.vue'),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -86,7 +101,7 @@ export default {
|
||||
duration: card.duration,
|
||||
durationText: formatDuration(card.duration, 0),
|
||||
playCount: card.stat.view,
|
||||
danmakuCount: card.stat.danmaku,
|
||||
danmakuCount: card.stat.danmaku
|
||||
}
|
||||
})
|
||||
} finally {
|
||||
@ -95,3 +110,92 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.home-video {
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
.home-video-card {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 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: black;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 6px 0 #0002;
|
||||
margin-right: var(--card-margin);
|
||||
margin-bottom: var(--card-margin);
|
||||
|
||||
body.dark & {
|
||||
background-color: #282828;
|
||||
color: white;
|
||||
}
|
||||
& > * {
|
||||
justify-self: self-start;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.cover-container {
|
||||
grid-area: cover;
|
||||
position: relative;
|
||||
.cover {
|
||||
border-radius: 16px 0 0 16px;
|
||||
object-fit: cover;
|
||||
}
|
||||
& > :not(.cover) {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
grid-area: title;
|
||||
font-size: 16pt;
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
padding: 0 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
justify-self: stretch;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.description {
|
||||
grid-area: description;
|
||||
color: inherit;
|
||||
overflow: auto;
|
||||
align-self: stretch;
|
||||
justify-self: stretch;
|
||||
margin: 0 12px;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.5;
|
||||
scrollbar-width: none !important;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0px !important;
|
||||
}
|
||||
}
|
||||
.face,
|
||||
.up,
|
||||
.stats {
|
||||
grid-area: up;
|
||||
}
|
||||
.face {
|
||||
margin-left: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.up {
|
||||
margin-left: 48px;
|
||||
}
|
||||
.stats {
|
||||
justify-self: self-end;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +1,16 @@
|
||||
<template>
|
||||
<div class="minimal-home">
|
||||
<div class="minimal-home-header">
|
||||
<Logo class="logo"></Logo>
|
||||
<Icon class="logo" icon="logo" type="main"></Icon>
|
||||
<div class="home-tabs">
|
||||
<div v-for="(tab, index) of tabs" :key="index" class="tab" :class="{active: tab.active}" :data-tab="tab.name" @click="changeTab(tab)">{{tab.displayName}}</div>
|
||||
<div
|
||||
v-for="(tab, index) of tabs"
|
||||
:key="index"
|
||||
class="tab"
|
||||
:class="{active: tab.active}"
|
||||
:data-tab="tab.name"
|
||||
@click="changeTab(tab)"
|
||||
>{{tab.displayName}}</div>
|
||||
</div>
|
||||
<Search></Search>
|
||||
</div>
|
||||
@ -23,9 +30,9 @@ interface Tab {
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
Logo: () => import('../../logo.vue'),
|
||||
Icon: () => import('../../icon.vue'),
|
||||
Search: () => import('../../search.vue'),
|
||||
HomeVideo: () => import('./home-video.vue'),
|
||||
HomeVideo: () => import('./home-video.vue')
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -34,28 +41,28 @@ export default {
|
||||
name: 'video',
|
||||
displayName: '视频动态',
|
||||
active: true,
|
||||
more: 'https://t.bilibili.com/?tab=8',
|
||||
more: 'https://t.bilibili.com/?tab=8'
|
||||
},
|
||||
{
|
||||
name: 'ranking7',
|
||||
displayName: '一周排行',
|
||||
active: true,
|
||||
more: 'https://www.bilibili.com/ranking/all/0/0/7',
|
||||
active: false,
|
||||
more: 'https://www.bilibili.com/ranking/all/0/0/7'
|
||||
},
|
||||
{
|
||||
name: 'ranking3',
|
||||
displayName: '三日排行',
|
||||
active: true,
|
||||
more: 'https://www.bilibili.com/ranking',
|
||||
active: false,
|
||||
more: 'https://www.bilibili.com/ranking'
|
||||
},
|
||||
{
|
||||
name: 'ranking1',
|
||||
displayName: '昨日排行',
|
||||
active: true,
|
||||
more: 'https://www.bilibili.com/ranking/all/0/0/1',
|
||||
},
|
||||
active: false,
|
||||
more: 'https://www.bilibili.com/ranking/all/0/0/1'
|
||||
}
|
||||
] as Tab[],
|
||||
content: 'HomeVideo',
|
||||
content: 'HomeVideo'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -68,7 +75,7 @@ export default {
|
||||
activeTab.active = false
|
||||
tab.active = true
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@ -79,6 +86,22 @@ export default {
|
||||
}
|
||||
.logo {
|
||||
font-size: 48px;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
.minimal-home-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.home-tabs {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
.minimal-home-content {
|
||||
margin-top: 64px;
|
||||
width: calc(var(--card-column-count) * ( var(--card-width) + var(--card-margin) ));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
5
src/style/simplify-home/simplify-home.css
Normal file
5
src/style/simplify-home/simplify-home.css
Normal file
@ -0,0 +1,5 @@
|
||||
.international-home > :not(.international-header),
|
||||
.international-header .b-wrap,
|
||||
.international-footer {
|
||||
display: none !important;
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="simplify-home">
|
||||
<component :is="activeComponent"></component>
|
||||
<component class="simplify-home-component" :is="activeComponent"></component>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@ -18,4 +18,20 @@ export default {
|
||||
homeStyle: String,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.simplify-home {
|
||||
margin-top: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
--card-width: 700px;
|
||||
--card-height: 160px;
|
||||
--card-margin: 16px;
|
||||
--card-column-count: 1;
|
||||
|
||||
.simplify-home-component {
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user