update 标准分解单样式
This commit is contained in:
赵霄
@@ -1,21 +1,163 @@
|
||||
<template>
|
||||
<div class="sheet-box">
|
||||
<!-- 标准目录-->
|
||||
<!--标准目录-->
|
||||
<div class="standard-catalogue part-common">
|
||||
<div class="part-title">标准目录</div>
|
||||
<div class="part-title">{{ $t('standardRegulationLibrary.standardCatalogue') }}</div>
|
||||
<div class="has-title-part-content">
|
||||
<a-tree :show-line="false" :show-icon="false" :tree-data="treeData" :selected-keys="selectedTreeKeys" @select="handleTreeSelected">
|
||||
</a-tree>
|
||||
</div>
|
||||
</div>
|
||||
<!--标准内容-->
|
||||
<div class="sheet-container part-ml">
|
||||
<!--标准名称-->
|
||||
<div class="standard-name">
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title>
|
||||
{{}}
|
||||
</template>
|
||||
<span></span>
|
||||
</a-tooltip>
|
||||
<a-button type="link" :icon="showClauseLable ? 'fullscreen' : 'fullscreen-exit'" @click="handleClauseChange(!showClauseLable)">
|
||||
{{ showClauseLable ? $t('open') : $t('putAway') }}
|
||||
</a-button>
|
||||
</div>
|
||||
<!--条文内容-->
|
||||
<div class="standard-content"></div>
|
||||
</div>
|
||||
<!--条文标签-->
|
||||
<div class="clause-label part-ml part-common" v-show="showClauseLable">
|
||||
<div class="part-title">{{ $t('standardRegulationLibrary.clauseLabel') }}</div>
|
||||
<div class="has-title-part-content">
|
||||
<div class="clause-item" v-for="(clause, index) in clauseField" :key="index">
|
||||
<label>{{ clause.title }}</label>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--条文、条文标签切换-->
|
||||
<div class="clause-label-change part-ml part-common">
|
||||
<!--条文-->
|
||||
<div class="clause-label-change-item" :class="{'clause-label-change-item-selected': !showClauseLable}" @click="handleClauseChange(false)">
|
||||
<a-icon type="profile" />
|
||||
<span>条文</span>
|
||||
</div>
|
||||
<!--条文标签-->
|
||||
<div class="clause-label-change-item" :class="{'clause-label-change-item-selected': showClauseLable}" @click="handleClauseChange(true)">
|
||||
<a-icon type="profile" />
|
||||
<span>条文标签</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 标准内容-->
|
||||
<div class="sheet-container part-ml part-common"></div>
|
||||
<!-- 条文标签-->
|
||||
<div class="clause-label part-ml part-common"></div>
|
||||
<!-- 条文、条文标签切换-->
|
||||
<div class="clause-label-change part-ml part-common"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@assets/less/common.less'
|
||||
|
||||
export default {
|
||||
name: 'StandardResolutionSheet'
|
||||
name: 'StandardResolutionSheet',
|
||||
data () {
|
||||
return {
|
||||
showClauseLable: true, // 是否展示条文标签
|
||||
clauseField: [
|
||||
// 条文号
|
||||
{
|
||||
title: this.$t('standardRegulationLibrary.clauseNumber'),
|
||||
fieldName: ''
|
||||
},
|
||||
// 条文标题
|
||||
{
|
||||
title: this.$t('standardRegulationLibrary.clauseTitle'),
|
||||
fieldName: ''
|
||||
},
|
||||
// 法规要求类型
|
||||
{
|
||||
title: this.$t('standardRegulationLibrary.regulatoryRequirementsType'),
|
||||
fieldName: ''
|
||||
},
|
||||
// 功能分类
|
||||
{
|
||||
title: this.$t('standardRegulationLibrary.functionalClassification'),
|
||||
fieldName: ''
|
||||
},
|
||||
// 功能专业
|
||||
{
|
||||
title: this.$t('standardRegulationLibrary.functionalSpecialty'),
|
||||
fieldName: ''
|
||||
},
|
||||
// 分组编码
|
||||
{
|
||||
title: this.$t('standardRegulationLibrary.blockCoding'),
|
||||
fieldName: ''
|
||||
},
|
||||
// 分组名称
|
||||
{
|
||||
title: this.$t('standardRegulationLibrary.groupName'),
|
||||
fieldName: ''
|
||||
},
|
||||
// 新认证实施时间
|
||||
{
|
||||
title: this.$t('standardRegulationLibrary.newCertificationImplementationTime'),
|
||||
fieldName: ''
|
||||
},
|
||||
// 已认证实施时间
|
||||
{
|
||||
title: this.$t('standardRegulationLibrary.certifiedImplementationTime'),
|
||||
fieldName: ''
|
||||
},
|
||||
// 新注册实施时间
|
||||
{
|
||||
title: this.$t('standardRegulationLibrary.newRegistrationImplementationTime'),
|
||||
fieldName: ''
|
||||
},
|
||||
// 适用车型
|
||||
{
|
||||
title: this.$t('standardRegulationLibrary.applicableVehicleType'),
|
||||
fieldName: ''
|
||||
},
|
||||
// 动力类型
|
||||
{
|
||||
title: this.$t('standardRegulationLibrary.dynamicType'),
|
||||
fieldName: ''
|
||||
}
|
||||
],
|
||||
treeData: [
|
||||
{
|
||||
title: '0-0',
|
||||
key: '0-0',
|
||||
children: [
|
||||
{
|
||||
title: '0-0-0',
|
||||
key: '0-0-0',
|
||||
children: [
|
||||
{ title: '0-0-0-0', key: '0-0-0-0' },
|
||||
{ title: '0-0-0-1', key: '0-0-0-1' },
|
||||
{ title: '0-0-0-2', key: '0-0-0-2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '0-0-1',
|
||||
key: '0-0-1',
|
||||
children: [
|
||||
{ title: '0-0-1-0', key: '0-0-1-0' },
|
||||
{ title: '0-0-1-1', key: '0-0-1-1' },
|
||||
{ title: '0-0-1-2', key: '0-0-1-2' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
selectedTreeKeys: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTreeSelected (selectedKeys) {
|
||||
this.selectedTreeKeys = selectedKeys
|
||||
},
|
||||
handleClauseChange (flag) {
|
||||
this.showClauseLable = flag
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -39,6 +181,12 @@ export default {
|
||||
.standard-catalogue {
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
min-width: 280px;
|
||||
|
||||
/deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
|
||||
background-color: transparent !important;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.sheet-container {
|
||||
@@ -49,18 +197,62 @@ export default {
|
||||
|
||||
.clause-label {
|
||||
width: 25%;
|
||||
min-width: 400px;
|
||||
height: 100%;
|
||||
|
||||
.clause-item {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
|
||||
label {
|
||||
width: 12rem;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC-Regular, PingFang SC, sans-serif;
|
||||
color: #86909C;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC-Regular, PingFang SC, sans-serif;
|
||||
color: #1D2129;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clause-label-change {
|
||||
width: 6%;
|
||||
min-width: 130px;
|
||||
height: 100%;
|
||||
padding-top: 56px;
|
||||
|
||||
&-item {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC-Semibold, PingFang SC, sans-serif;
|
||||
font-weight: 600;
|
||||
color: #1D2129;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-item-selected {
|
||||
background: #FAE6E5;
|
||||
}
|
||||
}
|
||||
|
||||
.part-title {
|
||||
height: 56px;
|
||||
background: rgba(213, 44, 38, 0.12);
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
line-height: 56px;
|
||||
padding: 0 24px;
|
||||
font-size: 16px;
|
||||
@@ -68,4 +260,42 @@ export default {
|
||||
font-weight: 600;
|
||||
color: #1D2129;
|
||||
}
|
||||
|
||||
.has-title-part-content {
|
||||
height: calc(100% - 56px);
|
||||
overflow: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.standard-name {
|
||||
height: 56px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.standard-name > span {
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC-Semibold, PingFang SC, sans-serif;
|
||||
font-weight: 600;
|
||||
color: #1D2129;
|
||||
flex: 1;
|
||||
width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.standard-content {
|
||||
height: calc(100% - 72px);
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
overflow: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user