vue无组件步骤条样式

最新推荐文章于 2023-07-17 09:48:22 发布

qq_42318977

最新推荐文章于 2023-07-17 09:48:22 发布

阅读量225

点赞数

分类专栏：小程序文章标签： vue

本文链接：https://blog.csdn.net/qq_42318977/article/details/128304007

版权

小程序专栏收录该内容

13 篇文章 0 订阅

订阅专栏

html代码

<div class="cancelrule-step">
            <div class="cancelrule-step-item">
              <div class="step-message">描述</div>
              <div class="cancelrule-step__circle-container"><div class="cancelrule-step__circle" style="background-color: #9C9C9C;"></div></div>
              <div class="cancelrule-step__line"></div>
              <div class="cancelrule-step__title">标题1<br/><div class="title-message">详细内容</div></div>
            </div>
            <div class="cancelrule-step-item">
              <div class="step-message" style="color: #FA8306;">描述</div>
              <div class="cancelrule-step__circle-container"><div class="cancelrule-step__circle" style="background-color: #FA8306;"></div></div>
              <div class="cancelrule-step__line"></div>
              <div class="cancelrule-step__title" style="color: #FA8306;">标题2<br/><div class="title-message">详细内容</div></div>
            </div>
            <div class="cancelrule-step-item">
              <div class="cancelrule-step__circle-container"><div class="cancelrule-step__circle" style="background-color: #222222;"></div></div>
              <div class="cancelrule-step__line"></div>
              <div class="cancelrule-step__title">标题3<br/><div class="title-message">详细内容</div></div>
            </div>
          </div>

css代码

//步骤条
      .cancelrule-step{
        position: relative;
        height: 194px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .cancelrule-step-item{
          position: relative;
          display: flex;
          flex: 1;
          flex-direction: column;
          .step-message{
            text-align: center;
            height: 46px;
            font-size: 20px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 46px;
            margin: 10px 0 38px 0;
          }
          .cancelrule-step__title{
            width: fit-content;
            transform: translate(-50%);
            .title-message{
              font-size: 20px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              text-align: center;
              color: #9C9C9C;
            }
          }
          .cancelrule-step__circle-container{
            position: absolute;
            top: 62px;
            transform: translate(-50%);
            padding: 0 12px 0 12px;
            background-color: #ffffff;
            z-index: 1;
            .cancelrule-step__circle{
              width: 16px;
              height: 16px;
              border-radius: 16px;
            }
          }
          
          .cancelrule-step__line{
            position: absolute;
            top: calc(62px + 2px);
            left: 20px;
            width: calc(100% - 32px);
            height: 12px;
            background: rgba(244, 244, 244, 1);
          }
        }
        .cancelrule-step-item:first-child .cancelrule-step__title{
          transform: none;
        }
        .cancelrule-step-item:last-child .cancelrule-step__title{
          position: relative;
          top: 94px;
          transform: none;
          text-align: right;
        }
        .cancelrule-step-item:first-child .cancelrule-step__title .title-message{
          text-align: left;
        }
        .cancelrule-step-item:last-child .cancelrule-step__line{
          width: 0px;
        }
        .cancelrule-step-item:first-child .cancelrule-step__circle-container{
          transform: none;
          padding-left: 0px;
        }
        .cancelrule-step-item:last-child .cancelrule-step__circle-container{
          position: absolute;
          right: 0px;
          padding-right: 0px;
          transform: none;
        }
        .cancelrule-step-item:last-child{
          position: absolute;
          right: 0px;
        }
      }