feat: 页面优化

src/pages-evaluation-sub/evaluate/components/AiFooter.vue

@@ -1,11 +1,11 @@
 <template>
   <!-- 底部AI智能顾问 -->
   <view
-    class="pt-[16rpx] px-[32rpx] mt-[20rpx] flex items-center justify-center bg-[#fff] pb-safe"
+    class="pt-[16rpx] px-[32rpx] mt-[20rpx] flex items-center justify-center bg-[#fff] pb-safe sticky bottom-0 z-999"
     @click="toAiAssistant"
   >
     <view
-      class="rounded-[8rpx] border-[#1580FF] border-[2rpx] border-solid w-full pt-[22rpx] pb-[20rpx] flex items-center justify-center"
+      class="rounded-[8rpx] border-[#1580FF] border-[2rpx] border-solid w-full py-[14rpx] flex items-center justify-center"
     >
       <image
         src="https://api.static.ycymedu.com/images/btn-bottom.png"

src/pages-evaluation-sub/evaluate/components/LearnSkillSuggestion.vue

@@ -3,7 +3,7 @@
     <TitleBar :title="title" />
 
     <view v-for="(item, index) in items" :key="index" class="suggestion-item">
-      <view class="text-[32rpx] font-500">{{ item.title }}</view>
+      <view class="text-[32rpx] font-700">{{ item.title }}</view>
       <view class="text-[26rpx] font-400 mt-[10rpx] text-[#666]">
         {{ item.description instanceof Array ? item.description.join(',') : item.description }}
       </view>

src/pages-evaluation-sub/styles/grid-checkbox.scss

