Skip to content

Commit

Permalink
Merge branch 'feat/recruitment' into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
Qchengju committed Nov 29, 2024
2 parents d81fe99 + 6630b6c commit 72e88ab
Show file tree
Hide file tree
Showing 11 changed files with 248 additions and 310 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,5 @@ dist-ssr
*.njsproj
*.sln
*.sw?
#lock-package
pnpm-lock.yaml
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
"eslint": "^9.13.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-vue": "^9.29.1",
"husky": "^9.1.6",
"husky": "^9.1.7",
"lint-staged": "^15.2.10",
"sass-embedded": "^1.80.3",
"shadcn-vue": "^0.11.0",
Expand Down
60 changes: 35 additions & 25 deletions src/assets/styles/recruitment.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@

$undertone: #647499;//浅灰 设置为非强调色

*{
margin: 0;
padding: 0;

}
// 复选框样式
.checkbox {
position: relative;
Expand Down Expand Up @@ -36,10 +40,8 @@
.btn-style {
width: 100px;
height: 40px;
background-color: var(--primary);
cursor: pointer;
border: var(--border) 1px solid;

&:hover,
&:active {
color: var(--primary-foreground);
Expand All @@ -48,11 +50,18 @@
}


// 长虚线边框样式
.long-dashed-border {
border-radius: var(--radius);
border: 1px solid transparent;
background: linear-gradient(white,white) padding-box,
repeating-linear-gradient(-45deg,var(--border) 0,var(--border) 0.5em,white 0,white 0.75em);
}


//后台样式
.content {
padding: 20px;
width: 100%;
background-color: var(--background);
position: relative;
}
Expand All @@ -65,11 +74,19 @@
align-items: center;
position: relative;
gap: 20px;

min-width: 920px;
.search-input {
position: absolute;
right: 0;
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
width: 300px;
height: 40px;
@media screen and (max-width: 1300px) {
display: none;
}
}

}

.reset {
Expand All @@ -90,7 +107,6 @@
justify-content: flex-start;
align-items: center;
gap: 20px;

.toggle-button {
width: 100px;
height: 40px;
Expand All @@ -99,22 +115,13 @@

.handle-btns {
position: absolute;
right: 0;
right: 20px;
display: flex;
gap: 20px;

.handle-btn {
width: 100px;
height: 40px;
background-color: var(--primary);
cursor: pointer;
border: var(--border) 1px solid;

&:hover,
&:active {
color: var(--primary-foreground);
border: var(--primary-foreground) 1px solid;
}
@media screen and (max-width: 1300px) {
position: relative;
right: 0;
margin-left: 40px;
}
}
}
Expand All @@ -129,6 +136,7 @@
//卡片展示
.main-content-show{
display: flex;
padding: 20px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
Expand All @@ -139,21 +147,23 @@
position: relative;
top: 20px;
gap: 20px;

@extend .long-dashed-border;
}


//滚动条样式
/* 定义滚动条的轨道样式 */
::-webkit-scrollbar {
width: 2px; /* 滚动条轨道的宽度 */
width: 1px; /* 滚动条轨道的宽度 */
}

/* 定义滚动条的滑块样式 */
::-webkit-scrollbar-thumb {
background-color:var(--accent); /* 滑块的颜色 */
background-color:skyblue; /* 滑块的颜色 */
border-radius: 2px; /* 滑块的圆角 */
}

/* 定义滚动条的轨道样式(当滑块处于悬停状态时) */
::-webkit-scrollbar-track {
background: #f1f1f1; /* 轨道的颜色 */
background: var(--background); /* 轨道的颜色 */
}
62 changes: 46 additions & 16 deletions src/components/recruitment/MessageCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,32 +11,46 @@ import { Button } from '@/components/ui/button'
<CardContent>
<div class="message-show-top">
<div class="message-show-time">
<span>2024-11-22 12:00-13:00</span>
<span class="min-width">
2024-11-22
</span>
<span class="min-width">
12:00-13:00
</span>
</div>
<div class="message-show-address">
<span>
地点:零号楼609
<span class="min-width">
面试地点:
</span>
<span class="min-width inline-block">
零号楼609
</span>
</div>
<div class="message-show-interviewInturn">
<span>
面试轮次:二面
<span class="min-width" >
面试轮次:
</span>
<span class="min-width inline-block" >
二面
</span>
</div>
<div class="message-show-name">
<span>
<span class="min-width">
王科林
</span>
</div>
</div>
<div class="message-show-bottom">
<div class="message-show-interviewOfficer">
<span>
面试官:贝利亚 贝利亚 贝利亚
<span class="min-width">
面试官:
</span>
<span class="min-width">
贝利亚 贝利亚 贝利亚
</span>
</div>
<div class="message-show-staus">
<span>
<span class="min-width">
已淘汰
</span>
</div>
Expand All @@ -51,35 +65,46 @@ import { Button } from '@/components/ui/button'
<style lang="scss" scoped>
@use "@/assets/styles";
@use "@/assets/styles/recruitment";
.min-width{
min-width: 60px;
}
.message-show{
width: 100%;
height: 150px;
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
position: relative;
cursor: pointer;
border-radius: var(--radius);
&:hover{
border-color: var(--accent-foreground);
background-color: var(--accent);
}
}
.message-show-top{
display: flex;
display: inline-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 100%;
min-width: 370px;
height: 80px;
margin-bottom: 10px;
gap: 20px;
font-size: 0.8rem;
.message-show-name{
text-align: center;
width: 80px;
min-width: 70px;
border: 1px solid skyblue;
padding: 5px 10px;
border-radius: 15px;
margin-right: 10px;
}
.message-show-interviewInturn{
min-width:70px;
}
}
.message-show-bottom{
Expand All @@ -93,17 +118,22 @@ import { Button } from '@/components/ui/button'
font-size: 0.8rem;
}
.message-show-button{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 100px;
height: 100%;
margin-top: 2em;
position: absolute;
right: 16px;
// margin-left: 4em;
//
gap: 10px;
right: 30px;
top: 30px;
@media screen and (max-width: 1300px) {
position: relative;
margin-left: 1em;
}
}
.message-show-staus{
text-align: center;
Expand Down
84 changes: 84 additions & 0 deletions src/components/recruitment/QuickShowCard.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<script setup lang="ts">
import { Card } from "@/components/ui/card";
import { defineProps } from "vue";
import { Icon } from "@iconify/vue";
type cardMessage={
label:string,
number:number,
}
const props = defineProps<
{ quickShowItem : cardMessage,}
>()
</script>
<template>
<Card class="card-message-show" >
<div class="card-message-show-content">
<div class="card-message-show-content-left">
<div class="message" >{{ quickShowItem.label }}</div>
<div class="number">{{ quickShowItem.number }}</div>
</div>
<div class="card-message-show-content-right">
<Icon class="svg" icon="lucide:hand" />
</div>
</div>
</Card>
</template>
<style lang="scss" scoped >
@use '@/assets/styles';
.card-message-show{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
justify-content:center;
align-items: center;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px;
margin: 10px;
cursor: pointer;
}
.card-message-show-content{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.card-message-show-content-left{
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 10px;
.message{
min-width: 50px;
font-size: 1em;
font-weight: 500;
margin-bottom: 10px;
}
.number{
font-size: 1.2em;
font-weight: 500;
margin-top: 10px;
}
}
.card-message-show-content-right{
position: relative;
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.svg{
position: absolute;
right:20px;
}
}
</style>
Loading

0 comments on commit 72e88ab

Please sign in to comment.