From 2a160aaabcdd877ac03dcbfa561223f8a3be30c3 Mon Sep 17 00:00:00 2001
From: Kane <wangkane@qq.com>
Date: Sat, 22 Oct 2022 01:35:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E8=BF=9B=E5=BA=A6=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/web/car_dealer/css/todo-list/to-list.css | 108 +++++---
 code/web/car_dealer/vue/todo-lilst.html       | 236 +++++++++++++-----
 2 files changed, 239 insertions(+), 105 deletions(-)

diff --git a/code/web/car_dealer/css/todo-list/to-list.css b/code/web/car_dealer/css/todo-list/to-list.css
index bca273a..93fc4c7 100644
--- a/code/web/car_dealer/css/todo-list/to-list.css
+++ b/code/web/car_dealer/css/todo-list/to-list.css
@@ -2,47 +2,55 @@
  * @Author: Kane
  * @Date: 2022-10-21 16:39:27
  * @LastEditors: Kane
- * @LastEditTime: 2022-10-21 18:56:19
+ * @LastEditTime: 2022-10-22 01:23:49
  * @FilePath: \car_dealer\css\todo-list\to-list.css
  * @Description: 用于待办事项页面的css！
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
  */
 
- html {
+html {
     --border-color: #cfcfcf;
+    --hr-color: #efefef;
     --backupground-color: #f7f7f7;
     --btn-color-blue: #307dbe;
     --btn-color-yellow: #f7b24d;
     --btn-color-green: #5bad60;
     --btn-color-red: #e56651;
     --btn-font-color: #fff;
- }
 
- .border {
+    --light-shadow: #cfcfcf;
+    --dark-shadow: #afafaf;
+}
+
+.border {
     border: 2px solid var(--border-color);
     border-radius: 5px;
     width: 30rem;
     padding: 1em;
- }
+    box-shadow: 0px 0px 10px var(--light-shadow);
+}
 
- .border > .add_todo {
+.border:hover {
+    box-shadow: 0px 0px 10px var(--dark-shadow);
+    transition: box-shadow 1;
+}
+
+.border > .add_todo {
     display: flex;
     align-items: center;
     justify-content: center;
- }
-
- .border > .add_todo > button {
+}
 
+.border > .add_todo > button {
     margin-left: 5px;
     flex-basis: 4rem;
     flex-grow: 0;
     font-size: 1rem;
     height: 2.3rem;
-    
- }
+}
 
- .border > .add_todo > input {
+.border > .add_todo > input {
     flex-shrink: auto;
     flex-grow: 1;
     font-size: 1rem;
@@ -50,59 +58,87 @@
     padding: 0 5px;
     margin: 0px;
     outline-color: var(--border-color);
- }
+}
 
- hr {
+hr {
     border: none;
-    margin-top: 15px;
+    margin-top: 1rem;
     background-color: var(--border-color);
     height: 2px;
- }
+}
 
- .border > .todo_list {
-    margin-top: 15px;
- }
+.border > .todo_list {
+    margin-top: 1rem;
+    height: 12.2rem;
+    overflow-y: auto;
+}
 
- .border > .todo_list > *+* {
-    margin-top:5px;
- }
+.todo_list::-webkit-scrollbar {
+    width: 10px;
+    height: 100px;
+}
 
- .border > .todo_list div {
+.todo_list::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #535353;
+}
+
+.todo_list::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 5px var(--backupground-color);
+    border-radius: 10px;
+    background: #ededed;
+}
+
+.border > .todo_list > * + * {
+    margin-top: 5px;
+}
+
+.border > .todo_list div {
     display: flex;
     align-items: center;
     justify-content: center;
- }
+}
 
- .border > .todo_list div > input[type=checkbox] {
+.border > .todo_list div > input[type="checkbox"] {
     flex-grow: 0;
- }
+}
 
