Skip to content

Commit e7e19a9

Browse files
author
Ryo Arima
committed
💏
1 parent 5c2970d commit e7e19a9

File tree

8 files changed

+802
-175
lines changed

8 files changed

+802
-175
lines changed

‎package-lock.json

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

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,18 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12+
"@mdi/font": "^7.4.47",
1213
"@types/node": "^22.5.4",
1314
"vue": "^3.4.37",
1415
"vue-router": "^4.0.13",
16+
"vuetify": "^3.7.1",
1517
"vuex": "^4.0.2"
1618
},
1719
"devDependencies": {
1820
"@vitejs/plugin-vue": "^5.1.2",
19-
"daisyui": "^4.12.10",
2021
"typescript": "^5.5.3",
2122
"vite": "^5.4.1",
23+
"vite-plugin-vuetify": "^2.0.4",
2224
"vitest": "^2.0.5",
2325
"vue-tsc": "^2.0.29"
2426
}

‎src/App.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import { RouterView } from 'vue-router';
33
</script>
44

55
<template>
6-
<RouterView />
6+
<v-app>
7+
<RouterView />
8+
</v-app>
79
</template>
810

911
<style scoped>

‎src/main.ts

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
import { createApp } from 'vue';
22
import App from './App.vue';
33
import router from './router';
4-
4+
import { createVuetify } from 'vuetify'
5+
import 'vuetify/styles'
6+
import '@mdi/font/css/materialdesignicons.css'
7+
import * as components from 'vuetify/components'
8+
import * as directives from 'vuetify/directives'
9+
const vuetify = createVuetify({
10+
components,
11+
directives,
12+
})
513
const app = createApp(App);
614
app.use(router);
15+
app.use(vuetify)
716
app.mount('#app');

‎src/pages/public/Signup.vue

+41-61
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,43 @@
11
<template>
2-
<div class="signup">
3-
<h1>サインアップ</h1>
4-
<form @submit.prevent="handleSubmit">
5-
<div>
6-
<label for="email">メールアドレス:</label>
7-
<input type="email" id="email" v-model="email" required>
8-
</div>
9-
<div>
10-
<label for="password">パスワード:</label>
11-
<input type="password" id="password" v-model="password" required>
12-
</div>
13-
<div>
14-
<label for="confirmPassword">パスワード確認:</label>
15-
<input type="password" id="confirmPassword" v-model="confirmPassword" required>
16-
</div>
17-
<button type="submit">サインアップ</button>
18-
</form>
19-
</div>
2+
<v-app>
3+
<v-app-bar app color="primary">
4+
<v-toolbar-title>Mark1</v-toolbar-title>
5+
</v-app-bar>
6+
<v-main>
7+
<v-container class="fill-height" fluid>
8+
<v-row align="center" justify="center">
9+
<v-col cols="12" md="6">
10+
<v-card>
11+
<v-card-title class="headline">サインアップ</v-card-title>
12+
<v-card-text>
13+
<v-form @submit.prevent="handleSubmit">
14+
<v-text-field
15+
v-model="email"
16+
label="メールアドレス"
17+
type="email"
18+
required
19+
></v-text-field>
20+
<v-text-field
21+
v-model="password"
22+
label="パスワード"
23+
type="password"
24+
required
25+
></v-text-field>
26+
<v-text-field
27+
v-model="confirmPassword"
28+
label="パスワード確認"
29+
type="password"
30+
required
31+
></v-text-field>
32+
<v-btn type="submit" color="primary" block>サインアップ</v-btn>
33+
</v-form>
34+
</v-card-text>
35+
</v-card>
36+
</v-col>
37+
</v-row>
38+
</v-container>
39+
</v-main>
40+
</v-app>
2041
</template>
2142

2243
<script>
@@ -43,48 +64,7 @@ export default {
4364
</script>
4465

4566
<style scoped>
46-
.signup {
47-
max-width: 400px;
48-
margin: 50px auto;
49-
padding: 20px;
50-
border: 1px solid #ccc;
51-
border-radius: 5px;
52-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
53-
}
54-
55-
.signup h1 {
56-
text-align: center;
57-
margin-bottom: 20px;
58-
}
59-
60-
.signup form {
61-
display: flex;
62-
flex-direction: column;
63-
}
64-
65-
.signup label {
66-
margin-bottom: 5px;
67-
}
68-
69-
.signup input {
70-
margin-bottom: 15px;
71-
padding: 10px;
72-
font-size: 1em;
73-
border: 1px solid #ccc;
74-
border-radius: 5px;
75-
}
76-
77-
.signup button {
78-
padding: 10px;
79-
font-size: 1em;
80-
color: #fff;
81-
background-color: #007bff;
82-
border: none;
83-
border-radius: 5px;
84-
cursor: pointer;
85-
}
86-
87-
.signup button:hover {
88-
background-color: #0056b3;
67+
.fill-height {
68+
min-height: 100vh;
8969
}
9070
</style>

‎src/pages/public/Top.vue

+33-12
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,31 @@
11
<template>
2-
<div class="top-page">
3-
<h1>トップページ</h1>
4-
<p>ようこそ、私たちのウェブサイトへ！</p>
5-
</div>
2+
<v-app>
3+
<v-app-bar app color="primary" dark>
4+
<v-app-bar-nav-icon></v-app-bar-nav-icon>
5+
<v-toolbar-title>Mark1</v-toolbar-title>
6+
<v-spacer></v-spacer>
7+
<v-btn text>ログイン</v-btn>
8+
<v-btn text>サインアップ</v-btn>
9+
</v-app-bar>
10+
11+
<v-main>
12+
<v-container class="fill-height" fluid>
13+
<v-row align="center" justify="center">
14+
<v-col cols="12" md="8" class="text-center">
15+
<h1 class="display-1">ようこそ、私たちのウェブサイトへ！</h1>
16+
<p class="headline">ここでは最新の情報とサービスを提供しています。</p>
17+
<v-btn color="primary" large>もっと見る</v-btn>
18+
</v-col>
19+
</v-row>
20+
</v-container>
21+
</v-main>
22+
23+
<v-footer app color="primary" dark>
24+
<v-col class="text-center white--text">
25+
&copy; 2023 私たちのウェブサイト
26+
</v-col>
27+
</v-footer>
28+
</v-app>
629
</template>
730

831
<script>
@@ -12,17 +35,15 @@ export default {
1235
</script>
1336

1437
<style scoped>
15-
.top-page {
16-
text-align: center;
17-
margin-top: 50px;
38+
.fill-height {
39+
min-height: 100vh;
1840
}
1941
20-
.top-page h1 {
21-
font-size: 2em;
22-
color: #333;
42+
.display-1 {
43+
margin-bottom: 20px;
2344
}
2445
25-
.top-page p {
26-
font-size: 1.2em;
46+
.headline {
47+
margin-bottom: 40px;
2748
}
2849
</style>

‎vite.config.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { defineConfig } from 'vite'
22
import vue from '@vitejs/plugin-vue'
3+
import vuetify from 'vuetify';
34
import { resolve } from 'path'
45

56
// https://vitejs.dev/config/

0 commit comments

Comments
 (0)