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-row :gutter="24">
<a-col :span="24"> <a-col :span="24">
<div class='detail-box'> <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"> <span class="title-text-text" :title="form.vdr">
{{form.vdr}}</span> {{form.vdr}}</span>
</div> </div>
@@ -24,7 +24,7 @@
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="24"> <a-col :span="24">
<div class='detail-box'> <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"> <span class="title-text-text" :title="form.summary">
{{form.summary}}</span> {{form.summary}}</span>
</div> </div>
@@ -34,7 +34,7 @@
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="24"> <a-col :span="24">
<div class='detail-box'> <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"> <span class="title-text-text" :title="form.homologationImpact">
{{form.homologationImpact}}</span> {{form.homologationImpact}}</span>
</div> </div>
@@ -44,7 +44,7 @@
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="24"> <a-col :span="24">
<div class='detail-box'> <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"> <span class="title-text-text" :title="form.impactCnHomo">
{{form.impactCnHomo}}</span> {{form.impactCnHomo}}</span>
</div> </div>
@@ -54,33 +54,33 @@
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="24"> <a-col :span="24">
<div class='detail-box'> <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"> <span class="title-text-text" :title="form.impactEuHomo">
{{form.impactEuHomo}}</span> {{form.impactEuHomo}}</span>
</div> </div>
</a-col> </a-col>
</a-row> </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'> <div v-for='(item,index) in vdrList' :key='index'>
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="24"> <a-col :span="24">
<div class='detail-box'> <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> </div>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="12"> <a-col :span="12">
<div class='detail-box'> <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:'--'"> <span class="title-text-text" :title="item.attestationStartTime?item.attestationStartTime:'--'">
{{item.attestationStartTime?item.attestationStartTime:'--'}}</span> {{item.attestationStartTime?item.attestationStartTime:'--'}}</span>
</div> </div>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<div class='detail-box'> <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:'--'"> <span class="title-text-text" :title="item.certificationSubmission?item.certificationSubmission:'--'">
{{item.certificationSubmission?item.certificationSubmission:'--'}}</span> {{item.certificationSubmission?item.certificationSubmission:'--'}}</span>
</div> </div>
@@ -89,14 +89,14 @@
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="12"> <a-col :span="12">
<div class='detail-box'> <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:'--'"> <span class="title-text-text" :title="item.attestationEndTime?item.attestationEndTime:'--'">
{{item.attestationEndTime?item.attestationEndTime:'--'}}</span> {{item.attestationEndTime?item.attestationEndTime:'--'}}</span>
</div> </div>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<div class='detail-box'> <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:'--'"> <span class="title-text-text" :title="item.attestationSchedule?item.attestationSchedule:'--'">
{{item.attestationSchedule?item.attestationSchedule:'--'}}</span> {{item.attestationSchedule?item.attestationSchedule:'--'}}</span>
</div> </div>
@@ -198,11 +198,19 @@ export default {
.detail-box{ .detail-box{
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
position: relative;
} }
.detail-text{ .detail-text{
display: inline-block; display: inline-block;
width: 95px; width: 153px;
font-weight: bold; font-weight: bold;
overflow: hidden; /*超出部分隐藏*/
text-overflow: ellipsis; /*超出部分省略号表示*/
white-space: nowrap; /*强制单行显示*/
display: inline-block; /*转换为行内块元素*/
}
.title-text-text{
position: absolute;
} }
.title-text { .title-text {
width: 250px; width: 250px;