Files
lingji-work-fe/src/views/agent/work-flow/style.scss
林志军 c90e7a39e0 style(agent): 优化工作流页面样式
- 移除工作流卡片标题的自定义颜色样式- 优化 Markdown 渲染容器的样式,确保图片自适应- 调整历史记录项弹出框的样式,使其背景透明无圆角
2025-08-01 18:08:06 +08:00

380 lines
8.3 KiB
SCSS

.cs {
color: #3C4043;
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
.back-wap {
width: 100%;
justify-content: flex-start;
align-items: center;
display: inline-flex;
}
.workflow-container {
width: 100%;
height: 100%;
justify-content: flex-start;
align-items: center;
display: inline-flex;
.left-wap {
width: 360px;
align-self: stretch;
background: var(--BG-100, #F7F8FA);
overflow: hidden;
border-radius: 8px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: inline-flex;
// .header {
// align-self: stretch;
// height: 160px;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// gap: 10px;
// display: flex;
// .image-body {
// align-self: stretch;
// flex: 1 1 0;
// position: relative;
// background: #FFEDED;
// overflow: hidden;
// border-radius: 8px;
// img {
// width: 408.90px;
// height: 218px;
// left: -24.45px;
// top: -29px;
// position: absolute
// }
// }
// }
.content {
align-self: stretch;
justify-content: space-between;
align-items: flex-start;
display: inline-flex;
.title-body {
justify-content: flex-start;
align-items: center;
gap: 4px;
display: flex;
.text {
justify-content: center;
display: flex;
flex-direction: column;
color: var(--Text-1, #211F24);
font-size: 18px;
font-family: $font-family-medium;
font-weight: 400;
line-height: 26px;
word-wrap: break-word;
}
.tag-body {
height: 20px;
padding-left: 8px;
padding-right: 8px;
background: var(--Functional-Red-1, #FFE9E7);
overflow: hidden;
border-radius: 2px;
justify-content: flex-start;
align-items: center;
gap: 4px;
display: flex;
.text {
color: var(--Functional-Red-6, #F64B31);
font-size: 12px;
font-family: $font-family-medium;
font-weight: 400;
line-height: 20px;
word-wrap: break-word
}
}
}
.use-body {
.num {
color: var(--Text-2, #3C4043);
font-size: 16px;
font-family: $font-family-manrope-medium;
font-weight: 400;
line-height: 24px;
word-wrap: break-word
}
.text {
color: var(--Text-3, #737478);
font-size: 12px;
font-family: $font-family-regular;
font-weight: 400;
line-height: 20px;
word-wrap: break-word;
}
}
}
.description {
align-self: stretch;
overflow: hidden;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 10px;
display: flex;
.text {
align-self: stretch;
color: var(--Text-2, #3C4043);
font-size: 14px;
font-family: $font-family-regular;
font-weight: 400;
line-height: 22px;
word-wrap: break-word;
}
}
.out-line {
align-self: stretch;
height: 40px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 10px;
display: flex;
.out-line-div {
align-self: stretch;
height: 0px;
outline: 1px var(--Border-2, #E6E6E8) solid;
outline-offset: -0.50px;
}
}
.history {
align-self: stretch;
flex: 1 1 0;
position: relative;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
padding: 10px;
.section {
align-self: stretch;
height: 40px;
justify-content: flex-start;
align-items: center;
gap: 10px;
display: inline-flex;
.text {
color: var(--Text-3, #737478);
font-size: 14px;
font-family: $font-family-regular;
font-weight: 400;
line-height: 22px;
word-wrap: break-word
}
}
.history-item {
align-self: stretch;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
.item-body {
align-self: stretch;
height: 40px;
padding: 8px;
border-radius: 8px;
justify-content: flex-start;
align-items: center;
gap: 10px;
display: inline-flex;
.text {
flex: 1 1 0;
color: var(--Text-1, #211F24);
font-size: 14px;
font-family: $font-family-regular;
font-weight: 400;
line-height: 22px;
word-wrap: break-word;
}
.ellipsis-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.trigger-container {
.icon-more {
display: none;
float: right;
cursor: pointer;
}
}
&:hover {
background: var(--BG-200, #E6E6E8);
.trigger-container .icon-more {
display: block;
}
}
}
}
}
}
.right-wap {
flex: 1 1 0;
align-self: stretch;
background: var(--BG-White, white);
overflow: hidden;
border-radius: 8px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: inline-flex;
.header {
align-self: stretch;
padding-left: 20px;
padding-right: 20px;
padding-top: 28px;
padding-bottom: 28px;
justify-content: flex-start;
align-items: center;
gap: 10px;
display: inline-flex;
.body {
width: 20px;
height: 20px;
position: relative;
overflow: hidden;
.fold {
width: 15px;
height: 12.50px;
left: 17.50px;
top: 16.25px;
position: absolute;
transform: rotate(-180deg);
transform-origin: top left;
background: var(--Text-3, #737478)
}
}
}
.content {
align-self: stretch;
border-top: 1px var(--Border-1, #D7D7D9) solid;
justify-content: space-between;
align-items: flex-start;
display: inline-flex;
.form {
width: 400px;
height: 796px;
padding: 20px;
position: relative;
border-right: 1px var(--Border-1, #D7D7D9) solid;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 32px;
display: inline-flex;
}
.res {
flex: 1 1 0;
padding: 32px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 32px;
display: inline-flex;
:deep(.markdown-container img) {
max-width: 100% !important;
max-height: auto !important;
}
}
}
}
}
.history-item-dropdown {
width: 125px;
padding-top: 8px;
padding-bottom: 4px;
left: 0px;
top: 0px;
position: absolute;
background: var(--BG-White, white);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
border-radius: 4px;
outline: 1px solid var(--Border-1, #D7D7D9);
display: inline-flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 2px;
.dropdown-item {
align-self: stretch;
height: 36px;
padding-left: 12px;
padding-right: 12px;
display: inline-flex;
justify-content: flex-start;
align-items: center;
gap: 8px;
border-radius: 0;
background-color: transparent;
&:hover {
background: var(--BG-200, #F2F3F5);
}
.icon {
float: right;
}
.text {
flex: 1 1 0;
height: 22px;
color: var(--Text-1, #211F24);
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
line-height: 22px;
word-wrap: break-word;
&.delete {
color: var(--Functional-Red-6, #F64B31);
}
}
}
}