- .border > .todo_list div *+* {
+.border > .todo_list div * + * {
     margin-left: 5px;
- }
+}
 
- .border > .todo_list span {
+.border > .todo_list span {
     flex-grow: 1;
     border-bottom: 1px solid var(--border-color);
     height: 1.25rem;
     vertical-align: center;
- }
+}
 
- .border > .todo_list input {
+.border > .todo_list input {
     flex-grow: 1;
     font-size: 1rem;
     line-height: 2rem;
     padding: 0 5px;
     margin: 0px;
     outline-color: var(--border-color);
- }
+}
 
- .border > .todo_list button {
+.border > .todo_list button {
     flex-grow: 0;
     font-size: 1rem;
     width: 4rem;
- }
+}
 
- .border > .todo_list input {
+.border > .todo_list input {
     outline: 1px solid var(--border-color);
- }
\ No newline at end of file
+}
+
+.border > .tools {
+    margin-top: 1rem;
+}
+
+.border > .tools > p {
+    text-align: right;
+    margin: 0px 1rem;
+}
diff --git a/code/web/car_dealer/vue/todo-lilst.html b/code/web/car_dealer/vue/todo-lilst.html
index 2a2bfb9..96781f6 100644
--- a/code/web/car_dealer/vue/todo-lilst.html
+++ b/code/web/car_dealer/vue/todo-lilst.html
@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-10-21 16:36:51
  * @LastEditors: Kane
- * @LastEditTime: 2022-10-21 19:02:01
+ * @LastEditTime: 2022-10-22 00:45:07
  * @FilePath: \car_dealer\vue\todo-lilst.html
  * @Description: 
  * 
@@ -10,79 +10,177 @@
 -->
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>待办任务</title>
-        <link rel="stylesheet" href="../css/root.css" />
-        <link rel="stylesheet" href="../css/normalize.css" />
-        <link rel="stylesheet" href="../css/kane.css" />
-        <link rel="stylesheet" href="../css/todo-list/to-list.css" />
-        <script src="../js/vue/vue.global.js"></script>
-    </head>
-    <body>
-        <div id="app">
-            <div class="content">
-                <h1>{{title}}</h1>
-                <div class="border">
-                    <div class="add_todo">
-                        <input type="text" placeholder="请输入待办事项" />
-                        <button type="button">添加</button>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>待办任务</title>
+    <link rel="stylesheet" href="../css/root.css" />
+    <link rel="stylesheet" href="../css/normalize.css" />
+    <link rel="stylesheet" href="../css/kane.css" />
+    <link rel="stylesheet" href="../css/todo-list/to-list.css" />
+    <script src="../js/vue/vue.global.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <div class="content">
+            <h1>{{title}}</h1>
+            <div class="border">
+                <div class="add_todo">
+                    <input type="text" placeholder="请输入待办事项" />
+                    <button type="button">添加</button>
+                </div>
+                <hr>
+                <div class="todo_list">
+                    <div v-for="(item,index) in todo_list" :key="index">
+                        <input type="checkbox" v-model="todo_list[index].selected" />
+                        <span v-show="!item.edit">{{item.todo_text}}</span>
+                        <input type="text" v-show="item.edit" v-model="item.todo_text" />
+                        <button type="button" v-on:click="editTodo(index,event)">
+                            修改
+                        </button>
+                        <button type="button" @click="removeTodo(index)">删除</button>
                     </div>
-                    <hr />
-                    <div class="todo_list">
-                        <div v-for="(item,index) in todo_list" :key="index">
-                            <input
-                                type="checkbox"
-                                v-model="todo_list[index].selected"
-                            />
-                            <span v-show="!item.edit">{{item.todo_text}}</span>
-                            <input
-                                type="text"
-                                v-show="item.edit"
-                                v-model="item.todo_text"
-                            />
-                            <button type="button" v-on:click="editTodo(index)">
-                                修改
-                            </button>
-                            <button type="button">删除</button>
-                        </div>
-                    </div>
-                    <div class="tools"></div>
+                </div>
+                <hr>
+                <div class="tools">
+                    <p class="summary">总计：{{todo_list.length}}</p>
                 </div>
             </div>
         </div>
