Add more varied page header images

This commit is contained in:
Damillora 2021-01-10 03:21:26 +07:00
parent e3df7a6556
commit 646e50673e
34 changed files with 39 additions and 25 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 269 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 377 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 383 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB

View File

@ -2,7 +2,7 @@
<div class="relative group page-header"> <div class="relative group page-header">
<component is="style"> <component is="style">
:root { :root {
--bg: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg.jpg') }}'); --bg-ps: {{ positioning }};
--bg-sm: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-sm.jpg') }}'); --bg-sm: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-sm.jpg') }}');
--bg-md: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-md.jpg') }}'); --bg-md: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-md.jpg') }}');
--bg-lg: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-lg.jpg') }}'); --bg-lg: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-lg.jpg') }}');
@ -30,6 +30,20 @@ export default {
computed: { computed: {
normalImageType() { normalImageType() {
return this.imageType ?? '283-yuika'; return this.imageType ?? '283-yuika';
},
positioning() {
switch(this.normalImageType) {
case '283-yuika':
return 'right 25% top 20%';
case 'cue-mei':
return 'center top';
case 'cue-mei2':
return 'center top';
case '765-yuriko':
return 'right 15% top 10%';
default:
return 'center';
}
} }
}, },
@ -56,7 +70,7 @@ export default {
.page-header-background { .page-header-background {
background-image: var(--bg-sm); background-image: var(--bg-sm);
background-size: cover; background-size: cover;
background-position: right 25% top 20%; background-position: var(--bg-ps);
} }
@screen sm { @screen sm {
.page-header-background { .page-header-background {

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Arcaea</h1> <h1 class="title">Game Profile: Arcaea</h1>
<p><a href="https://arcaea.lowiro.com">Game Website</a></p> <p><a href="https://arcaea.lowiro.com">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Arknights</h1> <h1 class="title">Game Profile: Arknights</h1>
<p><a href="https://www.arknights.global">Game Website</a></p> <p><a href="https://www.arknights.global">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Azur Lane (EN)</h1> <h1 class="title">Game Profile: Azur Lane (EN)</h1>
<p><a href="">Game Website</a></p> <p><a href="">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: BanG Dream! Girls Band Party (JP)</h1> <h1 class="title">Game Profile: BanG Dream! Girls Band Party (JP)</h1>
<p><a href="https://bang-dream.bushimo.jp/">Game Website</a></p> <p><a href="https://bang-dream.bushimo.jp/">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: CUE!</h1> <h1 class="title">Game Profile: CUE!</h1>
<p><a href="https://www.cue-liber.jp/">Game Website</a></p> <p><a href="https://www.cue-liber.jp/">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Fate/Grand Order (JP)</h1> <h1 class="title">Game Profile: Fate/Grand Order (JP)</h1>
<p><a href="https://www.fate-go.jp">Game Website</a></p> <p><a href="https://www.fate-go.jp">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Genshin Impact</h1> <h1 class="title">Game Profile: Genshin Impact</h1>
<p><a href="https://genshin.mihoyo.com">Game Website</a></p> <p><a href="https://genshin.mihoyo.com">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Honkai Impact 3rd</h1> <h1 class="title">Game Profile: Honkai Impact 3rd</h1>
<p><a href="https://honkaiimpact3.mihoyo.com">Game Website</a></p> <p><a href="https://honkaiimpact3.mihoyo.com">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile</h1> <h1 class="title">Game Profile</h1>
</PageHeader> </PageHeader>
<main class="container mx-auto main"> <main class="container mx-auto main">

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Love Live! School Idol Festival (JP)</h1> <h1 class="title">Game Profile: Love Live! School Idol Festival (JP)</h1>
<p><a href="https://lovelive-sif.bushimo.jp/">Game Website</a></p> <p><a href="https://lovelive-sif.bushimo.jp/">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Love Live! School idol festival ALL STARS</h1> <h1 class="title">Game Profile: Love Live! School idol festival ALL STARS</h1>
<p><a href="https://lovelive-as.bushimo.jp/">Game Website</a></p> <p><a href="https://lovelive-as.bushimo.jp/">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: maimai DX</h1> <h1 class="title">Game Profile: maimai DX</h1>
<p><a href="https://maimai.sega.com/">Game Website</a></p> <p><a href="https://maimai.sega.com/">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: The IDOLM@STER Million Live: Theater Days</h1> <h1 class="title">Game Profile: The IDOLM@STER Million Live: Theater Days</h1>
<p><a href="https://millionlive.idolmaster.jp/theaterdays/">Game Website</a></p> <p><a href="https://millionlive.idolmaster.jp/theaterdays/">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Nogikoi</h1> <h1 class="title">Game Profile: Nogikoi</h1>
<p><a href="https://nogikoi.jp">Game Website</a></p> <p><a href="https://nogikoi.jp">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Project SEKAI COLORFUL STAGE!</h1> <h1 class="title">Game Profile: Project SEKAI COLORFUL STAGE!</h1>
<p><a href="https://pjsekai.sega.jp/">Game Website</a></p> <p><a href="https://pjsekai.sega.jp/">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: SOUND VOLTEX VIVID WAVE</h1> <h1 class="title">Game Profile: SOUND VOLTEX VIVID WAVE</h1>
<p><a href="https://p.eagate.573.jp/game/sdvx/v/p/index.html">Game Website</a></p> <p><a href="https://p.eagate.573.jp/game/sdvx/v/p/index.html">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Shadowverse</h1> <h1 class="title">Game Profile: Shadowverse</h1>
<p><a href="https://shadowverse.com/">Game Website</a></p> <p><a href="https://shadowverse.com/">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: THE IDOLM@STER: Shiny Colors</h1> <h1 class="title">Game Profile: THE IDOLM@STER: Shiny Colors</h1>
<p><a href="https://shinycolors.idolmaster.jp">Game Website</a></p> <p><a href="https://shinycolors.idolmaster.jp">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Revue Starlight Re LIVE (EN)</h1> <h1 class="title">Game Profile: Revue Starlight Re LIVE (EN)</h1>
<p><a href="https://www.en.revuestarlight-relive.com/">Game Website</a></p> <p><a href="https://www.en.revuestarlight-relive.com/">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Tokyo 7th Sisters</h1> <h1 class="title">Game Profile: Tokyo 7th Sisters</h1>
<p><a href="https://t7s.jp">Game Website</a></p> <p><a href="https://t7s.jp">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: </h1> <h1 class="title">Game Profile: </h1>
<p><a href="">Game Website</a></p> <p><a href="">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: 欅坂46日向坂46 UNI'S ON AIR</h1> <h1 class="title">Game Profile: 欅坂46日向坂46 UNI'S ON AIR</h1>
<p><a href="https://keyahina-unisonair.com/">Game Website</a></p> <p><a href="https://keyahina-unisonair.com/">Game Website</a></p>
</PageHeader> </PageHeader>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="765-yuriko">
<h1>Links</h1> <h1>Links</h1>
</PageHeader> </PageHeader>
<main class="container mx-auto main"> <main class="container mx-auto main">