107 lines
4.3 KiB
Vue
107 lines
4.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="h-[16rpx] bg-[#f8f8f8]"></div>
|
|
<div
|
|
class="flex flex-col items-center gap-[16rpx] custom-background px-[32rpx] no-copy"
|
|
:style="`--background-color:${calcTypeName(college.type).style.backgroundColor}`"
|
|
@copy.prevent
|
|
@contextmenu.prevent>
|
|
<div class="flex my-[32rpx] gap-[30rpx] w-full">
|
|
<div class="flex flex-col items-center gap-[16rpx]">
|
|
<div class="flex items-center gap-[8rpx] text-[#303030] text-[28rpx]" @click="toggleCollapse">
|
|
{{ collegeIndex + 1 }}
|
|
<div class="i-carbon-chevron-down text-[16rpx] transition-transform duration-300" :class="{ 'rotate-180': isCollapsed }"></div>
|
|
</div>
|
|
<div class="w-[52rpx] h-[52rpx] rounded-[8rpx] font-semibold text-[28rpx] flex items-center justify-center" :style="calcTypeName(college.type).style">
|
|
{{ calcTypeName(college.type).text }}
|
|
</div>
|
|
<span class="text-[32rpx] font-semibold">
|
|
{{ Math.round(college.vItems.reduce((a: number, b: any) => a + Number(b.percentAge.replace("%", "")), 0) / college.vItems.length) }}%
|
|
</span>
|
|
</div>
|
|
<div class="flex flex-col justify-between flex-1">
|
|
<div class="flex justify-between mb-[14rpx]">
|
|
<div class="flex justify-between flex-col gap-[6rpx]">
|
|
<span class="text-[32rpx] font-semibold">{{ college.unName }}</span>
|
|
<span class="text-[22rpx] text-[#505050]">{{ college.ownership }}·{{ college.educationCategory }}</span>
|
|
<div class="text-[22rpx] text-[#8F959E] flex items-center">
|
|
<span class="truncate max-w-[450rpx]" v-show="college.features.length > 0">{{ college.features.slice(0, 3).join("/") }}/</span>
|
|
<span>排名{{ college.rank }}</span>
|
|
</div>
|
|
<div class="text-[22rpx] text-[#1F2329] mt-[8rpx] flex gap-[10rpx] gap-[36rpx]">
|
|
<span class="">代码{{ college.unCode }}</span>
|
|
<span>{{ college.year }}计划{{ college.vItems.reduce((a: number, b: any) => a + b.planCount, 0) }}人</span>
|
|
<span>{{ college.subjectType }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-[40rpx] text-[#666]">
|
|
<div class="i-carbon-move handle"></div>
|
|
<div class="i-carbon-trash-can" @click="handleDelete"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<DataTable :data="college.childItems" :score="score" />
|
|
</div>
|
|
</div>
|
|
<div class="h-[2rpx] bg-[#EDEDED] w-full"></div>
|
|
<div class="transition-all duration-300 w-full" :style="{ height: isCollapsed ? 'max-content' : '0' }" v-if="isCollapsed">
|
|
<virtual-list v-model="college.vItems" data-key="sort" lock-axis="x" handle=".handle-major" chosen-class="choose-item">
|
|
<template v-slot:item="{ record, index }">
|
|
<MajorItem :collegeIndex="collegeIndex" :major="record" :major-index="index" :score="score" :year="2024" v-bind="$attrs" />
|
|
</template>
|
|
</virtual-list>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { calcTypeName } from "@/composables/useSortCollege";
|
|
import VirtualList from "vue-virtual-draglist";
|
|
import MajorItem from "./MajorItem.vue";
|
|
import DataTable from "./DataTable.vue";
|
|
|
|
const props = defineProps<{
|
|
college: any;
|
|
score: number;
|
|
collegeIndex: number;
|
|
}>();
|
|
|
|
const emit = defineEmits(["toggleCollapse", "updateHeight", "move", "delete", "deleteMajor"]);
|
|
|
|
const isCollapsed = ref(false);
|
|
const toggleCollapse = () => {
|
|
isCollapsed.value = !isCollapsed.value;
|
|
};
|
|
|
|
const { removeCollege } = inject<{ removeCollege: (collegeIndex: any) => void }>("sort")!;
|
|
|
|
const handleDelete = () => {
|
|
removeCollege(props.collegeIndex);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom-background {
|
|
background: linear-gradient(180deg, var(--background-color) 0%, #fff 80px, #fff 100%);
|
|
box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(225,225,225,0.2);
|
|
}
|
|
|
|
// 添加过渡效果
|
|
.transition-all {
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.no-copy {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
.choose-item :deep(.handle-major) {
|
|
color: #1580ff;
|
|
}
|
|
</style>
|