774 lines
26 KiB
Java
774 lines
26 KiB
Java
<template>
|
||
<div class="doc-detail">
|
||
<div class="doc-detail-wrap">
|
||
<div class="doc-detail-header" style="position: fixed;top: 0">
|
||
<div class="doc-detail-title">
|
||
<span style="line-height: 66px;display: inline-block;float: left" @click="Fallback">
|
||
<a-icon type="arrow-left" style="margin-right: 6px;"/>
|
||
</span>
|
||
<span> {{$t('comparisonResults')}}</span>
|
||
</div>
|
||
<div class="doc-detail-right">
|
||
<div @click="viewVarianceAssessmentClick"
|
||
class="operator-text-text"
|
||
:class="{'operator-text-text-text':isVarianceOne?true:false}"
|
||
:title="$t('viewVarianceAssessment')">
|
||
<a-icon type="eye"/>
|
||
{{$t('viewVarianceAssessment')}}
|
||
</div>
|
||
<div @click="viewConsistentAssessmentClick" class="operator-text-text"
|
||
:class="{'operator-text-text-text':isVarianceTwo?true:false}"
|
||
:title="$t('viewConsistentAssessment')">
|
||
<a-icon type="eye"/>
|
||
{{$t('viewConsistentAssessment')}}
|
||
</div>
|
||
<div @click="viewAllClick" class="operator-text-text"
|
||
:class="{'operator-text-text-text':isVarianceThe?true:false}"
|
||
:title="$t('viewAll')">
|
||
<a-icon type="eye"/>
|
||
{{$t('viewAll')}}
|
||
</div>
|
||
<div @click="exportComparisonReportClick" class="operator-text-text"
|
||
:title="$t('exportComparisonReport')">
|
||
<a-icon type="export" :rotate="-90"/>
|
||
{{$t('exportComparisonReport')}}
|
||
</div>
|
||
<div @click="commentClick" class="operator-text-text"
|
||
:title="$t('comment')">
|
||
<a-icon type="message"/>
|
||
{{$t('comment')}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding-top: 68px;background: #fff">
|
||
<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('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('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('comparisonDifferenceComment')">
|
||
{{$t('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%;overflow: overlay;height: calc(100vh - 300px)">
|
||
<div class="detail-content-content" v-for="(item,index) in resultData.resList">
|
||
<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('comparisonDifferenceComment')">-->
|
||
<!-- <a-icon type="message"/>-->
|
||
<!-- {{$t('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('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>
|
||
<a-modal
|
||
:title="title"
|
||
:width="600"
|
||
:visible="visible"
|
||
:confirm-loading="confirmLoading"
|
||
:maskClosable="false"
|
||
@cancel="visible = false"
|
||
>
|
||
<template slot="footer">
|
||
<a-button key="back" @click="visible = false">
|
||
{{$t('cancel')}}
|
||
</a-button>
|
||
<a-button type="primary" :loading="confirmLoading" @click="fullTextCommentsSubmit">
|
||
{{$t('submit')}}
|
||
</a-button>
|
||
</template>
|
||
<a-form-model :model="formInlineText" class="formAdd" :rules="rulesText" ref="ruleFormText">
|
||
<div class="box-title-text-Remarks" v-if="title == $t('fullTextComments')">
|
||
<div class="title-text-Remarks" :title="$t('fullTextComments')">
|
||
<span>{{$t('fullTextComments')}}</span>
|
||
</div>
|
||
<a-form-model-item class="itemModel" style="width: calc(100% - 113px)" prop="comment">
|
||
<a-textarea :placeholder="$t('pleaseEnterfullTextComments')"
|
||
v-model.trim="formInlineText.comment"
|
||
:rows="4"/>
|
||
</a-form-model-item>
|
||
</div>
|
||
<div class="box-title-text-Remarks" v-if="title == $t('comparativeComments')">
|
||
<div class="title-text-Remarks" :title="$t('comparativeComments')">
|
||
<span>{{$t('comparativeComments')}}</span>
|
||
</div>
|
||
<a-form-model-item class="itemModel" style="width: calc(100% - 113px)" prop="comment">
|
||
<a-textarea :placeholder="$t('pleaseEnter')+$t('comparativeComments')"
|
||
v-model.trim="formInlineText.comment"
|
||
:rows="4"/>
|
||
</a-form-model-item>
|
||
</div>
|
||
</a-form-model>
|
||
</a-modal>
|
||
<JLoading :loading="loading">{{$t('dataLoading')}}</JLoading>
|
||
<commentList ref="commentListRef"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getAction, postAction, downloadFile, deleteAction } from '@/api/manage'
|
||
import commentList from './commentList'
|
||
import { putAction } from '../../../../api/manage'
|
||
import { Base64 } from 'js-base64'
|
||
import { mapGetters } from 'vuex'
|
||
|
||
export default {
|
||
name: 'comparisonResults',
|
||
components: {
|
||
commentList
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
checkboxList: [],
|
||
isVarianceOne: false,
|
||
isVarianceTwo: false,
|
||
isVarianceThe: false,
|
||
confirmLoading: false,
|
||
downLoadFileUrl: window._CONFIG['domianPreviewURL'] + '/sys/common/download',
|
||
downLoadImgUrl: window._CONFIG['domianWebImgURL'] + '/sys/common/download',
|
||
visible: false,
|
||
formInlineText: {},
|
||
rulesText: {},
|
||
title: '',
|
||
indeterminate: false,
|
||
checkAll: false,
|
||
isDisplay: false,
|
||
fullCheckbox: false,
|
||
resultData: {},
|
||
comment: '',
|
||
language: '',
|
||
url: {
|
||
exportData: '/compare/sarFileCompareItemComment/exportResXls'
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
if (this.$route.query.isDisplay == 2) {
|
||
this.isDisplay = false
|
||
} else {
|
||
this.isDisplay = true
|
||
}
|
||
document.title = this.$t('DocumentComparison') + ' - ' + this.$t('comparisonResults')
|
||
this.language = localStorage.getItem('language') || ''
|
||
this.getData()
|
||
},
|
||
methods: {
|
||
...mapGetters(['userInfo']),
|
||
Fallback() {
|
||
this.$router.push({
|
||
path: '/documentComparison'
|
||
})
|
||
},
|
||
commentClick() {
|
||
this.$refs.commentListRef.getData()
|
||
},
|
||
exportComparisonReportClick() {
|
||
let checkboxList = JSON.parse(JSON.stringify(this.checkboxList))
|
||
let fullCheckbox = this.fullCheckbox
|
||
let 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('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) {
|
||
let fileName = name
|
||
let index1 = fileName.lastIndexOf('.')
|
||
let index2 = fileName.length
|
||
let 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))
|
||
} else if (fileSuffix == '.docx' || fileSuffix == '.doc') {
|
||
let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + id + fileSuffix)
|
||
window.open(url, '_blank')
|
||
} else if (fileSuffix == '.xlsx' || fileSuffix == '.xls') {
|
||
let 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') {
|
||
let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadImgUrl + '/' + id + fileSuffix)
|
||
window.open(url, '_blank')
|
||
} else {
|
||
downloadFile('/sys/common/downLoadFile', name, { id: id })
|
||
}
|
||
},
|
||
getData() {
|
||
let 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 || {}
|
||
this.loading = false
|
||
} else {
|
||
this.resultData = {}
|
||
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
|
||
}
|
||
},
|
||
fullTextCommentsSubmit() {
|
||
this.$refs.ruleFormText.validate(valid => {
|
||
if (valid) {
|
||
if (this.title == this.$t('fullTextComments')) {
|
||
this.fullTextComments()
|
||
} else {
|
||
this.comparaComments()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
fullTextComments() {
|
||
this.confirmLoading = true
|
||
let query = {
|
||
id: this.$route.query.id,
|
||
comments: this.formInlineText.comment
|
||
}
|
||
putAction('/compare/sarFileCompareInfo/editComments', query).then((res) => {
|
||
if (res.success) {
|
||
this.$message.success(this.$t('OperationSuccessful'))
|
||
this.confirmLoading = false
|
||
this.visible = false
|
||
this.getData()
|
||
} else {
|
||
this.$message.warning(this.$t('operationFailed'))
|
||
this.confirmLoading = false
|
||
}
|
||
})
|
||
},
|
||
comparaComments() {
|
||
this.confirmLoading = true
|
||
let query = {
|
||
infoId: this.$route.query.id,
|
||
id: this.formInlineText.id,
|
||
comment: this.formInlineText.comment
|
||
}
|
||
putAction('/compare/sarFileCompareItemComment/edit', query).then((res) => {
|
||
if (res.success) {
|
||
this.$message.success(this.$t('OperationSuccessful'))
|
||
this.confirmLoading = false
|
||
this.visible = false
|
||
this.getData()
|
||
} else {
|
||
this.$message.warning(this.$t('operationFailed'))
|
||
this.confirmLoading = false
|
||
}
|
||
})
|
||
},
|
||
fullTextEdit(item) {
|
||
this.visible = true
|
||
this.title = this.$t('fullTextComments')
|
||
this.formInlineText.comment = this.resultData.comments || ''
|
||
this.formInlineText = { ...this.formInlineText }
|
||
this.$nextTick(() => {
|
||
this.$refs.ruleFormText.clearValidate()
|
||
this.rulesText = {
|
||
comment: [
|
||
{
|
||
max: 500,
|
||
message: this.$t('fullTextComments') + this.$t('cannotExceed') + 500 + this.$t('Characters'),
|
||
trigger: 'blur'
|
||
}
|
||
]
|
||
}
|
||
this.rulesText = { ...this.rulesText }
|
||
})
|
||
},
|
||
comparaEdit(item) {
|
||
this.visible = true
|
||
this.title = this.$t('comparativeComments')
|
||
this.formInlineText = JSON.parse(JSON.stringify(item))
|
||
this.formInlineText = { ...this.formInlineText }
|
||
this.$nextTick(() => {
|
||
this.$refs.ruleFormText.clearValidate()
|
||
this.rulesText = {
|
||
comment: [
|
||
{
|
||
max: 500,
|
||
message: this.$t('comparativeComments') + this.$t('cannotExceed') + 500 + this.$t('Characters'),
|
||
trigger: 'blur'
|
||
}
|
||
]
|
||
}
|
||
this.rulesText = { ...this.rulesText }
|
||
})
|
||
},
|
||
comparaDelete(val) {
|
||
let _this = this
|
||
this.$confirm({
|
||
content: _this.$t('ConfirmDelete'),
|
||
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 lang="less" scoped>
|
||
@import '~@assets/less/common.less';
|
||
|
||
.doc-detail {
|
||
background: #fff;
|
||
height: 100%;
|
||
|
||
.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;
|
||
|
||
.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: 800px;
|
||
line-height: 68px;
|
||
/*display: flex;*/
|
||
text-align: right;
|
||
|
||
.doc-detail-btn {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
.operator-text-text {
|
||
cursor: pointer;
|
||
margin-right: 53px;
|
||
max-width: 138px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #040B29;
|
||
display: inline-block;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail-content {
|
||
padding: 24px 32px 0 32px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.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-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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
.operator-text-text-text {
|
||
color: #00B3BE !important;
|
||
}
|
||
</style> |