12、更新AddResource.vue,实现上述界面
<template>
<base-card>
<!-- <h2>Add Resource</h2> -->
<form @submit.prevent="addResource">
<div class="form-control">
<label for="title">Title</label>
<input type="text" id="title" name="title" placeholder="Title"/>
</div>
<div class="form-control">
<label for="description">Description</label>
<textarea name="description" id="description" rows="3" placeholder="Description"></textarea>
</div>
<div>
<label for="link">Link</label>
<input type="url" id="link" name="link" placeholder="Link"/>
</div>
<div>
<base-button type="submit">Add Resource</base-button>
</div>
</form>
</base-card>
</template>
<script>
export default {
data() {
return {
title: "",
description: "",
link: "",
}
},
methods: {
}
}
</script>
<style scoped>
label {
font-weight: bold;
display: block;
margin-bottom: 0.5rem;
}
input,
textarea {
display: block;
width: 100%;
font: inherit;
padding: 0.15rem;
border: 1px solid #ccc;
}
input:focus,
textarea:focus {
outline: none;
border-color: #3a0061;
background-color: #f7ebff;
}
.form-control {
margin: 1rem 0;
}
</style>