权益皮肤代码

<div class="first-step">
      <div class="skin-box" v-for="item in 2">
        <div class="page-box"></div>
        <div class="content">
          <div class="select active">
            <div></div>
            <i v-show="item.active" class="el-icon-circle-check"></i>
            <p>通用皮肤一</p>
          </div>
          <div class="btn">预览</div>
        </div>
      </div>
    </div>

.first-step{
    display: flex;
    flex-direction: row;
    .skin-box{
      margin-top: 40px;
      margin-right: 80px;
      .page-box{
        width: 394px;
        height: 1334px;
        background: #EBF0FF;
        border: 1px dashed #FF881A;
        border-radius: 11.83px;
      }
      .content{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 46px;
        justify-content: space-between;
        .select{
          display: flex;
          flex-direction: row;
          align-items: center;
          div{
            width: 20px;
            height: 20px;
            background: #FFFFFF;
            border: 1px solid #B1B1B1;
            border-radius: 100%;
            margin-right: 20px;
          }
          i{
            font-size: 20px;
            color: #FF881A;
            margin-right: 20px;
          }
        }
        .btn{
          width: 92px;
          line-height: 40px;
          color: #5154F7;
          text-align: center;
          background: rgba(239,241,254,0.99);
        }
      }
    }
  }