style(all pages): [A] add bootstrap css as global base css

[A] add bootstrap css as global base css

Signed-off-by: Ching <loooching@gmail.com>

frontend/package.json

@@ -12,6 +12,7 @@
   "main": "babel.config.js",
   "dependencies": {
     "axios": "^0.21.2",
+    "bootstrap": "^5.1.1",
     "core-js": "^3.6.5",
     "element-plus": "^1.0.2-beta.28",
     "vue": "^3.2.2",

frontend/src/components/week_recipe.vue

@@ -9,7 +9,7 @@
         ></el-table-column>
         <el-table-column prop="meat" label="肉">
           <template #default="scope">
-            <ul>
+            <ul id="meal">
               <li v-for="recipe in scope.row.meat" :key="recipe.name">
                 <a :href="'/recipe/' + recipe.id">
                   {{ recipe.name }}
@@ -20,7 +20,7 @@
         </el-table-column>
         <el-table-column prop="vegetable" label="菜">
           <template #default="scope">
-            <ul>
+            <ul id="meal">
               <li v-for="recipe in scope.row.vegetable" :key="recipe.name">
                 <a :href="'/recipe/' + recipe.id">
                   {{ recipe.name }}
@@ -31,7 +31,7 @@
         >
         <el-table-column prop="soup" label="汤">
           <template #default="scope">
-            <ul>
+            <ul id="meal">
               <li v-for="recipe in scope.row.soup" :key="recipe.name">
                 <a :href="'/recipe/' + recipe.id">
                   {{ recipe.name }}
@@ -108,4 +108,12 @@ export default {
   margin: 20px 0;
   width: 100%;
 }
+ul#meal {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+ul#meal li {
+  margin: 0 10px;
+}
 </style>

frontend/src/main.js

@@ -1,8 +1,9 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import 'bootstrap/dist/css/bootstrap.min.css'
 import installElementPlus from './plugins/element'
 import ElementPlus from 'element-plus'
-import 'element-plus/lib/theme-chalk/index.css'
+// import 'element-plus/lib/theme-chalk/index.css'
 import router from './router'
 
 const app = createApp(App)

frontend/src/views/home.vue

@@ -28,7 +28,6 @@
 <script>
 import input_recipe from '@/components/input_recipe.vue';
 import recipe_list from '@/components/recipe_list.vue';
-import 'element-plus/dist/index.css';
 
 export default {
   name: 'Home',

frontend/src/views/recipeDetail.vue

@@ -59,8 +59,6 @@ export default {
 </script>
 
 <style>
-@import url('//unpkg.com/element-plus/dist/index.css');
-
 .content {
   padding: 20px 10px;
 }