refactor: 查大学界面优化

src/pages-sub/home/college/components/Colleges.vue

@@ -1,8 +1,15 @@
 <template>
   <view class="flex flex-col px-[32rpx] pt-[32rpx] bg-[#fff] mt-16rpx">
+    <view class="flex items-center gap-[10rpx]">
+      <image
+        class="w-[48rpx] h-[48rpx]"
+        src="https://api.static.ycymedu.com/zdx/faculty.png"
+        mode="scaleToFill"
+      />
       <text class="text-[32rpx] font-semibold text-[#333]">院系设置</text>
+    </view>
 
-    <WXXTable :data="tableData.slice(0, 4)" class="my-[24rpx]">
+    <WXXTable :data="tableData.slice(0, 4)" class="my-[20rpx]">
       <WXXTableCol prop="name" label="学院" width="30%"></WXXTableCol>
       <WXXTableCol prop="major" label="所含专业" width="70%"></WXXTableCol>
     </WXXTable>

src/pages-sub/home/college/components/FirstClass.vue

@@ -1,11 +1,28 @@
 <template>
   <view class="flex flex-col p-[32rpx] bg-[#fff]" v-show="subjectIntroduceList.length > 0">
-    <text class="text-[32rpx] font-semibold text-[#333]">
+    <view class="flex items-center gap-[10rpx]">
+      <image
+        class="w-[48rpx] h-[48rpx]"
+        src="https://api.static.ycymedu.com/zdx/first-class.png"
+        mode="scaleToFill"
+      />
+      <text class="text-[30rpx] font-600 text-[#000]">
         双一流学科·{{ subjectIntroduceList.length }}
       </text>
-    <text class="text-[24rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
+    </view>
-      {{ subjectIntroduceList.join(',') }}
+    <view
-    </text>
+      v-for="item in subjectIntroduceList.slice(0, 5)"
+      :key="item"
+      class="flex items-center justify-between font-400 py-[22rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
+    >
+      <view class="text-[26rpx] text-[#333]">{{ item }}</view>
+      <view
+        class="text-[#1580FF] text-[22rpx] bg-[rgba(21,128,255,0.1)] rounded-[8rpx] px-[10rpx] py-[6rpx]"
+      >
+        双一流学科
+      </view>
+    </view>
+
     <button
       block
       class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[12rpx]!"
@@ -19,12 +36,31 @@
     class="flex flex-col p-[32rpx] bg-[#fff] mt-[16rpx]"
     v-show="assessmentSubjectList.length > 0"
   >
-    <text class="text-[32rpx] font-semibold text-[#333]">
+    <view class="flex items-center gap-[10rpx]">
+      <image
+        class="w-[48rpx] h-[48rpx]"
+        src="https://api.static.ycymedu.com/zdx/subject.png"
+        mode="scaleToFill"
+      />
+      <text class="text-[30rpx] font-600 text-[#000]">
         学科评估·{{ assessmentSubjectList.length }}
       </text>
-    <text class="text-[24rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
+    </view>
-      {{ assessmentSubjectList.join(',') }}
+    <view
-    </text>
+      class="flex items-center justify-between text-[26rpx] text-[#999] font-400 py-[12rpx] mt-[10rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
+    >
+      <view>学科</view>
+      <view>评估结果</view>
+    </view>
+    <view
+      v-for="item in assessmentSubjectList.slice(0, 5)"
+      :key="item"
+      class="flex items-center justify-between text-[26rpx] text-[#333] font-400 py-[22rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
+    >
+      <view>{{ parsedNames(item).name }}</view>
+      <view class="w-[104rpx] text-center">{{ parsedNames(item).grade }}</view>
+    </view>
+
     <button
       block
       class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[12rpx]!"
@@ -35,12 +71,31 @@
     </button>
   </view>
   <view class="flex flex-col p-[32rpx] bg-[#fff] mt-[16rpx]" v-show="featureSubjectList.length > 0">
-    <text class="text-[32rpx] font-semibold text-[#333]">
+    <view class="flex items-center gap-[10rpx]">
+      <image
+        class="w-[48rpx] h-[48rpx]"
+        src="https://api.static.ycymedu.com/zdx/profession.png"
+        mode="scaleToFill"
+      />
+      <text class="text-[30rpx] font-600 text-[#000]">
         特色专业·{{ featureSubjectList.length }}
       </text>
