From 62b2a4a9b37023b747e445bdd21814c6d1cd5ccb Mon Sep 17 00:00:00 2001
From: azuki774s <azuki774s@gmail.com>
Date: Thu, 15 Aug 2024 02:24:19 +0900
Subject: [PATCH 1/4] try to use bootstrap tag first

---
 components/History.vue    |   4 +-
 components/PostRecord.vue |   6 +-
 components/Summary.vue    | 460 +++++++++++++++++++-------------------
 pages/index.vue           |   4 +-
 pages/summary/index.vue   |   6 +-
 5 files changed, 239 insertions(+), 241 deletions(-)

diff --git a/components/History.vue b/components/History.vue
index 9cb1b05..867b4c3 100644
--- a/components/History.vue
+++ b/components/History.vue
@@ -25,7 +25,7 @@ recordList.value = data
 </script>
 
 <template>
-  <section>
+  <container>
     <table class="table">
       <thead>
         <tr>
@@ -46,5 +46,5 @@ recordList.value = data
         </tr>
       </tbody>
     </table>
-  </section>
+  </container>
 </template>
diff --git a/components/PostRecord.vue b/components/PostRecord.vue
index 201e422..9ed7fd1 100644
--- a/components/PostRecord.vue
+++ b/components/PostRecord.vue
@@ -46,8 +46,7 @@ const postButton = async (): Promise<void> => {
 </script>
 
 <template>
-  <section>
-
+  <container>
     <select v-model="selector">
       <option v-for="category in categoryList" :key="category.category_id">
         {{ category.category_name }}
@@ -59,6 +58,5 @@ const postButton = async (): Promise<void> => {
     <div class="col">
       <button @click="postButton" name="postButton" class="sendbutton" type="submit">Post</button>
     </div>
-
-  </section>
+  </container>
 </template>
diff --git a/components/Summary.vue b/components/Summary.vue
index b763776..d14bb1a 100644
--- a/components/Summary.vue
+++ b/components/Summary.vue
@@ -139,241 +139,241 @@ if (asyncData.data.value != undefined) {
 
 <template>
   <NuxtLink to='/'>トップに戻る</NuxtLink>
-  <section>
+  <container>
     <h2>合計</h2>
-    <table class="all_table">
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>カテゴリ名</th>
-          <th>4月</th>
-          <th>5月</th>
-          <th>6月</th>
-          <th>7月</th>
-          <th>8月</th>
-          <th>9月</th>
-          <th>10月</th>
-          <th>11月</th>
-          <th>12月</th>
-          <th>1月</th>
-          <th>2月</th>
-          <th>3月</th>
-          <th>合計</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-if="fetched">
-          <td>{{ AllSumList.category_id }}</td>
-          <td>{{ AllSumList.category_name }}</td>
-          <td>{{ AllSumList.price[0] }}</td>
-          <td>{{ AllSumList.price[1] }}</td>
-          <td>{{ AllSumList.price[2] }}</td>
-          <td>{{ AllSumList.price[3] }}</td>
-          <td>{{ AllSumList.price[4] }}</td>
-          <td>{{ AllSumList.price[5] }}</td>
-          <td>{{ AllSumList.price[6] }}</td>
-          <td>{{ AllSumList.price[7] }}</td>
-          <td>{{ AllSumList.price[8] }}</td>
-          <td>{{ AllSumList.price[9] }}</td>
-          <td>{{ AllSumList.price[10] }}</td>
-          <td>{{ AllSumList.price[11] }}</td>
-          <td>{{ AllSumList.total }}</td>
-        </tr>
-        <tr v-if="fetched">
-          <td>{{ AllSumWithoutInvestList.category_id }}</td>
-          <td>{{ AllSumWithoutInvestList.category_name }}</td>
-          <td>{{ AllSumWithoutInvestList.price[0] }}</td>
-          <td>{{ AllSumWithoutInvestList.price[1] }}</td>
-          <td>{{ AllSumWithoutInvestList.price[2] }}</td>
-          <td>{{ AllSumWithoutInvestList.price[3] }}</td>
-          <td>{{ AllSumWithoutInvestList.price[4] }}</td>
-          <td>{{ AllSumWithoutInvestList.price[5] }}</td>
-          <td>{{ AllSumWithoutInvestList.price[6] }}</td>
-          <td>{{ AllSumWithoutInvestList.price[7] }}</td>
-          <td>{{ AllSumWithoutInvestList.price[8] }}</td>
-          <td>{{ AllSumWithoutInvestList.price[9] }}</td>
-          <td>{{ AllSumWithoutInvestList.price[10] }}</td>
-          <td>{{ AllSumWithoutInvestList.price[11] }}</td>
-          <td>{{ AllSumWithoutInvestList.total }}</td>
-        </tr>
-      </tbody>
-    </table>
+    <b-table class="all_table">
+      <b-thead>
+        <b-tr>
+          <b-th>ID</b-th>
+          <b-th>カテゴリ名</b-th>
+          <b-th>4月</b-th>
+          <b-th>5月</b-th>
+          <b-th>6月</b-th>
+          <b-th>7月</b-th>
+          <b-th>8月</b-th>
+          <b-th>9月</b-th>
+          <b-th>10月</b-th>
+          <b-th>11月</b-th>
+          <b-th>12月</b-th>
+          <b-th>1月</b-th>
+          <b-th>2月</b-th>
+          <b-th>3月</b-th>
+          <b-th>合計</b-th>
+        </b-tr>
+      </b-thead>
+      <b-tbody>
+        <b-tr v-if="fetched">
+          <b-td>{{ AllSumList.category_id }}</b-td>
+          <b-td>{{ AllSumList.category_name }}</b-td>
+          <b-td>{{ AllSumList.price[0] }}</b-td>
+          <b-td>{{ AllSumList.price[1] }}</b-td>
+          <b-td>{{ AllSumList.price[2] }}</b-td>
+          <b-td>{{ AllSumList.price[3] }}</b-td>
+          <b-td>{{ AllSumList.price[4] }}</b-td>
+          <b-td>{{ AllSumList.price[5] }}</b-td>
+          <b-td>{{ AllSumList.price[6] }}</b-td>
+          <b-td>{{ AllSumList.price[7] }}</b-td>
+          <b-td>{{ AllSumList.price[8] }}</b-td>
+          <b-td>{{ AllSumList.price[9] }}</b-td>
+          <b-td>{{ AllSumList.price[10] }}</b-td>
+          <b-td>{{ AllSumList.price[11] }}</b-td>
+          <b-td>{{ AllSumList.total }}</b-td>
+        </b-tr>
+        <b-tr v-if="fetched">
+          <b-td>{{ AllSumWithoutInvestList.category_id }}</b-td>
+          <b-td>{{ AllSumWithoutInvestList.category_name }}</b-td>
+          <b-td>{{ AllSumWithoutInvestList.price[0] }}</b-td>
+          <b-td>{{ AllSumWithoutInvestList.price[1] }}</b-td>
+          <b-td>{{ AllSumWithoutInvestList.price[2] }}</b-td>
+          <b-td>{{ AllSumWithoutInvestList.price[3] }}</b-td>
+          <b-td>{{ AllSumWithoutInvestList.price[4] }}</b-td>
+          <b-td>{{ AllSumWithoutInvestList.price[5] }}</b-td>
+          <b-td>{{ AllSumWithoutInvestList.price[6] }}</b-td>
+          <b-td>{{ AllSumWithoutInvestList.price[7] }}</b-td>
+          <b-td>{{ AllSumWithoutInvestList.price[8] }}</b-td>
+          <b-td>{{ AllSumWithoutInvestList.price[9] }}</b-td>
+          <b-td>{{ AllSumWithoutInvestList.price[10] }}</b-td>
+          <b-td>{{ AllSumWithoutInvestList.price[11] }}</b-td>
+          <b-td>{{ AllSumWithoutInvestList.total }}</b-td>
+        </b-tr>
+      </b-tbody>
+    </b-table>
 
     <h2>収入</h2>
-    <table class="income_table">
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>カテゴリ名</th>
-          <th>4月</th>
-          <th>5月</th>
-          <th>6月</th>
-          <th>7月</th>
-          <th>8月</th>
-          <th>9月</th>
-          <th>10月</th>
-          <th>11月</th>
-          <th>12月</th>
-          <th>1月</th>
-          <th>2月</th>
-          <th>3月</th>
-          <th>合計</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="income in incomeList">
-          <td>{{ income.category_id }}</td>
-          <td>{{ income.category_name }}</td>
-          <td>{{ income.price[0] }}</td>
-          <td>{{ income.price[1] }}</td>
-          <td>{{ income.price[2] }}</td>
-          <td>{{ income.price[3] }}</td>
-          <td>{{ income.price[4] }}</td>
-          <td>{{ income.price[5] }}</td>
-          <td>{{ income.price[6] }}</td>
-          <td>{{ income.price[7] }}</td>
-          <td>{{ income.price[8] }}</td>
-          <td>{{ income.price[9] }}</td>
-          <td>{{ income.price[10] }}</td>
-          <td>{{ income.price[11] }}</td>
-          <td>{{ income.total }}</td>
-        </tr>
-        <tr v-if="fetched">
-          <td>{{ incomeSumList.category_id }}</td>
-          <td>{{ incomeSumList.category_name }}</td>
-          <td>{{ incomeSumList.price[0] }}</td>
-          <td>{{ incomeSumList.price[1] }}</td>
-          <td>{{ incomeSumList.price[2] }}</td>
-          <td>{{ incomeSumList.price[3] }}</td>
-          <td>{{ incomeSumList.price[4] }}</td>
-          <td>{{ incomeSumList.price[5] }}</td>
-          <td>{{ incomeSumList.price[6] }}</td>
-          <td>{{ incomeSumList.price[7] }}</td>
-          <td>{{ incomeSumList.price[8] }}</td>
-          <td>{{ incomeSumList.price[9] }}</td>
-          <td>{{ incomeSumList.price[10] }}</td>
-          <td>{{ incomeSumList.price[11] }}</td>
-          <td>{{ incomeSumList.total }}</td>
-        </tr>
-      </tbody>
-    </table>
+    <b-table class="income_table">
+      <b-thead>
+        <b-tr>
+          <b-th>ID</b-th>
+          <b-th>カテゴリ名</b-th>
+          <b-th>4月</b-th>
+          <b-th>5月</b-th>
+          <b-th>6月</b-th>
+          <b-th>7月</b-th>
+          <b-th>8月</b-th>
+          <b-th>9月</b-th>
+          <b-th>10月</b-th>
+          <b-th>11月</b-th>
+          <b-th>12月</b-th>
+          <b-th>1月</b-th>
+          <b-th>2月</b-th>
+          <b-th>3月</b-th>
+          <b-th>合計</b-th>
+        </b-tr>
+      </b-thead>
+      <b-tbody>
+        <b-tr v-for="income in incomeList">
+          <b-td>{{ income.category_id }}</b-td>
+          <b-td>{{ income.category_name }}</b-td>
+          <b-td>{{ income.price[0] }}</b-td>
+          <b-td>{{ income.price[1] }}</b-td>
+          <b-td>{{ income.price[2] }}</b-td>
+          <b-td>{{ income.price[3] }}</b-td>
+          <b-td>{{ income.price[4] }}</b-td>
+          <b-td>{{ income.price[5] }}</b-td>
+          <b-td>{{ income.price[6] }}</b-td>
+          <b-td>{{ income.price[7] }}</b-td>
+          <b-td>{{ income.price[8] }}</b-td>
+          <b-td>{{ income.price[9] }}</b-td>
+          <b-td>{{ income.price[10] }}</b-td>
+          <b-td>{{ income.price[11] }}</b-td>
+          <b-td>{{ income.total }}</b-td>
+        </b-tr>
+        <b-tr v-if="fetched">
+          <b-td>{{ incomeSumList.category_id }}</b-td>
+          <b-td>{{ incomeSumList.category_name }}</b-td>
+          <b-td>{{ incomeSumList.price[0] }}</b-td>
+          <b-td>{{ incomeSumList.price[1] }}</b-td>
+          <b-td>{{ incomeSumList.price[2] }}</b-td>
+          <b-td>{{ incomeSumList.price[3] }}</b-td>
+          <b-td>{{ incomeSumList.price[4] }}</b-td>
+          <b-td>{{ incomeSumList.price[5] }}</b-td>
+          <b-td>{{ incomeSumList.price[6] }}</b-td>
+          <b-td>{{ incomeSumList.price[7] }}</b-td>
+          <b-td>{{ incomeSumList.price[8] }}</b-td>
+          <b-td>{{ incomeSumList.price[9] }}</b-td>
+          <b-td>{{ incomeSumList.price[10] }}</b-td>
+          <b-td>{{ incomeSumList.price[11] }}</b-td>
+          <b-td>{{ incomeSumList.total }}</b-td>
+        </b-tr>
+      </b-tbody>
+    </b-table>
 
     <h2>支出</h2>
-    <table class="outgoing_table">
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>カテゴリ名</th>
-          <th>4月</th>
-          <th>5月</th>
-          <th>6月</th>
-          <th>7月</th>
-          <th>8月</th>
-          <th>9月</th>
-          <th>10月</th>
-          <th>11月</th>
-          <th>12月</th>
-          <th>1月</th>
-          <th>2月</th>
-          <th>3月</th>
-          <th>合計</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="outgoing in outgoingList">
-          <td>{{ outgoing.category_id }}</td>
-          <td>{{ outgoing.category_name }}</td>
-          <td>{{ outgoing.price[0] }}</td>
-          <td>{{ outgoing.price[1] }}</td>
-          <td>{{ outgoing.price[2] }}</td>
-          <td>{{ outgoing.price[3] }}</td>
-          <td>{{ outgoing.price[4] }}</td>
-          <td>{{ outgoing.price[5] }}</td>
-          <td>{{ outgoing.price[6] }}</td>
-          <td>{{ outgoing.price[7] }}</td>
-          <td>{{ outgoing.price[8] }}</td>
-          <td>{{ outgoing.price[9] }}</td>
-          <td>{{ outgoing.price[10] }}</td>
-          <td>{{ outgoing.price[11] }}</td>
-          <td>{{ outgoing.total }}</td>
-        </tr>
-        <tr v-if="fetched">
-          <td>{{ outgoingSumList.category_id }}</td>
-          <td>{{ outgoingSumList.category_name }}</td>
-          <td>{{ outgoingSumList.price[0] }}</td>
-          <td>{{ outgoingSumList.price[1] }}</td>
-          <td>{{ outgoingSumList.price[2] }}</td>
-          <td>{{ outgoingSumList.price[3] }}</td>
-          <td>{{ outgoingSumList.price[4] }}</td>
-          <td>{{ outgoingSumList.price[5] }}</td>
-          <td>{{ outgoingSumList.price[6] }}</td>
-          <td>{{ outgoingSumList.price[7] }}</td>
-          <td>{{ outgoingSumList.price[8] }}</td>
-          <td>{{ outgoingSumList.price[9] }}</td>
-          <td>{{ outgoingSumList.price[10] }}</td>
-          <td>{{ outgoingSumList.price[11] }}</td>
-          <td>{{ outgoingSumList.total }}</td>
-        </tr>
-      </tbody>
-    </table>
+    <b-table class="outgoing_table">
+      <b-thead>
+        <b-tr>
+          <b-th>ID</b-th>
+          <b-th>カテゴリ名</b-th>
+          <b-th>4月</b-th>
+          <b-th>5月</b-th>
+          <b-th>6月</b-th>
+          <b-th>7月</b-th>
+          <b-th>8月</b-th>
+          <b-th>9月</b-th>
+          <b-th>10月</b-th>
+          <b-th>11月</b-th>
+          <b-th>12月</b-th>
+          <b-th>1月</b-th>
+          <b-th>2月</b-th>
+          <b-th>3月</b-th>
+          <b-th>合計</b-th>
+        </b-tr>
+      </b-thead>
+      <b-tbody>
+        <b-tr v-for="outgoing in outgoingList">
+          <b-td>{{ outgoing.category_id }}</b-td>
+          <b-td>{{ outgoing.category_name }}</b-td>
+          <b-td>{{ outgoing.price[0] }}</b-td>
+          <b-td>{{ outgoing.price[1] }}</b-td>
+          <b-td>{{ outgoing.price[2] }}</b-td>
+          <b-td>{{ outgoing.price[3] }}</b-td>
+          <b-td>{{ outgoing.price[4] }}</b-td>
+          <b-td>{{ outgoing.price[5] }}</b-td>
+          <b-td>{{ outgoing.price[6] }}</b-td>
+          <b-td>{{ outgoing.price[7] }}</b-td>
+          <b-td>{{ outgoing.price[8] }}</b-td>
+          <b-td>{{ outgoing.price[9] }}</b-td>
+          <b-td>{{ outgoing.price[10] }}</b-td>
+          <b-td>{{ outgoing.price[11] }}</b-td>
+          <b-td>{{ outgoing.total }}</b-td>
+        </b-tr>
+        <b-tr v-if="fetched">
+          <b-td>{{ outgoingSumList.category_id }}</b-td>
+          <b-td>{{ outgoingSumList.category_name }}</b-td>
+          <b-td>{{ outgoingSumList.price[0] }}</b-td>
+          <b-td>{{ outgoingSumList.price[1] }}</b-td>
+          <b-td>{{ outgoingSumList.price[2] }}</b-td>
+          <b-td>{{ outgoingSumList.price[3] }}</b-td>
+          <b-td>{{ outgoingSumList.price[4] }}</b-td>
+          <b-td>{{ outgoingSumList.price[5] }}</b-td>
+          <b-td>{{ outgoingSumList.price[6] }}</b-td>
+          <b-td>{{ outgoingSumList.price[7] }}</b-td>
+          <b-td>{{ outgoingSumList.price[8] }}</b-td>
+          <b-td>{{ outgoingSumList.price[9] }}</b-td>
+          <b-td>{{ outgoingSumList.price[10] }}</b-td>
+          <b-td>{{ outgoingSumList.price[11] }}</b-td>
+          <b-td>{{ outgoingSumList.total }}</b-td>
+        </b-tr>
+      </b-tbody>
+    </b-table>
 
     <h2>投資</h2>
-    <table class="invest_table">
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>カテゴリ名</th>
-          <th>4月</th>
-          <th>5月</th>
-          <th>6月</th>
-          <th>7月</th>
-          <th>8月</th>
-          <th>9月</th>
-          <th>10月</th>
-          <th>11月</th>
-          <th>12月</th>
-          <th>1月</th>
-          <th>2月</th>
-          <th>3月</th>
-          <th>合計</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="invest in investList">
-          <td>{{ invest.category_id }}</td>
-          <td>{{ invest.category_name }}</td>
-          <td>{{ invest.price[0] }}</td>
-          <td>{{ invest.price[1] }}</td>
-          <td>{{ invest.price[2] }}</td>
-          <td>{{ invest.price[3] }}</td>
-          <td>{{ invest.price[4] }}</td>
-          <td>{{ invest.price[5] }}</td>
-          <td>{{ invest.price[6] }}</td>
-          <td>{{ invest.price[7] }}</td>
-          <td>{{ invest.price[8] }}</td>
-          <td>{{ invest.price[9] }}</td>
-          <td>{{ invest.price[10] }}</td>
-          <td>{{ invest.price[11] }}</td>
-          <td>{{ invest.total }}</td>
-        </tr>
-        <tr v-if="fetched">
-          <td>{{ investSumList.category_id }}</td>
-          <td>{{ investSumList.category_name }}</td>
-          <td>{{ investSumList.price[0] }}</td>
-          <td>{{ investSumList.price[1] }}</td>
-          <td>{{ investSumList.price[2] }}</td>
-          <td>{{ investSumList.price[3] }}</td>
-          <td>{{ investSumList.price[4] }}</td>
-          <td>{{ investSumList.price[5] }}</td>
-          <td>{{ investSumList.price[6] }}</td>
-          <td>{{ investSumList.price[7] }}</td>
-          <td>{{ investSumList.price[8] }}</td>
-          <td>{{ investSumList.price[9] }}</td>
-          <td>{{ investSumList.price[10] }}</td>
-          <td>{{ investSumList.price[11] }}</td>
-          <td>{{ investSumList.total }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </section>
+    <b-table class="invest_table">
+      <b-thead>
+        <b-tr>
+          <b-th>ID</b-th>
+          <b-th>カテゴリ名</b-th>
+          <b-th>4月</b-th>
+          <b-th>5月</b-th>
+          <b-th>6月</b-th>
+          <b-th>7月</b-th>
+          <b-th>8月</b-th>
+          <b-th>9月</b-th>
+          <b-th>10月</b-th>
+          <b-th>11月</b-th>
+          <b-th>12月</b-th>
+          <b-th>1月</b-th>
+          <b-th>2月</b-th>
+          <b-th>3月</b-th>
+          <b-th>合計</b-th>
+        </b-tr>
+      </b-thead>
+      <b-tbody>
+        <b-tr v-for="invest in investList">
+          <b-td>{{ invest.category_id }}</b-td>
+          <b-td>{{ invest.category_name }}</b-td>
+          <b-td>{{ invest.price[0] }}</b-td>
+          <b-td>{{ invest.price[1] }}</b-td>
+          <b-td>{{ invest.price[2] }}</b-td>
+          <b-td>{{ invest.price[3] }}</b-td>
+          <b-td>{{ invest.price[4] }}</b-td>
+          <b-td>{{ invest.price[5] }}</b-td>
+          <b-td>{{ invest.price[6] }}</b-td>
+          <b-td>{{ invest.price[7] }}</b-td>
+          <b-td>{{ invest.price[8] }}</b-td>
+          <b-td>{{ invest.price[9] }}</b-td>
+          <b-td>{{ invest.price[10] }}</b-td>
+          <b-td>{{ invest.price[11] }}</b-td>
+          <b-td>{{ invest.total }}</b-td>
+        </b-tr>
+        <b-tr v-if="fetched">
+          <b-td>{{ investSumList.category_id }}</b-td>
+          <b-td>{{ investSumList.category_name }}</b-td>
+          <b-td>{{ investSumList.price[0] }}</b-td>
+          <b-td>{{ investSumList.price[1] }}</b-td>
+          <b-td>{{ investSumList.price[2] }}</b-td>
+          <b-td>{{ investSumList.price[3] }}</b-td>
+          <b-td>{{ investSumList.price[4] }}</b-td>
+          <b-td>{{ investSumList.price[5] }}</b-td>
+          <b-td>{{ investSumList.price[6] }}</b-td>
+          <b-td>{{ investSumList.price[7] }}</b-td>
+          <b-td>{{ investSumList.price[8] }}</b-td>
+          <b-td>{{ investSumList.price[9] }}</b-td>
+          <b-td>{{ investSumList.price[10] }}</b-td>
+          <b-td>{{ investSumList.price[11] }}</b-td>
+          <b-td>{{ investSumList.total }}</b-td>
+        </b-tr>
+      </b-tbody>
+    </b-table>
+  </container>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index e576a20..339fcdc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,11 +3,9 @@
   <section>
     <h2>登録</h2>
     <PostRecord />
-  </section>
 
-  <NuxtLink to='/summary'>サマリー表示</NuxtLink>
+    <NuxtLink to='/summary'>サマリー表示</NuxtLink>
 
-  <section>
     <h2>直近履歴</h2>
     <History />
   </section>
diff --git a/pages/summary/index.vue b/pages/summary/index.vue
index 6733f0d..e6fe983 100644
--- a/pages/summary/index.vue
+++ b/pages/summary/index.vue
@@ -1,4 +1,6 @@
 <template>
-  <h1>summary page</h1>
-  <Summary />
+  <section>
+    <h1>summary page</h1>
+    <Summary />
+  </section>
 </template>

From a7951fdb145e8a13950b5c863666932816eb00b1 Mon Sep 17 00:00:00 2001
From: azuki774s <azuki774s@gmail.com>
Date: Thu, 15 Aug 2024 23:27:12 +0900
Subject: [PATCH 2/4] index uses bootstrap

---
 pages/index.vue | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 339fcdc..13f80d8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,12 +1,28 @@
 <template>
-  <h1>mawinter-front</h1>
+  <b-h level="1">mawinter-front</b-h>
   <section>
-    <h2>登録</h2>
-    <PostRecord />
+    <b-p text-alignment="center">
+      <b-h level="2">登録</b-h>
+      <PostRecord />
+    </b-p>
 
-    <NuxtLink to='/summary'>サマリー表示</NuxtLink>
+    <b-p text-alignment="center">
+      <div class="summary_link">
+        <NuxtLink to='/summary'>サマリー表示</NuxtLink>
+      </div>
+    </b-p>
 
-    <h2>直近履歴</h2>
-    <History />
+    <b-p text-alignment="center">
+      <b-h level="2">直近履歴</b-h>
+      <History />
+    </b-p>
   </section>
 </template>
+
+<style lang="css">
+.summary_link {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>

From e682bf92ed8975f11a6b772263eaaafd30489e93 Mon Sep 17 00:00:00 2001
From: azuki774s <azuki774s@gmail.com>
Date: Thu, 15 Aug 2024 23:27:24 +0900
Subject: [PATCH 3/4] add: postRecord uses bootstrap

---
 components/PostRecord.vue | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/components/PostRecord.vue b/components/PostRecord.vue
index 9ed7fd1..866c64e 100644
--- a/components/PostRecord.vue
+++ b/components/PostRecord.vue
@@ -47,16 +47,28 @@ const postButton = async (): Promise<void> => {
 
 <template>
   <container>
-    <select v-model="selector">
-      <option v-for="category in categoryList" :key="category.category_id">
-        {{ category.category_name }}
-      </option>
-    </select>
+    <Row justify-content="md-center">
+      <Col col="md-auto">
+      <BFormSelect v-model="selector" margin="b-4">
+        <b-option v-for="category in categoryList" :key="category.category_id">
+          {{ category.category_name }}
+        </b-option>
+      </BFormSelect>
+      </Col>
 
-    <input v-model="priceBox" type="number" />
+      <Col col="md-auto">
+      <BFormFloating margin="b-2">
+        <BFormInput v-model="priceBox" type="number" placeholder="name@example.com" />
+        <BFormLabel for="floatingInput">
+          Price
+        </BFormLabel>
+      </BFormFloating>
+      </Col>
+    </Row>
 
-    <div class="col">
-      <button @click="postButton" name="postButton" class="sendbutton" type="submit">Post</button>
-    </div>
+    <Col display="grid" gap="2" margin="x-auto" col="6">
+    <b-button button="primary" size="lg" @click="postButton" name="postButton" class="sendbutton"
+      type="submit">Post</b-button>
+    </Col>
   </container>
 </template>

From 65666d361e32041daa5856510ddcf5b0c7035b5f Mon Sep 17 00:00:00 2001
From: azuki774s <azuki774s@gmail.com>
Date: Thu, 15 Aug 2024 23:48:08 +0900
Subject: [PATCH 4/4] add: Summary uses bootstrap

---
 components/Summary.vue | 356 +++++++++++++++++++++--------------------
 1 file changed, 180 insertions(+), 176 deletions(-)

diff --git a/components/Summary.vue b/components/Summary.vue
index d14bb1a..483510a 100644
--- a/components/Summary.vue
+++ b/components/Summary.vue
@@ -138,242 +138,246 @@ if (asyncData.data.value != undefined) {
 </script>
 
 <template>
-  <NuxtLink to='/'>トップに戻る</NuxtLink>
+
   <container>
-    <h2>合計</h2>
-    <b-table class="all_table">
+    <b-p text-alignment="center">
+      <NuxtLink to='/'>トップに戻る</NuxtLink>
+    </b-p>
+
+    <b-h level="2">合計</b-h>
+    <b-table small bordered striped class="all_table">
       <b-thead>
         <b-tr>
-          <b-th>ID</b-th>
-          <b-th>カテゴリ名</b-th>
-          <b-th>4月</b-th>
-          <b-th>5月</b-th>
-          <b-th>6月</b-th>
-          <b-th>7月</b-th>
-          <b-th>8月</b-th>
-          <b-th>9月</b-th>
-          <b-th>10月</b-th>
-          <b-th>11月</b-th>
-          <b-th>12月</b-th>
-          <b-th>1月</b-th>
-          <b-th>2月</b-th>
-          <b-th>3月</b-th>
-          <b-th>合計</b-th>
+          <b-th style="width: 5%">ID</b-th>
+          <b-th style="width: 10%">カテゴリ名</b-th>
+          <b-th style="width: 5%">4月</b-th>
+          <b-th style="width: 5%">5月</b-th>
+          <b-th style="width: 5%">6月</b-th>
+          <b-th style="width: 5%">7月</b-th>
+          <b-th style="width: 5%">8月</b-th>
+          <b-th style="width: 5%">9月</b-th>
+          <b-th style="width: 5%">10月</b-th>
+          <b-th style="width: 5%">11月</b-th>
+          <b-th style="width: 5%">12月</b-th>
+          <b-th style="width: 5%">1月</b-th>
+          <b-th style="width: 5%">2月</b-th>
+          <b-th style="width: 5%">3月</b-th>
+          <b-th style="width: 5%">合計</b-th>
         </b-tr>
       </b-thead>
       <b-tbody>
         <b-tr v-if="fetched">
           <b-td>{{ AllSumList.category_id }}</b-td>
           <b-td>{{ AllSumList.category_name }}</b-td>
-          <b-td>{{ AllSumList.price[0] }}</b-td>
-          <b-td>{{ AllSumList.price[1] }}</b-td>
-          <b-td>{{ AllSumList.price[2] }}</b-td>
-          <b-td>{{ AllSumList.price[3] }}</b-td>
-          <b-td>{{ AllSumList.price[4] }}</b-td>
-          <b-td>{{ AllSumList.price[5] }}</b-td>
-          <b-td>{{ AllSumList.price[6] }}</b-td>
-          <b-td>{{ AllSumList.price[7] }}</b-td>
-          <b-td>{{ AllSumList.price[8] }}</b-td>
-          <b-td>{{ AllSumList.price[9] }}</b-td>
-          <b-td>{{ AllSumList.price[10] }}</b-td>
-          <b-td>{{ AllSumList.price[11] }}</b-td>
-          <b-td>{{ AllSumList.total }}</b-td>
+          <b-td><b-div float="end">{{ AllSumList.price[0] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumList.price[1] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumList.price[2] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumList.price[3] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumList.price[4] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumList.price[5] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumList.price[6] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumList.price[7] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumList.price[8] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumList.price[9] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumList.price[10] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumList.price[11] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumList.total }}</b-div></b-td>
         </b-tr>
         <b-tr v-if="fetched">
           <b-td>{{ AllSumWithoutInvestList.category_id }}</b-td>
           <b-td>{{ AllSumWithoutInvestList.category_name }}</b-td>
-          <b-td>{{ AllSumWithoutInvestList.price[0] }}</b-td>
-          <b-td>{{ AllSumWithoutInvestList.price[1] }}</b-td>
-          <b-td>{{ AllSumWithoutInvestList.price[2] }}</b-td>
-          <b-td>{{ AllSumWithoutInvestList.price[3] }}</b-td>
-          <b-td>{{ AllSumWithoutInvestList.price[4] }}</b-td>
-          <b-td>{{ AllSumWithoutInvestList.price[5] }}</b-td>
-          <b-td>{{ AllSumWithoutInvestList.price[6] }}</b-td>
-          <b-td>{{ AllSumWithoutInvestList.price[7] }}</b-td>
-          <b-td>{{ AllSumWithoutInvestList.price[8] }}</b-td>
-          <b-td>{{ AllSumWithoutInvestList.price[9] }}</b-td>
-          <b-td>{{ AllSumWithoutInvestList.price[10] }}</b-td>
-          <b-td>{{ AllSumWithoutInvestList.price[11] }}</b-td>
-          <b-td>{{ AllSumWithoutInvestList.total }}</b-td>
+          <b-td><b-div float="end">{{ AllSumWithoutInvestList.price[0] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumWithoutInvestList.price[1] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumWithoutInvestList.price[2] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumWithoutInvestList.price[3] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumWithoutInvestList.price[4] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumWithoutInvestList.price[5] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumWithoutInvestList.price[6] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumWithoutInvestList.price[7] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumWithoutInvestList.price[8] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumWithoutInvestList.price[9] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumWithoutInvestList.price[10] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumWithoutInvestList.price[11] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ AllSumWithoutInvestList.total }}</b-div></b-td>
         </b-tr>
       </b-tbody>
     </b-table>
 
-    <h2>収入</h2>
-    <b-table class="income_table">
+    <b-h level="2">収入</b-h>
+    <b-table small bordered striped class="income_table">
       <b-thead>
         <b-tr>
-          <b-th>ID</b-th>
-          <b-th>カテゴリ名</b-th>
-          <b-th>4月</b-th>
-          <b-th>5月</b-th>
-          <b-th>6月</b-th>
-          <b-th>7月</b-th>
-          <b-th>8月</b-th>
-          <b-th>9月</b-th>
-          <b-th>10月</b-th>
-          <b-th>11月</b-th>
-          <b-th>12月</b-th>
-          <b-th>1月</b-th>
-          <b-th>2月</b-th>
-          <b-th>3月</b-th>
-          <b-th>合計</b-th>
+          <b-th style="width: 5%">ID</b-th>
+          <b-th style="width: 10%">カテゴリ名</b-th>
+          <b-th style="width: 5%">4月</b-th>
+          <b-th style="width: 5%">5月</b-th>
+          <b-th style="width: 5%">6月</b-th>
+          <b-th style="width: 5%">7月</b-th>
+          <b-th style="width: 5%">8月</b-th>
+          <b-th style="width: 5%">9月</b-th>
+          <b-th style="width: 5%">10月</b-th>
+          <b-th style="width: 5%">11月</b-th>
+          <b-th style="width: 5%">12月</b-th>
+          <b-th style="width: 5%">1月</b-th>
+          <b-th style="width: 5%">2月</b-th>
+          <b-th style="width: 5%">3月</b-th>
+          <b-th style="width: 5%">合計</b-th>
         </b-tr>
       </b-thead>
       <b-tbody>
         <b-tr v-for="income in incomeList">
           <b-td>{{ income.category_id }}</b-td>
           <b-td>{{ income.category_name }}</b-td>
-          <b-td>{{ income.price[0] }}</b-td>
-          <b-td>{{ income.price[1] }}</b-td>
-          <b-td>{{ income.price[2] }}</b-td>
-          <b-td>{{ income.price[3] }}</b-td>
-          <b-td>{{ income.price[4] }}</b-td>
-          <b-td>{{ income.price[5] }}</b-td>
-          <b-td>{{ income.price[6] }}</b-td>
-          <b-td>{{ income.price[7] }}</b-td>
-          <b-td>{{ income.price[8] }}</b-td>
-          <b-td>{{ income.price[9] }}</b-td>
-          <b-td>{{ income.price[10] }}</b-td>
-          <b-td>{{ income.price[11] }}</b-td>
-          <b-td>{{ income.total }}</b-td>
+          <b-td><b-div float="end">{{ income.price[0] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ income.price[1] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ income.price[2] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ income.price[3] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ income.price[4] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ income.price[5] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ income.price[6] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ income.price[7] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ income.price[8] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ income.price[9] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ income.price[10] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ income.price[11] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ income.total }}</b-div></b-td>
         </b-tr>
-        <b-tr v-if="fetched">
+        <b-tr v-if="fetched" theme="success">
           <b-td>{{ incomeSumList.category_id }}</b-td>
           <b-td>{{ incomeSumList.category_name }}</b-td>
-          <b-td>{{ incomeSumList.price[0] }}</b-td>
-          <b-td>{{ incomeSumList.price[1] }}</b-td>
-          <b-td>{{ incomeSumList.price[2] }}</b-td>
-          <b-td>{{ incomeSumList.price[3] }}</b-td>
-          <b-td>{{ incomeSumList.price[4] }}</b-td>
-          <b-td>{{ incomeSumList.price[5] }}</b-td>
-          <b-td>{{ incomeSumList.price[6] }}</b-td>
-          <b-td>{{ incomeSumList.price[7] }}</b-td>
-          <b-td>{{ incomeSumList.price[8] }}</b-td>
-          <b-td>{{ incomeSumList.price[9] }}</b-td>
-          <b-td>{{ incomeSumList.price[10] }}</b-td>
-          <b-td>{{ incomeSumList.price[11] }}</b-td>
-          <b-td>{{ incomeSumList.total }}</b-td>
+          <b-td><b-div float="end">{{ incomeSumList.price[0] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ incomeSumList.price[1] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ incomeSumList.price[2] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ incomeSumList.price[3] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ incomeSumList.price[4] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ incomeSumList.price[5] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ incomeSumList.price[6] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ incomeSumList.price[7] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ incomeSumList.price[8] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ incomeSumList.price[9] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ incomeSumList.price[10] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ incomeSumList.price[11] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ incomeSumList.total }}</b-div></b-td>
         </b-tr>
       </b-tbody>
     </b-table>
 
-    <h2>支出</h2>
-    <b-table class="outgoing_table">
+    <b-h level="2">支出</b-h>
+    <b-table small bordered striped class="outgoing_table">
       <b-thead>
         <b-tr>
-          <b-th>ID</b-th>
-          <b-th>カテゴリ名</b-th>
-          <b-th>4月</b-th>
-          <b-th>5月</b-th>
-          <b-th>6月</b-th>
-          <b-th>7月</b-th>
-          <b-th>8月</b-th>
-          <b-th>9月</b-th>
-          <b-th>10月</b-th>
-          <b-th>11月</b-th>
-          <b-th>12月</b-th>
-          <b-th>1月</b-th>
-          <b-th>2月</b-th>
-          <b-th>3月</b-th>
-          <b-th>合計</b-th>
+          <b-th style="width: 5%">ID</b-th>
+          <b-th style="width: 10%">カテゴリ名</b-th>
+          <b-th style="width: 5%">4月</b-th>
+          <b-th style="width: 5%">5月</b-th>
+          <b-th style="width: 5%">6月</b-th>
+          <b-th style="width: 5%">7月</b-th>
+          <b-th style="width: 5%">8月</b-th>
+          <b-th style="width: 5%">9月</b-th>
+          <b-th style="width: 5%">10月</b-th>
+          <b-th style="width: 5%">11月</b-th>
+          <b-th style="width: 5%">12月</b-th>
+          <b-th style="width: 5%">1月</b-th>
+          <b-th style="width: 5%">2月</b-th>
+          <b-th style="width: 5%">3月</b-th>
+          <b-th style="width: 5%">合計</b-th>
         </b-tr>
       </b-thead>
       <b-tbody>
         <b-tr v-for="outgoing in outgoingList">
           <b-td>{{ outgoing.category_id }}</b-td>
           <b-td>{{ outgoing.category_name }}</b-td>
-          <b-td>{{ outgoing.price[0] }}</b-td>
-          <b-td>{{ outgoing.price[1] }}</b-td>
-          <b-td>{{ outgoing.price[2] }}</b-td>
-          <b-td>{{ outgoing.price[3] }}</b-td>
-          <b-td>{{ outgoing.price[4] }}</b-td>
-          <b-td>{{ outgoing.price[5] }}</b-td>
-          <b-td>{{ outgoing.price[6] }}</b-td>
-          <b-td>{{ outgoing.price[7] }}</b-td>
-          <b-td>{{ outgoing.price[8] }}</b-td>
-          <b-td>{{ outgoing.price[9] }}</b-td>
-          <b-td>{{ outgoing.price[10] }}</b-td>
-          <b-td>{{ outgoing.price[11] }}</b-td>
-          <b-td>{{ outgoing.total }}</b-td>
+          <b-td><b-div float="end">{{ outgoing.price[0] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoing.price[1] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoing.price[2] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoing.price[3] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoing.price[4] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoing.price[5] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoing.price[6] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoing.price[7] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoing.price[8] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoing.price[9] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoing.price[10] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoing.price[11] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoing.total }}</b-div></b-td>
         </b-tr>
-        <b-tr v-if="fetched">
+        <b-tr v-if="fetched" theme="danger">
           <b-td>{{ outgoingSumList.category_id }}</b-td>
           <b-td>{{ outgoingSumList.category_name }}</b-td>
-          <b-td>{{ outgoingSumList.price[0] }}</b-td>
-          <b-td>{{ outgoingSumList.price[1] }}</b-td>
-          <b-td>{{ outgoingSumList.price[2] }}</b-td>
-          <b-td>{{ outgoingSumList.price[3] }}</b-td>
-          <b-td>{{ outgoingSumList.price[4] }}</b-td>
-          <b-td>{{ outgoingSumList.price[5] }}</b-td>
-          <b-td>{{ outgoingSumList.price[6] }}</b-td>
-          <b-td>{{ outgoingSumList.price[7] }}</b-td>
-          <b-td>{{ outgoingSumList.price[8] }}</b-td>
-          <b-td>{{ outgoingSumList.price[9] }}</b-td>
-          <b-td>{{ outgoingSumList.price[10] }}</b-td>
-          <b-td>{{ outgoingSumList.price[11] }}</b-td>
-          <b-td>{{ outgoingSumList.total }}</b-td>
+          <b-td><b-div float="end">{{ outgoingSumList.price[0] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoingSumList.price[1] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoingSumList.price[2] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoingSumList.price[3] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoingSumList.price[4] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoingSumList.price[5] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoingSumList.price[6] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoingSumList.price[7] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoingSumList.price[8] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoingSumList.price[9] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoingSumList.price[10] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoingSumList.price[11] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ outgoingSumList.total }}</b-div></b-td>
         </b-tr>
       </b-tbody>
     </b-table>
 
-    <h2>投資</h2>
-    <b-table class="invest_table">
+    <b-table small bordered striped class="invest_table">
       <b-thead>
         <b-tr>
-          <b-th>ID</b-th>
-          <b-th>カテゴリ名</b-th>
-          <b-th>4月</b-th>
-          <b-th>5月</b-th>
-          <b-th>6月</b-th>
-          <b-th>7月</b-th>
-          <b-th>8月</b-th>
-          <b-th>9月</b-th>
-          <b-th>10月</b-th>
-          <b-th>11月</b-th>
-          <b-th>12月</b-th>
-          <b-th>1月</b-th>
-          <b-th>2月</b-th>
-          <b-th>3月</b-th>
-          <b-th>合計</b-th>
+          <b-th style="width: 5%">ID</b-th>
+          <b-th style="width: 10%">カテゴリ名</b-th>
+          <b-th style="width: 5%">4月</b-th>
+          <b-th style="width: 5%">5月</b-th>
+          <b-th style="width: 5%">6月</b-th>
+          <b-th style="width: 5%">7月</b-th>
+          <b-th style="width: 5%">8月</b-th>
+          <b-th style="width: 5%">9月</b-th>
+          <b-th style="width: 5%">10月</b-th>
+          <b-th style="width: 5%">11月</b-th>
+          <b-th style="width: 5%">12月</b-th>
+          <b-th style="width: 5%">1月</b-th>
+          <b-th style="width: 5%">2月</b-th>
+          <b-th style="width: 5%">3月</b-th>
+          <b-th style="width: 5%">合計</b-th>
         </b-tr>
       </b-thead>
       <b-tbody>
         <b-tr v-for="invest in investList">
           <b-td>{{ invest.category_id }}</b-td>
           <b-td>{{ invest.category_name }}</b-td>
-          <b-td>{{ invest.price[0] }}</b-td>
-          <b-td>{{ invest.price[1] }}</b-td>
-          <b-td>{{ invest.price[2] }}</b-td>
-          <b-td>{{ invest.price[3] }}</b-td>
-          <b-td>{{ invest.price[4] }}</b-td>
-          <b-td>{{ invest.price[5] }}</b-td>
-          <b-td>{{ invest.price[6] }}</b-td>
-          <b-td>{{ invest.price[7] }}</b-td>
-          <b-td>{{ invest.price[8] }}</b-td>
-          <b-td>{{ invest.price[9] }}</b-td>
-          <b-td>{{ invest.price[10] }}</b-td>
-          <b-td>{{ invest.price[11] }}</b-td>
-          <b-td>{{ invest.total }}</b-td>
+          <b-td><b-div float="end">{{ invest.price[0] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ invest.price[1] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ invest.price[2] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ invest.price[3] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ invest.price[4] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ invest.price[5] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ invest.price[6] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ invest.price[7] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ invest.price[8] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ invest.price[9] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ invest.price[10] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ invest.price[11] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ invest.total }}</b-div></b-td>
         </b-tr>
-        <b-tr v-if="fetched">
+        <b-tr v-if="fetched" theme="warning">
           <b-td>{{ investSumList.category_id }}</b-td>
           <b-td>{{ investSumList.category_name }}</b-td>
-          <b-td>{{ investSumList.price[0] }}</b-td>
-          <b-td>{{ investSumList.price[1] }}</b-td>
-          <b-td>{{ investSumList.price[2] }}</b-td>
-          <b-td>{{ investSumList.price[3] }}</b-td>
-          <b-td>{{ investSumList.price[4] }}</b-td>
-          <b-td>{{ investSumList.price[5] }}</b-td>
-          <b-td>{{ investSumList.price[6] }}</b-td>
-          <b-td>{{ investSumList.price[7] }}</b-td>
-          <b-td>{{ investSumList.price[8] }}</b-td>
-          <b-td>{{ investSumList.price[9] }}</b-td>
-          <b-td>{{ investSumList.price[10] }}</b-td>
-          <b-td>{{ investSumList.price[11] }}</b-td>
-          <b-td>{{ investSumList.total }}</b-td>
+          <b-td><b-div float="end">{{ investSumList.price[0] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ investSumList.price[1] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ investSumList.price[2] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ investSumList.price[3] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ investSumList.price[4] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ investSumList.price[5] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ investSumList.price[6] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ investSumList.price[7] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ investSumList.price[8] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ investSumList.price[9] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ investSumList.price[10] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ investSumList.price[11] }}</b-div></b-td>
+          <b-td><b-div float="end">{{ investSumList.total }}</b-div></b-td>
         </b-tr>
       </b-tbody>
     </b-table>
+
   </container>
 </template>