<template>
  <view class="skeleton-card-item">
    <view class="item-left">
      <view class="cha_kan"></view>
    </view>
    <view class="item-right">
      <view class="item_info">
        <view class="_title"></view>
        <view class="identify"></view>
        <view class="remain"></view>
      </view>
      <view class="btn"> </view>
    </view>
  </view>
</template>

<script>
export default {
  name:'XdCardV2Skeleton'
}
</script>

<style lang="less" scoped>
.skeleton-card-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: unit(2, rpx) solid #eeeeee;
  border-radius: unit(20, rpx);
  margin-bottom: unit(30, rpx);
  background: #fff;
  .item-left {
    width: unit(140, rpx);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .cha_kan{
      .skeleton-item(60rpx, 60rpx);
    }
  }
  .item-right {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: unit(24, rpx);
    border-left: 1px solid #eeeeee;
    .item_info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      padding-right: 50rpx;

      ._title{
        .skeleton-item(auto, 24rpx);
      }
      .identify{
        .skeleton-item(auto, 84rpx);
        margin-top: unit(24, rpx);
      }
      .remain{
        .skeleton-item(auto, 24rpx);
        margin-top: unit(24, rpx);
      }
      .other{
        .skeleton-item(auto, 24rpx);
        margin-top: unit(8, rpx);
      }
    }
    .btn{
      .skeleton-item(110rpx, 104rpx, 8rpx);
      padding: 0 unit(16, rpx);
      margin-left: unit(10, rpx);
    }
  }
}
</style>