-    <text class="text-[24rpx] font-normal text-[#636363] my-[24rpx]">
+    </view>
-      {{ featureSubjectList.join(',') }}
+    <view
-    </text>
+      class="flex items-center justify-between text-[26rpx] text-[#999] font-400 py-[12rpx] mt-[10rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
+    >
+      <view>专业名称</view>
+      <view>批次</view>
+    </view>
+    <view
+      v-for="item in featureSubjectList.slice(0, 5)"
+      :key="item"
+      class="flex items-center justify-between text-[26rpx] text-[#333] font-400 py-[22rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
+    >
+      <view class="max-w-[60%]">{{ item }}</view>
+      <view class="text-center">{{ level }}</view>
+    </view>
+
     <button
       block
       class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[12rpx]!"
@@ -52,8 +107,53 @@
   </view>
 
   <ActionSheet v-model:show="show" :title="title" :show-close="true">
-    <view class="text-[24rpx] text-[#636363] px-[32rpx] pt-[32rpx]">
+    <view v-if="showType === 1" class="px-[32rpx] pb-[32rpx]">
-      {{ innerContent }}
+      <view
+        v-for="item in subjectIntroduceList"
+        :key="item"
+        class="flex items-center justify-between font-400 py-[22rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
+      >
+        <view class="text-[26rpx] text-[#333] max-w-[60%]">{{ item }}</view>
+        <view
+          class="text-[#1580FF] text-[22rpx] bg-[rgba(21,128,255,0.1)] rounded-[8rpx] px-[10rpx] py-[6rpx]"
+        >
+          双一流学科
+        </view>
+      </view>
+    </view>
+
+    <view v-if="showType === 2" class="px-[32rpx] pb-[32rpx]">
+      <view
+        class="flex items-center justify-between text-[26rpx] text-[#999] font-400 py-[12rpx] mt-[10rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
+      >
+        <view>学科</view>
+        <view>评估结果</view>
+      </view>
+      <view
+        v-for="item in assessmentSubjectList"
+        :key="item"
+        class="flex items-center justify-between text-[26rpx] text-[#333] font-400 py-[22rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
+      >
+        <view>{{ parsedNames(item).name }}</view>
+        <view class="w-[104rpx] text-center">{{ parsedNames(item).grade }}</view>
+      </view>
+    </view>
+
+    <view class="px-[32rpx] pb-[32rpx]">
+      <view
+        class="flex items-center justify-between text-[26rpx] text-[#999] font-400 py-[12rpx] mt-[10rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
+      >
+        <view>专业名称</view>
+        <view>批次</view>
+      </view>
+      <view
+        v-for="item in featureSubjectList"
+        :key="item"
+        class="flex items-center justify-between text-[26rpx] text-[#333] font-400 py-[22rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
+      >
+        <view class="max-w-[60%]">{{ item }}</view>
+        <view class="text-center">{{ level }}</view>
+      </view>
     </view>
   </ActionSheet>
 </template>
