用vue写一个主题网页
时间: 2023-09-22 14:07:39 浏览: 36
好的,下面是一个简单的主题网页的Vue代码示例:
```html
<template>
<div class="theme-page">
<header>
<h1>{{ title }}</h1>
<nav>
<ul>
<li v-for="item in menuItems" :key="item.id">
<a :href="item.link">{{ item.label }}</a>
</li>
</ul>
</nav>
</header>
<main>
<h2>Featured Articles</h2>
<section class="featured-articles">
<article v-for="article in featuredArticles" :key="article.id">
<h3>{{ article.title }}</h3>
<p>{{ article.summary }}</p>
<a :href="article.link">Read More</a>
</article>
</section>
<h2>Recent Articles</h2>
<section class="recent-articles">
<article v-for="article in recentArticles" :key="article.id">
<h3>{{ article.title }}</h3>
<p>{{ article.summary }}</p>
<a :href="article.link">Read More</a>
</article>
</section>
</main>
<footer>
<p>© 2021 My Theme Page</p>
</footer>
</div>
</template>
<script>
export default {
name: "ThemePage",
data() {
return {
title: "My Theme Page",
menuItems: [
{ id: 1, label: "Home", link: "#" },
{ id: 2, label: "About", link: "#" },
{ id: 3, label: "Contact", link: "#" },
],
featuredArticles: [
{
id: 1,
title: "Lorem Ipsum Dolor Sit Amet",
summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
link: "#",
},
{
id: 2,
title: "Sed Do Eiusmod Tempor Incididunt",
summary: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
link: "#",
},
],
recentArticles: [
{
id: 1,
title: "Ut Enim Ad Minim Veniam",
summary: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
link: "#",
},
{
id: 2,
title: "Duis Aute Irure Dolor In Reprehenderit",
summary: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
link: "#",
},
],
};
},
};
</script>
<style>
/* Add styles for the theme page here */
.theme-page {
font-family: sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
display: flex;
list-style: none;
padding: 0;
}
nav li:not(:last-child) {
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #333;
}
main {
margin-top: 40px;
}
h2 {
font-size: 24px;
margin-bottom: 20px;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
article {
width: calc(50% - 10px);
margin-bottom: 20px;
padding: 20px;
background-color: #f5f5f5;
}
article h3 {
margin-top: 0;
}
article p {
margin-bottom: 10px;
}
article a {
text-decoration: underline;
}
</style>
```
上面的代码示例展示了一个简单的主题网页,包括页面标题、导航菜单、精选文章和最近文章等内容。你可以根据自己的需求进行修改和扩展。