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

flat: 页面初始化

Browse Source
This commit is contained in:
史典卓
2024-11-18 16:33:37 +08:00
parent cf8fc80b20
commit ad4eb162a5
83 changed files with 8250 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
packageA/pages/UnitDetails/UnitDetails.vue Normal file
View File

@@ -0,0 +1,176 @@
<template>
<view class="container">
<!-- 单位基本信息 -->
<view class="company-header">
<text class="company-name">湖南沃森电器科技有限公司</text>
<view class="company-info">
<view class="location">
<uni-icons type="location-filled" color="#4778EC" size="24"></uni-icons>
青岛 青岛经济技术开发区
</view>
<text class="industry">制造业 100-299人</text>
</view>
</view>
<view class="hr"></view>
<!-- 单位介绍 -->
<view class="company-description">
<view class="section-title">单位介绍</view>
<text class="description">
我司在永磁同步电机行业技术优势明显：最高载频达24kHZ，最高运行频率3000HZ，最高运行转速达到180000rpm。
</text>
</view>
<!-- 在招职位 -->
<view class="job-list">
<text class="section-title">在招职位</text>
<view class="job-row" v-for="job in jobs" :key="job.id">
<view class="left">
<text class="job-title">{{ job.title }}</text>
<view class="job-tags">
<view class="tag" v-for="tag in job.tags" :key="tag">{{ tag }}</view>
</view>
<text class="location">{{ job.location }}</text>
</view>
<view class="right">
<text class="salary">{{ job.salary }}</text>
<text class="hot" v-if="job.hot">🔥</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
jobs: [
{
id: 1,
title: '销售工程师-高级销售经理',
tags: ['本科', '3-5年', '15人', '本科', '3-5年', '15人'],
company: '湖南沃森电气科技有限公司',
location: '青岛 青岛经济技术开发区',
salary: '1万-2万',
hot: true,
},
{
id: 2,
title: '销售工程师-初级销售经理',
tags: ['本科', '3-5年', '15人'],
company: '湖南沃森电气科技有限公司',
location: '青岛 青岛经济技术开发区',
salary: '5千-1万',
hot: true,
},
{
id: 3,
title: '销售助理',
tags: ['大专', '3-5年', '20人'],
company: '湖南沃森电气科技有限公司',
location: '青岛 青岛经济技术开发区',
salary: '5千-8千',
},
{
id: 4,
title: '销售客服',
tags: ['大专', '3-5年', '50人'],
company: '湖南沃森电气科技有限公司',
location: '青岛 青岛经济技术开发区',
salary: '5千-8千',
},
],
};
},
};
</script>
<style lang="stylus">
.container
display flex
flex-direction column
background-color #f8f8f8
.hr
height: 10rpx;
.company-header
padding 20rpx 40rpx
background-color #fff
.company-name
font-size 56rpx
font-weight bold
color #333
margin-bottom 10rpx
.company-info
font-size 24rpx
color #666
display flex
align-items center
justify-content space-between
.location
display flex
align-items center
.company-description
padding 20rpx 40rpx
background-color #fff
margin-bottom 10rpx
.section-title
font-size 42rpx
font-weight bold
margin-bottom 10rpx
.description
font-size 24rpx
color #333
line-height 36rpx
.job-list
padding 20rpx 40rpx
background-color #fff
.section-title
font-size 42rpx
font-weight bold
margin-bottom 10rpx
.job-row
display flex
justify-content space-between
align-items flex-start
padding 20rpx
border 2rpx solid #D9D9D9
margin-top 20rpx
border-radius 17rpx 17rpx 17rpx 17rpx
.left
display flex
flex-direction column
flex-grow 1
.job-title
font-size 28rpx
font-weight bold
color #333
margin-bottom 10rpx
.job-tags
display flex
gap 10rpx
margin-bottom 10rpx
.tag
background-color #22c55e
color #fff
padding 5rpx 10rpx
border-radius 12rpx
font-size 20rpx
.location
font-size 24rpx
color #666
.right
display flex
flex-direction column
align-items flex-end
.salary
font-size 28rpx
color #3b82f6
font-weight bold
.hot
color #ff6b6b
font-size 24rpx
margin-top 5rpx
</style>

