todolist学习临时代码2-完成样式代码的编写

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>

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>

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>

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>

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>