<template>
  <view class="card">
    <view class="hd">
      <view class="left">
        <text class="t">{{ title }}</text>
        <text class="d" v-if="desc">{{ desc }}</text>
      </view>
      <slot name="extra"></slot>
    </view>
    <view class="bd">
      <slot></slot>
    </view>
  </view>
</template>

<script lang="uts">
export default {
  props: {
    title: { type: String, default: '' },
    desc: { type: String, default: '' }
  }
}
</script>

<style>
.card {
  border: 1rpx solid rgba(17, 17, 17, 0.08);
  border-radius: 16rpx;
  padding: 14rpx;
  background: #fff;
  flex: 1;
}

.hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10rpx;
}

.t {
  font-size: 24rpx;
  font-weight: 800;
  color: #111;
}

.d {
  font-size: 20rpx;
  color: rgba(17, 17, 17, 0.55);
  margin-top: 4rpx;
  display: block;
}

.bd {
  padding-top: 4rpx;
}
</style>
