update 文档比对
This commit is contained in:
赵霄
@@ -1,727 +0,0 @@
|
||||
<template>
|
||||
<a-spin :spinning="loading">
|
||||
<div class="doc-detail-wrap">
|
||||
<div class="doc-detail-header">
|
||||
<div class="doc-detail-title">
|
||||
<span style="line-height: 66px;display: inline-block;float: left" @click="goBack">
|
||||
<a-icon type="arrow-left" style="margin-right: 6px;"/>
|
||||
</span>
|
||||
<span> {{$t('docTool.comparison.comparisonResults')}}</span>
|
||||
</div>
|
||||
<div class="doc-detail-right">
|
||||
<div @click="viewVarianceAssessmentClick"
|
||||
class="operator-text-text"
|
||||
:class="{'operator-text-text-text': isVarianceOne}"
|
||||
:title="$t('docTool.comparison.viewVarianceAssessment')">
|
||||
<a-icon type="eye"/>
|
||||
{{$t('docTool.comparison.viewVarianceAssessment')}}
|
||||
</div>
|
||||
<div @click="viewConsistentAssessmentClick" class="operator-text-text"
|
||||
:class="{'operator-text-text-text': isVarianceTwo}"
|
||||
:title="$t('docTool.comparison.viewConsistentAssessment')">
|
||||
<a-icon type="eye"/>
|
||||
{{$t('docTool.comparison.viewConsistentAssessment')}}
|
||||
</div>
|
||||
<div @click="viewAllClick" class="operator-text-text"
|
||||
:class="{'operator-text-text-text': isVarianceThe}"
|
||||
:title="$t('docTool.comparison.viewAll')">
|
||||
<a-icon type="eye"/>
|
||||
{{$t('docTool.comparison.viewAll')}}
|
||||
</div>
|
||||
<div @click="exportComparisonReportClick" class="operator-text-text"
|
||||
:title="$t('docTool.comparison.exportComparisonReport')">
|
||||
<a-icon type="export" :rotate="-90"/>
|
||||
{{$t('docTool.comparison.exportComparisonReport')}}
|
||||
</div>
|
||||
<div @click="commentClick" class="operator-text-text"
|
||||
:title="$t('docTool.comparison.comment')">
|
||||
<a-icon type="message"/>
|
||||
{{$t('docTool.comparison.comment')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="">
|
||||
<div class="detail-content">
|
||||
<div class="detail-content-header" style="margin-bottom: 20px">
|
||||
<a-checkbox @change="onChange" :indeterminate="indeterminate" :checked="checkAll"
|
||||
style="margin-left: 20px;float: left"></a-checkbox>
|
||||
<div class="detail-content-header-content">
|
||||
<div class="detail-content-header-content-left"
|
||||
:title="resultData.serialNumberLeft + resultData.fileNameLeft"
|
||||
:class="{'detail-content-header-content-left-active': isDisplay}">
|
||||
{{$t('docTool.comparison.selectedStandard')}}：{{resultData.serialNumberLeft}}
|
||||
<span style="cursor: pointer"
|
||||
@click="fileClick(resultData.fileNameLeft,resultData.fileIdLeft)">{{resultData.fileNameLeft}}</span>
|
||||
</div>
|
||||
<div class="detail-content-header-content-content"
|
||||
:title="resultData.serialNumberRight + resultData.fileNameRight"
|
||||
:class="{'detail-content-header-content-left-active':isDisplay}">
|
||||
{{$t('docTool.comparison.selectedStandard')}}：{{resultData.serialNumberRight}}
|
||||
<span style="cursor: pointer"
|
||||
@click="fileClick(resultData.fileNameRight,resultData.fileIdRight)">{{resultData.fileNameRight}}</span>
|
||||
</div>
|
||||
<div class="detail-content-header-content-rightOne"
|
||||
:class="{'detail-content-header-content-rightOne-active':isDisplay}"
|
||||
:title="$t('docTool.comparison.comparisonDifferenceComment')">
|
||||
{{$t('docTool.comparison.comparisonDifferenceComment')}}
|
||||
</div>
|
||||
<div class="detail-content-header-content-right" v-if="!isDisplay">
|
||||
{{$t('operation')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-checkbox-group @change="checkboxChange" v-model="checkboxList"
|
||||
style="width: 100%;height: calc(100vh - 300px)">
|
||||
<div class="detail-content-content" v-for="(item,index) in resultData.resList" :key="index">
|
||||
<a-checkbox :value="item.id" class="detail-checkbox"></a-checkbox>
|
||||
<div class="detail-content-content-text"
|
||||
:class="{'detail-content-content-text-color':checkboxList.join(',').includes(item.id)}">
|
||||
<div class="detail-content-content-text-left"
|
||||
:class="{'detail-content-content-text-dis':isDisplay}">
|
||||
<div class="detail-content-left">
|
||||
<div class="detail-content-left-top">
|
||||
<span>{{item.itemsNumLeft}}</span>
|
||||
<span style="margin-left: 10px">{{item.itemsNameLeft}}</span>
|
||||
</div>
|
||||
<div class="detail-content-left-button" v-html="item.itemsTextLeft"></div>
|
||||
</div>
|
||||
<div class="detail-content-right">
|
||||
<div class="detail-content-left-top">
|
||||
<span>{{item.itemsNumRight}}</span>
|
||||
<span style="margin-left: 10px">{{item.itemsNameRight}}</span>
|
||||
</div>
|
||||
<div class="detail-content-left-button" v-html="item.itemsTextRight"></div>
|
||||
</div>
|
||||
<div class="detail-content-right-one">
|
||||
<div class="detail-content-left-button">
|
||||
{{item.comment}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="detail-content-bottom"-->
|
||||
<!-- :class="{'detail-content-bottom-color':checkboxList.join(',').includes(item.id)}">-->
|
||||
<!-- <div class="detail-content-bottom-left"-->
|
||||
<!-- :class="{'detail-content-bottom-left-text':language == 'en-us' ? true:false}"-->
|
||||
<!-- :title="$t('docTool.comparison.comparisonDifferenceComment')">-->
|
||||
<!-- <a-icon type="message"/>-->
|
||||
<!-- {{$t('docTool.comparison.comparisonDifferenceComment')}}:-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="detail-content-bottom-right"-->
|
||||
<!-- :class="{'detail-content-bottom-right-text':language == 'en-us' ? true:false}">-->
|
||||
<!-- {{item.comment}}-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="detail-content-content-text-right" v-if="!isDisplay">
|
||||
<span class="text-button-one">
|
||||
<a class="text-button" @click="comparaEdit(item)">{{$t('edit')}}</a>
|
||||
<a class="text-button" @click="comparaDelete(item)">{{$t('delete')}}</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-checkbox-group>
|
||||
<div class="detail-content-content">
|
||||
<a-checkbox @change="fullCheckboxChange" v-model="fullCheckbox" class="detail-checkbox">
|
||||
</a-checkbox>
|
||||
<div class="detail-content-content-text" :class="{'detail-content-content-text-color':fullCheckbox}">
|
||||
<div class="detail-content-content-text-left"
|
||||
:class="{'detail-content-content-text-dis':isDisplay}">
|
||||
<div class="detail-content-content-text-left-text" :title="resultData.comments">
|
||||
<span>{{$t('docTool.comparison.fullTextComments')}}:</span> {{resultData.comments}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-content-content-text-right" v-if="!isDisplay">
|
||||
<span class="text-button-one">
|
||||
<a class="text-button" @click="fullTextEdit">{{$t('edit')}}</a>
|
||||
<!-- <a class="text-button">{{$t('delete')}}</a>-->
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<commentList ref="commentListRef"/>
|
||||
<comparison-result-edit-modal ref="comparisonResultEditModal" @ok="getData"></comparison-result-edit-modal>
|
||||
<div id="images">
|
||||
<div class="image" v-viewer="{movable: false}">
|
||||
<img v-show="image" :src="imageUrl">
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, downloadFile, deleteAction, getFileAccessHttpUrl } from '@/api/manage'
|
||||
import { previewPdf } from '@/utils/previewPdf'
|
||||
import { Base64 } from 'js-base64'
|
||||
import { mapGetters } from 'vuex'
|
||||
import CommentList from './CommentList'
|
||||
import ComparisonResultEditModal from './ComparisonResultEditModal'
|
||||
|
||||
export default {
|
||||
name: 'ComparisonResults',
|
||||
components: { CommentList, ComparisonResultEditModal },
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
checkboxList: [],
|
||||
isVarianceOne: false,
|
||||
isVarianceTwo: false,
|
||||
isVarianceThe: false,
|
||||
downLoadFileUrl: window._CONFIG.domianPreviewURL + '/sys/common/download',
|
||||
downLoadImgUrl: window._CONFIG.domianWebImgURL + '/sys/common/download',
|
||||
indeterminate: false,
|
||||
checkAll: false,
|
||||
isDisplay: false,
|
||||
fullCheckbox: false,
|
||||
resultData: {},
|
||||
comment: '',
|
||||
language: '',
|
||||
url: {
|
||||
exportData: '/compare/sarFileCompareItemComment/exportResXls'
|
||||
},
|
||||
image: false,
|
||||
imageUrl: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.query.isDisplay === 2) {
|
||||
this.isDisplay = false
|
||||
} else {
|
||||
this.isDisplay = true
|
||||
}
|
||||
document.title = this.$t('docTool.comparison.documentComparison') + ' - ' + this.$t('docTool.comparison.comparisonResults')
|
||||
this.language = localStorage.getItem('language') || ''
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
...mapGetters(['userInfo']),
|
||||
goBack () {
|
||||
this.$router.push({
|
||||
path: '/documentTool/documentComparison'
|
||||
})
|
||||
},
|
||||
// 评论按钮点击
|
||||
commentClick () {
|
||||
this.$refs.commentListRef.getData()
|
||||
},
|
||||
// 导出对比报告按钮点击
|
||||
exportComparisonReportClick () {
|
||||
const checkboxList = JSON.parse(JSON.stringify(this.checkboxList))
|
||||
const fullCheckbox = this.fullCheckbox
|
||||
const query = {
|
||||
selectIds: checkboxList.join(','),
|
||||
includeComments: fullCheckbox,
|
||||
infoId: this.$route.query.id,
|
||||
comment: this.comment
|
||||
}
|
||||
downloadFile(this.url.exportData, this.resultData.serialNumberLeft + ' - ' + this.resultData.serialNumberRight + this.$t('docTool.comparison.comparisonResults') + '.xls', query, this.deselect)
|
||||
},
|
||||
deselect () {
|
||||
this.checkboxList = []
|
||||
this.fullCheckbox = false
|
||||
this.indeterminate = false
|
||||
this.checkAll = false
|
||||
},
|
||||
// 查看一致性按钮点击
|
||||
viewConsistentAssessmentClick () {
|
||||
this.comment = '一致'
|
||||
this.isVarianceTwo = true
|
||||
this.isVarianceOne = false
|
||||
this.isVarianceThe = false
|
||||
this.getData()
|
||||
},
|
||||
// 查看差异项按钮点击
|
||||
viewVarianceAssessmentClick () {
|
||||
this.isVarianceOne = true
|
||||
this.isVarianceTwo = false
|
||||
this.isVarianceThe = false
|
||||
this.comment = '差异'
|
||||
this.getData()
|
||||
},
|
||||
// 查看全部按钮点击
|
||||
viewAllClick () {
|
||||
this.comment = ''
|
||||
this.isVarianceThe = true
|
||||
this.isVarianceOne = false
|
||||
this.isVarianceTwo = false
|
||||
this.getData()
|
||||
},
|
||||
// 点击文件名
|
||||
fileClick (name, id) {
|
||||
const fileName = name
|
||||
const index1 = fileName.lastIndexOf('.')
|
||||
const index2 = fileName.length
|
||||
const fileSuffix = fileName.substring(index1, index2)
|
||||
if (fileSuffix === '.pdf') {
|
||||
// window.open('/pdf/web/viewer.html?file=' + encodeURIComponent('/jero-boot/sys/common/pdf/viewFile?id=' + id + '&userName=' + this.userInfo().username))
|
||||
const url = previewPdf(id)
|
||||
window.open(url)
|
||||
} else if (fileSuffix === '.docx' || fileSuffix === '.doc') {
|
||||
const url = window._CONFIG.onlinePreviewDomainURL + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + id + fileSuffix)
|
||||
window.open(url, '_blank')
|
||||
} else if (fileSuffix === '.xlsx' || fileSuffix === '.xls') {
|
||||
const url = window._CONFIG.onlinePreviewDomainURL + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + id + fileSuffix)
|
||||
window.open(url, '_blank')
|
||||
} else if (fileSuffix === '.png' || fileSuffix === '.jpeg' || fileSuffix === '.gif' || fileSuffix === '.jpg') {
|
||||
// const url = window._CONFIG.onlinePreviewDomainURL + '?url=' + Base64.encode(this.downLoadImgUrl + '/' + id + fileSuffix)
|
||||
// window.open(url, '_blank')
|
||||
this.image = true
|
||||
this.imageUrl = getFileAccessHttpUrl(id)
|
||||
// 获取viewer实例
|
||||
const viewer = this.$el.querySelector('.image').$viewer
|
||||
// 调用show方法进行显示预览图
|
||||
viewer.show()
|
||||
} else {
|
||||
downloadFile('/sys/common/downLoadFile', name, { id: id })
|
||||
}
|
||||
},
|
||||
// 获取对比结果详情
|
||||
getData () {
|
||||
const query = {
|
||||
id: this.$route.query.id,
|
||||
infoId: this.$route.query.id,
|
||||
comment: this.comment
|
||||
}
|
||||
this.loading = true
|
||||
getAction('/compare/sarFileCompareItemComment/queryCompareResult', query).then((res) => {
|
||||
if (res.success) {
|
||||
this.resultData = res.result || {}
|
||||
} else {
|
||||
this.resultData = {}
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 复选框组改变
|
||||
checkboxChange (checkedList) {
|
||||
this.indeterminate = (!!checkedList.length && checkedList.length < this.resultData.resList.length) || (this.fullCheckbox && this.checkboxList.length < this.resultData.resList.length) || (!this.fullCheckbox && !!checkedList.length)
|
||||
this.checkAll = checkedList.length === this.resultData.resList.length && this.fullCheckbox
|
||||
},
|
||||
// 全文评论复选框改变
|
||||
fullCheckboxChange (event) {
|
||||
this.indeterminate = (!!this.checkboxList.length && this.checkboxList.length < this.resultData.resList.length) || (event.target.checked && this.checkboxList.length < this.resultData.resList.length) || (!this.fullCheckbox && !!this.checkboxList.length)
|
||||
this.checkAll = this.checkboxList.length === this.resultData.resList.length && event.target.checked
|
||||
},
|
||||
// 全选复选框改变
|
||||
onChange (event) {
|
||||
this.checkAll = event.target.checked
|
||||
if (event.target.checked) {
|
||||
this.resultData.resList.forEach(res => {
|
||||
this.checkboxList.push(res.id)
|
||||
})
|
||||
this.fullCheckbox = true
|
||||
this.indeterminate = false
|
||||
} else {
|
||||
this.checkboxList = []
|
||||
this.fullCheckbox = false
|
||||
}
|
||||
if (this.checkboxList.length === 0 && !this.fullCheckbox) {
|
||||
this.checkAll = false
|
||||
this.indeterminate = false
|
||||
}
|
||||
},
|
||||
// 全文评论编辑点击
|
||||
fullTextEdit (item) {
|
||||
this.$refs.comparisonResultEditModal.title = this.$t('docTool.comparison.fullTextComments')
|
||||
this.$refs.comparisonResultEditModal.open({ comment: this.resultData.comments || '' })
|
||||
},
|
||||
// 对比结果编辑按钮点击
|
||||
comparaEdit (item) {
|
||||
this.$refs.comparisonResultEditModal.title = this.$t('docTool.comparison.comparativeComments')
|
||||
this.$refs.comparisonResultEditModal.open(item)
|
||||
},
|
||||
// 对比结果删除按钮点击
|
||||
comparaDelete (val) {
|
||||
this.$confirm({
|
||||
content: this.$t('confirmDeletion'),
|
||||
onOk: () => {
|
||||
deleteAction('/compare/sarFileCompareItemComment/delete', { id: val.id }).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(this.$t('operationSuccessful'))
|
||||
this.getData()
|
||||
} else {
|
||||
this.$message.warning(this.$t('operationFailed'))
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.doc-detail-wrap {
|
||||
.doc-detail-header {
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
height: 68px;
|
||||
line-height: 68px;
|
||||
padding: 0 0 0 32px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px #eff1f3 solid;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
.doc-detail-title {
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: #040B29;
|
||||
line-height: 68px;
|
||||
}
|
||||
}
|
||||
.doc-detail-right {
|
||||
width: 600px;
|
||||
line-height: 68px;
|
||||
display: flex;
|
||||
|
||||
.operator-text-text {
|
||||
cursor: pointer;
|
||||
margin-right: 53px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #040B29;
|
||||
display: inline-block;
|
||||
width: 33.3%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operator-text-text-text {
|
||||
color: #00B3BE !important;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
padding: 24px 32px 0 32px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
margin-top: 68px;
|
||||
}
|
||||
|
||||
.detail-content-header {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
.detail-content-header-content {
|
||||
width: calc(100% - 56px);
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
height: 56px;
|
||||
font-size: 14px;
|
||||
font-family: Blue Sky Noto;
|
||||
font-weight: bold;
|
||||
color: #040B29;
|
||||
|
||||
.detail-content-header-content-left {
|
||||
width: calc(50% - 194px);
|
||||
height: 56px;
|
||||
display: inline-block;
|
||||
background: rgba(4, 11, 41, 0.0300);
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
border-right: 1px #EFF1F3 solid;
|
||||
padding-left: 24px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-content-header-content-content {
|
||||
width: calc(50% - 194px);
|
||||
display: inline-block;
|
||||
height: 56px;
|
||||
background: rgba(4, 11, 41, 0.0300);
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
border-right: 1px #EFF1F3 solid;
|
||||
padding-left: 24px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-content-header-content-rightOne {
|
||||
width: 260px;
|
||||
display: inline-block;
|
||||
height: 56px;
|
||||
background: rgba(4, 11, 41, 0.0300);
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
padding-left: 24px;
|
||||
border-right: 1px #EFF1F3 solid;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-content-header-content-rightOne-active {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.detail-content-header-content-right {
|
||||
width: 128px;
|
||||
display: inline-block;
|
||||
height: 56px;
|
||||
background: rgba(4, 11, 41, 0.0300);
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
padding-left: 24px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content-header-content-left {
|
||||
width: calc(50% - 194px);
|
||||
height: 56px;
|
||||
display: inline-block;
|
||||
background: rgba(4, 11, 41, 0.0300);
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
border-right: 1px #EFF1F3 solid;
|
||||
padding-left: 24px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-content-header-content-content {
|
||||
width: calc(50% - 194px);
|
||||
display: inline-block;
|
||||
height: 56px;
|
||||
background: rgba(4, 11, 41, 0.0300);
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
border-right: 1px #EFF1F3 solid;
|
||||
padding-left: 24px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-content-header-content-rightOne {
|
||||
width: 260px;
|
||||
display: inline-block;
|
||||
height: 56px;
|
||||
background: rgba(4, 11, 41, 0.0300);
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
padding-left: 24px;
|
||||
border-right: 1px #EFF1F3 solid;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-content-header-content-rightOne-active {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.detail-content-header-content-right {
|
||||
width: 128px;
|
||||
display: inline-block;
|
||||
height: 56px;
|
||||
background: rgba(4, 11, 41, 0.0300);
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
padding-left: 24px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-content-content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.detail-checkbox {
|
||||
margin-left: 28px;
|
||||
float: left;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.detail-content-content-text {
|
||||
width: calc(100% - 56px);
|
||||
margin-left: 56px;
|
||||
border: 1px solid #EFF1F3;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
.detail-content-content-text-left {
|
||||
width: calc(100% - 128px);
|
||||
float: left;
|
||||
border-right: 1px solid #EFF1F3;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-content-content-text-right {
|
||||
width: 128px;
|
||||
float: left;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
|
||||
.text-button-one {
|
||||
display: inline-block;
|
||||
width: 128px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.text-button {
|
||||
margin-right: 8px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content-content-text-color {
|
||||
border: 1px solid #00B3BE;
|
||||
background: rgba(0, 179, 190, 0.0300);
|
||||
}
|
||||
|
||||
.detail-content-left {
|
||||
width: calc(50% - 130px);
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding-right: 24px;
|
||||
border-right: 1px #EFF1F3 solid;
|
||||
}
|
||||
|
||||
.detail-content-right {
|
||||
width: calc(50% - 104px);
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
border-right: 1px #EFF1F3 solid;
|
||||
}
|
||||
|
||||
.detail-content-right-one {
|
||||
width: 234px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding-left: 24px;
|
||||
/*border-right: 1px #EFF1F3 solid;*/
|
||||
}
|
||||
|
||||
.detail-content-left-top {
|
||||
font-size: 16px;
|
||||
font-family: Blue Sky Noto;
|
||||
font-weight: 400;
|
||||
color: #040B29;
|
||||
}
|
||||
|
||||
.detail-content-left-button {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #040B29;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.detail-content-bottom {
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(4, 11, 41, 0.0300);
|
||||
border-radius: 4px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.detail-content-bottom-color {
|
||||
background: rgba(0, 179, 190, 0.0300);
|
||||
}
|
||||
|
||||
.detail-content-bottom-left {
|
||||
width: 115px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #040B29;
|
||||
float: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-content-bottom-right {
|
||||
width: calc(50% - 115px);
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #040B29;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.detail-content-content-text-left-text {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #040B29;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
text-overflow: ellipsis;
|
||||
/*! autoprefixer: off */
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
/*! autoprefixer: on;*/
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.detail-content-content-text-dis {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.detail-content-header-content-left-active {
|
||||
width: calc(50% - 130px) !important;
|
||||
}
|
||||
|
||||
.detail-content-bottom-left-text {
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
.detail-content-bottom-right-text {
|
||||
width: calc(50% - 256px);
|
||||
}
|
||||
|
||||
.box-title-text-remarks {
|
||||
line-height: 1.4;
|
||||
display: flex;
|
||||
/*align-items: center;*/
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.title-text-remarks {
|
||||
width: 68px;
|
||||
color: #000F16;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
margin-right: 16px;
|
||||
margin-top: 6px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.operator-text-text-text {
|
||||
color: #00B3BE !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user