refactor: 界面优化

src/components/sort-college/CollegeItem.vue

@@ -2,19 +2,21 @@
   <div>
     <div class="h-[16rpx] bg-[#f8f8f8]"></div>
     <div
-      class="flex flex-col items-center gap-[16rpx] custom-background px-[32rpx]"
-      :style="`--background-color:${calcTypeName(college.type).style.backgroundColor}`">
+      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 py-[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]" @touchstart="toggleCollapse">
-            {{ collegeIndex+1 }}
+            {{ 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) }}%
+            {{ 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">
@@ -23,73 +25,82 @@
               <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-[300rpx]" v-show="college.features.length > 0">{{ college.features.slice(0, 3).join("/") }}/</span>
+                <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.year }}计划{{ college.vItems.reduce((a: number, b: any) => a + b.planCount, 0) }}人</span>
                 <span>{{ college.subjectType }}</span>
               </div>
             </div>
-            <div class="flex gap-[40rpx]">
+            <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="overflow-auto transition-all duration-300 w-full" :style="{ maxHeight: isCollapsed ? '100vh' : '0' }" v-if="isCollapsed">
-        <virtual-list v-model="college.vItems" data-key="sort" lock-axis="x" handle=".handle-major">
-        <template v-slot:item="{ record, index }">
-          <MajorItem :collegeIndex="collegeIndex" :major="record" :major-index="index" :score="score" :year="2024" v-bind="$attrs" />
-        </template>
-      </virtual-list>
+        <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';
+  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 props = defineProps<{
+    college: any;
+    score: number;
+    collegeIndex: number;
+  }>();
 
-const emit = defineEmits(['toggleCollapse', 'updateHeight', 'move', 'delete', 'deleteMajor'])
+  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)
-}
+  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 30%, #fff 100%);
-}
+  .custom-background {
+    background: linear-gradient(180deg, var(--background-color) 0%, #fff 30%, #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);
-}
+  // 添加过渡效果
+  .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>

src/views/sort-college.vue

@@ -2,12 +2,13 @@
   <div class="h-screen flex flex-col">
     <HeaderTip :score="score" :batch-name="batchName" :subject-group="subjectGroup" :wishList="wishList" />
     <div class="flex-1 h-0 overflow-y-auto">
-      <virtual-list v-model="wishList" data-key="sort" lock-axis="x" handle=".handle">
+      <virtual-list v-model="wishList" data-key="sort" lock-axis="x" handle=".handle" chosen-class="choose-item">
         <template v-slot:item="{ record, index }">
           <CollegeItem :college="record" :college-index="index" :score="score" />
         </template>
       </virtual-list>
     </div>
+    <div class="h-[16rpx] bg-[#f8f8f8]"></div>
     <div class="flex items-center pb-safe button-group px-[32rpx] pt-[32rpx] pb-[52rpx]">
       <button class="border-[#1580FF] flex-auto bg-[#1580FF] rounded-[8rpx] text-[#fff]! text-[32rpx] font-normal py-[20rpx]" @click="handleSave">
         保存
@@ -95,3 +96,9 @@
     getWishList();
   });
 </script>
+
+<style scoped>
+.choose-item :deep(.handle) {
+    color:#1580FF;
+  }
+</style>