【无标题】个人临时自用

   <div className={"root"}>
        <span className={"text text-left"}>
          如果只添加一个情形的名称,则在原型中需要选择一个情形来执行相应的动作
        </span>
        <div className={"test"}>
          <div className={"button button-position-left"}>
            <span>按钮</span>
          </div>
          <div className={"situation-wrapper situation-wrapper-one"}>
            <span className={"situation"}>情形1</span>
          </div>
          <div className={"situation-wrapper situation-wrapper-two"}>
            <span className={"situation"}>情形2</span>
          </div>
        </div>
        <div className="text-with-lines">
          <div className="line "></div>
          <span>或者</span>
          <div className="line"></div>
        </div>
        <span className={"text text-right"}>
          开始为情形添加条件,构建在满足条件时自动触发的情形来执行相应的动作。
        </span>

        <div className={'mind'}>
          <div className={"button button-position-right"}>
            <span>按钮</span>
          </div>
          <div className={'horizontal-line'}/>
          <div className={'vertical-line'}/>
         <div className={'mind-rectangle'}>
           <div className={"situation-wrapper situation-color-up "}>
             <span className={"situation"}>情形1</span>
           </div>
           <div className={"situation-wrapper situation-color-down"}>
             <span className={"situation"}>情形2</span>
           </div>
         </div>
        </div>



      </div>

css

.root{
  display: flex;
}
.text {
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  display: block;
}
.text-left{
  width: 196px;
}
.text-right{
  width: 184px;
}

.button {
  width: 146px;
  height: 42px;
  border: 1px solid #484848;
  background-color: #191919;

}
.button-position-left{
  position: absolute;
}
.button-position-right{
  position: relative;
}
.button > span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  display: block;
  margin: 11px 0 0 16px;
}

.situation-wrapper {
  width: 104px;
  position: relative;
  height: 24px;
  margin-left: 87px;
  font-size: 14px;
  padding-top: 2px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.48), 0 9px 28px 0 rgba(0, 0, 0, 0.2);
}

.situation {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
}

.situation-wrapper-one {
  background-color: #696969;
  margin-top: 24px;
}
.situation-wrapper-two {
  background-color: #535353;
}

.text-with-lines{
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  align-items: center;
  font-size: 14px;
  /*color: #ffffff;*/
}
.line{
  width: 1px;
  height: 30px;
  /*background-color: rgb(255 255 255/60%);*/
  background-color: aqua;
}


.mind{
  display: flex;
  align-items: center;
}
.horizontal-line{
  width: 30px;
  height: 1px;
  background-color: rgba(190, 12, 12, 0.6);
}
.vertical-line{
  width: 20px;
  height: 50px;
  border: 1px solid rgba(190, 12, 12, 0.6);
  border-right: 0;
}
.mind-rectangle{
  display: flex;
  flex-direction: column;
  row-gap: 28px;
}
.situation-color-up{
  background-color: #696969;
  margin-left: 0;
}
.situation-color-down{
  background-color: #535353;
  margin-left: 0;
}