[WIP] 閲覧者（学生側）ページ作成

Author: kaizumaki

src/components/CalendarBar.vue

@@ -276,7 +276,6 @@ export default class CalendarBar extends Vue {
   background: rgba(0, 0, 0, 0);
   height: 68px;
   min-width: 12px;
-  font-family: 'Noto Sans JP', sans-serif;
 
   .title {
     color: $color-base-color-01;
@@ -308,12 +307,12 @@ export default class CalendarBar extends Vue {
   flex-direction: column;
   background: $color-white;
   height: 68px;
-  min-width: 16px;
-  border-radius: 30px !important;
+  min-width: 1rem;
+  max-width: 3rem;
+  border-radius: 3em !important;
   align-items: center;
   justify-content: center;
   color: $color-gray;
-  font-family: 'Noto Sans JP', sans-serif;
   margin: 0 3px;
 }
 

src/components/ContentCard.vue

@@ -43,27 +43,18 @@ export default Vue.extend({
 
 <style scoped lang="scss">
 .ContentCard {
-  color: 'black';
+  color: $color-gray;
   border-radius: 14px !important;
   .ContentCard-SubjectTag {
     margin-right: 4px;
   }
   .ContentCard-Title {
-    font-family: 'Noto Sans', sans-serif;
-    font-style: normal;
     font-weight: bold;
     font-size: 14px;
-    line-height: 19px;
-    color: #424242;
   }
   .ContentCard-Description {
     white-space: pre-wrap;
-    font-family: 'Noto Sans', sans-serif;
-    font-style: normal;
-    font-weight: normal;
     font-size: 12px;
-    line-height: 16px;
-    color: #424242;
   }
 }
 </style>

src/components/PeriodCard.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="PeriodCard">
+    <div class="PeriodCard-NumberBlock">
+      <div class="PeriodCard-Number">
+        <span class="PeriodCard-Number-Num">1</span>
+        <span class="PeriodCard-Number-Text">時間目</span>
+      </div>
+      <div class="PeriodCard-Time">
+        <span>00:00</span>
+        <span>|</span>
+        <span>00:00</span>
+      </div>
+    </div>
+    <v-row>
+      <v-col
+        v-for="(item, i) in classData.getLessonsByDisplayDate"
+        :key="i"
+        cols="12"
+        md="6"
+      >
+        <ContentCard
+          :description="formatDate(item.startTime)"
+          :title="item.content"
+          :subjects="[{ name: item.subject }]"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import dayjs from 'dayjs'
+import ContentCard from '@/components/ContentCard.vue'
+
+export default Vue.extend({
+  components: { ContentCard },
+  props: {
+    classData: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  methods: {
+    formatDate(date: Date): string {
+      return dayjs(date).format('HH:MM')
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.PeriodCard {
+  display: flex;
+
+  &-NumberBlock {
+    display: flex;
+    flex-direction: column;
+    margin: 12px;
+  }
+
+  &-Number {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: $color-white;
+    background-color: $color-base-color-06;
+    max-width: 40px;
+    border-radius: 3em;
+    padding: 12px 4px;
+    margin-bottom: 8px;
+
+    &-Num {
+      font-size: 22px;
+    }
+
+    &-Text {
+      font-size: 8px;
+    }
+  }
+
+  &-Time {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    font-size: 10px;
+    color: $color-white;
+  }
+}
+</style>

src/pages/classes/index.vue

@@ -1,20 +1,9 @@
 <template>
   <div class="MainPage">
-    <v-row v-if="classData.getLessonsByDisplayDate.length" class="DataBlock">
-      <v-col
-        v-for="(item, i) in classData.getLessonsByDisplayDate"
-        :key="i"
-        cols="12"
-        md="6"
-      >
-        <ContentCard
-          :description="formatDate(item.startTime)"
-          :title="item.content"
-          :subjects="[{ name: item.subject }]"
-        />
-      </v-col>
-    </v-row>
-
+    <period-card
+      v-if="classData.getLessonsByDisplayDate.length"
+      :class-data="classData"
+    />
     <v-row v-else-if="today" class="DataBlock">
       <h1 style="color: white; width: 100vw; text-align: center;">
         今日の時間割はまだ届いていないみたいです
@@ -33,7 +22,7 @@ import Vue from 'vue'
 import dayjs from 'dayjs'
 import isToday from 'date-fns/isToday'
 import { vxm } from '@/store'
-import ContentCard from '@/components/ContentCard.vue'
+import PeriodCard from '@/components/PeriodCard.vue'
 
 type Data = {
   classData: typeof vxm.classData
@@ -42,7 +31,7 @@ type Data = {
 }
 
 export default Vue.extend({
-  components: { ContentCard },
+  components: { PeriodCard },
   layout: 'classes',
   data(): Data {
     return {