feat: Ajout de la page d'accueil
This commit is contained in:
parent
031410d81d
commit
fab13bd9d0
Binary file not shown.
After Width: | Height: | Size: 626 KiB |
|
@ -1,7 +1,10 @@
|
||||||
/* color palette from <https://github.com/vuejs/theme> */
|
/* color palette from <https://github.com/vuejs/theme> */
|
||||||
:root {
|
:root {
|
||||||
|
/* #EDE0D4 */
|
||||||
--color-white: #ffffff;
|
--color-white: #ffffff;
|
||||||
--color-black: #181818;
|
/*--color-black: #181818;*/
|
||||||
|
--color-black: #000000;
|
||||||
|
--color-green: rgb(118, 148, 67);
|
||||||
|
|
||||||
--header-size-small: 64px;
|
--header-size-small: 64px;
|
||||||
--header-size-big: 128px;
|
--header-size-big: 128px;
|
||||||
|
@ -9,8 +12,9 @@
|
||||||
|
|
||||||
/* semantic color variables for this project */
|
/* semantic color variables for this project */
|
||||||
:root {
|
:root {
|
||||||
--color-background: #EDE0D4;
|
--color-background: var(--color-black);
|
||||||
--color-text: var(--color-black);
|
--color-text: var(--color-white);
|
||||||
|
--color-highlight: var(--color-green);
|
||||||
--header-size: var(--header-size-small);
|
--header-size: var(--header-size-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -130,7 +130,7 @@ const result = computed(() =>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</SplideSlide>
|
</SplideSlide>
|
||||||
<SplideSlide>
|
<SplideSlide class="latest">
|
||||||
<template v-if="displayScoreResult && result">
|
<template v-if="displayScoreResult && result">
|
||||||
<ul>
|
<ul>
|
||||||
<li>score : {{ scoreSum }}</li>
|
<li>score : {{ scoreSum }}</li>
|
||||||
|
@ -182,6 +182,9 @@ label
|
||||||
width: 100%
|
width: 100%
|
||||||
padding: .3rem
|
padding: .3rem
|
||||||
|
|
||||||
|
.latest
|
||||||
|
background-color: var(--color-green)
|
||||||
|
|
||||||
.gradient
|
.gradient
|
||||||
width: calc(100% - 2rem)
|
width: calc(100% - 2rem)
|
||||||
padding: 0 1rem
|
padding: 0 1rem
|
||||||
|
|
|
@ -20,11 +20,11 @@ defineProps({
|
||||||
header {
|
header {
|
||||||
height: var(--header-size);
|
height: var(--header-size);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background: #ede0d4;
|
background: var(--color-green);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
top: 0;
|
top: 0;
|
||||||
border-bottom: 1px solid black;
|
border-bottom: 1px solid var(--color-white);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
|
@ -39,14 +39,14 @@ a {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
border-right: 1px solid black;
|
border-right: 1px solid var(--color-white);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
color: black;
|
color: var(--color-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
|
@ -21,25 +21,96 @@ function getTranslation(translations, key) {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<header>
|
||||||
<h1>Ceiba Scores App</h1>
|
<h1>Ceiba Scores App</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
<template v-if="scores">
|
<template v-if="scores">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="score in scores" :key="score.id">
|
<li v-for="score in scores" :key="score.id" :id="`score_${score.id}`">
|
||||||
<router-link :to="{ name: 'score', params: { id: score.id } }">{{
|
<router-link :to="{ name: 'score', params: { id: score.id } }">{{
|
||||||
getTranslation(score.translations, "languages_id").title
|
getTranslation(score.translations, "languages_id").title1
|
||||||
}}</router-link>
|
}}</router-link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="sass" scoped>
|
<style lang="sass" scoped>
|
||||||
h1
|
header
|
||||||
background: var(--color-background)
|
height: var(--header-size)
|
||||||
|
overflow: hidden
|
||||||
|
display: flex
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
border-bottom: 2px solid var(--color-white)
|
||||||
|
background: var(--color-green)
|
||||||
|
|
||||||
|
h1
|
||||||
text-align: center
|
text-align: center
|
||||||
margin: 1rem
|
|
||||||
padding: 0
|
main
|
||||||
|
width: 100%
|
||||||
|
height: calc(100% - var(--header-size))
|
||||||
|
padding: 1rem
|
||||||
|
display: flex
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
overflow: hidden
|
||||||
|
background-color: var(--color-highlight)
|
||||||
|
|
||||||
ul
|
ul
|
||||||
margin: 1rem
|
margin: 0
|
||||||
padding: 0 0 0 1rem
|
padding: 0
|
||||||
|
list-style: none
|
||||||
|
|
||||||
|
width: 100%
|
||||||
|
max-width: 100%
|
||||||
|
max-height: 100%
|
||||||
|
|
||||||
|
aspect-ratio: 181 / 284
|
||||||
|
background-image: url(/arbre.png)
|
||||||
|
background-size: 724px 1136px
|
||||||
|
|
||||||
|
background-position: center
|
||||||
|
background-repeat: no-repeat
|
||||||
|
background-size: contain
|
||||||
|
|
||||||
|
position: relative
|
||||||
|
// border: 2px solid var(--color-white)
|
||||||
|
border-radius: 10px
|
||||||
|
|
||||||
|
li
|
||||||
|
display: none
|
||||||
|
|
||||||
|
background: rgba(0, 0, 0, .5)
|
||||||
|
border-radius: 10px
|
||||||
|
position: absolute
|
||||||
|
border: 2px solid var(--color-white)
|
||||||
|
|
||||||
|
&#score_1
|
||||||
|
display: flex
|
||||||
|
top: 40%
|
||||||
|
bottom: 35%
|
||||||
|
left: 20%
|
||||||
|
right: 20%
|
||||||
|
|
||||||
|
&#score_6
|
||||||
|
display: flex
|
||||||
|
top: 72%
|
||||||
|
bottom: 5%
|
||||||
|
left: 6%
|
||||||
|
right: 6%
|
||||||
|
|
||||||
|
a
|
||||||
|
color: var(--color-white)
|
||||||
|
display: block
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
text-align: center
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -3,7 +3,5 @@ import ScoresList from "@/components/ScoresList.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main>
|
|
||||||
<ScoresList />
|
<ScoresList />
|
||||||
</main>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in New Issue