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

Author: kaizumaki

src/components/ContentCard.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card class="ContentCard">
-    <v-card-actions>
+    <v-card-actions class="ContentCard-Actions">
       <subject-tag
         v-for="(item, idx) in subjects"
         :key="idx"
@@ -10,11 +10,20 @@
         :icon-color="item.iconColor || 'white'"
         :background-color="item.backgroundColor || '#A5D8FF'"
       />
+      <subject-tag
+        class="ContentCard-SubjectTag"
+        :name="'動画'"
+        :icon="'mdi-video'"
+        :icon-color="'#424242'"
+        :background-color="'#E0E0E0'"
+      />
     </v-card-actions>
     <v-card-title>
       <h2 class="ContentCard-Title">{{ title }}</h2>
     </v-card-title>
-    <v-card-text class="ContentCard-Description">{{ description }}</v-card-text>
+    <v-card-text>
+      <p class="ContentCard-Description">{{ description }}</p>
+    </v-card-text>
   </v-card>
 </template>
 
@@ -45,16 +54,21 @@ export default Vue.extend({
 .ContentCard {
   color: $color-gray;
   border-radius: 14px !important;
+  .ContentCard-Actions {
+    padding: 16px 16px 0;
+  }
   .ContentCard-SubjectTag {
     margin-right: 4px;
   }
   .ContentCard-Title {
     font-weight: bold;
     font-size: 14px;
+    line-height: 1.75;
   }
   .ContentCard-Description {
-    white-space: pre-wrap;
     font-size: 12px;
+    color: $color-gray;
+    margin: 0;
   }
 }
 </style>

src/components/PeriodCard.vue

@@ -52,34 +52,36 @@ export default Vue.extend({
 <style scoped lang="scss">
 .PeriodCard {
   display: flex;
+  border-bottom: 1px solid $color-base-color-02;
 
-  &-NumberBlock {
+  .PeriodCard-NumberBlock {
     display: flex;
     flex-direction: column;
     margin: 12px;
   }
 
-  &-Number {
+  .PeriodCard-Number {
     display: flex;
     flex-direction: column;
     align-items: center;
     color: $color-white;
     background-color: $color-base-color-06;
-    max-width: 40px;
+    width: 40px;
     border-radius: 3em;
     padding: 12px 4px;
     margin-bottom: 8px;
 
-    &-Num {
+    .PeriodCard-Number-Num {
       font-size: 22px;
     }
 
-    &-Text {
+    .PeriodCard-Number-Text {
       font-size: 8px;
+      font-weight: bold;
     }
   }
 
-  &-Time {
+  .PeriodCard-Time {
     display: flex;
     flex-direction: column;
     justify-content: center;

src/layouts/classes.vue

@@ -8,9 +8,8 @@
     <v-app-bar fixed app class="bar" elevation="0">
       <HeaderLogo />
       <v-spacer />
-      <v-btn outlined rounded color="#0071C2">
-        ログアウト
-        <v-icon right>mdi-exit-to-app</v-icon>
+      <v-btn fab small outlined rounded color="#0071C2">
+        <v-icon>mdi-clipboard-account</v-icon>
       </v-btn>
       <template v-slot:extension>
         <div class="header-calender">

src/pages/classes/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="MainPage">
-    <period-card
-      v-if="classData.getLessonsByDisplayDate.length"
-      :class-data="classData"
-    />
+    <div v-if="classData.getLessonsByDisplayDate.length">
+      <period-card :class-data="classData" />
+    </div>
     <v-row v-else-if="today" class="DataBlock">
       <h1 style="color: white; width: 100vw; text-align: center;">
         今日の時間割はまだ届いていないみたいです