류윤주
2023-11-09
231109 류윤주 tnb 수정
@dacc6cd8fc7e131df8421da2663b244eb743063e
--- client/resources/css/Main.css
+++ client/resources/css/Main.css
... | ... | @@ -2523,8 +2523,8 @@ |
| 2523 | 2523 |
font-size: 1.4rem; |
| 2524 | 2524 |
} |
| 2525 | 2525 |
.keyword-label:checked+label{
|
| 2526 |
- background-color: #444; |
|
| 2527 |
- color: #fff; |
|
| 2526 |
+ background: #d6e6ff; |
|
| 2527 |
+ color: #007aff; |
|
| 2528 | 2528 |
} |
| 2529 | 2529 |
.keyword-wrap{
|
| 2530 | 2530 |
padding: 1rem; |
... | ... | @@ -2534,7 +2534,7 @@ |
| 2534 | 2534 |
grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); |
| 2535 | 2535 |
gap: 1rem; |
| 2536 | 2536 |
} |
| 2537 |
-.select-keyword ul{
|
|
| 2537 |
+/* .select-keyword ul{
|
|
| 2538 | 2538 |
display: grid; |
| 2539 | 2539 |
grid-template-columns: repeat(3,1fr); |
| 2540 | 2540 |
gap: 1rem; |
... | ... | @@ -2546,4 +2546,4 @@ |
| 2546 | 2546 |
|
| 2547 | 2547 |
.selected-keyword span:nth-child(2){
|
| 2548 | 2548 |
cursor: pointer; |
| 2549 |
-}(No newline at end of file) |
|
| 2549 |
+} */(No newline at end of file) |
--- client/resources/css/header.css
+++ client/resources/css/header.css
... | ... | @@ -3,31 +3,30 @@ |
| 3 | 3 |
/* 헤더 */ |
| 4 | 4 |
.header {
|
| 5 | 5 |
width: 100%; |
| 6 |
- /* height: 4.8rem; */ |
|
| 7 |
- float: right; |
|
| 8 |
- |
|
| 9 |
- background-color: #063a6d; |
|
| 6 |
+ background-color: #3f87f7; |
|
| 7 |
+ padding: 1rem 0; |
|
| 10 | 8 |
} |
| 11 |
-.b1400 {
|
|
| 12 |
- width: 1300px; |
|
| 13 |
- display: flex; |
|
| 9 |
+.header ul li{
|
|
| 10 |
+ padding: 0 2rem; |
|
| 11 |
+} |
|
| 12 |
+.header ul li a, |
|
| 13 |
+.header ul li p{
|
|
| 14 |
+ font-size: 1.2rem; |
|
| 15 |
+ color: #fff; |
|
| 16 |
+} |
|
| 14 | 17 |
|
| 15 |
- margin: 0 auto; |
|
| 16 |
- /* border: 1px solid red; */ |
|
| 17 |
- justify-content: flex-end; |
|
| 18 |
- /* padding-right: 30px 0; */ |
|
| 18 |
+.header ul li i{
|
|
| 19 |
+ margin-right: 5px; |
|
| 19 | 20 |
} |
| 20 | 21 |
|
| 21 | 22 |
#input {
|
| 22 |
- /* border: 0; */ |
|
| 23 | 23 |
border: 1px solid red; |
| 24 | 24 |
font-size: 1rem; |
| 25 |
- /* background-color: rgba(25, 25, 25, 0); */ |
|
| 26 | 25 |
cursor: pointer; |
| 27 | 26 |
font-family: "Pretendard-Regular"; |
| 28 |
- |
|
| 29 | 27 |
color: white; |
| 30 | 28 |
} |
| 29 |
+ |
|
| 31 | 30 |
.sub-menu ul li span {
|
| 32 | 31 |
font-family: "Pretendard-Regular"; |
| 33 | 32 |
} |
... | ... | @@ -38,71 +37,17 @@ |
| 38 | 37 |
transform: translateY(20px); |
| 39 | 38 |
font-size: 2rem; |
| 40 | 39 |
font-weight: 900; |
| 41 |
- /* border: 1px solid red; */ |
|
| 42 | 40 |
} |
| 43 | 41 |
.logo span {
|
| 44 | 42 |
color: #2c407f; |
| 45 | 43 |
} |
| 46 |
-.login, |
|
| 47 |
-.join {
|
|
| 48 |
- width: 7rem; |
|
| 49 |
- height: 3rem; |
|
| 50 |
- /* font-size: 0.5rem; */ |
|
| 51 |
- line-height: 3rem; |
|
| 52 |
- text-align: right; |
|
| 53 |
- /* border: 1px solid red; */ |
|
| 54 |
-} |
|
| 55 |
-.login i, |
|
| 56 |
-.join i {
|
|
| 57 |
- font-size: 1rem; |
|
| 58 |
- /* height: 3rem; */ |
|
| 59 |
- /* border: 1px solid red; */ |
|
| 60 |
- margin-right: 0.5rem; |
|
| 44 |
+ |
|
| 45 |
+.login{
|
|
| 46 |
+ border-right: 1px solid #fff; |
|
| 61 | 47 |
} |
| 62 | 48 |
|
| 63 |
-.login::after {
|
|
| 64 |
- content: ""; |
|
| 65 |
- width: 1px; |
|
| 66 |
- border-right: 1px solid white; |
|
| 67 |
- margin-left: 10px; |
|
| 68 |
- /* border: 1px solid #ffffff; */ |
|
| 69 |
-} |
|
| 70 |
-.name {
|
|
| 71 |
- padding: 0.5rem; |
|
| 72 |
- font-size: 1.5rem; |
|
| 73 |
- font-family: "Pretendard-Regular"; |
|
| 74 | 49 |
|
| 75 |
- color: white; |
|
| 76 |
-} |
|
| 77 |
-.b1400 div {
|
|
| 78 |
- margin-right: 2rem; |
|
| 79 |
-} |
|
| 80 | 50 |
|
| 81 |
-.mypage button {
|
|
| 82 |
- font-size: 1.5rem !important; |
|
| 83 |
- padding: 0.5rem; |
|
| 84 |
-} |
|
| 85 |
- |
|
| 86 |
-.header {
|
|
| 87 |
- width: 100%; |
|
| 88 |
- /* height: 40px; */ |
|
| 89 |
- display: flex; |
|
| 90 |
- justify-content: flex-end; |
|
| 91 |
- padding: 0.5rem; |
|
| 92 |
- float: right; |
|
| 93 |
- background-color: #3f87f7; |
|
| 94 |
- /* border: 1px solid red; */ |
|
| 95 |
-} |
|
| 96 |
- |
|
| 97 |
-#input {
|
|
| 98 |
- border: 0; |
|
| 99 |
- background-color: rgba(240, 248, 255, 0); |
|
| 100 |
- cursor: pointer; |
|
| 101 |
- /* border: 1px solid red; */ |
|
| 102 |
- /* padding: 1rem; */ |
|
| 103 |
- color: white; |
|
| 104 |
- font-size: 1.3rem; |
|
| 105 |
-} |
|
| 106 | 51 |
/* 메뉴css */ |
| 107 | 52 |
.w1400 {
|
| 108 | 53 |
width: 100%; |
--- client/views/layout/Header.vue
+++ client/views/layout/Header.vue
... | ... | @@ -1,19 +1,19 @@ |
| 1 | 1 |
<template> |
| 2 | 2 |
<div class="header"> |
| 3 |
- <div class="b1400"> |
|
| 4 |
- <div class="name"> |
|
| 5 |
- <p>테이큰소프트 <span>님</span></p> |
|
| 6 |
- </div> |
|
| 7 |
- <div class="login"> |
|
| 8 |
- <i class="fa-solid fa-user fa-lg" style="color: #ffffff;"></i> |
|
| 9 |
- <router-link to="/Login.page"><button id="input">로그인</button></router-link> |
|
| 10 |
- |
|
| 11 |
- </div> |
|
| 12 |
- |
|
| 13 |
- <div class="join"> |
|
| 14 |
- <i class="fa-solid fa-user-plus fa-lg" style="color: #ffffff;"></i> |
|
| 15 |
- <router-link to="/Join.page"><input type="button" value="회원가입" name="" id="input"></router-link> |
|
| 16 |
- </div> |
|
| 3 |
+ <div class="w1400"> |
|
| 4 |
+ <ul class="flex-end "> |
|
| 5 |
+ <li class="name"> |
|
| 6 |
+ <p>테이큰소프트 <span>님</span></p> |
|
| 7 |
+ </li> |
|
| 8 |
+ <li class="login"> |
|
| 9 |
+ <router-link to="/Login.page"><i class="fa-solid fa-user fa-lg" style="color: #ffffff;"></i> |
|
| 10 |
+ 로그인</router-link> |
|
| 11 |
+ </li> |
|
| 12 |
+ <li class="join"> |
|
| 13 |
+ <router-link to="/Join.page"> <i class="fa-solid fa-user-plus fa-lg" |
|
| 14 |
+ style="color: #ffffff;"></i> 회원가입</router-link> |
|
| 15 |
+ </li> |
|
| 16 |
+ </ul> |
|
| 17 | 17 |
<Menu class="menu" :isActive="isActive"></Menu> |
| 18 | 18 |
</div> |
| 19 | 19 |
</div> |
--- client/views/pages/user/join/Join.vue
+++ client/views/pages/user/join/Join.vue
... | ... | @@ -158,13 +158,16 @@ |
| 158 | 158 |
<span>우리회사 키워드</span> |
| 159 | 159 |
</div> |
| 160 | 160 |
<div> |
| 161 |
- <div class="select-keyword"> |
|
| 161 |
+ <!-- <div class="select-keyword"> |
|
| 162 | 162 |
<ul> |
| 163 | 163 |
<li v-for="(keyword, index) in selectedKeywords" :key="index" class="selected-keyword flex"><span>{{
|
| 164 | 164 |
keyword |
| 165 | 165 |
}}</span><span @click="removeTag(index)">X</span></li> |
| 166 | 166 |
</ul> |
| 167 |
- </div> |
|
| 167 |
+ </div> --> |
|
| 168 |
+ <p v-show="selectedKeywords<2" class="item-style err-text">최소 3개를 선택해주세요.</p> |
|
| 169 |
+ <p v-show="selectedKeywords>6" class="item-style err-text">최대 6개까지 입니다.</p> |
|
| 170 |
+ <p class="item-style err-text">최소 3개 ~ 6개를 선택해주세요.</p> |
|
| 168 | 171 |
<div class="keyword-wrap"> |
| 169 | 172 |
<ul> |
| 170 | 173 |
<li v-for="(keyword, index) in keywords" :key="index"><input type="checkbox" |
... | ... | @@ -172,6 +175,7 @@ |
| 172 | 175 |
keyword }}</label></li> |
| 173 | 176 |
</ul> |
| 174 | 177 |
</div> |
| 178 |
+ |
|
| 175 | 179 |
</div> |
| 176 | 180 |
</div> |
| 177 | 181 |
</div> |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?