soleilw
/
job-pc
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

commit

test
Soleilw 1 year ago
parent
3f59cd85d2
commit
e4c1095c35
14 changed files with 986 additions and 296 deletions
Split View Show Diff Stats
  1. 104
    0
      src/components/job/list/index.vue
  2. 96
    0
      src/components/job/search/index.vue
  3. 136
    97
      src/components/layout/index.vue
  4. 79
    0
      src/components/layout/swiper/index.vue
  5. 59
    0
      src/components/layout/tabs/index.vue
  6. 7
    159
      src/router/dynamic.ts
  7. 2
    38
      src/router/routerList.ts
  8. 21
    1
      src/router/routes.ts
  9. 7
    1
      src/style.css
  10. 288
    0
      src/views/home/hot/index.vue
  11. 15
    0
      src/views/home/index.vue
  12. 88
    0
      src/views/home/job/index.vue
  13. 76
    0
      src/views/home/swiper/index.vue
  14. 8
    0
      src/views/job/index.vue

+ 104
- 0
src/components/job/list/index.vue View File

@@ -0,0 +1,104 @@
<template>
<!-- <div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 36px;">精选职位</div> -->
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="最新招聘">
<a-row :gutter="[10,10]">
<a-col span="8" v-for="(item, index) in companyList">
<div class="job-box">
<div class="job-title">
<div class="aaaa mt10">
<div>前端工程师</div>
<div>5000-7000元</div>
</div>
<div>
<a-tag>Tag 1</a-tag>
<a-tag>Tag 1</a-tag>
<a-tag>Tag 1</a-tag>
<a-tag>Tag 1</a-tag>
</div>
</div>
<div class="job-company">
<div class="aaaa mt10">
<div>中山市海港城安域有限公司</div>
<div>查看更多</div>
</div>
<div>
小榄镇
</div>
</div>
</div>
</a-col>
</a-row>
<div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 24px;">查看更多</div>
</a-tab-pane>
<a-tab-pane key="2" tab="急招职位" force-render>Content of Tab Pane 2</a-tab-pane>
<a-tab-pane key="3" tab="高薪职位">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="3" tab="校园招聘">Content of Tab Pane 3</a-tab-pane>
</a-tabs>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
let companyList = ref<object[]>([{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}])
let data1 = ref([])
let data2 = ref([])
let showData = ref(false)
onMounted(() => {
if (companyList.value.length > 9) {
companyList.value = companyList.value.slice(0, 9)
} else {
data1.value = companyList.value;
showData.value = false;
}
})
</script>

<style lang="less" scoped>
.job-box {
display: flex;
flex-direction: column;
justify-content: space-around;
// align-items: center;
width: 100%;
.job-title {
padding: 20px;
background-color: #ffffff;
.aaaa {
display: flex;
justify-content: space-between;
}
}
.job-company {
padding: 20px;
background-color: #cccccc;
.aaaa {
display: flex;
justify-content: space-between;
}
}

}

.mt10 {
margin-bottom: 10px;
}

:slotted(.ant-tabs-nav-wrap) {
width: 100%;
flex: none !important;
justify-content: center !important;
}
:slotted(.ant-tabs-nav) {
background-color: #fff;
}

</style>

+ 96
- 0
src/components/job/search/index.vue View File

