修改布局细节问题

This commit is contained in:
qq787203167
2022-02-28 13:44:05 +08:00
parent ed4ce0bcb1
commit 516f98a922
9 changed files with 322 additions and 201 deletions
@@ -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;
}
}
}