feat: 页面优化

master
xjs 2025-04-16 13:48:40 +08:00
parent 8f8ecb2745
commit 03e986876f
21 changed files with 113 additions and 134 deletions

View File

@ -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"

View File

@ -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>

View File

@ -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) {

View File

@ -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-weight: 500;
color: #333;
font-size: 36rpx;
font-weight: 600;
color: #303030;
}
&-content {

View File

@ -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;

View File

@ -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;
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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;

View File

@ -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 = () => {
regionKeyInfo.value = []
uniTypeKeyInfo.value = []
natureKeyInfo.value = []
subMenu.value.forEach((item) => {
item.activation = false
})
const handleClear = (index: number) => {
if (currentMenu.value === 1) {
regionKeyInfo.value = []
} else if (currentMenu.value === 2) {
uniTypeKeyInfo.value = []
} else if (currentMenu.value === 3) {
natureKeyInfo.value = []
}
subMenu.value[index].activation = false
dropMenuRef.value.closeDropMenu()
}

View File

@ -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
filterParams.value = filterParams.value.filter((item) => item.type !== 'phase')
if (props.menuBit & 1) {
choosePhase.value = val.batch
filterParams.value = filterParams.value.filter((item) => item.type !== 'phase')
filterParams.value.push({
type: 'phase',
value: { ...val, name: val.batch },
})
filterParams.value.push({
type: 'phase',
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({

View File

@ -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

View File

@ -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">
<text class="text-[#303030] text-[36rpx] font-bold">省份</text>
<Region
@change="handleRegionChangeCode"
@change-name="handleRegionChangeName"
:defaultValue="searchParams.locationCode ? [searchParams.locationCode] : []"
: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>
<Region
@change="handleRegionChangeCode"
@change-name="handleRegionChangeName"
:defaultValue="searchParams.locationCode ? [searchParams.locationCode] : []"
:max="1"
class="custom-check-group w-full"
/>
</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()
}

View File

@ -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 = () => {
regionKeyInfo.value = []
uniTypeKeyInfo.value = []
natureKeyInfo.value = []
subMenu.value.forEach((item) => {
item.activation = false
})
const handleClear = (index: number) => {
if (subMenu.value[index].id === 1) {
regionKeyInfo.value = []
} else if (subMenu.value[index].id === 2) {
uniTypeKeyInfo.value = []
} else if (subMenu.value[index].id === 3) {
natureKeyInfo.value = []
}
subMenu.value[index].activation = false
dropMenuRef.value.closeDropMenu()
}

View File

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

View File

@ -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>

View File

@ -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) {

View File

@ -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>

View File

@ -97,15 +97,14 @@
</template>
</z-paging>
<ActionSheet v-model:show="show" :title="actionTitle">
<view class="px-[36rpx]">
<Region
v-if="actionType === 2"
width="210rpx"
height="60rpx"
class="px-[32rpx]"
@change-name="handleRegionName"
/>
</view>
<Region
v-if="actionType === 2"
width="210rpx"
height="60rpx"
class="custom-check-group"
@change-name="handleRegionName"
/>
<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;

File diff suppressed because one or more lines are too long