@@ -0,0 +1,96 @@
<template>
<a-row :gutter="[10,16]" type="flex" justify="center">
<a-col span="18">
<a-input v-model:value="value2" placeholder="请输入关键字">
<template #addonBefore>
<a-select v-model:value="value3" style="width: 90px">
<a-select-option value="Http://">Http://</a-select-option>
<a-select-option value="Https://">Https://</a-select-option>
</a-select>
</template>
<template #addonAfter>
<div style="padding: 0 20px;">
搜索
</div>
</template>
</a-input>
</a-col>
<a-col span="24">
<div style="width: 100%; background-color: #fff;padding: 16px;">
<a-form>
<a-form-item label="工作地区">
<a-checkable-tag v-model:checked="checked1" @change="handleChange">不限</a-checkable-tag>
<a-checkable-tag v-model:checked="checked1" @change="handleChange">小榄镇</a-checkable-tag>
<a-checkable-tag v-model:checked="checked1" @change="handleChange">永远</a-checkable-tag>
<a-checkable-tag v-model:checked="checked1" @change="handleChange">不限</a-checkable-tag>
</a-form-item>
<a-form-item label="职位性质">
<a-checkable-tag v-model:checked="checked" @change="handleChange">全职</a-checkable-tag>
<a-checkable-tag v-model:checked="checked" @change="handleChange">兼职</a-checkable-tag>
<a-checkable-tag v-model:checked="checked" @change="handleChange">临时</a-checkable-tag>
<a-checkable-tag v-model:checked="checked" @change="handleChange">实习</a-checkable-tag>
<a-checkable-tag v-model:checked="checked" @change="handleChange">校园招聘</a-checkable-tag>
</a-form-item>
<a-form-item label="年龄要求">
<a-checkable-tag v-model:checked="checked" @change="handleChange">全职</a-checkable-tag>
<a-checkable-tag v-model:checked="checked" @change="handleChange">兼职</a-checkable-tag>
<a-checkable-tag v-model:checked="checked" @change="handleChange">临时</a-checkable-tag>
<a-checkable-tag v-model:checked="checked" @change="handleChange">实习</a-checkable-tag>
<a-checkable-tag v-model:checked="checked" @change="handleChange">校园招聘</a-checkable-tag>
</a-form-item>
<a-form-item label="其他条件">
<a-row :gutter="[8,10]">
<a-col span="2">
<a-cascader v-model:value="cascaderValue" :options="options" size="small" />
</a-col>
<a-col span="2">
<a-cascader v-model:value="cascaderValue" :options="options" size="small" />
</a-col>
<a-col span="2">
<a-cascader v-model:value="cascaderValue" :options="options" size="small" />
</a-col>
<a-col span="2">
<a-cascader v-model:value="cascaderValue" :options="options" size="small" />
</a-col>
<a-col span="2">
<a-cascader v-model:value="cascaderValue" :options="options" size="small" />
</a-col>
<a-col span="2">
<a-cascader v-model:value="cascaderValue" :options="options" size="small" />
</a-col>
<a-col span="2">
<a-cascader v-model:value="cascaderValue" :options="options" size="small" />
</a-col>
<a-col span="2">
<a-cascader v-model:value="cascaderValue" :options="options" size="small" />
</a-col>
<a-col span="2">
<a-cascader v-model:value="cascaderValue" :options="options" size="small" />
</a-col>
<a-col span="2">
<a-cascader v-model:value="cascaderValue" :options="options" size="small" />
</a-col>
</a-row>
</a-form-item>
</a-form>
</div>
</a-col>
</a-row>

</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import { SettingOutlined } from '@ant-design/icons-vue';

let value3 = ref('全部')
let cascaderValue = ref('职位类别')
let value = ref('行业类别')
let checked1 = ref(true)
</script>

<style lang="less" scoped>
/deep/ .ant-form-item {
margin-bottom: 0;
}
</style>

+ 136
- 97
src/components/layout/index.vue View File

