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

以下是一个基本的Vue代码，可以实现点击导航切换content的功能，具体的样式和内容可以根据需求进行修改：

<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-if="activeTab === 'home'">
<h2>新闻列表</h2>
<ul>
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
</ul>
</div>
<div v-if="activeTab === 'warning'">
<h2>预警中心</h2>
<form>
<label for="search">搜索:</label>
<input type="text" id="search">
<label for="date">日期:</label>
<input type="date" id="date">
<label for="author">作者:</label>
<input type="text" id="author">
<button type="submit">搜索</button>
</form>
</div>
<div v-if="activeTab === 'overview'">
<h2>舆情总览</h2>
</div>
<div v-if="activeTab === 'help'">
<h2>帮助</h2>
</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: #f2f2f2;
padding: 10px;
}

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

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

li.active {
font-weight: bold;
}

.login {
cursor: pointer;
}

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