效果图
先给大家看下移动端和 web 端效果对比图。
这是 web 端的效果展示图。
这个是移动端的展示图。
第一章：背景图片设置
① 放置图片
首先在静态资源文件夹里放入两张背景图片。
② 引入图片
可以引用本地文件，也可以引用网上的图片。
我们这里使用 Home.vue 文件，使用前最好复制下做个备份。
可以看到文字部分是看不清的，这里我们加个蒙层来解决问题，还可以提高背景的视觉效果。
③ 图片蒙层
这个是 rgba-purple-light 亮紫色的特效。
可以看到效果比之前好了很多。
第二章：导航栏设置
① 基础导航栏添加
因为导航栏一直要存在页面中，所以我设置了将导航栏添加到 App.vue 里，和 <router-view/> 并列在其上面，后面主要内容都会在导航栏的下面进行切换。
因为有深色背景，这里用 dark 主题，字体是白色的，如果背景为浅色，可以用 light 主题，字体为黑色。
<mdb-navbar position="top" dark transparent scrolling> <mdb-navbar-brand href="#">小蓝枣演示</mdb-navbar-brand> <mdb-navbar-toggler> <mdb-navbar-nav> <mdb-nav-item href="#" waves-fixed>主页</mdb-nav-item> <mdb-nav-item href="#" waves-fixed>工具</mdb-nav-item> <mdb-nav-item href="#" waves-fixed>报表</mdb-nav-item> </mdb-navbar-nav> <form> <mdb-input type="text" class="text-white" placeholder="搜索" aria-label="搜索" label navInput waves waves-fixed /> </form> </mdb-navbar-toggler> </mdb-navbar>
这个是导航栏的效果，还包含个搜索项。
这个是手机端展开的效果。
② 下拉菜单
添加个下拉菜单的效果，可以将一些小的菜单合并到里面，保持整体的简洁美观。
<mdb-dropdown tag="li" class="nav-item"> <mdb-dropdown-toggle slot="toggle" tag="a" navLink waves-fixed>其它</mdb-dropdown-toggle> <mdb-dropdown-menu> <mdb-dropdown-item>工作</mdb-dropdown-item> <mdb-dropdown-item>学习</mdb-dropdown-item> <div class="dropdown-divider"></div> <mdb-dropdown-item>交流</mdb-dropdown-item> </mdb-dropdown-menu> </mdb-dropdown>
其中 <div class="dropdown-divider"></div> 是个分割线的效果
