法规文档详情页
This commit is contained in:
caoyang
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<div class="doc-detail">
|
||||
<div class="doc-detail-wrap">
|
||||
<div class="doc-detail-header">
|
||||
<div class="doc-detail-title">
|
||||
GB 27999-2019 《乘用车燃料消耗量评价方法及指标》 标准详情
|
||||
</div>
|
||||
<div class="doc-detail-right">
|
||||
<a-button class="doc-detail-btn" type="primary">更新log</a-button>
|
||||
<a-button class="doc-detail-btn" type="primary">文档拆分</a-button>
|
||||
<a-button class="doc-detail-btn" type="primary">文档翻译</a-button>
|
||||
<a-button class="doc-detail-btn" type="primary">文档对比</a-button>
|
||||
<a-button class="doc-detail-btn" type="primary">知识问答库</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider orientation="left">
|
||||
基本信息
|
||||
</a-divider>
|
||||
<div class="doc-detail-info">
|
||||
<div class="doc-info-wrap">
|
||||
<div class="doc-info-content">
|
||||
<div class="doc-info-key">
|
||||
编号
|
||||
</div>
|
||||
<div class="doc-info-value">
|
||||
GB 279999-2019
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc-info-content">
|
||||
<div class="doc-info-key">
|
||||
编号
|
||||
</div>
|
||||
<div class="doc-info-value">
|
||||
GB 279999-2019
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc-info-content doc-info-right">
|
||||
<div class="doc-info-key">
|
||||
编号
|
||||
</div>
|
||||
<div class="doc-info-value">
|
||||
GB 279999-2019
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc-info-content doc-info-bottom">
|
||||
<div class="doc-info-key">
|
||||
编号
|
||||
</div>
|
||||
<div class="doc-info-value">
|
||||
GB 279999-2019
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc-info-content doc-info-bottom">
|
||||
<div class="doc-info-key">
|
||||
编号
|
||||
</div>
|
||||
<div class="doc-info-value">
|
||||
GB 279999-2019
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc-info-content doc-info-bottom doc-info-right">
|
||||
<div class="doc-info-key">
|
||||
|
||||
</div>
|
||||
<div class="doc-info-value">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider orientation="left">
|
||||
文本信息
|
||||
</a-divider>
|
||||
<div class="doc-detail-text">
|
||||
<div class="doc-text-wrap">
|
||||
<div class="doc-text-content">
|
||||
<div class="doc-text-key">
|
||||
测试程序
|
||||
</div>
|
||||
<div class="doc-text-value">
|
||||
<div class="doc-text-left">
|
||||
<a href="javascript:;">FMVSS 114中文.pdf</a>
|
||||
</div>
|
||||
<div class="doc-text-right">
|
||||
<a-button type="primary">标准分解单</a-button>
|
||||
<a-icon type="download" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc-text-content doc-text-content-bottom">
|
||||
<div class="doc-text-key">
|
||||
测试程序1
|
||||
</div>
|
||||
<div class="doc-text-value">
|
||||
<div class="doc-text-left">
|
||||
<a href="javascript:;">FMVSS 114中文11111.pdf</a>
|
||||
</div>
|
||||
<div class="doc-text-right">
|
||||
<a-button type="primary">标准分解单</a-button>
|
||||
<a-icon type="download" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider orientation="left">
|
||||
关联信息
|
||||
</a-divider>
|
||||
<div class="doc-detail-relation">
|
||||
<div class="doc-relation-wrap">
|
||||
<div class="doc-relation-content">
|
||||
<div class="doc-relation-key">
|
||||
代替标准
|
||||
</div>
|
||||
<div class="doc-relation-value">
|
||||
<a href="javascript:;">GB 27999-2019</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc-relation-content doc-relation-content-bottom">
|
||||
<div class="doc-relation-key">
|
||||
代替标准
|
||||
</div>
|
||||
<div class="doc-relation-value">
|
||||
<a href="javascript:;">GB 27999-2019</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.doc-detail{
|
||||
padding: 20px;
|
||||
.doc-detail-wrap{
|
||||
.doc-detail-header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.doc-detail-title{
|
||||
display:inline-block;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.doc-detail-right{
|
||||
min-width: 500px;
|
||||
.doc-detail-btn{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.doc-detail-info{
|
||||
.doc-info-wrap{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
.doc-info-content {
|
||||
width: 33.33333%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
.doc-info-key {
|
||||
border-right:1px solid #ccc;
|
||||
width: 50%;
|
||||
display:inline-block;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
background: #c6e6f5;
|
||||
}
|
||||
.doc-info-value {
|
||||
width: 50%;
|
||||
display:inline-block;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
}
|
||||
}
|
||||
.doc-info-right{
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
.doc-info-bottom{
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
.doc-detail-text{
|
||||
.doc-text-wrap{
|
||||
.doc-text-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: none;
|
||||
.doc-text-key {
|
||||
width: 16.666665%;
|
||||
border-right: 1px solid #ccc;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
background: #c6e6f5;
|
||||
}
|
||||
|
||||
.doc-text-value {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.doc-text-left{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.doc-text-right{
|
||||
min-width: 150px;
|
||||
button{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.anticon-download{
|
||||
color: #1890FF;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.doc-text-content-bottom{
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
.doc-detail-relation{
|
||||
.doc-relation-wrap{
|
||||
.doc-relation-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: none;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
.doc-relation-key {
|
||||
width: 16.666665%;
|
||||
border-right: 1px solid #ccc;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
background: #c6e6f5;
|
||||
}
|
||||
.doc-relation-value {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.doc-relation-content-bottom{
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user