vue+elementui编写一个简单的首台管理模板首页 |
您所在的位置：网站首页 › 界面首页设计 › vue+elementui编写一个简单的首台管理模板首页 |
vue+elementui编写一个简单的首台管理模板首页
|
【绅士礼仪，先赞后看，鼓励作者，拒绝白嫖】话不多说，先上图
App组件 import CommonAside from "./components/CommonAside.vue"; import CommonHeader from "./components/CommonHeader.vue"; export default { name: "App", components: { CommonAside, CommonHeader, }, mounted(){ console.log(this) } } html,body{ margin: 0px; padding: 0px; } .el-header { background-color: #303133; color: #333; text-align: center; line-height: 60px; } .el-aside { background-color: #545c64; color: #333; text-align: center; line-height: 200px; height: 100vh; } .el-main { background-color: #F2F6FC; color: #333; text-align: center; padding: 10px; } body > .el-container { margin-bottom: 40px; } .el-container:nth-child(5) .el-aside, .el-container:nth-child(6) .el-aside { line-height: 260px; } .el-container:nth-child(7) .el-aside { line-height: 320px; }侧边栏组件（组件名：CommonAside.vue） {{isCollapse?'标题':'后台管理系统'}} {{item.label}} {{item.label}} {{subItem.label}} export default { name: "HelloWorld", props: { msg: String, }, data() { return { menu: [ { path: '/', name: 'home', label: '首页', icon: 's-home', url: 'Home/Home' }, { path: '/mall', name: 'mall', label: '商品管理', icon: 'video-play', url: 'MallManage/MallManage' }, { path: '/user', name: 'user', label: '用户管理', icon: 'user', url: 'UserManage/UserManage' }, { label: '其他', icon: 'location', children: [ { path: '/page01', name: 'page01', label: '页面1', icon: 'setting', url: 'Other/PageOne' }, { path: '/page02', name: 'page02', label: '页面2', icon: 'setting', url: 'Other/PageTwo' }] } ] } }, computed: { noChildren(){ return this.menu.filter(item => !item.children) }, hasChildren(){ return this.menu.filter(item => item.children) }, isCollapse(){ return this.$store.state.isCollapse; } } } .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 100vh; border: none; } .el-menu { border: none; } .el-menu-item-group__title { padding: 0; } h3{ color: aliceblue; line-height: 30px; } span,.el-menu-item{ font-size: 16px; }顶部组件（组件名：CommonHeader.vue） 首页 ; 我的 账单 消息 退出 export default { name: "HelloWorld", data() { return { //菜单控制 isCollapse: false, //头像地址 imgUrl:require('../assets/avatar.jpg') } }, methods: { menuHandler(){ this.$store.commit('MENUHANDLER') } } } .table { color: #C0C4CC; line-height: 60px; } .circle{ height: 60px; } .el-avatar{ margin: 5px 0 0 0; }首页组件 （组件名 Index.vue） Admin 管理员 上次登录时间: 2022/07/06 18:16 客户信息￥{{item.value}} {{item.name}} {{initBarEcharts()}} {{initPieEcharts()}} import * as echarts from 'echarts'; export default { name: "Index", data() { return { imgUrl:require('../assets/avatar.jpg'), value: new Date(), tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], countData:[ { name: '今日支付订单', value: 1200, icon: 'success', color: '#2ec7c9' }, { name: '今日收藏订单', value: 1200, icon: 'star-on', color: '#ffb980' }, { name: '今日取消订单', value: 1200, icon: 's-goods', color: '#5ab1ef' }, { name: '今日退款订单', value: 1200, icon: 'success', color: '#2ec7c9' }, { name: '本月支付订单', value: 1200, icon: 'star-on', color: '#ffb980' }, { name: '本月退款订单', value: 1200, icon: 's-goods', color: '#5ab1ef' } ] } },methods:{ //柱状图 initBarEcharts () { // 新建一个promise对象 let p = new Promise((resolve) => { resolve() }) //然后异步执行echarts的初始化函数 p.then(() => { // 此dom为echarts图标展示dom let myChart = echarts.init(this.$refs.barEcharts) let option = { title: { text: '销售表' }, tooltip: {}, legend: { data: ['今日销量','昨日销量'] }, xAxis: { data: ['华为', 'vivo', 'oppo', 'ipone', '小米', '三星'] }, yAxis: {}, series: [ { name: '今日销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }, { name: '昨日销量', type: 'bar', data: [10, 18, 34, 8, 12, 21] } ] } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }) }, //饼图 initPieEcharts () { let p = new Promise((resolve) => { resolve() }) //然后异步执行echarts的初始化函数 p.then(() => { let myChart = echarts.init(this.$refs.pieEcharts); let option= { tooltip: { trigger: 'item' }, legend: { top: '0%', left: 'left' }, series: [ { name: '订单信息', type: 'pie', radius: ['20%', '65%'], avoidLabelOverlap: false, label: { show: false, position: 'left' }, labelLine: { show: false, }, data: [ { value: 1048, name: '成交订单量' }, { value: 735, name: '退款订单量' }, { value: 580, name: '浏览量' }, { value: 484, name: '加购量' }, { value: 300, name: '预购量' } ] } ] } myChart.setOption(option); }) } } } .el-card__body { padding: 10px; } .userCard{ height: 180px; display: flex; border-bottom: 2px solid #DCDFE6; border-radius: 2px; } .userInfo{ width: auto; padding: 6% 0 0 6%; } .important-font{ font-weight: 900; font-size: 25px; } .secondary-font{ color: #909399; } .login-info{ height: 40px; text-align: left; color: #909399; } .tableInfo{ margin: 20px 0 0 0; } .OrderCard{ margin: 0 0 30px 30px; border: #DCDFE6 1px solid; border-radius: 10px; i{ width: 30%; line-height: 120px; font-size: 30px; color:#fff } div{ width: 300px; } } .el-card{ border: none; } .num{ display: flex; flex-wrap: wrap; } .graph{ margin: 15px 0 0 0; } .el-calendar{ height: 265px ; }路由配置（router_Config.js） import VueRouter from 'vue-router' import Index from '../views/Index.vue' export default new VueRouter({ routes:[ { path : "/", name: 'home', component: Index } ] })mian.js配置 import Vue from 'vue' import App from './App.vue'; import { Button,Container,Aside,Header,Main,Radio,RadioGroup,RadioButton,Menu,Submenu,MenuItem,MenuItemGroup,Row,Col,Avatar,Dropdown,DropdownMenu,DropdownItem,Card,Table,TableColumn,Calendar,Divider } from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import VueRouter from 'vue-router' import RouterConfig from './router/router_Config' Vue.use(VueRouter); Vue.use(Button); Vue.use(Radio); Vue.use(Container); Vue.use(Aside); Vue.use(Header); Vue.use(Main); Vue.use(RadioGroup); Vue.use(RadioButton); Vue.use(Menu); Vue.use(Submenu); Vue.use(MenuItem); Vue.use(MenuItemGroup); Vue.use(Row); Vue.use(Col); Vue.use(Avatar); Vue.use(Dropdown); Vue.use(DropdownMenu); Vue.use(DropdownItem); Vue.use(Card); Vue.use(Table); Vue.use(TableColumn); Vue.use(Calendar); Vue.use(Divider); Vue.config.productionTip = false new Vue({ el: '#app', router: RouterConfig, render: h => h(App), }) |
【本文地址】