Merge pull request #6427 from nard-tech/feature/#6398-markup-links-wi…

…th-ui-and-li トップページ「最新のお知らせ」の「ワクチン情報」「変異株情報」「検査情報」を ul, li タグでマークアップする
Tokyo-Metro-Gov · Jun 11, 2021 · f1edce2 · f1edce2
2 parents 33e75e6 + 6471eb8
commit f1edce2
Showing 1 changed file with 42 additions and 31 deletions.
diff --git a/components/index/SiteTopUpper/WhatsNew.vue b/components/index/SiteTopUpper/WhatsNew.vue
@@ -7,37 +7,46 @@
         </v-icon>
         {{ $t('最新のお知らせ') }}
       </h3>
-      <div class="WhatsNew-linkGroup">
-        <app-link
-          class="WhatsNew-linkButton"
-          to="https://www.fukushihoken.metro.tokyo.lg.jp/iryo/kansen/coronavaccine/index.html"
-        >
-          <span class="WhatsNew-linkButton-inner">
-            <vaccine-icon class="WhatsNew-linkButton-icon" aria-hidden="true" />
-            {{ $t('ワクチン情報') }}
-          </span>
-        </app-link>
-        <app-link
-          class="WhatsNew-linkButton"
-          to="https://www.fukushihoken.metro.tokyo.lg.jp/iryo/kansen/screening.html"
-        >
-          <span class="WhatsNew-linkButton-inner">
-            <covid-icon class="WhatsNew-linkButton-icon" aria-hidden="true" />
-            {{ $t('変異株情報') }}
-          </span>
-        </app-link>
-        <app-link
-          class="WhatsNew-linkButton"
-          to="https://www.fukushihoken.metro.tokyo.lg.jp/iryo/kansen/kensa/index.html"
-        >
-          <span class="WhatsNew-linkButton-inner">
-            <v-icon size="1em" class="WhatsNew-linkButton-v-icon">
-              {{ mdiClipboardText }}
-            </v-icon>
-            {{ $t('検査情報') }}
-          </span>
-        </app-link>
-      </div>
+      <ul class="WhatsNew-linkGroup">
+        <li>
+          <app-link
+            class="WhatsNew-linkButton"
+            to="https://www.fukushihoken.metro.tokyo.lg.jp/iryo/kansen/coronavaccine/index.html"
+          >
+            <span class="WhatsNew-linkButton-inner">
+              <vaccine-icon
+                class="WhatsNew-linkButton-icon"
+                aria-hidden="true"
+              />
+              {{ $t('ワクチン情報') }}
+            </span>
+          </app-link>
+        </li>
+        <li>
+          <app-link
+            class="WhatsNew-linkButton"
+            to="https://www.fukushihoken.metro.tokyo.lg.jp/iryo/kansen/screening.html"
+          >
+            <span class="WhatsNew-linkButton-inner">
+              <covid-icon class="WhatsNew-linkButton-icon" aria-hidden="true" />
+              {{ $t('変異株情報') }}
+            </span>
+          </app-link>
+        </li>
+        <li>
+          <app-link
+            class="WhatsNew-linkButton"
+            to="https://www.fukushihoken.metro.tokyo.lg.jp/iryo/kansen/kensa/index.html"
+          >
+            <span class="WhatsNew-linkButton-inner">
+              <v-icon size="1em" class="WhatsNew-linkButton-v-icon">
+                {{ mdiClipboardText }}
+              </v-icon>
+              {{ $t('検査情報') }}
+            </span>
+          </app-link>
+        </li>
+      </ul>
     </div>
     <ul class="WhatsNew-list">
       <li v-for="(item, i) in items" :key="i" class="WhatsNew-list-item">
@@ -123,6 +132,8 @@ export default Vue.extend({
       flex-wrap: wrap;
       align-items: center;
       justify-content: flex-end;
+      list-style: none;
+      padding: 0;
 
       @include lessThan($medium) {
         justify-content: flex-start;