ccy/mh-lcmk-sms-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

12

Browse Source
This commit is contained in:
wyw 2024-07-12 10:54:57 +08:00
parent d56ad5a3f6
commit b081cc7189
1 changed files with 207 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
src/components/CustomPages/HI/OperateLog.css Normal file
View File

@ -0,0 +1,207 @@
.flowchart {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.step {
width: 100px;
height: 40px;
background-color: #4472C4;
/* #f0f0f0; */
color: white;
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
position: relative;
border-radius: 5px;
}
/* 长方形 */
.rectangle {
width: 20px;
height: 50px;
/* margin-top: -70px; */
margin-top: 8px;
margin-left: 45px;
position: relative;
background-color: #ADCDEA;
/* transform: rotate(-40deg); */
/* 旋转角度 */
}
/* 模拟线条 */
/* .step:not(:last-child)::after { */
.rectangle::after {
content: '';
position: absolute;
bottom: -13px;
/* 根据需要调整 */
left: 50%;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ADCDEA;
/* 线条颜色 #ddd*/
transform: translateX(-50%);
}
.step::after {
content: '';
position: absolute;
/* bottom: -13px; */
/* 根据需要调整 */
/* left: 50%; */
margin-left: 150px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
/* border-left: 20px solid transparent; */
border-left: 20px solid #ADCDEA;
/* border-color: #ADCDEA; */
/* border: 1px solid #A5A5A5; */
/* border-left: 20px solid transparent;
border-right: 20px solid transparent; */
/* border-top: 20px solid #ADCDEA; */
/* 线条颜色 #ddd*/
/* transform: translateX(-50%); */
}
/* #ADCDEA 天蓝*/
/* #70AD47 绿色 */
/* #A5A5A5 灰色 深 */
/* #D9D9D9 灰色 */
/* #FFC000 橙色 浅 */
/* #ED7D31 橙色 深 */
/* 横向布局 */
.flowchartx {
flex-direction: row;
/* justify-content: space-between; */
width: 100%;
display: flex;
}
/* 横向item */
.stepx {
/* margin-right: 15px; */
width: 120px;
height: 40px;
background-color: #70AD47;
color: white;
border: 1px solid white;
/* border: 1px solid #ddd; */
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
position: relative;
border-radius: 50px;
margin-left: 25px;
}
/* 超时处理 */
.stepxOutTime {
/* margin-right: 15px; */
width: 120px;
height: 40px;
background-color: #FFC000;
color: white;
border: 1px solid white;
/* border: 1px solid #ddd; */
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
position: relative;
border-radius: 50px;
margin-left: 25px;
}
/* 未处理 */
.stepxEnable {
/* margin-right: 15px; */
width: 120px;
height: 40px;
background-color: #A5A5A5;
color: white;
border: 1px solid white;
/* border: 1px solid #ddd; */
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
position: relative;
border-radius: 50px;
margin-left: 25px;
}
.stepxLeft50 {
margin-left: 50px;
}
/* 横向箭头线 */
.linex {
margin-left: 10px;
width: 60px;
height: 5px;
/* margin-top: -70px; */
/* margin-top: 8px; */
/* margin-left: -30px; */
margin-top: 40px;
position: relative;
background-color: #ADCDEA;
/* transform: rotate(-40deg); */
/* 旋转角度 */
}
/* 横向箭头 */
.linex::after {
content: '';
position: absolute;
margin-left: 30px;
margin-top: -5px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #ADCDEA;
}
.discribeSpan {
display: flex;
width: 120px;
/* width: 100%; */
height: 70px;
margin-top: -25px;
border-radius: 5px;
background: #D9D9D9;
flex-direction: column;
align-items: flex-start;
margin-left: 25px;
}
.discribeSpanUser {
margin-top: 28px;
font-size: smaller;
padding: 0 0 0 5px;
}
.discribeSpanTime {
font-size: smaller;
padding: 0 0 0 5px;
}
/* 横向布局 */