/* 当事人信息页面的主容器 */
|
.party-info-container {
|
position: absolute;
|
top: 44px;
|
width: 100%;
|
padding-bottom: 68px;
|
|
/* 内容区包装器，用于表单及所有区块的排列 */
|
.content-wrapper {
|
display: flex;
|
flex-direction: column;
|
/* 每个表单区块的通用样式 */
|
.section {
|
background-color: #ffffff;
|
}
|
|
/* 两行布局样式，用于姓名和联系方式 */
|
.form-two-column-layout {
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
margin-bottom: 8px;
|
padding: 12px 0;
|
background-color: #ffffff;
|
|
/* 姓名和联系方式的表单项样式 */
|
.dtm-form-item-required-label::before {
|
display: inline-block;
|
margin-right: 4px;
|
color: #ff0000;
|
font-size: 15px;
|
line-height: 1;
|
content: '*';
|
vertical-align: middle;
|
}
|
|
.dtm-form-item-default-label {
|
display: flex;
|
align-items: center;
|
padding: 12px 0;
|
}
|
|
.dtm-form-item-default {
|
padding: 0;
|
}
|
|
.form-component-wrapper {
|
width: 100%;
|
|
&.form-input-wrapper,
|
&.form-textarea-wrapper {
|
box-sizing: border-box;
|
display: block;
|
}
|
}
|
}
|
|
/* 企业信息下拉选择区域样式 */
|
#companyInfo {
|
min-height: 47px;
|
height: 47px;
|
.dtm-form-item-default-label {
|
font-size: 15px;
|
}
|
> .dtm-list-item {
|
min-height: 47px;
|
height: 47px;
|
padding-right: 16px;
|
> .dtm-list-line {
|
min-height: 47px;
|
padding: 0px;
|
}
|
}
|
}
|
/* 人员类型选择区域样式 */
|
.personnel-type {
|
height: 132px;
|
padding-left: 16px;
|
margin-bottom: 8px;
|
|
/* 人员类型标题样式 */
|
&-title {
|
padding-top: 12px;
|
padding-bottom: 8px;
|
width: 60px;
|
height: 23px;
|
font-size: 15px;
|
font-family: PingFang SC, PingFang SC-400;
|
font-weight: 400;
|
text-align: left;
|
color: #171a1d;
|
line-height: 23px;
|
}
|
|
/* 人员类型选项容器 */
|
&-content {
|
display: flex;
|
|
/* 每个类型选项的样式 */
|
.type-option {
|
display: flex;
|
margin-right: 16px;
|
width: 104px;
|
height: 63px;
|
flex-direction: column;
|
align-items: center;
|
cursor: pointer;
|
border: 1px solid #e8e8e8;
|
border-radius: 8px;
|
padding-top: 9px;
|
|
/* 选中状态样式 */
|
&.selected {
|
border-color: #1a6fb8;
|
position: relative;
|
|
/* 选中图标样式 */
|
.selected-icon {
|
position: absolute;
|
top: 5px;
|
right: 5px;
|
color: #1a6fb8;
|
font-size: 16px;
|
z-index: 1;
|
}
|
|
/* 选中状态下的类型图标样式 */
|
.type-icon {
|
&.natural-person {
|
background: url('../../../assets/img/natural_person_1.png') center/cover no-repeat;
|
}
|
|
&.legal-person {
|
background: url('../../../assets/img/legal_person_1.png') center/cover no-repeat;
|
}
|
|
&.non-legal-person {
|
background: url('../../../assets/img/unincorporated_org_1.png') center/cover no-repeat;
|
}
|
}
|
|
/* 选中状态下的类型名称样式 */
|
.type-name {
|
color: #1a6fb8;
|
}
|
}
|
/* 默认状态下的类型图标样式 */
|
.type-icon {
|
width: 32px;
|
height: 32px;
|
background-color: #f5f5f5;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
&.natural-person {
|
background: url('../../../assets/img/natural_person_0.png') center/cover no-repeat;
|
}
|
|
&.legal-person {
|
background: url('../../../assets/img/legal_person_0.png') center/cover no-repeat;
|
}
|
|
&.non-legal-person {
|
background: url('../../../assets/img/unincorporated_org_0.png') center/cover no-repeat;
|
}
|
}
|
|
/* 类型名称样式 */
|
.type-name {
|
padding-top: 4px;
|
padding-bottom: 5px;
|
line-height: 23px;
|
font-size: 15px;
|
font-family: PingFang SC, PingFang SC-400;
|
font-weight: 400;
|
color: #171a1d 60%;
|
text-align: center;
|
}
|
}
|
}
|
}
|
|
//自然人表单区域样式
|
.natural-person-content-wrapper {
|
//自然人表单内容样式
|
.dtm-list-content {
|
width: 100%;
|
font-size: 15px;
|
font-family: PingFang SC, PingFang SC-400;
|
font-weight: 400;
|
text-align: left;
|
color: #171a1d;
|
line-height: 23px;
|
}
|
//自然人表单项样式
|
.dtm-form-item-default {
|
font-size: 15px;
|
font-family: PingFang SC, PingFang SC-400;
|
font-weight: 400;
|
text-align: left;
|
color: #171a1d;
|
line-height: 23px;
|
}
|
// 身份证明材料特殊样式
|
.id-card-materials-item {
|
.dtm-form-item-default {
|
min-height: 47px;
|
padding: 0;
|
}
|
|
.dtm-list-content {
|
width: 100%;
|
}
|
|
.dtm-list-line {
|
min-height: 47px;
|
padding: 0;
|
}
|
|
.dtm-form-item-default-field {
|
text-align: right;
|
padding-right: 14px;
|
margin-right: 16px;
|
}
|
|
.dtm-upload {
|
width: auto !important;
|
justify-content: flex-end;
|
}
|
}
|
|
// 身份证明材料文件列表容器样式
|
.id-card-files-container {
|
padding: 0 16px;
|
margin-bottom: 8px;
|
background-color: #ffffff;
|
|
.file-item {
|
display: flex;
|
align-items: center;
|
padding: 12px 0;
|
border-bottom: 1px solid #f2f3f5;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.file-icon {
|
width: 36px;
|
height: 42px;
|
margin-right: 12px;
|
flex-shrink: 0;
|
}
|
|
.file-info {
|
flex: 1;
|
min-width: 0;
|
|
.file-name {
|
font-size: 14px;
|
color: #171a1d;
|
line-height: 20px;
|
margin-bottom: 4px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.file-size-preview {
|
display: flex;
|
align-items: center;
|
font-size: 12px;
|
line-height: 17px;
|
|
.file-size {
|
color: rgba(23, 26, 29, 0.6);
|
margin-right: 8px;
|
}
|
|
.preview-text {
|
color: #1a6fb8;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.file-actions {
|
margin-left: 8px;
|
|
.delete-btn-wrapper {
|
cursor: pointer;
|
|
.delete-icon {
|
width: 16px;
|
height: 16px;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
/* 企业信息区域样式 */
|
.company-info {
|
margin-bottom: 8px;
|
.dtm-list-line {
|
padding: 12px 0px;
|
padding-right: 16px;
|
height: 50px;
|
}
|
.dtm-list-content {
|
// height: 47px;
|
padding: 0px;
|
.form-item-label {
|
padding: 0px;
|
}
|
}
|
|
/* 表单项标签容器样式 */
|
.form-item-label {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
// min-height: 47px;
|
width: 100%;
|
|
/* 标签文本样式 */
|
.form-item-label-text {
|
flex: 1;
|
width: 50%;
|
font-size: 15px;
|
}
|
|
/* 营业执照识别按钮样式 */
|
.license-recognition-btn {
|
font-size: 15px;
|
flex: 1;
|
width: 50%;
|
text-align: right;
|
padding: 0;
|
background: none;
|
border: none;
|
color: #1a6fb8;
|
margin: 0px;
|
.dtm-button-text {
|
// 靠右显示
|
justify-content: flex-end;
|
}
|
|
.id-card-icon {
|
margin-right: 4px;
|
}
|
}
|
}
|
}
|
|
/* 企业详细信息区域样式 */
|
.company-detail {
|
margin-bottom: 8px;
|
padding-right: 16px;
|
.dtm-list-item {
|
.dtm-list-line {
|
height: 74px;
|
padding: 0px;
|
}
|
}
|
.company-type-item {
|
.dtm-list-item {
|
min-height: 47px;
|
.dtm-list-line {
|
height: 47px;
|
padding: 0px;
|
}
|
}
|
}
|
}
|
.flex-center(@axis: both) {
|
display: flex;
|
justify-content: center; // 水平居中
|
align-items: center; // 垂直居中
|
flex-direction: @axis; // 可选参数，调整主轴方向
|
}
|
/* 企业登记材料和法定代表人身份证明材料区域样式 */
|
.registration-materials,
|
.legal-identity {
|
margin-bottom: 8px;
|
padding-right: 16px;
|
> .dtm-list-item {
|
min-height: 47px;
|
> .dtm-list-line {
|
min-height: 47px;
|
padding: 0px;
|
> .dtm-list-content {
|
> .dtm-form-item-default {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
width: 100%;
|
padding-right: 16px;
|
|
> .dtm-form-item-default-label {
|
flex: 3;
|
width: 100%;
|
min-width: 0;
|
padding-right: 12px;
|
word-break: break-word;
|
white-space: normal;
|
}
|
> .dtm-form-item-default-field {
|
flex: 1;
|
/* 上传容器样式 */
|
> .upload-container {
|
/* 上传按钮容器样式 */
|
.upload-button-container {
|
display: flex;
|
align-items: center;
|
height: 100%;
|
justify-content: flex-end;
|
.dtm-upload {
|
justify-content: flex-end;
|
display: flex;
|
.dtm-list-item {
|
min-height: 47px;
|
.dtm-list-line {
|
padding: 0%;
|
min-height: 47px;
|
padding-right: 0;
|
.dd-icon {
|
.flex-center();
|
}
|
}
|
}
|
}
|
.dtm-divider {
|
width: 0px;
|
min-width: 0;
|
height: 0px;
|
margin: 0px;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
/* 文件列表区域样式 */
|
.file-list {
|
padding: 0px;
|
padding-left: 16px;
|
|
/* 单个文件项样式 */
|
.file-item {
|
display: flex;
|
align-items: center;
|
padding: 13px 0;
|
// border-bottom: 1px solid #f2f3f5;
|
|
// &:last-child {
|
// border-bottom: none;
|
// }
|
|
/* 文件图标样式 */
|
.file-icon {
|
width: 42px;
|
height: 48px;
|
margin-right: 16px;
|
// flex-shrink: 0;
|
}
|
|
/* 文件信息区域样式 */
|
.file-info {
|
flex: 1;
|
min-width: 0;
|
|
/* 文件名称样式 */
|
.file-name {
|
font-size: 14px;
|
color: #171a1d;
|
line-height: 20px;
|
margin-bottom: 4px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
/* 文件大小和预览区域样式 */
|
.file-size-preview {
|
display: flex;
|
align-items: center;
|
font-size: 12px;
|
line-height: 17px;
|
|
/* 文件大小样式 */
|
.file-size {
|
color: rgba(23, 26, 29, 0.6);
|
margin-right: 4px;
|
}
|
|
/* 预览文本样式 */
|
.preview-text {
|
color: #1a6fb8;
|
cursor: pointer;
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
}
|
|
/* 文件操作区域样式 */
|
.file-actions {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-left: 12px;
|
height: 100%;
|
|
/* 删除按钮包装器样式 */
|
.delete-btn-wrapper {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
height: 100%;
|
|
/* 删除图标样式 */
|
.delete-icon {
|
width: 16px;
|
height: 16px;
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
/* 反映诉求记录样式 */
|
.complaint-record {
|
background-color: #ffffff;
|
margin-bottom: 8px;
|
|
.complaint-title {
|
font-size: 16px;
|
font-weight: 500;
|
color: #171a1d;
|
margin-bottom: 12px;
|
text-align: left;
|
}
|
|
.complaint-stats {
|
.stats-item {
|
display: flex;
|
width: 300px;
|
margin-bottom: 8px;
|
font-size: 15px;
|
color: #4e5969;
|
line-height: 22px;
|
text-align: left;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
}
|
|
/* 底部保存按钮区域样式 */
|
.bottom-button-area {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 68px;
|
background-color: #ffffff;
|
z-index: 100;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 0;
|
margin: 0;
|
box-sizing: border-box;
|
|
/* 保存按钮样式 */
|
.save-button {
|
width: 343px;
|
height: 44px;
|
margin: 12px 0;
|
background: #1a6fb8;
|
border-radius: 8px;
|
padding: 0;
|
|
/* 保存按钮文本样式 */
|
&-text {
|
margin-top: 8px;
|
height: 24px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 17px;
|
font-family: PingFang SC, PingFang SC-400;
|
font-weight: 400;
|
text-align: center;
|
color: #ffffff;
|
}
|
}
|
}
|
}
|
|
/* 表单项标签样式，用于包含识别按钮的标签 */
|
.form-item-label {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
|
/* 营业执照识别按钮样式 */
|
.license-recognition-btn {
|
background: none;
|
color: #1a6fb8;
|
border: none;
|
height: 32px;
|
padding: 0;
|
font-size: 14px;
|
white-space: nowrap;
|
line-height: 32px;
|
display: flex;
|
align-items: center;
|
min-width: 100px;
|
|
/* 身份证图标样式 */
|
.id-card-icon {
|
font-size: 16px;
|
margin-right: 4px;
|
flex-shrink: 0;
|
}
|
|
/* 按钮文本样式 */
|
.dtm-button-text {
|
display: flex;
|
align-items: center;
|
height: 100%;
|
padding: 0;
|
margin: 0;
|
font-size: 14px;
|
font-family: PingFang SC, PingFang SC-400;
|
font-weight: 400;
|
text-align: left;
|
color: #1a6fb8;
|
line-height: 32px;
|
flex: 1;
|
}
|
|
/* 按钮激活状态样式 */
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
|
/* 人员标签相关样式 */
|
.card-select-container {
|
.label {
|
align-items: center;
|
justify-content: center;
|
width: 30px;
|
height: 24px;
|
border-radius: 4px;
|
font-size: 14px;
|
font-family: PingFang SC, PingFang SC-400;
|
font-weight: 400;
|
color: #ffffff;
|
padding: 8px;
|
margin-right: 8px;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
position: relative;
|
}
|
|
/* 标签被选中状态的样式 */
|
.label-selected {
|
transform: scale(1.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
}
|
|
.label-selected::after {
|
content: '✓';
|
position: absolute;
|
top: -5px;
|
right: -5px;
|
width: 15px;
|
height: 15px;
|
background-color: #fff;
|
border-radius: 50%;
|
color: #000;
|
font-size: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: bold;
|
}
|
|
/* 每个标签的不同背景色 */
|
.label:nth-child(1) {
|
background-color: #c874d9; /* 精 */
|
}
|
|
.label:nth-child(2) {
|
background-color: #4cd987; /* 流 */
|
}
|
|
.label:nth-child(3) {
|
background-color: #e6be41; /* 毒 */
|
}
|
|
.label:nth-child(4) {
|
background-color: #d95e94; /* 矫 */
|
}
|
|
.label:nth-child(5) {
|
background-color: #20b0b8; /* 刑 */
|
}
|
|
.label:nth-child(6) {
|
background-color: #377eee; /* 少 */
|
}
|
|
.label:nth-child(7) {
|
background-color: #5d9cee; /* 潜 */
|
}
|
|
.label:nth-child(8) {
|
background-color: #6764d7; /* 涉 */
|
}
|
}
|
|
// 添加缓存的自然人卡片样式
|
.cached-natural-persons {
|
margin: 10px 16px;
|
|
.cache-title {
|
font-size: 16px;
|
font-weight: 500;
|
color: #333;
|
margin-bottom: 10px;
|
}
|
|
.person-card {
|
background-color: #fff;
|
border-radius: 8px;
|
padding: 12px;
|
margin-bottom: 10px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
&:active {
|
background-color: #f5f5f5;
|
}
|
|
.person-info {
|
.person-name {
|
font-size: 16px;
|
font-weight: 500;
|
color: #333;
|
margin-bottom: 8px;
|
}
|
|
.person-details {
|
.detail-item {
|
display: flex;
|
margin-bottom: 4px;
|
font-size: 14px;
|
|
.detail-label {
|
color: #666;
|
margin-right: 8px;
|
min-width: 70px;
|
}
|
|
.detail-value {
|
color: #333;
|
flex: 1;
|
word-break: break-all;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
/* Select组件样式调整 */
|
:global {
|
.dtm-select {
|
.dtm-select-selector {
|
display: flex;
|
align-items: center;
|
height: 100%;
|
|
.dtm-select-selection-item {
|
display: flex;
|
align-items: center;
|
line-height: 1;
|
height: 100%;
|
padding: 0;
|
}
|
|
.dtm-select-arrow {
|
display: flex;
|
align-items: center;
|
margin-top: 0;
|
height: 100%;
|
position: absolute;
|
right: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
}
|
}
|
|
/* 全局InputItem样式调整 */
|
.dtm-input-item-input {
|
margin-bottom: 8px;
|
}
|
}
|
