#CardDetail.InfoBox {
  width: 100%;
  height: 100%;
  padding: 15px 0;
  border-radius: 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #ffffff;
  overflow: hidden;
  overflow-y: auto;

  .business-edit-form {
    .el-form-item {
      margin-bottom: 18px;
    }

    .el-input,
    .el-select,
    .el-date-picker {
      width: 100%;
    }

    .el-form-item__label {
      font-weight: 500;
    }

    .el-row {
      margin-bottom: 0;
    }

    .el-col {
      margin-bottom: 0;
    }
  }

  // 全局滚动条样式
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;

    &:hover {
      background: #a8a8a8;
    }
  }

  .flex1{
    flex: 1;
  }
  .ml5{
    margin-left: 5px;
  }
  .cur-p{
    cursor: pointer;
  }
  .info{
    width: 100%;
    height: 220px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    //width: 0;
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 0 20px;
    .card{
      border-radius: 10px;
    }
  }
  .card-info{
    width: 400px;
    .card-icon{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;
      .icon-visa{
        width: 50px;
      }
      .icon-type{
        font-weight: bold;
        font-size: 20px;
      }
    }
    .card-number{
      font-weight: bold;
      font-size: 24px;
      text-align: left;
      span{
        font-weight: 400;
        font-size: 20px;
      }
    }
    .card-other-info{
      margin-top: 25px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .other-title{
        font-size: 12px;
        color: #999;
      }
      .other-info{
        margin-top: 5px;
        .cvv{
          cursor: pointer;
        }
        .can-see{
          font-weight: bold;
          font-size: 12px;
          color: #999;
          cursor: pointer;
        }
      }
      .card-user-name{
        //line-height: 30px;
      }
    }
    .card-type{
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      .state_blue{
        color: #368FEC;
      }
      .state_gray{
        color: #A1A1A1;
      }
      .state_orange{
        color: #FF9800;
      }
      .state_yellow{
        color: rgb(231, 211, 31);
      }
    }
  }
  .base-info{
    flex: 1;
    margin-left: 10px;
    .card-base-title{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title{
        font-size: 18px;
        font-weight: bold;
      }
      .card-tag{
        .state{
          padding: 0 5px;
          line-height: 18px;
          font-size: 10px;
          border-radius: 4px;
          color: #fff;
        }
      }
    }
    .card-base-info{
      margin-top: 15px;
      display: flex;
      align-items: center;
      align-content: center;
      .mb20{
        margin-bottom: 20px;
      }
      .mr10{
        margin-right: 10px;
      }
      .money{
        box-sizing: border-box;
        height: 90px;
        background-color: #eae9e9;
        border-radius: 10px;
        padding: 10px;
        .money-title{
          display: flex;
          align-items: center;
          justify-content: space-between;

        }
        .icon-refresh{
          cursor: pointer;
          color: #87D068;
        }
        .money-num{
          margin-top: 15px;
          font-size: 24px;
          font-weight: bold;
          color: #333;
          text-align: left;
        }
      }
      .info1{
        height: 90px;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .info-box{
        text-align: left;

      }
      .info-title{
        font-size: 12px;
        color: #b3b3b3;
        margin-bottom: 10px;
      }
      .info-text{
        display: inline-flex;
        font-size: 12px;
      }
    }
  }
}
