英文企业网站模板wordpress建设下载网站

当前位置： 首页 > news >正文

英文企业网站模板,wordpress建设下载网站,修改wordpress样式,做网站的程序员留备份前言 后台管理系统的核心就是用户管理、角色管理#xff08;含权限分配#xff09;、菜单管理#xff0c;以及一些业务管理。业务管理通常以及根据不同的角色进行了权限分配。本次任务完成用户管理页面。 一 界面设计 1.引用Element 的Container 布局容器。 以上次博客中…前言 后台管理系统的核心就是用户管理、角色管理含权限分配、菜单管理以及一些业务管理。业务管理通常以及根据不同的角色进行了权限分配。本次任务完成用户管理页面。 一 界面设计 1.引用Element 的Container 布局容器。 以上次博客中vue 搭建项目为例项目博客链接如下vue搭建项目。 Container 相关介绍连接;Element-ui 本项目采用如图所示布局 html引用代码如下 el-containerel-aside width200pxAside/el-asideel-containerel-headerHeader/el-headerel-mainMain/el-main/el-container/el-container将此段代码粘贴到原HomeView.vue的 el-row 修改如图所示 2.修改初始导航 删除App.vue中nav中内容。 3.修改Aside部分引入侧边导航栏 引用Element 的NavMenu导航菜单中的侧栏。侧边导航栏 侧边导航栏html 代码如下 el-aside width200px stylebackground-color: rgb(238, 241, 246)el-menu :default-openeds[1, 3] background-colorrgb(48,65,86)text-color#cccactive-text-colorredrouterel-submenu index1template slottitlei classel-icon-message/i导航一/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index2template slottitlei classel-icon-menu/i导航二/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index2-3选项3/el-menu-item/el-menu-item-groupel-submenu index2-4template slottitle选项4/templateel-menu-item index2-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index3template slottitlei classel-icon-setting/i导航三/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index3-1选项1/el-menu-itemel-menu-item index3-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index3-3选项3/el-menu-item/el-menu-item-groupel-submenu index3-4template slottitle选项4/templateel-menu-item index3-4-1选项4-1/el-menu-item/el-submenu/el-submenu/el-menu/el-aside 替换原代码el-aside,default-openeds[1, 3]可更改默认打开的导航。 4. 修改header部分 引用Element 的Dropdown下拉菜单中的基础用法,链接如下下拉菜单。使用此菜单替换原来el -Header。 替代下拉菜单的html 代码如下 el-header styletext-align: right; font-size: 12px; border-bottom: 1px solid red; line-height:60pxel-dropdowni classel-icon-setting stylemargin-right: 15px/iel-dropdown-menu slotdropdownel-dropdown-item查看/el-dropdown-itemel-dropdown-item新增/el-dropdown-itemel-dropdown-item删除/el-dropdown-item/el-dropdown-menu/el-dropdownspan王小虎/span/el-headerheader页面修改完成。 5.修改Main部分 引用Element 的Table表格的基础表格。表格连接如下表格 表格如下 el-mainel-table:datatableDatastripestylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table/el-main 表格内有数据需在script内添加数据 scriptexport default {data() {return {tableData: [{ //对应html中tableDatadate: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]}}} /script 还可以让数据程序生成条数代码如下 script // is an alias to /src import HelloWorld from /components/HelloWorld.vue export default {name: HomeView,data(){const item {date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄};return {tableData: Array(10).fill(item)}} } /script 完整截图 6.优化界面 新页面可能存在导航栏页面折叠后不能显示全屏边线层次不齐个人中心不符合实际个人登录后的状态表格数据没有分页功能等。 在assets文件中添加一个全局CSS样式gloable.css
html,body,div{margin:0;padding:0; } html,body{height: 100%; } main.js内添加
import Vue from vue import App from ./App.vue import router from ./router import store from ./store import ElementUI from element-ui;// 添加 import element-ui/lib/theme-chalk/index.css; // 添加 import ./assets/gloable.css //添加Vue.config.productionTip false Vue.use(ElementUI);// 添加element-uinew Vue({router,store,render: h h(App) }).$mount(#app) 分页功能加载main容器内 el-table下方此分页为前端分页 div stylepadding:10pxel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage4:page-sizes[5, 10, 15, 20]:page-size10layouttotal, sizes, prev, pager, next, jumper:total400/el-pagination /div 添加搜索区域放在el-table上方 div stylepadding:10pxel-input stylewidth:250px suffix-iconel-icon-search placeholder请输入名称搜索/el-inputel-input stylewidth:250px suffix-iconel-icon-email placeholder请输入邮箱搜索/el-inputel-input stylewidth:250px suffix-iconel-icon-position placeholder请输入地址搜索/el-inputel-button stylemargin-left:5px typeprimary搜索/el-button /div 添加常用操作按钮。 div stylemargin:10pxel-button typeprimary新增i classel-icon-circle-plus/i/el-buttonel-button typedanger批量删除i classel-icon-remove/i/el-buttonel-button typeprimary导入i classel-icon-bottom/i/el-buttonel-button typeprimary导出i classel-icon-top/i/el-button /div 常用按钮放在搜索后面 在表格区域添加常用操作按钮 在table内添加 el-table-column fixedright label操作 template slot-scopescopeel-button typesuccess sizesmall iconel-icon-edit编辑/el-buttonel-button typedanger sizesmall iconel-icon-delete删除/el-button/template /el-table-column 美化整体页面修改menu 运行如图所示 为了页面美观使其页面左对齐 添加text-align:left 修改后如图所示 完整代码 // An highlighted block templatediv classhomeel-container styleheight: 100%; border: 1px solid #eeeel-aside width200px stylebackground-color: rgb(238, 241, 246) el-menu :default-openeds[1, 3] background-colorrgb(48,65,86)text-color#cccactive-text-colorredstylemin-height:100%; overflow-x:hiddenrouterdiv styleheight:60px; line-height:60px; text-align:centerimg src../assets/logo.png stylewidth:20px;position:relative;top:5px;margin-right:5px/b stylecolor:white后台管理系统/b/divel-submenu index1template slottitlei classel-icon-message/i导航一/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index2template slottitlei classel-icon-menu/i导航二/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index2-3选项3/el-menu-item/el-menu-item-groupel-submenu index2-4template slottitle选项4/templateel-menu-item index2-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index3template slottitlei classel-icon-setting/i导航三/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index3-1选项1/el-menu-itemel-menu-item index3-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index3-3选项3/el-menu-item/el-menu-item-groupel-submenu index3-4template slottitle选项4/templateel-menu-item index3-4-1选项4-1/el-menu-item/el-submenu/el-submenu/el-menu/el-asideel-containerel-header styletext-align: right; font-size: 12px; border-bottom: 1px solid red; line-height:60pxel-dropdown stylewidth:100px; cursor:pointerspan王小虎/spani classel-icon-arrow-down stylemargin-left:5px/iel-dropdown-menu slotdropdownel-dropdown-item个人信息/el-dropdown-itemel-dropdown-item退出/el-dropdown-item/el-dropdown-menu/el-dropdown /el-headerel-main styletext-align: left;div stylepadding:10pxel-input stylewidth:250px suffix-iconel-icon-search placeholder请输入名称搜索/el-inputel-input stylewidth:250px suffix-iconel-icon-email placeholder请输入邮箱搜索/el-inputel-input stylewidth:250px suffix-iconel-icon-position placeholder请输入地址搜索/el-inputel-button stylemargin-left:5px typeprimary搜索/el-button/div div stylemargin:10pxel-button typeprimary新增i classel-icon-circle-plus/i/el-buttonel-button typedanger批量删除i classel-icon-remove/i/el-buttonel-button typeprimary导入i classel-icon-bottom/i/el-buttonel-button typeprimary导出i classel-icon-top/i/el-button /divel-table:datatableDatastripestylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-columnel-table-column fixedright label操作 template slot-scopescopeel-button typesuccess sizesmall iconel-icon-edit编辑/el-buttonel-button typedanger sizesmall iconel-icon-delete删除/el-button/template/el-table-column /el-tablediv stylepadding:10pxel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage4:page-sizes[5, 10, 15, 20]:page-size10layouttotal, sizes, prev, pager, next, jumper:total400/el-pagination /div/el-main/el-container/el-container/div /template script // is an alias to /src import HelloWorld from /components/HelloWorld.vueexport default {name: HomeView,data(){const item {date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄};return {tableData: Array(10).fill(item)}} } /script