修改布局细节问题
This commit is contained in:
@@ -1,105 +1,105 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<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"/>
|
||||
{{this.$route.query.serial_number}} 《{{this.$route.query.title}}》 标准详情
|
||||
<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"/>
|
||||
{{this.$route.query.serial_number}} 《{{this.$route.query.title}}》 标准详情
|
||||
</div>
|
||||
<div class="doc-detail-right">
|
||||
<div @click="UpdateLog" class="operator-text">
|
||||
<a-icon type="reload"/>
|
||||
更新log
|
||||
</div>
|
||||
<div class="doc-detail-right">
|
||||
<div @click="UpdateLog" class="operator-text">
|
||||
<a-icon type="reload"/>
|
||||
更新log
|
||||
</div>
|
||||
<div @click="DocumentSplitting" class="operator-text">
|
||||
<a-icon type="codepen"/>
|
||||
文档拆分
|
||||
</div>
|
||||
<div @click="UpdateLog" class="operator-text">
|
||||
<a-icon type="file-pdf"/>
|
||||
文档翻译
|
||||
</div>
|
||||
<div @click="UpdateLog" class="operator-text">
|
||||
<a-icon type="wallet"/>
|
||||
文档对比
|
||||
</div>
|
||||
<div @click="UpdateLog" class="operator-text">
|
||||
<a-icon type="folder"/>
|
||||
知识问答库
|
||||
</div>
|
||||
<div @click="DocumentSplitting" class="operator-text">
|
||||
<a-icon type="codepen"/>
|
||||
文档拆分
|
||||
</div>
|
||||
<div @click="UpdateLog" class="operator-text">
|
||||
<a-icon type="file-pdf"/>
|
||||
文档翻译
|
||||
</div>
|
||||
<div @click="UpdateLog" class="operator-text">
|
||||
<a-icon type="wallet"/>
|
||||
文档对比
|
||||
</div>
|
||||
<div @click="UpdateLog" class="operator-text">
|
||||
<a-icon type="folder"/>
|
||||
知识问答库
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(item,index) in detailList">
|
||||
<div v-for="val in Object.keys(item)" class="content">
|
||||
<div class="header-text">
|
||||
{{val}}
|
||||
</div>
|
||||
<div v-for="(item,index) in detailList" class="content-box">
|
||||
<div v-for="val in Object.keys(item)" class="content">
|
||||
<div class="header-text">
|
||||
{{val}}
|
||||
</div>
|
||||
<div class="content-text" v-if="val == '基本信息'">
|
||||
<div class="text-field" v-for="(ol,index1) in item[val]">
|
||||
<span class="text-field-left">{{ol.db_field_txt}}</span>
|
||||
<span class="text-field-right">{{ol.value ? ol.value : '--'}}</span>
|
||||
</div>
|
||||
<div class="content-text" v-if="val == '基本信息'">
|
||||
<div class="text-field" v-for="(ol,index1) in item[val]">
|
||||
<span class="text-field-left">{{ol.db_field_txt}}</span>
|
||||
<span class="text-field-right">{{ol.value ? ol.value : '--'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="TextInformation" v-if="val == '文本信息'">
|
||||
<div class="TextInformationContent" v-for="(ol,index1) in item[val]" style="width: 100%">
|
||||
</div>
|
||||
<div class="TextInformation" v-if="val == '文本信息'">
|
||||
<div class="TextInformationContent" v-for="(ol,index1) in item[val]" style="width: 100%">
|
||||
<span class="TextInformationContentLeft">
|
||||
<span>{{ol.db_field_txt}}</span>
|
||||
</span>
|
||||
<span class="TextInformationContentcontent">
|
||||
<span style="margin-top: 2px">
|
||||
<span class="TextInformationContentcontent">
|
||||
<span @click="pdfPreview(ol.value)">{{ol.value ? ol.value.fileName : '--'}}</span>
|
||||
</span>
|
||||
<span class="TextInformationContentright" v-show="ol.value" @click="download(ol.value)">
|
||||
<span class="TextInformationContentright" v-show="ol.value" @click="download(ol.value)">
|
||||
<a-icon type="vertical-align-bottom"/>
|
||||
下载
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="TextInformation" v-else-if="val == '关联信息'">
|
||||
<div class="TextInformationContent" v-for="(ol,index1) in item[val]" style="width: 100%">
|
||||
</div>
|
||||
<div class="TextInformation" v-else-if="val == '关联信息'">
|
||||
<div class="TextInformationContent" v-for="(ol,index1) in item[val]" style="width: 100%">
|
||||
<span class="TextInformationContentLeft">
|
||||
{{ol.db_field_txt}}
|
||||
</span>
|
||||
<span class="TextInformationContentcontent">
|
||||
<span class="TextInformationContentcontentButton">
|
||||
{{ol.value ? ol.value : '--'}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal
|
||||
title="更新log"
|
||||
:width="900"
|
||||
:visible="visible"
|
||||
:confirm-loading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-table
|
||||
class="table"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
:scroll="{y: 400}"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
>
|
||||
</a-table>
|
||||
<div class="page" v-if="dataSource.length > 0">
|
||||
<a-pagination
|
||||
:show-total="total => `共 ${total} 条`"
|
||||
show-quick-jumper
|
||||
show-size-changer
|
||||
:page-size.sync="pageSize"
|
||||
:total="total"
|
||||
@change="onChange"
|
||||
@showSizeChange="SizeChange"
|
||||
/>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-modal
|
||||
title="更新log"
|
||||
:width="900"
|
||||
:visible="visible"
|
||||
:confirm-loading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-table
|
||||
class="table"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
:scroll="{y: 400}"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
>
|
||||
</a-table>
|
||||
<div class="page" v-if="dataSource.length > 0">
|
||||
<a-pagination
|
||||
:show-total="total => `共 ${total} 条`"
|
||||
show-quick-jumper
|
||||
show-size-changer
|
||||
:page-size.sync="pageSize"
|
||||
:total="total"
|
||||
@change="onChange"
|
||||
@showSizeChange="SizeChange"
|
||||
/>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getAction, postAction, downFile, downloadFile } from '@/api/manage'
|
||||
@@ -213,28 +213,31 @@
|
||||
@import '~@assets/less/common.less';
|
||||
|
||||
.doc-detail {
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.doc-detail-wrap {
|
||||
.doc-detail-header {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
height: 68px;
|
||||
line-height: 68px;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: #040B29;
|
||||
}
|
||||
|
||||
.doc-detail-right {
|
||||
min-width: 500px;
|
||||
line-height: 30px;
|
||||
line-height: 68px;
|
||||
|
||||
.doc-detail-btn {
|
||||
margin-left: 10px;
|
||||
@@ -242,10 +245,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.content-box {
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
height: 80px;
|
||||
color: #000F16;
|
||||
line-height: 80px;
|
||||
}
|
||||
|
||||
@@ -259,24 +268,26 @@
|
||||
margin-bottom: 8px;
|
||||
|
||||
.text-field-left {
|
||||
width: 160px;
|
||||
width: 124px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #6F7385;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: #6f7385;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.text-field-right {
|
||||
width: calc(100% - 200px);
|
||||
display: inline-block;
|
||||
font-size: 17px;
|
||||
font-size: 16px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: #040b29;
|
||||
font-weight: 500;
|
||||
color: #040B29;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -285,53 +296,76 @@
|
||||
height: auto;
|
||||
|
||||
.TextInformationContent {
|
||||
height: 50px;
|
||||
border-top: 1.6px #eff1f3 solid;
|
||||
border-right: 1.6px #eff1f3 solid;
|
||||
height: 56px;
|
||||
|
||||
.TextInformationContentLeft {
|
||||
width: 310px;
|
||||
height: 50px;
|
||||
border: 1.6px #eff1f3 solid;
|
||||
width: 268px;
|
||||
height: 56px;
|
||||
float: left;
|
||||
border-top: 1px #eff1f3 solid;
|
||||
border-left: 1px #eff1f3 solid;
|
||||
display: inline-block;
|
||||
background: #f7f7f8;
|
||||
text-align: center;
|
||||
color: #040b29;
|
||||
line-height: 50px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #040B29;
|
||||
line-height: 56px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.TextInformationContentcontent {
|
||||
width: calc(100% - 410px);
|
||||
line-height: 50px;
|
||||
width: calc(100% - 356px);
|
||||
float: left;
|
||||
height: 56px;
|
||||
border-top: 1px #eff1f3 solid;
|
||||
border-left: 1px #eff1f3 solid;
|
||||
line-height: 56px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: #67bbc3;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #01A0AC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
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;
|
||||
width: 88px;
|
||||
height: 56px;
|
||||
float: left;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
border-right: 1px #eff1f3 solid;
|
||||
border-top: 1px #eff1f3 solid;
|
||||
line-height: 56px;
|
||||
color: #00B3BE;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
.TextInformationContentcontentButton{
|
||||
width: calc(100% - 268px);
|
||||
border-top: 1px #eff1f3 solid;
|
||||
border-left: 1px #eff1f3 solid;
|
||||
border-right: 1px #eff1f3 solid;
|
||||
line-height: 56px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: #00B3BE;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.TextInformationContent:last-child {
|
||||
border-bottom: 1.6px #eff1f3 solid;
|
||||
border-bottom: 1px #eff1f3 solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user