style:apart_css

todos/src/App.vue

@@ -67,16 +67,3 @@ export default {
   <TodoList :todos="todoList" @delTodo="delTodo" />
   <TodoFooter :count="todoList.length" :tabType="tabType" @changeTabType="changeTabType" />
 </template>
-
-<style>
-#app {
-  width: 100%;
-  max-width: 600px;
-  margin: 20px auto;
-  padding: 15px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
-  border-radius: 10px;
-  background: white;
-  box-sizing: border-box;
-}
-</style>

todos/src/assets/global.css

@@ -0,0 +1,19 @@
+/* src/assets/global.css */
+
+#app {
+  width: 100%;
+  max-width: 600px;
+  margin: 20px auto;
+  padding: 15px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.08);
+  border-radius: 10px;
+  background: white;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background: #f4f6fa;
+}

todos/src/components/TodoList.vue

@@ -75,21 +75,7 @@
 .tdItem-acts a:hover {
   text-decoration: underline;
 }
-</style>
 
-<script>
-export default {
-  props: ["todos"],
-
-  methods: {
-    delTodo(item) {
-      this.$emit("delTodo", item)
-    }
-  }
-}
-</script>
-
-<style>
 .tdList {
   list-style: none;
   padding: 0;
@@ -106,3 +92,15 @@ export default {
   color: gray;
 }
 </style>
+
+<script>
+export default {
+  props: ["todos"],
+
+  methods: {
+    delTodo(item) {
+      this.$emit("delTodo", item)
+    }
+  }
+}
+</script>

todos/src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import './assets/global.css'
 
 createApp(App).mount('#app')