parent
743ff5e560
commit
44a321d6e1
18 changed files with 1041 additions and 802 deletions
|
After Width: | Height: | Size: 436 B |
|
After Width: | Height: | Size: 411 B |
@ -1,271 +1,328 @@ |
|||||||
<template> |
<template> |
||||||
<div class="page"> |
<div class="page"> |
||||||
<h6 class="p-title">筛选</h6> |
<h6 class="p-title">筛选</h6> |
||||||
<div class="tool"> |
<div class="tool"> |
||||||
<ul class="filter"> |
<ul class="filter"> |
||||||
<li> |
<li> |
||||||
<el-input placeholder="请输入角色名称" prefix-icon="el-icon-search" v-model.trim="keyword" clearable></el-input> |
<el-input placeholder="请输入角色名称" |
||||||
</li> |
prefix-icon="el-icon-search" |
||||||
</ul> |
v-model.trim="keyword" |
||||||
<div> |
clearable></el-input> |
||||||
<el-button v-auth="'角色权限:新增角色'" type="info" round @click="addRole">新增角色</el-button> |
</li> |
||||||
<el-button v-auth="'角色权限:批量删除'" type="primary" round @click="delAllSelection">批量删除</el-button> |
</ul> |
||||||
</div> |
<div> |
||||||
</div> |
<el-button v-auth="'角色权限:新增角色'" |
||||||
|
type="info" |
||||||
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys"> |
round |
||||||
<el-table-column type="selection" width="55" align="center" :selectable="practiceSelectable" :reserve-selection="true"></el-table-column> |
@click="addRole">新增角色</el-button> |
||||||
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
<el-button v-auth="'角色权限:批量删除'" |
||||||
<el-table-column prop="roleName" label="角色名称" align="center" min-width="250" show-overflow-tooltip></el-table-column> |
type="primary" |
||||||
<el-table-column label="角色描述" min-width="400" align="center"> |
round |
||||||
<template slot-scope="scope"> |
@click="delAllSelection">批量删除</el-button> |
||||||
<el-input placeholder="该角色用于管理全部功能权限" v-model="scope.row.remark" disabled></el-input> |
</div> |
||||||
</template> |
</div> |
||||||
</el-table-column> |
|
||||||
<el-table-column label="操作" align="center" width="200"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<el-button v-auth="'角色权限:查看'" type="text" @click="showRole(scope.row)">查看</el-button> |
|
||||||
<el-button v-auth="'角色权限:编辑'" v-if="scope.row.roleName !== '超级管理员'" type="text" @click="editRole(scope.row)">编辑</el-button> |
|
||||||
<el-button v-auth="'角色权限:删除'" v-if="scope.row.roleName !== '超级管理员' && scope.row.roleName !== '管理员'" type="text" @click="handleDelete(scope.row)">删除</el-button> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
<div class="pagination"> |
|
||||||
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> |
|
||||||
</div> |
|
||||||
|
|
||||||
<el-dialog :title="isDetail ? '查看角色' : (isAdd ? '新增角色' : '编辑角色')" :visible.sync="roleVisible" width="30%" @close="closeRole" class="dialog" :close-on-click-modal="false"> |
<el-table :data="listData" |
||||||
<el-form ref="form" label-width="80px" :disabled="isDetail"> |
class="table" |
||||||
<el-form-item label="角色名称"> |
ref="table" |
||||||
<el-input v-model="form.roleName" placeholder="请输入角色名称"></el-input> |
stripe |
||||||
</el-form-item> |
header-align="center" |
||||||
<el-form-item label="角色描述"> |
@selection-change="handleSelectionChange" |
||||||
<el-input v-model="form.remark" placeholder="请输入角色描述" type="textarea" rows="5"></el-input> |
:row-key="getRowKeys"> |
||||||
</el-form-item> |
<el-table-column type="selection" |
||||||
<el-form-item prop="role" label="角色权限"> |
width="55" |
||||||
<div style="max-height: 300px; overflow: auto"> |
align="center" |
||||||
<el-tree |
:selectable="practiceSelectable" |
||||||
ref="per" |
:reserve-selection="true"></el-table-column> |
||||||
:data="permissions" |
<el-table-column type="index" |
||||||
show-checkbox |
width="60" |
||||||
default-expand-all |
label="序号" |
||||||
node-key="id" |
align="center"></el-table-column> |
||||||
:default-expanded-keys="checkedIds" |
<el-table-column prop="roleName" |
||||||
:default-checked-keys="checkedIds" |
label="角色名称" |
||||||
:props="defaultProps"> |
align="center" |
||||||
</el-tree> |
min-width="250" |
||||||
</div> |
show-overflow-tooltip></el-table-column> |
||||||
</el-form-item> |
<el-table-column label="角色描述" |
||||||
</el-form> |
min-width="400" |
||||||
<span slot="footer" class="dialog-footer" v-if="!isDetail"> |
align="center"> |
||||||
<el-button @click="roleVisible = false">取 消</el-button> |
<template slot-scope="scope"> |
||||||
<el-button type="primary" @click="saveData">确 定</el-button> |
<el-input placeholder="该角色用于管理全部功能权限" |
||||||
</span> |
v-model="scope.row.remark" |
||||||
</el-dialog> |
disabled></el-input> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" |
||||||
|
align="center" |
||||||
|
width="200"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button v-auth="'角色权限:查看'" |
||||||
|
type="text" |
||||||
|
@click="showRole(scope.row)">查看</el-button> |
||||||
|
<el-button v-auth="'角色权限:编辑'" |
||||||
|
v-if="scope.row.roleName !== '超级管理员'" |
||||||
|
type="text" |
||||||
|
@click="editRole(scope.row)">编辑</el-button> |
||||||
|
<el-button v-auth="'角色权限:删除'" |
||||||
|
v-if="scope.row.roleName !== '超级管理员' && scope.row.roleName !== '管理员'" |
||||||
|
type="text" |
||||||
|
@click="handleDelete(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background |
||||||
|
@current-change="currentChange" |
||||||
|
:current-page="page" |
||||||
|
layout="total, prev, pager, next" |
||||||
|
:total="total"></el-pagination> |
||||||
</div> |
</div> |
||||||
|
|
||||||
|
<el-dialog :title="isDetail ? '查看角色' : (isAdd ? '新增角色' : '编辑角色')" |
||||||
|
:visible.sync="roleVisible" |
||||||
|
width="30%" |
||||||
|
@close="closeRole" |
||||||
|
class="dialog" |
||||||
|
:close-on-click-modal="false"> |
||||||
|
<el-form ref="form" |
||||||
|
label-width="80px" |
||||||
|
:disabled="isDetail"> |
||||||
|
<el-form-item label="角色名称"> |
||||||
|
<el-input v-model="form.roleName" |
||||||
|
placeholder="请输入角色名称"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="角色描述"> |
||||||
|
<el-input v-model="form.remark" |
||||||
|
placeholder="请输入角色描述" |
||||||
|
type="textarea" |
||||||
|
rows="5"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="role" |
||||||
|
label="角色权限"> |
||||||
|
<div style="max-height: 300px; overflow: auto"> |
||||||
|
<el-tree ref="per" |
||||||
|
:data="permissions" |
||||||
|
show-checkbox |
||||||
|
default-expand-all |
||||||
|
node-key="id" |
||||||
|
:default-expanded-keys="checkedIds" |
||||||
|
:default-checked-keys="checkedIds" |
||||||
|
:props="defaultProps"> |
||||||
|
</el-tree> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" |
||||||
|
class="dialog-footer" |
||||||
|
v-if="!isDetail"> |
||||||
|
<el-button @click="roleVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" |
||||||
|
@click="saveData">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import util from "@/libs/util"; |
import util from "@/libs/util"; |
||||||
import Setting from "@/setting"; |
import Setting from "@/setting"; |
||||||
export default { |
export default { |
||||||
data() { |
data () { |
||||||
return { |
return { |
||||||
keyword: "", |
keyword: "", |
||||||
searchTimer: null, |
searchTimer: null, |
||||||
isDetail: false, |
isDetail: false, |
||||||
form: { |
form: { |
||||||
id: "", |
id: "", |
||||||
roleName: "", |
roleName: "", |
||||||
remark: "" |
remark: "" |
||||||
}, |
}, |
||||||
listData: [], |
listData: [], |
||||||
defaultProps: { |
defaultProps: { |
||||||
children: "children", |
children: "children", |
||||||
label: "name" |
label: "name" |
||||||
}, |
}, |
||||||
page: 1, |
page: 1, |
||||||
pageSize: 10, |
pageSize: 10, |
||||||
total: 0, |
total: 0, |
||||||
multipleSelection: [], |
multipleSelection: [], |
||||||
isAdd: true, |
isAdd: true, |
||||||
roleVisible: false, |
roleVisible: false, |
||||||
permissions: [], |
permissions: [], |
||||||
checkedIds: [], |
checkedIds: [], |
||||||
roleNameReapeat: false // 角色名称是否重复 |
roleNameReapeat: false // 角色名称是否重复 |
||||||
}; |
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
keyword: function (val) { |
||||||
|
clearTimeout(this.searchTimer); |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.getData(); |
||||||
|
}, 500); |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData () { |
||||||
|
this.$get(`${this.api.roleList}?page=${this.page}&size=${this.pageSize}&name=${util.encodeStr(this.keyword)}&platformId=1&port=0`).then(res => { |
||||||
|
this.listData = res.rolePage.records; |
||||||
|
this.total = res.rolePage.total; |
||||||
|
}).catch(res => { }); |
||||||
}, |
}, |
||||||
watch: { |
currentChange (val) { |
||||||
keyword: function(val) { |
this.page = val; |
||||||
clearTimeout(this.searchTimer); |
this.getData(); |
||||||
this.searchTimer = setTimeout(() => { |
|
||||||
this.getData(); |
|
||||||
}, 500); |
|
||||||
} |
|
||||||
}, |
}, |
||||||
mounted() { |
handleDelete (row) { |
||||||
this.getData(); |
this.$confirm("确定要删除吗？", "提示", { |
||||||
|
type: "warning" |
||||||
|
}).then(() => { |
||||||
|
this.$post(`${this.api.batchRemove}?roleIds=${row.id}`).then(res => { |
||||||
|
util.successMsg("删除成功"); |
||||||
|
this.getData(); |
||||||
|
}).catch(res => { }); |
||||||
|
}).catch(() => { }); |
||||||
}, |
}, |
||||||
methods: { |
getRowKeys (row) { |
||||||
getData() { |
return row.id; |
||||||
this.$get(`${this.api.roleList}?page=${this.page}&size=${this.pageSize}&name=${util.encodeStr(this.keyword)}&platformId=1&port=0`).then(res => { |
}, |
||||||
this.listData = res.rolePage.records; |
handleSelectionChange (val) { |
||||||
this.total = res.rolePage.total; |
this.multipleSelection = val; |
||||||
}).catch(res => {}); |
}, |
||||||
}, |
delAllSelection () { |
||||||
currentChange(val) { |
if (this.multipleSelection.length) { |
||||||
this.page = val; |
this.$confirm("确定要删除吗？", "提示", { |
||||||
|
type: "warning" |
||||||
|
}).then(() => { |
||||||
|
let ids = this.multipleSelection.map(item => { |
||||||
|
return item.id; |
||||||
|
}); |
||||||
|
this.$post(`${this.api.batchRemove}?roleIds=${ids.toString()}`).then(res => { |
||||||
|
this.$refs.table.clearSelection(); |
||||||
|
util.successMsg("删除成功"); |
||||||
this.getData(); |
this.getData(); |
||||||
}, |
}).catch(res => { }); |
||||||
handleDelete(row) { |
if (this.multipleSelection.length === this.listData.length && this.page > 1) { |
||||||
this.$confirm("确定要删除吗？", "提示", { |
this.handleCurrentChange(this.page - 1) |
||||||
type: "warning" |
} |
||||||
}).then(() => { |
}).catch(() => { }); |
||||||
this.$post(`${this.api.batchRemove}?roleIds=${row.id}`).then(res => { |
} else { |
||||||
util.successMsg("删除成功"); |
util.errorMsg("请先选择数据！"); |
||||||
this.getData(); |
} |
||||||
}).catch(res => {}); |
}, |
||||||
}).catch(() => {}); |
practiceSelectable (row, index) { |
||||||
}, |
let boolean = true; |
||||||
getRowKeys(row) { |
if (row.roleName == '超级管理员') { |
||||||
return row.id; |
boolean = false |
||||||
}, |
} else { |
||||||
handleSelectionChange(val) { |
boolean = true |
||||||
this.multipleSelection = val; |
} |
||||||
}, |
return boolean; |
||||||
delAllSelection() { |
}, |
||||||
if (this.multipleSelection.length) { |
closeRole () { |
||||||
this.$confirm("确定要删除吗？", "提示", { |
this.isDetail = false; |
||||||
type: "warning" |
this.form = { |
||||||
}).then(() => { |
id: "", |
||||||
let ids = this.multipleSelection.map(item => { |
roleName: "", |
||||||
return item.id; |
remark: "" |
||||||
}); |
}; |
||||||
this.$post(`${this.api.batchRemove}?roleIds=${ids.toString()}`).then(res => { |
this.checkedIds = []; |
||||||
this.$refs.table.clearSelection(); |
this.permissions = []; |
||||||
util.successMsg("删除成功"); |
}, |
||||||
this.getData(); |
// 获取权限菜单 |
||||||
}).catch(res => {}); |
getPer (row) { |
||||||
if(this.multipleSelection.length === this.listData.length && this.page>1) { |
if (!this.permissions.length) { |
||||||
this.handleCurrentChange(this.page - 1) |
this.$get(`${this.api.queryAllMenus}?platformId=${Setting.platformId}`).then(res => { |
||||||
} |
let data = res.children; |
||||||
}).catch(() => {}); |
// 因为有些菜单是后来去掉的，但是数据库里要去掉的话就得全部重新加了，所以就在前端来手动把不需要了的菜单给去掉，下面同理 |
||||||
} else { |
let yw = data.findIndex(n => n.name == "业务后台"); |
||||||
util.errorMsg("请先选择数据！"); |
yw != -1 && data.splice(yw, 1); |
||||||
} |
try { |
||||||
}, |
let system = data.findIndex(n => n.name == "系统设置"); |
||||||
practiceSelectable(row, index){ |
|
||||||
let boolean = true; |
|
||||||
if(row.roleName == '超级管理员'){ |
|
||||||
boolean = false |
|
||||||
}else{ |
|
||||||
boolean = true |
|
||||||
} |
|
||||||
return boolean; |
|
||||||
}, |
|
||||||
closeRole() { |
|
||||||
this.isDetail = false; |
|
||||||
this.form = { |
|
||||||
id: "", |
|
||||||
roleName: "", |
|
||||||
remark: "" |
|
||||||
}; |
|
||||||
this.checkedIds = []; |
|
||||||
this.permissions = []; |
|
||||||
}, |
|
||||||
// 获取权限菜单 |
|
||||||
getPer(row) { |
|
||||||
if (!this.permissions.length) { |
|
||||||
this.$get(`${this.api.queryAllMenus}?platformId=${Setting.platformId}`).then(res => { |
|
||||||
let data = res.children; |
|
||||||
// 因为有些菜单是后来去掉的，但是数据库里要去掉的话就得全部重新加了，所以就在前端来手动把不需要了的菜单给去掉，下面同理 |
|
||||||
let yw = data.findIndex(n => n.name == "业务后台"); |
|
||||||
yw != -1 && data.splice(yw, 1); |
|
||||||
try { |
|
||||||
let system = data.findIndex(n => n.name == "系统设置"); |
|
||||||
|
|
||||||
if (system != -1) { |
if (system != -1) { |
||||||
data[system].children[1].children.splice(4, 1); |
data[system].children[1].children.splice(4, 1); |
||||||
data[system].children[1].children.splice(1, 1); |
data[system].children[1].children.splice(1, 1); |
||||||
data[system].children[1].children.splice(0, 1); |
data[system].children[1].children.splice(0, 1); |
||||||
} |
|
||||||
} catch (error) { |
|
||||||
} |
|
||||||
this.permissions = data; |
|
||||||
if (row) { |
|
||||||
this.getDetail(row); |
|
||||||
} |
|
||||||
}).catch(res => { |
|
||||||
}); |
|
||||||
} |
|
||||||
}, |
|
||||||
addRole() { |
|
||||||
this.isAdd = true; |
|
||||||
this.getPer(); |
|
||||||
this.checkedIds = []; |
|
||||||
this.permissions.length && this.$refs.per.setCheckedNodes([]); |
|
||||||
this.roleVisible = true; |
|
||||||
}, |
|
||||||
// 递归处理勾选的权限 |
|
||||||
handleRolePer(data, permissions) { |
|
||||||
let result = data; |
|
||||||
if (permissions.length) { |
|
||||||
permissions.map(e => { |
|
||||||
if (result.includes(e.id) && e.children) { |
|
||||||
// 如果该权限下的子权限不是每个都勾选了,就把该权限的id从已勾选的id集合里去除,因为如果不去除的话,这个权限就会勾选,同时会把该权限下的所有子权限都一起勾选 |
|
||||||
e.children.every(n => result.includes(n)) || result.splice(result.indexOf(e.id), 1); |
|
||||||
} |
|
||||||
e.children && e.children.length && this.handleRolePer(data, e.children); |
|
||||||
}); |
|
||||||
} |
} |
||||||
return result; |
} catch (error) { |
||||||
}, |
} |
||||||
async getDetail(row) { // 查询详情 |
this.permissions = data; |
||||||
let res = await this.$get(`${this.api.obtainDetails}?id=${row.id}`); |
if (row) { |
||||||
this.form = res.role; |
this.getDetail(row); |
||||||
this.form.id = row.id; |
} |
||||||
this.checkedIds = this.handleRolePer(res.permissionList, this.permissions); |
}).catch(res => { |
||||||
this.$refs.per.setCheckedNodes(this.checkedIds); |
}); |
||||||
}, |
} |
||||||
showRole(row) { |
}, |
||||||
this.isDetail = true; |
addRole () { |
||||||
this.isAdd = false; |
this.isAdd = true; |
||||||
this.getPer(row); |
this.getPer(); |
||||||
this.roleVisible = true; |
this.checkedIds = []; |
||||||
}, |
this.permissions.length && this.$refs.per.setCheckedNodes([]); |
||||||
editRole(row) { |
this.roleVisible = true; |
||||||
this.isAdd = false; |
}, |
||||||
this.getPer(row); |
// 递归处理勾选的权限 |
||||||
this.roleVisible = true; |
handleRolePer (data, permissions) { |
||||||
}, |
let result = data; |
||||||
async saveData() { |
if (permissions.length) { |
||||||
if (!this.form.roleName) return util.warningMsg("请填写角色名称"); |
permissions.map(e => { |
||||||
if (!this.form.remark) return util.warningMsg("请填写角色描述"); |
if (result.includes(e.id) && e.children) { |
||||||
if (!this.$refs.per.getCheckedKeys().length) return util.warningMsg("请选择角色权限"); |
// 如果该权限下的子权限不是每个都勾选了,就把该权限的id从已勾选的id集合里去除,因为如果不去除的话,这个权限就会勾选,同时会把该权限下的所有子权限都一起勾选 |
||||||
// 获取已勾选的,和半勾选的(即子级没有全部勾选的节点),半勾选的一样要传给后端 |
e.children.every(n => result.includes(n)) || result.splice(result.indexOf(e.id), 1); |
||||||
let permissionId = [...this.$refs.per.getHalfCheckedKeys(), ...this.$refs.per.getCheckedKeys()]; |
} |
||||||
let data = { |
e.children && e.children.length && this.handleRolePer(data, e.children); |
||||||
...this.form, |
}); |
||||||
permissionId, |
} |
||||||
platformId:1, |
return result; |
||||||
}; |
}, |
||||||
if (this.form.id) { |
async getDetail (row) { // 查询详情 |
||||||
this.$post(this.api.saveOrUpdate, data).then(res => { |
let res = await this.$get(`${this.api.obtainDetails}?id=${row.id}`); |
||||||
util.successMsg("修改成功"); |
this.form = res.role; |
||||||
this.getData(); |
this.form.id = row.id; |
||||||
this.roleVisible = false; |
this.checkedIds = this.handleRolePer(res.permissionList, this.permissions); |
||||||
}).catch(res => {}); |
this.$refs.per.setCheckedNodes(this.checkedIds); |
||||||
} else { |
}, |
||||||
this.$post(this.api.saveOrUpdate, data).then(res => { |
showRole (row) { |
||||||
util.successMsg("新增成功"); |
this.isDetail = true; |
||||||
this.getData(); |
this.isAdd = false; |
||||||
this.roleVisible = false; |
this.getPer(row); |
||||||
}).catch(res => {}); |
this.roleVisible = true; |
||||||
} |
}, |
||||||
} |
editRole (row) { |
||||||
|
this.isAdd = false; |
||||||
|
this.getPer(row); |
||||||
|
this.roleVisible = true; |
||||||
|
}, |
||||||
|
async saveData () { |
||||||
|
if (!this.form.roleName) return util.warningMsg("请填写角色名称"); |
||||||
|
if (!this.form.remark) return util.warningMsg("请填写角色描述"); |
||||||
|
if (!this.$refs.per.getCheckedKeys().length) return util.warningMsg("请选择角色权限"); |
||||||
|
// 获取已勾选的,和半勾选的(即子级没有全部勾选的节点),半勾选的一样要传给后端 |
||||||
|
let permissionId = [...this.$refs.per.getHalfCheckedKeys(), ...this.$refs.per.getCheckedKeys()]; |
||||||
|
let data = { |
||||||
|
...this.form, |
||||||
|
permissionId, |
||||||
|
platformId: 1, |
||||||
|
}; |
||||||
|
if (this.form.id) { |
||||||
|
this.$post(this.api.saveOrUpdate, data).then(res => { |
||||||
|
util.successMsg("修改成功"); |
||||||
|
this.getData(); |
||||||
|
this.roleVisible = false; |
||||||
|
}).catch(res => { }); |
||||||
|
} else { |
||||||
|
this.$post(this.api.saveOrUpdate, data).then(res => { |
||||||
|
util.successMsg("新增成功"); |
||||||
|
this.getData(); |
||||||
|
this.roleVisible = false; |
||||||
|
}).catch(res => { }); |
||||||
|
} |
||||||
} |
} |
||||||
|
} |
||||||
}; |
}; |
||||||
</script> |
</script> |
||||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||||
|
|
||||||
</style> |
</style> |
||||||
@ -1,173 +1,174 @@ |
|||||||
.msg{ |
.msg { |
||||||
li{ |
li { |
||||||
margin-bottom: 10px; |
margin-bottom: 10px; |
||||||
border-top: 1px solid #f1f1f1; |
border-top: 1px solid #f1f1f1; |
||||||
&:first-child{ |
&:first-child { |
||||||
border-top: 0; |
border-top: 0; |
||||||
} |
} |
||||||
.li-wrap{ |
.li-wrap { |
||||||
position: relative; |
position: relative; |
||||||
display: flex; |
display: flex; |
||||||
justify-content: space-between; |
justify-content: space-between; |
||||||
padding: 16px 0; |
padding: 16px 0; |
||||||
.avatar{ |
.avatar { |
||||||
width: 48px; |
width: 48px; |
||||||
height: 48px; |
height: 48px; |
||||||
border-radius: 50%; |
border-radius: 50%; |
||||||
} |
} |
||||||
.texts{ |
.texts { |
||||||
flex: 1; |
flex: 1; |
||||||
margin-left: 24px; |
margin-left: 24px; |
||||||
.name{ |
.name { |
||||||
color: rgba(0, 0, 0, 0.85); |
color: rgba(0, 0, 0, 0.85); |
||||||
font-size: 16px; |
font-size: 16px; |
||||||
} |
} |
||||||
.des{ |
.date { |
||||||
margin: 8px 0; |
color: rgba(0, 0, 0, 0.45); |
||||||
} |
font-size: 14px; |
||||||
.date{ |
} |
||||||
color: rgba(0, 0, 0, 0.45); |
} |
||||||
font-size: 14px; |
.reply-name { |
||||||
} |
color: #9076ff; |
||||||
} |
} |
||||||
.action{ |
.action { |
||||||
display: inline-flex; |
display: inline-flex; |
||||||
align-items: center; |
align-items: center; |
||||||
margin-top: 15px; |
margin: 15px 10px 0 0; |
||||||
.icon{ |
.icon { |
||||||
margin: 0 5px; |
margin: 0 5px; |
||||||
color: $main-color; |
color: $main-color; |
||||||
font-size: 18px; |
font-size: 18px; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
&:hover{ |
&:hover { |
||||||
opacity: .8; |
opacity: 0.8; |
||||||
} |
} |
||||||
&:first-child{ |
&:first-child { |
||||||
margin-right: 5px; |
margin-right: 5px; |
||||||
} |
} |
||||||
&.del{ |
&.del { |
||||||
color: rgba(0, 0, 0, 0.65); |
color: rgba(0, 0, 0, 0.65); |
||||||
border: 1px solid rgba(0, 0, 0, 0.15); |
border: 1px solid rgba(0, 0, 0, 0.15); |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
.reply{ |
.reply { |
||||||
margin-top: 20px; |
margin-top: 20px; |
||||||
} |
} |
||||||
} |
} |
||||||
&.children{ |
&.children { |
||||||
margin-left: 72px; |
margin-left: 72px; |
||||||
padding-left: 24px; |
padding-left: 24px; |
||||||
background-color: rgba(0, 0, 0, 0.02); |
background-color: rgba(0, 0, 0, 0.02); |
||||||
border-radius: 8px; |
border-radius: 8px; |
||||||
li{ |
li { |
||||||
border-top-color: rgba(0, 0, 0, 0.06); |
border-top-color: rgba(0, 0, 0, 0.06); |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
.toggle{ |
.toggle { |
||||||
margin: 16px 0; |
margin: 16px 0; |
||||||
text-align: center; |
text-align: center; |
||||||
color: $main-color; |
color: $main-color; |
||||||
font-size: 14px; |
font-size: 14px; |
||||||
span{ |
span { |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
} |
} |
||||||
/deep/.quill{ |
/deep/.quill { |
||||||
background-color: #fff; |
background-color: #fff; |
||||||
} |
} |
||||||
|
|
||||||
/deep/.timeline { |
/deep/.timeline { |
||||||
padding-left: 9%; |
padding-left: 9%; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
.el-timeline-item { |
.el-timeline-item { |
||||||
padding-bottom: 40px; |
padding-bottom: 40px; |
||||||
} |
} |
||||||
.el-timeline-item__node--normal { |
.el-timeline-item__node--normal { |
||||||
top: 30px; |
top: 30px; |
||||||
} |
} |
||||||
.el-timeline-item__wrapper { |
.el-timeline-item__wrapper { |
||||||
top: 15px; |
top: 15px; |
||||||
padding-left: 40px; |
padding-left: 40px; |
||||||
} |
} |
||||||
.el-timeline-item__tail { |
.el-timeline-item__tail { |
||||||
height: 250%; |
height: 250%; |
||||||
border-left-width: 1px; |
border-left-width: 1px; |
||||||
} |
} |
||||||
.sign { |
.sign { |
||||||
position: relative; |
position: relative; |
||||||
display: inline-block; |
display: inline-block; |
||||||
margin-left: -12.5%; |
margin-left: -12.5%; |
||||||
font-size: 14px; |
font-size: 14px; |
||||||
color: #9076FF; |
color: #9076ff; |
||||||
} |
} |
||||||
.draft { |
.draft { |
||||||
.ver, .sign { |
.ver, |
||||||
color: #b1b1b1; |
.sign { |
||||||
} |
color: #b1b1b1; |
||||||
} |
} |
||||||
.ver { |
} |
||||||
display: flex; |
.ver { |
||||||
justify-content: space-between; |
display: flex; |
||||||
align-items: center; |
justify-content: space-between; |
||||||
padding-bottom: 10px; |
align-items: center; |
||||||
margin: -22px 0 20px; |
padding-bottom: 10px; |
||||||
font-size: 18px; |
margin: -22px 0 20px; |
||||||
color: #9076FF; |
font-size: 18px; |
||||||
border-bottom: 1px dashed #bfbfbf; |
color: #9076ff; |
||||||
} |
border-bottom: 1px dashed #bfbfbf; |
||||||
.withdraw { |
} |
||||||
margin-right: 10px; |
.withdraw { |
||||||
font-size: 13px; |
margin-right: 10px; |
||||||
color: #979797; |
font-size: 13px; |
||||||
} |
color: #979797; |
||||||
.action { |
} |
||||||
margin-left: 15px; |
.action { |
||||||
i { |
margin-left: 15px; |
||||||
margin-left: 8px; |
i { |
||||||
font-size: 14px; |
margin-left: 8px; |
||||||
color: #9076FF; |
font-size: 14px; |
||||||
cursor: pointer; |
color: #9076ff; |
||||||
&:hover { |
cursor: pointer; |
||||||
opacity: .9; |
&:hover { |
||||||
} |
opacity: 0.9; |
||||||
} |
} |
||||||
} |
} |
||||||
.detail { |
} |
||||||
li { |
.detail { |
||||||
margin-bottom: 20px; |
li { |
||||||
} |
margin-bottom: 20px; |
||||||
.name { |
} |
||||||
display: flex; |
.name { |
||||||
align-items: center; |
display: flex; |
||||||
margin-bottom: 5px; |
align-items: center; |
||||||
font-size: 15px; |
margin-bottom: 5px; |
||||||
font-weight: 600; |
font-size: 15px; |
||||||
img { |
font-weight: 600; |
||||||
width: 20px; |
img { |
||||||
margin-right: 5px; |
width: 20px; |
||||||
} |
margin-right: 5px; |
||||||
} |
|
||||||
.val { |
|
||||||
font-size: 14px; |
|
||||||
line-height: 1.8; |
|
||||||
white-space: pre-wrap; |
|
||||||
p { |
|
||||||
position: relative; |
|
||||||
color: #6a6a6a; |
|
||||||
&:before { |
|
||||||
content: ''; |
|
||||||
display: inline-block; |
|
||||||
width: 5px; |
|
||||||
height: 5px; |
|
||||||
margin: 0 10px 0 5px; |
|
||||||
vertical-align: middle; |
|
||||||
border-radius: 20px; |
|
||||||
background-color: #c5b8ff; |
|
||||||
} |
} |
||||||
} |
} |
||||||
} |
.val { |
||||||
} |
font-size: 14px; |
||||||
} |
line-height: 1.8; |
||||||
|
white-space: pre-wrap; |
||||||
|
p { |
||||||
|
position: relative; |
||||||
|
color: #6a6a6a; |
||||||
|
&:before { |
||||||
|
content: ''; |
||||||
|
display: inline-block; |
||||||
|
width: 5px; |
||||||
|
height: 5px; |
||||||
|
margin: 0 10px 0 5px; |
||||||
|
vertical-align: middle; |
||||||
|
border-radius: 20px; |
||||||
|
background-color: #c5b8ff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|||||||
Loading…
Reference in new issue