88
packageA/pages/choiceness/choiceness.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<view class="container">
<!-- 搜索栏 -->
<view class="search-bar">精选企业</view>
<!-- 格子布局 -->
<view class="grid-container">
<view class="grid-item blue">
<text class="title">事业单位</text>
<view class="status">已关注 ✓</view>
</view>
<view class="grid-item green">
<text class="title">银行招聘</text>
<view class="status">特别关注</view>
</view>
<view class="grid-item orange">
<text class="title">世界500强</text>
<view class="status">特别关注</view>
</view>
<view class="grid-item red">
<text class="title">中国500强</text>
<view class="status">特别关注</view>
</view>
</view>
</view>
</template>
<style lang="stylus" scoped>
/* 页面整体样式 */
.container
background-color #edf4ff
height 100%
display flex
flex-direction column
padding 20rpx
/* 搜索栏样式 */
.search-bar
font-size 32rpx
font-weight bold
color #333
margin-bottom 20rpx
/* 格子布局样式 */
.grid-container
display flex
flex-wrap wrap
justify-content space-between
gap 20rpx
.grid-item
width 48%
height 200rpx
border-radius 20rpx
display flex
flex-direction column
justify-content center
align-items center
color #fff
font-size 28rpx
font-weight bold
position relative
.status
position absolute
bottom 20rpx
font-size 24rpx
background-color rgba(255, 255, 255, 0.9)
color #333
padding 5rpx 15rpx
border-radius 15rpx
/* 每种格子对应的颜色 */
.blue
background-color #3b82f6
.green
background-color #22c55e
.orange
background-color #f59e0b
.red
background-color #ef4444
</style>

147
packageA/pages/exhibitors/exhibitors.vue Normal file
View File

@@ -0,0 +1,147 @@
<template>
<view class="container">
<!-- 招聘会详情标题 -->
<view class="header">
<text class="header-title">2024年春季青岛市商贸服务业招聘会</text>
<view class="header-info">
<view class="location">
<uni-icons type="location-filled" color="#4778EC" size="24"></uni-icons>
青岛 市南区延安三路105号
</view>
<text class="date">2024年7月31日 周三</text>
</view>
</view>
<!-- 参会单位列表 -->
<view class="company-list">
<text class="section-title">参会单位</text>
<view class="company-row" v-for="company in companies" :key="company.id">
<view class="left">
<view class="logo" :class="'logo-' + company.id">{{ company.id }}</view>
<view class="company-info">
<text class="company-name line_2">{{ company.name }}</text>
<text class="industry">{{ company.industry }}</text>
<view class="details">
<text>查看详情</text>
<uni-icons type="star" size="26"></uni-icons>
<!-- <uni-icons type="star-filled" color="#FFCB47" size="26"></uni-icons> -->
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
companies: [
{
id: 1,
name: '湖南沃森电器科技有限公司',
industry: '制造业 100-299人',
},
{
id: 2,
name: '青岛成达汽车销售集团',
industry: '制造业 100-299人',
},
{
id: 3,
name: '青岛日森电器有限公司',
industry: '制造业 100-299人',
},
{
id: 4,
name: '青岛融合网络通信有限公司',
industry: '制造业 100-299人',
},
],
};
},
};
</script>
<style lang="stylus" scoped>
.container
display flex
flex-direction column
background-color #f8f8f8
.header
padding 20rpx 40rpx
background-color #fff
.header-title
font-size 56rpx
font-weight bold
color #333
margin-bottom 10rpx
.header-info
margin-top: 20rpx
font-size 24rpx
color #666
display flex
align-items center
justify-content space-between
.location
display flex
align-items center
.date
flex-shrink 0
.company-list
padding 20rpx
background-color #fff
margin-top 10rpx
.section-title
padding 20rpx
font-size 40rpx
font-weight bold
margin-bottom 10rpx
.company-row
display flex
justify-content space-between
align-items center
padding 20rpx
border 2rpx solid #D9D9D9
margin-top 20rpx
border-radius 17rpx 17rpx 17rpx 17rpx
.left
display flex
align-items center
width: 100%
height: 100%
.logo
background-color #22c55e
color #fff
font-size 24rpx
font-weight bold
width: 235rpx;
height: 164rpx;
display flex
align-items center
justify-content center
border-radius 12rpx
margin-right 20rpx
.company-info
min-height 164rpx
flex 1
display flex
flex-direction column
justify-content space-between
.company-name
font-size 28rpx
color #333
font-weight bold
.industry
font-size 24rpx
color #666
.details
font-size 24rpx
color #666
display flex
align-items center
justify-content space-between
</style>

