localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

휴가 수정

Browse Source
This commit is contained in:
dyhj625 2025-03-10 15:38:12 +09:00
parent 915e2476e3
commit c30ccea258
2 changed files with 57 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
public/css/custom.css
View File

@ -106,13 +106,14 @@ cursor: not-allowed !important;
padding-bottom: 20px;
}
.vac-modal-content {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
max-width: 500px;
width: 100%;
position: relative;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.1),
0px 4px 0px rgba(0, 0, 0, 0);
max-width: 500px;
width: 100%;
position: relative;
}
.vac-modal-body {
max-height: 140px;
@ -211,20 +212,25 @@ cursor: not-allowed !important;
.profile-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
gap: 15px;
padding: 0;
margin-left: 12%;
list-style: none;
justify-content: flex-start;
cursor: pointer;
}
.profile-img {
transition: all 0.2s ease-in-out;
.profile-item {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
width: calc(33.33% - 10px);
}
/* 오전/오후반차,저장버튼 */
/* 버튼 기본 스타일 */
.vac-btn {
width: 50px;
height: 50px;
width: 60px;
height: 60px;
border-radius: 50%;
font-size: 20px;
display: flex;
@ -281,8 +287,8 @@ cursor: not-allowed !important;
/* 버튼 기본 (비활성화일 때 기본 녹색) */
.vac-btn-success {
font-size: 24px;
width: 50px;
height: 50px;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
@ -313,7 +319,7 @@ cursor: not-allowed !important;
}
/* 작은 화면에서 버튼 크기 조정 */
@media (max-width: 1600px) {
@media (max-width: 1700px) {
.count-btn {
width: 28px;
height: 28px;
@ -349,6 +355,28 @@ cursor: not-allowed !important;
text-align: center;
margin-bottom: 5px;
}
.vac-btn {
width: 50px;
height: 50px;
font-size: 18px;
}
.vac-btn-success {
font-size: 20px;
width: 50px;
height: 50px;
}
}
@media (max-width: 1500px) {
.close-btn {
top: 5px;
right: 5px;
font-size: 13px;
}
.vacation-item {
font-size: 11px;
text-align: center;
margin-bottom: 5px;
}
.vac-btn {
width: 40px;
height: 40px;
@ -362,7 +390,6 @@ cursor: not-allowed !important;
}
.grayscaleImg {
filter: grayscale(100%);
}

23
src/components/vacation/ProfileList.vue
View File

@ -1,10 +1,11 @@
<template>
<div class="card-body d-flex justify-content-center m-n5">
<ul class="list-unstyled profile-list">
<ul class="profile-list">
<li
v-for="(user, index) in sortedUserList"
:key="index"
:class="{ disabled: user.disabled }"
class="profile-item"
:class="{ newRow: (index + 1) % 4 === 0 }"
@click="$emit('profileClick', user)"
data-bs-placement="top"
:aria-label="user.MEMBERSEQ"
@ -91,20 +92,20 @@ const showImage = (event) => (event.target.style.visibility = "visible");
const profileSize = computed(() => {
const totalUsers = userList.value.length;
if (windowWidth.value >= 1650) {
if (totalUsers <= 10) return "60px";
if (totalUsers <= 15) return "53px";
if (windowWidth.value >= 1850) {
if (totalUsers <= 10) return "80px";
if (totalUsers <= 15) return "60px";
return "45px";
} else if (windowWidth.value >= 1400) {
} else if (windowWidth.value >= 1500) {
if (totalUsers <= 10) return "60px";
if (totalUsers <= 15) return "40px";
return "30px";
} else if (windowWidth.value >= 900) {
if (totalUsers <= 10) return "48px";
if (totalUsers <= 15) return "30px";
return "20px";
} else if (windowWidth.value >= 1024) {
if (totalUsers <= 10) return "40px";
if (totalUsers <= 15) return "30px";
return "20px";
} else {
return "30px";
return "35px";
}
});