ruoyi-nbcio项目修改主页与主题

简介: ruoyi-nbcio项目修改主页与主题

为了配合后续项目,主页与主题都进行修改。

1、主页修改如下:

<template>
  <div class="dashboard-editor-container">
    <panel-group @handleSetLineChartData="handleSetLineChartData" />
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>
    
  </div>
</template>
<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>

2、主题修改如下:

module.exports = {
  /**
   * 侧边栏主题 深色主题theme-dark,浅色主题theme-light
   */
  sideTheme: 'theme-light',
  /**
   * 是否系统布局配置
   */
  showSettings: false,
  /**
   * 是否显示顶部导航
   */
  topNav: false,
  /**
   * 是否显示 tagsView
   */
  tagsView: true,
  /**
   * 是否固定头部
   */
  fixedHeader: false,
  /**
   * 是否显示logo
   */
  sidebarLogo: true,
  /**
   * 是否显示动态标题
   */
  dynamicTitle: false,
  /**
   * @type {string | array} 'production' | ['production', 'development']
   * @description Need show err logs component.
   * The default is only used in the production env
   * If you want to also use it in dev, you can pass ['production', 'development']
   */
  errorLog: 'production'
}



相关文章
|
前端开发
若依(ruoyi)前端Vue3 Element Plus Vite版样式修改
若依(ruoyi)前端Vue3 Element Plus Vite版样式修改
2609 0
|
Ubuntu
ubuntu 22.04 阿里源
ubuntu 22.04 阿里源
13050 0
|
SQL XML JavaScript
【若依Java】15分钟玩转若依二次开发,新手小白半小时实现前后端分离项目,springboot+vue3+Element Plus+vite实现Java项目和管理后台网站功能
摘要: 本文档详细介绍了如何使用若依框架快速搭建一个基于SpringBoot和Vue3的前后端分离的Java管理后台。教程涵盖了技术点、准备工作、启动项目、自动生成代码、数据库配置、菜单管理、代码下载和导入、自定义主题样式、代码生成、启动Vue3项目、修改代码、以及对代码进行自定义和扩展,例如单表和主子表的代码生成、树形表的实现、商品列表和分类列表的改造等。整个过程详细地指导了如何从下载项目到配置数据库,再到生成Java和Vue3代码,最后实现前后端的运行和功能定制。此外,还提供了关于软件安装、环境变量配置和代码自动生成的注意事项。
28364 73
若依修改,切换首页,改成自己想要跳转的login页
若依修改,切换首页,改成自己想要跳转的login页
|
12月前
|
监控 NoSQL Java
若依RuoYi项目环境搭建教程(RuoYi-Vue + RuoYi-Vue3版本)
若依(RuoYi)是一款基于Spring Boot和Vue.js的开源Java快速开发脚手架,支持OAuth2、JWT鉴权,集成多种安全框架和持久化框架。它提供了系统管理、监控管理、任务调度、代码生成等常用功能模块,适合中小型公司快速搭建Web应用。本文主要介绍若依框架的特点、版本发展、优缺点及项目部署步骤,帮助开发者快速上手并部署若依项目。
13405 3
若依RuoYi项目环境搭建教程(RuoYi-Vue + RuoYi-Vue3版本)
|
存储 前端开发 数据库
前端项目一键换肤vue+element(ColorPicker)
本文介绍了如何在前端项目中实现一键换肤功能,通过使用CSS变量和Element UI的颜色选择器组件(ColorPicker),并结合Vuex进行状态管理和持久化,实现主题颜色的动态切换。
447 3
前端项目一键换肤vue+element(ColorPicker)
|
监控 数据安全/隐私保护
若依修改---功能详解--权限控制,demo超级管理员,可以查看所有功能菜单,zhangsan,登录之后,仅可以查看线索的菜单,不同角色岗位,登录查看的内容不同,若依通过用户管理,角色管理,菜单管理控
若依修改---功能详解--权限控制,demo超级管理员,可以查看所有功能菜单,zhangsan,登录之后,仅可以查看线索的菜单,不同角色岗位,登录查看的内容不同,若依通过用户管理,角色管理,菜单管理控
阿里云国际版CDN网页打不开、页面报错该如何解决?
阿里云国际版CDN网页打不开、页面报错该如何解决?
|
SQL Oracle 关系型数据库
Oracle游标的定义与使用
Oracle游标的定义与使用
若依修改-----其他功能,包括参数设置,通知公告,日志管理,验证码控制开关在参数设置里,若依的注册页面是隐藏的,在src的login.vue的97行注册开发,修改成true,通知公告,促进组织内部信
若依修改-----其他功能,包括参数设置,通知公告,日志管理,验证码控制开关在参数设置里,若依的注册页面是隐藏的,在src的login.vue的97行注册开发,修改成true,通知公告,促进组织内部信