<template> | |||||
<div class="job-box"> | |||||
<div class="job-title"> | |||||
<div class="aaaa mt10"> | |||||
<div>前端工程师</div> | |||||
<div>500000-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> | |||||
</template> | |||||
<script> | |||||
</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> |
<template> | |||||
<a-modal v-model:visible="visible" @ok="handleOk" :footer="null" title="职位详情"> | |||||
<!-- justify flex 布局下的水平排列方式:start end center space-around space-between --> | |||||
<!-- align flex 布局下的垂直对齐方式:top middle bottom --> | |||||
<div style="margin-top: 30px;"> | |||||
<a-row :gutter="[10,10]" type="flex" justify="space-between"> | |||||
<a-col span="14"> | |||||
<a-row :gutter="[10,10]"> | |||||
<a-col span="24"> | |||||
<a-row :gutter="[10,10]" type="flex" justify="space-between"> | |||||
<a-col> | |||||
前端工程师 | |||||
</a-col> | |||||
<a-col> | |||||
2000-1000000 | |||||
</a-col> | |||||
</a-row> | |||||
</a-col> | |||||
<a-col span="24"> | |||||
<a-row :gutter="[10,10]" type="flex"> | |||||
<a-col span="6"> | |||||
<a-tag>Tag 1</a-tag> | |||||
</a-col> | |||||
<a-col span="6"> | |||||
<a-tag>Tag 1</a-tag> | |||||
</a-col> | |||||
<a-col span="6"> | |||||
<a-tag>Tag 1</a-tag> | |||||
</a-col> | |||||
</a-row> | |||||
</a-col> | |||||
</a-row> | |||||
</a-col> | |||||
<a-col span="10"> | |||||
<div style="height: 100%;display: flex;align-items: center;justify-content: flex-end;"> | |||||
<a-button> | |||||
<StarOutlined /> | |||||
收藏 | |||||
</a-button> | |||||
<a-button> | |||||
投简历 | |||||
</a-button> | |||||
</div> | |||||
</a-col> | |||||
</a-row> | |||||
<div style="margin-top: 30px;"> | |||||
<div>职位描述:</div> | |||||
<!-- <div v-html=""></div> --> | |||||
</div> | |||||
</div> | |||||
</a-modal> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { ref, computed, onMounted } from 'vue'; | |||||
import { StarOutlined } from '@ant-design/icons-vue'; | |||||
let visible = ref(false) | |||||
onMounted(() => { | |||||
}) | |||||
</script> | |||||
<style scoped lang="less"> | |||||
:deep(.ant-btn) { | |||||
border-radius: 0 !important; | |||||
} | |||||
</style> |
<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="企业推荐"> | |||||
<div class="company-box"> | |||||
<a-row :gutter="[10,10]"> | |||||
<a-col v-for="(item, index) in companyList"> | |||||
{{item.name}} | |||||
</a-col> | |||||
</a-row> | |||||
</div> | |||||
</a-tab-pane> | |||||
<a-tab-pane key="2" tab="见习基地" force-render> | |||||
<div class="company-box"> | |||||
<a-row :gutter="[10,10]"> | |||||
<a-col v-for="(item, index) in companyList"> | |||||
{{item.name}} | |||||
</a-col> | |||||
</a-row> | |||||
</div> | |||||
</a-tab-pane> | |||||
</a-tabs> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { ref, computed, onMounted } from 'vue'; | |||||
let companyList = ref<object[]>([{name: '中山海港城'},{name: '中山安域网络有限公司'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'},{name: '中山按与'}]) | |||||
onMounted(() => { | |||||
}) | |||||
</script> | |||||
<style lang="less" scoped> | |||||
.company-box { | |||||
width: 100%; | |||||
padding: 20px; | |||||
background-color: #fff; | |||||
} | |||||
</style> |
<template> | <template> | ||||
<!-- <div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 36px;">精选职位</div> --> | <!-- <div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 36px;">精选职位</div> --> | ||||
<a-tabs v-model:activeKey="activeKey"> | |||||
<!-- <a-tabs v-model:activeKey="activeKey"> | |||||
<a-tab-pane key="1" tab="最新招聘"> | <a-tab-pane key="1" tab="最新招聘"> | ||||
<a-row :gutter="[10,10]"> | <a-row :gutter="[10,10]"> | ||||
<a-col span="8" v-for="(item, index) in companyList"> | <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> | |||||
<job-card></job-card> | |||||
</a-col> | |||||
</a-row> | |||||
<a-row :gutter="[10,10]"> | |||||
<a-col span="12" v-for="(item, index) in companyList"> | |||||
<job-card></job-card> | |||||
</a-col> | </a-col> | ||||
</a-row> | </a-row> | ||||
<div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 24px;">查看更多</div> | <div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 24px;">查看更多</div> | ||||
<a-tab-pane key="2" tab="急招职位" force-render>Content of Tab Pane 2</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-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-tabs> --> | |||||
<!-- <a-row :gutter="[10,10]"> | |||||
<a-col span="12" v-for="(item, index) in companyList"> | |||||
<job-card></job-card> | |||||
</a-col> | |||||
<a-col span="24" > | |||||
<a-pagination v-model:current="current" :total="500" style="text-align: center;"/> | |||||
</a-col> | |||||
</a-row> --> | |||||
<!-- 企业显示 --> | |||||
<a-tabs v-model:activeKey="activeKey"> | |||||
<a-tab-pane key="1" tab="推荐人才"> | |||||
<a-row :gutter="[10,10]"> | |||||
<a-col span="12" v-for="(item, index) in companyList"> | |||||
<job-talents></job-talents> | |||||
</a-col> | |||||
</a-row> | |||||
<div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 24px;">查看更多 | |||||
</div> | |||||
<a-row :gutter="[10,10]"> | |||||
<a-col span="24" v-for="(item, index) in companyList"> | |||||
<job-talents></job-talents> | |||||
</a-col> | |||||
<a-col span="24"> | |||||
<a-pagination v-model:current="current" :total="500" style="text-align: center;" /> | |||||
</a-col> | |||||
</a-row> | |||||
</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-tabs> | |||||
</template> | </template> | ||||
<script setup lang="ts"> | <script setup lang="ts"> | ||||
import { ref, computed, onMounted } from 'vue'; | import { ref, computed, onMounted } from 'vue'; | ||||
let companyList = ref<object[]>([{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]) | |||||
import JobCard from '@/components/job/card/index.vue' | |||||
import JobTalents from '@/components/job/talents/index.vue' | |||||
let companyList = ref<object[]>([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]) | |||||
let data1 = ref([]) | let data1 = ref([]) | ||||
let data2 = ref([]) | let data2 = ref([]) | ||||
let showData = ref(false) | let showData = ref(false) | ||||
let current = ref(6) | |||||
onMounted(() => { | onMounted(() => { | ||||
if (companyList.value.length > 9) { | if (companyList.value.length > 9) { | ||||
companyList.value = companyList.value.slice(0, 9) | |||||
companyList.value = companyList.value.slice(0, 8) | |||||
} else { | } else { | ||||
data1.value = companyList.value; | data1.value = companyList.value; | ||||
showData.value = false; | showData.value = false; | ||||
justify-content: space-around; | justify-content: space-around; | ||||
// align-items: center; | // align-items: center; | ||||
width: 100%; | width: 100%; | ||||
.job-title { | .job-title { | ||||
padding: 20px; | padding: 20px; | ||||
background-color: #ffffff; | background-color: #ffffff; | ||||
.aaaa { | .aaaa { | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
} | } | ||||
} | } | ||||
.job-company { | .job-company { | ||||
padding: 20px; | padding: 20px; | ||||
background-color: #cccccc; | background-color: #cccccc; | ||||
.aaaa { | .aaaa { | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
.mt10 { | .mt10 { | ||||
margin-bottom: 10px; | 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> | </style> |
<template> | <template> | ||||
<a-row :gutter="[10,16]" type="flex" justify="center"> | |||||
<a-row :gutter="[10,16]" type="flex" justify="center" style="margin-bottom: 30px;"> | |||||
<a-col span="18"> | <a-col span="18"> | ||||
<a-input v-model:value="value2" placeholder="请输入关键字"> | <a-input v-model:value="value2" placeholder="请输入关键字"> | ||||
<template #addonBefore> | <template #addonBefore> |
<template> | |||||
<div class="login-content"> | |||||
<a-image width="100vw" height="41vh" | |||||
src="https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr" /> | |||||
<div class="login-position content-padding-inline"> | |||||
<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> | |||||
</div> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { ref, computed } from 'vue'; | |||||
</script> | |||||
<style lang="less" scoped> | |||||
.login-content { | |||||
position: relative; | |||||
width: 100%; | |||||
height: 41vh; | |||||
.login-position { | |||||
position: absolute; | |||||
top: 30px; | |||||
left: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
.login-box { | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
padding: 20px 30px; | |||||
border-radius: 10px; | |||||
background-color: aliceblue; | |||||
} | |||||
} | |||||
} | |||||
:deep(.ant-tabs-nav-wrap) { | |||||
flex: none !important; | |||||
} | |||||
:deep(.ant-tabs-nav) { | |||||
justify-content: center !important; | |||||
} | |||||
</style> |
<template> | |||||
<div class="talent-box"> | |||||
<a-list item-layout="vertical"> | |||||
<a-list-item> | |||||
<a-list-item-meta> | |||||
<template #title> | |||||
人才 | |||||
</template> | |||||
<template #description> | |||||
<div> | |||||
Text | |||||
<a-divider type="vertical" /> | |||||
<a href="#">Link</a> | |||||
<a-divider type="vertical" /> | |||||
<a href="#">Link</a> | |||||
</div> | |||||
</template> | |||||
<template #avatar> | |||||
<a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" :size="48" /> | |||||
</template> | |||||
</a-list-item-meta> | |||||
<div style="margin-left: 64px;"> | |||||
1、环境更加 | |||||
</div> | |||||
</a-list-item> | |||||
</a-list> | |||||
<!-- <a-list item-layout="horizontal" :split="false" position="bottom"> | |||||
<a-list-item> | |||||
<template #actions> | |||||
<a-button> | |||||
<StarOutlined /> | |||||
收藏 | |||||
</a-button> | |||||
<a-button> | |||||
投简历 | |||||
</a-button> | |||||
</template> | |||||
<a-list-item-meta> | |||||
<template #title> | |||||
人才 | |||||
</template> | |||||
<template #description> | |||||
<div> | |||||
Text | |||||
<a-divider type="vertical" /> | |||||
<a href="#">Link</a> | |||||
<a-divider type="vertical" /> | |||||
<a href="#">Link</a> | |||||
<div>我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我</div> | |||||
</div> | |||||
</template> | |||||
<template #avatar> | |||||
<a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" :size="48" /> | |||||
</template> | |||||
</a-list-item-meta> | |||||
<div style="width: 30%;"> | |||||
<a-row> | |||||
<a-col span="24"> | |||||
地点:广东省,中山市 | |||||
</a-col> | |||||
<a-col span="24"> | |||||
期望:环境更加环境更加环境更加环境更 | |||||
</a-col> | |||||
<a-col span="24"> | |||||
时间:2023-12-19 | |||||
</a-col> | |||||
</a-row> | |||||
</div> | |||||
</a-list-item> | |||||
</a-list> --> | |||||
</div> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { StarOutlined } from '@ant-design/icons-vue'; | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.talent-box { | |||||
background-color: #fff; | |||||
} | |||||
.applyRouteStyles(@routeName) { | |||||
& when (@routeName = company) { | |||||
:deep(.ant-list-item-meta) { | |||||
flex: none !important; | |||||
width: 40% !important; | |||||
} | |||||
:deep(.ant-list-item-action) { | |||||
margin-inline-start: 0 !important; | |||||
} | |||||
} | |||||
} | |||||
// :deep(.ant-list-item-meta) { | |||||
// flex: none !important; | |||||
// width: 40% !important; | |||||
// } | |||||
// :deep(.ant-list-item-action) { | |||||
// margin-inline-start: 0 !important; | |||||
// } | |||||
</style> |
<template> | |||||
<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;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-col> | |||||
</a-row> | |||||
</template> | |||||
<script> | |||||
</script> | |||||
<style scoped lang="less"> | |||||
</style> |
<template> | <template> | ||||
<div style="min-height: 100vh;"> | <div style="min-height: 100vh;"> | ||||
<a-layout class="layout" style="width: 100%; display: flex;align-items: center;justify-items: center;"> | <a-layout class="layout" style="width: 100%; display: flex;align-items: center;justify-items: center;"> | ||||
<a-layout-header style="position: fixed; z-index: 99;background: #000;width: 100%;"> | |||||
<a-layout-header style="position: fixed; z-index: 99;background: #0a130d;width: 100%;"> | |||||
<a-row type="flex" justify="center"> | <a-row type="flex" justify="center"> | ||||
<a-col span="18"> | <a-col span="18"> | ||||
<a-row> | <a-row> | ||||
<div class="logo" /> | <div class="logo" /> | ||||
</a-col> | </a-col> | ||||
<a-col span="16"> | <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-sider></a-sider> | |||||
</a-col> | </a-col> | ||||
<a-col span="4"> | <a-col span="4"> | ||||
<div | <div | ||||
</a-row> | </a-row> | ||||
</a-layout-header> | </a-layout-header> | ||||
<!-- <layout-swiper ></layout-swiper> --> | <!-- <layout-swiper ></layout-swiper> --> | ||||
<layout-tabs></layout-tabs> | |||||
<!-- <layout-tabs></layout-tabs> --> | |||||
<a-layout-content> | <a-layout-content> | ||||
<div> | |||||
<a-row type="flex" justify="center"> | |||||
<a-col span="18"> | |||||
<router-view></router-view> | |||||
</a-col> | |||||
</a-row> | |||||
</div> | |||||
<router-view></router-view> | |||||
</a-layout-content> | </a-layout-content> | ||||
<!-- <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;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-col> | |||||
</a-row> | |||||
</a-layout-footer> --> | |||||
<a-layout-footer> | |||||
<a-footer></a-footer> | |||||
</a-layout-footer> | |||||
</a-layout> | </a-layout> | ||||
</div> | </div> | ||||
<script lang="ts" setup> | <script lang="ts" setup> | ||||
import { ref, computed } from 'vue'; | import { ref, computed } from 'vue'; | ||||
import { router } from '@/router'; | 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 ASider from './sider/aSider.vue'; | |||||
import AFooter from './footer/index.vue'; | |||||
import { MenuUnfoldOutlined, MenuFoldOutlined, } from '@ant-design/icons-vue'; | import { MenuUnfoldOutlined, MenuFoldOutlined, } from '@ant-design/icons-vue'; | ||||
const toRouter = () => { | const toRouter = () => { | ||||
router.push('/job') | router.push('/job') | ||||
} | } | ||||
/* 设置滚动条宽度 */ | /* 设置滚动条宽度 */ | ||||
width: 0px; | width: 0px; | ||||
} | } | ||||
.logo { | .logo { | ||||
float: left; | float: left; | ||||
width: 120px; | width: 120px; | ||||
margin: 16px 34px 16px 0; | margin: 16px 34px 16px 0; | ||||
background: #000; | background: #000; | ||||
} | } | ||||
.ant-layout-content { | .ant-layout-content { | ||||
width: 100%; | width: 100%; | ||||
padding-inline: 50px; | |||||
// padding-inline: 50px; | |||||
overflow-y: auto; | overflow-y: auto; | ||||
background-color: #f0f0f0 !important; | background-color: #f0f0f0 !important; | ||||
padding-top: 64px; | |||||
padding-bottom: 30px; | |||||
div { | |||||
padding: 30px 0; | |||||
} | |||||
} | } | ||||
.ant-layout-footer { | .ant-layout-footer { | ||||
// position: absolute; | // position: absolute; |
<template> | <template> | ||||
<a-menu mode="inline" v-model:openKeys="openSubMenu" @openChange="onOpenChange" inlineCollapsed | |||||
v-model:selectedKeys="selectedMenu" style="background: #19be6b; height: '90vh';color: #fff;"> | |||||
<template v-for="(item,index) in menuList"> | |||||
<a-menu mode="horizontal" v-model:openKeys="openSubMenu" @openChange="onOpenChange" | |||||
v-model:selectedKeys="selectedMenu" style="background: #0a130d; height: '90vh';color: #fff;"> | |||||
<template v-for="(item,index) in LayoutRoute.children"> | |||||
<template v-if="!item.children"> | <template v-if="!item.children"> | ||||
<a-menu-item :key="item.path" @click="onMenu(item.path)"> | <a-menu-item :key="item.path" @click="onMenu(item.path)"> | ||||
<template #icon> | |||||
<component :is="item.meta.icon"></component> | |||||
</template> | |||||
<span>{{item.meta.title}}</span> | <span>{{item.meta.title}}</span> | ||||
</a-menu-item> | </a-menu-item> | ||||
</template> | </template> | ||||
<template v-else> | <template v-else> | ||||
<a-sub-menu :key="item.path"> | <a-sub-menu :key="item.path"> | ||||
<template #icon> | |||||
<component :is="item.meta.icon"></component> | |||||
</template> | |||||
<template #title>{{item.meta.title}}</template> | <template #title>{{item.meta.title}}</template> | ||||
<template v-for="(twoItem, twoIndex) in item.children"> | <template v-for="(twoItem, twoIndex) in item.children"> | ||||
<a-sub-menu v-if="twoItem.children" :key="twoItem.path"> | <a-sub-menu v-if="twoItem.children" :key="twoItem.path"> | ||||
</template> | </template> | ||||
<script setup lang="ts"> | <script setup lang="ts"> | ||||
import { ref, onMounted, computed } from 'vue'; | import { ref, onMounted, computed } from 'vue'; | ||||
import { LayoutRoute } from '@/router/routes'; | |||||
import { store } from '@/store/index'; | |||||
import { useMenu } from '@/hooks/useMenu'; | import { useMenu } from '@/hooks/useMenu'; | ||||
let { menuList, onMenu, routerCur, routerArrayCur } = useMenu(); | |||||
const selectedMenu = computed(() => { | |||||
let { onMenu, routerCur, routerArrayCur, routerArrayParentChildCur } = useMenu(); | |||||
let selectedMenu = computed(() => { | |||||
let newSelectedMenu = [routerCur()]; | let newSelectedMenu = [routerCur()]; | ||||
return newSelectedMenu; | return newSelectedMenu; | ||||
}) | }) | ||||
const openSubMenu = computed(() => { | |||||
let newOpenSubMenu = [routerArrayCur()]; | |||||
return newOpenSubMenu; | |||||
let openSubMenu = computed(() => { | |||||
// let newOpenSubMenu = [routerArrayCur()]; | |||||
store.commit('getRouteName', { | |||||
routeName: routerCur() | |||||
}) | |||||
// return newOpenSubMenu; | |||||
}) | }) | ||||
const onOpenChange = (openKeys) => { | const onOpenChange = (openKeys) => { |
<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> |
<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> |
declare namespace CommonType { | |||||
type PageType = { | |||||
current ?: Number; | |||||
pageSize ?: Number; | |||||
total ?: Number; | |||||
pageSizeOptions ?: String[]; | |||||
hideOnSinglePage ?: Boolean; | |||||
showSizeChanger ?: Boolean; | |||||
} | |||||
type ModelType = { | |||||
title ?: String; | |||||
okText : String | '提交'; | |||||
resetText : String | '重置'; | |||||
cancelText : String | '取消'; | |||||
} | |||||
type SearchType = { | |||||
page ?: Number, | |||||
pagesize ?: Number, | |||||
sort ?: String, | |||||
sortby ?: String, | |||||
keyword ?: String | |||||
} | |||||
type TableType = { | |||||
data : Object[], | |||||
columns : Object[], | |||||
} | |||||
type DeleteType = { | |||||
id ?: Number | |||||
} | |||||
} | |||||
import { ref } from 'vue'; | |||||
import { router } from '@/router'; | |||||
export const useAsRouter = () => { | |||||
// 获取当前路由 | |||||
function routerCur() { | |||||
return router.currentRoute.value.path | |||||
} | |||||
// 获取当前路由父路由 | |||||
function routerArrayCur() { | |||||
return router.currentRoute.value.matched[1].path; | |||||
} | |||||
// 获取当前父路由和子路由 | |||||
function routerArrayParentChildCur() { | |||||
return router.currentRoute.value.matched[1]; | |||||
} | |||||
// 跳转路由 | |||||
function routerTo(url : string) { | |||||
router.push(url) | |||||
} | |||||
// 匹配路由页面 | |||||
function routerDynamic(userRouter : string[], originRouter : Object[]) { | |||||
const finalRouter = originRouter.filter(item => userRouter.includes(item.name)).map(item => ({ ...item, children: item.children ? routerDynamic(userRouter, item.children) : null })); | |||||
return finalRouter; | |||||
} | |||||
// 添加路由 | |||||
function routerAdd(route) { | |||||
router.addRoute('', route); | |||||
} | |||||
// 初始化路由 | |||||
function routerInit() { | |||||
return router.options.routes + router.options.routes.LayoutRoute; | |||||
} | |||||
return { | |||||
routerCur, | |||||
routerArrayCur, | |||||
routerArrayParentChildCur, | |||||
routerTo, | |||||
routerDynamic, | |||||
routerAdd, | |||||
routerInit | |||||
} | |||||
} |
import { ref } from 'vue'; | |||||
import { store } from '@/store'; | |||||
import { useAsRouter } from './useAsRouter' | |||||
interface CommonInterface { | |||||
model ?: CommonType.ModelType, | |||||
page ?: CommonType.PageType | |||||
search ?: CommonType.SearchType | |||||
table ?: CommonType.TableType | |||||
delParam ?: CommonType.DeleteType, | |||||
} | |||||
export const useCommon = () => { | |||||
const { routerTo, routerCur, routerArrayCur } = useAsRouter(); | |||||
let commomParams = ref<CommonInterface>({ | |||||
model: { | |||||
title: '', | |||||
okText: '提交', | |||||
resetText: '重置', | |||||
cancelText: '取消', | |||||
}, | |||||
page: { | |||||
current: 1, | |||||
pageSize: 1, | |||||
total: 10, | |||||
pageSizeOptions: ['10', '20', '30', '40'], | |||||
hideOnSinglePage: false, | |||||
showSizeChanger: true | |||||
}, | |||||
search: { | |||||
page : 1, | |||||
pagesize : 10, | |||||
sort : 'id', | |||||
sortby : 'asc', | |||||
keyword : '' | |||||
}, | |||||
table: { | |||||
data : [], | |||||
columns : [], | |||||
}, | |||||
delParam :{ | |||||
id: 0 | |||||
}, | |||||
// // MENU | |||||
// openSubMenu: [], | |||||
// menuList: [], | |||||
}) | |||||
let openAddModel = ref<Boolean>(store.state.openModel); | |||||
let openOtherModel_1 = ref<Boolean>(store.state.openOtherModel_1); | |||||
// 点击菜单获取路由 | |||||
const onMenu = (path) => { | |||||
routerTo(path); | |||||
}; | |||||
// Modal | |||||
const hideModal = () => { | |||||
store.commit('getOpenModel', { | |||||
openAddModel: false | |||||
}) | |||||
} | |||||
// 打开添加/编辑对话框 | |||||
const showModal = () => { | |||||
store.commit('getOpenModel', { | |||||
openAddModel: true | |||||
}) | |||||
}; | |||||
const showOtherModal1 = () => { | |||||
store.commit('getOpenMoreModel', { | |||||
openOtherModel_1: true | |||||
}) | |||||
}; | |||||
const hideOtherModal1 = () => { | |||||
store.commit('getOpenMoreModel', { | |||||
openOtherModel_1: false | |||||
}) | |||||
} | |||||
return { | |||||
store, | |||||
commomParams, | |||||
openAddModel, | |||||
onMenu, | |||||
hideModal, | |||||
showModal, | |||||
openOtherModel_1, | |||||
showOtherModal1, | |||||
hideOtherModal1, | |||||
} | |||||
} |
import { ref } from 'vue'; | |||||
import { useAsRouter } from './useAsRouter' | |||||
import { store } from '@/store' | |||||
export const useMenu = () => { | |||||
const { routerTo, routerCur, routerArrayCur, | |||||
routerArrayParentChildCur } = useAsRouter(); | |||||
const openSubMenu = ref<string[]>([]); | |||||
// 点击菜单获取路由 | |||||
const onMenu = (path) => { | |||||
routerTo(path); | |||||
}; | |||||
return { | |||||
routerCur, | |||||
routerArrayCur, | |||||
routerArrayParentChildCur, | |||||
openSubMenu, | |||||
onMenu, | |||||
} | |||||
} |
import { HomeOutlined } from '@ant-design/icons-vue'; | import { HomeOutlined } from '@ant-design/icons-vue'; | ||||
import { routerList } from './routerList'; | import { routerList } from './routerList'; | ||||
// 权限管理 | |||||
// 首页 | |||||
const HomeRoute : AppRouteRecordRaw = { | const HomeRoute : AppRouteRecordRaw = { | ||||
path: '/home', | path: '/home', | ||||
name: 'home', | name: 'home', | ||||
title: '首页', | title: '首页', | ||||
icon: HomeOutlined | icon: HomeOutlined | ||||
}, | }, | ||||
}; | |||||
//求职 | |||||
const JobRoute : AppRouteRecordRaw = { | |||||
path: '/job', | |||||
name: 'job', | |||||
component: routerList.Job, | |||||
meta: { | |||||
title: '求职招聘', | |||||
icon: HomeOutlined | |||||
}, | |||||
children: [ | |||||
{ | |||||
path: '/job/home', | |||||
name: 'home', | |||||
component: routerList.JobHome, | |||||
meta: { | |||||
title: '首页', | |||||
icon: HomeOutlined | |||||
}, | |||||
}, | |||||
{ | |||||
path: '/personal', | |||||
name: 'personal', | |||||
component: routerList.Personal, | |||||
meta: { | |||||
title: '个人求职', | |||||
icon: HomeOutlined | |||||
}, | |||||
}, | |||||
{ | |||||
path: '/company', | |||||
name: 'company', | |||||
component: routerList.Company, | |||||
meta: { | |||||
title: '企业招聘', | |||||
icon: HomeOutlined | |||||
}, | |||||
}, | |||||
{ | |||||
path: '/homemake', | |||||
name: 'homemake', | |||||
component: routerList.Homemake, | |||||
meta: { | |||||
title: '家政', | |||||
icon: HomeOutlined | |||||
}, | |||||
}, | |||||
{ | |||||
path: '/invite/meet', | |||||
name: 'inviteMeet', | |||||
component: routerList.InviteMeet, | |||||
meta: { | |||||
title: '招聘会', | |||||
icon: HomeOutlined | |||||
}, | |||||
}, | |||||
{ | |||||
path: '/information', | |||||
name: 'information', | |||||
component: routerList.Information, | |||||
meta: { | |||||
title: '职场资讯', | |||||
icon: HomeOutlined | |||||
}, | |||||
}, | |||||
{ | |||||
path: '/download', | |||||
name: 'download', | |||||
component: routerList.Download, | |||||
meta: { | |||||
title: '下载专区', | |||||
icon: HomeOutlined | |||||
}, | |||||
} | |||||
] | |||||
}; | |||||
//关于菊城人才 | |||||
const AboutRoute : AppRouteRecordRaw = { | |||||
path: '/about', | |||||
name: 'about', | |||||
component: routerList.About, | |||||
meta: { | |||||
title: '关于菊城人才', | |||||
icon: HomeOutlined | |||||
}, | |||||
}; | |||||
// 法律咨询 | |||||
const LawRoute : AppRouteRecordRaw = { | |||||
path: '/law', | |||||
name: 'law', | |||||
component: routerList.Law, | |||||
meta: { | |||||
title: '法律咨询', | |||||
icon: HomeOutlined | |||||
}, | |||||
}; | |||||
// 人才导师 | |||||
const MentorRoute : AppRouteRecordRaw = { | |||||
path: '/mentor', | |||||
name: 'mentor', | |||||
component: routerList.Mentor, | |||||
meta: { | |||||
title: '人才导师', | |||||
icon: HomeOutlined | |||||
}, | |||||
}; | }; | ||||
export const routesModuleList : AppRouteModule[] = [HomeRoute]; | |||||
// 专家组 | |||||
const ExpertRoute : AppRouteRecordRaw = { | |||||
path: '/expert', | |||||
name: 'expert', | |||||
component: routerList.Expert, | |||||
meta: { | |||||
title: '专家组', | |||||
icon: HomeOutlined | |||||
}, | |||||
}; | |||||
// 培训列表 | |||||
const TrainRoute : AppRouteRecordRaw = { | |||||
path: '/train', | |||||
name: 'train', | |||||
component: routerList.Train, | |||||
meta: { | |||||
title: '培训列表', | |||||
icon: HomeOutlined | |||||
}, | |||||
}; | |||||
// 党群关系 | |||||
const RelationshipRoute : AppRouteRecordRaw = { | |||||
path: '/relationship', | |||||
name: 'relationship', | |||||
component: routerList.Relationship, | |||||
meta: { | |||||
title: '党群关系', | |||||
icon: HomeOutlined | |||||
}, | |||||
}; | |||||
// 新闻中心 | |||||
const NewsRoute : AppRouteRecordRaw = { | |||||
path: '/news', | |||||
name: 'news', | |||||
component: routerList.News, | |||||
meta: { | |||||
title: '新闻中心', | |||||
icon: HomeOutlined | |||||
}, | |||||
}; | |||||
export const routesModuleList : AppRouteModule[] = [HomeRoute, JobRoute, AboutRoute, LawRoute, MentorRoute, ExpertRoute, TrainRoute, RelationshipRoute, NewsRoute]; |
import Home from '@/views/home/index.vue'; | import Home from '@/views/home/index.vue'; | ||||
import Job from '@/views/job/index.vue'; | |||||
import JobHome from '@/views/job/home/index.vue'; | |||||
import Personal from '@/views/job/personal/index.vue'; | |||||
import Company from '@/views/job/company/index.vue'; | |||||
import Homemake from '@/views/job/homemake/index.vue'; | |||||
import InviteMeet from '@/views/job/invite-meet/index.vue'; | |||||
import Information from '@/views/job/information/index.vue'; | |||||
import Download from '@/views/job/download/index.vue'; | |||||
import About from '@/views/about/index.vue'; | |||||
import Law from '@/views/law-advice/index.vue'; | |||||
import Mentor from '@/views/talent-mentor/index.vue'; | |||||
import Expert from '@/views/expert/index.vue'; | |||||
import Train from '@/views/train/index.vue'; | |||||
import Relationship from '@/views/relationship/index.vue'; | |||||
import News from '@/views/news/index.vue'; | |||||
export const routerList = { | export const routerList = { | ||||
Home, | Home, | ||||
Job, | |||||
JobHome, | |||||
Personal, | |||||
Company, | |||||
Homemake, | |||||
InviteMeet, | |||||
Information, | |||||
Download, | |||||
About, | |||||
Law, | |||||
Mentor, | |||||
Expert, | |||||
Train, | |||||
Relationship, | |||||
News | |||||
} | } |
// import LOGIN from '@/views/login/login.vue'; | // import LOGIN from '@/views/login/login.vue'; | ||||
// import HOME from '@/views/home/home.vue'; | // import HOME from '@/views/home/home.vue'; | ||||
import Layout from '@/components/layout/index.vue'; | import Layout from '@/components/layout/index.vue'; | ||||
import Home from '@/views/home/index.vue'; | |||||
import Job from '@/views/job/index.vue'; | |||||
import { routesModuleList } from '@/router/dynamic'; | |||||
// // 登录路由 | // // 登录路由 | ||||
// export const LoginRoute: AppRouteRecordRaw = { | // export const LoginRoute: AppRouteRecordRaw = { | ||||
path: '', | path: '', | ||||
name: 'layout', | name: 'layout', | ||||
component: Layout, | component: Layout, | ||||
meta: { | |||||
title: '登录' | |||||
}, | |||||
redirect: '/home', | |||||
children: [ | children: [ | ||||
{ | |||||
path: '/home', | |||||
name: 'home', | |||||
component: Home, | |||||
meta: { | |||||
title: '首页' | |||||
} | |||||
}, | |||||
{ | |||||
path: '/job', | |||||
name: 'job', | |||||
component: Job, | |||||
meta: { | |||||
title: '求职招聘' | |||||
} | |||||
} | |||||
...routesModuleList | |||||
] | ] | ||||
} | } | ||||
const getCollapsed = (state) => { | |||||
state.collapsed = !state.collapsed; | |||||
const getRouteName = (state, payload) => { | |||||
state.routeName = payload.routeName; | |||||
} | } | ||||
const getOpenModel = (state, payload) => { | |||||
state.openAddModel = payload.openAddModel; | |||||
} | |||||
const getOpenMoreModel = (state, payload) => { | |||||
state.openOtherModel_1 = payload.openOtherModel_1; | |||||
} | |||||
export const mutations = { | export const mutations = { | ||||
getCollapsed, | |||||
getOpenModel, | |||||
getOpenMoreModel | |||||
getRouteName | |||||
} | } |
import { StateType } from './types' | import { StateType } from './types' | ||||
export const state = <StateType>{ | export const state = <StateType>{ | ||||
collapsed: false, | |||||
openAddModel: false, | |||||
openMoreModel: { | |||||
showAddModel: false, | |||||
showOrderModel: false | |||||
} | |||||
routeName: '' | |||||
} | } |
export interface StateType { | export interface StateType { | ||||
collapsed: boolean, | |||||
openAddModel: boolean, | |||||
openOtherModel_1: boolean | |||||
routeName ?: String | |||||
} | } |
} | } | ||||
} | } | ||||
.content-padding-inline { | |||||
padding-inline: 50px; | |||||
} | |||||
/* 从右开始 */ | /* 从右开始 */ | ||||
.horizontal-flex-end { | .horizontal-flex-end { | ||||
display: flex; | display: flex; |
<template> | |||||
</template> | |||||
<script> | |||||
</script> | |||||
<style> | |||||
</style> |
<template> | |||||
</template> | |||||
<script> | |||||
</script> | |||||
<style> | |||||
</style> |
<template> | <template> | ||||
<!-- <home-swiper></home-swiper> --> | |||||
<home-hot></home-hot> | |||||
<home-job></home-job> | |||||
</template> | </template> | ||||
<script setup lang="ts"> | <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> | </script> | ||||
<style> | <style> |
<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> |
<template> | |||||
<job-search></job-search> | |||||
<job-list></job-list> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { ref, onMounted, computed, watch } from 'vue'; | |||||
import JobSearch from '@/components/job/search/index.vue' | |||||
import JobList from '@/components/job/list/index.vue' | |||||
import JobInternship from '@/components/job/internship/index.vue' | |||||
import JobDetail from '@/components/job/detail/index.vue' | |||||
</script> | |||||
<style> | |||||
</style> |
<template> | |||||
<a-row> | |||||
<a-col span="4"> | |||||
<a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" style="width: 100%;" mode="inline"> | |||||
<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="4">人才入户</a-menu-item> | |||||
<a-menu-item key="5">其他</a-menu-item> | |||||
</a-menu> | |||||
</a-col> | |||||
<a-col span="16"> | |||||
<div style="width: 100%;background-color: #fff;padding: 10px;"> | |||||
<a-list item-layout="horizontal" :data-source="data"> | |||||
<template #renderItem="{ item }"> | |||||
<a-list-item> | |||||
<a-list-item-meta | |||||
description="2020-11-12"> | |||||
<template #title> | |||||
<a href="https://www.antdv.com/">{{ item.title }}</a> | |||||
</template> | |||||
</a-list-item-meta> | |||||
<template #extra> | |||||
<a-button>下载</a-button> | |||||
</template> | |||||
</a-list-item> | |||||
</template> | |||||
</a-list> | |||||
<a-pagination v-model:current="current" :total="500" style="text-align: center;" /> | |||||
</div> | |||||
</a-col> | |||||
<a-col span="4"> | |||||
<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> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { ref, onMounted, computed, watch } from 'vue'; | |||||
const openKeys = ref<string[]>(['1']); | |||||
const selectedKeys = ref<string[]>(['1']); | |||||
interface DataItem { | |||||
title : string; | |||||
} | |||||
const data : DataItem[] = ref([ | |||||
{ | |||||
title: 'Ant Design Title 1', | |||||
}, | |||||
{ | |||||
title: 'Ant Design Title 2', | |||||
}, | |||||
{ | |||||
title: 'Ant Design Title 3', | |||||
}, | |||||
{ | |||||
title: 'Ant Design Title 4', | |||||
}, | |||||
]) | |||||
</script> | |||||
<style> | |||||
</style> |
<template> | |||||
<job-swiper></job-swiper> | |||||
<a-row type="flex" justify="center" class="content-padding-inline"> | |||||
<a-col span="18"> | |||||
<home-hot></home-hot> | |||||
<home-job></home-job> | |||||
</a-col> | |||||
</a-row> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { ref, computed } from 'vue'; | |||||
import JobSwiper from '@/components/job/swiper/index.vue' | |||||
import HomeHot from '@/views/home/hot/index.vue' | |||||
import HomeJob from '@/views/home/job/index.vue' | |||||
</script> | |||||
<style> | |||||
</style> |
<template> | |||||
</template> | |||||
<script> | |||||
</script> | |||||
<style> | |||||
</style> |
<template> | <template> | ||||
<template v-if="routeName !== '/job/home'"> | |||||
<a-menu mode="horizontal" v-model:selectedKeys="jobMenu" forceSubMenuRender | |||||
style="background: #ffffff; height: '90vh';color: #797979;width: 100%;display: flex;justify-content: center;"> | |||||
<a-menu-item> | |||||
<span>{{subMenu.meta.title}}</span> | |||||
</a-menu-item> | |||||
<template v-for="(item,index) in subMenu.children" :key="item.path"> | |||||
<a-menu-item :key="item.path" @click="onMenu(item.path)" v-if="item.path !== '/job/home'"> | |||||
<span>{{item.meta.title}}</span> | |||||
</a-menu-item> | |||||
</template> | |||||
</a-menu> | |||||
</template> | |||||
<div v-if="routeName !== '/job/home'" class="content-padding-inline" style="margin-top: 30px;"> | |||||
<a-row type="flex" justify="center"> | |||||
<a-col span="18"> | |||||
<router-view></router-view> | |||||
</a-col> | |||||
</a-row> | |||||
</div> | |||||
<div v-else> | |||||
<router-view></router-view> | |||||
</div> | |||||
</template> | </template> | ||||
<script> | |||||
<script setup lang="ts"> | |||||
import { ref, onMounted, computed, watch } from 'vue'; | |||||
import { store } from '@/store/index'; | |||||
import { useMenu } from '@/hooks/useMenu'; | |||||
import type { AppRouteRecordRaw } from '@/router/types'; | |||||
let { onMenu, routerCur, routerArrayCur, routerArrayParentChildCur } = useMenu(); | |||||
let subMenu = ref<AppRouteRecordRaw>(routerArrayParentChildCur()) | |||||
let routeName = computed(() => { | |||||
return store.state.routeName | |||||
}) | |||||
let jobMenu = computed(() => { | |||||
let newSelectedMenu = [routerCur()]; | |||||
return newSelectedMenu; | |||||
}) | |||||
onMounted(() => { | |||||
// // subMenu.value.children.shift(); | |||||
// menuName.value = subMenu.value.meta.title; | |||||
}) | |||||
</script> | </script> | ||||
<style> | <style> |
<template> | |||||
<a-row> | |||||
<a-col span="4"> | |||||
<a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" style="width: 100%;" mode="inline"> | |||||
<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="4">创业就业</a-menu-item> | |||||
<a-menu-item key="5">劳动与法</a-menu-item> | |||||
</a-menu> | |||||
</a-col> | |||||
<a-col span="16"> | |||||
<div style="width: 100%;background-color: #fff;padding: 10px;"> | |||||
<a-list item-layout="horizontal" :data-source="data"> | |||||
<template #renderItem="{ item }"> | |||||
<a-list-item> | |||||
<a-list-item-meta | |||||
description="2020-11-12"> | |||||
<template #title> | |||||
<a href="https://www.antdv.com/">{{ item.title }}</a> | |||||
</template> | |||||
</a-list-item-meta> | |||||
<template #extra> | |||||
<img | |||||
width="96px" height="96px" | |||||
alt="logo" | |||||
src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" | |||||
/> | |||||
</template> | |||||
</a-list-item> | |||||
</template> | |||||
</a-list> | |||||
<a-pagination v-model:current="current" :total="500" style="text-align: center;" /> | |||||
</div> | |||||
</a-col> | |||||
<a-col span="4"> | |||||
<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> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { ref, onMounted, computed, watch } from 'vue'; | |||||
const openKeys = ref<string[]>(['1']); | |||||
const selectedKeys = ref<string[]>(['1']); | |||||
interface DataItem { | |||||
title : string; | |||||
} | |||||
const data : DataItem[] = ref([ | |||||
{ | |||||
title: 'Ant Design Title 1', | |||||
}, | |||||
{ | |||||
title: 'Ant Design Title 2', | |||||
}, | |||||
{ | |||||
title: 'Ant Design Title 3', | |||||
}, | |||||
{ | |||||
title: 'Ant Design Title 4', | |||||
}, | |||||
]) | |||||
</script> | |||||
<style> | |||||
</style> |
<template> | |||||
<a-row> | |||||
<a-col span="4"> | |||||
<a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" style="width: 100%;" mode="inline"> | |||||
<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="4">乘车路线</a-menu-item> | |||||
<a-menu-item key="5">绿色通道</a-menu-item> | |||||
<a-menu-item key="6">联系方式</a-menu-item> | |||||
</a-menu> | |||||
</a-col> | |||||
<a-col span="16"> | |||||
<div style="width: 100%;background-color: #fff;padding: 10px;"> | |||||
<a-list item-layout="horizontal" :data-source="data"> | |||||
<template #renderItem="{ item }"> | |||||
<a-list-item> | |||||
<a-list-item-meta | |||||
description="Ant Design, a design language for background applications, is refined by Ant UED Team"> | |||||
<template #title> | |||||
<a href="https://www.antdv.com/">{{ item.title }}</a> | |||||
</template> | |||||
</a-list-item-meta> | |||||
</a-list-item> | |||||
</template> | |||||
</a-list> | |||||
<a-pagination v-model:current="current" :total="500" style="text-align: center;" /> | |||||
</div> | |||||
</a-col> | |||||
<a-col span="4"> | |||||
<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> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { ref, onMounted, computed, watch } from 'vue'; | |||||
const openKeys = ref<string[]>(['1']); | |||||
const selectedKeys = ref<string[]>(['1']); | |||||
interface DataItem { | |||||
title : string; | |||||
} | |||||
const data : DataItem[] = ref([ | |||||
{ | |||||
title: 'Ant Design Title 1', | |||||
}, | |||||
{ | |||||
title: 'Ant Design Title 2', | |||||
}, | |||||
{ | |||||
title: 'Ant Design Title 3', | |||||
}, | |||||
{ | |||||
title: 'Ant Design Title 4', | |||||
}, | |||||
]) | |||||
</script> | |||||
<style> | |||||
</style> |
<template> | |||||
<job-search></job-search> | |||||
<job-list></job-list> | |||||
<job-internship></job-internship> | |||||
<job-detail></job-detail> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { ref, onMounted, computed, watch } from 'vue'; | |||||
import JobSearch from '@/components/job/search/index.vue' | |||||
import JobList from '@/components/job/list/index.vue' | |||||
import JobInternship from '@/components/job/internship/index.vue' | |||||
import JobDetail from '@/components/job/detail/index.vue' | |||||
</script> | |||||
<style> | |||||
</style> |
<template> | |||||
</template> | |||||
<script> | |||||
</script> | |||||
<style> | |||||
</style> |
<template> | |||||
</template> | |||||
<script> | |||||
</script> | |||||
<style> | |||||
</style> |
<template> | |||||
</template> | |||||
<script> | |||||
</script> | |||||
<style> | |||||
</style> |
<template> | |||||
</template> | |||||
<script> | |||||
</script> | |||||
<style> | |||||
</style> |
<template> | |||||
</template> | |||||
<script> | |||||
</script> | |||||
<style> | |||||
</style> |