<template>
    <div class="school-list">
        <div v-for="(school, index) in schoolList"
             :key="index"
             class="school-box">
            <div class="school-name">{{ school }}</div>
            <div class="school-tag">學校</div>
        </div>
    </div>
</template>

<script setup>
    const schoolList = [
        '台北市立建國高級中學',
        '國立台灣師範大學附屬高級中學',
        '新竹市立光復高級中學',
        '台中市私立衛道高級中學',
        '台南市立南寧高級中學'
    ]
</script>

<style scoped>
    .school-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .school-box {
        display: flex;
        border: 1px solid #ccc;
        border-radius: 8px;
        overflow: hidden;
        width: fit-content;
        max-width: 400px;
        font-size: 14px;
        line-height: 1.5;
    }

    .school-name {
        padding: 8px;
        word-break: break-word;
        flex: 1;
        background-color: #e8f4ff; /* 很柔的淺藍色 */
    }

    .school-tag {
        background-color: #409EFF;
        color: white;
        padding: 8px 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }
</style>