update 样式优化

Sanm-ZH · Jan 19, 2021 · 55fc673 · 55fc673
1 parent e2fa22c
commit 55fc673
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git 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
@@ -70,6 +70,8 @@ export default defineComponent({
   background-color: #ffffff;
   font-size: 14px;
   -webkit-font-smoothing: antialiased;
+  position: sticky;
+  bottom: 0;
 }
 .left,
 .tabs {
@@ -111,24 +113,28 @@ 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;
     }
   }
 }
 @media (max-width: 28.125rem) {
   .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
@@ -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;
   }