vdr详情布局修改

This commit is contained in:
高嵩
2023-08-28 16:58:03 +08:00
parent d6d1458ace
commit b4e083a577
@@ -14,7 +14,7 @@
<a-row :gutter="24">
<a-col :span="24">
<div class='detail-box'>
<span class='detail-text'>{{'VDR'}}</span>
<span class='detail-text' :title="'VDR'">{{'VDR'}}</span>
<span class="title-text-text" :title="form.vdr">
{{form.vdr}}</span>
</div>
@@ -24,7 +24,7 @@
<a-row :gutter="24">
<a-col :span="24">
<div class='detail-box'>
<span class='detail-text'>{{$t('theme')}}</span>
<span class='detail-text' :title="$t('theme')">{{$t('theme')}}</span>
<span class="title-text-text" :title="form.summary">
{{form.summary}}</span>
</div>
@@ -34,7 +34,7 @@
<a-row :gutter="24">
<a-col :span="24">
<div class='detail-box'>
<span class='detail-text' style='width:300px'>{{$t('authenticationimpact')}}</span>
<span class='detail-text' :title="$t('authenticationimpact')">{{$t('authenticationimpact')}}</span>
<span class="title-text-text" :title="form.homologationImpact">
{{form.homologationImpact}}</span>
</div>
@@ -44,7 +44,7 @@
<a-row :gutter="24">
<a-col :span="24">
<div class='detail-box'>
<span class='detail-text'>{{$t('influencestatute') + '-CN'}}</span>
<span class='detail-text' :title="$t('influencestatute') + '-CN'">{{$t('influencestatute') + '-CN'}}</span>
<span class="title-text-text" :title="form.impactCnHomo">
{{form.impactCnHomo}}</span>
</div>
@@ -54,33 +54,33 @@
<a-row :gutter="24">
<a-col :span="24">
<div class='detail-box'>
<span class='detail-text'>{{$t('influencestatute') + '-EU'}}</span>
<span class='detail-text' :title="$t('influencestatute') + '-EU'">{{$t('influencestatute') + '-EU'}}</span>
<span class="title-text-text" :title="form.impactEuHomo">
{{form.impactEuHomo}}</span>
</div>
</a-col>
</a-row>
<div style='margin-bottom: 10px;font-weight: bold;'>{{$t('applicationprojectversion')}}</div>
<div style='margin-bottom: 20px;font-weight: bold;' :title="$t('applicationprojectversion')">{{$t('applicationprojectversion')}}</div>
<div v-for='(item,index) in vdrList' :key='index'>
<a-row :gutter="24">
<a-col :span="24">
<div class='detail-box'>
<span class='detail-text' style="width: 300px">{{item.versionName}}</span>
<span class='detail-text' style="width: 300px" :title="item.versionName">{{item.versionName}}</span>
</div>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<div class='detail-box'>
<span class='detail-text'>{{$t('certificationStartOne')}}</span>
<span class='detail-text' :title="$t('certificationStartOne')">{{$t('certificationStartOne')}}</span>
<span class="title-text-text" :title="item.attestationStartTime?item.attestationStartTime:'--'">
{{item.attestationStartTime?item.attestationStartTime:'--'}}</span>
</div>
</a-col>
<a-col :span="12">
<div class='detail-box'>
<span class='detail-text'>{{$t('certificationdeclaration')}}</span>
<span class='detail-text' :title="$t('certificationdeclaration')">{{$t('certificationdeclaration')}}</span>
<span class="title-text-text" :title="item.certificationSubmission?item.certificationSubmission:'--'">
{{item.certificationSubmission?item.certificationSubmission:'--'}}</span>
</div>
@@ -89,14 +89,14 @@
<a-row :gutter="24">
<a-col :span="12">
<div class='detail-box'>
<span class='detail-text'>{{$t('certificationEnd')}}</span>
<span class='detail-text' :title="$t('certificationEnd')">{{$t('certificationEnd')}}</span>
<span class="title-text-text" :title="item.attestationEndTime?item.attestationEndTime:'--'">
{{item.attestationEndTime?item.attestationEndTime:'--'}}</span>
</div>
</a-col>
<a-col :span="12">
<div class='detail-box'>
<span class='detail-text'>{{$t('CertificationProgress')}}</span>
<span class='detail-text' :title="$t('CertificationProgress')">{{$t('CertificationProgress')}}</span>
<span class="title-text-text" :title="item.attestationSchedule?item.attestationSchedule:'--'">
{{item.attestationSchedule?item.attestationSchedule:'--'}}</span>
</div>
@@ -198,11 +198,19 @@ export default {
.detail-box{
width: 100%;
margin-bottom: 20px;
position: relative;
}
.detail-text{
display: inline-block;
width: 95px;
width: 153px;
font-weight: bold;
overflow: hidden; /*超出部分隐藏*/
text-overflow: ellipsis; /*超出部分省略号表示*/
white-space: nowrap; /*强制单行显示*/
display: inline-block; /*转换为行内块元素*/
}
.title-text-text{
position: absolute;
}
.title-text {
width: 250px;