indexページの作成

Author: NEKOYASAN

src/layouts/default.vue

@@ -5,6 +5,9 @@
         Loading
       </div>
     </v-overlay>
+    <v-app-bar fixed app class="bar" elevation="0">
+      <HeaderLogo />
+    </v-app-bar>
     <v-content class="content">
       <v-container class="px-4 py-8">
         <nuxt />
@@ -15,12 +18,16 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import HeaderLogo from '@/assets/svgs/header_logo.svg'
 
 type LocalData = {
   loading: boolean
 }
 
 export default Vue.extend({
+  components: {
+    HeaderLogo
+  },
   data(): LocalData {
     return {
       loading: true

src/pages/index.vue

@@ -1,65 +1,116 @@
 <template>
-  <div class="LoginPage">
-    <v-flex>
-      <div class="Logo">
-        <Logo style="height: 80vw; max-height: 350px; width: 100%;" />
-      </div>
-      {{ errorMessages }}
-      <div class="LoginForm">
-        <v-form ref="form" v-model="valid">
-          <v-text-field
-            v-model="classId"
-            :counter="6"
-            label="クラスID"
-            :rules="nameRules"
-            outlined
-            dark
-            required
-          />
+  <v-layout justify-center="true" align-center="true">
+    <v-flex style="max-width: 630px !important;">
+      <v-row justify="center" class="mb-3">
+        <v-icon color="white" size="60px">mdi-library</v-icon>
+      </v-row>
+      <v-row justify="center">
+        <span class="description mb-3">授業をうける生徒・児童の方</span>
+      </v-row>
+      <v-row
+        justify="center"
+        style="margin-left: auto !important; margin-right: auto !important;"
+      >
+        <input-field
+          v-model="classId"
+          class="classIdField"
+          type="classId"
+          label="クラスID"
+        />
+        <v-btn
+          class="classLoginButton ml-3"
+          color="#FFDB6C"
+          width="56px"
+          height="56px"
+          :disabled="!/^[あ-ん]{6}$/.test(classId)"
+          :loading="loading"
+          @click="loginToClass"
+        >
+          <v-icon color="black">mdi-arrow-right-bold</v-icon>
+        </v-btn>
+      </v-row>
+      <v-flex fill-width justify="center" class="forTeachers">
+        <v-row class="mt-10 mb-3" justify="center">
+          <v-icon color="white" size="60px">mdi-account-circle</v-icon>
+        </v-row>
+        <v-row justify="center">
+          <span class="description mb-3">時間割をつくる先生方</span>
+        </v-row>
+        <div style="margin: 0 10px;">
           <v-btn
+            color="#FFDB6C"
+            height="60px"
+            style="font-size: 16px; font-weight: bold;"
             block
-            outlined
+            rounded
+          >
+            ユーザー登録する
+          </v-btn>
+
+          <v-btn
             color="white"
-            height="40px"
-            :loading="loading"
-            :disabled="loading || !valid"
-            @click="loginToClass"
+            height="50px"
+            style="font-size: 16px; font-weight: bold; margin-top: 10px;"
+            block
+            rounded
           >
-            LOGIN
+            ログインする
           </v-btn>
-        </v-form>
-      </div>
+          <v-footer padless color="#004170" style="margin-top: 15px;">
+            <v-row justify="center" no-gutters>
+              <v-col
+                class="white--text text-center md-16"
+                cols="12"
+                style="margin-top: 15px; font-size: 12px;"
+              >
+                <a class="white--text"> - おうちで時間割について </a>
+              </v-col>
+              <v-col
+                class="white--text text-center"
+                cols="12"
+                style="margin-top: 15px; font-size: 12px;"
+              >
+                <a class="white--text"> - お問い合わせ </a>
+              </v-col>
+              <v-col
+                class="white--text text-center"
+                cols="12"
+                style="margin-top: 15px; font-size: 12px;"
+              >
+                <a class="white--text"> - サイトポリシー </a>
+              </v-col>
+            </v-row>
+          </v-footer>
+        </div>
+      </v-flex>
     </v-flex>
-  </div>
+  </v-layout>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import { vxm } from '@/store'
-import Logo from '@/assets/svgs/logo.svg'
+import InputField from '@/components/InputField.vue'
 
 type DataType = {
   classId: string
   loading: boolean
   error: boolean
   errorMessages: string
   valid: boolean
-  nameRules: ((v: string) => boolean | string)[]
 }
 
 export default Vue.extend({
-  components: { Logo },
+  components: {
+    InputField
+  },
   data(): DataType {
     return {
       classId: '',
       loading: false,
       error: false,
       errorMessages: '',
-      valid: true,
-      nameRules: [
-        v => !!v || 'クラスIDは必須です',
-        v => (v && v.length === 6) || 'クラスIDは6文字のひらがなです'
-      ]
+      valid: true
     }
   },
   methods: {
@@ -81,15 +132,19 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-.MainPage {
-  .Logo {
-    text-align: center;
-  }
-  .DataBlock {
-    margin: 0 -12px;
-    .studycard {
-      margin-bottom: 20px;
-    }
-  }
+.classLoginButton {
+  border-radius: 14px;
+  min-width: 48px !important;
+}
+.description {
+  color: white;
+  font-weight: bold;
+  font-family: 'Noto Sans JP', sans-serif;
+}
+.forTeachers {
+  background-color: $color-base-color-07;
+  border-radius: 24px 24px 24px 24px;
+  padding-top: 4px;
+  padding-bottom: 24px;
 }
 </style>