128 lines
3.8 KiB
Vue
128 lines
3.8 KiB
Vue
|
|
<template>
|
|
<div class="container">
|
|
<AppHead/>
|
|
<div class="banner">
|
|
<div class="banner_main">
|
|
<h2>网上公开</h2>
|
|
<p>安全第一 预防为主 综合治理</p>
|
|
</div>
|
|
</div>
|
|
<div class="new_container">
|
|
<div class="left">
|
|
<div class="top">人力资源</div>
|
|
<div class="main">
|
|
<div
|
|
v-for="(item, index) in jobItems"
|
|
:key="index"
|
|
class="list"
|
|
:class="{ active: activeIndex === index }"
|
|
@click="activeIndex = index">
|
|
{{item}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right_main">
|
|
<div v-if="activeIndex === 0">
|
|
<p>公司用人理念：</p>
|
|
<p> 人才理念：德才兼备，人尽其才，才尽其用</p>
|
|
<p> 德才兼备——才者，德之资也；德者，才之帅也。"德"--具备较高的基本素质，"才"--履行岗位职责的本能力。古人云：尺有所短，寸有所长。选人用人，不求兼备，但以德为基先，以德促才，以才育德。通过提高企业人才素质，构建德才兼备的人才结构。</p>
|
|
<p> 人尽其才——人有长短，不分大小，德才兼顾，内外兼收。知人善任，人尽其才。慧眼识才，热心爱才，气度用才，胆略举才，胸怀容才。深入发掘每个员工身上的闪光点，充分发挥每个员工的长处，最大限度的整合企业的人才资源，为企业的持续发展提供强劲的动力，推动企业步入健康发展的快车道。</p>
|
|
<p> 才尽其用——因其材以取之，审其能以任之，用其所长，掩其所短。知人善任，唯才是举，适才适岗，适岗适酬。以敏锐的洞察力，发现每一位员工的个性特点，做到量才而用，将人才放在最合适的位置上，把员工的优势应用到最适合的工作中，使贤者在其位，能者在其职，各安其职，扬长避短，各尽其才。</p>
|
|
</div>
|
|
<div v-if="activeIndex === 1">
|
|
<p>招聘信息：</p>
|
|
<p> 正在招聘中，具体职位信息请关注我们的招聘网站...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<AppFoot/>
|
|
<right/>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
const jobItems=["理念与政策", "招聘信息"];
|
|
const activeIndex = ref(0);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
background: #f6f8fa;
|
|
|
|
.banner {
|
|
width: 100%;
|
|
height: 400px;
|
|
background: url("@/assets/images/newbanner.png") no-repeat top center;
|
|
.banner_main {
|
|
width: 1400px;
|
|
margin: 0 auto;
|
|
padding-top: 180px;
|
|
h2 {
|
|
font-size: 60px;
|
|
color: #ffffff;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
.new_container {
|
|
width: 1400px;
|
|
margin: 20px auto;
|
|
display: flex;
|
|
.left{
|
|
width: 250px;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
.top{
|
|
width: 100%;
|
|
background: #3f79ff;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
line-height: 40px;
|
|
border-radius: 4px 4px 0 0;
|
|
font-weight: bold;
|
|
}
|
|
.main{
|
|
.list{
|
|
border-bottom: 1px solid #eeeeee;
|
|
padding: 10px 5px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
color: #222222;
|
|
&:hover{
|
|
background: #cddcff;
|
|
}
|
|
|
|
}
|
|
.active{
|
|
background: #cddcff;
|
|
}
|
|
&:last-child{
|
|
border-bottom: none;
|
|
}
|
|
|
|
}
|
|
}
|
|
.right_main{
|
|
flex: 1;
|
|
margin-left: 20px;
|
|
background: #ffffff;
|
|
padding: 10px;
|
|
color: #333333;
|
|
line-height: 2;
|
|
text-indent: 2rem;
|
|
min-height: 500px;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|