SAAS系统后台样式1.0.0

2019-04-18  本文已影响0人  找寻失落的忆

页面 操作按钮

// 创建、新增类按钮:

// 需跳转, 可使用 nuxt 标签追加class名  btn-add
<nuxt-link class="btn-add" to="/created">新增</nuxt-link>
// 非跳转可使用
<el-button  type="primary"></el-button>
// 或
<a class="btn-add" href="javascript:void(0);">编辑</a>

// 编辑、更新类按钮:

// 需跳转, 可使用 nuxt 标签追加class名  btn-update
<nuxt-link class="btn-update to="/update">编辑</nuxt-link>
//非跳转可使用
<el-button  type="success"></el-button>
// 或
<a class="btn-update" href="javascript:void(0);">编辑</a>

// 删除类按钮:

// 需跳转, 可使用 nuxt 标签追加class名   btn-del
<nuxt-link class="btn-del" to="/update">编辑</nuxt-link>
//非跳转可使用
<el-button  type="danger"></el-button>
// 或
<a class="btn-del" href="javascript:void(0);">编辑</a>

// 搜索类按钮

<el-button type="primary" icon="el-icon-search">搜索</el-button>  // 如跳转 请追加@click事件

// 其他类按钮
<el-button>打印</el-button>  // 如跳转 请追加@click事件

table 列表按钮

// 删除、导出按钮

// 需跳转 请直接使用 nuxt 标签进行跳转  添加class名  red
<nuxt-link class="red" to="/1">查看</nuxt-link>
// 非跳转  
<a class="red" href="javascript:void(0);">查看</a>

// 其他 

// 需跳转
<nuxt-link to="/1">查看</nuxt-link>
//非跳转
<a href="javascript:void(0);">查看</a>

按钮 与列表间距 10px
相邻按钮之间相距 10px

相邻块之间间距 10px

table列无特殊要求,尽量不要出现横向滚动条
table悬浮列尽可能 不要超过200px

上一篇 下一篇

猜你喜欢

热点阅读