<template>
    <div class="card">
        <div class="cardBox" v-for="(v, i) in travelerList" :key="i">
            <div class="cardItem" @click="checkUser(v, i)">
                <div>{{ v.travelerName }}</div>
                <div class="schoolCss">{{ v.schoolName }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            travelerList: [],
        };
    },
    methods: {
        getData() {
            const userInfo = JSON.parse(localStorage.getItem("userInfo"));

            this.travelerList = userInfo.subUsers;
        },
        //选择
        checkUser(v, i) {
            this.$router.push({
                name: "stars",
                query: {
                    index: i,
                },
            });
        },
    },
    mounted() {
        this.getData();
    },
};
</script>

<style lang="scss" scoped>
.card {
    padding: 7vw;
    box-sizing: border-box;

    .cardBox {
        .cardItem {
            padding: 70px 0;
            box-sizing: border-box;
            font-size: 40px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid rgb(236, 233, 233);

            .schoolCss {
                font-size: 32px;
            }
        }
    }
}
</style>