技术标签: 前端 vue.js 手把手带你跑若依框架【纯前端】 javascript
掌握分寸感,找目标一致的人协同你,有效地调配资源,就可以提高效率。
写在前面的话:博主最近想要搭建自己的前端若依项目,因此此系列博客会做一些记录。我的项目gitee地址: https://gitee.com/xuruicong/rachel-front-show
说明:只运行前端项目,只需要要下载官方项目http://www.ruoyi.vip/ 修改vue.config.js文件中的target: `http://localhost:8080`为:
target: `http://vue.ruoyi.vip/prod-api/`,
修改效果预览:
目录
(tips: 全局搜索sidebar-title)
src-->layout-->component-->sidebar--> Logo.vue
只需要修改对应的图标logo.png即可
(tips:全局搜索.sidebar-container)
src-->layout-->component-->sidebar--> SidebarItem.vue
src-->assets-->styles-->sidebar.scss
src-->assets-->styles--> variables.scss
// variable.scss
// 默认菜单主题风格
$base-menu-color: #333333; // 菜单全部字体颜色
$base-menu-color-active: #e60012; // 父级菜单激活的字体颜色
$base-menu-background: #fff; // 菜单栏背景颜色(非激活状态)
$base-logo-title-color: #e60012; // 系统标题颜色
$base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background: #e60012; // 选中菜单的字体颜色
$base-logo-light-title-color: #fff; // 对应base-logo-title-color
$base-sub-menu-background: #f5f7fa; // 选中的菜单的子菜单背景颜色
$base-sub-menu-hover: #f7f0f1; // 子菜单hover背景颜色
如果还想要修改 激活的菜单的样式需要在sidebar.scss中添加和修改如下代码:
// sidebar.scss
.el-menu-item.is-active {
color: #e60012 !important;
background-color: $base-sub-menu-hover !important; // 点击菜单的颜色
&:hover {
background-color: $base-sub-menu-hover !important;
}
}
// menu hover
.submenu-title-noDropdown, .el-submenu__title {
&:hover {
background-color: $base-sub-menu-hover !important;
}
}
& .theme-dark .nest-menu .el-submenu > .el-submenu__title,
& .theme-dark .el-submenu .el-menu-item {
// background-color: $base-sub-menu-background !important;
color: #333333 !important;
background-color: #fff;
&:hover {
background-color: $base-sub-menu-hover !important;
}
}
修改之后的效果如下:
src-->layout-->component-->Navbar.vue
<!-- <template v-if="device!=='mobile'">
<search id="header-search" class="right-menu-item" />
<el-tooltip content="源码地址" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip>
<el-tooltip content="文档地址" effect="dark" placement="bottom">
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip>
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template> -->
(tips:全局搜索profile.jpg)
src-->store-->modules-->user.js
替换profile.jpg图片即可
src-->layout-->component-->Navbar.vue
注释掉面包屑部分,我们一会自己写
src-->component-->Hamburger--> index.vue
// humburger index.vue
<template>
<div style="padding: 0 15px; display: flex">
<img
src="../../assets/logo/svg.png"
@click="toggleClick"
:class="{ 'is-active': isActive }"
class="hamburger"
/>
<div class="nabar-title">综合管理系统</div>
</div>
</template>
<style scoped>
.hamburger {
display: inline-block;
vertical-align: middle;
margin-top: 18px;
width: 16px;
color: #e60012;
height: 16px;
margin-left: 6px;
}
.hamburger.is-active {
transform: rotate(180deg);
}
.nabar-title {
margin-left: 18px;
height: 100%;
width: 200px;
line-height: 54px;
color: #e60012;
font-weight: 600;
vertical-align: middle;
}
</style>
在全局settings文件中,若以框架已经定义了是否显示tagsView,设置属性为false即可。
/**
* 是否显示 tagsView
*/
tagsView: true,
src-->layout-->component-->Navbar.vue
需要修改Navbar的高度,并添加面包屑
// Navbar.vue
<template>
<div class="navbar">
<div style="background: #fff">
<hamburger
id="hamburger-container"
:is-active="sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar"
/>
<!-- <breadcrumb
id="breadcrumb-container"
class="breadcrumb-container"
v-if="!topNav"
/>
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" /> -->
<div class="right-menu">
<el-dropdown
class="avatar-container right-menu-item hover-effect"
trigger="click"
>
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar" />
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
<!-- <el-dropdown-item @click.native="setting = true">
<span>布局设置</span>
</el-dropdown-item> -->
<el-dropdown-item divided @click.native="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<!-- 自定义面包屑 -->
<div class="new-breadcrumb">
<i
class="el-icon-location-outline"
style="margin-left: 20px; margin-top: 16px"
></i>
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
</div>
</div>
</template>
// navbar的height:100px
.new-breadcrumb {
height: 50px;
background: rgb(240, 241, 243);
display: flex;
}
.navbar {
height: 100px;
}
由于修改了navbar的高从50px--->100px,会影响页面整个的高度。(整个页面的高度是100vh,下面内容app-main的高度就是100vh-navbar的高度)因此需要修改app-main高度
src--> layout-->components-->AppMain.vue
.app-main {
/* 100= navbar 100 */
min-height: calc(100vh - 100px); // 原来是50px
width: 100%;
position: relative;
overflow: hidden;
}
但是希望去掉首页/,因为不是所有页面都是通过首页进入的。
src-->components-->Breadcrumb-->index.vue
注释掉默认的首页即可
// if (!this.isDashboard(first)) {
// matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
// }
可以看到 ,所有页面都包含在app-container下的,如果需要修改样式则需呀修改全局的app-container样式。
src-->assets-->styles-->index.scss
//main-container全局样式
.app-content {
border: 20px solid rgb(240, 241, 243);
border-top: none;
}
.app-container {
padding: 10px 20px;
}
最终页面效果如下:
文章浏览阅读1.5w次,点赞9次,收藏26次。简介一个创建某个文件到桌面快捷方式的BAT批处理.代码@echooff::设置程序或文件的完整路径(必选)setProgram=D:\Program Files (x86)\格式工厂.4.2.0\FormatFactory.exe::设置快捷方式名称(必选)setLnkName=格式工厂v4.2.0::设置程序的工作路径,一般为程序主目录,此项若留空,脚本将..._批处理创建桌面快捷方式
文章浏览阅读2k次。射频识别技术漫谈(6-10),概述RFID的通讯协议;射频ID卡的原理与实现,数据的传输与解码;介绍动物标签属性与数据传输;RFID识别号的变化等_芯片 ttf模式
文章浏览阅读1.1k次。今天小编心血来潮,为大家带来一个很有趣的项目,那就是使用 Python web 框架 Django 来实现支付宝支付,废话不多说,一起来看看如何实现吧。_django 对接支付宝接口流程
文章浏览阅读842次。Zabbix 5.0 LTS,跑了一年多了一直很稳定,前两天空间显示快满了,于是手贱清理了一下history_uint表(使用mysql truncate),结果折腾了一周。大概故障如下:然后zabbix论坛、各种群问了好久都没解决,最后自己一番折腾似乎搞定了。初步怀疑,应该是由于历史数据被清空后,zabbix需要去处理数据,但是数据量太大,跑不过来,所以来不及更新了(?)..._zabbix问题没有更新
文章浏览阅读296次。一、数据结构之字典 key-value
文章浏览阅读9.7k次,点赞3次,收藏13次。最近项目中遇到一个问题,是关于mybatis-plus的字段注解策略,记录一下。1问题调用了A组件(基础组件),来更新自身组件的数据,发现自己组件有个字段总是被清空。2原因分析调用的A组件的字段,属于基础字段,自己业务组件,对这个基础字段做了扩展,增加了业务字段。但是在自己的组件中的实体注解上,有一个注解使用错误。mybatis-plus封装的updateById方法,如果..._mybatisplus strategy
文章浏览阅读3.8k次。如何构建倒排索引,我们将这个过程叫做“索引构建”。如果我们的文档很多,这样索引就一次性装不下内存,该如何构建。硬件的限制 我们知道ram读写是随机的操作,只要输入相应的地址单元就能瞬间将数据读出来或者写进去。但是磁盘不行,磁盘必须有一个寻道的过程,外加一个旋转时间。那么只有涉及到磁盘,我们就可以考虑怎么节省I/O操作时间。【注】操作系统往往以数据块为单位进行读写。因为读一_为某一文档及集构件词项索引时,可使用哪些索引构建方法
文章浏览阅读836次。英特尔技术与制造事业部副总裁卞成刚7日在财富论坛间隙接受中新社记者采访时表示,该公司看好中国市场前景,扎根中国并以此走向世界是目前最重要的战略之一。卞成刚说,目前该公司正面临战略转型,即从传统PC服务领域扩展至所有智能设施领域,特别是移动终端。而中国目前正引领全球手机市场,预计未来手机、平板电脑等方面的发明创新将大量在中国市场涌现,并推向全球。持相同态度的还有英特尔中国区执行董事戈峻。戈峻
文章浏览阅读627次。https://blog.csdn.net/zrs19800702/article/details/53101213http://blog.csdn.net/lzw06061139/article/details/51445311https://my.oschina.net/linuxhunter/blog/654080rgw 概述Ceph 通过radosgw提供RES..._radosgw -c
文章浏览阅读3.7k次,点赞6次,收藏9次。我为什么选择ECharts ? 本周学校课程设计,原本随机佛系选了一个51单片机来做音乐播放器,结果在粗略玩了CN-DBpedia两天后才回过神,课设还没有开始整。于是懒癌发作,碍于身上还有比赛的作品没交,本菜鸡对硬件也没啥天赋,所以就直接把题目切换成软件方面的题目。写python的同学选择了一个时间序列数据的可视化曲线程序设计题目,果真python在数据可视化这一点性能很优秀。..._echarts 时间序列
文章浏览阅读1.6k次。事件类:/** * * * @className: EarlyWarnPublishEvent * * @description:数据风险预警发布事件 * * @param: * * @return: * * @throws: * * @author: lizz * * @date: 2020/05/06 15:31 * */public cl..._applicationeventpublisheraware
文章浏览阅读1.2k次。如需转载请注明出处!点击小图片转到图片查看的页面在Android开发中很常用到,抱着学习和分享的心态,在这里写下自己自定义的一个ImageView,可以实现类似微信朋友圈中查看图片的功能和效果。主要功能需求:1.缩放限制:自由缩放,有最大和最小的缩放限制 2居中显示:.若图片没充满整个ImageView,则缩放过程将图片居中 3.双击缩放:根据当前缩放的状态,双击放大两倍或缩小到原来 4.单指_imageview图片边界回弹