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

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

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