From 55fc6738780afe9547d372a0fd548340b8ddfcdf Mon Sep 17 00:00:00 2001
From: Sanm-ZH <zhxpvip7@gmail.com>
Date: Tue, 19 Jan 2021 10:54:26 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/todoList/item.vue | 18 +++++++++++-------
 src/views/todoList/tab.vue  | 15 +++++++++++----
 src/views/todoList/todo.vue |  3 ++-
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/views/todoList/item.vue b/src/views/todoList/item.vue
index 9ac7f2e..f3a5934 100644
--- a/src/views/todoList/item.vue
+++ b/src/views/todoList/item.vue
@@ -3,7 +3,7 @@
     <input
       type="checkbox"
       class="toggle"
-      :value="todo.completed"
+      :value="+todo.completed"
       :checked="todo.completed"
       @click="optCompletedClick"
     />
@@ -54,9 +54,8 @@ export default defineComponent({
   font-size: 24px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
   &:hover {
-    .destroy:after {
-      content: "x";
-      font-size: 20px;
+    .destroy::before {
+      opacity: 1;
     }
   }
 
@@ -120,11 +119,16 @@ export default defineComponent({
   border-width: 0;
   cursor: pointer;
   outline: none;
-}
-.notPc {
-  .destroy:after {
+  &::before {
     content: "x";
     font-size: 20px;
+    opacity: 0;
+    transition: opacity 1s;
+  }
+}
+.notPc {
+  .destroy::before {
+    opacity: 1;
   }
 }
 </style>
diff --git a/src/views/todoList/tab.vue b/src/views/todoList/tab.vue
index aba841f..36c5d1a 100644
--- a/src/views/todoList/tab.vue
+++ b/src/views/todoList/tab.vue
@@ -70,6 +70,8 @@ export default defineComponent({
   background-color: #ffffff;
   font-size: 14px;
   -webkit-font-smoothing: antialiased;
+  position: sticky;
+  bottom: 0;
 }
 .left,
 .tabs {
@@ -111,16 +113,19 @@ export default defineComponent({
   width: 200px;
   display: flex;
   justify-content: space-around;
+  & > span {
+    font-weight: bold;
+  }
   * {
     display: inline-block;
     padding: 0px 10px;
     cursor: pointer;
-    border: 1px solid rgba(175, 47, 47, 0);
     &.actived {
-      background: #42b983;
+      background-color: #42b983;
       border-radius: 3px;
       color: #fff;
       font-weight: bold;
+      transition: background-color 0.5s;
     }
   }
 }
@@ -128,7 +133,8 @@ export default defineComponent({
   .helper {
     flex-direction: row;
     flex-wrap: wrap;
-    position: relative;
+    position: sticky;
+    bottom: 0;
   }
   .left {
     width: 6.25rem;
@@ -146,7 +152,8 @@ export default defineComponent({
   .helper {
     flex-direction: row;
     flex-wrap: wrap;
-    position: relative;
+    position: sticky;
+    bottom: 0;
   }
   .left {
     padding: 0;
diff --git a/src/views/todoList/todo.vue b/src/views/todoList/todo.vue
index 38a8bde..d62ca0c 100644
--- a/src/views/todoList/todo.vue
+++ b/src/views/todoList/todo.vue
@@ -134,7 +134,6 @@ export default defineComponent({
   }
 }
 .add-input {
-  position: relative;
   margin: 0px;
   width: 100%;
   font-size: 24px;
@@ -154,6 +153,8 @@ export default defineComponent({
   z-index: 1000;
   display: flex;
   text-align: center;
+  position: sticky;
+  top: 0;
   @media (max-width: 18.75rem) {
     font-size: 1rem;
   }