html-template/css.less

.car-select {
  .select-step {
    display: flex;
    border: 1px solid rgba(225, 225, 225, 1);

    .select-step-item {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      padding: 10px 0;
      color: rgba(153, 153, 153, 1);
      width: 240px;
      height: 20px;
      background: rgba(242, 242, 242, 1);
      position: relative;
      text-align: center;
      vertical-align: sub;

      > span {
        margin-right: 10px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: rgba(255, 255, 255, 1);
        display: inline-block;
        background: rgba(221, 221, 221, 1);
      }

      &.active {
        background: white;
        color: rgba(38, 150, 92, 1);

        > span {
          background-color: rgba(38, 150, 92, 1);
        }

        .indicator {
          &:after {
            border-color: transparent transparent transparent white;
          }
        }
      }

      .indicator {
        position: absolute;
        top: -1px;
        left: 240px;
        display: block;
        content: '';
        width: 0;
        height: 0;
        border: 21px solid;
        z-index: 10;
        border-color: transparent transparent transparent #E1E1E1;

        &:after {
          position: absolute;
          top: -20px;
          left: -22px;
          display: block;
          content: '';
          width: 0;
          height: 0;
          border: 20px solid;
          z-index: 9;
          border-color: transparent transparent transparent #F2F2F2;
        }
      }
    }
  }

  .select-container {
    .select-title {
      height: 30px;
      background: rgba(242, 242, 242, 1);
      line-height: 30px;
      padding-left: 15px;
      position: relative;
      font-size: 13px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
      margin: 7px 0;

      &:before {
        width: 5px;
        height: 30px;
        display: block;
        content: '';
        background: rgba(39, 150, 93, 1);
        position: absolute;
        left: 0;
      }
    }

    .select-wrapper {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .select-item {
        margin: 7px 0;
        width: 310px;
        height: 40px;
        border: 1px solid rgba(225, 225, 225, 1);
        font-size: 13px;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
        line-height: 40px;
        text-align: center;
        cursor: pointer;

        &.selected {
          color: #26965C;
          border: 1px solid #26965C;
        }
      }
    }
  }
}


.add-template-main {
  padding: 20px;
  display: flex;
  .template-phone {
    width: 375px;
    height: 667px;
    background: rgba(247, 247, 247, 1);
    border: 1px solid rgba(238, 238, 238, 1);

    .template-phone-vip{
      background-size: contain;
      height: 90px;
      padding:15px 20px;
      color:rgba(255,255,255,1);
      &.vip-bg-blue{
        background: url("./image/bg_mob_vip_blue.png") no-repeat;
      }
      &.vip-bg-yellow{
        background: url("./image/bg_mob_vip_yellow.png") no-repeat;
      }
      &.vip-bg-green{
        background: url("./image/bg_mob_vip_green.png") no-repeat;
      }
      .template-phone-vip-title{
        font-size:15px;
        font-weight:500;
      }
      .template-phone-vip-info{
        padding-top: 10px;
        font-size:12px;
        >span{
          font-size: 24px;
        }
      }
      .template-phone-vip-footer{
        padding-top: 5px;
        font-size:12px;
        text-align: right;
      }
    }
    .template-phone-title {
      height: 62px;
      background: url("./image/djq_title.png") no-repeat;
      background-size: contain;
      border-bottom: 1px solid rgba(238, 238, 238, 1);
    }
    .template-phone-djq-list{
      background-color: #fff;
      padding:20px 10px;
      .template-phone-djq-list-item{
        background:rgba(255,255,255,1);
        box-shadow: 0px 0px 20px #f0f0f0;
        .template-phone-djq-list-item-t{
          display: flex;
          padding: 15px 20px;
          .djq{
            width:109px;
            background-color: #3F94F7;
            border-radius: 5px;
            position: relative;
            font-size:12px;
            font-weight:400;
            color:rgba(255,255,255,1);
            text-align: center;
            padding: 12px 0;
            >span{
              display: block;
              font-size:20px;
              font-weight:500;
              color:rgba(255,255,255,1);
              padding-bottom: 5px;
            }
            &:after{
              content: "";
              position: absolute;
              top: -20px;
              display: block;
              width: 10px;
              height: 100%;
              margin-top: 20px;
              background-size: 20px 10px;
              right: 0px;
              background-color: #3F94F7;
              background-position: 100% 15%;
              background-image: linear-gradient(-45deg, #fff 25%, transparent 25%, transparent),
              linear-gradient(-135deg, #fff 25%, transparent 25%, transparent),
              linear-gradient(-45deg, transparent 75%, #fff 75%),
              linear-gradient(-135deg, transparent 75%, #fff 75%);
            }
          }
          .djq-msg{
            padding: 10px 20px;
            >p{
              font-size:15px;
              font-weight:500;
              color:rgba(51,51,51,1);
              padding-bottom: 15px;
            }
            >span{
              font-size:12px;
              font-weight:400;
              color:rgba(153,153,153,1);
            }
          }
        }
        .template-phone-djq-list-item-b{
          border-top: 1px solid rgba(238, 238, 238, 1);
          text-align: right;
          padding-right: 16px;
          height: 40px;
          line-height: 40px;
          font-size:12px;
          font-weight:400;
          color:rgba(153,153,153,1)
        }
      }
    }
  }
  .template-info{
    margin-left: 40px;
    width:663px;
    height:627px;
    border:1px solid rgba(238,238,238,1);
    position: relative;
    padding: 20px;
    &:before{
      position: absolute;
      top: 120px;
      left: -22px;
      display: block;
      content: '';
      width: 40px;
      height: 40px;
      background: url("./image/info-jt.png") no-repeat;
    }
    .template-info-p{
      font-size:16px;
      font-weight:500;
      color:rgba(38,150,92,1);
      padding-left: 10px;
      position: relative;
      &:before{
        position: absolute;
        top: 5px;
        left: 3px;
        display: block;
        content: '';
        width:3px;
        height:13px;
        background:rgba(38,150,92,1);
      }
    }
  }
}