<template>
    <view class="sp-wrap">
        <view :style="bgSty"/>
        <view class="sp-cont">
            <image
                :preview="false"
                lazy-load
                src="https://med-fe.cdn.bcebos.com/wz/spring/card_top5.png"
                mode="widthFix"
                :style="{
                    width: '100%',
                }"
            />
            <view
                class="c-width"
                :style="{
                    marginTop: '-60px',
                    backgroundImage: 'url(https://med-fe.cdn.bcebos.com/wz/spring/card_mid5.png)',
                    backgroundSize: '100% 100%',
                    position: 'relative',
                    zIndex: '1',
                }"
            >
                <view class="sp-card-cont">
                    <!-- 标题 -->
                    <view
                        v-if="title"
                        class="sp-card-title sp-flex"
                    >
                        <image
                            :preview="false"
                            lazy-load
                            src="https://med-fe.cdn.bcebos.com/wz/spring/line3.png"
                            mode="widthFix"
                            :style="{
                                width: '.5rem',
                            }"
                        />
                        <view class="c-font-medium c-gap-inner-left c-gap-inner-right sp-bold">{{ title }}</view>
                        <image
                            :preview="false"
                            lazy-load
                            src="https://med-fe.cdn.bcebos.com/wz/spring/line3.png"
                            mode="widthFix"
                            class="sp-card-title-img-right"
                            :style="{
                                width: '.5rem',
                            }"
                        />
                    </view>
                </view>
                <slot></slot>
            </view>
            <image
                :preview="false"
                lazy-load
                src="https://med-fe.cdn.bcebos.com/wz/spring/card_bot5.png"
                mode="widthFix"
                :style="{
                    marginTop: '-55px',
                    width: '100%',
                }"
            />
        </view>
    </view>
</template>

<script>
/**
 * @file 问诊春节活动面板组件
 * @author haoyan
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    components: {
    },
    props: {
        /**
        * 标题
        */
        title: {
            type: String,
            default: ''
        },
        /**
        * 背景图样式
        */
        bgSty: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
        };
    },
    methods: {
    }
};
</script>

<style lang="less" scoped>
.sp-wrap {
    position: relative;
}
.sp-cont {
    position: relative;
    z-index: 2;
}
.sp-bold {
    font-weight: 700;
}
.sp-card-title {
    position: relative;
    height: 20px;
    color: #da4d3c;
    justify-content: center;
    align-items: center;
    display: flex;
    perspective: 1000;
}
.sp-card-title-img-right {
    transform: rotateY(180deg);
}
</style>
