用html写一个网页,包含联系方式,主营业务,地址,成长历程,并使用vue美化它
时间: 2023-05-30 13:06:45 浏览: 51
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>公司网站</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
#header {
background-color: #0078d7;
color: #fff;
padding: 20px;
text-align: center;
}
#contact {
background-color: #f2f2f2;
padding: 20px;
}
#services {
background-color: #fff;
padding: 20px;
}
#address {
background-color: #f2f2f2;
padding: 20px;
}
#history {
background-color: #fff;
padding: 20px;
}
h1 {
font-size: 36px;
margin: 0;
}
h2 {
font-size: 28px;
margin: 0;
}
p {
font-size: 16px;
margin: 0;
}
</style>
</head>
<body>
<div id="app">
<div id="header">
<h1>{{ companyName }}</h1>
</div>
<div id="contact">
<h2>Contact Us</h2>
<p>Phone: {{ phone }}</p>
<p>Email: {{ email }}</p>
</div>
<div id="services">
<h2>Our Services</h2>
<ul>
<li v-for="service in services">{{ service }}</li>
</ul>
</div>
<div id="address">
<h2>Our Address</h2>
<p>{{ address }}</p>
</div>
<div id="history">
<h2>Our History</h2>
<p>{{ history }}</p>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
companyName: 'ABC Company',
phone: '123-456-7890',
email: 'info@abccompany.com',
services: [
'Service A',
'Service B',
'Service C'
],
address: '123 Main Street, Anytown, USA',
history: 'ABC Company was founded in 2000 and has been providing top-quality services to customers ever since.'
}
});
</script>
</body>
</html>