From 9c46b3996adc7db3605621a79f8c3e65c0735f49 Mon Sep 17 00:00:00 2001 From: shirlwang <15254118591@163.com> Date: Wed, 18 Mar 2026 19:16:37 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packageRc/pages/index/index.vue | 531 +++++++++++++++++++------- packageRc/pages/policy/policyList.vue | 209 ++++++++-- packageRc/static/dmsc/bj.png | Bin 0 -> 26292 bytes packageRc/static/dmsc/gs.png | Bin 0 -> 611 bytes packageRc/static/dmsc/kpbj.png | Bin 0 -> 29478 bytes packageRc/static/dmsc/sj.png | Bin 0 -> 911 bytes packageRc/static/dmsc/ss.png | Bin 0 -> 1007 bytes pages.json | 8 +- 8 files changed, 571 insertions(+), 177 deletions(-) create mode 100644 packageRc/static/dmsc/bj.png create mode 100644 packageRc/static/dmsc/gs.png create mode 100644 packageRc/static/dmsc/kpbj.png create mode 100644 packageRc/static/dmsc/sj.png create mode 100644 packageRc/static/dmsc/ss.png diff --git a/packageRc/pages/index/index.vue b/packageRc/pages/index/index.vue index 479f683..baaa7b3 100644 --- a/packageRc/pages/index/index.vue +++ b/packageRc/pages/index/index.vue @@ -5,8 +5,16 @@ --> @@ -110,11 +116,23 @@ isH5.value = true; uniIconSize.value = 20; // #endif +// 状态栏高度（用于自定义导航栏） +const statusBarHeight = ref(0); +try { + const sysInfo = uni.getSystemInfoSync(); + statusBarHeight.value = sysInfo.statusBarHeight || 0; +} catch(e) {} + + import { getPolicyList } from '@/packageRc/apiRc/policy'; let policyList = ref([]) function getPolicy() { - getPolicyList({pageNum: 1, pageSize: 10,zclx:'1'}).then(res => { - policyList.value = res.rows + getPolicyList({pageNum: 1, pageSize: 4,zclx:'1'}).then(res => { + if (res.code == 200) { + policyList.value = res.rows + } else { + throw new Error(); + } }) } let tabType = ref(1) @@ -178,7 +196,7 @@ const pageState = reactive({ page: 0, total: 0, maxPage: 2, - pageSize: 10, + pageSize: 4, search: { order: 0, }, @@ -196,8 +214,15 @@ function getJobRecommed(){ type:pageState.type }; $api.createRequest('/app/job/recommend', params).then((resData) => { - jobList.value = resData.data - pageState.total = 0; + if (resData.code == 200 && resData.data.length) { + jobList.value = resData.data + } else { + throw new Error(); + } + }).catch(() => { + // 造一些测试数据 + const mock = { jobTitle: '计算机网络运维员', companyName: '新疆天山人才智汇发展有限责任公司', minSalary: '面议', maxSalary: '面议' }; + jobList.value = [mock, mock, mock, mock]; }); } @@ -244,6 +269,26 @@ function nextDetail(job) { } } +function formatMD(dateStr) { + if (!dateStr) return '--'; + const parts = dateStr.split('-').length > 1 ? dateStr.split('-') : dateStr.split(' '); + // 处理 YYYY-MM-DD 或 YYYY-MM-DD HH:mm:ss + let d = parts[0].includes('-') ? parts[0].split('-') : parts; + if (d.length >= 3) { + return `${d[1]}-${d[2].substring(0,2)}`; + } + return dateStr; +} + +function formatYear(dateStr) { + if (!dateStr) return ''; + const parts = dateStr.split('-'); + if (parts.length >= 1) { + return parts[0].substring(0, 4); + } + return ''; +} + @@ -259,22 +304,59 @@ function nextDetail(job) { } view{box-sizing: border-box;display: block;} .container{ - background-color: #F4F4F4;background-position: top center;background-size: 100% auto; - height: 100vh; + background-color: #FFFFFF; + min-height: 100vh; min-width: 100vw; - padding-bottom: 0; - background-repeat: no-repeat; box-sizing: border-box; } +/* 自定义导航栏 */ +.custom-nav { + background: #107AFD; + width: 100%; + .nav-content { + height: 200rpx; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 40rpx; + .nav-back { + width: 120rpx; + height: 200rpx; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-weight: 300; + .iconfont{ + + font-size: 40px!important; + } + } + .nav-title { + color: #fff; + font-size: 72rpx; + font-weight: bold; + } + .nav-placeholder { + width: 120rpx; + } + } +} +.main-content { + position: relative; + z-index: 2; + /* 页面全局边距加倍 */ + padding: 64rpx 48rpx; +} .kinggang{ display: flex; justify-content: space-around; align-items: center; - padding: 16rpx 16rpx 32rpx 16rpx; - font-size: 24rpx; + padding: 24rpx 16rpx 48rpx 16rpx; + font-size: 52rpx; background: #FFFFFF; - border-radius: 16rpx; - margin-bottom: 24rpx; + border-radius: 20rpx; + margin-bottom: 32rpx; >view{ display: flex; flex-direction: column; @@ -282,58 +364,68 @@ view{box-sizing: border-box;display: block;} justify-content: space-around; } image{ - width: 78rpx; - // margin-bottom: 15rpx; - height: 78rpx; + width: 160rpx; + height: 160rpx; + margin-bottom: 20rpx; } } .tabs{ - margin-bottom: 29rpx; - - border-radius: 16rpx; - display: flex; - background: #fff; - color: #878787; - text-align: center; - width: 100%; - .tab{ - width: 50%; - border: 4rpx solid transparent; - border-radius: 16rpx; - line-height: 64rpx; - position: relative; - &.active{ - border: 4rpx solid #fff; - color: #fff; - background: linear-gradient(180deg, #79AFFF 1%, #A2B3FE 100%); - box-shadow: 0px 4rpx 10rpx 0px rgba(40, 102, 194, 0.4); - } - } + /* 调大上方选项卡的边距 */ + margin: 64rpx auto 64rpx; + border-radius: 120rpx; + display: flex; + background: #F4F6F9; + color: #878787; + text-align: center; + width: 80%; + overflow: hidden; + padding: 8rpx; + box-sizing: border-box; + .tab{ + flex: 1; + line-height: 120rpx; + position: relative; + font-size: 72rpx; + font-weight: 500; + transition: all 0.25s; + border-radius: 120rpx; + &.active{ + color: #fff; + background: #107AFD; + box-shadow: none; + } + } } .titles{ display: flex; - margin-bottom: 44rpx; + /* 调大标题下边距 */ + margin-bottom: 72rpx; + align-items: flex-end; .title-item{ - font-size: 32rpx; + font-size: 120rpx; font-weight: bold; color: #282828; - margin-right: 32rpx; + margin-right: 56rpx; position: relative; >view{ position: relative; z-index: 2; - padding: 0 16rpx; + padding: 0 8rpx; + .accent { + color: #EC7737; + margin-left: 4rpx; + } } &.active::after{ content: ''; position: absolute; z-index: 1; - bottom: -12rpx; - left: 0; - width: 120%; - height: 24rpx; - border-radius: 50px 0px 0px 50px; - background: linear-gradient(90deg, #78AEFF 0%, rgba(120, 174, 255, 0.31) 52%, rgba(24, 116, 255, 0) 100%); + bottom: -8rpx; + left: 10%; + width: 80%; + height: 20rpx; + border-radius: 50px; + background: linear-gradient(90deg, rgba(82, 149, 255, 0.4) 0%, rgba(24, 116, 255, 0) 100%); } } } @@ -341,11 +433,12 @@ view{box-sizing: border-box;display: block;} width: 100%; margin: 0 auto; color: #333333; - border-radius: 24rpx; + border-radius: 12rpx; background: #FFFFFF; padding: 32rpx; margin-bottom: 24rpx; position: relative; + /* 去掉阴影，保持扁平统一 */ .sign{ position: absolute; font-size: 28rpx; @@ -413,22 +506,191 @@ view{box-sizing: border-box;display: block;} margin: 0 auto; margin-bottom: 20rpx; } -.showtab{ +.job-grid { display: flex; + flex-wrap: wrap; justify-content: space-between; - margin-bottom: 40rpx; - .tabItem{ - position: relative; - width: calc(50% - 8rpx); - height: 144rpx; + /* 列表前边距调大 */ + margin-top: 48rpx; + + .job-card-box { + /* 缩小宽度比例以增加瀑布流列间距 */ + width: calc(50% - 24rpx); + background: #FFFFFF; + background-image: url(../../../packageRc/static/dmsc/kpbj.png); + background-size: 100% 100%; + /* 加大卡片下边距 */ + margin-bottom: 48rpx; + border: 1px solid #D1E5FF; + border-radius: 16rpx; + /* 加大卡片内边距 */ + padding: 48rpx; + box-sizing: border-box; + display: flex; + flex-direction: column; + + .job-top { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 24rpx; + .job-salary { + color: #EC7737; + font-weight: bold; + font-size: 64rpx; + flex-shrink: 0; + } + .job-name { + font-size: 72rpx; + font-weight: bold; + color: #333; + flex: 1; + margin-top: 0; + margin-right: 12rpx; + /* 只保留单行溢出，以适应不同宽度 */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .job-tags { + display: flex; + flex-wrap: wrap; + margin-bottom: 32rpx; + .tag { + background: #7DA6FF; + color: #FFFFFF; + font-size: 48rpx; + padding: 8rpx 20rpx; + border-radius: 12rpx; + margin-right: 16rpx; + margin-bottom: 16rpx; + } + } + + .job-desc { + font-size: 48rpx; + color: #4C6EFB; + margin-bottom: 44rpx; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .company-link { + display: flex; + align-items: center; + margin-top: auto; + margin-bottom: 48rpx; + .comp-icon { + width: 56rpx; + height: 56rpx; + margin-right: 16rpx; + flex-shrink: 0; + } + .comp-name { + font-size: 48rpx; + color: #666; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .delivery-btn { + width: 75%; + margin: 0 auto; + height: 96rpx; + line-height: 96rpx; + background: #2591FF; /* 与设计图一致的亮蓝色 */ + color: #FFFFFF; + text-align: center; + font-size: 52rpx; + font-weight: 500; + border-radius: 12rpx; + /* 移除阴影以贴合扁平化设计稿 */ + } } - .activeImg{ - position: absolute; - width: 143rpx; - height: 18rpx; - bottom: -24rpx; - right: 50%; - transform: translateX(50%); +} + +.policy-list-card { + width: 100%; + margin: 0 auto; + color: #333333; + /* 政策卡片大边距与内边距 */ + margin-bottom: 48rpx; + box-sizing: border-box; + display: flex; + background: linear-gradient(180deg, #F0F8FF 0%, #FFFFFF 100%); + padding: 64rpx 48rpx; + border-radius: 16rpx; + border: 1px solid #D1E5FF; + box-shadow: 0px 4rpx 12rpx 0px rgba(16, 122, 253, 0.05); + + .card-left { + /* 加宽左侧保护不再折行 */ + width: 220rpx; + flex-shrink: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-right: 1px solid #E5EEFA; + /* 增大左右空隙 */ + margin-right: 48rpx; + + .clock-icon { + width: 52rpx; + height: 52rpx; + margin-bottom: 12rpx; + } + + .date-md { + font-size: 60rpx; + font-weight: bold; + color: #107afd; + line-height: 1; + margin-bottom: 12rpx; + } + + .date-year { + font-size: 40rpx; + color: #107afd; + line-height: 1; + } + } + + .card-right { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + + .card-title { + font-size: 64rpx; + font-weight: bold; + color: #333; + margin-bottom: 24rpx; + line-height: 1.4; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + + .card-infos { + display: flex; + flex-wrap: wrap; + + .info-tag { + font-size: 48rpx; + color: #999; + margin-right: 24rpx; + } + } } } @@ -464,32 +726,35 @@ view{box-sizing: border-box;display: block;} .tabs { margin-bottom: 80rpx; - height: 120rpx; - border-radius: 20rpx !important; - background: #f8faff !important; - box-shadow: 0px 4rpx 15rpx rgba(0, 0, 0, 0.04); + background-color: #eee; + border-radius: 60px; + padding: 10px; .tab { width: 33.3% !important; - line-height: 120rpx !important; - font-size: 20px !important; - border-radius: 16rpx !important; + line-height: 180rpx !important; + font-size: 36px !important; + border-radius: 100rpx; } } .titles { margin-top: 40rpx; - margin-bottom: 60rpx; + margin-bottom: 60px; .title-item { - font-size: 24px !important; + font-size: 40px; font-weight: 600; - margin-right: 100rpx !important; + margin-right: 100px !important; >view { padding: 0 16rpx !important; } &::after { - height: 24rpx !important; - bottom: -12rpx !important; - width: 110% !important; + height: 20rpx !important; + bottom: -16px !important; + width: 20% !important; + left: 40% !important; + background: orange; + border-radius: 0; + } } .more-link { diff --git a/packageRc/pages/policy/policyList.vue b/packageRc/pages/policy/policyList.vue index db1eff4..48d26a1 100644 --- a/packageRc/pages/policy/policyList.vue +++ b/packageRc/pages/policy/policyList.vue @@ -1,10 +1,14 @@