工作274:ele-图标使用

/*各个路由模块的建立*/
import Home from "@/views/Home/Home";
import GlobalLayout from "@/layout/GlobalLayout";
import Login from "@/views/login/Login";
import Check from "@/views/login/Check";
const SYSTEM_MANAGEMENT = "系统管理";
const SETTLEMENT_MANAGEMENT = "结算管理";
const DATAANALYSIS_MANAGEMENT = "数据分析";
const Task_MANAGEMENT = "任务管理";
/*定义路径的数值 自定义路径的值*/
export const LOGIN_PATH = "/login";
export const HOME_PATH = "/";
export const LOGIN_CHECK = "/login/check/:uuid";
/*** 菜单配置** 参数例子：* {*  path:     路径,*  name:     组件名称,*  meta: {*    text:     左侧菜单栏显示文字,*    icon:     左侧菜单栏显示图标,*    pName:    父级菜单名称*  },*  hidden:   是否在菜单栏中隐藏,*  component: 组件（按需引入）* }*/
/*进行路由设置处理*/
export const staticRoutes = [{path: HOME_PATH,name: "Home",meta: {text: "首页",icon: "el-icon-price-tag"},component: Home},{path: "/order",name: "Order",meta: {text: "订单管理",icon: "el-icon-tickets"},component: () => import("@/views/order/Order")},{path: "/task",name: "Task",meta: {text: "任务列表",icon: "el-icon-bank-card",pName: Task_MANAGEMENT},component: () => import("@/views/task/task/Task")},{path: "/Arrange",name: "Arrange",meta: {text: "任务编排单",icon: "el-icon-bank-card",pName: Task_MANAGEMENT},component: () => import("@/views/task/arrange/Arrange")},{path: "/content",name: "Content",meta: {text: "内容管理",icon: "el-icon-document-copy"},component: () => import("@/views/content/Content")},{path: "/settlement",name: "Settlement",meta: {text: "任务结算",icon: "el-icon-coin",pName: SETTLEMENT_MANAGEMENT},component: () => import("@/views/settlement/settlement/Settlement")},{path: "/transaction",name: "Transaction",meta: {text: "交易记录",icon: "el-icon-coin",pName: SETTLEMENT_MANAGEMENT},component: () => import("@/views/settlement/transaction/Transaction")},{path: "/list",name: "list",meta: {text: "数据列表",icon: "el-icon-data-line",pName: DATAANALYSIS_MANAGEMENT},component: () => import("@/views/Detaildata/DetailList/List")},{path: "/list/analysis/:id",name: "Analysis",meta: {text: "数据详情页",pName: "数据列表页",icon: "el-icon-data-line",},props: true,hidden: true,component: () => import("@/views/Detaildata/DetailEmpty/Empty")},{path: "/app",name: "app",meta: {text: "营销端数据",icon: "el-icon-data-line",pName: DATAANALYSIS_MANAGEMENT},component: () => import("@/views/Detaildata/DetailApp/App")},{path: "/pc",name: "pc",meta: {text: "业务端数据",icon: "el-icon-data-line",pName: DATAANALYSIS_MANAGEMENT},component: () => import("@/views/Detaildata/DetailPc/Pc")},{path: "/account",name: "Account",meta: {text: "账号管理",icon: "el-icon-user",pName: SYSTEM_MANAGEMENT},component: () => import("@/views/system/account/Account.vue")},{path: "/user",name: "User",meta: {text: "用户管理",icon: "el-icon-user",pName: SYSTEM_MANAGEMENT},component: () => import("@/views/system/user/UserList")},{path: "/department",name: "Department",meta: {text: "部门管理",icon: "el-icon-user",pName: SYSTEM_MANAGEMENT},component: () => import("@/views/system/department/Department.vue")},{path: "/dictionary",name: "Dictionary",meta: {text: "数据字典",pName: SYSTEM_MANAGEMENT},component: () => import("@/views/system/dictionary/Dictionary")}
];/*** 一级路由*/
export const routes = [{path: "/",component: GlobalLayout,children: staticRoutes},{path: LOGIN_PATH,name: "Login",component: Login},{path: LOGIN_CHECK,name: "Check",props: true,component: Check},{path: "/404",name: "404",hidden: true,component: () => import("@/views/404")},{path: "*",redirect: "/404",hidden: true}
];/*** 非路由菜单项图标*/
export const iconMap = {[SYSTEM_MANAGEMENT]: "el-icon-user",[SETTLEMENT_MANAGEMENT]: "el-icon-coin",[DATAANALYSIS_MANAGEMENT]: "el-icon-data-line",[Task_MANAGEMENT]: "el-icon-bank-card"
};

运行结果

工作274:ele-图标使用相关推荐

linux mint图标大小,Cinnamon：LinuxMint 15桌面设置小技巧
touchwiz自身也在做不断的革新,例如7屏分页,桌面切换3d效果,增强型的下拉菜单设置等.win10多桌面最多可以支持7个桌面开启,而且win10切换多桌面是有快捷键的,可以帮助用户迅速切换或创建 ...
制作一个状态栏中跑马灯效果_图标设计指南(3)——制作一个图标集所需全部信息（中）...
本文翻译自图标设计专家Justas Galaburda写的图标设计指南.本文主要介绍制作一个图标集所需全部信息(中).翻看同系列文章,直接到文章最底部. 制作一个图标集所需全部信息上次我们介绍了我将 ...
html字体图标设置
精灵技术: 为了有效减少服务器接收和发送请求的次数,提高页面的加载速度精灵技术主要针对背景图片的使用,就是把多个小的背景图片整合到一张大图片中 1精灵图主要针对于小的背景图片的使用 2主要借助背景位 ...
CSS——字体图标、平面转换、缩放
一.字体图标字体图标主要用于网页中通用.常用的一些小图标: 精灵图的缺点:1.图片文件大: 2.图片放大和缩小会有失真的问题: 3.一旦图片制作完成想要更换非常复杂. 字体图标iconfont,展示 ...
BI神器Power Query（6）-- PQ从工作簿导入数据(2/2)
对于Power BI的用户多数都是Excel重度用户,因此在PQ中导入Excel工作薄文件是多数用户都会遇到的场景,本博文讲解从工作簿导入数据时的几个典型应用方式. 续前文:BI神器Power Que ...
BI神器Power Query（5）-- PQ从工作簿导入数据(1/2)
对于Power BI的用户多数都是Excel重度用户,因此在PQ中导入Excel工作薄文件是多数用户都会遇到的场景,本博文讲解从工作簿导入数据时的几个典型应用方式. 示例工作簿文件文件中有如下4个工作 ...
android 推送图标大小,Android状态栏图标大小 – 使用Cordova / Phonegap推送插件
我正在使用Ionic(Cordova AngularJS)开发 Android应用程序.有了它,我使用推送插件( https://github.com/phonegap-build/PushPlugi ...
图标设计原则_图标设计的7个原则
图标设计原则重点 (Top highlight) More in the iconography series:• Foundations of Iconography• 5 Ways to Cre ...
『精品素材』20套免费的网页小图标素材下载
在网页设计工作中,图标设计是最耗时的任务之一,但幸运的是网络上有很多慷慨的设计师分享的现成的免费小图标素材包可以下载使用.下面这个列表收集了20套免费的网页小图标,记得分享和推荐啊. Free 16p ...

工作274:ele-图标使用

工作274:ele-图标使用相关推荐

最新文章

热门文章