<template>
  <view class="s-card-wrapper" :class="{ isBorder: isBorder != undefined }">
    <view class="s-card-title">{{ title }}</view>
    <view class="tips" v-if="tips">{{ tips }}</view>
    <view class="s-card-main">
      <block v-for="(v, i) in list" :key="i">
        <view class="s-card-item">
          <view>{{ v.text }}</view>
          {{ v.content }}
        </view>
      </block>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  title: {
    type: String,
  },
  tips: { type: String },
  isBorder: { type: String },
})
</script>

<style lang="scss" scoped>
.s-card-wrapper {
  margin-left: 70rpx;
  margin-bottom: 50rpx;
  border-bottom: 1rpx solid #e7e7e7;
  .s-card-title {
    font-size: 30rpx;
    font-weight: 700;
    margin-bottom: 50rpx;
  }
  .tips {
    margin-bottom: 30rpx;
    transform: translateY(-30rpx);
    font-size: 24rpx;
    color: #666;
  }
  .s-card-main {
    display: flex;
    flex-wrap: wrap;
    .s-card-item {
      flex: 0 0 50%;
      font-size: 33rpx;
      // font-weight: 700;
      color: #7737fe;
      margin-bottom: 50rpx;
      view {
        margin-bottom: 18rpx;
        font-size: 25rpx;
        font-weight: 500;
        color: #8c8c8c;
      }
    }
  }
}
.isBorder {
  border: none;
}
</style>
