charge-front/src/components/shadow-card/shadow-card.vue

<template>
  <view class="shadow-card">
    <view v-for="(item, index) in list" :key="index">
      <view class="label">{{ item.label }}</view>
      <view class="value">{{ item.value }}</view>
    </view>
  </view>
</template>

<script lang="ts">
export default {
  props: {
    list: {
      type: Array<any>,
      defalut: [],
    },
  },
};
</script>

<style lang="scss">
.shadow-card {
  background: #ffffff;
  border: 1rpx solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 4rpx 20rpx rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;
  padding: 40rpx;

  & > view {
    margin-top: 40rpx;
    display: flex;

    &:first-child {
      margin-top: 0rpx;
    }

    .label {
      width: 156rpx;
      flex-shrink: 0;
      color: rgba(0, 0, 0, 0.4);
      font-size: 26rpx;
    }

    .value {
      flex-grow: 1;
      color: #000;
      font-size: 26rpx;
    }
  }
}
</style>