206
packageA/pages/myResume/myResume.vue Normal file
View File

@@ -0,0 +1,206 @@
<template>
<view class="container">
<!-- 头部信息 -->
<view class="header">
<view class="avatar"></view>
<view class="info">
<view class="name-row">
<text class="name">用户姓名</text>
<!-- <view class="edit-icon"></view> -->
</view>
<text class="details">男 23岁</text>
</view>
</view>
<!-- 简历信息 -->
<view class="resume-info">
<view class="info-card">
<view class="card-content">
<text class="label">出生年月：</text>
<text class="value">2001/01/01</text>
</view>
<view class="card-content">
<text class="label">学历：</text>
<text class="value">2001/01/01</text>
</view>
<view class="card-content">
<text class="label">政治面貌：</text>
<text class="value">2001/01/01</text>
</view>
<view class="card-content">
<text class="label">联系方式：</text>
<text class="value">2001/01/01</text>
</view>
<view class="edit-icon">
<image class="img" src="../../../static/icon/edit.png"></image>
</view>
</view>
</view>
<!-- 期望职位 -->
<view class="resume-info">
<view class="info-card">
<view class="card-content">
<text class="label">期望职位：</text>
<view class="value">
<view>销售工程师</view>
<view>销售工程师</view>
<view>销售工程师</view>
<view>销售工程师</view>
</view>
</view>
<view class="edit-icon">
<image class="img" src="../../../static/icon/edit.png"></image>
</view>
</view>
</view>
<!-- 期望薪资 -->
<view class="resume-info">
<view class="info-card">
<view class="card-content">
<text class="label">期望薪资：</text>
<view class="value">8-10k</view>
</view>
<view class="edit-icon">
<image class="img" src="../../../static/icon/edit.png"></image>
</view>
</view>
</view>
<!-- 期望工作地 -->
<view class="resume-info">
<view class="info-card">
<view class="card-content">
<text class="label long">期望工作地：</text>
<view class="value">青岛-青岛经济技术开发区</view>
</view>
<view class="edit-icon">
<image class="img" src="../../../static/icon/edit.png"></image>
</view>
</view>
</view>
<!-- 上传按钮 -->
<view class="upload-btn">
<button class="btn">
<uni-icons type="cloud-upload" size="30" color="#FFFFFF"></uni-icons>
上传简历
</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style lang="stylus" scoped>
.container
width: 100%;
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
display: flex;
flex-direction: column;
align-items center
.header
display flex
align-items center
padding 30rpx 60rpx
width calc(100% - 120rpx)
border-radius 0 0 20rpx 20rpx
.avatar
width 100rpx
height 100rpx
background-color #ccc
border-radius 50%
margin-right 20rpx
.info
display flex
flex-direction column
.name-row
display flex
align-items center
.name
font-size 36rpx
font-weight bold
color #fff
.edit-icon
width 30rpx
height 30rpx
background-color #fff
border-radius 50%
margin-left 10rpx
.details
font-size 24rpx
color #dbeafe
.resume-info
padding: 0 26rpx
width calc(100% - 52rpx)
margin-top 20rpx
.info-card
display flex
flex-direction: column
justify-content space-between
align-items center
color #fff
padding 10rpx 24rpx
border-radius 12rpx
margin-bottom 10rpx
background: #4778EC;
box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
border-radius: 17rpx 17rpx 17rpx 17rpx;
position: relative
.card-content
width: 100%
display flex
line-height: 58rpx
margin-top 16rpx
.label
width 160rpx
height: 32rpx
font-size 28rpx
color #FFFFFF
text-align:justify;
margin-right: 20rpx
.long
width 180rpx
margin-right: 0rpx
.label:after
content: '';
display: inline-block;
width: 100%;
.value
font-size: 28rpx;
color: #FFFFFF;
.card-content:first-child
margin-top 0
.edit-icon
position: absolute
right: 40rpx
top: 20rpx
width 40rpx
height 40rpx
.img
width: 100%
height: 100%
.upload-btn
margin-top 20rpx
.btn
display: flex
align-items: center
box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
height 80rpx
background-color #22c55e
color #fff
font-size 28rpx
font-weight bold
border-radius 20rpx
</style>

