WL/laws_weilai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改上传文件组件

Browse Source
This commit is contained in:
qq787203167
2022-02-22 15:13:07 +08:00
parent ffe34f6313
commit 6c432ddfa5
4 changed files with 176 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/views/documentManage/library/docDetail/index.vue
+154 -243
View File
@@ -1,279 +1,190 @@
<template>
<a-card :bordered="false">
<div class="doc-detail">
<div class="doc-detail-wrap">
<div class="doc-detail-header">
<div class="doc-detail-title">
GB 27999-2019 《乘用车燃料消耗量评价方法及指标》 标准详情
<div class="doc-detail">
<div class="doc-detail-wrap">
<div class="doc-detail-header">
<div class="doc-detail-title">
<a-icon type="home" style="margin-right: 4px"/>
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>
<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 class="content">
<div class="header-text">
基本信息
</div>
<div class="content-text">
<div class="text-field" v-for="(item,index) in 19" :key="index">
<span class="text-field-left" v-if="index == 1">标注实施日期</span>
<span class="text-field-left" v-else>编号</span>
<span class="text-field-right">GB 27999-8019</span>
</div>
</div>
<div class="header-text">
文本信息
</div>
<div class="TextInformation">
<div class="TextInformationContent" v-for="item in 10">
<span class="TextInformationContentLeft">
测试程序
</span>
<span class="TextInformationContentcontent">
123456.pdf
</span>
<span class="TextInformationContentright">
<a-icon type="vertical-align-bottom"/>
下载
</span>
</div>
</div>
<div class="header-text">
文本信息
</div>
<div class="TextInformation">
<div class="TextInformationContent" v-for="item in 3">
<span class="TextInformationContentLeft">
测试程序
</span>
<span class="TextInformationContentcontent">
123456.pdf
</span>
<span class="TextInformationContentright">
<a-icon type="vertical-align-bottom"/>
下载
</span>
</div>
</div>
</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>
</a-card>
</template>
<script>
</script>
<style lang="less" scoped>
.doc-detail{
.doc-detail {
padding: 20px;
.doc-detail-wrap{
.doc-detail-header{
.doc-detail-wrap {
.doc-detail-header {
height: 50px;
display: flex;
justify-content: space-between;
border-bottom:1px #9e9e9e solid ;
.doc-detail-title{
display:inline-block;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
border-bottom: 2px #eff1f3 solid;
.doc-detail-title {
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 18px;
font-weight: 600;
}
.doc-detail-right{
.doc-detail-right {
min-width: 500px;
.doc-detail-btn{
.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;
}
}
}
.header-text {
font-size: 16px;
font-weight: 600;
height: 80px;
line-height: 80px;
}
.content-text {
width: 100%;
display: flex;
flex-wrap: wrap;
.text-field {
width: 33%;
margin-bottom: 8px;
.text-field-left {
width: 160px;
display: inline-block;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #6f7385;
}
.doc-text-content-bottom{
border-bottom: 1px solid #ccc;
.text-field-right {
width: calc(100% - 200px);
display: inline-block;
font-size: 17px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #040b29;
font-weight: 500;
}
}
}
.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;
.TextInformation {
height: auto;
.TextInformationContent {
height: 50px;
border-top: 1.6px #eff1f3 solid;
border-right: 1.6px #eff1f3 solid;
.TextInformationContentLeft {
width: 310px;
height: 50px;
border: 1.6px #eff1f3 solid;
display: inline-block;
background: #f7f7f8;
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;
}
color: #040b29;
line-height: 50px;
font-weight: 600;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.doc-relation-content-bottom{
border-bottom: 1px solid #ccc;
.TextInformationContentcontent {
width: calc(100% - 410px);
line-height: 50px;
display: inline-block;
text-align: center;
color: #67bbc3;
font-size: 15px;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.TextInformationContentright {
width: 100px;
display: inline-block;
line-height: 50px;
color: #67bbc3;
font-size: 15px;
font-weight: 500;
text-align: center;
position: absolute;
}
}
.TextInformationContent:last-child{
border-bottom: 1.6px #eff1f3 solid;
}
}
}