|
@@ -1,7 +1,95 @@
|
|
|
<template>
|
|
|
<div class="home-container">
|
|
|
-
|
|
|
- <el-row :gutter="15" class="home-card-one mb15">
|
|
|
+ <el-row :gutter="15" class="home-card-one">
|
|
|
+ <!-- 左侧主要内容区域 -->
|
|
|
+ <el-col :span="18">
|
|
|
+ <el-row :gutter="12" class="home-card-one mb15">
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <div class="home-card-one-title">上午好,刘老师。这是今日的人才情况动态。</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10" class="home-card-two mb15">
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <div class="home-card-item" style="margin-bottom: 10px;">
|
|
|
+ <div class="home-card-item-title">待办事项</div>
|
|
|
+ <div class="todo-list">
|
|
|
+ <div class="todo-item">
|
|
|
+ <div class="todo-item-left">
|
|
|
+ <span class="todo-tag">4位候选人待处理</span>
|
|
|
+ <span class="todo-text">2025年6月12日 15:00最新投递</span>
|
|
|
+ </div>
|
|
|
+ <div class="todo-item-right">
|
|
|
+ <el-icon size="20"><ArrowRightBold /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">
|
|
|
+ <div class="home-card-item">
|
|
|
+ <div style="height: 100%" ref="homeLineRef"></div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10" class="home-media">
|
|
|
+ <div class="home-card-item">
|
|
|
+ <div style="height: 100%" ref="homePieRef"></div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- 右侧辅助区域 -->
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="home-right" style="margin-top: 75px;">
|
|
|
+ <div class="home-card-item">
|
|
|
+ <!-- <div class="home-card-item-title">快捷操作</div> -->
|
|
|
+ <div class="home-card-item-content">
|
|
|
+ <el-select placeholder="Select" style="margin-right: 5px;">
|
|
|
+ <el-option label="Option 1" value="1" />
|
|
|
+ <el-option label="Option 2" value="2" />
|
|
|
+ <el-option label="Option 3" value="3" />
|
|
|
+ </el-select>
|
|
|
+ <el-select placeholder="Select" style="margin-right: 5px;">
|
|
|
+ <el-option label="Option 1" value="1" />
|
|
|
+ <el-option label="Option 2" value="2" />
|
|
|
+ <el-option label="Option 3" value="3" />
|
|
|
+ </el-select>
|
|
|
+ <el-select placeholder="Select" style="margin-right: 5px;">
|
|
|
+ <el-option label="Option 1" value="1" />
|
|
|
+ <el-option label="Option 2" value="2" />
|
|
|
+ <el-option label="Option 3" value="3" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <p style="margin-top: 20px; font-size: 12px; color:#808080;">通过情况概览</p>
|
|
|
+ <div class="demo-collapse">
|
|
|
+ <el-collapse >
|
|
|
+ <el-collapse-item title="在此期间共计 2 位候选人通过面试" name="1">
|
|
|
+ <div class="score-list">
|
|
|
+ <div class="score-item">
|
|
|
+ <div class="score-name">张老三</div>
|
|
|
+ <div class="score-name">男</div>
|
|
|
+ <div class="score-name">25岁</div>
|
|
|
+ <div class="score-name">2年经验</div>
|
|
|
+ <div class="score-value">82%</div>
|
|
|
+ </div>
|
|
|
+ <div class="score-item">
|
|
|
+ <div class="score-name">李老四</div>
|
|
|
+ <div class="score-name">男</div>
|
|
|
+ <div class="score-name">42岁</div>
|
|
|
+ <div class="score-name">5年经验</div>
|
|
|
+ <div class="score-value">65%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+ <p style="margin-top: 20px; font-size: 12px; color:#808080;">招聘情况总览</p>
|
|
|
+ <p style="font-size: 14px; color:#808080;">共计 10 位候选人参与面试,通过率 <span style="color: #409EFF;">20%</span></p>
|
|
|
+ <!-- 这里可以添加右侧内容 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
<el-col
|
|
|
:xs="24"
|
|
|
:sm="12"
|
|
@@ -26,43 +114,6 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <el-row :gutter="15" class="home-card-two mb15">
|
|
|
- <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
|
|
|
- <div class="home-card-item">
|
|
|
- <div style="height: 100%" ref="homeLineRef"></div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-media">
|
|
|
- <div class="home-card-item">
|
|
|
- <div style="height: 100%" ref="homePieRef"></div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <!-- <el-row :gutter="15" class="home-card-three">
|
|
|
- <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
|
|
|
- <div class="home-card-item">
|
|
|
- <div class="home-card-item-title">快捷导航工具</div>
|
|
|
- <div class="home-monitor">
|
|
|
- <div class="flex-warp">
|
|
|
- <div class="flex-warp-item" v-for="(v, k) in homeThree" :key="k">
|
|
|
- <div class="flex-warp-item-box" :class="`home-animation${k}`">
|
|
|
- <div class="flex-margin">
|
|
|
- <i :class="v.icon" :style="{ color: v.iconColor }"></i>
|
|
|
- <span class="pl5">{{ v.label }}</span>
|
|
|
- <div class="mt10">{{ v.value }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="home-media">
|
|
|
- <div class="home-card-item">
|
|
|
- <div style="height: 100%" ref="homeBarRef"></div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -124,7 +175,7 @@ export default defineComponent({
|
|
|
color2: '--next-color-success-lighter',
|
|
|
color3: '--el-color-success',
|
|
|
},
|
|
|
- {
|
|
|
+ /* {
|
|
|
num1: '0',
|
|
|
num2: '0',
|
|
|
num3: '问题总数',
|
|
@@ -132,7 +183,7 @@ export default defineComponent({
|
|
|
color1: '#6690F9',
|
|
|
color2: '--next-color-warning-lighter',
|
|
|
color3: '--el-color-warning',
|
|
|
- },
|
|
|
+ }, */
|
|
|
{
|
|
|
num1: '0',
|
|
|
num2: '0',
|
|
@@ -606,11 +657,17 @@ export default defineComponent({
|
|
|
<style scoped lang="scss">
|
|
|
$homeNavLengh: 8;
|
|
|
.home-container {
|
|
|
- padding-top: 10px;
|
|
|
+ padding: 15px;
|
|
|
overflow: hidden;
|
|
|
.home-card-one,
|
|
|
.home-card-two,
|
|
|
.home-card-three {
|
|
|
+ .home-card-one-title{
|
|
|
+ padding: 20px 0px;
|
|
|
+ color:#808080;
|
|
|
+ font-size: 14px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ }
|
|
|
.home-card-item {
|
|
|
width: 100%;
|
|
|
height: 130px;
|
|
@@ -691,5 +748,114 @@ $homeNavLengh: 8;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .home-right {
|
|
|
+ .home-card-item {
|
|
|
+ height: 500px;
|
|
|
+ border-radius: 16px;
|
|
|
+ transition: all ease 0.3s;
|
|
|
+ padding: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: var(--el-color-white);
|
|
|
+ color: var(--el-text-color-primary);
|
|
|
+ border: 1px solid var(--next-border-color-light);
|
|
|
+ .home-card-item-content{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ ::v-deep(.el-collapse-item__header){
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ ::v-deep(.el-collapse-item__wrap){
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ ::v-deep(.el-collapse-item__content){
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ &-title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ height: 30px;
|
|
|
+ border-bottom: 1px solid var(--next-border-color-light);
|
|
|
+ padding-bottom: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 2px 12px var(--next-color-dark-hover);
|
|
|
+ transition: all ease 0.3s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 响应式处理
|
|
|
+ @media screen and (max-width: 1200px) {
|
|
|
+ .el-col-18 {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .el-col-6 {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+ .home-right .home-card-item {
|
|
|
+ height: auto;
|
|
|
+ min-height: 300px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .todo-list {
|
|
|
+ padding: 10px 20px;
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-left: 50px;
|
|
|
+ .todo-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px 0;
|
|
|
+ border-bottom: 1px solid var(--next-border-color-light);
|
|
|
+ .todo-item-left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ .todo-tag {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .todo-date {
|
|
|
+ color: var(--el-text-color-secondary);
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-checkbox__label) {
|
|
|
+ color: var(--el-text-color-primary);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .score-list {
|
|
|
+ padding: 10px 0;
|
|
|
+ .score-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px 15px;
|
|
|
+ margin: 5px 0;
|
|
|
+ background: var(--el-fill-color-light);
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ .score-name {
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--el-text-color-primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .score-value {
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|