// 变量定义
|
@primary-color: #1A6FB8;
|
@text-color: #171A1D;
|
@text-color-secondary: #333333;
|
@background-color: #FFFFFF;
|
@border-color: #EEEEEE;
|
@error-color: #FF0000;
|
@shadow-color: rgba(0, 0, 0, 0.05);
|
@font-family: PingFang SC, PingFang SC-400;
|
|
// 尺寸变量
|
@border-radius: 8px;
|
@spacing-xs: 4px;
|
@spacing-sm: 8px;
|
@spacing-md: 12px;
|
@spacing-lg: 16px;
|
@font-size-sm: 14px;
|
@font-size-md: 15px;
|
@font-size-lg: 16px;
|
@line-height: 23px;
|
|
// 混合器
|
.flex-center() {
|
display: flex;
|
align-items: center;
|
}
|
|
.flex-between() {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.text-ellipsis() {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.form-label() {
|
font-size: @font-size-md;
|
font-family: @font-family;
|
font-weight: 400;
|
color: @text-color;
|
line-height: @line-height;
|
}
|
|
.dtm-button {
|
// width: 343px;
|
// height: 44px;
|
// line-height: 44px;
|
// display: block; // 确保按钮为块级元素
|
// background: #1a6fb8;
|
// border-radius: 8px; // 增加圆角半径
|
// font-size: 16px;
|
// font-weight: 400;
|
// color: #ffffff;
|
// border: none;
|
// margin-left: auto;
|
// margin-right: auto;
|
|
// &:active {
|
// opacity: 0.9; // 点击效果
|
// }
|
}
|
|
.form-section {
|
position: relative;
|
padding-bottom: 80px; // 为固定按钮留出空间
|
height: 100%;
|
overflow-y: auto;
|
-webkit-overflow-scrolling: touch;
|
|
.form-button-wrapper {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
background: @background-color;
|
padding: @spacing-lg;
|
z-index: 100;
|
box-shadow: 0 -2px 8px @shadow-color;
|
}
|
|
.dtm-form-item-required-brief:before {
|
top: 8px;
|
}
|
.agent-object-section {
|
width: 100%;
|
background: @background-color;
|
|
.agent-object-title {
|
margin-bottom: @spacing-md;
|
.flex-center();
|
|
.required-star {
|
color: @error-color;
|
margin-right: @spacing-xs;
|
}
|
|
span:last-child {
|
width: 60px;
|
height: @line-height;
|
.form-label();
|
}
|
}
|
}
|
|
.agent-label-title {
|
padding-left: @spacing-lg;
|
padding-top: @spacing-md;
|
margin-bottom: @spacing-sm;
|
.flex-center();
|
|
.required-star {
|
color: @error-color;
|
margin-right: @spacing-xs;
|
}
|
|
span:last-child {
|
.form-label();
|
}
|
}
|
|
.arco-radio-group {
|
padding-left: 17px;
|
|
.arco-radio {
|
margin-bottom: 0;
|
}
|
|
.arco-radio-wrapper {
|
font-size: @font-size-sm;
|
color: @text-color-secondary;
|
}
|
|
.arco-radio-checked .arco-radio-mask {
|
border-color: @primary-color;
|
background-color: @primary-color;
|
}
|
}
|
|
.agent-radio-group {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
|
padding-left: 0;
|
|
.radio-item {
|
display: flex;
|
align-items: center;
|
padding: 0 !important;
|
width: 100%;
|
margin-bottom: 0;
|
|
.arco-radio {
|
margin-right: @spacing-sm;
|
}
|
|
span {
|
line-height: normal;
|
width: auto;
|
max-width: calc(100% - 30px);
|
height: @line-height;
|
.form-label();
|
.text-ellipsis();
|
margin-left: @spacing-sm;
|
}
|
|
.radio-label {
|
display: inline-block;
|
vertical-align: middle;
|
margin-left: @spacing-xs;
|
}
|
}
|
}
|
|
// 添加代理对象表单样式
|
.agent-object-form-item {
|
margin-top: @spacing-md;
|
.dtm-form-item-label,
|
.dd-form-item-label {
|
white-space: nowrap;
|
overflow: visible;
|
width: 100%;
|
min-width: 100%;
|
.form-label();
|
}
|
|
.dtm-form-item-control {
|
flex: 1;
|
width: 100%;
|
}
|
|
.dtm-form-item-default-label {
|
width: auto !important;
|
flex: 0 0 auto !important;
|
white-space: nowrap !important;
|
min-width: 140px !important;
|
max-width: none !important;
|
overflow: visible !important;
|
}
|
|
.dtm-form-item-default-field {
|
width: 100% !important;
|
flex: 1 1 auto !important;
|
}
|
}
|
|
.agent-relationship-form-item,
|
.agent-type-form-item {
|
.dtm-form-item-label,
|
.dd-form-item-label {
|
white-space: nowrap;
|
overflow: visible;
|
width: 100%;
|
min-width: 100%;
|
.form-label();
|
}
|
|
.dtm-form-item-control {
|
flex: 1;
|
width: 100%;
|
}
|
|
.dtm-form-item-default-label {
|
width: 100% !important;
|
flex: 1 1 auto !important;
|
}
|
|
.dtm-form-item-default-field {
|
width: 100% !important;
|
flex: 1 1 auto !important;
|
}
|
}
|
|
// 添加样式防止标签文字换行显示
|
.risk-tendency-label {
|
width: auto !important;
|
min-width: 140px !important;
|
white-space: nowrap;
|
.form-label();
|
}
|
}
|
|
.dd-form {
|
width: 100%;
|
background: @background-color;
|
|
// 代理人姓名样式
|
.agent-name-form-item {
|
.dd-form-item-label {
|
width: 75px;
|
height: @line-height;
|
.form-label();
|
}
|
}
|
|
// 添加两列布局样式
|
.form-two-column-layout {
|
display: flex;
|
width: 100%;
|
margin: 12px, 0;
|
|
.form-left-column {
|
flex: 1;
|
padding-right: 8px;
|
width: 70%;
|
}
|
|
.form-right-column {
|
flex: 1;
|
padding-left: 8px;
|
width: 30%;
|
|
.idcard-label {
|
display: inline-block;
|
width: 75px;
|
height: @line-height;
|
.form-label();
|
border-radius: 4px;
|
margin-right: 16px;
|
text-align: center;
|
cursor: pointer;
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
}
|
|
// 调整IdcardOCR组件样式
|
.form-idcard-wrapper {
|
margin-top: -5px;
|
.idcard-ocr-main {
|
width: 100%;
|
min-height: 10px;
|
margin-bottom: 16px;
|
background-color: @background-color;
|
display: flex;
|
justify-content: flex-end;
|
padding-right: 0;
|
box-sizing: border-box;
|
|
.idcard-ocr-main-title {
|
display: inline-block;
|
width: auto;
|
margin-top: 0px;
|
text-align: right;
|
|
&-top {
|
color: @primary-color;
|
font-size: 16px;
|
height: @line-height;
|
text-align: right;
|
width: auto;
|
}
|
|
&-bottom {
|
display: none;
|
}
|
}
|
}
|
}
|
|
.dtm-form .dtm-list-item {
|
background: @background-color;
|
}
|
|
.dd-form-item {
|
position: relative;
|
}
|
|
.input-container {
|
position: relative;
|
display: flex;
|
align-items: center;
|
|
.card-type-label {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
|
.id-recognition {
|
display: flex;
|
align-items: center;
|
color: @primary-color;
|
font-size: 14px;
|
cursor: pointer;
|
|
.id-icon {
|
width: 16px;
|
height: 16px;
|
margin-right: 4px;
|
}
|
}
|
}
|
}
|
.upload-container {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-right: 0;
|
width: 100%;
|
background-color: @background-color;
|
}
|
|
// 全局表单标签样式，确保标签和星号对齐
|
.dd-field-item {
|
.dd-field-label {
|
display: flex;
|
align-items: center;
|
|
&::before {
|
line-height: 1;
|
vertical-align: middle;
|
}
|
}
|
}
|
}
|
|
// 图标样式
|
.natural-icon {
|
background: url('../../../assets/img/Frame.png') no-repeat center;
|
background-size: contain;
|
}
|
|
.legal-icon {
|
background: url('../../../assets/img/Frame2.png') no-repeat center;
|
background-size: contain;
|
}
|
|
.org-icon {
|
background: url('../../../assets/img/Frame3.png') no-repeat center;
|
background-size: contain;
|
}
|
|
.risk-label-red {
|
color: @error-color !important;
|
}
|
|
.color-selector {
|
width: 100%;
|
padding: 16px;
|
background: @background-color;
|
|
.color-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 12px;
|
|
.color-tag {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 32px;
|
margin: 0;
|
border-radius: 4px;
|
}
|
}
|
}
|
|
.tag-container {
|
display: flex;
|
flex-direction: column; // 改为纵向排列
|
|
background: @background-color;
|
|
.tag-title {
|
font-size: 15px;
|
color: @text-color;
|
margin-bottom: 16px;
|
text-align: left; // 确保文字左对齐
|
}
|
|
.tag-list {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px;
|
}
|
|
.arco-tag {
|
border-radius: 16px;
|
padding: 4px 12px;
|
font-size: 14px;
|
border: none;
|
cursor: pointer;
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
|
.custom-idcard-ocr .idcard-ocr-main-img {
|
display: none !important;
|
}
|
|
/* 或者可以替换为简单的边框样式 */
|
.custom-idcard-ocr .idcard-ocr-main {
|
background: none;
|
border: none;
|
padding: 0;
|
border-radius: 4px;
|
}
|
|
/* 隐藏原始文字样式 */
|
.custom-idcard-ocr .idcard-ocr-main-title {
|
opacity: 0;
|
position: absolute;
|
z-index: 1;
|
height: 1px;
|
width: 1px;
|
overflow: hidden;
|
}
|
|
.form-component-wrapper {
|
width: 100%;
|
position: relative;
|
|
&.form-input-wrapper,
|
&.form-textarea-wrapper,
|
&.form-idcard-wrapper,
|
&.form-button-wrapper,
|
&.form-upload-wrapper {
|
// 保持原有样式不变，只是提供一个容器
|
box-sizing: border-box;
|
display: block;
|
}
|
}
|
|
.card-select-container {
|
width: 100%;
|
padding: 0;
|
box-sizing: border-box;
|
|
// 让选择器宽度一致
|
.dtm-select {
|
width: 100%;
|
}
|
|
// 代理对象列表样式
|
.agent-radio-group {
|
width: 100%;
|
padding-left: 0 !important;
|
|
.radio-item {
|
width: 100%;
|
padding: 8px 0;
|
margin-bottom: 0;
|
align-items: center;
|
|
span {
|
margin-left: 8px;
|
width: calc(100% - 30px);
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
}
|
|
// 无代理对象提示样式
|
.no-agent-objects {
|
width: 100%;
|
top: 10px;
|
|
p {
|
margin: 0;
|
}
|
}
|
}
|
|
.id-upload-wrapper {
|
background-color: @background-color;
|
margin-top: 8px;
|
width: 100%;
|
position: relative;
|
}
|
|
.id-upload-container {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
width: 100%;
|
background-color: @background-color;
|
position: relative;
|
padding-bottom: 10px;
|
margin-bottom: 20px;
|
|
.upload-label {
|
width: 140px;
|
height: @line-height;
|
.form-label();
|
}
|
|
.id-upload-button-wrapper {
|
position: absolute;
|
right: 0;
|
top: 0;
|
height: 47px;
|
width: 40px;
|
display: block;
|
align-items: center;
|
justify-content: center;
|
background-color: @background-color;
|
}
|
|
.id-upload-button {
|
width: 24px;
|
height: 24px;
|
|
.dd-upload-input {
|
display: none;
|
}
|
|
.dd-upload-button {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 24px;
|
height: 24px;
|
}
|
|
.dd-upload-list {
|
display: block;
|
position: absolute;
|
left: 0;
|
top: 30px;
|
width: 100%;
|
}
|
|
.dd-icon {
|
font-size: 24px;
|
color: #cccccc;
|
margin-right: 0;
|
}
|
|
.dd-icon-plus-circle::before,
|
.dd-icon-add::before {
|
color: #cccccc;
|
font-size: 22px;
|
}
|
}
|
}
|
|
/* 遮罩层样式优化 */
|
.ocr-overlay {
|
z-index: 10;
|
transition: background-color 0.2s ease;
|
|
&:active {
|
background-color: rgba(26, 111, 184, 0.2) !important;
|
}
|
}
|
|
// 调整label样式使其更明显可点击
|
.idcard-label {
|
color: @primary-color !important;
|
font-weight: 500;
|
text-decoration: underline;
|
cursor: pointer;
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
|
// 添加模态框文本样式
|
.idcard-ocr-main-text {
|
padding: 0 16px 16px;
|
text-align: left;
|
|
p {
|
margin: 8px 0;
|
font-size: 14px;
|
color: #4e5969;
|
line-height: 1.5;
|
|
&:first-child {
|
color: @primary-color;
|
font-weight: 500;
|
margin-bottom: 8px;
|
}
|
}
|
}
|
|
/* 身份证明材料上传组件样式 */
|
.id-card-upload {
|
.dd-upload-list {
|
display: block;
|
margin-top: 10px;
|
position: absolute;
|
left: 0;
|
top: 35px;
|
width: 100%;
|
overflow: hidden;
|
}
|
|
.dd-upload-list-item {
|
margin-top: 8px;
|
border-radius: 4px;
|
background-color: #f0f2f5;
|
padding: 4px 8px;
|
border-left: 3px solid @primary-color;
|
}
|
|
.dd-upload-list-item-name {
|
color: @primary-color;
|
font-size: 14px;
|
}
|
}
|
|
/* 代理人授权委托书上传组件样式 */
|
.auth-doc-upload {
|
.dd-upload-list {
|
display: block;
|
margin-top: 10px;
|
position: absolute;
|
left: 0;
|
top: 35px;
|
width: 100%;
|
overflow: hidden;
|
}
|
|
.dd-upload-list-item {
|
margin-top: 8px;
|
border-radius: 4px;
|
background-color: #f7f8fa;
|
padding: 4px 8px;
|
border-left: 3px solid #ff7d00;
|
}
|
|
.dd-upload-list-item-name {
|
color: #ff7d00;
|
font-size: 14px;
|
}
|
}
|
|
/* 上传组件样式调整 */
|
.upload-form-item {
|
.dtm-form-item-label {
|
width: auto;
|
min-width: 120px;
|
font-size: 15px;
|
font-family: @font-family;
|
font-weight: 400;
|
text-align: LEFT;
|
color: @text-color;
|
line-height: @line-height;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.dtm-form-item-control {
|
flex: 1;
|
width: auto;
|
position: relative;
|
}
|
|
.dtm-upload {
|
width: 100%;
|
display: flex;
|
justify-content: flex-end;
|
padding-right: 0;
|
}
|
|
.id-upload-button {
|
position: relative;
|
|
.dtm-upload-button {
|
position: absolute;
|
right: 0;
|
border-color: @primary-color;
|
color: @primary-color;
|
}
|
}
|
}
|
|
/* 专门针对代理人授权委托书的样式 */
|
.auth-doc-upload-item {
|
.dtm-form-item-label {
|
white-space: nowrap;
|
min-width: 140px;
|
}
|
|
.dtm-upload {
|
width: 100%;
|
display: flex;
|
justify-content: flex-end;
|
padding-right: 0;
|
}
|
}
|
|
/* 上传按钮样式优化 */
|
.id-upload-button {
|
width: 100%;
|
display: flex;
|
justify-content: flex-end;
|
|
.dtm-upload-button {
|
position: absolute;
|
right: 0;
|
border-color: @primary-color;
|
color: @primary-color;
|
}
|
|
.dd-upload-button,
|
.dtm-upload-button {
|
position: absolute;
|
right: 0;
|
top: 0;
|
}
|
}
|
|
/* 对所有表单项标签统一处理，防止文本换行 */
|
.form-section {
|
.dtm-form-item-label,
|
.dd-form-item-label {
|
white-space: nowrap;
|
overflow: visible;
|
}
|
}
|
|
/* 修复代理对象标签和星号对齐问题 */
|
.agent-object-form-item {
|
.dd-field-label {
|
display: flex;
|
align-items: center;
|
top: 16px;
|
}
|
}
|
|
/* 修复单选框和文字的垂直对齐问题 */
|
.radio-item {
|
display: flex;
|
align-items: center;
|
|
.arco-radio {
|
margin-right: 8px;
|
}
|
|
span {
|
line-height: normal;
|
}
|
}
|
|
.ap-card-select-container {
|
width: 100%;
|
padding: 0;
|
box-sizing: border-box;
|
|
// 让选择器宽度一致
|
.dtm-select {
|
width: 100%;
|
}
|
|
// 代理对象列表样式
|
.agent-radio-group {
|
width: 100%;
|
padding-left: 0 !important;
|
|
.radio-item {
|
width: 100%;
|
padding: 8px 0;
|
margin-bottom: 0;
|
align-items: center;
|
|
span {
|
margin-left: 8px;
|
width: calc(100% - 30px);
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
}
|
|
// 无代理对象提示样式
|
.no-agent-objects {
|
width: 100%;
|
top: 10px;
|
|
p {
|
margin: 0;
|
}
|
}
|
}
|
|
.ap-id-upload-wrapper {
|
background-color: @background-color;
|
margin-top: 8px;
|
width: 375px;
|
position: relative;
|
}
|
|
.ap-id-upload-container {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
width: 100%;
|
background-color: @background-color;
|
position: relative;
|
padding-bottom: 10px;
|
margin-bottom: 20px;
|
|
.upload-label {
|
width: 140px;
|
height: @line-height;
|
font-size: 15px;
|
color: @text-color;
|
font-family: @font-family;
|
font-weight: 400;
|
text-align: left;
|
}
|
|
.id-upload-button-wrapper {
|
position: absolute;
|
right: 16px;
|
top: 0;
|
height: 47px;
|
width: 40px;
|
display: block;
|
align-items: center;
|
justify-content: center;
|
background-color: @background-color;
|
}
|
|
.id-upload-button {
|
width: 24px;
|
height: 24px;
|
|
.dd-upload-input {
|
display: none;
|
}
|
|
.dd-upload-button {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 24px;
|
height: 24px;
|
}
|
|
.dd-upload-list {
|
display: block;
|
position: absolute;
|
left: 0;
|
top: 30px;
|
width: 100%;
|
}
|
|
.dd-icon {
|
font-size: 24px;
|
color: #cccccc;
|
margin-right: 0;
|
}
|
|
.dd-icon-plus-circle::before,
|
.dd-icon-add::before {
|
color: #cccccc;
|
font-size: 22px;
|
}
|
}
|
}
|
|
/* 遮罩层样式优化 */
|
.ocr-overlay {
|
z-index: 10;
|
transition: background-color 0.2s ease;
|
|
&:active {
|
background-color: rgba(26, 111, 184, 0.2) !important;
|
}
|
}
|
|
/* 身份证明材料上传组件样式 */
|
.id-card-upload {
|
.dd-upload-list {
|
display: block;
|
margin-top: 10px;
|
position: absolute;
|
left: 0;
|
top: 35px;
|
width: 100%;
|
overflow: hidden;
|
}
|
|
.dd-upload-list-item {
|
margin-top: 8px;
|
border-radius: 4px;
|
background-color: #f0f2f5;
|
padding: 4px 8px;
|
border-left: 3px solid @primary-color;
|
}
|
|
.dd-upload-list-item-name {
|
color: @primary-color;
|
font-size: 14px;
|
}
|
}
|
|
/* 代理人授权委托书上传组件样式 */
|
.auth-doc-upload {
|
.dd-upload-list {
|
display: block;
|
margin-top: 10px;
|
position: absolute;
|
left: 0;
|
top: 35px;
|
width: 100%;
|
overflow: hidden;
|
}
|
|
.dd-upload-list-item {
|
margin-top: 8px;
|
border-radius: 4px;
|
background-color: #f7f8fa;
|
padding: 4px 8px;
|
border-left: 3px solid #ff7d00;
|
}
|
|
.dd-upload-list-item-name {
|
color: #ff7d00;
|
font-size: 14px;
|
}
|
}
|
|
/* 上传组件样式调整 */
|
.upload-form-item {
|
.dtm-form-item-label {
|
width: auto;
|
min-width: 120px;
|
font-size: 15px;
|
font-family: @font-family;
|
font-weight: 400;
|
text-align: LEFT;
|
color: @text-color;
|
line-height: @line-height;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.dtm-form-item-control {
|
flex: 1;
|
width: auto;
|
position: relative;
|
}
|
|
.dtm-upload {
|
width: 100%;
|
display: flex;
|
justify-content: flex-end;
|
padding-right: 0;
|
}
|
|
.id-upload-button {
|
position: relative;
|
|
.dtm-upload-button {
|
position: absolute;
|
right: 0;
|
border-color: @primary-color;
|
color: @primary-color;
|
}
|
}
|
}
|
|
/* 专门针对代理人授权委托书的样式 */
|
.auth-doc-upload-item {
|
.dtm-form-item-label {
|
white-space: nowrap;
|
min-width: 140px;
|
}
|
|
.dtm-upload {
|
width: 100%;
|
display: flex;
|
justify-content: flex-end;
|
padding-right: 0;
|
}
|
}
|
|
/* 上传按钮样式优化 */
|
.id-upload-button {
|
width: 100%;
|
display: flex;
|
justify-content: flex-end;
|
|
.dtm-upload-button {
|
position: absolute;
|
right: 0;
|
border-color: @primary-color;
|
color: @primary-color;
|
}
|
|
.dd-upload-button,
|
.dtm-upload-button {
|
position: absolute;
|
right: 0;
|
top: 0;
|
}
|
}
|
|
/* 对所有表单项标签统一处理，防止文本换行 */
|
.form-section {
|
.dtm-form-item-label,
|
.dd-form-item-label {
|
white-space: nowrap;
|
overflow: visible;
|
}
|
}
|
|
/* 修复代理对象标签和星号对齐问题 */
|
.agent-object-form-item {
|
.dd-field-label {
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
/* 修复单选框和文字的垂直对齐问题 */
|
.radio-item {
|
display: flex;
|
align-items: center;
|
|
.arco-radio {
|
margin-right: 8px;
|
}
|
|
span {
|
line-height: normal;
|
}
|
}
|
|
/* 右对齐上传按钮样式 */
|
.right-aligned-upload {
|
position: relative;
|
display: flex;
|
justify-content: flex-end;
|
width: 100%;
|
|
.dd-upload-button,
|
.dtm-upload-button {
|
position: absolute;
|
right: 16px !important;
|
top: 0;
|
}
|
|
.dd-icon-plus-circle::before,
|
.dd-icon-add::before {
|
color: @primary-color;
|
font-size: 22px;
|
}
|
|
/* 文件上传后的列表也保持靠右 */
|
.dd-upload-list,
|
.dtm-upload-list {
|
display: flex;
|
justify-content: flex-end;
|
padding-right: 16px;
|
width: 100%;
|
}
|
}
|
|
/* 保证上传按钮位置 */
|
.upload-form-item {
|
.dtm-form-item-control {
|
position: relative;
|
|
.dtm-upload,
|
.dd-upload {
|
width: 100%;
|
display: flex;
|
justify-content: flex-end;
|
}
|
}
|
}
|
|
/* 直接针对dingtalk设计按钮的样式 */
|
.dd-upload-button,
|
.dtm-upload-button {
|
position: absolute !important;
|
right: 16px !important;
|
top: 8px !important;
|
width: 24px !important;
|
height: 24px !important;
|
border: none !important;
|
background: transparent !important;
|
padding: 0 !important;
|
margin: 0 !important;
|
display: flex !important;
|
align-items: center !important;
|
justify-content: center !important;
|
}
|
|
/* 调整加号图标 */
|
.dd-icon-plus-circle,
|
.dd-icon-add,
|
.dtm-icon-plus-circle,
|
.dtm-icon-add {
|
color: @primary-color !important;
|
font-size: 24px !important;
|
}
|
|
/* 更精准地控制上传表单项的布局 */
|
.upload-form-item {
|
position: relative;
|
margin-bottom: 12px !important;
|
|
.dtm-form-item-label-text,
|
.dd-form-item-label-text {
|
position: relative;
|
left: 16px;
|
}
|
|
.dtm-form-item-control,
|
.dd-form-item-control {
|
width: 100% !important;
|
padding-right: 16px !important;
|
box-sizing: border-box !important;
|
position: relative !important;
|
min-height: 40px !important;
|
}
|
}
|
|
/* 清除任何可能影响位置的浮动或定位 */
|
.dtm-upload-list,
|
.dd-upload-list {
|
clear: both !important;
|
width: 100% !important;
|
}
|
|
/* 上传控制容器样式 */
|
.upload-control-container {
|
width: 100%;
|
position: relative;
|
min-height: 40px;
|
display: flex;
|
justify-content: flex-end;
|
padding-right: 16px;
|
box-sizing: border-box;
|
|
.dd-upload,
|
.dtm-upload {
|
position: absolute;
|
right: 16px;
|
top: 0;
|
width: 24px;
|
height: 24px;
|
}
|
|
.dd-upload-button,
|
.dtm-upload-button {
|
position: absolute;
|
right: 0;
|
top: 0;
|
width: 24px;
|
height: 24px;
|
}
|
|
.dd-icon-plus-circle,
|
.dd-icon-add,
|
.dtm-icon-plus-circle,
|
.dtm-icon-add {
|
position: absolute;
|
right: 0;
|
top: 0;
|
font-size: 24px;
|
color: #cccccc;
|
}
|
}
|
|
/* 文件列表样式 */
|
.file-list {
|
margin-top: 8px;
|
padding: 0 16px;
|
}
|
|
.file-item {
|
display: flex;
|
align-items: center;
|
background-color: #f5f7fa;
|
border-radius: 4px;
|
padding: 10px;
|
margin-bottom: 8px;
|
position: relative;
|
}
|
|
.file-icon {
|
width: 24px;
|
height: 24px;
|
margin-right: 10px;
|
}
|
|
.file-info {
|
flex: 1;
|
overflow: hidden;
|
}
|
|
.file-name {
|
font-size: 14px;
|
color: #333;
|
margin-bottom: 4px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.file-size-preview {
|
display: flex;
|
justify-content: space-between;
|
font-size: 12px;
|
color: #999;
|
}
|
|
.file-size {
|
color: #999;
|
}
|
|
.preview-text {
|
color: @primary-color;
|
}
|
|
.file-actions {
|
display: flex;
|
align-items: center;
|
}
|
|
.delete-btn-wrapper {
|
display: inline-block;
|
padding: 4px;
|
cursor: pointer;
|
}
|
|
.delete-icon {
|
width: 16px;
|
height: 16px;
|
}
|
