效果图
🌟【定制化开发服务，让您的项目领先一步】🌟
如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>响应式公司官网</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.parallax {
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.section {
padding: 50px 20px;
text-align: center;
}
.section h2 {
margin-bottom: 20px;
}
.section p {
max-width: 800px;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}
.grid img {
width: 100%;
height: auto;
}
.footer {
background: #333;
color: white;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="parallax" :style="{ backgroundImage: 'url(' + sections[0].image + ')' }">
<h1>{{ companyName }}</h1>
</div>
<div v-for="(section, index) in sections" :key="index" class="section">
<h2>{{ section.title }}</h2>
<p>{{ section.content }}</p>
<div class="grid">
<img v-for="(img, i) in section.images" :key="i" :src="img" :alt="'Image ' + (i + 1)">
</div>
</div>
<div class="footer">
<p>© {{ companyName }} {{ new Date().getFullYear() }}</p>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
companyName: '响应式公司官网',
sections: [
{
title: '关于我们',
content: '我们是一家致力于提供高质量服务的公司，专注于创新和技术。',
image: 'https://via.placeholder.com/1200x800?text=关于我们',
images: [
'https://via.placeholder.com/200x150?text=图片1',
'https://via.placeholder.com/200x150?text=图片2',
'https://via.placeholder.com/200x150?text=图片3'
]
},
{
title: '我们的服务',
content: '我们提供广泛的服务，包括Web开发、移动应用开发和云计算解决方案。',
image: 'https://via.placeholder.com/1200x800?text=我们的服务',
images: [
'https://via.placeholder.com/200x150?text=图片4',
'https://via.placeholder.com/200x150?text=图片5',
'https://via.placeholder.com/200x150?text=图片6'
]
},
{
title: '我们的团队',
content: '我们的团队由经验丰富的专业人士组成，致力于为客户提供最佳解决方案。',
image: 'https://via.placeholder.com/1200x800?text=我们的团队',
images: [
'https://via.placeholder.com/200x150?text=图片7',
'https://via.placeholder.com/200x150?text=图片8',
'https://via.placeholder.com/200x150?text=图片9'
]
}
]
};
}
});
</script>
</body>
</html>
