.self-inspection-container {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
height: 774px;
|
width: 375px;
|
background-color: #f2f2f2;
|
|
.person-placeholder {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
width: 375px;
|
height: 666px;
|
|
.person-image {
|
width: 128px;
|
height: 128px;
|
display: flex;
|
justify-content: center;
|
}
|
|
.add-person-text {
|
font-size: 16px;
|
width: 112px;
|
height: 24px;
|
color: #171a1d;
|
margin: 16px 0 !important;
|
text-align: center;
|
font-family: PingFang SC, PingFang SC-400;
|
font-weight: 400;
|
line-height: 24px;
|
}
|
|
.add-person-btn {
|
width: 164px;
|
height: 44px;
|
border-radius: 22.5px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 15px;
|
background: #fff;
|
border: 1px solid #e5e6eb;
|
transition: all 0.3s;
|
|
&:hover {
|
background: #f2f3f5;
|
}
|
|
img {
|
width: 18px;
|
height: 17px;
|
margin-right: 8px;
|
}
|
|
span {
|
font-size: 15px;
|
// color: #1D2129;
|
line-height: 1;
|
}
|
}
|
}
|
}
|
|
// 弹窗相关样式
|
.person-modal {
|
// Modal 整体样式
|
width: 100%;
|
padding: 0 12px;
|
margin: 0 auto;
|
position: relative;
|
transform: translateY(0px); // 将弹窗上移距离从-90px改为-70px
|
|
& .dtm-modal-header {
|
text-align: left;
|
padding: 0px 16px 12px;
|
position: relative;
|
|
&::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
left: 16px;
|
right: 16px;
|
height: 1px;
|
background: none;
|
border-bottom: 1px dashed rgba(126, 134, 142, 0.24);
|
}
|
|
& .dtm-modal-title {
|
text-align: left;
|
font-size: 17px;
|
}
|
}
|
|
& .dtm-modal-body {
|
padding: 10px 16px 12px !important;
|
box-sizing: border-box;
|
position: relative;
|
}
|
|
.modal-wrapper {
|
position: relative;
|
width: 100%;
|
height: 556px;
|
}
|
|
// 关闭按钮样式
|
.cancel-button {
|
position: fixed;
|
bottom: -45px;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 27px;
|
height: 27px;
|
background: transparent;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
z-index: 1000;
|
border: 1px solid #ffffff;
|
|
.cancel-icon {
|
width: 27px;
|
height: 27px;
|
line-height: 27px;
|
color: #ffffff;
|
object-fit: contain;
|
}
|
}
|
|
// 弹窗内容区域
|
.person-modal-content {
|
width: 100%;
|
height: 100%;
|
margin: 0 auto;
|
padding: 0;
|
box-sizing: border-box;
|
|
.person-modal-wrapper {
|
width: 100%;
|
height: 556px;
|
display: flex;
|
justify-content: center;
|
|
.modal-main-content {
|
width: 319px;
|
height: 556px;
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
padding: 0;
|
margin: 0;
|
|
.modal-option-item {
|
width: 100%;
|
height: 122px;
|
border-radius: 6px;
|
position: relative;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
box-sizing: border-box;
|
padding: 0 10px 0 16px;
|
margin: 6px 0;
|
|
.option-content {
|
flex: 1;
|
height: 122px;
|
display: flex;
|
flex-direction: column;
|
box-sizing: border-box;
|
position: relative;
|
align-items: flex-start;
|
justify-content: flex-start;
|
|
.content-item-a {
|
margin-top: 12px;
|
width: 120px;
|
align-self: flex-start;
|
padding-left: 0;
|
margin-left: 0;
|
text-align: left;
|
|
.item-title {
|
font-size: 16px;
|
color: #ffffff;
|
font-weight: 400;
|
line-height: 22px;
|
font-family: PingFang SC, PingFang SC-400;
|
padding-left: 0;
|
margin-left: 0;
|
text-align: left;
|
}
|
}
|
|
.content-item-b {
|
margin-top: 4px;
|
width: 168px;
|
padding-left: 0;
|
margin-left: 0;
|
text-align: left;
|
|
.item-desc {
|
font-size: 14px;
|
color: rgba(255, 255, 255, 0.8);
|
line-height: 20px;
|
font-family: PingFang SC, PingFang SC-400;
|
text-align: left;
|
}
|
}
|
|
.content-item-c {
|
position: absolute;
|
bottom: 0px;
|
left: 0;
|
height: 32px;
|
margin-bottom: 16px;
|
|
.item-button {
|
width: 60px;
|
height: 32px;
|
background: transparent;
|
border: 1px solid #ffffff;
|
border-radius: 100px;
|
color: #ffffff;
|
font-size: 14px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
|
.option-image {
|
width: 80px;
|
height: 80px;
|
object-fit: contain;
|
margin-right: 5px;
|
}
|
|
&.blue-bg {
|
background-color: #1f68c7;
|
}
|
|
&.orange-bg {
|
background-color: #d46b08;
|
}
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
// 简洁弹窗样式
|
.simple-modal-content {
|
.modal-tip {
|
font-size: 16px;
|
color: #333;
|
margin-bottom: 16px;
|
text-align: center;
|
}
|
|
.input-group {
|
margin-bottom: 20px;
|
}
|
|
.modal-buttons {
|
display: flex;
|
justify-content: flex-end;
|
}
|
}
|
|
.modal-container {
|
position: relative;
|
|
.modal-content {
|
width: 351px;
|
padding-top: 81px;
|
padding-bottom: 129px;
|
height: 601px;
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
}
|
|
.modal-option {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 122px;
|
padding: 16px;
|
border-radius: 8px;
|
transition: all 0.3s ease;
|
|
.add-btn {
|
width: 60px;
|
height: 30px;
|
border-radius: 15px;
|
font-size: 12px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 0;
|
margin-top: auto;
|
background: transparent;
|
border: 1px solid #ffffff;
|
color: #ffffff;
|
}
|
|
.option-text {
|
font-size: 16px;
|
font-family: PingFang SC, PingFang SC-500;
|
font-weight: 500;
|
line-height: 24px;
|
margin-bottom: 4px;
|
color: #ffffff;
|
}
|
|
.option-desc {
|
font-size: 14px;
|
font-family: PingFang SC, PingFang SC-400;
|
font-weight: 400;
|
line-height: 20px;
|
margin-bottom: auto;
|
color: rgba(255, 255, 255, 0.8);
|
}
|
|
&:hover {
|
opacity: 0.9;
|
transform: translateY(-2px);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
}
|
|
&:active {
|
transform: translateY(0);
|
opacity: 1;
|
}
|
|
.option-info {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
justify-content: space-between;
|
}
|
|
.option-icon {
|
width: 48px;
|
height: 48px;
|
object-fit: contain;
|
}
|
}
|
}
|
|
/** 案件信息区块样式 */
|
.case-info-put-container {
|
margin-top: 82px !important;
|
|
.case-info-block {
|
background-color: #f2f2f2;
|
margin-bottom: 8px; // 区块之间的间隔
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
|
.block-title {
|
font-size: 16px;
|
font-weight: 500;
|
color: #171a1d;
|
margin-bottom: 12px;
|
}
|
|
> .block-content {
|
padding: 8px;
|
min-height: 40px;
|
}
|
}
|
|
/* 添加人员信息按钮样式 */
|
.add-personnel-btn1 {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
// padding: 8px 16px;
|
width: 352px;
|
height: 44px;
|
background: #ffffff !important;
|
border: 0.5px solid #1a6fb8 !important;
|
border-radius: 22.5px !important;
|
|
span {
|
color: #1a6fb8;
|
font-size: 15px;
|
}
|
}
|
|
/* 添加人员信息容器 */
|
.add-personnel-container {
|
display: flex;
|
justify-content: center;
|
padding: 15px 0 10px;
|
background: #f2f2f2;
|
}
|
|
/* 添加人员信息图标 */
|
.add-personnel-icon {
|
width: 18px;
|
height: 17px;
|
vertical-align: middle;
|
margin-right: 8px;
|
position: relative;
|
}
|
|
/* 添加人员信息文本 */
|
.add-personnel-text {
|
margin-bottom: 2px;
|
}
|
}
|
|
/* 缓存表单容器样式 - 用于包裹所有人员信息卡片 */
|
.cached-forms-container {
|
display: flex;
|
flex-direction: column;
|
background-color: #f2f2f2;
|
}
|
|
/* 卡片外层容器样式 */
|
.card-container {
|
background: #f2f2f2;
|
display: flex;
|
}
|
|
/* 缓存表单卡片样式 - 单个人员信息卡片 */
|
.cached-form-card {
|
position: relative;
|
padding: 12px 16px 12px 0;
|
background: #ffffff;
|
transition: background-color 0.2s;
|
|
&:active {
|
background-color: #f5f7fa;
|
}
|
|
/* 添加指示点击的箭头 */
|
|
/* 删除图标容器 */
|
.delete-icons {
|
position: absolute;
|
top: 0;
|
right: 0;
|
display: flex;
|
z-index: 10;
|
|
.delete-icon-wrapper {
|
width: 25px;
|
height: 25px;
|
display: flex;
|
justify-content: center;
|
position: relative;
|
|
img {
|
width: 20px;
|
height: 20px;
|
}
|
|
.delete-icon-overlay {
|
position: absolute;
|
left: 9px;
|
width: 12px;
|
height: 12px;
|
z-index: 2;
|
}
|
|
&:hover {
|
opacity: 0.8;
|
}
|
}
|
}
|
|
/* 申请方角色标识 */
|
.applicant-badge {
|
width: 48px;
|
height: 48px;
|
margin: 0px 8px;
|
background: #3491fa;
|
border-radius: 4px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-shrink: 0;
|
|
.applicant-text {
|
width: 42px;
|
height: 22px;
|
font-size: 14px;
|
font-family: PingFang SC, PingFang SC-400;
|
font-weight: 400;
|
text-align: center;
|
color: #ffffff;
|
line-height: 22px;
|
}
|
}
|
|
/* 被申请方角色标识 */
|
.respondent-badge {
|
width: 48px;
|
height: 48px;
|
margin: 0px 8px;
|
background: #d46b08;
|
border-radius: 4px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
flex-shrink: 0;
|
padding: 2px 0;
|
box-sizing: border-box;
|
|
.respondent-text {
|
width: 28px;
|
height: 22px;
|
font-size: 14px;
|
font-family: PingFang SC, PingFang SC-400;
|
font-weight: 400;
|
text-align: center;
|
color: #ffffff;
|
line-height: 22px;
|
display: block;
|
}
|
}
|
|
/* 卡片内容区域样式 */
|
.content-wrapper {
|
flex: 1;
|
overflow: hidden;
|
}
|
|
.cached-form-content {
|
margin-bottom: 4px;
|
|
/* 姓名和电话区域 */
|
.cached-form-name-phone {
|
display: flex;
|
align-items: center;
|
|
/* 姓名样式 */
|
.cached-form-name {
|
font-size: 14px;
|
color: #171a1d;
|
font-weight: 400;
|
}
|
|
/* 电话样式 */
|
.cached-form-phone {
|
margin-left: 12px;
|
color: #86909c;
|
font-size: 14px;
|
flex-shrink: 0;
|
}
|
}
|
}
|
|
/* 卡片头部样式 */
|
.cached-form-header {
|
/* 人员类型样式 */
|
.cached-form-type {
|
font-size: 12px;
|
color: #86909c;
|
|
span {
|
margin-left: 6px;
|
color: #0e5fd8;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
|
/* 分隔线样式 */
|
.card-separator {
|
background-color: #f2f3f5;
|
height: 0px;
|
width: 100%;
|
}
|
|
/* 底部保存按钮区域样式 */
|
.bottom-button-area {
|
width: 100%;
|
height: 68px;
|
// background-color: #ffffff;
|
background-color: #ffffff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 0;
|
margin: 0;
|
box-sizing: border-box;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
z-index: 100;
|
|
/* 保存按钮样式 */
|
.save-button {
|
width: 343px;
|
height: 44px;
|
background-color: #1a6fb8;
|
border-color: #1a6fb8;
|
// border-radius: 22px;
|
font-size: 16px;
|
padding: 0;
|
margin: 0;
|
|
&:active {
|
background-color: #155ea1;
|
border-color: #155ea1;
|
}
|
}
|
|
/* 按钮文本样式 */
|
.save-button-text {
|
font-size: 17px;
|
color: #ffffff;
|
height: 24px;
|
letter-spacing: 0px;
|
font-family: PingFang SC, PingFang SC-400;
|
font-weight: 400;
|
text-align: left;
|
margin-top: 8px;
|
padding: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
|
.first {
|
margin-top: -44px;
|
background: #f2f3f5;
|
.self-inspection-container {
|
height: 100vh;
|
padding-top: 44px;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
background: #f2f3f5;
|
|
.person-placeholder {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
padding: 20px;
|
text-align: center;
|
|
.person-image {
|
img {
|
width: 130px;
|
height: auto;
|
}
|
}
|
|
.add-person-text {
|
margin-bottom: 20px;
|
font-size: 16px;
|
color: rgba(23, 26, 29, 0.6);
|
line-height: 1.5;
|
}
|
|
.add-person-btn {
|
width: 160px;
|
height: 42px;
|
background: #1a6fb8;
|
color: #ffffff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 22px;
|
font-size: 14px;
|
}
|
}
|
}
|
}
|
|
/* 确认提示弹窗样式 */
|
.confirmModal-title {
|
font-size: 17px;
|
color: #1d2129;
|
font-weight: 400;
|
text-align: center;
|
font-family: PingFang SC, PingFang SC-400;
|
line-height: 24px;
|
}
|
|
.confirmModal-subtitle {
|
font-size: 14px;
|
color: #86909c;
|
text-align: center;
|
}
|
|
/* 添加前置条件提示框样式 */
|
.prerequisite-tooltip {
|
position: fixed;
|
z-index: 9999;
|
width: 128px;
|
pointer-events: none;
|
|
.tooltip-content {
|
background-color: rgba(0, 0, 0, 0.75);
|
color: white;
|
padding: 12px;
|
border-radius: 4px;
|
font-size: 14px;
|
text-align: center;
|
position: relative;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
height: 108px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
box-sizing: border-box;
|
|
.tooltip-icon {
|
margin-right: 6px;
|
color: white;
|
}
|
}
|
|
/* 移除尖锐三角形部分 */
|
.tooltip-arrow {
|
display: none;
|
}
|
}
|
|
.add-personnel-container {
|
display: flex;
|
justify-content: center;
|
padding: 15px 0 10px;
|
background: #f2f2f2;
|
}
|
|
.add-personnel-btn {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
padding: 8px 16px;
|
border-radius: 4px;
|
background: #fff;
|
border: 1px solid #e5e6eb;
|
transition: all 0.3s;
|
|
&:hover {
|
background: #f2f3f5;
|
}
|
|
img {
|
width: 18px;
|
height: 17px;
|
margin-right: 8px;
|
}
|
|
span {
|
font-size: 14px;
|
color: #1d2129;
|
line-height: 1;
|
}
|
}
|
