130 Adding a Form

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>