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:
shirlwang
2025-10-22 14:23:38 +08:00
parent 4d87af9c3c
commit e287209dcf
7 changed files with 493 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

395
packageRc/pages/daiban/daiban.vue Normal file
View File

@@ -0,0 +1,395 @@
<!--
* @Date: 2025-10-16 15:15:47
* @LastEditors: shirlwang
* @LastEditTime: 2025-10-22 14:17:46
-->
<template>
<!-- @scroll="handleScroll" @scrolltolower="scrollBottom" -->
<scroll-view :scroll-y="true" class="container" style="background-image: url('../../../packageRc/static/pageBg.png');">
<view style="padding: 40rpx 28rpx;">
<view class="kinggang">
<view>
<view class="num-title" style="color: #1A62CE">重点毕业生数</view>
<view>1120</view>
</view>
<text style="color: #B5C1D1;">｜</text>
<view>
<view class="num-title" style="color: #16ACB7">累计需求数</view>
<view>1120</view>
</view>
<text style="color: #B5C1D1;">｜</text>
<view>
<view class="num-title" style="color: #6A57D1">累计服务数</view>
<view>1120</view>
</view>
</view>
<view class="trace-line">
<view class="trace">
<view class="title">
<image src="../../../packageRc/static/trace.png"/>
毕业生追踪
</view>
<view style="display: flex;justify-content: space-between;">
<view>点击查看</view>
<uni-icons color="#639AEB" type="arrow-right" size="16"></uni-icons>
</view>
</view>
<view class="sendManager">
<view class="title">
<image src="../../../packageRc/static/sendManager.png"/>
任务下发管理员
</view>
<view style="display: flex;justify-content: space-between;">
<view>点击查看</view>
<uni-icons color="#DBAA4E" type="arrow-right" size="16"></uni-icons>
</view>
</view>
</view>
<view class="titles">
<view class="title-item active"><view>待办需求预警列表</view></view>
<view>共 2 条信息</view>
</view>
<view v-for="(item, index) in jobList" :key="index" class="job-list">
<view class="title">销售顾问</view>
<view class="info">
待办内容文字示例待办内容文字示例待办内容文字示例待办内容文字示例
</view>
<view class="bottom-line">
<view>发起时间：2025-09-24 15:02</view>
<view style="color: #EF7325;">青岛xx公司</view>
</view>
</view>
<view class="titles">
<view class="title-item active"><view>待服务毕业生列表</view></view>
<view>共 22 条信息</view>
</view>
<view v-for="(item, index) in jobList" :key="index" class="person-list">
<view class="top-info">
<image v-if="index%2==0" src="../../../packageRc/static/personIcon.png"/>
<image v-else src="../../../packageRc/static/personIconFe.png"/>
<view class="top-right">
<view class="name-line">
<view class="name">姓名<view class="tag">硕士</view></view>
<view class="service-status">·未服务</view>
</view>
<view class="info-line" style="display: flex;">
<view style="margin-right: 24rpx;"><text>年龄：</text>27岁</view>
<view><text>服务次数：</text>1次</view>
</view>
</view>
</view>
<view class="info-line">
<view><text>联系电话：</text>152****5488</view>
<view><text>详细地址：</text>山东省济南市历城区港沟街道融创文旅城鹊桥华居8号楼1单元801</view>
</view>
<view class="services">
<view>退回</view>
<view>服务</view>
</view>
</view>
</view>
</scroll-view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
let activeTab = ref(1)
let activeTitle = ref(1)
let jobList = ref([{},{},{},{},{}])
function back() {
uni.navigateBack({
delta: 1
})
}
function viewMore() {
// uni.navigateTo({
// url: '/pages/jobList/jobList'
// })
}
</script>
<style lang="less" scoped>
view{box-sizing: border-box;display: block;}
.container{
background-color: #F4F4F4;background-position: top center;background-size: 100% auto;
height: 100vh;
min-width: 100vw;
padding-bottom: 0;
background-repeat: no-repeat;
box-sizing: border-box;
}
.kinggang{
display: flex;
justify-content: space-around;
align-items: center;
padding: 36rpx 32rpx 33rpx 32rpx;
background: #FFFFFF;
border-radius: 16rpx;
border: 3rpx solid #FFFFFF;
margin-bottom: 24rpx;background: linear-gradient(180deg, #EDF4FF 0%, #FFFFFF 52%);
>view{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
font-weight: bold;
>view{font-size: 50rpx;}
.num-title{
font-size: 28rpx;
margin-top: 16rpx;
font-weight: normal;
}
// text{
// font-size: 28rpx;
// }
}
image{
width: 78rpx;
// margin-bottom: 15rpx;
height: 78rpx;
}
}
.trace-line{
width: 100%;
margin-bottom: 24rpx;
display: flex;
justify-content: space-between;
>view{
padding: 37.5rpx 32rpx;
width: calc(50% - 12rpx);
.title{
font-size: 28rpx;
font-weight: bold;
color: #1D6AD7;
margin-bottom: 16rpx;
display: flex;
image{
width: 46rpx;
height: 46rpx;
margin-right: 11rpx;
}
}
.more{
display: flex;
justify-content: space-between;
}
}
.trace{
color: #2E77DF;
border: 2rpx solid #78ADFF;
background: linear-gradient(0deg, #FFFFFF 1%, #D0E1FF 100%);
box-shadow: inset 0px 4rpx 10rpx 0px rgba(255, 255, 255, 0.302);
.title{
color: #1D6AD7;
}
}
.sendManager{
border: 2rpx solid #FFC34B;
color: #C68412;
box-shadow: inset 0px 4px 10px 0px rgba(255, 255, 255, 0.302);
background: linear-gradient(0deg, #FFFFFF 0%, #FBF4D1 100%);
.title{color: #CE9523;}
}
}
.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);
}
}
}
.titles{
display: flex;
margin-bottom: 44rpx;
display: flex;
justify-content: space-between;
.title-item{
font-size: 32rpx;
font-weight: bold;
color: #282828;
margin-right: 32rpx;
position: relative;
>view{
position: relative;
z-index: 2;
padding: 0 16rpx;
}
&.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%);
}
}
}
.job-list{
width: 100%;
margin: 0 auto;
color: #333333;
border-radius: 24rpx;
background: #FFFFFF;
padding: 32rpx;
margin-bottom: 24rpx;
position: relative;
.sign{
position: absolute;
font-size: 24rpx;
right: 0;
top: 0;
padding: 4rpx 14rpx;
border: 1rpx solid #EC4827;
background: rgba(227, 79, 49, 0.09);
border-top-right-radius: 24rpx;
border-bottom-left-radius: 24rpx;
color: #EC4827;
}
.top-line{
display: flex;
justify-content: space-between;
font-size: 24rpx;
color: #A2A2A2;
margin-bottom: 16rpx;
.salary{
font-size: 32rpx;
color: #4C6EFB;
font-weight: bold;
}
}
.title{
font-size: 32rpx;
font-weight: bold;
color: #282828;
margin-bottom: 16rpx;
display: flex;
image{
width: 46rpx;
height: 46rpx;
margin-right: 11rpx;
}
}
.info{
font-size: 24rpx;
margin-bottom: 16rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.bottom-line{
display: flex;
justify-content: space-between;
font-size: 24rpx;
color: #A2A2A2;
margin-top: 12rpx;
}
}
.view-more-btn{
padding: 10rpx 56rpx;
background: #FFFFFF;
color: #4C6EFB;
border: 1rpx solid #4C6EFB;
text-align: center;
border-radius: 40rpx;
width: fit-content;
margin: 0 auto;
margin-bottom: 20rpx;
}
.person-list{
padding-top: 32rpx;
margin-bottom: 24rpx;
border-radius: 16rpx;
background: #FFFFFF;
.top-info{
padding: 0 32rpx;
margin-bottom: 24rpx;
display: flex;
image{
width: 86rpx;
height: 86rpx;
margin-right: 19rpx;
display: block;
}
.top-right{
flex-grow: 1;
flex-shrink: 1;
.name-line{
display: flex;
justify-content: space-between;
align-items: center;
.name{
font-size: 32rpx;
display: flex;
margin-right: 15rpx;
margin-bottom: 3rpx;
align-items: center;
.tag{
font-size: 24rpx;
line-height: 32rpx;
padding: 0 12rpx;
margin-left: 15rpx;
border-radius: 4rpx;
background: #4D89E3;
color: #fff;
}
}
.service-status{
color: #E0A61F;
font-weight: bold;
font-size: 26rpx;
}
}
.info-line{
padding: 0;
border: 0;
}
}
}
.info-line{
padding: 0 32rpx 32rpx;
color: #3D3D3D;
border-bottom: 1px solid #E8E8E8;
>view{
text{
color: #8E8E8E;
}
font-size: 26rpx;
}
}
.services{
line-height: 40rpx;
padding: 28rpx 32rpx;
display: flex;
>view{
flex-grow: 1;
font-size: 26rpx;
color: #1A62CE;
text-align: center;
&:first-child{
color: #E04020;
border-right: 1px solid #D8D8D8;
}
}
}
}
</style>

60
packageRc/pages/index/index.vue
View File

@@ -1,11 +1,12 @@
<!--
* @Date: 2025-10-16 15:15:47
* @LastEditors: shirlwang
* @LastEditTime: 2025-10-21 17:40:21
* @LastEditTime: 2025-10-22 09:54:53
-->
<template>
<!-- @scroll="handleScroll" @scrolltolower="scrollBottom" -->
<scroll-view :scroll-y="true" class="container" style="background-image: url('../../../packageRc/static/pageBg.png');">
<view style="padding: 40rpx 28rpx;">
<view class="kinggang">
<view>
<image src="../../../packageRc/static/kinggang1.png"/>
@@ -53,6 +54,27 @@
<view>青岛xx公司</view>
</view>
</view>
<view class="view-more-btn" @click="viewMore">查看更多内容</view>
<view class="titles" style="justify-content: space-between;">
<view class="title-item active"><view>政策专区</view></view>
<view>{{'查看更多 >'}}</view>
</view>
<view v-for="(item, index) in jobList" :key="index" class="job-list">
<view class="sign">推荐</view>
<view class="title">
<image src="../../../packageRc/static/zcLeft.png"/>
销售顾问</view>
<view class="infos">
<view>大专</view>
<view>1-3年</view>
<view>喀什 市南区</view>
</view>
<view class="bottom-line">
<view><uni-icons color="#A2A2A2" type="info" size="12"></uni-icons>发布日期：2025-10-20</view>
<view>浏览数<text style="color: #6AA7E8">99+</text></view>
</view>
</view>
</view>
</scroll-view>
</template>
@@ -66,6 +88,11 @@ function back() {
delta: 1
})
}
function viewMore() {
// uni.navigateTo({
// url: '/pages/jobList/jobList'
// })
}
</script>
<style lang="less" scoped>
@@ -74,7 +101,6 @@ view{box-sizing: border-box;display: block;}
background-color: #F4F4F4;background-position: top center;background-size: 100% auto;
height: 100vh;
min-width: 100vw;
padding: 40rpx 28rpx;
padding-bottom: 0;
background-repeat: no-repeat;
box-sizing: border-box;
@@ -158,6 +184,19 @@ view{box-sizing: border-box;display: block;}
background: #FFFFFF;
padding: 32rpx;
margin-bottom: 24rpx;
position: relative;
.sign{
position: absolute;
font-size: 24rpx;
right: 0;
top: 0;
padding: 4rpx 14rpx;
border: 1rpx solid #EC4827;
background: rgba(227, 79, 49, 0.09);
border-top-right-radius: 24rpx;
border-bottom-left-radius: 24rpx;
color: #EC4827;
}
.top-line{
display: flex;
justify-content: space-between;
@@ -175,6 +214,12 @@ view{box-sizing: border-box;display: block;}
font-weight: bold;
color: #282828;
margin-bottom: 16rpx;
display: flex;
image{
width: 46rpx;
height: 46rpx;
margin-right: 11rpx;
}
}
.infos{
display: flex;
@@ -196,4 +241,15 @@ view{box-sizing: border-box;display: block;}
margin-top: 12rpx;
}
}
.view-more-btn{
padding: 10rpx 56rpx;
background: #FFFFFF;
color: #4C6EFB;
border: 1rpx solid #4C6EFB;
text-align: center;
border-radius: 40rpx;
width: fit-content;
margin: 0 auto;
margin-bottom: 20rpx;
}
</style>

BIN
packageRc/static/personIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
packageRc/static/personIconFe.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
packageRc/static/sendManager.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
packageRc/static/trace.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 989 B

BIN
packageRc/static/zcLeft.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB