vue 搜索框header_vue项目header模块编写
前端学习的太差了,一个header写了半天才写个勉强能用的。
vue-cli引入scss
npm install node-sass --savenpm install sass-loader --save
从element-ui官方拷贝一个导航栏修改
处理中心我的工作台选项1选项2选项3选项4选项1选项2选项3订单管理
css样式完善
/*顶部导航栏盒子*/.myHeader { /** 导航栏固定在顶部*/ .headBack{ width: 100%; background: rgba(40,52,44,0.6); box-shadow: 0 2px 4px rgba(0,0,0,0.2); position: fixed; left: 0; top: 0; z-index: 100; } .headBox .el-menu { background: transparent; border-bottom: none!important; } .headBox .el-menu-demo li.el-menu-item, .headBox .el-menu--horizontal .el-submenu .el-submenu__title { height: 38px; line-height: 38px; border-bottom: none!important; } //导航栏字体修改 .headBox .el-submenu div.el-submenu__title{ color: #fff; } .el-menu--horizontal >ul , .headBox>ul li.el-menu-item:hover, .headBox>ul li.el-submenu:hover .el-submenu__title, .headBox ul .el-submenu .el-menu .el-menu-item , .headBox .el-menu--horizontal.menu ul{ background: #48456C; border-bottom: none; box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.1) !important; } // 如果展开颜色显示和下拉列表一致 .is-opened{ background: #48456C !important; } // 菜单右边 .userInfo{ position: absolute; right: 30px; color: #ffffff; line-height: 38px; } .userInfo a { color: #fff; font-size: 13px; transition: all 0.2s ease-out; } .headBox .userInfo a:hover { color: #48456C; } .pcsearchbox{ max-width: 170px; height: 100%; line-height: 38px; position: absolute; top: 0; right: 0; cursor: pointer; } /*pc搜索框*/ .headBox .pcsearchbox { padding: 0; max-width: 170px; /*min-width: 30px;*/ height: 100%; line-height: 38px; position: absolute; top: 0; right: 0; cursor: pointer; } .headBox .pcsearchbox:hover .pcsearchinput { opacity: 1; /*transform: scaleX(1);*/ visibility: visible; } .headBox .pcsearchbox i.pcsearchicon { color: #fff; padding-left: 10px; } .headBox .pcsearchbox .pcsearchinput { width: 180px; padding: 10px 20px 10px 20px; background: rgba(40, 42, 44, 0.6); border-radius: 0 0 2px 2px; position: absolute; right: 0; top: 38px; opacity: 0; visibility: hidden; /*transform: scaleX(0);*/ transform-origin: right; transition: all 0.5s ease-out; } .headBox .pcsearchbox .hasSearched { opacity: 1; /*transform: scaleX(1);*/ visibility: visible; } .headBox .pcsearchbox .el-input { width: 100%; } .headBox .el-input__inner { height: 30px; border: none; background: #fff; /*border: 1px solid #333;*/ border-radius: 2px; padding-right: 10px; }}/*下拉选项菜单*/.el-menu--horizontal .el-menu .el-menu-item,.el-menu--horizontal .el-menu .el-submenu__title { background-color: #64609E !important; float: none; height: 36px; line-height: 36px; color: #909399; position: relative;}// 下拉菜单body > div.el-menu--horizontal.menu > ul{ list-style: none; position: relative; margin: 0; z-index: 100; min-width: 130px; border: none; padding: 0; border-radius: 2px; box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);}body > div.el-menu--horizontal.menu > ul > li:hover { background: #48456C !important;}
修改后的页面
处理中心我的工作台选项1选项2选项3订单管理
登录 | 注册
个人中心 喜欢列表 收藏列表 退出登录
效果
vue 搜索框header_vue项目header模块编写相关推荐
- Vue搜索框保存临时搜索的记录
<template><div><inputtype="text"list="sg-nav-search"placeholder=& ...
- Vue搜索框显示最近(历史)搜索记录
效果: 实现: 当按回车键的时候会将最近搜索的内容展示出来. (一)HTML <el-input@input="searchContent($event)"v-model=& ...
- vue 搜索框header_在Vue框架下使用Fullcalendar
原标题:在Vue框架下使用Fullcalendar Fullcalendar是一个非常受欢迎的日历日程处理的js组件,它功能强大,文档齐全,可定制化高,可与你的项目无缝对接.本站之前有很多文章介绍了F ...
- vue 搜索框模糊查询 + 优化(节流) + 关键字高亮
直接上代码 HTML视图层代码 <template><!-- 模糊查询 + 节流 + 高亮 --><div><inputtype="text&quo ...
- 从0搭建一个Springboot+vue前后端分离项目(六)后台编写配置类与接口
新建一个包,里面放入一些常用的配置类 引入mybatis-plus包与插件 引入包 前往官网查看 https://baomidou.com/pages/226c21/#%E5%88%9D%E5%A7% ...
- 六十九、完成Vue项目城市选择页,路由配置,搜索框布局、列表布局、BetterScroll 的使用和字母表布局
2020/10/28. 周三.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
- springboot+vue练手小项目[前台搭建+后台编写](非常详细)
[ springboot+vue练手小项目 ] 技术栈: springboot+vue3+element-plus +Mybaties-plus+hutool +mysql8 项目介绍 :最近刚学了s ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- vue 使用 el-table 添加搜索框 实现简单搜索功能 ,同时判断输入是否为空
前言: vue 项目 使用 el-table ,想给 表格上方添加搜索功能 ,虽然 element 官方文档 自带类似的搜索框 我这里没有 使用官方文档的方法 ,我是通过使用两个操作数组的方法来实现搜 ...
最新文章
- 个人技术生涯的感悟(2)
- mysql主键始终从小到大_Mysql从入门到入神之(四)B+树索引
- Rust即将发布1.0版本,Go持续获得关注:如何在新生语言之间做出抉择
- python计算平行线
- 用WSDL定义Web服务
- 猪行天下之Python基础——10.1 Python常用模块(上)
- Android中RelativeLayout各个属性的含义
- R语言入门4---R语言流程控制
- HDU 2571 命运
- js,java时间处理
- 【渝粤教育】 国家开放大学2020年春季 1192高层建筑施工 参考试题
- union共用体(联合体)、宏定义、枚举
- jdk 安装_Linux安装JDK操作手册
- 【转载】面向对象建模与数据库建模两种分析设计方法的比较
- 翻译【mysqladmin --help】
- 1056. 组合数的和(15)-PAT乙级真题
- Redis 对象系统
- Android音视频专题(二) 在 Android 平台使用 AudioRecord 和 AudioTrack API 完成音频 PCM 数据的采集和播放,并实现读写音频 wav 文件
- 图的深度优先遍历和广度优先遍历算法流程图
- 连接mysql失败怎么办_数据库连接失败有什么原因?怎么解决?
热门文章
- (一)elasticsearch6.1.1安装详细过程
- 实验11 编写子程序
- 题目一:给出一个n,代表有从1到n的数字[1,2,3,··· n],问可以构成多少种二叉搜索树?...
- [UE4]单机游戏改网络游戏,不完全清单
- 神经网络中使用Batch Normalization 解决梯度问题
- Hadoop安装之JDK在Centos虚拟机中安装
- selenium+java初级学习笔记之单个元素定位
- python 下的数据结构与算法---6:6大排序算法
- leetcode之回溯backtracing专题4
- [密码学基础][每个信息安全博士生应该知道的52件事][Bristol52]46.Sigma协议正确性、公正性和零知识性