146
packageA/pages/post/post.vue Normal file
View File

@@ -0,0 +1,146 @@
<template>
<view class="container">
<view class="job-header">
<view class="job-title">销售工程师-高级销售经理</view>
<view class="job-info">
<text class="salary">1万-2万/月</text>
<text class="views">1024浏览</text>
</view>
<view class="location-info">
<text class="location">📍 青岛 青岛经济技术开发区</text>
<text class="date">2022.1.3</text>
<view class="source">来源 智联招聘</view>
</view>
</view>
<view class="job-details">
<text class="details-title">职位详情</text>
<view class="tags">
<view class="tag">本科</view>
<view class="tag">3-5年</view>
</view>
<view class="description">
（我司在永磁同步电机行业技术优势明显：最高载频24kHZ，最高运行频率3000HZ，最高运行转速180000rpm。）职责：
<br />
1、结合公司业务优势，深挖行业大客户需求，为客户提供针对性的营销解决方案；
<br />
2、有丰富的项目落地执行经验；
<br />
3、做好应收款控制与管理。
<br />
要求：
<br />
1、统招本科以上学历，电气相关专业；
<br />
2、有3年以上从事变频器或相关经验者优先。
<br />
</view>
</view>
<view class="company-info" @click="navTo('/packageA/pages/UnitDetails/UnitDetails')">
<view class="company-name">湖南沃森电气科技有限公司</view>
<view class="company-details">制造业 100-299人 单位详情</view>
</view>
<view class="footer">
<button class="apply-btn">立即申请</button>
<view class="falls-card-matchingrate">
<uni-icons type="star" size="40"></uni-icons>
<!-- <uni-icons type="star-filled" color="#FFCB47" size="40"></uni-icons> -->
</view>
</view>
</view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
const { $api, navTo } = inject('globalFunction');
</script>
<style lang="stylus" scoped>
.container
display flex
flex-direction column
background-color #f8f8f8
.job-header
padding 20rpx 40rpx
background-color #ffffff
margin-bottom 10rpx
.job-title
font-size 55rpx
font-weight bold
color #333
margin-bottom 10rpx
.job-info
display flex
justify-content space-between
margin-bottom 10rpx
.salary
color #3b82f6
font-size 42rpx
font-weight bold
.views
font-size 24rpx
color #999
.location-info
font-size 24rpx
color #666
.location, .source, .date
margin-right 10rpx
margin-top: 20rpx
.source
margin-left: 30rpx;
.job-details
background-color #fff
padding 20rpx 40rpx
margin-bottom 10rpx
.details-title
font-size 41rpx
font-weight bold
margin-bottom 15rpx
.tags
display flex
gap 10rpx
margin 15rpx 0
.tag
background-color #3b82f6
color #fff
padding 5rpx 15rpx
border-radius 15rpx
font-size 22rpx
.description
font-size 24rpx
line-height 36rpx
color #333
.company-info
background-color #fff
padding 20rpx 40rpx
margin-bottom 10rpx
.company-name
font-size 28rpx
font-weight bold
margin-bottom 10rpx
.company-details
font-size 24rpx
color #666
.footer
position fixed
bottom calc(var(--status-bar-height) + var(--window-bottom))
left 0
width calc(100% - 40rpx)
padding 20rpx
background-color #fff
text-align center
display flex
align-items: center
.apply-btn
flex: 1
background-color #22c55e
color #fff
border-radius 30rpx
font-size 32rpx
margin-right: 30rpx
</style>