-    </body>
-    <script>
-        const app = {
-            data() {
-                return {
-                    title: "待办任务",
-                    todo_list: [
-                        { selected: false, todo_text: "回家", edit: false },
-                        { selected: true, todo_text: "吃饭", edit: false },
-                        { selected: false, todo_text: "洗澡", edit: false },
-                        { selected: false, todo_text: "玩游戏", edit: false },
-                    ],
-                };
-            },
-            methods: {
-                addTodo() {},
-                editTodo(index) {
-                    console.log(index);
+    </div>
+</body>
+<script>
+    const app = {
+        data() {
+            return {
+                title: "待办任务",
+                todo_list: [{
+                        selected: false,
+                        todo_text: "回家",
+                        edit: false
+                    },
+                    {
+                        selected: true,
+                        todo_text: "吃饭",
+                        edit: false
+                    },
+                    {
+                        selected: false,
+                        todo_text: "洗澡",
+                        edit: false
+                    },
+                    {
+                        selected: false,
+                        todo_text: "玩游戏",
+                        edit: false
+                    },
+                    {
+                        selected: false,
+                        todo_text: "回家",
+                        edit: false
+                    },
+                    {
+                        selected: true,
+                        todo_text: "吃饭",
+                        edit: false
+                    },
+                    {
+                        selected: false,
+                        todo_text: "洗澡",
+                        edit: false
+                    },
+                    {
+                        selected: false,
+                        todo_text: "玩游戏",
+                        edit: false
+                    },
+                    {
+                        selected: false,
+                        todo_text: "回家",
+                        edit: false
+                    },
+                    {
+                        selected: true,
+                        todo_text: "吃饭",
+                        edit: false
+                    },
+                    {
+                        selected: false,
+                        todo_text: "洗澡",
+                        edit: false
+                    },
+                    {
+                        selected: false,
+                        todo_text: "玩游戏",
+                        edit: false
+                    },
+                    {
+                        selected: false,
+                        todo_text: "回家",
+                        edit: false
+                    },
+                    {
+                        selected: true,
+                        todo_text: "吃饭",
+                        edit: false
+                    },
+                    {
+                        selected: false,
+                        todo_text: "洗澡",
+                        edit: false
+                    },
+                    {
+                        selected: false,
+                        todo_text: "玩游戏",
+                        edit: false
+                    },
+                    {
+                        selected: false,
+                        todo_text: "回家",
+                        edit: false
+                    },
+                    {
+                        selected: true,
+                        todo_text: "吃饭",
+                        edit: false
+                    },
+                    {
+                        selected: false,
+                        todo_text: "洗澡",
+                        edit: false
+                    },
+                    {
+                        selected: false,
+                        todo_text: "玩游戏",
+                        edit: false
+                    },
+                ],
+            };
+        },
+        methods: {
+            addTodo() {},
+            editTodo(index, event) {
+                console.log(index);
+                console.log(event);
 
-                    this.todo_list[index].edit = !this.todo_list[index].edit;
-                },
+                this.todo_list[index].edit = !this.todo_list[index].edit;
             },
-            computed: {
-                buttonText(edit) {
-                    return edit ? 修改 : 保存;
-                },
+            removeTodo(index) {
+                this.todo_list.splice(index, 1);
+            }
+        },
+        computed: {
+            buttonText(edit) {
+                return edit ? 修改 : 保存;
             },
-        };
+        },
+    };
 
-        const vm = Vue.createApp(app);
-        vm.mount("#app");
-    </script>
-</html>
+    const vm = Vue.createApp(app);
+    vm.mount("#app");
+</script>
+
+</html>
\ No newline at end of file