This commit is contained in:
xiongchengqiang 2020-12-01 17:47:44 +08:00
parent 6c0aab6d87
commit 8ba490fb4d
2 changed files with 608 additions and 501 deletions

View File

@ -1,27 +1,40 @@
<template> <template>
<div class='table'> <div class='table'>
<div v-if="obj.recortModelDtos.length !== 0" class="table-list"> <div v-if="obj.recortModelDtos.length !== 0"
class="table-list">
<div class="table-header"> <div class="table-header">
<div class="table-left name">维度</div> <div class="table-left name">维度</div>
<div class="table-content-right-item" style="flex:1;"> <div class="table-content-right-item"
style="flex:1;">
<div class="table-header-flex names ">名称</div> <div class="table-header-flex names ">名称</div>
<div class="table-header-flex pre kaohe">考核标准</div> <div class="table-header-flex pre kaohe">考核标准</div>
<div class="table-header-flex jieguo" v-if="tableInfo.result || tableAuth.showResult">结果值</div> <div class="table-header-flex jieguo"
<div class="table-header-flex quanzhomng" style="flex:none;">权重({{Math.round((obj.weight * 100)*1000)/1000}}%)</div> v-if="tableInfo.result || tableAuth.showResult">结果值</div>
<div class="table-header-flex pingfen" v-if="tableInfo.score || tableAuth.showScore">上级评分</div> <div class="table-header-flex quanzhomng"
<div class="table-header-flex defen" style="flex:none;" v-if="tableInfo.score || tableAuth.showScore">得分</div> style="flex:none;">权重({{Math.round((obj.weight * 100)*1000)/1000}}%)</div>
<div class="table-header-flex pingfen" v-if="tableInfo.score || tableAuth.showScore">评分说明</div> <div class="table-header-flex pingfen"
v-if="tableInfo.score || tableAuth.showScore">上级评分</div>
<div class="table-header-flex defen"
style="flex:none;"
v-if="tableInfo.score || tableAuth.showScore">得分</div>
<div class="table-header-flex pingfen"
v-if="tableInfo.score || tableAuth.showScore">评分说明</div>
</div> </div>
</div> </div>
<div v-for="(item,index) in ((tableInfo.score || tableAuth.showScore)?obj.recortModelDtos:obj.recortModelDtos.slice(0,obj.recortModelDtos.length-1))" :key="index" class="table-content"> <div v-for="(item,index) in ((tableInfo.score || tableAuth.showScore)?obj.recortModelDtos:obj.recortModelDtos.slice(0,obj.recortModelDtos.length-1))"
:key="index"
class="table-content">
<div class="table-content-left table-left name"> <div class="table-content-left table-left name">
<div v-for="(i,indexs) in item.name" :key="indexs"> <div v-for="(i,indexs) in item.name"
:key="indexs">
{{i}} {{i}}
</div> </div>
</div> </div>
<div class="table-content-right"> <div class="table-content-right">
<div v-for="(child) in item.detailDtos" :key="child.id" class="table-content-right-item"> <div v-for="(child) in item.detailDtos"
:key="child.id"
class="table-content-right-item">
<div class="names"> <div class="names">
<span> {{child.target || ''}}</span> <span> {{child.target || ''}}</span>
</div> </div>
@ -30,86 +43,137 @@
{{child.keyResult || ''}} {{child.keyResult || ''}}
</pre> </pre>
</div> </div>
<div class='pre jieguo' v-if="tableInfo.result || tableAuth.showResult"> <div class='pre jieguo'
<el-input v-if="tableInfo.result" type="textarea" :rows="12" size="mini" placeholder="请输入内容" v-model="child.checkResult" clearable></el-input> v-if="tableInfo.result || tableAuth.showResult">
<el-input v-if="tableInfo.result"
type="textarea"
:rows="12"
size="mini"
placeholder="请输入内容"
v-model="child.checkResult"
clearable></el-input>
<pre v-else>{{child.checkResult || '--'}}</pre> <pre v-else>{{child.checkResult || '--'}}</pre>
</div> </div>
<div class="quanzhomng" style="flex:none;"> <div class="quanzhomng"
style="flex:none;">
{{( Math.round((child.checkWeight * 100) * 1000) / 1000 )}}% {{( Math.round((child.checkWeight * 100) * 1000) / 1000 )}}%
</div> </div>
<div v-if="tableInfo.score || tableAuth.showScore" class="pingfen" > <div v-if="tableInfo.score || tableAuth.showScore"
class="pingfen">
<!-- gradeGroupId=== 1 下拉 --> <!-- gradeGroupId=== 1 下拉 -->
<el-select v-if="tableInfo.score && obj.gradeGroupId===1" style="width:115px;" size="mini" v-model="child.scoreDtos[child.scoreDtos.length-1].acquireScore"> <el-select v-if="tableInfo.score && obj.gradeGroupId===1"
<el-option style="width:115px;"
v-for="item in scoreList" size="mini"
v-model="child.scoreDtos[child.scoreDtos.length-1].acquireScore">
<el-option v-for="item in scoreList"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.score"> :value="item.score">
</el-option> </el-option>
</el-select> </el-select>
<el-input v-if="tableInfo.score && obj.gradeGroupId===2" style="width:115px;" size="mini" placeholder="请输入评分值" v-model="child.scoreDtos[child.scoreDtos.length-1].acquireScore" clearable></el-input> <el-input v-if="tableInfo.score && obj.gradeGroupId===2"
style="width:115px;"
size="mini"
placeholder="请输入评分值"
v-model="child.scoreDtos[child.scoreDtos.length-1].acquireScore"
clearable></el-input>
<span v-if="!tableInfo.score">{{handleScore(child.scoreDtos[child.scoreDtos.length-1].acquireScore)}}</span> <span v-if="!tableInfo.score">{{handleScore(child.scoreDtos[child.scoreDtos.length-1].acquireScore)}}</span>
</div> </div>
<div class="defen" style="flex:none;" v-if="tableInfo.score || tableAuth.showScore"> <div class="defen"
style="flex:none;"
v-if="tableInfo.score || tableAuth.showScore">
<span>{{child.scoreDtos[child.scoreDtos.length-1].acquireScore || '--'}}</span> <span>{{child.scoreDtos[child.scoreDtos.length-1].acquireScore || '--'}}</span>
</div> </div>
<div class='pre pingfen' v-if="tableInfo.score || tableAuth.showScore"> <div class='pre pingfen'
<el-input v-if="tableInfo.score" style="width:200px;" :rows="12" size="mini" type="textarea" placeholder="请输入内容" v-model="child.scoreComment" clearable></el-input> v-if="tableInfo.score || tableAuth.showScore">
<el-input v-if="tableInfo.score"
style="width:200px;"
:rows="12"
size="mini"
type="textarea"
placeholder="请输入内容"
v-model="child.scoreComment"
clearable></el-input>
<span v-else>{{child.scoreComment || '--'}}</span> <span v-else>{{child.scoreComment || '--'}}</span>
</div> </div>
</div> </div>
<div v-if="item.detailDtos.length ===0 && item.name !=='总分'" class="table-content-right-item"> <div v-if="item.detailDtos.length ===0 && item.name !=='总分'"
class="table-content-right-item">
<div class="names"> <div class="names">
</div> </div>
<div class="kaohe pre"> <div class="kaohe pre">
</div> </div>
<div class='jieguo' v-if="tableInfo.result || tableAuth.showResult"> <div class='jieguo'
v-if="tableInfo.result || tableAuth.showResult">
</div> </div>
<div class="quanzhomng " style="flex:none;"> <div class="quanzhomng "
style="flex:none;">
</div> </div>
<div class='pingfen' v-if="tableInfo.score || tableAuth.showScore"> <div class='pingfen'
v-if="tableInfo.score || tableAuth.showScore">
</div> </div>
<div class="defen" style="flex:none;" v-if="tableInfo.score || tableAuth.showScore"> <div class="defen"
style="flex:none;"
v-if="tableInfo.score || tableAuth.showScore">
</div> </div>
<div class='pingfen' v-if="tableInfo.score || tableAuth.showScore"> <div class='pingfen'
v-if="tableInfo.score || tableAuth.showScore">
</div> </div>
</div> </div>
<div v-if="item.name==='总分'" class="table-content-right-item"> <div v-if="item.name==='总分'"
class="table-content-right-item">
<div class="names"> <div class="names">
</div> </div>
<div class="kaohe pre"> <div class="kaohe pre">
</div> </div>
<div class='jieguo' v-if="tableInfo.result || tableAuth.showResult"> <div class='jieguo'
v-if="tableInfo.result || tableAuth.showResult">
</div> </div>
<div class="quanzhomng pingfen" style="flex:none;"> <div class="quanzhomng pingfen"
style="flex:none;">
</div> </div>
<div class="pingfen" v-if="tableInfo.score || tableAuth.showScore"> <div class="pingfen"
v-if="tableInfo.score || tableAuth.showScore">
{{score.scoreLevel}} {{score.scoreLevel}}
</div> </div>
<div class="defen" style="flex:none;" v-if="tableInfo.score || tableAuth.showScore"> <div class="defen"
style="flex:none;"
v-if="tableInfo.score || tableAuth.showScore">
{{score.lastScore}} {{score.lastScore}}
</div> </div>
<div class="pingfen" v-if="tableInfo.score || tableAuth.showScore"> <div class="pingfen"
v-if="tableInfo.score || tableAuth.showScore">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div v-else class='nojixiao'> <div v-else
<img src="./imgs/nojixiao.png" alt=""> class='nojixiao'>
<img src="./imgs/nojixiao.png"
alt="">
<div class="commonFont"> <div class="commonFont">
未制定绩效目标暂无数据 未制定绩效目标暂无数据
</div> </div>
</div> </div>
<div v-if="tableInfo.result || tableInfo.score" class="table-bottom"> <div v-if="tableInfo.result || tableInfo.score"
class="table-bottom">
<div class="table-bottom-content"> <div class="table-bottom-content">
<el-button size='small' @click="handleCancelResult" plain>取消</el-button> <el-button size='small'
<el-button size='small' :loading='loadingZan' @click="handleSaveDetail()" plain>暂存</el-button> @click="handleCancelResult"
<el-button size='small' :loading='loadingTi' @click="handleGetNext" type="primary" >{{tableInfo.result?'提交结果值':'提交评分'}}</el-button> plain>取消</el-button>
<el-button size='small'
:loading='loadingZan'
@click="handleSaveDetail()"
plain>暂存</el-button>
<el-button size='small'
:loading='loadingTi'
@click="handleGetNext"
type="primary">{{tableInfo.result?'提交结果值':'提交评分'}}</el-button>
</div> </div>
</div> </div>
</div> </div>
@ -256,7 +320,7 @@ export default {
.jieguo { .jieguo {
width: 260px !important; width: 260px !important;
flex: none !important; flex: none !important;
.center() .center();
} }
.name { .name {
.center(); .center();
@ -286,7 +350,6 @@ export default {
font-size: 12px; font-size: 12px;
border: 1px solid @borderColor; border: 1px solid @borderColor;
border-bottom: none; border-bottom: none;
} }
.table-header { .table-header {
display: flex; display: flex;
@ -295,11 +358,10 @@ export default {
// border: 1px solid @borderColor; // border: 1px solid @borderColor;
> div { > div {
background: #f5f5f5; background: #f5f5f5;
// padding: 10px; // padding: 10px;
border-bottom: 1px solid @borderColor;; border-bottom: 1px solid @borderColor;
border-right: 1px solid @borderColor;; border-right: 1px solid @borderColor;
} }
> div:last-child { > div:last-child {
border-right: none; border-right: none;
@ -340,7 +402,7 @@ export default {
flex: 1 1 auto; flex: 1 1 auto;
flex-shrink: 0; flex-shrink: 0;
// height: 100%; // height: 100%;
border-bottom: 1px solid @borderColor;; border-bottom: 1px solid @borderColor;
} }
> div:last-child { > div:last-child {
// border-bottom: none; // border-bottom: none;
@ -349,7 +411,6 @@ export default {
background: #f5f5f5; background: #f5f5f5;
} }
&-item { &-item {
> div { > div {
border-right: 1px solid @borderColor; border-right: 1px solid @borderColor;
padding: 10px; padding: 10px;
@ -399,7 +460,8 @@ export default {
background: #fff; background: #fff;
justify-content: space-between; justify-content: space-between;
border-radius: 40px; border-radius: 40px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12),
0 1px 6px 0 rgba(0, 0, 0, 0.12);
&-left { &-left {
line-height: 40px; line-height: 40px;
font-size: 14px; font-size: 14px;
@ -452,12 +514,13 @@ export default {
margin-top: 15px; margin-top: 15px;
width: 100%; width: 100%;
border: 1px solid #e9eaec; border: 1px solid #e9eaec;
border-collapse:collapse border-collapse: collapse;
} }
th { th {
background-color: #f8f8f9; background-color: #f8f8f9;
} }
th,td{ th,
td {
padding: 5px; padding: 5px;
border: 1px solid #e9eaec; border: 1px solid #e9eaec;
text-align: center; text-align: center;
@ -465,6 +528,5 @@ export default {
line-height: 30px; line-height: 30px;
} }
td { td {
} }
</style> </style>

View File

@ -1,15 +1,19 @@
<template> <template>
<div class='table'> <div class='table'>
<div v-if="obj.recortModelDtos.length !== 0" class="table-list commonFont"> <div v-if="obj.recortModelDtos.length !== 0"
class="table-list commonFont">
<div class="table-header"> <div class="table-header">
<div class="title table-left weidu">维度</div> <div class="title table-left weidu">维度</div>
<div class="title table-header-flex name">名称</div> <div class="title table-header-flex name">名称</div>
<div class="title table-header-flex kaohe">考核标准</div> <div class="title table-header-flex kaohe">考核标准</div>
<div class="title table-header-flex jieguo" v-if="tableInfo.result || tableAuth.showResult">结果值</div> <div class="title table-header-flex jieguo"
v-if="tableInfo.result || tableAuth.showResult">结果值</div>
<div class="title table-header-flex quanzhong">权重({{Math.round((obj.weight * 100)*1000)/1000}}%)</div> <div class="title table-header-flex quanzhong">权重({{Math.round((obj.weight * 100)*1000)/1000}}%)</div>
<template v-if="obj.recortModelDtos.length>0 && obj.recortModelDtos[0].detailDtos && obj.recortModelDtos[0].detailDtos.length>0"> <template v-if="obj.recortModelDtos.length>0 && obj.recortModelDtos[0].detailDtos && obj.recortModelDtos[0].detailDtos.length>0">
<!-- v-if="tableAuth.editScore" --> <!-- v-if="tableAuth.editScore" -->
<div class="title table-header-flex pingfen" v-for="k in handleGetScorlList(obj.recortModelDtos[0].detailDtos[0].scoreDtos)" > <div class="title table-header-flex pingfen"
v-for="(k,index1) in handleGetScorlList(obj.recortModelDtos[0].detailDtos[0].scoreDtos)"
:key="index1">
<div class="pingfen-title">上级评分 - {{k.approvalName}} ( {{( Math.round((k.weight * 100) * 1000) / 1000 )}}%)</div> <div class="pingfen-title">上级评分 - {{k.approvalName}} ( {{( Math.round((k.weight * 100) * 1000) / 1000 )}}%)</div>
<div class="pingfen-content"> <div class="pingfen-content">
<div class="pingfen-content-ping">评分</div> <div class="pingfen-content-ping">评分</div>
@ -19,15 +23,21 @@
</div> </div>
</template> </template>
</div> </div>
<div class="table-weidu" v-for="(item,index) in ((tableInfo.score || tableAuth.showScore)?obj.recortModelDtos:obj.recortModelDtos.slice(0,obj.recortModelDtos.length-1))" :key="index"> <div class="table-weidu"
v-for="(item,index) in ((tableInfo.score || tableAuth.showScore)?obj.recortModelDtos:obj.recortModelDtos.slice(0,obj.recortModelDtos.length-1))"
:key="index">
<!-- ((tableInfo.score || tableAuth.showScore) && tableAuth.editScore?obj.recortModelDtos:obj.recortModelDtos.slice(0,obj.recortModelDtos.length-1)) --> <!-- ((tableInfo.score || tableAuth.showScore) && tableAuth.editScore?obj.recortModelDtos:obj.recortModelDtos.slice(0,obj.recortModelDtos.length-1)) -->
<div class="weidu"> <div class="weidu">
<div v-for="(name,indexname) in item.name" :key="indexname"> <div v-for="(name,indexname) in item.name"
:key="indexname">
{{name}} {{name}}
</div> </div>
</div> </div>
<div style="flex: 1 1 auto;" class="table-right"> <div style="flex: 1 1 auto;"
<div class="table-content" v-for="i in item.detailDtos"> class="table-right">
<div class="table-content"
v-for="(i,index2) in item.detailDtos"
:key="index2">
<div class="name"> <div class="name">
{{i.target}} {{i.target}}
</div> </div>
@ -36,53 +46,80 @@
{{i.keyResult}}o7 {{i.keyResult}}o7
</pre> </pre>
</div> </div>
<div class="jieguo pre" v-if="tableInfo.result || tableAuth.showResult"> <div class="jieguo pre"
<el-input v-if="tableInfo.result" type="textarea" :rows="12" size="mini" placeholder="请输入内容" v-model="i.checkResult" clearable></el-input> v-if="tableInfo.result || tableAuth.showResult">
<el-input v-if="tableInfo.result"
type="textarea"
:rows="12"
size="mini"
placeholder="请输入内容"
v-model="i.checkResult"
clearable></el-input>
<pre v-else>{{i.checkResult || '--'}}</pre> <pre v-else>{{i.checkResult || '--'}}</pre>
</div> </div>
<div class="quanzhong"> <div class="quanzhong">
{{( Math.round((i.checkWeight * 100) * 1000) / 1000 )}}% {{( Math.round((i.checkWeight * 100) * 1000) / 1000 )}}%
</div> </div>
<template> <template>
<div v-for="dto in handleGetScorlList(i.scoreDtos)" class="pingfen table-content-pingfen"> <div v-for="(dto,index3) in handleGetScorlList(i.scoreDtos)"
:key="index3"
class="pingfen table-content-pingfen">
<div class="pingfen-content-ping"> <div class="pingfen-content-ping">
<el-select v-if="tableInfo.score && obj.gradeGroupId===1 && dto.approvalId ===userInfo.userId" style="width:115px;" size="mini" v-model="dto.acquireScore"> <el-select v-if="tableInfo.score && obj.gradeGroupId===1 && dto.approvalId ===userInfo.userId"
<el-option style="width:115px;"
v-for="item in scoreList" size="mini"
v-model="dto.acquireScore">
<el-option v-for="item in scoreList"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.score"> :value="item.score">
</el-option> </el-option>
</el-select> </el-select>
<el-input v-if="tableInfo.score && obj.gradeGroupId===2 && dto.approvalId ===userInfo.userId" style="width:115px;" size="mini" placeholder="请输入评分值" v-model="dto.acquireScore" clearable></el-input> <el-input v-if="tableInfo.score && obj.gradeGroupId===2 && dto.approvalId ===userInfo.userId"
style="width:115px;"
size="mini"
placeholder="请输入评分值"
v-model="dto.acquireScore"
clearable></el-input>
<span v-if="!tableInfo.score">{{handleScore(dto.acquireScore)}}</span> <span v-if="!tableInfo.score">{{handleScore(dto.acquireScore)}}</span>
</div> </div>
<div class="pingfen-content-defen"> <div class="pingfen-content-defen">
{{dto.acquireScore}} {{dto.acquireScore}}
</div> </div>
<div class="pingfen-content-shuoming"> <div class="pingfen-content-shuoming">
<el-input v-if="tableInfo.score && dto.approvalId ===userInfo.userId" style="width:200px;" :rows="4" size="mini" type="textarea" placeholder="请输入内容" v-model="dto.scoreComment" clearable></el-input> <el-input v-if="tableInfo.score && dto.approvalId ===userInfo.userId"
style="width:200px;"
:rows="4"
size="mini"
type="textarea"
placeholder="请输入内容"
v-model="dto.scoreComment"
clearable></el-input>
<span v-else>{{dto.scoreComment || '--'}}</span> <span v-else>{{dto.scoreComment || '--'}}</span>
</div> </div>
</div> </div>
</template> </template>
</div> </div>
<div class="table-content" v-if="item.detailDtos.length===0"> <div class="table-content"
v-if="item.detailDtos.length===0">
<div class="name"> <div class="name">
-- --
</div> </div>
<div class="kaohe"> <div class="kaohe">
-- --
</div> </div>
<div class="jieguo" v-if="tableInfo.result || tableAuth.showResult"> <div class="jieguo"
v-if="tableInfo.result || tableAuth.showResult">
-- --
</div> </div>
<div class="quanzhong"> <div class="quanzhong">
-- --
</div> </div>
<template> <template>
<div v-for="k in (scoreListForParams)" class="pingfen table-content-pingfen"> <div v-for="(k,index4) in (scoreListForParams)"
:key="index4"
class="pingfen table-content-pingfen">
<div class="pingfen-content-ping"> <div class="pingfen-content-ping">
{{k.Level}} {{k.Level}}
</div> </div>
@ -99,18 +136,28 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else class='nojixiao'> <div v-else
<img src="./imgs/nojixiao.png" alt=""> class='nojixiao'>
<img src="./imgs/nojixiao.png"
alt="">
<div class="commonFont"> <div class="commonFont">
未制定绩效目标暂无数据 未制定绩效目标暂无数据
</div> </div>
</div> </div>
<div v-if="tableInfo.result || tableInfo.score"
<div v-if="tableInfo.result || tableInfo.score" class="table-bottom"> class="table-bottom">
<div class="table-bottom-content"> <div class="table-bottom-content">
<el-button size='small' @click="handleCancelResult" plain>取消</el-button> <el-button size='small'
<el-button size='small' :loading='loadingZan' @click="handleSaveDetail()" plain>暂存</el-button> @click="handleCancelResult"
<el-button size='small' :loading='loadingTi' @click="handleGetNext" type="primary" >{{tableInfo.result?'提交结果值':'提交评分'}}</el-button> plain>取消</el-button>
<el-button size='small'
:loading='loadingZan'
@click="handleSaveDetail()"
plain>暂存</el-button>
<el-button size='small'
:loading='loadingTi'
@click="handleGetNext"
type="primary">{{tableInfo.result?'提交结果值':'提交评分'}}</el-button>
</div> </div>
</div> </div>
</div> </div>
@ -323,7 +370,6 @@ export default {
padding: 10px 0 !important; padding: 10px 0 !important;
text-align: center; text-align: center;
border-bottom: 1px solid @borderColor; border-bottom: 1px solid @borderColor;
} }
&-content { &-content {
flex: 1; flex: 1;
@ -373,7 +419,6 @@ width: 50px;
// border: 1px solid @borderColor; // border: 1px solid @borderColor;
// border-bottom: none; // border-bottom: none;
overflow: auto; overflow: auto;
} }
.table-weidu { .table-weidu {
display: flex; display: flex;
@ -455,7 +500,6 @@ width: 50px;
// } // }
// } // }
.table-left { .table-left {
width: 60px; width: 60px;
text-align: center; text-align: center;
} }
@ -508,7 +552,8 @@ width: 50px;
background: #fff; background: #fff;
justify-content: space-between; justify-content: space-between;
border-radius: 40px; border-radius: 40px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12),
0 1px 6px 0 rgba(0, 0, 0, 0.12);
&-left { &-left {
line-height: 40px; line-height: 40px;
font-size: 14px; font-size: 14px;
@ -561,12 +606,13 @@ width: 50px;
margin-top: 15px; margin-top: 15px;
width: 100%; width: 100%;
border: 1px solid #e9eaec; border: 1px solid #e9eaec;
border-collapse:collapse border-collapse: collapse;
} }
th { th {
background-color: #f8f8f9; background-color: #f8f8f9;
} }
th,td{ th,
td {
padding: 5px; padding: 5px;
border: 1px solid #e9eaec; border: 1px solid #e9eaec;
text-align: center; text-align: center;
@ -574,6 +620,5 @@ width: 50px;
line-height: 30px; line-height: 30px;
} }
td { td {
} }
</style> </style>