Skip to content

[WIP]メンバー紹介の作成 #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sKawashima wants to merge 5 commits into
base: master
Choose a base branch
from
+106 −15
Open

[WIP]メンバー紹介の作成 #25

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5c2da76
クリックに反応
sKawashima Sep 27, 2018
fd03435
refact to flex
sKawashima Sep 27, 2018
d7e33a0
とりあえず枠が広がるところまで実装
sKawashima Sep 27, 2018
6ef0829
文字を追加する準備をした
sKawashima Dec 17, 2018
96ed55e
Merge branch 'master' of https://github.com/Trinity-Trio/web into mak…
charl2k Jun 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 106 additions & 15 deletions components/Member.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,133 @@
<template lang='pug'>
#member
#CHARLII_k.item
#CHARLII_k.item(@click='charlii', :class='{active: isCha}')
img(src='~/assets/memberCHARLII_k.svg')
p CHARLII_k
#ryu-g.item
h3 CHARLII_k
p やばいやつです。
#ryu-g.item(@click='ryu', :class='{active: isRyu}')
img(src='~/assets/memberryu-g.svg')
p ryu-g
#by_sK.item
h3 ryu-g
p やばいやつです。
#by_sK.item(@click='sk', :class='{active: isK}')
img(src='~/assets/memberby_sK.svg')
p by_sK
h3 by_sK
p やばいやつです。
Copy link
Member Author

@sKawashima sKawashima Jun 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

まともなやつに書き換えようカナ

</template>

<script>
export default {
data: () => {
return {
isCha: false,
isRyu: false,
isK: false
}
},
methods: {
charlii: function () {
this.isCha = true
this.isRyu = false
this.isK = false
},
ryu: function () {
this.isCha = false
this.isRyu = true
this.isK = false
},
sk: function () {
this.isCha = false
this.isRyu = false
this.isK = true
}
}
}
</script>

<style lang='sass' scoped>
// pc
$cha-w: .92
$ryu-w: 1
$sk-w: .94

// sp
$cha-h: .92
$ryu-h: 1
$sk-h: .90

// too
$size: 5

#member
height: 100vh
display: grid
grid-template-columns: .92fr 1fr .94fr
display: flex
flex-direction: row
@media screen and ( max-width : 768px )
grid-template-columns: none
grid-template-rows: .92fr 1fr .90fr
flex-direction: column

#CHARLII_k
background-color: #FFCC00
color: #FFCC00
flex-grow: $cha-w
p
background-color: #FFCC00
color: #000
@media screen and ( max-width : 768px )
flex-grow: $cha-h
&.active
@extend .active
flex-grow: $cha-w * $size
@media screen and ( max-width : 768px )
flex-grow: $cha-h * $size
&:hover
img
#ryu-g
background-color: #E95513
color: #E95513
flex-grow: $ryu-w
p
background-color: #E95513
color: #000
@media screen and ( max-width : 768px )
flex-grow: $ryu-h
&.active
@extend .active
flex-grow: $ryu-w * $size
@media screen and ( max-width : 768px )
flex-grow: $ryu-h * $size
&:hover
img
#by_sK
background-color: lighten(#4e1a68, 25%)
color: lighten(#4e1a68, 25%)
flex-grow: $sk-w
p
background-color: lighten(#4e1a68, 25%)
color: #000
@media screen and ( max-width : 768px )
flex-grow: $sk-h
&.active
@extend .active
flex-grow: $sk-w * $size
@media screen and ( max-width : 768px )
flex-grow: $sk-h * $size
&:hover
img

.active
img
left: 0
p
display: block
position: absolute
top: 50%
left: 50%
z-index: 100

.item
position: relative
// text-align: center
overflow: hidden
transition: .2s
img
position: absolute
bottom: -1rem
Expand All @@ -47,14 +136,14 @@ export default {
right: 50%
transform: translateX(-50%)
z-index: 1
// transition: .2s
transition: .2s
@media screen and ( max-width : 768px )
transition: none
top: -70vh
bottom: auto
height: 220vh
left: 25%
p
h3
position: absolute
left: 2rem
bottom: 2rem
Expand All @@ -68,7 +157,9 @@ export default {
left: 1rem
top: 1rem
font-size: 1.2rem
// &:hover
// img
// bottom: 0rem
p
display: none
&:hover
img
bottom: 0rem
</style>