components-app/src/components/sort-college/HeaderTip.vue

67 lines
1.4 KiB
Vue

<template>
<div
class="bg-[#E2EDF9] text-[#1580FF] text-[22rpx] flex justify-between items-center px-[32rpx] py-[10rpx]"
>
<div class="flex gap-[16rpx]">
<span>{{ score }}</span>
<span>
{{ subjectGroup.split(',').join('/') }}
</span>
<span>{{ batchName }}</span>
</div>
<div class="flex items-center gap-[26rpx] text-[22rpx] text-[#000]">
<div v-for="(model) in tModels" :key="model.type" class="flex items-center gap-[6rpx]">
<div
class="w-[16rpx] h-[16rpx] rounded-full"
:style="{ backgroundColor: calcTypeName(model.type).roundedBgColor }"
></div>
<span class="text-[22rpx]">{{ calcTypeName(model.type)?.text }}({{ model.count }})</span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import {calcTypeName, countModel} from "@/composables/useSortCollege"
const props = defineProps({
subjectGroup:{
type:String,
default: ""
},
batchName:{
type:String,
default:''
},
score:{
type:[Number,String],
default:0
},
wishList:{
type:Array,
default:() => []
}
})
const userWhishList = ref([])
const tModels = ref([])
watch(() => props.wishList, (newVal) => {
userWhishList.value = newVal
const {tModel} = countModel(userWhishList.value)
tModels.value = tModel
})
</script>
<style lang="scss" scoped>
.t-model-base {
font-weight: 400;
font-size: 22rpx;
color: #000000;
}
</style>