@@ -1,9 +1,9 @@
 .custom-check-group {
   :deep(.checkbox-group) {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(4, 1fr);
     gap: 16rpx;
-    padding: 32rpx 16rpx 16rpx;
+    padding: 24rpx 24rpx 36rpx;
   }
 
   :deep(.custom-checkbox) {

src/pages-sub/components/ActionSheet.vue

@@ -82,7 +82,7 @@ const handleClose = () => {
   }
 
   &-header {
-    padding: 24rpx 32rpx;
+    padding: 24rpx 32rpx 30rpx;
     text-align: center;
     position: relative;
     border-bottom: 1rpx solid #f5f5f5;
@@ -92,9 +92,9 @@ const handleClose = () => {
   }
 
   &-title {
-    font-size: 32rpx;
+    font-size: 36rpx;
-    font-weight: 500;
+    font-weight: 600;
-    color: #333;
+    color: #303030;
   }
 
   &-content {

src/pages-sub/components/CustomPickerView.vue

@@ -5,6 +5,7 @@
       v-if="visible"
       :value="currentIndex"
       :indicator-style="indicatorStyle"
+      :indicator-class="'picker-item-selected'"
       :style="{
         border: 'none',
         'border-top': 'none',
@@ -162,7 +163,7 @@ const handleChange = (e: any) => {
 .picker-item {
   text-align: center;
   font-size: 34rpx;
-  color: #7c7c7c;
+  color: #333;
   transition: all 0.2s;
 
   display: flex;

src/pages-sub/components/check-group/CheckGroup.vue

@@ -1,5 +1,11 @@
 <template>
-  <CheckboxGroup v-model="defValue" checked-color="#1580FF" @change="handleChange" v-bind="$attrs">
+  <CheckboxGroup
+    v-model="defValue"
+    checked-color="#1580FF"
+    @change="handleChange"
+    v-bind="$attrs"
+    :style="{ '--default-cols': defaultCols }"
+  >
     <Checkbox
       v-for="item in list"
       :key="item[valueKey]"
@@ -42,6 +48,10 @@ const props = defineProps({
     type: [String, Number],
     default: '60rpx',
   },
+  defaultCols: {
+    type: Number,
+    default: 3,
+  },
 })
 defineOptions({
   options: {
@@ -108,7 +118,7 @@ const checkboxStyle = computed(() => {
 
 :deep(.checkbox-group) {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(var(--default-cols), 1fr);
   gap: 16rpx;
 }
 

src/pages-sub/components/table/Table.vue

@@ -30,7 +30,7 @@
         mode="scaleToFill"
         class="w-[240rpx] h-[240rpx]"
       />
-      <view class="text-[28rpx] mt-[10rpx] px-[20rpx]">没有数据哦~</view>
+      <view class="text-[28rpx] mt-[30rpx] px-[20rpx] text-[#666]">没有数据哦~</view>
     </view>
   </view>
 </template>

src/pages-sub/home/career/components/CareerInfo.vue

@@ -2,14 +2,14 @@
   <view class="flex flex-col">
     <view class="flex flex-col px-[32rpx] mt-[40rpx]">
       <text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">简介</text>
-      <text class="text-[24rpx] text-[#636363]">
+      <text class="text-[24rpx] text-[#636363] line-height-[1.6]">
         {{ careerInfo.intro }}
       </text>
     </view>
     <view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
-    <view class="flex flex-col px-[32rpx] mt-[40rpx]">
+    <view class="flex flex-col px-[32rpx] mt-[32rpx]">
       <text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">职业定义</text>
-      <text class="text-[24rpx] text-[#636363]">
+      <text class="text-[24rpx] text-[#636363] line-height-[1.6]">
         {{ careerInfo.definition }}
       </text>
     </view>

src/pages-sub/home/career/components/DevelopmentProspect.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="flex flex-col">
-    <view class="flex flex-col px-[32rpx] mt-[40rpx]">
+    <view class="flex flex-col px-[32rpx] mt-[32rpx]">
       <text class="text-[32rpx] text-[#333] font-semibold mb-[23rpx]">发展前景</text>
       <view class="mb-[36rpx]">
         <view class="text-[24rpx] text-[#333] font-semibold">行业发展前景</view>
@@ -22,7 +22,7 @@
       </view>
     </view>
     <view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
-    <view class="flex flex-col px-[32rpx] mt-[40rpx]">
+    <view class="flex flex-col px-[32rpx] mt-[32rpx]">
       <text class="text-[32rpx] text-[#333] font-semibold mb-[23rpx]">薪资待遇</text>
       <view class="mb-[36rpx]">
         <view class="text-[24rpx] text-[#333] font-semibold">薪资结构</view>

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

@@ -2,7 +2,7 @@
   <view class="flex flex-col pt-[32rpx] px-[32rpx] bg-[#fff] h-full">
     <view class="flex flex-wrap justify-between items-center">
       <view
-        @click="handleShow(2)"
+        @click="handleShow"
         class="px-[24rpx] py-[8rpx] bg-[#f8f8f8] rounded-[8rpx] flex justify-between items-center text-[24rpx]"
       >
         {{ provinceName || '请选择省份' }}
@@ -44,50 +44,31 @@
           mode="scaleToFill"
           class="w-[240rpx] h-[240rpx]"
         />
-        <view class="text-[28rpx] mt-[10rpx] px-[20rpx]">没有数据哦~</view>
+        <view class="text-[28rpx] mt-[30rpx] px-[20rpx] text-[#666]">没有数据哦~</view>
       </view>
     </view>
-
-    <ActionSheet v-model:show="show" title="">
-      <template #title>
-        <view class="text-[#303030] text-[36rpx] font-bold text-center pt-[32rpx]">省份</view>
-      </template>
-      <template>
-        <view class="flex h-full flex-col">
-          <view class="px-[32rpx]">
-            <CustomPickerView
-              :list="pickList"
-              v-model:modelValue="pickValue"
-              v-if="pickType === 1"
-            />
-          </view>
-          <view class="py-[32rpx] flex flex-col items-center justify-center">
-            <Region
-              v-show="pickType === 2"
-              @change="handleRegionChange"
-              @change-name="handleRegionChangeName"
-              :defaultValue="provinceCode"
-              :max="1"
-              class="justify-center"
-            />
-          </view>
-        </view>
-      </template>
-      <template #footer>
-        <view class="flex items-center justify-between px-[32rpx] gap-[16rpx]">
-          <view class="cancel-btn" @click="show = false">取消</view>
-          <view class="submit-btn" @click="handleConfirm">确认</view>
-        </view>
-      </template>
-    </ActionSheet>
   </view>
+  <ActionSheet v-model:show="show" title="省份">
+    <template>
+      <view class="px-[24rpx] pt-[24rpx] pb-[32rpx]">
+        <Region
+          @change="handleRegionChange"
+          @change-name="handleRegionChangeName"
+          :defaultValue="provinceCode"
+          :max="1"
+          class="custom-check-group w-full"
+          :defaultCols="4"
+        />
+      </view>
+    </template>
+  </ActionSheet>
 </template>
 
 <script lang="ts" setup>
 import { getAdmissionTrendsByCollege } from '@/service/index/api'
 import { useUserStore } from '@/store'
 import Region from '@/pages-sub/home/components/Region.vue'
-import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
+
 import ActionSheet from '@/pages-sub/components/ActionSheet.vue'
 
 const props = defineProps({
@@ -105,8 +86,6 @@ const provinceCode = ref([userStore.userInfo.city.code])
 const year = ref(0)
 
 const pickList = ref([])
-const pickValue = ref('')
-let pickType = 1
 
 const tableData = ref([])
 
@@ -118,13 +97,10 @@ watch(
 )
 
 const show = ref(false)
-const handleShow = (type: number) => {
+const handleShow = () => {
   show.value = true
-  pickType = type
 
-  if (type === 2) {
+  pickList.value = []
-    pickList.value = []
-  }
 }
 
 const getPlanProListData = async (newVal) => {
@@ -148,15 +124,10 @@ const getPlanProListData = async (newVal) => {
   })
 }
 
-const handleConfirm = () => {
-  if (pickType === 1) {
-  } else if (pickType === 2) {
-  }
-  show.value = false
-  getPlanProListData(props.id)
-}
-
 const handleRegionChange = (val) => {
+  if (val.length > 0) {
+    show.value = false
+  }
   provinceCode.value = val
   getPlanProListData(props.id)
 }
@@ -167,6 +138,7 @@ const handleRegionChangeName = (val) => {
 </script>
 <style lang="scss" scoped>
 @import '@/pages-sub/home/styles/picker-view-btn.scss';
+@import '@/pages-sub/home/styles/grid-checkbox.scss';
 
 .th-border {
   border: 2rpx solid #eeeeee;

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

@@ -67,7 +67,7 @@
                 class="custom-check-group"
               />
               <view class="flex items-center justify-between px-[16rpx] pb-[32rpx]">
-                <view class="cancel-btn" @click="handleClear">清空</view>
+                <view class="cancel-btn" @click="handleClear(index)">清空</view>
                 <view class="submit-btn" @click="handleCheck">查看</view>
               </view>
             </drop-menu-item>
@@ -176,13 +176,15 @@ const itemClick = (item, index) => {
   uni.navigateTo({ url: `/pages-sub/home/college/info?collegeId=${item._id}` })
 }
 
-const handleClear = () => {
+const handleClear = (index: number) => {
-  regionKeyInfo.value = []
+  if (currentMenu.value === 1) {
-  uniTypeKeyInfo.value = []
+    regionKeyInfo.value = []
-  natureKeyInfo.value = []
+  } else if (currentMenu.value === 2) {
-  subMenu.value.forEach((item) => {
+    uniTypeKeyInfo.value = []
-    item.activation = false
+  } else if (currentMenu.value === 3) {
-  })
+    natureKeyInfo.value = []
+  }
+  subMenu.value[index].activation = false
   dropMenuRef.value.closeDropMenu()
 }
 

src/pages-sub/home/components/FilterMenu.vue

@@ -29,7 +29,6 @@
           <Region
             width="240rpx"
             height="60rpx"
-            class="custom-pl"
             v-show="currentMenu === 2"
             :defaultValue="defaultRegion"
             @change-obj="handleRegionChangeObj"
@@ -54,7 +53,7 @@
       </scroll-view>
     </view>
     <scroll-view class="box-shadow" :scroll-x="true">
-      <view class="flex items-center gap-[24rpx] w-max px-[32rpx] pt-[32rpx] pb-[40rpx]">
+      <view class="flex items-center gap-[24rpx] w-max px-[32rpx] pt-[32rpx] pb-[40rpx] h-[58rpx]">
         <view
           class="px-[20rpx] py-[12rpx] bg-[#f8f8f8] rounded-[8rpx]"
           v-for="(item, index) in filterParams"
@@ -123,8 +122,6 @@ const chooseCollegeFeature = ref([])
 const choosePhase = ref('')
 
 const handleRegionChangeObj = (val: any[]) => {
-  console.log(val)
-
   defaultRegion.value = val.map((item) => item.code)
   chooseRegion.value = val.map((item) => item.name)
 
@@ -173,13 +170,15 @@ const handleCollegeFeatureChangeObj = (val: any[]) => {
 }
 
 const handlePhaseChange = (val: any) => {
-  choosePhase.value = val.batch
+  if (props.menuBit & 1) {
-  filterParams.value = filterParams.value.filter((item) => item.type !== 'phase')
+    choosePhase.value = val.batch
+    filterParams.value = filterParams.value.filter((item) => item.type !== 'phase')
 
-  filterParams.value.push({
+    filterParams.value.push({
-    type: 'phase',
+      type: 'phase',
-    value: { ...val, name: val.batch },
+      value: { ...val, name: val.batch },
-  })
+    })
+  }
 }
 
 const handleRemove = (removeItem: { type: string; value: any }, index: number) => {
@@ -230,7 +229,7 @@ const clearForm = () => {
   defaultUniType.value = []
   defaultNature.value = []
   defaultRegion.value = []
-  defaultPhase.value = ''
+  filterParams.value = filterParams.value.filter((item) => item.type === 'phase')
 }
 
 defineExpose({

src/pages-sub/home/components/Region.vue

@@ -11,11 +11,6 @@
 <script lang="ts" setup>
 import { getRegionInfo } from '@/service/index/api'
 import CheckGroup from '@/pages-sub/components/check-group/CheckGroup.vue'
-defineOptions({
-  options: {
-    styleIsolation: 'shared',
-  },
-})
 
 interface Region {
   code: string

src/pages-sub/home/distinguish/index.vue

@@ -88,30 +88,21 @@
               mode="scaleToFill"
               class="w-[240rpx] h-[240rpx]"
             />
-            <view class="text-[28rpx] mt-[10rpx] px-[20rpx]">没有数据哦~</view>
+            <view class="text-[28rpx] mt-[30rpx] px-[20rpx] text-[#666]">没有数据哦~</view>
           </view>
         </view>
       </view>
     </scroll-view>
 
-    <ActionSheet v-model:show="show" title="">
+    <ActionSheet v-model:show="show" title="省份">
       <template>
-        <view class="pt-[32rpx] flex flex-col items-center justify-center">
+        <Region
-          <text class="text-[#303030] text-[36rpx] font-bold">省份</text>
+          @change="handleRegionChangeCode"
-          <Region
+          @change-name="handleRegionChangeName"
-            @change="handleRegionChangeCode"
+          :defaultValue="searchParams.locationCode ? [searchParams.locationCode] : []"
-            @change-name="handleRegionChangeName"
+          :max="1"
-            :defaultValue="searchParams.locationCode ? [searchParams.locationCode] : []"
+          class="custom-check-group w-full"
-            :max="1"
+        />
-            class="custom-check-group w-full"
-          />
-        </view>
-      </template>
-      <template #footer>
-        <view class="flex items-center justify-between gap-[22rpx]">
-          <view class="cancel-btn" @click="show = false">取消</view>
-          <view class="submit-btn" @click="handleConfirm">确认</view>
-        </view>
       </template>
     </ActionSheet>
   </view>
@@ -138,6 +129,9 @@ const handleRegionChangeName = (val) => {
   searchParams.value.locationName = val.join(',')
 }
 const handleRegionChangeCode = (val) => {
+  if (val.length > 0) {
+    show.value = false
+  }
   searchParams.value.locationCode = val.length > 0 ? val[0] : ''
   getUniversityList()
 }

src/pages-sub/home/expand/index.vue

@@ -34,7 +34,7 @@
           :key="item.id"
           :title="item.title"
           custom-class="flex items-center"
-          v-for="item in subMenu"
+          v-for="(item, index) in subMenu"
           :activation="item.activation"
         >
           <Region
@@ -59,7 +59,7 @@
             v-if="item.id === 3"
           />
           <view class="flex items-center justify-between px-[16rpx] pb-[32rpx]">
-            <view class="cancel-btn" @click="handleClear">清空</view>
+            <view class="cancel-btn" @click="handleClear(index)">清空</view>
             <view class="submit-btn" @click="handleCheck">查看</view>
           </view>
         </drop-menu-item>
@@ -228,13 +228,15 @@ const regionKeyInfo = ref([]) // 省份信息
 const uniTypeKeyInfo = ref([]) // 层次信息
 const natureKeyInfo = ref([]) // 类型信息
 
-const handleClear = () => {
+const handleClear = (index: number) => {
-  regionKeyInfo.value = []
+  if (subMenu.value[index].id === 1) {
-  uniTypeKeyInfo.value = []
+    regionKeyInfo.value = []
-  natureKeyInfo.value = []
+  } else if (subMenu.value[index].id === 2) {
-  subMenu.value.forEach((item) => {
+    uniTypeKeyInfo.value = []
-    item.activation = false
+  } else if (subMenu.value[index].id === 3) {
-  })
+    natureKeyInfo.value = []
+  }
+  subMenu.value[index].activation = false
   dropMenuRef.value.closeDropMenu()
 }
 

src/pages-sub/home/line/index.vue

@@ -111,6 +111,9 @@ const handleYearChange = (val) => {
     _yearList = val
   }
   searchParams.value.year = _yearList.join(',')
+  if (val.length !== 0) {
+    dropMenuRef.value.closeDropMenu()
+  }
 
   getBatchListData()
 }

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

@@ -47,6 +47,7 @@
       block
       class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[16rpx]"
       @click="handleFullFun(3)"
+      v-show="courseInfo.length > 4"
     >
       查看全部
       <view class="i-carbon-chevron-down rotate-270"></view>

src/pages-sub/home/styles/grid-checkbox.scss

@@ -1,9 +1,9 @@
 .custom-check-group {
   :deep(.checkbox-group) {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(4, 1fr);
     gap: 16rpx;
-    padding: 32rpx 16rpx 16rpx;
+    padding: 24rpx 24rpx 36rpx;
   }
 
   :deep(.custom-checkbox) {

src/pages-sub/home/wishesList/components/ScrollListItemAction.vue

@@ -21,7 +21,7 @@
     <CollegeMajor :college="college" v-bind="$attrs" v-if="college" />
 
     <template #footer>
-      <view class="flex items-center justify-between gap-[30rpx]">
+      <view class="flex items-center justify-between mx-[32rpx] gap-[22rpx] pt-[16rpx]">
         <view class="cancel-btn" @click="handleConfirm">取消</view>
         <view class="submit-btn" @click="handleConfirm">确认</view>
       </view>

src/pages-sub/home/wishesList/index.vue

@@ -97,15 +97,14 @@
     </template>
   </z-paging>
   <ActionSheet v-model:show="show" :title="actionTitle">
-    <view class="px-[36rpx]">
+    <Region
-      <Region
+      v-if="actionType === 2"
-        v-if="actionType === 2"
+      width="210rpx"
-        width="210rpx"
+      height="60rpx"
-        height="60rpx"
+      class="custom-check-group"
-        class="px-[32rpx]"
+      @change-name="handleRegionName"
-        @change-name="handleRegionName"
+    />
-      />
+
-    </view>
     <FilterMenu v-if="actionType === 1" :show-phase="false" ref="filterMenuRef" :menuBit="28" />
     <CustomPickerView
       v-if="actionType === 3"
@@ -116,7 +115,7 @@
       @change="handleTypeModelChange"
     />
     <template #footer>
-      <view class="flex items-center justify-between gap-[30rpx]">
+      <view class="flex items-center justify-between mx-[32rpx] gap-[22rpx]">
         <view class="cancel-btn" @click="show = false">取消</view>
         <view class="submit-btn" @click="handleConfirm">确认</view>
       </view>
@@ -282,6 +281,7 @@ const handlePreview = () => {
 
 <style lang="scss" scoped>
 @import '@/pages-sub/home/styles/picker-view-btn.scss';
+@import '@/pages-sub/home/styles/grid-checkbox.scss';
 
 .custom-slider {
   flex: 1 1 auto;