<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-08-14 15:38:40
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-10-12 10:27:04
 * @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 relative">
        <!-- 卡片头部 -->
        <view class="card--header flex justify-between">
            <slot name="header-left"></slot>
            <view class="title">{{ title }}</view>
            <slot name="header-right"></slot>
        </view>

        <!-- 内容商品 -->
        <scroll-view class="scroll-view-box relative z-10">
            <slot></slot>
        </scroll-view>
        <slot name="card-bg"></slot>
    </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;
    margin: 14rpx 14rpx 10rpx 20rpx;
    background-color: transparent;
    border-radius: 10rpx;

    &--header {
        padding: 24rpx 24rpx 24rpx 12rpx;
        position: relative;
        z-index: 10;
        .title {
            color: #000000;
            font-size: 40rpx;
            font-weight: bold;
            // padding-left: 90rpx;
            word-spacing: 41rpx;
            letter-spacing: 5rpx;
            position: relative;
            // font-family: Georgia, serif;
            &::before {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: 80rpx;
                height: 12rpx;
                border-radius: 12rpx;
                background: linear-gradient(to right, $blue5, $white);
                z-index: -1;
            }
        }
    }

    .scroll-view-box {
        // padding: 0 14rpx 24rpx;
        box-sizing: border-box;
        //white-space: nowrap;
    }
}
</style>
