vue前端制作一个好看的联系我们页面
时间: 2023-06-10 11:05:58 浏览: 101
好的,下面是一个简单的联系我们页面的 Vue 前端制作示例:
1. 创建一个 ContactUs.vue 文件,然后在这个文件中添加以下代码:
```
<template>
<div class="contact-us-container">
<h1>Contact Us</h1>
<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<button type="submit">Send Message</button>
</form>
</div>
</template>
<script>
export default {
name: 'ContactUs',
};
</script>
<style>
.contact-us-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50%;
}
.form-group {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 1rem;
}
label {
font-weight: bold;
margin-bottom: 0.5rem;
}
input,
textarea {
padding: 0.5rem;
border: none;
border-radius: 0.25rem;
margin-top: 0.5rem;
width: 100%;
}
button[type='submit'] {
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 0.25rem;
padding: 0.5rem 1rem;
margin-top: 1rem;
cursor: pointer;
}
button[type='submit']:hover {
background-color: #3e8e41;
}
</style>
```
2. 在你的 App.vue 文件中添加以下代码,以显示 ContactUs 组件:
```
<template>
<div id="app">
<ContactUs />
</div>
</template>
<script>
import ContactUs from './components/ContactUs.vue';
export default {
name: 'App',
components: {
ContactUs,
},
};
</script>
```
3. 运行你的 Vue 应用程序,你应该能够在浏览器中看到一个简单的联系我们页面。
这只是一个简单的示例,你可以根据自己的需要自定义样式和表单字段。希望这可以帮助到你!