帮我编写一个完整的vue中点击导航切换content的代码，要求导航在界面最上方，横排，导航选项分别是首页、预警中心、舆情总览、帮助，界面右上角有登录功能，content1有一个新闻列表，content2有一个高级的带搜索框、日期、作者的表单，content3为空，content4为空

以下是代码示例：

<template>
<div>
<nav>
<ul>
<li @click="activeTab = 'home'" :class="{ active: activeTab === 'home' }">首页</li>
<li @click="activeTab = 'warning'" :class="{ active: activeTab === 'warning' }">预警中心</li>
<li @click="activeTab = 'overview'" :class="{ active: activeTab === 'overview' }">舆情总览</li>
<li @click="activeTab = 'help'" :class="{ active: activeTab === 'help' }">帮助</li>
</ul>
<div class="login">登录</div>
</nav>
<div class="content">
<div v-show="activeTab === 'home'">
<ul>
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
</ul>
</div>
<div v-show="activeTab === 'warning'">
<form>
<input type="text" placeholder="搜索">
<input type="date">
<input type="text" placeholder="作者">
<button>搜索</button>
</form>
</div>
<div v-show="activeTab === 'overview'"></div>
<div v-show="activeTab === 'help'"></div>
</div>
</div>
</template>

<script>
export default {
data() {
return {
activeTab: 'home'
}
}
}
</script>

<style>
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
padding: 10px;
}

ul {
display: flex;
list-style: none;
margin: ;
padding: ;
}

li {
margin-right: 20px;
cursor: pointer;
}

li.active {
color: red;
}

.login {
cursor: pointer;
}

.content {
margin-top: 20px;
}
</style>