@@ -1,137 +1,176 @@
<template>
<div style="min-height: 100vh;">
<a-layout class="layout" style="width: 100%; display: flex;align-items: center;justify-items: center;">
<a-layout-header style="position: fixed; z-index: 99; width: calc(100% - 600px);">
<div class="logo" />
<a-menu theme="dark" mode="horizontal" v-model:selectedKeys="selectedKeys"
:style="{ lineHeight: '64px' }">
<a-menu-item key="1">首页</a-menu-item>
<a-menu-item key="2">求职招聘</a-menu-item>
<a-menu-item key="3">关于菊城人才</a-menu-item>
<a-sub-menu>
<template #icon>
<setting-outlined />
</template>
<template #title>Navigation Three - Submenu</template>
<a-menu-item-group title="Item 1">
<a-menu-item key="setting:1">Option 1</a-menu-item>
<a-menu-item key="setting:2">Option 2</a-menu-item>
</a-menu-item-group>
<a-menu-item-group title="Item 2">
<a-menu-item key="setting:3">Option 3</a-menu-item>
<a-menu-item key="setting:4">Option 4</a-menu-item>
</a-menu-item-group>
</a-sub-menu>
<a-menu-item key="1">法律咨询</a-menu-item>
<a-menu-item key="2">人才导师</a-menu-item>
<a-menu-item key="3">专家组</a-menu-item>
<a-menu-item key="2">培训列表</a-menu-item>
<a-menu-item key="3">党群关系</a-menu-item>
<a-menu-item key="3">新闻中心</a-menu-item>
</a-menu>
<a-layout-header style="position: fixed; z-index: 99;background: #000;width: 100%;">
<a-row type="flex" justify="center">
<a-col span="18">
<a-row>
<a-col span="4">
<div class="logo" />
</a-col>
<a-col span="16">
<a-menu theme="dark" mode="horizontal" v-model:selectedKeys="selectedKeys"
:style="{ lineHeight: '64px' }">
<a-menu-item>首页</a-menu-item>
<a-menu-item @click="toRouter">求职招聘</a-menu-item>
<a-sub-menu>
<template #title>关于菊城人才</template>
<a-menu-item-group title="Item 1">
<a-menu-item key="setting:1">Option 1</a-menu-item>
<a-menu-item key="setting:2">Option 2</a-menu-item>
</a-menu-item-group>
<a-menu-item-group title="Item 2">
<a-menu-item key="setting:3">Option 3</a-menu-item>
<a-menu-item key="setting:4">Option 4</a-menu-item>
</a-menu-item-group>
</a-sub-menu>
<a-menu-item key="1">法律咨询</a-menu-item>
<a-menu-item key="2">人才导师</a-menu-item>
<a-menu-item key="3">专家组</a-menu-item>
<a-menu-item key="2">培训列表</a-menu-item>
<a-menu-item key="3">党群关系</a-menu-item>
<a-menu-item key="3">新闻中心</a-menu-item>
</a-menu>
</a-col>
<a-col span="4">
<div
style="display: flex;flex-direction: column;align-items: flex-end;justify-content: center;">
登录/注册</div>
</a-col>
</a-row>
</a-col>
</a-row>
</a-layout-header>
<a-layout-content style="padding: 0 50px">
<router-view></router-view>
<!-- <layout-swiper ></layout-swiper> -->
<layout-tabs></layout-tabs>
<a-layout-content>
<div>
<a-row type="flex" justify="center">
<a-col span="18">
<router-view></router-view>
</a-col>
</a-row>
</div>
</a-layout-content>
<a-layout-footer>
<a-row gutter="20" type="flex" justify="space-between">
<a-col span="8">
<a-row gutter="20">
<a-col sapn="12">
<!-- <a-layout-footer>
<a-row type="flex" justify="center">
<a-col span="18">
<a-row gutter="20" type="flex" justify="space-between">
<a-col span="8">
<a-row gutter="20">
<a-col sapn="12">
<div style="display: flex;flex-direction: column;align-items: flex-start;">
<div>关于我们</div>
<div style="display: flex;flex-direction: column;">
<div>关于我们</div>
<div>联系方式</div>
<div>公司地图</div>
<div>关于我们</div>
<div>收费方式</div>
<div>汇款方式</div>
</div>
</div>
</a-col>
<a-col sapn="12">
<div
style="display: flex;flex-direction: column;align-items: flex-start;justify-content: center;">
<div>快速注册</div>
<div style="display: flex;flex-direction: column;">
<div>单位用户注册</div>
<div>个人用户注册</div>
</div>
</div>
</a-col>
</a-row>
<a-row style="margin-top: 30px;">
<a-col sapn="24">
<a-typography-paragraph style="font-size: 12px; text-align: left;"
content="中山求职 招聘 到菊城人才网 本网站实名:中山市菊城人才网" />
<a-typography-paragraph style="font-size: 12px; text-align: left;"
content="邮编:zsjcjob@163.com 传真号码:0760-22236922 0760-22236026" />
<a-typography-paragraph style="font-size: 12px; text-align: left;"
content="Copyright@2002-2024 菊城人才网 All Right Reserved 粤ICP备05092134号" />
</a-col>
</a-row>
</a-col>
<a-col span="4">
<div style="display: flex;flex-direction: column;align-items: flex-start;">
<div>关于我们</div>
<div style="display: flex;flex-direction: column;">
<div>关于我们</div>
<div>联系方式</div>
<div>公司地图</div>
<div>关于我们</div>
<div>收费方式</div>
<div>汇款方式</div>
<div>上班时间</div>
<div style="display: flex;flex-direction: column;align-items: flex-start;">
<div>星期一至星期五：8:30-17:30</div>
<div>星期六：9:00-16:00</div>
</div>
</div>
</a-col>
<a-col sapn="12">
<div style="display: flex;flex-direction: column;align-items: flex-start;justify-content: center;">
<div>快速注册</div>
<div style="display: flex;flex-direction: column;">
<div>单位用户注册</div>
<div>个人用户注册</div>
<a-col span="8">
<div
style="display: flex;flex-direction: column;align-items: flex-end;justify-content: space-between;height: 100%;">
<div style="display: flex;flex-direction: column;align-items: flex-start;">
<div>联系电话</div>
<div>0760-22236225、22236226</div>
<div>0760-22236225、22236226</div>
</div>
<div style="display: flex;flex-direction: column;align-items: center;">
<a-image :width="100"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
<div>官方公众号</div>
</div>
</div>
</a-col>
</a-row>
<a-row style="margin-top: 30px;">
<a-col sapn="24">
<a-typography-paragraph style="font-size: 12px; text-align: left;"
content="中山求职 招聘 到菊城人才网 本网站实名:中山市菊城人才网" />
<a-typography-paragraph style="font-size: 12px; text-align: left;"
content="邮编:zsjcjob@163.com 传真号码:0760-22236922 0760-22236026" />
<a-typography-paragraph style="font-size: 12px; text-align: left;"
content="Copyright@2002-2024 菊城人才网 All Right Reserved 粤ICP备05092134号" />
</a-col>
</a-row>
</a-col>
<a-col span="4">
<div style="display: flex;flex-direction: column;align-items: flex-start;">
<div>上班时间</div>
<div style="display: flex;flex-direction: column;align-items: flex-start;">
<div>星期一至星期五：8:30-17:30</div>
<div>星期六：9:00-16:00</div>
</div>
</div>
</a-col>
<a-col span="8">
<div style="display: flex;flex-direction: column;align-items: flex-end;justify-content: space-between;height: 100%;">
<!-- <div style="display: flex;flex-direction: column;align-items: flex-start;"> -->
<div>联系电话</div>
<div>0760-22236225、22236226</div>
<div>0760-22236225、22236226</div>
<!-- </div> -->
<div style="display: flex;flex-direction: column;align-items: center;">
<a-image
:width="100"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
<div>官方公众号</div>
</div>
</div>
</a-col>
</a-row>
</a-layout-footer>

