|
@@ -1,203 +1,360 @@
|
|
|
+
|
|
|
<template>
|
|
|
<el-container>
|
|
|
- <el-aside width="200px">
|
|
|
+ <el-aside width="150pt">
|
|
|
<el-tree
|
|
|
- style="background: #E9EEF3; height:100%; padding:30px;"
|
|
|
- :data="data"
|
|
|
+ style="background: #E9EEF3; height:93vh; padding:15%;"
|
|
|
+ :data="bizOptions"
|
|
|
node-key="id"
|
|
|
- default-expand-all
|
|
|
- draggable
|
|
|
- :allow-drop="allowDrop"
|
|
|
- :allow-drag="allowDrag"
|
|
|
- @node-drag-start="handleDragStart"
|
|
|
- @node-drag-enter="handleDragEnter"
|
|
|
- @node-drag-leave="handleDragLeave"
|
|
|
- @node-drag-over="handleDragOver"
|
|
|
- @node-drag-end="handleDragEnd"
|
|
|
- @node-drop="handleDrop"
|
|
|
+ undraggable
|
|
|
+ :highlight-current="true"
|
|
|
+ @node-click="clickFun"
|
|
|
/>
|
|
|
</el-aside>
|
|
|
<el-container>
|
|
|
- <el-header style="height: auto; display:flex; text-align:right">
|
|
|
- <div style="flex:1;">
|
|
|
- <div class="headerStyle">姓名<el-input v-model="value" placeholder="标题" clearable style="width: 200px;" class="filter-item" /></div>
|
|
|
- </div>
|
|
|
- <div style="flex:1;">
|
|
|
- <div class="headerStyle">角色
|
|
|
- <el-select v-model="value" style="width: 200px;" clearable placeholder="优先级">
|
|
|
- <el-option v-for="item in value" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
+ <el-header style="height: auto; text-align:left">
|
|
|
+ <div style="margin: 4%;">
|
|
|
+ <el-input v-model="form.name" clearable filterable placeholder="姓名" style="width:22%;margin-right:5px;" />
|
|
|
+ <el-input v-model="form.email" clearable filterable placeholder="邮箱" style="width:22%;margin-right:5px;" />
|
|
|
+ <el-select v-model="form.role" width="200" clearable placeholder="请选择角色">
|
|
|
+ <el-option v-for="item in roleStrings" :key="item.value" :label="item.name" :value="item.name" />
|
|
|
+ </el-select>
|
|
|
+ <el-button type="primary" style="margin-left:8%;" @click="queryList(form)">查询</el-button>
|
|
|
+ <el-button type="primary" @click="createGetShow">新增</el-button>
|
|
|
</div>
|
|
|
- <div style="flex:1;">
|
|
|
- <div class="headerStyle">权限
|
|
|
- <el-select v-model="value" style="width: 200px;" clearable placeholder="状态">
|
|
|
- <el-option v-for="item in value" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="flex:1; display:flex;">
|
|
|
- <div style="flex:1;">
|
|
|
- <el-button class="headerStyle" type="primary" icon="el-icon-search">查询</el-button>
|
|
|
- </div>
|
|
|
- <div style="flex:1;">
|
|
|
- <el-button class="headerStyle" type="primary" icon="el-icon-search">新增</el-button>
|
|
|
+
|
|
|
+ <el-dialog :title="titleName" width="40%" :visible.sync="dialogFormVisible">
|
|
|
+ <el-form ref="MemberData" :model="MemberData" status-icon :rules="serviceDataRules" label-width="60px">
|
|
|
+ <el-form-item v-show="hide" label="id" prop="Id" :label-width="formLabelWidths">
|
|
|
+ <el-input v-model="MemberData.id" autocomplete="off" style="width:75%" :disabled="true" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="姓名" prop="name" :label-width="formLabelWidths">
|
|
|
+ <el-input v-model="MemberData.name" autocomplete="off" style="width:75%" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="邮箱" prop="email" :label-width="formLabelWidths">
|
|
|
+ <el-input v-model="MemberData.email" autocomplete="off" style="width:75%" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="业务线" prop="bizId" :label-width="formLabelWidths">
|
|
|
+ <el-select v-model="MemberData.bizId" placeholder="请选择业务线" style="width:75%">
|
|
|
+ <el-option v-for="item in bizOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="角色" prop="role" :label-width="formLabelWidths">
|
|
|
+ <el-select v-model="MemberData.role" placeholder="请选择角色" style="width:75%">
|
|
|
+ <el-option v-for="item in roleStrings" :key="item.value" :label="item.name" :value="item.name" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogFormVisible = false,clickClose()">关 闭</el-button>
|
|
|
+ <el-button v-show="Determine" type="primary" @click="titleName === '新增'?createMembers(MemberData):updateData(MemberData)">确 定</el-button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </el-dialog>
|
|
|
</el-header>
|
|
|
- <el-main>
|
|
|
- <el-table ref="multipleTable" :data="tableData" fit tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
|
|
|
- <el-table-column type="selection" width="55" align="center" />
|
|
|
- <el-table-column prop="name" label="姓名" width="200" align="center" />
|
|
|
- <el-table-column prop="name" label="域账号" width="120" align="center" />
|
|
|
- <el-table-column label="角色" width="200" align="center">
|
|
|
- <template slot-scope="scope">{{ scope.row.date }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="权限" width="200" align="center">
|
|
|
- <template slot-scope="scope">{{ scope.row.date }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="address" label="操作" min-width="180px" align="center" fixed="right">
|
|
|
- <template>
|
|
|
- <el-button size="mini" type="primary" icon="el-icon-search">删除</el-button>
|
|
|
- <el-button size="mini" type="primary" icon="el-icon-search">新增</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <el-pagination
|
|
|
- :current-page="curIndex"
|
|
|
- :page-sizes="[5, 10, 20]"
|
|
|
- :page-size="pageSize"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="100"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- />
|
|
|
- </el-main>
|
|
|
+ <el-table :data="list" style="width: 100%; height:570vh;" row-key="id" lazy align="center">
|
|
|
+ <el-table-column prop="id" label="ID" width="150" align="center"><template slot-scope="scope"><span>{{ scope.row.id }}</span></template></el-table-column>
|
|
|
+ <el-table-column prop="name" label="姓名" width="180" align="center"><template slot-scope="scope"><span>{{ scope.row.name }}</span></template> </el-table-column>
|
|
|
+ <el-table-column label="team" width="180" align="center"><template slot-scope="scope"><span>{{ scope.row.teamId }}</span></template></el-table-column>
|
|
|
+ <el-table-column label="邮箱" width="180" align="center"><template slot-scope="scope"><span>{{ scope.row.email }}</span></template></el-table-column>
|
|
|
+ <el-table-column prop="role" label="角色" width="150" align="center"><template slot-scope="scope"><span>{{ scope.row.role }}</span></template></el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" min-width="220px" fixed="right">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-button size="mini" type="primary" @click="dialogFormVisible = true,queryData(row)">查看</el-button>
|
|
|
+ <el-button size="mini" type="primary" @click="dialogFormVisible = true,changeData(row)">编辑</el-button>
|
|
|
+ <el-button size="mini" type="primary" @click="deleteCodeData(row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-footer>
|
|
|
+ <el-pagination :current-page="curIndex" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
|
|
+ </el-footer>
|
|
|
</el-container>
|
|
|
</el-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { createMembers, updateMembers, deleteMembers, getMemberList } from '@/api/teamPage.js'
|
|
|
|
|
|
+const operateType = {
|
|
|
+ OPER_ADD: 1, // 新增
|
|
|
+ OPER_EDIT: 2, // 编辑
|
|
|
+ OPER_QUERY: 3 // 查看
|
|
|
+}
|
|
|
export default {
|
|
|
name: 'TeamPage',
|
|
|
data() {
|
|
|
return {
|
|
|
- value: '',
|
|
|
+ centerDialogVisible: false,
|
|
|
+ dialogFormVisible: false,
|
|
|
+ Determine: true,
|
|
|
+ hide: true,
|
|
|
radioButton: 0,
|
|
|
- pageSize: 0,
|
|
|
- curIndex: 0,
|
|
|
- total: 0,
|
|
|
- data: [{
|
|
|
- id: 1,
|
|
|
- label: '代驾',
|
|
|
- children: [{
|
|
|
- id: 4,
|
|
|
- label: '订单',
|
|
|
- children: [{
|
|
|
- id: 9,
|
|
|
- label: '1 订单'
|
|
|
- }, {
|
|
|
- id: 10,
|
|
|
- label: '2 订单'
|
|
|
- }]
|
|
|
- }, {
|
|
|
- id: 6,
|
|
|
- label: '营销'
|
|
|
- }]
|
|
|
- }, {
|
|
|
- id: 2,
|
|
|
- label: '乘客端',
|
|
|
- children: [{
|
|
|
- id: 5,
|
|
|
- label: '小程序'
|
|
|
- }, {
|
|
|
- id: 6,
|
|
|
- label: 'wabapp'
|
|
|
- }]
|
|
|
- }],
|
|
|
+ titleName: '',
|
|
|
+ parameter: '',
|
|
|
+ startId: '',
|
|
|
+ startName: '',
|
|
|
+ parentFolderId: '',
|
|
|
+ formLabelWidths: '120px',
|
|
|
+ roleStrings: [{ value: 1, name: 'rd' }, { value: 2, name: 'qa' }, { value: 3, name: 'pm' }, { value: 4, name: 'other' }],
|
|
|
+ bizOptions: [{ label: '滴滴代驾', value: 261 }, { label: '企业级', value: 100 }, { label: 'prado', value: 330 }, { label: 'carbo', value: 331 }, { label: '海马', value: 309 }, { label: '万象', value: 102 }],
|
|
|
+ userInformation: localStorage.getItem('username'),
|
|
|
+ userNames: localStorage.getItem('realname'),
|
|
|
+ bizId: '',
|
|
|
+ curIndex: 1, // 初始页
|
|
|
+ pageSize: 10, // 每页的数据
|
|
|
+ total: 1,
|
|
|
+ userData: '',
|
|
|
+ folderName: '',
|
|
|
+ list: [],
|
|
|
+ form: {},
|
|
|
+ queryListData: {},
|
|
|
+ bizData: {},
|
|
|
+ MemberData: {
|
|
|
+ bizId: '',
|
|
|
+ teamId: '',
|
|
|
+ email: '',
|
|
|
+ role: '',
|
|
|
+ name: ''
|
|
|
+ },
|
|
|
+ formData: {
|
|
|
+ bizId: '',
|
|
|
+ teamId: '',
|
|
|
+ role: '',
|
|
|
+ email: '',
|
|
|
+ name: ''
|
|
|
+
|
|
|
+ },
|
|
|
+ serviceDataRules: {
|
|
|
+ name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
|
|
|
+ bizId: [{ required: true, message: '业务线不能为空', trigger: 'change' }],
|
|
|
+ teamId: [{ required: true, message: '业务线不能为空', trigger: 'change' }],
|
|
|
+ role: [{ required: true, message: '角色不能为空', trigger: 'change' }],
|
|
|
+ email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }]
|
|
|
+ },
|
|
|
defaultProps: {
|
|
|
children: 'children',
|
|
|
label: 'label'
|
|
|
},
|
|
|
- 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 弄'
|
|
|
- }],
|
|
|
multipleSelection: []
|
|
|
}
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.getAllList()
|
|
|
+ },
|
|
|
|
|
|
methods: {
|
|
|
- handleSelectionChange(val) {
|
|
|
- console.log(val)
|
|
|
- this.multipleSelection = val
|
|
|
+ updateDetailDialog(type) {
|
|
|
+ if (type === operateType.OPER_ADD) {
|
|
|
+ this.Determine = true
|
|
|
+ this.hide = false
|
|
|
+ } else if (type === operateType.OPER_EDIT) {
|
|
|
+ this.hide = true
|
|
|
+ this.Determine = true
|
|
|
+ } else if (type === operateType.OPER_QUERY) {
|
|
|
+ this.hide = true
|
|
|
+ this.Determine = false
|
|
|
+ }
|
|
|
},
|
|
|
- handleDragStart(node, ev) {
|
|
|
- console.log('drag start', node)
|
|
|
+ handleSizeChange(size) {
|
|
|
+ this.pageSize = size
|
|
|
+ this.getAllList({
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ curIndex: this.curIndex
|
|
|
+ })
|
|
|
},
|
|
|
- handleDragEnter(draggingNode, dropNode, ev) {
|
|
|
- console.log('tree drag enter: ', dropNode.label)
|
|
|
+ handleCurrentChange(curIndex) {
|
|
|
+ this.curIndex = curIndex
|
|
|
+ this.getAllList({
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ curIndex: this.curIndex
|
|
|
+ })
|
|
|
},
|
|
|
- handleDragLeave(draggingNode, dropNode, ev) {
|
|
|
- console.log('tree drag leave: ', dropNode.label)
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ alert('submit!')
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- handleDragOver(draggingNode, dropNode, ev) {
|
|
|
- console.log('tree drag over: ', dropNode.label)
|
|
|
+ resetForm(formName) {
|
|
|
+ this.$refs[formName].resetFields()
|
|
|
},
|
|
|
- handleDragEnd(draggingNode, dropNode, dropType, ev) {
|
|
|
- console.log('tree drag end: ', dropNode && dropNode.label, dropType)
|
|
|
+
|
|
|
+ // 全部列表
|
|
|
+ getAllList() {
|
|
|
+ var indexPage = {
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ curIndex: this.curIndex
|
|
|
+ }
|
|
|
+ getMemberList(indexPage).then(res => {
|
|
|
+ this.list = res.data
|
|
|
+ for (var a of this.list) {
|
|
|
+ var b = a.teamId
|
|
|
+ for (var c of this.bizOptions) {
|
|
|
+ b === c ? b = c.label : ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.total = res.total
|
|
|
+ })
|
|
|
},
|
|
|
- handleDrop(draggingNode, dropNode, dropType, ev) {
|
|
|
- console.log('tree drop: ', dropNode.label, dropType)
|
|
|
+
|
|
|
+ // 查看成员详情
|
|
|
+ queryData(vel) {
|
|
|
+ this.titleName = '查看详情'
|
|
|
+ this.MemberData = vel
|
|
|
+ this.updateDetailDialog(3)
|
|
|
},
|
|
|
- allowDrop(draggingNode, dropNode, type) {
|
|
|
- if (dropNode.data.label === '二级 3-1') {
|
|
|
- return type !== 'inner'
|
|
|
+
|
|
|
+ // 查询
|
|
|
+ queryList(val) {
|
|
|
+ console.log(val)
|
|
|
+ getMemberList(val).then(res => {
|
|
|
+ this.list = res.data
|
|
|
+ // this.form = {}
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ deleteCodeData(e) {
|
|
|
+ this.$confirm('确定删除吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.handleDelete(e)
|
|
|
+ this.$message({ type: 'success', message: '删除成功!' })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消删除'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除
|
|
|
+ handleDelete(e) {
|
|
|
+ this.userData = { id: '', ename: this.userInformation, name: this.userNames }
|
|
|
+ deleteMembers(e.id, this.userData).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.getAllList()
|
|
|
+ // this.queryList({ 'teamId': e.teamId })
|
|
|
+ this.successFun()
|
|
|
+ } else {
|
|
|
+ this.errorFun(response.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 编辑
|
|
|
+ changeData(vel) {
|
|
|
+ console.log(vel)
|
|
|
+ this.titleName = '编辑'
|
|
|
+ this.MemberData = vel
|
|
|
+ this.updateDetailDialog(2)
|
|
|
+ },
|
|
|
+
|
|
|
+ updateData(vel) {
|
|
|
+ if (vel === this.MemberData) {
|
|
|
+ this.bizData = {
|
|
|
+ name: vel.name,
|
|
|
+ id: vel.id,
|
|
|
+ role: vel.role,
|
|
|
+ email: vel.email,
|
|
|
+ teamId: vel.bizId,
|
|
|
+ bizId: vel.bizId
|
|
|
+ }
|
|
|
} else {
|
|
|
- return true
|
|
|
+ this.bizData = vel
|
|
|
+ this.bizData.name = vel.name
|
|
|
+ this.bizData.role = vel.role
|
|
|
+ this.bizData.email = vel.email
|
|
|
+ this.bizData.teamId = vel.teamId
|
|
|
+ this.bizData.bizId = vel.bizId
|
|
|
}
|
|
|
+ this.userData = { id: '', ename: this.userInformation, name: this.userNames }
|
|
|
+ this.objData = { teamMembersInfo: this.bizData, user: this.userData }
|
|
|
+ updateMembers(this.objData).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.dialogFormVisible = false
|
|
|
+ this.successFun()
|
|
|
+ this.getAllList()
|
|
|
+ } else {
|
|
|
+ this.errorFun()
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- allowDrag(draggingNode) {
|
|
|
- return draggingNode.data.label.indexOf('三级 3-2-2') === -1
|
|
|
+ // 新增需提示选择目录
|
|
|
+ createGetShow() {
|
|
|
+ this.titleName = '新增'
|
|
|
+ if (this.startId === '') {
|
|
|
+ this.$notify({ title: '提示', message: '请选择目录', duration: 2000 })
|
|
|
+ } else {
|
|
|
+ this.MemberData = {}
|
|
|
+ this.dialogFormVisible = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs['MemberData'].clearValidate()
|
|
|
+ })
|
|
|
+ this.updateDetailDialog(1)
|
|
|
+ }
|
|
|
},
|
|
|
- statusChange(e) {
|
|
|
+ clickFun(e) {
|
|
|
console.log(e)
|
|
|
- this.radioButton = e
|
|
|
+ this.startId = e.value
|
|
|
+ this.startName = e.label
|
|
|
+ getMemberList({ teamId: e.value }).then(res => {
|
|
|
+ this.list = res.data
|
|
|
+ })
|
|
|
},
|
|
|
- handleSizeChange(size) {
|
|
|
- this.pageSize = size
|
|
|
+
|
|
|
+ clickClose() {
|
|
|
+ this.startId = ''
|
|
|
},
|
|
|
- handleCurrentChange(curIndex) {
|
|
|
- this.curIndex = curIndex
|
|
|
+
|
|
|
+ // 新增
|
|
|
+ createMembers(vel) {
|
|
|
+ this.$refs['MemberData'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (vel !== '') {
|
|
|
+ this.bizData = {
|
|
|
+ name: vel.name,
|
|
|
+ id: vel.id,
|
|
|
+ role: vel.role,
|
|
|
+ email: vel.email,
|
|
|
+ teamId: this.startId,
|
|
|
+ bizId: vel.bizId
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.userData = { id: '', ename: this.userInformation, name: this.userNames }
|
|
|
+ this.objData = { teamMembersInfo: this.bizData, user: this.userData }
|
|
|
+ createMembers(this.objData).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.dialogFormVisible = false
|
|
|
+ this.successFun()
|
|
|
+ this.getAllList()
|
|
|
+ } else {
|
|
|
+ this.errorFun()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ successFun() {
|
|
|
+ this.$notify({ title: 'Success', message: 'Created Successfully', type: 'success', duration: 5000 })
|
|
|
+ },
|
|
|
+ errorFun() {
|
|
|
+ this.$notify({ title: 'Failed', message: 'Created Failed', type: 'error', duration: 5000 })
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
+ }}
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
- .headerStyle {
|
|
|
- margin:10px;
|
|
|
- }
|
|
|
+.headerStyle {
|
|
|
+ margin: 10px;
|
|
|
+}
|
|
|
</style>
|