ykz-wx/components/top-card-skeleton/top-card-skeleton.vue

<template>
  <van-skeleton :loading="loading" :animate="false">
    <template #template>
      <view class="top-card-skeleton">
        <view class="card-top">
          <van-skeleton-image class="skeleton-image" />
          <view class="card-top-right">
            <van-skeleton-paragraph row-width="60%" />
            <van-skeleton-paragraph />
            <van-skeleton-paragraph />
          </view>
        </view>
        <view class="card-bottom">
          <view>
            <van-skeleton-paragraph row-width="60%" class="bg-white" />
            <van-skeleton-paragraph  row-width="80%" class="bg-white" />
          </view>
          <view class="second">
            <van-skeleton-paragraph row-width="60%" class="bg-white" />
            <van-skeleton-paragraph row-width="80%" class="bg-white" />
          </view>
        </view>
      </view>
    </template>
  </van-skeleton>
</template>

<script lang="ts" setup>

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  }
});
</script>

<style lang="scss" scoped>
.top-card-skeleton {
  width: 100%;
  margin: 0 -16px;
  border-radius: 0px 0px $uni-spacing-row-s2 $uni-spacing-row-s2;
  background: #fff;
  padding: $uni-spacing-col-s2 $page-row-spacing $uni-spacing-col-s4;
  border: 1px solid $uni-border-color;
  min-height: 340rpx;
  
  .card-top {
    @include flex;
    margin-bottom: $uni-spacing-col-s4;
    color: #fff;
    width: 100%;
    .skeleton-image {
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      background-color: #f2f3f5;
      margin-right: $uni-spacing-row-s4;
    }
    .card-top-right {
      flex: 1;
    }
  }

  .card-bottom {
    background-color: #f2f3f5;
    color: $uni-text-color;
    border-radius: $uni-spacing-row-s2;
    padding: $uni-spacing-row-s4;
    line-height: $uni-line-height-base;
    @include flex;
    > view {
      flex: 1;
      @include flex;
      flex-direction: column;
    }
	.second {
		position: relative;
		flex: 0.8;
		
		&::before {
			content: '';
			position: absolute;
			left: 0;
			background: #fff;
			width: 5px;
			height: 100rpx;
			-webkit-transform: scaleX(0.5);
			transform: scaleX(0.5);
			-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
		}
	}
  }
  .bg-white {
	  background-color: #fff;
  }
}
</style>