@@ -70,6 +170,10 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  level: {
+    type: String,
+    default: '',
+  },
 })
 
 watch(
@@ -92,19 +196,31 @@ watch(
 
 const show = ref(false)
 const title = ref('')
-const innerContent = ref('')
+const showType = ref(1)
+
+const parsedNames = (name: string) => {
+  const match = name.match(/^(.*?)\((.*?)\)$/)
+  if (match) {
+    return {
+      name: match[1],
+      grade: match[2],
+    }
+  }
+  return {
+    name: name,
+    grade: '',
+  }
+}
 
 const handleFullFun = (type: number) => {
   show.value = true
+  showType.value = type
   if (type === 1) {
     title.value = `双一流学科·${subjectIntroduceList.value.length}`
-    innerContent.value = subjectIntroduceList.value.join(',')
   } else if (type === 2) {
     title.value = `学科评估·${assessmentSubjectList.value.length}`
-    innerContent.value = assessmentSubjectList.value.join(',')
   } else if (type === 3) {
     title.value = `特色专业·${featureSubjectList.value.length}`
-    innerContent.value = featureSubjectList.value.join(',')
   }
 }
 </script>

src/pages-sub/home/college/components/Profile.vue

@@ -23,21 +23,21 @@
       </view>
     </view>
 
-    <view class="line-clamp-4 mt-[14rpx] text-[24rpx] text-[#636363]">
+    <view class="line-clamp-4 mt-[14rpx] text-[26rpx] text-[#636363] line-height-[1.6]">
       {{ universityResult?.detail }}
     </view>
     <button
       block
       class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[16rpx]"
       @click="show = true"
-      v-if="universityResult.detail"
+      v-if="universityResult?.detail"
     >
       查看全部
       <view class="i-carbon-chevron-down rotate-270"></view>
     </button>
 
     <ActionSheet v-model:show="show" title="院校简介" :show-close="true">
-      <view class="text-[24rpx] text-[#636363] px-[32rpx] pt-[32rpx]">
+      <view class="text-[26rpx] text-[#636363] px-[32rpx] pt-[32rpx] line-height-[1.6]">
         {{ universityResult?.detail }}
       </view>
     </ActionSheet>

src/pages-sub/home/college/info.vue

@@ -90,7 +90,10 @@
       </view>
       <view class="bg-[#f8f8f8]" v-show="currentTab === 0">
         <Profile :university-result="universityBaseInfo?.universityResult" />
-        <FirstClass :id="collegeId" />
+        <FirstClass
+          :id="collegeId"
+          :level="`${universityBaseInfo?.universityResult.level === 0 ? '本科' : '专科'}`"
+        />
         <Colleges :id="collegeId" />
       </view>
       <view class="bg-[#f8f8f8] flex-1" v-show="currentTab === 1">

src/pages-sub/home/major/components/EmploymentProspects.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="flex flex-col py-[32rpx] px-[24rpx] bg-[#fff] mt-16rpx">
     <text class="text-[32rpx] font-semibold text-[#333]">就业方向</text>
-    <text class="text-[24rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
+    <text class="text-[26rpx] font-normal text-[#636363] my-[20rpx] line-clamp-3 line-height-[1.6]">
       {{ careerInfo.jobs || '暂无' }}
     </text>
     <button
@@ -17,7 +17,7 @@
   <view class="h-[16rpx] bg-[#f8f8f8]"></view>
   <view class="flex flex-col py-[32rpx] px-[24rpx] bg-[#fff]">
     <text class="text-[32rpx] font-semibold text-[#333]">具体职位</text>
-    <text class="text-[24rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
+    <text class="text-[26rpx] font-normal text-[#636363] my-[20rpx] line-clamp-3 line-height-[1.6]">
       {{ careerInfo.profession || '暂无' }}
     </text>
     <button

src/pages-sub/home/major/components/MajorBaseInfo.vue

@@ -1,8 +1,8 @@
 <template>
   <view class="flex flex-col py-[32rpx] px-[24rpx] bg-[#fff] mt-16rpx">
     <text class="text-[32rpx] font-semibold text-[#333]">专业介绍</text>
-    <text class="text-[24rpx] font-semibold text-[#333] mt-[32rpx] mb-[26rpx]">专业简介</text>
+    <text class="text-[28rpx] font-semibold text-[#333] mt-[20rpx] mb-[10rpx]">专业简介</text>
-    <text class="text-[24rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
+    <text class="text-[26rpx] font-normal text-[#636363] mb-[20rpx] line-clamp-3 line-height-[1.6]">
       {{ zyjx || '暂无' }}
     </text>
     <button
@@ -18,8 +18,8 @@
   <view class="h-[16rpx] bg-[#f8f8f8]"></view>
   <view class="flex flex-col py-[32rpx] px-[24rpx] bg-[#fff]">
     <text class="text-[32rpx] font-semibold text-[#333]">课程要求</text>
-    <text class="text-[24rpx] font-semibold text-[#333] mt-[32rpx] mb-[26rpx]">主干课程</text>
+    <text class="text-[28rpx] font-semibold text-[#333] mt-[20rpx] mb-[10rpx]">主干课程</text>
-    <text class="text-[24rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
+    <text class="text-[26rpx] font-normal text-[#636363] mb-[20rpx] line-clamp-3 line-height-[1.6]">
       {{ kyfx.map((item) => item.zymc).join(',') || '暂无' }}
     </text>
 
@@ -54,7 +54,7 @@
   </view>
   <ActionSheet v-model:show="show" :title="title" :show-close="true">
     <view class="mx-[32rpx] mt-[32rpx]">
-      <view class="text-[24rpx] text-[#636363]" v-show="showType !== 3">
+      <view class="text-[26rpx] text-[#636363] line-height-[1.6]" v-show="showType !== 3">
         {{ innerContent }}
       </view>
       <WXXTable :data="courseInfo" class="" v-show="showType === 3">