sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式优化

Browse Source
This commit is contained in:
FengHui
2026-04-14 13:26:23 +08:00
parent 3e408d5740
commit 183d43b664
5 changed files with 83 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
hook/useColumnCount.js
View File

@@ -19,43 +19,36 @@ export function useColumnCount(onChange = () => {}) {
// columnCount.value = count < 2 ? 2 : count // columnCount.value = count < 2 ? 2 : count
// } // }
// } // }
const calcColumn = () => { const calcColumn = () => {
// 使用新的API替代已废弃的getSystemInfoSync // 使用新的API替代已废弃的getSystemInfoSync
let width let width
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
const mpSystemInfo = uni.getWindowInfo() const mpSystemInfo = uni.getWindowInfo()
width = mpSystemInfo.windowWidth width = mpSystemInfo.windowWidth
// #endif // #endif
// #ifndef MP-WEIXIN // #ifndef MP-WEIXIN
const otherSystemInfo = uni.getSystemInfoSync() const otherSystemInfo = uni.getSystemInfoSync()
width = otherSystemInfo.windowWidth width = otherSystemInfo.windowWidth
// #endif // #endif
let count = 2 let count = 2
// #ifdef H5 // #ifdef H5
// H5端固定显示2列 // H5端固定显示2列
count = 2 count = 2
// #endif // #endif
// #ifndef H5 // #ifndef H5
if (width >= 1000) { // 小程序端固定显示1列
count = 5 count = 1
} else if (width >= 750) { // #endif
count = 4
} else if (width >= 500) { if (count !== columnCount.value) {
count = 3 columnCount.value = count
} else { }
count = 2
} // 计算间距：count=2 => 1，count=5 => 2，中间线性插值
// #endif const spacing = 2 - (count - 2) * (1 / 3)
// console.log('列数:', count, '间距:', spacing.toFixed(2))
if (count !== columnCount.value) { columnSpace.value = spacing
columnCount.value = count
}
// 计算间距：count=2 => 1，count=5 => 2，中间线性插值
const spacing = 2 - (count - 2) * (1 / 3)
// console.log('列数:', count, '间距:', spacing.toFixed(2))
columnSpace.value = spacing
} }
onMounted(() => { onMounted(() => {

5
pages.json
View File

@@ -3,7 +3,10 @@
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
"navigationBarTitleText": "喀什智慧就业平台" "navigationBarTitleText": "喀什智慧就业平台",
// #ifdef H5
"navigationStyle": "custom"
// #endif
} }
}, },
{ {

49
pages/index/components/index-one.vue
View File

@@ -307,7 +307,8 @@
<view class="item btn-feel" v-if="!job.recommend"> <view class="item btn-feel" v-if="!job.recommend">
<view class="falls-card" :class="{ 'disabled-card': Number(job.jobStatus) === 1 }" @click="nextDetail(job)"> <view class="falls-card" :class="{ 'disabled-card': Number(job.jobStatus) === 1 }" @click="nextDetail(job)">
<view class="falls-card-pay"> <view class="falls-card-pay">
<view class="pay-text"> <view class="fl_1 falls-card-title">{{ job.jobTitle }}</view>
<view class="fr_1 pay-text">
<Salary-Expectation <Salary-Expectation
:max-salary="job.maxSalary" :max-salary="job.maxSalary"
:min-salary="job.minSalary" :min-salary="job.minSalary"
@@ -316,20 +317,23 @@
</view> </view>
<image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image> <image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image>
</view> </view>
<view class="falls-card-title">{{ job.jobTitle }}</view> <view>
<view class="fl_box fl_warp"> <!-- <view class="fl_1 falls-card-title">{{ job.jobTitle }}</view> -->
<view class="falls-card-education mar_ri10" v-if="job.education">
<dict-Label dictType="education" :value="job.education"></dict-Label> <view class="fr_1 fl_box fl_warp">
</view> <view class="falls-card-education mar_ri10" v-if="job.education">
<view class="falls-card-experience" v-if="job.experience"> <dict-Label dictType="education" :value="job.education"></dict-Label>
<dict-Label dictType="experience" :value="job.experience"></dict-Label> </view>
<view class="falls-card-experience" v-if="job.experience">
<dict-Label dictType="experience" :value="job.experience"></dict-Label>
</view>
</view> </view>
</view> </view>
<view class="falls-card-company" v-show="isShowJw !== 3"> <!-- <view class="falls-card-company" v-show="isShowJw !== 3">
{{ config.appInfo.areaName }} {{ config.appInfo.areaName }}
<!-- {{ job.jobLocation }} --> {{ job.jobLocation }}
<dict-Label dictType="jobLocationAreaCode" :value="job.jobLocationAreaCode"></dict-Label> <dict-Label dictType="jobLocationAreaCode" :value="job.jobLocationAreaCode"></dict-Label>
</view> </view> -->
<view class="falls-card-pepleNumber"> <view class="falls-card-pepleNumber">
<view> <view>
<image class="point2" src="/static/icon/pintDate.png"></image> <image class="point2" src="/static/icon/pintDate.png"></image>
@@ -345,8 +349,10 @@
</view> </view>
</view> </view>
<view class="falls-card-company2"> <view class="falls-card-company2">
<image class="point3" src="/static/icon/point3.png"></image>
<view class="fl_1"> <view class="fl_1">
<image class="point3" src="/static/icon/point3.png"></image>
{{ config.appInfo.areaName }}地区 &nbsp; &nbsp;
{{ job.companyName }} {{ job.companyName }}
</view> </view>
</view> </view>
@@ -395,7 +401,8 @@
<view class="item btn-feel" v-if="!job.recommend"> <view class="item btn-feel" v-if="!job.recommend">
<view class="falls-card" :class="{ 'disabled-card': Number(job.jobStatus) === 1 }" @click="nextDetail(job)"> <view class="falls-card" :class="{ 'disabled-card': Number(job.jobStatus) === 1 }" @click="nextDetail(job)">
<view class="falls-card-pay"> <view class="falls-card-pay">
<view class="pay-text"> <view class="fl_1 falls-card-title">{{ job.jobTitle }}</view>
<view class="fr_1 pay-text">
<Salary-Expectation <Salary-Expectation
:max-salary="job.maxSalary" :max-salary="job.maxSalary"
:min-salary="job.minSalary" :min-salary="job.minSalary"
@@ -404,7 +411,7 @@
</view> </view>
<image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image> <image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image>
</view> </view>
<view class="falls-card-title">{{ job.jobTitle }}</view>
<view class="fl_box fl_warp"> <view class="fl_box fl_warp">
<view class="falls-card-education mar_ri10" v-if="job.education"> <view class="falls-card-education mar_ri10" v-if="job.education">
<dict-Label dictType="education" :value="job.education"></dict-Label> <dict-Label dictType="education" :value="job.education"></dict-Label>
@@ -413,16 +420,16 @@
<dict-Label dictType="experience" :value="job.experience"></dict-Label> <dict-Label dictType="experience" :value="job.experience"></dict-Label>
</view> </view>
</view> </view>
<view class="falls-card-company" v-show="isShowJw !== 3"> <!-- <view class="falls-card-company" v-show="isShowJw !== 3">
{{ config.appInfo.areaName }} 地区：{{ config.appInfo.areaName }}
<!-- {{ job.jobLocation }} --> 地址：{{ job.jobLocation }}
<dict-Label dictType="jobLocationAreaCode" :value="job.jobLocationAreaCode"></dict-Label> <dict-Label dictType="jobLocationAreaCode" :value="job.jobLocationAreaCode"></dict-Label>
</view> </view> -->
<view class="falls-card-pepleNumber"> <view class="falls-card-pepleNumber">
<view> <view>
<image class="point2" src="/static/icon/pintDate.png"></image> <image class="point2" src="/static/icon/pintDate.png"></image>
<view class="fl_1"> <view class="fl_1">
{{ job.postingDate || '发布日期' }} 发布日期：{{ job.postingDate || '发布日期' }}
</view> </view>
</view> </view>
<view> <view>
@@ -437,6 +444,10 @@
<view class="fl_1"> <view class="fl_1">
{{ job.companyName }} {{ job.companyName }}
</view> </view>
<view class="fr-1">
地区：{{ config.appInfo.areaName }}
</view>
</view> </view>
<!-- 招聘者显示上下架开关 --> <!-- 招聘者显示上下架开关 -->
<view class="falls-card-actions" v-if="isRecruiter"> <view class="falls-card-actions" v-if="isRecruiter">

26
pages/index/index.vue
View File

@@ -209,8 +209,10 @@ onShow(() => {
height: 20rpx height: 20rpx
/* 自定义导航栏样式 */ /* 自定义导航栏样式 */
.custom-nav .custom-nav
background: #107AFD background: linear-gradient(135deg, #8a9bf0, #c3cafa, #e7ebfe)
width: 100% width: 100%
box-shadow: 0 2rpx 10rpx rgba(138, 155, 240, 0.2)
border-radius: 0
.nav-content .nav-content
height: 80rpx height: 80rpx
display: flex display: flex
@@ -219,19 +221,25 @@ onShow(() => {
padding: 0 40rpx padding: 0 40rpx
.nav-back .nav-back
width: 120rpx width: 120rpx
height: 200rpx height: 80rpx
display: flex display: flex
align-items: center align-items: center
justify-content: center justify-content: flex-start
color: #fff color: #2f56e8
font-weight: 300 font-weight: 400
transition: all 0.3s ease
&:hover
transform: translateX(-5rpx)
.nav-back-text .nav-back-text
font-size: 80rpx font-size: 56rpx
line-height: 1 line-height: 1
text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.1)
.nav-title .nav-title
color: #fff color: #4a55b0
font-size: 32rpx font-size: 36rpx
font-weight: bold font-weight: 600
text-shadow: 1rpx 1rpx 2rpx rgba(255, 255, 255, 0.8)
letter-spacing: 2rpx
.nav-placeholder .nav-placeholder
width: 120rpx width: 120rpx
</style> </style>

4
uni_modules/custom-waterfalls-flow/components/custom-waterfalls-flow/custom-waterfalls-flow.vue
View File

@@ -100,7 +100,7 @@ export default {
return { return {
data: { data: {
list: this.value ? this.value : [], list: this.value ? this.value : [],
column: this.column < 2 ? 2 : this.column, column: this.column < 1 ? 1 : this.column,
columnSpace: this.columnSpace <= 5 ? this.columnSpace : 5, columnSpace: this.columnSpace <= 5 ? this.columnSpace : 5,
imageKey: this.imageKey, imageKey: this.imageKey,
seat: this.seat, seat: this.seat,
@@ -179,7 +179,7 @@ export default {
this.isRefresh = true; this.isRefresh = true;
this.adds = []; this.adds = [];
this.data.list = this.value ? this.value : []; this.data.list = this.value ? this.value : [];
this.data.column = this.column < 2 ? 2 : this.column >= this.maxColumn ? this.maxColumn : this.column; this.data.column = this.column < 1 ? 1 : this.column >= this.maxColumn ? this.maxColumn : this.column;
this.data.columnSpace = this.columnSpace <= 5 ? this.columnSpace : 5; this.data.columnSpace = this.columnSpace <= 5 ? this.columnSpace : 5;
this.data.imageKey = this.imageKey; this.data.imageKey = this.imageKey;
this.data.seat = this.seat; this.data.seat = this.seat;