Skip to content

Commit 4824301

Browse files
BcRikkoBcRikko
committed
🎉 SPAのJS版作成
1 parent 192b131 commit 4824301

File tree

16 files changed

+197
-67
lines changed

16 files changed

+197
-67
lines changed

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,19 @@
33
<head>
44
<meta charset="utf-8">
55
<title>trial-vuejs-typescript</title>
6+
<link rel="stylesheet" type="text/css" href="./static/css/csshake.min.css">
7+
<style>
8+
@font-face {
9+
font-family:'nicomoji';
10+
src: url('./static/font/nicomoji-plus.ttf')
11+
}
12+
body {
13+
margin: 0;
14+
padding: 0;
15+
height: 100%;
16+
background-color: #FDE1E9;
17+
}
18+
</style>
619
</head>
720
<body>
821
<div id="app"></div>

‎src/App.vue

+2-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div id="app">
3-
<img src="./assets/logo.png">
3+
<h1 class="title">キャラクター人気投票<br>@さくらの夕べ</h1>
44
<router-view/>
55
</div>
66
</template>
@@ -11,13 +11,4 @@ export default {
1111
}
1212
</script>
1313

14-
<style>
15-
#app {
16-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
17-
-webkit-font-smoothing: antialiased;
18-
-moz-osx-font-smoothing: grayscale;
19-
text-align: center;
20-
color: #2c3e50;
21-
margin-top: 60px;
22-
}
23-
</style>
14+
<style scoped src="./app.css"></style>

‎src/app.css

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
#app {
2+
font-family: nicomoji;
3+
font-size: 62.5%;
4+
text-align: center;
5+
color: #2c3e50;
6+
7+
margin: 0;
8+
padding: 0;
9+
10+
height: 100%;
11+
width: 100vw;
12+
}
13+
14+
.title {
15+
margin-top: 0;
16+
font-size: 3.8rem;
17+
white-space: pre-wrap;
18+
line-height: 1.2;
19+
20+
background-color: white;
21+
padding: 20px 0;
22+
}

‎src/assets/ai.png

1.2 MB
Loading

‎src/assets/logo.png

-6.69 KB
Binary file not shown.

‎src/assets/marina.png

1.38 MB
Loading

‎src/components/HelloWorld.vue

-53
This file was deleted.

‎src/components/ImagePanel/image-panel.css

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.image {
2+
height: 400px;
3+
}
4+
.name {
5+
margin: 0 0 20px 0;
6+
font-size: 2.5rem;
7+
}
8+
.twitter {
9+
font-size: 1.8rem;
10+
color: #337ab7;
11+
text-decoration: none;
12+
}
13+
.twitter:hover {
14+
text-decoration: underline;
15+
}
16+
17+
.btn {
18+
margin-top: 30px;
19+
20+
width: 50%;
21+
background-color: #4CAF50;
22+
border: none;
23+
color: white;
24+
padding: 15px 32px;
25+
text-align: center;
26+
text-decoration: none;
27+
display: inline-block;
28+
font-size: 1.1rem;
29+
30+
border-radius: 10px;
31+
}
32+
.btn:hover {
33+
opacity: .7;
34+
}

‎src/components/ImagePanel/image-panel.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
export default {
2+
name: 'image-panel',
3+
props: {
4+
imageSrc: {
5+
type: String,
6+
isRequired: true
7+
},
8+
name: {
9+
type: String,
10+
isRequired: true
11+
},
12+
twitter: {
13+
type: String,
14+
isRequired: true
15+
}
16+
},
17+
data () {
18+
return {
19+
src: require(`../../assets/${this.imageSrc}`),
20+
csshake: ''
21+
}
22+
},
23+
methods: {
24+
onClick () {
25+
this.csshake = 'shake-hard shake-constant'
26+
setTimeout(() => { this.csshake = '' }, 700)
27+
this.$emit('onclick')
28+
}
29+
}
30+
}

‎src/components/ImagePanel/image-panel.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div class="panel-form">
3+
<div class="image-panel">
4+
<figure :class="csshake">
5+
<img class="image" :src="src">
6+
<figcaption>
7+
<p class="name">{{ name }}</p>
8+
<a class="twitter" :href="'https://twitter.com/' + twitter">@{{twitter}}</a>
9+
</figcaption>
10+
</figure>
11+
</div>
12+
<button class="btn" type="button" @click="onClick">投票する</button>
13+
</div>
14+
</template>
15+
16+
<style scoped src="./image-panel.css"></style>
17+
<script src="./image-panel.js"></script>

‎src/pages/Vote/vote.css

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.panel-container {
2+
display: flex;
3+
justify-content: space-around;
4+
}
5+
6+
.panel-form {
7+
width: 50%;
8+
}
9+
10+
.result {
11+
font-size: 2rem;
12+
13+
background-color: white;
14+
padding: 10px 0;
15+
16+
margin-bottom: 0;
17+
}

‎src/pages/Vote/vote.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import ImagePanel from '@/components/ImagePanel/image-panel.vue'
2+
3+
export default {
4+
name: 'vote',
5+
components: {
6+
ImagePanel
7+
},
8+
data () {
9+
return {
10+
result: {
11+
ai: 0,
12+
marina: 0
13+
}
14+
}
15+
},
16+
computed: {
17+
formattedResult () {
18+
return [
19+
`桜葉 愛: ${this.result.ai}`,
20+
`佐倉 まりな: ${this.result.marina}`
21+
].join('<br>')
22+
}
23+
},
24+
methods: {
25+
vote (key) {
26+
this.result[key] += 1
27+
}
28+
}
29+
}

‎src/pages/Vote/vote.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div id="vote">
3+
<div class="panel-container">
4+
<image-panel
5+
image-src="ai.png"
6+
name="桜葉 愛"
7+
twitter="ai_sakuraha"
8+
@onclick="vote('ai')">
9+
</image-panel>
10+
<image-panel
11+
image-src="marina.png"
12+
name="佐倉 まりな"
13+
twitter="sakura_ope"
14+
@onclick="vote('marina')">
15+
</image-panel>
16+
</div>
17+
<p class="result" v-html="formattedResult"></p>
18+
</div>
19+
</template>
20+
21+
<style scoped src="./vote.css"></style>
22+
<script src="./vote.js"></script>

‎src/router/index.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import Vue from 'vue'
22
import Router from 'vue-router'
3-
import HelloWorld from '@/components/HelloWorld'
3+
import Vote from '@/pages/Vote/vote.vue'
44

55
Vue.use(Router)
66

77
export default new Router({
88
routes: [
99
{
1010
path: '/',
11-
name: 'Hello',
12-
component: HelloWorld
11+
name: 'vote',
12+
component: Vote
1313
}
1414
]
1515
})

‎static/css/csshake.min.css

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/font/nicomoji-plus.ttf

10.6 MB
Binary file not shown.

0 commit comments

Comments
 (0)