no message

chenxuan1/src/pages/dist/style.css

@@ -0,0 +1,44 @@
+.mainContainer p {
+  margin: 0;
+  padding: 0;
+}
+.mainContainer li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.mainContainer .nav {
+  box-sizing: border-box;
+  float: left;
+  width: 200px;
+  height: 100vh;
+  padding: 12px;
+  border-right: 1px solid #eee;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.mainContainer .nav a {
+  text-decoration: none;
+  display: inline-block;
+  height: 40px;
+  line-height: 40px;
+}
+.mainContainer .nav .active {
+  color: red;
+  font-weight: bold;
+}
+.mainContainer .content {
+  margin-left: 210px;
+}
+.mainContainer .content .head {
+  box-sizing: border-box;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #eee;
+}
+.mainContainer .content .head button {
+  margin-right: 12px;
+}

chenxuan1/src/pages/style.css

@@ -1,6 +1,11 @@
-.mainContainer * {
-  padding: 0;
+.mainContainer p {
   margin: 0;
+  padding: 0;
+}
+
+.mainContainer li {
+  margin: 0;
+  padding: 0;
   list-style: none;
 }
 

chenxuan1/src/pages/style.min.css

@@ -1 +1 @@
-.mainContainer *{padding:0;margin:0;list-style:none}.mainContainer .nav{box-sizing:border-box;float:left;width:200px;height:100vh;padding:12px;border-right:1px solid #eee;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;overflow-y:auto;overflow-x:hidden}.mainContainer .nav a{text-decoration:none;display:inline-block;height:40px;line-height:40px}.mainContainer .nav .active{color:red;font-weight:bold}.mainContainer .content{margin-left:210px}.mainContainer .content .head{box-sizing:border-box;padding-bottom:12px;border-bottom:1px solid #eee}.mainContainer .content .head button{margin-right:12px}
+.mainContainer p{margin:0;padding:0}.mainContainer li{margin:0;padding:0;list-style:none}.mainContainer .nav{box-sizing:border-box;float:left;width:200px;height:100vh;padding:12px;border-right:1px solid #eee;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;overflow-y:auto;overflow-x:hidden}.mainContainer .nav a{text-decoration:none;display:inline-block;height:40px;line-height:40px}.mainContainer .nav .active{color:red;font-weight:bold}.mainContainer .content{margin-left:210px}.mainContainer .content .head{box-sizing:border-box;padding-bottom:12px;border-bottom:1px solid #eee}.mainContainer .content .head button{margin-right:12px}

chenxuan1/src/pages/style.scss

@@ -1,7 +1,11 @@
 .mainContainer{
-    *{
-        padding: 0;
+    p{
         margin: 0;
+        padding: 0;
+    }
+    li{
+        margin: 0;
+        padding: 0;
         list-style: none;
     }
     .nav{

chenxuan1/src/pages/todo/Footer/index.jsx

@@ -1,9 +1,19 @@
 import React from "react";
 class Footer extends React.Component {
+    handleCheckAll=()=>{
+
+    }
+    handleClearAllDone=()=>{
+
+    }
     render(){
+        const {todos}=this.props
         return (
-            <div>
-                <h1>Footer</h1>
+            <div className="todo-footer">
+                <label>
+                    <input type="checkbox" onChange={this.handleCheckAll} checked={true}  />
+                </label>
+                <button className="btn-clear" onClick={this.handleClearAllDone}>清除已完成任务</button>
             </div>
         )
     }

chenxuan1/src/pages/todo/dist/style.css

@@ -0,0 +1,29 @@
+.todo {
+  box-sizing: border-box;
+  width: 660px;
+  padding: 12px;
+  border: 1px solid #eee;
+  margin: 100px auto 0;
+}
+
+.todo-footer {
+  height: 40px;
+  line-height: 40px;
+  padding-left: 6px;
+  margin-top: 5px;
+}
+.todo-footer label {
+  display: inline-block;
+  margin-right: 20px;
+  cursor: pointer;
+}
+.todo-footer label input {
+  position: relative;
+  top: -1px;
+  vertical-align: middle;
+  margin-right: 5px;
+}
+.todo-footer button {
+  float: right;
+  margin-top: 5px;
+}

chenxuan1/src/pages/todo/index.jsx

@@ -7,7 +7,7 @@ import "./style.scss";
 class App extends React.Component {
   render() {
     return (
-      <div>
+      <div className="todo">
         <Headers></Headers>
         <List>
           <Item></Item>

chenxuan1/src/pages/todo/style.css

@@ -0,0 +1,32 @@
+.todo {
+  box-sizing: border-box;
+  width: 660px;
+  padding: 12px;
+  border: 1px solid #eee;
+  margin: 100px auto 0;
+}
+
+.todo-footer {
+  height: 40px;
+  line-height: 40px;
+  padding-left: 6px;
+  margin-top: 5px;
+}
+
+.todo-footer label {
+  display: inline-block;
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+.todo-footer label input {
+  position: relative;
+  top: -1px;
+  vertical-align: middle;
+  margin-right: 5px;
+}
+
+.todo-footer button {
+  float: right;
+  margin-top: 5px;
+}

chenxuan1/src/pages/todo/style.min.css

@@ -0,0 +1 @@
+.todo{box-sizing:border-box;width:660px;padding:12px;border:1px solid #eee;margin:100px auto 0}.todo-footer{height:40px;line-height:40px;padding-left:6px;margin-top:5px}.todo-footer label{display:inline-block;margin-right:20px;cursor:pointer}.todo-footer label input{position:relative;top:-1px;vertical-align:middle;margin-right:5px}.todo-footer button{float:right;margin-top:5px}

chenxuan1/src/pages/todo/style.scss

@@ -0,0 +1,30 @@
+
+.todo{
+    box-sizing: border-box;
+    width: 660px;
+    padding: 12px;
+    border: 1px solid #eee;
+    margin: 100px auto 0;
+}
+.todo-footer {
+    height: 40px;
+    line-height: 40px;
+    padding-left: 6px;
+    margin-top: 5px;
+    label{
+        display: inline-block;
+        margin-right: 20px;
+        cursor: pointer;
+        input{
+            position: relative;
+            top: -1px;
+            vertical-align: middle;
+            margin-right: 5px;
+        }
+    }
+    button{
+        float: right;
+        margin-top: 5px;
+    }
+}
+