前端工作总结279-ele-图标使用

简介: 前端工作总结279-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"
};

image.png

相关文章
|
5月前
|
前端开发
如何在前端项目中单独引入 ElementUI 图标以及使用
这篇文章介绍了如何在前端项目中单独引入Element UI的图标文件以及如何使用这些图标。
515 0
如何在前端项目中单独引入 ElementUI 图标以及使用
|
5月前
|
前端开发
前端ElementPlus框架中的几种图标按钮使用方式
本文介绍了如何在Element Plus前端框架中使用带有图标的按钮,包括设置按钮大小、图标大小、按钮类型以及如何为图标添加点击事件。
523 0
|
6月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用
循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用
|
8月前
|
前端开发 开发者 UED
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
【4月更文挑战第30天】本文介绍了在Flutter中管理图标、字体和样式的做法。Flutter提供`Icons`类用于内置矢量图标,支持第三方图标库如FontAwesome。自定义字体可通过添加字体文件至`assets`目录并配置`pubspec.yaml`,然后使用`TextStyle`设置。借助`ThemeData`,开发者能统一管理应用主题样式,局部样式可覆盖全局。通过集中管理样式,提升代码复用性和应用一致性。
206 0
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
|
8月前
|
前端开发 数据安全/隐私保护
开发指南016-前端图标规范
平台为了保证统一性,做了很多约定,例如按钮图标等
|
人工智能 前端开发
前端封装库/工具库的字体/图标之Iconfont
在前端开发中,图标是不可或缺的一部分。传统的图片素材虽然能够满足需求,但使用方式较为繁琐,还会增大项目的体积和加载时间。随着前端技术的发展,字体/图标库逐渐成为了替代传统图片素材的新选择。其中一个非常流行的字体/图标库就是 Iconfont。
383 1
|
前端开发 开发者
前端封装库/工具库的字体/图标之Font Awesome
随着前端技术的不断演进,前端封装库/工具库在Web开发中扮演着越来越重要的角色。其中,字体/图标工具库可以为Web应用程序提供美观、一致和易于管理的图标。而Font Awesome是一个非常受欢迎和广泛使用的字体/图标库。今天我们将探讨一下Font Awesome这个实用工具库。
461 1
|
前端开发
前端学习笔记202305学习笔记第二十二天-vue3.0-图标库安装使用
前端学习笔记202305学习笔记第二十二天-vue3.0-图标库安装使用
64 0
|
前端开发 JavaScript
前端动画(动态)图标库收集
前端动画(动态)图标库收集
175 0
|
前端开发
前端代码分享——霓虹灯图标菜单特效(内含源码)
前端代码分享——霓虹灯图标菜单特效(内含源码)

热门文章

最新文章