用vue2帮我创意一个科技效果导航栏,导航栏内容有首页, 关于丰海,新闻资讯,产品中心,案例展示,技术支持,投资者关系,人才招聘,联系我们,导航栏内容占屏幕宽度一半,导航栏有搜索框,和公司邮箱,并把字体显示为14px,微软雅黑,字体横向显示
时间: 2024-05-24 15:12:40 浏览: 9
以下是基于vue2的科技效果导航栏代码:
<template>
<div class="tech-navbar">
<div class="navbar-left">
<router-link to="/" class="navbar-item">首页</router-link>
<router-link to="/about" class="navbar-item">关于丰海</router-link>
<router-link to="/news" class="navbar-item">新闻资讯</router-link>
<router-link to="/products" class="navbar-item">产品中心</router-link>
<router-link to="/cases" class="navbar-item">案例展示</router-link>
<router-link to="/support" class="navbar-item">技术支持</router-link>
<router-link to="/investors" class="navbar-item">投资者关系</router-link>
<router-link to="/careers" class="navbar-item">人才招聘</router-link>
<router-link to="/contact" class="navbar-item">联系我们</router-link>
</div>
<div class="navbar-right">
<form class="search-form">
<input type="text" class="search-input" placeholder="搜索">
<button type="submit" class="search-btn"><i class="fa fa-search"></i></button>
</form>
<a href="mailto:info@fenghai.com" class="email-link">info@fenghai.com</a>
</div>
</div>
</template>
<script>
export default {
name: 'TechNavbar',
data() {
return {};
},
};
</script>
<style lang="scss">
.tech-navbar {
display: flex;
justify-content: space-between;
align-items: center;
width: 50%;
font-size: 14px;
font-family: 'Microsoft YaHei', sans-serif;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
background-color: #007bff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
.navbar-left {
display: flex;
justify-content: space-between;
align-items: center;
width: 70%;
padding: 0 20px;
}
.navbar-item {
margin: 0 10px;
color: #fff;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.navbar-right {
display: flex;
justify-content: flex-end;
align-items: center;
width: 30%;
padding: 0 20px;
.search-form {
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.search-input {
width: 120px;
height: 30px;
padding: 5px;
margin-right: 5px;
font-size: 14px;
font-family: 'Microsoft YaHei', sans-serif;
border: none;
border-radius: 4px;
background-color: #f5f5f5;
}
.search-btn {
width: 30px;
height: 30px;
padding: 0;
font-size: 14px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: #0062cc;
}
}
.email-link {
color: #fff;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
</style>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)