<template>
    <div class="card my-2">
        <div>
            <van-icon name="info-o" class="tips-icon" />
            <span class="tips-title">温馨提示</span>
        </div>
        <div>
            <van-text-ellipsis rows="2" :content="content" expand-text="展开" collapse-text="收起" />
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';

const props = defineProps({
    content: {
        type: String,
        required: true
    }
});

const isExpanded = ref(false);
</script>

<style scoped>
.tips-card {
    background: #f7faff;
    border-radius: 8px;
    padding: 12px;
}

.tips-icon {
    color: #1989fa;
    margin-right: 5px;
}

.tips-title {
    font-weight: bold;
    font-size: 16px;
}

.tips-content {
    font-size: 14px;
    color: #333;
}
</style>