CPICXIM/car_deal_util
CPICXIM/car_deal_util
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

保存进度！

Browse Source
This commit is contained in:
Kane 2022-10-23 15:32:03 +08:00
parent 6a3f5d820f
commit e4fff250d2
2 changed files with 48 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
code/web/car_dealer/css/todo-list/to-list.css
View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2022-10-21 16:39:27 * @Date: 2022-10-21 16:39:27
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2022-10-23 00:10:50 * @LastEditTime: 2022-10-23 15:26:59
* @FilePath: \car_dealer\css\todo-list\to-list.css * @FilePath: \car_dealer\css\todo-list\to-list.css
* @Description: 用于待办事项页面的css！ * @Description: 用于待办事项页面的css！
* *
@ -158,3 +158,30 @@ hr {
text-align: right; text-align: right;
margin: 0px 1rem; margin: 0px 1rem;
} }
#message_border {
position: fixed;
display: none;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(128, 128, 128, 0.8);
justify-content: center;
align-items: center;
}
.message_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--backupground-color);
padding: 2rem;
border-radius: 5px;
}
.message_box > button {
padding: 0.5rem 2rem;
font-size: 1rem;
}

22
code/web/car_dealer/vue/todo-list.html
View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2022-10-21 16:36:51 * @Date: 2022-10-21 16:36:51
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2022-10-23 00:07:47 * @LastEditTime: 2022-10-23 15:22:51
* @FilePath: \car_dealer\vue\todo-list.html * @FilePath: \car_dealer\vue\todo-list.html
* @Description: * @Description:
* *
@ -25,12 +25,18 @@
<body> <body>
<div id="app"> <div id="app">
<div id="message_border">
<div class="message_box">
<span>{{errorMessage}}</span>
<button type="button" @click="closeMessageBox()">关闭</button>
</div>
</div>
<div class="content"> <div class="content">
<h1>{{title}}</h1> <h1>{{title}}</h1>
<div class="border"> <div class="border">
<div class="add_todo"> <div class="add_todo">
<input type="text" placeholder="请输入待办事项" /> <input type="text" placeholder="请输入待办事项" />
<button type="button">添加</button> <button type="button" @click="showMessageBox()">添加</button>
</div> </div>
<hr> <hr>
<div class="todo_list"> <div class="todo_list">
@ -51,12 +57,14 @@
</div> </div>
</div> </div>
</div> </div>
</body> </body>
<script> <script>
const app = { const app = {
data() { data() {
return { return {
title: "待办任务", title: "待办任务",
errorMessage: "奇怪的错误！",
todo_list: [{ todo_list: [{
selected: false, selected: false,
todo_text: "回家", todo_text: "回家",
@ -170,6 +178,16 @@
}, },
removeTodo(index) { removeTodo(index) {
this.todo_list.splice(index, 1); this.todo_list.splice(index, 1);
},
showMessageBox() {
const message = document.getElementById("message_border");
message.style["display"] = "flex";
},
closeMessageBox() {
const message = document.getElementById("message_border");
message.style["display"] = "none";
} }
}, },
computed: { computed: {