diff --git a/code/web/car_dealer/css/kane.css b/code/web/car_dealer/css/kane.css index a47ee33..5acdea6 100644 --- a/code/web/car_dealer/css/kane.css +++ b/code/web/car_dealer/css/kane.css @@ -2,7 +2,7 @@ * @Author: Kane * @Date: 2022-10-12 08:49:14 * @LastEditors: Kane - * @LastEditTime: 2022-10-21 11:46:35 + * @LastEditTime: 2022-10-21 17:57:09 * @FilePath: \car_dealer\css\kane.css * @Description: vue学习用的样式表！ * @@ -23,11 +23,11 @@ html { padding: 50px; } -#root, +/* #root, #app * + * { margin-top: 15px; text-align: center; -} +} */ .content { display: flex; diff --git a/code/web/car_dealer/css/todo-list/to-list.css b/code/web/car_dealer/css/todo-list/to-list.css new file mode 100644 index 0000000..bca273a --- /dev/null +++ b/code/web/car_dealer/css/todo-list/to-list.css @@ -0,0 +1,108 @@ +/* + * @Author: Kane + * @Date: 2022-10-21 16:39:27 + * @LastEditors: Kane + * @LastEditTime: 2022-10-21 18:56:19 + * @FilePath: \car_dealer\css\todo-list\to-list.css + * @Description: 用于待办事项页面的css！ + * + * Copyright (c) ${2022} by Kane, All Rights Reserved. + */ + + html { + --border-color: #cfcfcf; + --backupground-color: #f7f7f7; + --btn-color-blue: #307dbe; + --btn-color-yellow: #f7b24d; + --btn-color-green: #5bad60; + --btn-color-red: #e56651; + --btn-font-color: #fff; + } + + .border { + border: 2px solid var(--border-color); + border-radius: 5px; + width: 30rem; + padding: 1em; + } + + .border > .add_todo { + display: flex; + align-items: center; + justify-content: center; + } + + .border > .add_todo > button { + + margin-left: 5px; + flex-basis: 4rem; + flex-grow: 0; + font-size: 1rem; + height: 2.3rem; + + } + + .border > .add_todo > input { + flex-shrink: auto; + flex-grow: 1; + font-size: 1rem; + line-height: 2rem; + padding: 0 5px; + margin: 0px; + outline-color: var(--border-color); + } + + hr { + border: none; + margin-top: 15px; + background-color: var(--border-color); + height: 2px; + } + + .border > .todo_list { + margin-top: 15px; + } + + .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] { + flex-grow: 0; + } + + .border > .todo_list div *+* { + margin-left: 5px; + } + + .border > .todo_list span { + flex-grow: 1; + border-bottom: 1px solid var(--border-color); + height: 1.25rem; + vertical-align: center; + } + + .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 { + flex-grow: 0; + font-size: 1rem; + width: 4rem; + } + + .border > .todo_list input { + outline: 1px solid var(--border-color); + } \ No newline at end of file diff --git a/code/web/car_dealer/vue/todo-lilst.html b/code/web/car_dealer/vue/todo-lilst.html new file mode 100644 index 0000000..2a2bfb9 --- /dev/null +++ b/code/web/car_dealer/vue/todo-lilst.html @@ -0,0 +1,88 @@ + + + + + + + + 待办任务 + + + + + + + +
+
+

{{title}}

+
+
+ + +
+
+
+
+ + {{item.todo_text}} + + + +
+
+
+
+
+
+ + + diff --git a/code/web/car_dealer/vue/vue_01.html b/code/web/car_dealer/vue/vue_01.html index 3c85665..86b7b90 100644 --- a/code/web/car_dealer/vue/vue_01.html +++ b/code/web/car_dealer/vue/vue_01.html @@ -2,7 +2,7 @@ * @Author: Kane * @Date: 2022-10-20 15:07:59 * @LastEditors: Kane - * @LastEditTime: 2022-10-21 11:47:35 + * @LastEditTime: 2022-10-21 16:29:39 * @FilePath: \car_dealer\vue\vue_01.html * @Description: * @@ -32,8 +32,10 @@

测试列表渲染

+

员工数量：{{stuffCount}}

- + + @@ -68,6 +70,11 @@ this.btn_title = this.btn_switch ? "走你！" : "滚"; }, }, + computed: { + stuffCount() { + return this.stuff_list.length; + }, + }, }; const vm = Vue.createApp(app);
{{index+1}} {{stuff.name}} {{stuff.age}}