From 7651eb4e6b5420e6febcd0f5d3b2ed5336d7bb80 Mon Sep 17 00:00:00 2001
From: roger <roger_sun@outlook.com>
Date: Thu, 19 Jan 2023 15:57:28 +0800
Subject: [PATCH] =?UTF-8?q?todolist=E5=AD=A6=E4=B9=A0=E4=B8=B4=E6=97=B6?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=812-=E5=AE=8C=E6=88=90=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=9A=84=E7=BC=96=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 20_脚手架/vue_code/src/App.vue             | 52 +++++++++++++++++--
 .../vue_code/src/components/TodoBottom.vue    | 31 ++++++++++-
 .../vue_code/src/components/TodoHeader.vue    | 15 +++++-
 .../vue_code/src/components/TodoItem.vue      | 46 +++++++++++++++-
 .../vue_code/src/components/TodoList.vue      | 19 ++++++-
 5 files changed, 153 insertions(+), 10 deletions(-)

diff --git a/20_脚手架/vue_code/src/App.vue b/20_脚手架/vue_code/src/App.vue
index 98f541a..d72f08e 100644
--- a/20_脚手架/vue_code/src/App.vue
+++ b/20_脚手架/vue_code/src/App.vue
@@ -1,8 +1,12 @@
 <template>
-  <div>
-    <TodoHeader/>
-    <TodoList/>
-    <TodoBottom/>
+  <div id="root">
+    <div class="todo-container">
+      <div class="todo-wrap">
+        <TodoHeader/>
+        <TodoList/>
+        <TodoBottom/>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -23,5 +27,45 @@ export default {
 </script>
 
 <style>
+body {
+  background: #fff;
+}
+
+.btn {
+  display: inline-block;
+  padding: 4px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
 
+.btn-danger {
+  color: #fff;
+  background-color: #da4f49;
+  border: 1px solid #bd362f;
+}
+
+.btn-danger:hover {
+  color: #fff;
+  background-color: #bd362f;
+}
+
+.btn:focus {
+  outline: none;
+}
+
+.todo-container{
+  width: 600px;
+  margin: 0 auto;
+}
+.todo-container .todo-wrap {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
 </style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/TodoBottom.vue b/20_脚手架/vue_code/src/components/TodoBottom.vue
index 9e24546..5e56a19 100644
--- a/20_脚手架/vue_code/src/components/TodoBottom.vue
+++ b/20_脚手架/vue_code/src/components/TodoBottom.vue
@@ -1,5 +1,13 @@
 <template>
-
+  <div class="todo-bottom">
+    <label>
+      <input type="checkbox">
+    </label>
+    <span>
+      <span>已完成0</span>/全部2
+    </span>
+    <button class="btn btn-danger">清除已完成任务</button>
+  </div>
 </template>
 
 <script>
@@ -9,5 +17,26 @@ export default {
 </script>
 
 <style scoped>
+  .todo-bottom{
+    height: 40px;
+    line-height: 40px;
+    padding-left: 6px;
+    margin-top: 5px;
+  }
 
+  .todo-bottom label{
+    display: inline-block;
+    margin-right: 20px;
+    cursor: pointer;
+  }
+  .todo-bottom label input {
+    position: relative;
+    top: -1px;
+    vertical-align: middle;
+    margin-right: 5px;
+  }
+  .todo-bottom button {
+    float: right;
+    margin-top: 5px;
+  }
 </style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/TodoHeader.vue b/20_脚手架/vue_code/src/components/TodoHeader.vue
index 1bd885d..acfc63a 100644
--- a/20_脚手架/vue_code/src/components/TodoHeader.vue
+++ b/20_脚手架/vue_code/src/components/TodoHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="todo-header">
     <input type="text" placeholder="请输入你的任务名称，按回车确认">
   </div>
 </template>
@@ -11,5 +11,18 @@ export default {
 </script>
 
 <style scoped>
+.todo-header input {
+  width: 560px;
+  height: 28px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 4px 7px;
+}
 
+.todo-header input:focus {
+  outline: none;
+  border-color: rgba(82, 168, 236, 0.8);
+  box-shadow: inset 0 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+}
 </style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/TodoItem.vue b/20_脚手架/vue_code/src/components/TodoItem.vue
index c370e4e..d5ea487 100644
--- a/20_脚手架/vue_code/src/components/TodoItem.vue
+++ b/20_脚手架/vue_code/src/components/TodoItem.vue
@@ -1,7 +1,10 @@
 <template>
   <li>
-    <input type="checkbox" class="TodoItem" >
-    <span>xxxxxxx</span>
+    <label>
+      <input type="checkbox" class="TodoItem">
+      <span>xxxxxxx</span>
+    </label>
+    <button class="btn btn-danger">删除</button>
   </li>
 </template>
 
@@ -21,5 +24,44 @@ export default {
 </script>
 
 <style scoped>
+li {
+  list-style: none;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 5px;
+  border-bottom: 1px solid #ddd;
+}
+
+li label {
+  float: left;
+  cursor: pointer;
+}
+
+li label input {
+  vertical-align: middle;
+  margin-right: 6px;
+  position: relative;
+  top: -1px;
+}
+
+li button {
+  float: right;
+  display: none;
+  margin-top: 3px;
+}
 
+li:before {
+  content: initial;
+}
+
+li:last-child {
+  border-bottom: none;
+}
+li:hover{
+  background-color: #ddd;
+}
+
+li:hover button{
+  display: block;
+}
 </style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/TodoList.vue b/20_脚手架/vue_code/src/components/TodoList.vue
index d441d49..cbf42ba 100644
--- a/20_脚手架/vue_code/src/components/TodoList.vue
+++ b/20_脚手架/vue_code/src/components/TodoList.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <ul>
+    <ul class="todo-list">
+      <TodoItem/>
+      <TodoItem/>
       <TodoItem/>
       <TodoItem/>
     </ul>
@@ -16,5 +18,18 @@ export default {
 </script>
 
 <style scoped>
-
+.todo-list {
+  margin-left: 0px;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  padding: 0px;
+}
+.todo-empty {
+  height: 40px;
+  line-height: 40px;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  padding-left: 5px;
+  margin-top: 10px;
+}
 </style>
\ No newline at end of file