Merge pull request #3 from hinatao3o/feature/siteTopUpperDesignModifi…

…cation

相談の手順へのリンクをコンポーネント化 by hinatao3o merge

components/Consultation.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-col cols="12" md="6">
+    <template>
+        <lazy-static-info
+          v-if="$vuetify.breakpoint.smAndUp || showStaticInfo"
+          class="mb-4"
+          :url="'https://www.fukushihoken.metro.tokyo.lg.jp/iryo/kansen/coronasodan.html'"
+          :text="$t('自分や家族の症状に不安や心配があれば\nまずは電話相談をどうぞ')"
+          :btn-text="$t('相談の手順を見る')"
+        />
+    </template>
+  </v-col>
+</template>
+
+<script lang="ts">
+import { mdiChevronRight } from '@mdi/js'
+import Vue from 'vue'
+
+export default Vue.extend({
+  data() {
+    return {
+      showStaticInfo: false,
+    }
+  },
+  methods: {
+    onScroll() {
+      this.showStaticInfo = true
+    },
+  },
+})
+</script>

components/SiteTopUpper.vue

@@ -17,14 +17,10 @@
     </div>
     <whats-new class="mb-4" :items="newsItems" :is-emergency="false" />
     <monitoring-comment-card />
-    <lazy-tokyo-alert-card v-if="TokyoAlert.alert" />
-    <lazy-static-info
-      v-if="$vuetify.breakpoint.smAndUp || showStaticInfo"
-      class="mb-4"
-      :url="'https://www.fukushihoken.metro.tokyo.lg.jp/iryo/kansen/coronasodan.html'"
-      :text="$t('自分や家族の症状に不安や心配があればまずは電話相談をどうぞ')"
-      :btn-text="$t('相談の手順を見る')"
-    />
+    <div class="row">
+        <consultation />
+        <consultation />
+    </div>
   </div>
 </template>
 
@@ -34,6 +30,7 @@ import Vue from 'vue'
 import { MetaInfo } from 'vue-meta'
 
 import MonitoringCommentCard from '@/components/MonitoringCommentCard.vue'
+import Consultation from '@/components/Consultation.vue'
 import PageHeader from '@/components/PageHeader.vue'
 import WhatsNew from '@/components/WhatsNew.vue'
 import Data from '@/data/data.json'
@@ -46,6 +43,7 @@ export default Vue.extend({
     PageHeader,
     WhatsNew,
     MonitoringCommentCard,
+    Consultation,
   },
   data() {
     const { lastUpdate } = Data

components/StaticInfo.vue

@@ -43,17 +43,24 @@ export default Vue.extend({
   border: 1px solid $gray-4;
   box-shadow: $shadow;
   border-radius: 4px;
-  padding: 0.5em 1em;
+  padding: 1.2em;
+
+  span {
+      white-space: pre-wrap;
+      font-weight: 700;
+  }
 
   @include font-size(14);
 
   &-Button {
     flex: 1 0 auto;
     text-align: right;
+    display: inline-block;
 
     > a {
       text-decoration: none;
       color: $green-1 !important;
+      font-size: 1.8rem !important;
       @include button-text('sm');
 
       &:hover {