</a-layout-footer> -->
</a-layout>
</div>

</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { store } from '@/store';
import { router } from '@/router';
import LayoutSwiper from '@/components/layout/swiper/index.vue'
import LayoutTabs from '@/components/layout/tabs/index.vue'
// import ASider from './sider/aSider.vue';
import AHeader from './header/aHeader.vue';
import { MenuUnfoldOutlined, MenuFoldOutlined, } from '@ant-design/icons-vue';

const collapsed = computed(() => {
return store.state.collapsed
})

const onBreakpoint = (broken : boolean) => {
console.log(broken);
const toRouter = () => {
router.push('/job')
}
</script>
<style lang="less">
::-webkit-scrollbar {
/* 设置滚动条宽度 */
width: 0px;
}
.logo {
float: left;
width: 120px;
height: 31px;
margin: 16px 24px 16px 0;
background: rgba(255, 255, 255, 0.3);
margin: 16px 34px 16px 0;
background: #000;
}
.ant-layout-content {
width: 100%;
padding-inline: 50px;
overflow-y: auto;
background-color: #f0f0f0 !important;
div {
padding: 30px 0;
}
}

.ant-layout-footer {
position: fixed;
bottom: 0;
z-index: 99;
width: calc(100% - 600px);
// position: absolute;
// bottom: 0;
// z-index: 99;
// padding: 30px;
width: 100%;
background-color: #cccccc !important;
color: #fff !important;
}

+ 79
- 0
src/components/layout/swiper/index.vue View File

@@ -0,0 +1,79 @@
<template>
<div class="aaa">
<a-image width="100vw" height="46vh"
src="https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr" style="border-bottom: 1px saddlebrown
solid;"/>
</div>
<div class="content">
<a-row type="flex" justify="center">
<a-col span="18">
<a-row type="flex" justify="end">
<a-col span="5">
<div class="login-box">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="我要找工作">
<a-row :gutter="[0, 16]">
<a-col span="24">
<a-input v-model:value="value" placeholder="账号" />
</a-col>
<a-col span="24">
<a-input v-model:value="value" placeholder="密码" />
</a-col>
<a-col span="24">
<a-input v-model:value="value" placeholder="验证码" />
</a-col>
<a-col span="24">
<a-button type="primary" block>登录/注册</a-button>
</a-col>
<a-col span="24">
忘记密码？
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane key="2" tab="我要招聘" force-render>我要招聘</a-tab-pane>
</a-tabs>
</div>
</a-col>
</a-row>
</a-col>
</a-row>
</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
</script>

<style lang="less">
.aaa {
position: relative;
}

.content {
// display: none;
position: absolute;
top: 94px;
left: 0;
right: 0;
bottom: 30px;
height: 46vh;
padding-inline: 50px;
}

.login-box {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 30px;
border-radius: 10px;
background-color: aliceblue;
}
.ant-tabs-nav-wrap {
flex: none !important;
}
.ant-tabs-nav {
justify-content: center !important;
}
</style>

+ 59
- 0
src/components/layout/tabs/index.vue View File

@@ -0,0 +1,59 @@
<template>
<div class="tabs-content">
<a-row type="flex" justify="center">
<a-col span="24">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="求职招聘">Content of Tab Pane 1</a-tab-pane>
<a-tab-pane key="2" tab="个人求职">
<div style="padding-inline: 50px;">
<a-row type="flex" justify="center">
<a-col span="18">
<job-search></job-search>
<job-list></job-list>
</a-col>
</a-row>
</div>
</a-tab-pane>
<a-tab-pane key="3" tab="企业招聘">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="3" tab="家政">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="3" tab="招聘会">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="3" tab="职场资讯">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="3" tab="下载专区">Content of Tab Pane 3</a-tab-pane>
</a-tabs>
</a-col>
</a-row>
</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import JobSearch from '@/components/job/search/index.vue'
import JobList from '@/components/job/list/index.vue'

let activeKey = ref('2')
</script>

<style lang="less" scoped>
.tabs-content {
position: absolute;
top: 64px;
width: 100%;
// background-color: #f0f0f0;
// padding-inline: 50px;
}

::v-deep(.ant-tabs-nav-wrap) {
width: 100%;
flex: none !important;
justify-content: center !important;
}

::v-deep(.ant-tabs-nav) {
background-color: #fff;
}


.ant-tabs-content-holder {
background-color: #f0f0f0 !important;
}
</style>

+ 7
- 159
src/router/dynamic.ts View File

@@ -3,168 +3,16 @@ import { HomeOutlined } from '@ant-design/icons-vue';
import { routerList } from './routerList';

// 权限管理
const PermissionRoute : AppRouteRecordRaw = {
path: '/permission',
name: 'permission',
component: routerList.Permission,
const HomeRoute : AppRouteRecordRaw = {
path: '/home',
name: 'home',
component: routerList.Home,
meta: {
title: '权限管理',
title: '首页',
icon: HomeOutlined
},
children: [
{
path: '/role',
name: 'role',
component: routerList.ROLE,
meta: {
title: '角色管理',
icon: HomeOutlined
}
},
{
path: '/account',
name: 'account',
component: routerList.Account,
meta: {
title: '账号管理',
icon: HomeOutlined
}
},
{
path: '/permission/list',
name: 'list',
component: routerList.List,
meta: {
title: '权限管理',
icon: HomeOutlined
}
}
]
};


// 企业相关
const CompanyRoute : AppRouteRecordRaw = {
path: '/company',
name: 'company',
component: routerList.Company,
meta: {
title: '企业管理',
icon: HomeOutlined
},
children: [{
path: '/member',
name: 'member',
component: routerList.Member,
meta: {
title: '企业列表',
icon: HomeOutlined
},
},
{
path: '/vip',
name: 'vip',
component: routerList.Vip,
meta: {
title: 'VIP管理',
icon: HomeOutlined
},
},
{
path: '/job',
name: 'job',
component: routerList.Job,
meta: {
title: '职位管理',
icon: HomeOutlined
},
},
{
path: '/department',
name: 'department',
component: routerList.Department,
meta: {
title: '部门管理',
icon: HomeOutlined
},
},
]
};

// 求职者管理
const JokSeekerRoute : AppRouteRecordRaw = {
path: '/job-seeker',
name: 'jobSeeker',
component: routerList.JobSeeker,
meta: {
title: '求职者管理',
icon: HomeOutlined
},
children: [
{
path: '/resume',
name: 'jobResume',
component: routerList.JobResume,
meta: {
title: '简历列表',
icon: HomeOutlined
},
},
]
};

// 招聘会管理
const JokFairRoute : AppRouteRecordRaw = {
path: '/job-fair',
name: 'jobFair',
component: routerList.JokFair,
meta: {
title: '招聘会管理',
icon: HomeOutlined
},
children: [
{
path: '/job/fair/list',
name: 'jobFairList',
component: routerList.JobList,
meta: {
title: '招聘会列表',
icon: HomeOutlined
},
},
]
};

// 资讯管理
const InformationRoute : AppRouteRecordRaw = {
path: '/information',
name: 'information',
component: routerList.Information,
meta: {
title: '资讯管理',
icon: HomeOutlined
},
children: [
{
path: '/section',
name: 'section',
component: routerList.InformationSection,
meta: {
title: '栏目/频道',
icon: HomeOutlined
},
},
{
path: '/article',
name: 'article',
component: routerList.InformationArticle,
meta: {
title: '文章列表',
icon: HomeOutlined
},
}
],
};

export const routesModuleList : AppRouteModule[] = [CompanyRoute, JokSeekerRoute, JokFairRoute, InformationRoute, PermissionRoute];

export const routesModuleList : AppRouteModule[] = [HomeRoute];

+ 2
- 38
src/router/routerList.ts View File

@@ -1,42 +1,6 @@
import Permission from '@/views/permission/index.vue';
import ROLE from '@/views/permission/role/index.vue';
import Account from '@/views/permission/account/index.vue';
import List from '@/views/permission/list/index.vue';
// 企业管理
import Company from '@/views/company/index.vue';
import Department from '@/views/company/department/index.vue';
import Job from '@/views/company/position/index.vue';
import Member from '@/views/company/list/index.vue';
import Vip from '@/views/company/vip/index.vue';
import Home from '@/views/home/index.vue';

// 求职者管理
import JobSeeker from '@/views/jobSeeker/index.vue';
import JobResume from '@/views/jobSeeker/resume/index.vue';

// 招聘会管理
import JobFair from '@/views/jobFair/index.vue';
import JobList from '@/views/jobFair/list.vue';

// 资讯管理
import Information from '@/views/information/index.vue';
import InformationSection from '@/views/information/section/index.vue';
import InformationArticle from '@/views/information/article/index.vue';

export const routerList = {
Permission,
ROLE,
Account,
List,
Company,
Department,
Job,
Member,
Vip,
JobSeeker,
JobResume,
JobFair,
JobList,
Information,
InformationSection,
InformationArticle
Home,
}

+ 21
- 1
src/router/routes.ts View File

@@ -4,6 +4,8 @@ import { HomeOutlined } from '@ant-design/icons-vue';
// import LOGIN from '@/views/login/login.vue';
// import HOME from '@/views/home/home.vue';
import Layout from '@/components/layout/index.vue';
import Home from '@/views/home/index.vue';
import Job from '@/views/job/index.vue';

// // 登录路由
// export const LoginRoute: AppRouteRecordRaw = {
@@ -22,7 +24,25 @@ export const LayoutRoute: AppRouteRecordRaw = {
component: Layout,
meta: {
title: '登录'
}
},
children: [
{
path: '/home',
name: 'home',
component: Home,
meta: {
title: '首页'
}
},
{
path: '/job',
name: 'job',
component: Job,
meta: {
title: '求职招聘'
}
}
]
}

export const basicRoutes = [

+ 7
- 1
src/style.css View File

@@ -63,7 +63,7 @@ button:focus-visible {
height: 100%;
overflow: hidden;
overflow: auto;
text-align: center;
background-color: #f0f0f0 !important;
}

@media (prefers-color-scheme: light) {
@@ -78,3 +78,9 @@ button:focus-visible {
background-color: #f9f9f9;
}
}

/* 从右开始 */
.horizontal-flex-end {
display: flex;
justify-content: flex-end;
}

+ 288
- 0
src/views/home/hot/index.vue View File

@@ -0,0 +1,288 @@
<!-- slice(0,6), 6,14 -->
<template>
<div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 36px;">热门企业</div>
<div class="mt10">
<a-row :gutter="[10,10]">
<a-col span="18">
<a-row :gutter="[10,10]">
<a-col span="8" v-for="(item, index) in data1">
<div class="compamy-box">
<div class="compamy-img mt10">
<a-image width="50px" height="50px" :src="item.image"></a-image>
</div>
<div class="compamy-title mt10">
{{item.title}}
</div>
<div class="compamy-nature mt10">
{{item.des}}
</div>
</div>
</a-col>
</a-row>
</a-col>
<a-col span="6">
<a-row>
<a-col span="24">
<a-list size="small" bordered :data-source="data" style="height: 294px">
<template #renderItem="{ item }">
<a-list-item>{{ item }}</a-list-item>
</template>
<template #header>
<div>Header</div>
</template>
</a-list></a-col>
</a-row>
</a-col>
</a-row>
</div>
<template v-if="showData">
<a-row :gutter="[10,10]">
<a-col span="6" v-for="(item, index) in data2">
<div class="compamy-box">
<div class="compamy-img mt10">
<a-image width="50px" height="50px" :src="item.image"></a-image>
</div>
<div class="compamy-title mt10">
{{item.title}}
</div>
<div class="compamy-nature mt10">
{{item.des}}
</div>
</div>
</a-col>
</a-row>
</template>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
let companyList = ref<object[]>([
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
},
{
image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
title: '中山市海港城安域有限公司',
des: '民营企业：100-1000人'
}
])
let data1 = ref([])
let data2 = ref([])
let showData = ref(false)
onMounted(() => {
if (companyList.value.length > 14) {
data1.value = companyList.value.slice(0, 6)
data2.value = companyList.value.slice(6, 14)
showData.value = true;
} else {
data1.value = companyList.value;
showData.value = false;
}
})
</script>

<style lang="less" scoped>
.compamy-box {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 100%;
padding: 10px;
background-color: #ffffff;

.compamy-img {}

.compamy-title {}

.compamy-nature {}


}

.mt10 {
margin-bottom: 10px;
}
</style>

+ 15
- 0
src/views/home/index.vue View File

@@ -0,0 +1,15 @@
<template>
<!-- <home-swiper></home-swiper> -->
<home-hot></home-hot>
<home-job></home-job>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
// import HomeSwiper from '@/views/home/swiper/index.vue'
import HomeHot from '@/views/home/hot/index.vue'
import HomeJob from '@/views/home/job/index.vue'
</script>

<style>
</style>

+ 88
- 0
src/views/home/job/index.vue View File

@@ -0,0 +1,88 @@
<template>
<div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 36px;">精选职位</div>
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="最新招聘">
<a-row :gutter="[10,10]">
<a-col span="8" v-for="(item, index) in companyList">
<div class="job-box">
<div class="job-title">
<div class="aaaa mt10">
<div>前端工程师</div>
<div>5000-7000元</div>
</div>
<div>
<a-tag>Tag 1</a-tag>
<a-tag>Tag 1</a-tag>
<a-tag>Tag 1</a-tag>
<a-tag>Tag 1</a-tag>
</div>
</div>
<div class="job-company">
<div class="aaaa mt10">
<div>中山市海港城安域有限公司</div>
<div>查看更多</div>
</div>
<div>
小榄镇
</div>
</div>
</div>
</a-col>
</a-row>
<div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 24px;">查看更多</div>
</a-tab-pane>
<a-tab-pane key="2" tab="急招职位" force-render>Content of Tab Pane 2</a-tab-pane>
<a-tab-pane key="3" tab="高薪职位">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="3" tab="校园招聘">Content of Tab Pane 3</a-tab-pane>
</a-tabs>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
let companyList = ref<object[]>([{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}])
let data1 = ref([])
let data2 = ref([])
let showData = ref(false)
onMounted(() => {
if (companyList.value.length > 9) {
companyList.value = companyList.value.slice(0, 9)
} else {
data1.value = companyList.value;
showData.value = false;
}
})
</script>

<style lang="less" scoped>
.job-box {
display: flex;
flex-direction: column;
justify-content: space-around;
// align-items: center;
width: 100%;
.job-title {
padding: 20px;
background-color: #ffffff;
.aaaa {
display: flex;
justify-content: space-between;
}
}
.job-company {
padding: 20px;
background-color: #cccccc;
.aaaa {
display: flex;
justify-content: space-between;
}
}

}

.mt10 {
margin-bottom: 10px;
}
</style>

+ 76
- 0
src/views/home/swiper/index.vue View File

@@ -0,0 +1,76 @@
<template>
<a-image width="100vw" height="40vh"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
<div class="content">
<a-row type="flex" justify="center">
<a-col span="18">
<a-row type="flex" justify="end">
<a-col span="5">
<div class="login-box">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="我要找工作">
<a-row :gutter="[0, 16]">
<a-col span="24">
<a-input v-model:value="value" placeholder="账号" />
</a-col>
<a-col span="24">
<a-input v-model:value="value" placeholder="密码" />
</a-col>
<a-col span="24">
<a-input v-model:value="value" placeholder="验证码" />
</a-col>
<a-col span="24">
<a-button type="primary" block>登录/注册</a-button>
</a-col>
<a-col span="24">
忘记密码？
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane key="2" tab="我要招聘" force-render>我要招聘</a-tab-pane>
</a-tabs>
</div>
</a-col>
</a-row>
</a-col>
</a-row>
</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
</script>

<style lang="less" scoped>
.ant-image {
position: relative;
}

.content {
position: absolute;
top: 94px;
left: 0;
right: 0;
bottom: 30px;
z-index: 99;
// height: 30vh;
padding-inline: 50px;
}

.login-box {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 30px;
border-radius: 10px;
background-color: aliceblue;
}
.ant-tabs-nav-wrap {
flex: none !important;
}
.ant-tabs-nav {
justify-content: center !important;
}
</style>

+ 8
- 0
src/views/job/index.vue View File

@@ -0,0 +1,8 @@
<template>
</template>

<script>
</script>

<style>
</style>

Write Preview
Loading…
Cancel
Save