保存进度!
This commit is contained in:
parent
6a3f5d820f
commit
e4fff250d2
@ -2,7 +2,7 @@
|
||||
* @Author: Kane
|
||||
* @Date: 2022-10-21 16:39:27
|
||||
* @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
|
||||
* @Description: 用于待办事项页面的css!
|
||||
*
|
||||
@ -158,3 +158,30 @@ hr {
|
||||
text-align: right;
|
||||
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;
|
||||
}
|
||||
|
@ -2,7 +2,7 @@
|
||||
* @Author: Kane
|
||||
* @Date: 2022-10-21 16:36:51
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-10-23 00:07:47
|
||||
* @LastEditTime: 2022-10-23 15:22:51
|
||||
* @FilePath: \car_dealer\vue\todo-list.html
|
||||
* @Description:
|
||||
*
|
||||
@ -25,12 +25,18 @@
|
||||
|
||||
<body>
|
||||
<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">
|
||||
<h1>{{title}}</h1>
|
||||
<div class="border">
|
||||
<div class="add_todo">
|
||||
<input type="text" placeholder="请输入待办事项" />
|
||||
<button type="button">添加</button>
|
||||
<button type="button" @click="showMessageBox()">添加</button>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="todo_list">
|
||||
@ -51,12 +57,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
const app = {
|
||||
data() {
|
||||
return {
|
||||
title: "待办任务",
|
||||
errorMessage: "奇怪的错误!",
|
||||
todo_list: [{
|
||||
selected: false,
|
||||
todo_text: "回家",
|
||||
@ -170,6 +178,16 @@
|
||||
},
|
||||
removeTodo(index) {
|
||||
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: {
|
||||
|
Loading…
x
Reference in New Issue
Block a user