<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-08-14 15:38:40
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-12-22 15:08:45
 * @FilePath: \housekeeping-uniapp\src\pages\index\comp\card.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="card">
        <!-- 卡片头部 -->
        <view class="card--header flex justify-between">
            <view class="title">{{ title }}</view>
            <slot name="header-right"></slot>
        </view>

        <!-- 内容商品 -->
        <scroll-view class="scroll-view-box">
            <slot></slot>
        </scroll-view>
    </view>
</template>

<script setup lang="ts">
import { ref, withDefaults } from 'vue'

/** Props Start **/
const props = withDefaults(
    defineProps<{
        title?: string // 标题
    }>(),
    {
        title: ''
    }
)
/** Props End **/
</script>

<style lang="scss">
.card {
    // margin-top: 20rpx;
    padding: 14rpx 0 14rpx 20rpx;
    background-color: transparent;
    border-radius: 10rpx;

    &--header {
        padding-bottom: 24rpx;
        padding-right: 30rpx;
        .title {
            color: #000000;
            font-size: 40rpx;
            font-weight: bold;
            // padding-left: 90rpx;
            word-spacing: 41rpx;
            letter-spacing: 5rpx;
            position: relative;
        }
    }

    .scroll-view-box {
        margin-left: 4rpx;
        //white-space: nowrap;
    }
}
</style>
