/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2025-04-10 16:45:00
|
* @LastEditTime: 2025-05-13 17:07:31
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 申请记录详情样式
|
*/
|
|
.sqjl-detail {
|
}
|
|
.sqjl-detail-card {
|
background-color: #fff;
|
border-radius: 4px;
|
padding: 16px;
|
position: relative;
|
overflow: hidden;
|
}
|
|
.sqjl-detail-status {
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
z-index: 1;
|
|
img {
|
width: 80px;
|
height: 80px;
|
opacity: 0.6;
|
}
|
}
|
|
.sqjl-detail-row {
|
margin-bottom: 8px;
|
position: relative;
|
z-index: 2;
|
}
|
|
.sqjl-detail-label {
|
font-size: 14px;
|
color: #999;
|
margin-bottom: 0px;
|
}
|
|
.sqjl-detail-value {
|
font-size: 15px;
|
color: #333;
|
line-height: 1.5;
|
word-break: break-all;
|
}
|
|
.content-row {
|
.sqjl-detail-value {
|
background-color: #f7f8fa;
|
padding: 12px;
|
border-radius: 4px;
|
min-height: 80px;
|
}
|
}
|
|
.sqjl-detail-files {
|
margin-top: 24px;
|
position: relative;
|
z-index: 2;
|
}
|
|
.sqjl-detail-files-title {
|
font-size: 14px;
|
color: #999;
|
margin-bottom: 12px;
|
}
|
|
.sqjl-detail-files-list {
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
}
|
|
.sqjl-detail-file-item {
|
display: flex;
|
align-items: center;
|
background-color: #f2f7fe;
|
padding: 12px;
|
border-radius: 4px;
|
}
|
|
.sqjl-detail-file-icon {
|
width: 24px;
|
height: 24px;
|
margin-right: 12px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.icon-link {
|
display: inline-block;
|
width: 20px;
|
height: 20px;
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z' fill='%231a6fb8'/%3E%3C/svg%3E");
|
background-size: contain;
|
}
|
}
|
|
.sqjl-detail-file-info {
|
flex: 1;
|
}
|
|
.sqjl-detail-file-name {
|
font-size: 14px;
|
color: #333;
|
margin-bottom: 4px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.sqjl-detail-file-size {
|
font-size: 12px;
|
color: #1a6fb8;
|
}
|
|
.sqjl-detail-phone {
|
color: #666;
|
}
|
|
.sqjl-detail-dept {
|
margin-bottom: 8px;
|
padding: 2px 0;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
&-tag {
|
width: 82px;
|
height: 30px;
|
background: #ffece8;
|
border-radius: 2px;
|
font-size: 14px;
|
color: #f53f3f;
|
text-align: center;
|
line-height: 30px;
|
}
|
}
|
|
.sqjl-detail-audit-info {
|
margin-top: 12px;
|
}
|
|
/* 审核区域样式 */
|
.sqjl-detail-audit {
|
background-color: #fff;
|
border-radius: 4px;
|
margin-top: 12px;
|
padding: 16px;
|
}
|
|
.sqjl-detail-audit-content {
|
margin-bottom: 20px;
|
}
|
|
.sqjl-detail-audit-title {
|
font-size: 14px;
|
color: #999;
|
margin-bottom: 8px;
|
}
|
|
.sqjl-detail-btns {
|
display: flex;
|
justify-content: space-between;
|
gap: 16px;
|
margin-top: 24px;
|
}
|
|
.sqjl-detail-btn {
|
flex: 1;
|
height: 44px;
|
border-radius: 22px;
|
font-size: 16px;
|
font-weight: 500;
|
}
|
|
.sqjl-detail-btn-reject {
|
background-color: #fff;
|
color: #ff4d4f;
|
border: 1px solid #ff4d4f;
|
}
|
|
.sqjl-detail-btn-approve {
|
background-color: #1a6fb8;
|
color: #fff;
|
border: none;
|
}
|
|
.sqjl-detail-bottom {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
background-color: #fff;
|
padding: 12px;
|
// 这里不要内边距
|
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05);
|
}
|
|
/* 审核抽屉样式 */
|
.audit-drawer {
|
background-color: #fff;
|
border-top-left-radius: 12px;
|
border-top-right-radius: 12px;
|
overflow: hidden;
|
|
.audit-drawer-content {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
}
|
|
.audit-drawer-scroll {
|
flex: 1;
|
overflow-y: auto;
|
max-height: 40vh;
|
-webkit-overflow-scrolling: touch;
|
padding: 16px;
|
}
|
|
.audit-footer {
|
position: sticky;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
padding: 16px;
|
background: #fff;
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
|
}
|
}
|
|
.audit-drawer-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 16px;
|
border-bottom: 1px solid #f0f0f0;
|
}
|
|
.audit-drawer-title {
|
font-size: 18px;
|
font-weight: 500;
|
color: #333;
|
}
|
|
.audit-drawer-close {
|
width: 24px;
|
height: 24px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
}
|
|
.audit-drawer-close-icon {
|
display: inline-block;
|
width: 16px;
|
height: 16px;
|
position: relative;
|
|
&:before,
|
&:after {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 0;
|
width: 100%;
|
height: 1px;
|
background-color: #999;
|
}
|
|
&:before {
|
transform: rotate(45deg);
|
}
|
|
&:after {
|
transform: rotate(-45deg);
|
}
|
}
|
|
.audit-unit-value-tag {
|
display: inline-block;
|
background: #f2f2f6;
|
border-radius: 4px;
|
padding: 4px 8px;
|
}
|
|
.audit-section {
|
padding: 12px 0;
|
|
&.required-field {
|
.audit-section-title:before {
|
content: '*';
|
color: #f5222d;
|
margin-right: 4px;
|
position: absolute;
|
left: -8px;
|
}
|
}
|
|
&-select {
|
color: rgba(23, 26, 29, 0.4);
|
}
|
|
&-flex {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
align-items: center;
|
&.required-field {
|
.audit-section-title:before {
|
content: '*';
|
color: #f5222d;
|
margin-right: 4px;
|
position: absolute;
|
left: -8px;
|
}
|
}
|
}
|
}
|
|
.audit-section-title {
|
font-size: 16px;
|
font-weight: 500;
|
color: #333;
|
margin-bottom: 16px;
|
position: relative;
|
}
|
|
.audit-radio-group {
|
display: flex;
|
gap: 16px;
|
width: 100%;
|
}
|
|
.audit-radio-item {
|
display: flex;
|
align-items: center;
|
padding: 12px 16px;
|
background-color: #f5f5f5;
|
border-radius: 8px;
|
flex: 1;
|
justify-content: center;
|
|
&.active {
|
background-color: #e7f1fd;
|
|
span {
|
color: #1a6fb8;
|
}
|
}
|
|
span {
|
font-size: 16px;
|
color: #333;
|
}
|
}
|
|
.audit-radio-checked {
|
margin-left: 8px;
|
width: 18px;
|
height: 18px;
|
}
|
|
.audit-radio-unchecked {
|
margin-left: 8px;
|
width: 18px;
|
height: 18px;
|
border: 1px solid #d9d9d9;
|
border-radius: 50%;
|
background-color: #fff;
|
}
|
|
.audit-reason-group {
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
}
|
|
.audit-reason-item {
|
display: flex;
|
align-items: center;
|
padding: 12px 16px;
|
background-color: #f5f5f5;
|
border-radius: 8px;
|
|
&.active {
|
background-color: #e7f1fd;
|
|
span {
|
color: #1a6fb8;
|
}
|
}
|
|
span {
|
margin-left: 8px;
|
font-size: 16px;
|
color: #333;
|
}
|
}
|
|
.audit-content-wrapper {
|
margin-top: 16px;
|
padding: 0 2px;
|
}
|
|
.audit-attach-section {
|
padding: 16px 0;
|
// border-top: 1px solid #f0f0f0;
|
}
|
|
.audit-attach-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 16px;
|
|
span {
|
font-size: 16px;
|
font-weight: 500;
|
color: #333;
|
}
|
}
|
|
.audit-attach-add {
|
width: 24px;
|
height: 24px;
|
background-color: #f0f0f0;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
}
|
|
.audit-attach-add-icon {
|
display: inline-block;
|
width: 14px;
|
height: 14px;
|
position: relative;
|
|
&:before,
|
&:after {
|
content: '';
|
position: absolute;
|
background-color: #666;
|
}
|
|
&:before {
|
top: 0;
|
left: 6px;
|
width: 2px;
|
height: 14px;
|
}
|
|
&:after {
|
top: 6px;
|
left: 0;
|
width: 14px;
|
height: 2px;
|
}
|
}
|
|
.audit-footer {
|
background-color: #fff;
|
// margin-top: 32px;
|
padding: 12px 0;
|
&-gap {
|
background-color: #f2f2f2;
|
height: 32px;
|
}
|
}
|
