kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

echarts label字段超出显示省略号

Browse Source
This commit is contained in:
shijingjing
2022-08-15 08:42:49 +08:00
parent 040cef5028
commit 40a73c2a34
2 changed files with 408 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

538
packages/conv/creditScore/AppGridMemberScore/components/gridScoreRules.vue
View File

@@ -6,41 +6,77 @@
<template slot="content">
<ai-search-bar>
<template #left>
<el-button type="primary" icon="iconfont iconAdd" @click="dialog=true">添加</el-button>
<el-cascader size="small" v-model="search.systemRuleId" :options="rulesOps" placeholder="请选择事件/类型" clearable
:props="rulesProps" @change="handleTypeSearch" ref="eventTypeSearch" />
<el-button
type="primary"
icon="iconfont iconAdd"
@click="dialog = true"
>添加</el-button
>
<el-cascader
size="small"
v-model="search.systemRuleId"
:options="rulesOps"
placeholder="请选择事件/类型"
clearable
:props="rulesProps"
@change="handleTypeSearch"
ref="eventTypeSearch"
/>
<ai-select
v-model="search.status"
@change="page.current = 1, getList()"
placeholder="请选择状态"
:selectList="$dict.getDict('integralRuleStatus')">
v-model="search.status"
@change="(page.current = 1), getList()"
placeholder="请选择状态"
:selectList="$dict.getDict('integralRuleStatus')"
>
</ai-select>
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="page.total" :dict="dict"
:current.sync="page.current"
:size.sync="page.size"
@getList="getList()">
:tableData="tableData"
:col-configs="colConfigs"
:total="page.total"
:dict="dict"
:current.sync="page.current"
:size.sync="page.size"
@getList="getList()"
>
<el-table-column slot="integral" label="分值" align="center">
<template slot-scope="{ row }">
<span
v-if="row.integralValueType == 1">
{{ row.integralStart > 0 ? '+' + row.integralStart : row.integralStart }} ~ {{ row.integralEnd > 0 ? '+' + row.integralEnd : row.integralEnd }}
</span>
<span v-else>{{ row.integral > 0 ? '+' : '' }}{{ row.integral }}</span>
<span v-if="row.integralValueType == 1">
{{
row.integralStart > 0
? "+" + row.integralStart
: row.integralStart
}}
~
{{
row.integralEnd > 0 ? "+" + row.integralEnd : row.integralEnd
}}
</span>
<span v-else
>{{ row.integral > 0 ? "+" : "" }}{{ row.integral }}</span
>
</template>
</el-table-column>
<el-table-column slot="options" label="操作" align="center" fixed="right" width="200">
<el-table-column
slot="options"
label="操作"
align="center"
fixed="right"
width="200"
>
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" @click="changeStatus(row.id, 0)" v-if="row.status == 1">
<el-button
type="text"
@click="changeStatus(row.id, 0)"
v-if="row.status == 1"
>
停用
</el-button>
<el-button type="text" @click="changeStatus(row.id, 1)" v-else>启用</el-button>
<el-button type="text" @click="changeStatus(row.id, 1)" v-else
>启用</el-button
>
<el-button type="text" @click="toEdit(row)">编辑</el-button>
<el-button type="text" @click="remove(row.id)">删除</el-button>
</div>
@@ -50,17 +86,40 @@
</template>
</ai-list>
<!-- <ai-empty v-else>暂无应用权限</ai-empty> -->
<ai-dialog :title="dialogTitle" :visible.sync="dialog" @onConfirm="onConfirm" @closed="closed" width="900px" >
<ai-dialog
:title="dialogTitle"
:visible.sync="dialog"
@onConfirm="onConfirm"
@closed="closed"
width="900px"
>
<div class="form_div">
<el-form ref="DialogForm" :model="form" :rules="formRules" size="small" label-suffix="：" label-width="150px">
<el-form
ref="DialogForm"
:model="form"
:rules="formRules"
size="small"
label-suffix="："
label-width="150px"
>
<el-form-item label="事件类型" prop="systemRuleId">
<el-cascader v-model="form.systemRuleId" ref="cascaderArr" :props="etOps" clearable placeholder="请选择" @change="handleTypeForm"
:options="rulesOps"/>
<el-cascader
v-model="form.systemRuleId"
ref="cascaderArr"
:props="etOps"
clearable
placeholder="请选择"
@change="handleTypeForm"
:options="rulesOps"
/>
</el-form-item>
<el-form-item label="自定义事件" v-if="form.systemRuleId == '自定义'">
<el-input placeholder="请输入,周期范围内,不填写表示不限制" v-model="form.ruleName" clearable/>
<el-input
placeholder="请输入,周期范围内,不填写表示不限制"
v-model="form.ruleName"
clearable
/>
</el-form-item>
<el-form-item label="规则">
@@ -95,15 +154,22 @@
</el-form-item> -->
<el-form-item label="周期范围" prop="scoringCycle">
<ai-select v-model="form.scoringCycle" :selectList="$dict.getDict('integralRuleScoringCycle')"/>
<ai-select
v-model="form.scoringCycle"
:selectList="$dict.getDict('integralRuleScoringCycle')"
/>
</el-form-item>
<el-form-item label="奖励次数">
<el-input placeholder="请输入,周期范围内,不填写表示不限制" v-model.number="form.numberLimit" clearable/>
<el-input
placeholder="请输入,周期范围内,不填写表示不限制"
v-model.number="form.numberLimit"
clearable
/>
</el-form-item>
<el-form-item label="积分分值" prop="integral">
<el-input placeholder="请输入" v-model="form.integral" clearable/>
<el-input placeholder="请输入" v-model="form.integral" clearable />
</el-form-item>
<el-form-item label="有效范围" prop="validRangeType" required>
@@ -113,29 +179,50 @@
</el-radio-group>
</el-form-item>
<el-form-item label="生效网格" :prop="form.validRangeType == 1? 'validRangeData' :''" :rules="[{required: true, message: '请选择生效网格', trigger: 'change'}]" v-if="form.validRangeType == 1">
<el-button type="text" @click="showGrid = true,beforeSelectTree()">{{ girdInfoList.length? '已选择':'请选择' }}</el-button>
<el-form-item
label="生效网格"
:prop="form.validRangeType == 1 ? 'validRangeData' : ''"
:rules="[
{ required: true, message: '请选择生效网格', trigger: 'change' },
]"
v-if="form.validRangeType == 1"
>
<el-button
type="text"
@click="(showGrid = true), beforeSelectTree()"
>{{ girdInfoList.length ? "已选择" : "请选择" }}</el-button
>
</el-form-item>
</el-form>
</div>
<ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true" :destroyOnClose="true" border width="720px" append-to-body>
<ai-dialog
title="选择网格"
:visible.sync="showGrid"
:customFooter="true"
:destroyOnClose="true"
border
width="720px"
append-to-body
>
<div class="grid">
<el-tree
:data="treeObj.treeList"
:props="treeObj.defaultProps"
node-key="id"
ref="tree"
:check-strictly="true"
show-checkbox
default-expand-all
:default-checked-keys="currCheckedKeys"
@check="onCheckChange">
:data="treeObj.treeList"
:props="treeObj.defaultProps"
node-key="id"
ref="tree"
:check-strictly="true"
show-checkbox
default-expand-all
:default-checked-keys="currCheckedKeys"
@check="onCheckChange"
>
</el-tree>
</div>
<div class="dialog-footer" slot="footer">
<el-button size="medium" @click="showGrid=false">取消</el-button>
<el-button type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
<el-button size="medium" @click="showGrid = false">取消</el-button>
<el-button type="primary" size="medium" @click="getCheckedTree()"
>确认</el-button
>
</div>
</ai-dialog>
</ai-dialog>
@@ -149,51 +236,89 @@ export default {
props: {
instance: Function,
dict: Object,
permissions: Function
permissions: Function,
},
data() {
return {
search: {
status: "",
status: "",
systemRuleId: "",
},
page: {current: 1, size: 10, total: 0},
page: { current: 1, size: 10, total: 0 },
colConfigs: [
{prop: "parentRuleName", label: "类型", dict: "integralRuleEventType"},
{prop: "ruleName", label: "事件", dict: "integralRuleEvent"},
{prop: "ruleType", label: "规则", dict: "integralRuleRuleType"},
{prop: "scoringCycle", label: "周期范围", dict: "integralRuleScoringCycle",render: (h, {row}) => {
return h('span', {
}, row.numberLimit.length? $dict.getLabel('integralRuleScoringCycle', row.scoringCycle):$dict.getLabel('integralRuleScoringCycle', row.scoringCycle) + row.numberLimit + '次')
}},
{slot: "integral",label: "积分分值", align: "center"},
{prop: "validRangeType", label: "有效范围", formart: v => v==0? '全局':'指定网格'},
{prop: "status", label: "状态", align: "center", width: 96, dict: "integralRuleStatus"},
{slot: "options", label: "操作", align: "center"},
{
prop: "parentRuleName",
label: "类型",
dict: "integralRuleEventType",
},
{ prop: "ruleName", label: "事件", dict: "integralRuleEvent" },
{ prop: "ruleType", label: "规则", dict: "integralRuleRuleType" },
{
prop: "scoringCycle",
label: "周期范围",
dict: "integralRuleScoringCycle",
render: (h, { row }) => {
return h(
"span",
{},
row.numberLimit.length
? $dict.getLabel("integralRuleScoringCycle", row.scoringCycle)
: $dict.getLabel("integralRuleScoringCycle", row.scoringCycle) +
row.numberLimit +
"次"
);
},
},
{ slot: "integral", label: "积分分值", align: "center" },
{
prop: "validRangeType",
label: "有效范围",
formart: (v) => (v == 0 ? "全局" : "指定网格"),
},
{
prop: "status",
label: "状态",
align: "center",
width: 96,
dict: "integralRuleStatus",
},
{ slot: "options", label: "操作", align: "center" },
],
tableData: [],
dialog: false,
form: {
ruleType: '0',
systemRuleId: '',
ruleName: '',
scoringCycle: '',
numberLimit: '',
integral: '',
validRangeType: '0',
validRangeData: ''
ruleType: "0",
systemRuleId: "",
ruleName: "",
scoringCycle: "",
numberLimit: "",
integral: "",
validRangeType: "0",
validRangeData: "",
},
formRules: {
systemRuleId: [{required: true, message: "请选择事件/类型", trigger: "change"}],
scoringCycle: [{required: true, message: "请选择周期范围", trigger: "change"}],
integral: [{required: true, pattern: /^\d*[.\d]\d?$/, message: "请输入积分分值,最多保留一位小数"}],
validRangeType: [{required: true, message: "请选择有效范围", trigger: "change"}],
systemRuleId: [
{ required: true, message: "请选择事件/类型", trigger: "change" },
],
scoringCycle: [
{ required: true, message: "请选择周期范围", trigger: "change" },
],
integral: [
{
required: true,
pattern: /^\d*[.\d]\d?$/,
message: "请输入积分分值,最多保留一位小数",
},
],
validRangeType: [
{ required: true, message: "请选择有效范围", trigger: "change" },
],
},
rulesOps: [],
rulesProps: {
label: "ruleName",
value: "id",
checkStrictly:true,
checkStrictly: true,
},
radio: 0,
showGrid: false,
@@ -207,140 +332,163 @@ export default {
},
girdInfoList: [],
currCheckedKeys: [],
rulueType: '0',
rulueType: "0",
};
},
created() {
this.$dict.load("integralRuleStatus", "integralRuleRuleType", 'integralRuleScoringCycle', 'integralRuleEvent', 'integralRuleEventType').then(() => {
this.getList()
this.getRulesList()
this.beforeSelectTree()
});
this.$dict
.load(
"integralRuleStatus",
"integralRuleRuleType",
"integralRuleScoringCycle",
"integralRuleEvent",
"integralRuleEventType"
)
.then(() => {
this.getList();
this.getRulesList();
this.beforeSelectTree();
});
},
methods: {
getList() {
this.instance.post(`/app/appintegralrule/list`, null, {
params: {
...this.search,
...this.page,
},
}).then(res => {
if (res?.data) {
this.tableData = res.data.records;
this.page.total = res.data.total;
}
});
this.instance
.post(`/app/appintegralrule/list`, null, {
params: {
...this.search,
...this.page,
},
})
.then((res) => {
if (res?.data) {
this.tableData = res.data.records;
this.page.total = res.data.total;
}
});
},
closed() {
this.form = {
ruleType: '0',
systemRuleId: '',
ruleName: '',
scoringCycle: '',
numberLimit: '',
integral: '',
validRangeType: '0',
validRangeData: ''
}
ruleType: "0",
systemRuleId: "",
ruleName: "",
scoringCycle: "",
numberLimit: "",
integral: "",
validRangeType: "0",
validRangeData: "",
};
},
toEdit(row) {
this.form = this.$copy(row)
this.form = this.$copy(row);
this.girdInfoList = this.form?.validRangeData?.split(",");
this.$nextTick(() => {
this.dialog = true
})
this.dialog = true;
});
},
remove(id) {
this.$confirm("删除后不可恢复，是否要删除该事项？", {
type: 'error'
type: "error",
}).then(() => {
this.instance.post(`/app/appintegralrule/delete?ids=${id}`).then((res) => {
if (res.code == 0) {
this.$message.success("删除成功！")
this.getList();
}
});
this.instance
.post(`/app/appintegralrule/delete?ids=${id}`)
.then((res) => {
if (res.code == 0) {
this.$message.success("删除成功！");
this.getList();
}
});
});
},
changeStatus(id, status) {
let text = status == 1 ? '启用' : '停用'
let text = status == 1 ? "启用" : "停用";
this.$confirm(`确定${text}该条规则？`).then(() => {
this.instance.post(`/app/appintegralrule/enableStatus?id=${id}`).then((res) => {
if (res.code == 0) {
this.$message.success(`${text}成功！`)
this.getList();
}
});
this.instance
.post(`/app/appintegralrule/enableStatus?id=${id}`)
.then((res) => {
if (res.code == 0) {
this.$message.success(`${text}成功！`);
this.getList();
}
});
});
},
onReset() {
this.page.current = 1
this.search.classification = ""
this.search.integralType = ""
this.search.ruleStatus = ""
this.page.current = 1;
this.search.classification = "";
this.search.integralType = "";
this.search.ruleStatus = "";
this.getList();
},
onConfirm() {
if(this.form.ruleType==1 && !this.form.ladderRule.length) {
return this.$message.error('请添加规则')
}
// if(this.form.ruleType==1 && !this.form.ladderRule.length) {
// return this.$message.error('请添加规则')
// }
this.$refs.DialogForm.validate((valid) => {
if (valid) {
let formData = this.$copy(this.form)
formData.ladderRule = JSON.stringify(formData.ladderRule)
formData.integral = formData.integral || 0
this.instance.post(`/app/appintegralrule/addOrUpdate`, formData).then((res) => {
if (res.code == 0) {
this.$message.success(`${this.isEdit ? '编辑成功' : '添加成功'}`)
this.onReset()
this.dialog = false;
}
});
let formData = this.$copy(this.form);
// formData.ladderRule = JSON.stringify(formData.ladderRule)
formData.integral = formData.integral || 0;
this.instance
.post(`/app/appintegralrule/addOrUpdate`, formData)
.then((res) => {
if (res.code == 0) {
this.$message.success(
`${this.isEdit ? "编辑成功" : "添加成功"}`
);
this.onReset();
this.dialog = false;
}
});
} else {
return false;
}
});
},
handleTypeSearch(v) {
this.search.systemRuleId = v?.[v.length - 1]
this.page.current = 1
this.$refs.eventTypeSearch.dropDownVisible = false
this.getList()
this.search.systemRuleId = v?.[v.length - 1];
this.page.current = 1;
this.$refs.eventTypeSearch.dropDownVisible = false;
this.getList();
},
handleTypeForm(v) {
if(this.dialog) {
this.form.systemRuleId = v?.[v.length - 1]
if (this.dialog) {
this.form.systemRuleId = v?.[v.length - 1];
}
},
handleDelete(i) {
this.$confirm("是否要删除该规则?").then(() => {
this.form.ladderRule.splice(i, 1)
}).catch(() => 0)
this.$confirm("是否要删除该规则?")
.then(() => {
this.form.ladderRule.splice(i, 1);
})
.catch(() => 0);
},
checkIntegral(v) {
return /\.\d{2,}$/.test(v) ? Math.abs(v).toFixed(1) : Math.abs(v)
return /\.\d{2,}$/.test(v) ? Math.abs(v).toFixed(1) : Math.abs(v);
},
getRulesList() {
this.instance.post(`/app/appintegralsystemrule/list?current=1&sizes=3000`).then(res=> {
if(res?.data) {
this.rulesOps = this.toTree(res.data.records)
this.rulesOps.push({
ruleName: '自定义',
id: '自定义'
})
}
})
this.instance
.post(`/app/appintegralsystemrule/list?current=1&sizes=3000`)
.then((res) => {
if (res?.data) {
this.rulesOps = this.toTree(res.data.records);
this.rulesOps.push({
ruleName: "自定义",
id: "自定义",
});
}
});
},
// 转树形结构
toTree(data) {
let result = [];
if (!Array.isArray(data)) {
return result
return result;
}
let map = {};
data.forEach(item => {
data.forEach((item) => {
map[item.id] = item;
});
data.forEach(item => {
data.forEach((item) => {
let parent = map[item.parentRuleId];
if (parent) {
(parent.children || (parent.children = [])).push(item);
@@ -354,13 +502,13 @@ export default {
girdToTree(data) {
let result = [];
if (!Array.isArray(data)) {
return result
return result;
}
let map = {};
data.forEach(item => {
data.forEach((item) => {
map[item.id] = item;
});
data.forEach(item => {
data.forEach((item) => {
let parent = map[item.parentGirdId];
if (parent) {
(parent.children || (parent.children = [])).push(item);
@@ -373,55 +521,77 @@ export default {
getCheckedTree() {
if (!this.$refs.tree.getCheckedNodes().length) {
return this.$message.error('请选择网格')
return this.$message.error("请选择网格");
}
this.$set(this.girdInfoList, this.currIndex, {
...this.$refs.tree.getCheckedNodes(),
checkType: true
})
this.form.validRangeData = this.$refs.tree.getCheckedNodes().map(e=> e.id).toString()
console.log(this.girdInfoList, this.$refs.tree.getCheckedNodes());
this.girdInfoList = this.$refs.tree.getCheckedNodes().map((item) => {
return { ...item, checkType: true };
});
// this.$set(this.girdInfoList, this.currIndex, {
// ...this.$refs.tree.getCheckedNodes(),
// checkType: true
// })
this.form.validRangeData = this.$refs.tree
.getCheckedNodes()
.map((e) => e.id)
.toString();
this.showGrid = false;
},
beforeSelectTree() {
this.treeObj.checkedKeys = [];
this.instance.post(`/app/appgirdinfo/listAll3`, null, null).then((res) => {
if (res.code == 0) {
this.treeObj.treeList = this.girdToTree(res.data)
this.girdInfoList.map((e) => {
this.treeObj.checkedKeys.push(e.id);
});
}
});
},
onCheckChange(e) {
this.$refs.tree.setChecked(e.id, true)
this.instance
.post(`/app/appgirdinfo/listAll3`, null, null)
.then((res) => {
if (res.code == 0) {
// res.data.forEach((item)=>{
// const isChecked= this.girdInfoList.find((checkedId)=>{
// return item.id===checkedId
// })
// if(isChecked) item.checkType=true
// })
// console.log(res.data)
this.treeObj.treeList = this.girdToTree(res.data);
this.girdInfoList.map((e) => {
this.treeObj.checkedKeys.push(e.id);
});
this.$nextTick(() => {
this.currCheckedKeys = this.girdInfoList;
this.$nextTick(() => {
this.$refs.tree?.setCheckedKeys(this.currCheckedKeys);
});
});
}
});
},
onCheckChange(e) {
this.$refs.tree.setChecked(e.id, true);
},
},
computed: {
isEdit() {
return !!this.form.id
return !!this.form.id;
},
dialogTitle() {
return this.isEdit ? "编辑积分规则" : "添加积分规则"
return this.isEdit ? "编辑积分规则" : "添加积分规则";
},
etOps() {
return {
value: "id",
label: "ruleName",
}
};
},
// currCheckedKeys() {
// if (this.girdInfoList && this.girdInfoList[this.currIndex] && this.girdInfoList[this.currIndex].id) {
// return [this.girdInfoList[this.currIndex].id]
// if (this.girdInfoList) {
// return this.girdInfoList
// }
// return []
// },
},
}
};
</script>
<style lang="scss" scoped>

63
packages/conv/creditScore/AppGridMemberScore/components/gridScoreStatistics.vue
View File

@@ -145,7 +145,7 @@ export default {
size: 10,
total: 0,
},
current: '1',
current: 1,
girdList: [],
time: [],
timeCheck: ['昨日','近7天','近30天','自定义'],
@@ -167,7 +167,9 @@ export default {
fileDownLoad: [],
userSortListX: [],
userSortListY: [],
girdSortListX: [],
girdSortListX: [
],
girdSortListY: [],
}
},
@@ -179,13 +181,6 @@ export default {
{ prop: "girdName", label: '所属网格', align: "center", width: "180px" },
{ prop: "eventDesc", label: '事件', align: "center",width: "200px" },
{ prop: "integralType", label: '类型', align: "center",width: "200px", dict:"integralType" },
// render: (h, {row}) => {
// return h('span', {
// style: {
// // color: row.status === '0' ? 'red' : '#333'
// }
// }, (row.integralCalcType == '0' ? `- ${row.integralCalcType}` : `+ ${row.integralCalcType}`))
// } },
{ slot: "changeIntegral", label: '积分变动', align: "center", },
{ prop: "nowIntegral", label: '剩余积分', align: "center", },
{ prop: "createTime", label: '时间', align: "center", },
@@ -232,12 +227,50 @@ export default {
this.userSortListX = res.data.userSortList.map(e=> e.userName).reverse()
this.userSortListY = res.data.userSortList.map(e=> e.changeIntegral).reverse()
this.girdSortListX = res.data.girdSortList.map(e=> e.girdName).reverse()
// this.girdSortListX = ['好家伙规定非官方多喝点黑胡椒发布会','好好发挥或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或']
this.girdSortListY = res.data.girdSortList.map(e=> e.changeIntegral).reverse()
this.getColEcherts1(this.userSortListX,this.userSortListY)
this.getColEcherts2(this.girdSortListX,this.girdSortListY)
}
})
},
// extension(chart){
// //判断是否创建过div框,如果创建过就不再创建了
// //该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
// var id = document.getElementById("extension");
// if(!id) {
// var div = "<div id = 'extension' sytle=\"display:block\"></div>";
// document.documentElement.append(div);
// }
// chart.on('mouseover', function(params) {
// //注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
// if(params.componentType == "xAxis") {
// //设置悬浮文本的位置以及样式
// document.getElementById('extension').style.className = "chartCss"
// // ({
// // "position": "absolute",
// // "color": "black",
// // "background":"white",
// // "font-family": "Arial",
// // "font-size": "12px",
// // "padding": "5px",
// // "display": "inline"
// // })
// // .text(params.value);
// document.documentElement.mousemove(function(event) {
// var xx = event.pageX - 10;
// var yy = event.pageY + 15;
// document.getElementById('extension').css('top', yy).style('left', xx);
// });
// }
// });
// chart.on('mouseout', function(params) {
// //注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
// if(params.componentType == "yAxis") {
// document.getElementById('extension').style('display', 'none');
// }
// });
// },
// 积分明细
getTableData() {
this.instance.post('/app/appintegraluser/girdIntegralDetail',null,{
@@ -386,6 +419,7 @@ export default {
]
}, true);
window.addEventListener("resize", this.onResize2)
// this.extension(this.myChart2)
},
onResize1() {
this.myChart1.resize()
@@ -597,6 +631,17 @@ export default {
}
}
}
.chartCss {
position: absolute;
color: black;
background:white;
font-family: Aril;
font-size: 12px;
padding: 5px;
display: inline;
}
::v-deep .el-dialog__footer {
text-align: center;
}