From b081cc718987a0851d71e851d34ddbc0d591b50c Mon Sep 17 00:00:00 2001
From: wyw <571921741@qq.com>
Date: Fri, 12 Jul 2024 10:54:57 +0800
Subject: [PATCH] 12

---
 src/components/CustomPages/HI/OperateLog.css | 207 +++++++++++++++++++
 1 file changed, 207 insertions(+)
 create mode 100644 src/components/CustomPages/HI/OperateLog.css

diff --git a/src/components/CustomPages/HI/OperateLog.css b/src/components/CustomPages/HI/OperateLog.css
new file mode 100644
index 0000000..67eae21
--- /dev/null
+++ b/src/components/CustomPages/HI/OperateLog.css
@@ -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;
+}
+
+/* 横向布局 */