Compare commits
No commits in common. 'frontend' and 'main' have entirely different histories.
@ -1,78 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background: #fff;
|
|
||||||
padding: 20px;
|
|
||||||
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-container {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="text"] {
|
|
||||||
flex-grow: 1;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
background-color: black;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 10px 15px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.delete {
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tasks {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tasks li {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 10px 0;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-actions,
|
|
||||||
.edit-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.completed {
|
|
||||||
text-decoration: line-through;
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.completed {
|
|
||||||
text-decoration: line-through;
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
@ -1,50 +0,0 @@
|
|||||||
<!-- To-do list 实现增删改查功能，前端界面设计 -->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>To-do List</title>
|
|
||||||
<link rel="stylesheet" href="demo.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app">
|
|
||||||
<h1>To-do List</h1>
|
|
||||||
|
|
||||||
<!-- 添加新任务 -->
|
|
||||||
<p>What needs to be done?</p>
|
|
||||||
<input type="text" v-model="newTask" placeholder="Enter new task">
|
|
||||||
<button class="add" @click="addTask">Add</button>
|
|
||||||
|
|
||||||
<!-- 任务完成统计 -->
|
|
||||||
<p>{{ completedCount }} out of {{ tasks.length }} items completed</p>
|
|
||||||
|
|
||||||
<!-- 编辑和保存任务 -->
|
|
||||||
<ul class="tasks">
|
|
||||||
<li v-for="(task, index) in tasks" :key="index">
|
|
||||||
<!-- edit时样式 -->
|
|
||||||
<template v-if="editingIndex === index">
|
|
||||||
<p>Edit Name for "{{ task.name }}"</p>
|
|
||||||
<input type="text" v-model="editingTask">
|
|
||||||
<div class="edit-actions">
|
|
||||||
<button @click="cancelEdit">Cancel</button>
|
|
||||||
<button @click="saveEdit(index)">Save</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<!-- 否则 -->
|
|
||||||
<template v-else>
|
|
||||||
<input type="checkbox" v-model="task.completed">
|
|
||||||
<span :class="{ completed: task.completed }">{{ task.name }}</span>
|
|
||||||
<div class="task-actions">
|
|
||||||
<button @click="editTask(index)">Edit</button>
|
|
||||||
<button @click="deleteTask(index)" class="delete">Delete</button>
|
|
||||||
<button v-if="!task.completed" @click="completeTask(index)">Complete task</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
||||||
<script src="demo.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
const { createApp } = Vue;
|
|
||||||
createApp({
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
newTask: '',
|
|
||||||
tasks:[
|
|
||||||
{ name: 'Learn Vue', completed: false },
|
|
||||||
{ name: 'Create a Vue project with the CLI', completed: true },
|
|
||||||
],
|
|
||||||
editingIndex: null,
|
|
||||||
editingTask: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
completedCount() {
|
|
||||||
return this.tasks.filter(task => task.completed === true).length;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addTask(){
|
|
||||||
if (this.newTask.trim() !== '') {
|
|
||||||
this.tasks.push({ name: this.newTask, completed: false });
|
|
||||||
this.newTask = '';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
editTask(index) {
|
|
||||||
this.editingIndex = index;
|
|
||||||
this.editingTask = this.tasks[index].name;
|
|
||||||
},
|
|
||||||
cancelEdit() {
|
|
||||||
this.editingIndex = null;
|
|
||||||
this.editingTask = '';
|
|
||||||
},
|
|
||||||
saveEdit(index) {
|
|
||||||
if(this.editingTask.trim() !== ''){
|
|
||||||
this.tasks[index].name = this.editingTask;
|
|
||||||
this.cancelEdit();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
deleteTask(index) {
|
|
||||||
this.tasks.splice(index, 1);
|
|
||||||
},
|
|
||||||
completeTask(index) {
|
|
||||||
this.tasks[index].completed = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).mount('#app');
|
|
||||||
|
Before Width: | Height: | Size: 48 KiB |
Loading…
Reference in new issue