저장하기
@@ -113,33 +117,31 @@
text-align: center;
}
-.image-upload-container,
-.activity-info,
.category-box,
.experience-container,
.pmi-container {
margin-bottom: 20px;
}
-.activity-name-container {
- margin-bottom: 20px;
-
+input[type="text"],
+input[type="date"] {
+ width: 70%;
+ padding: 10px;
+ background-color: white;
+ border: transparent;
+ resize: none;
+ font-size: 13px;
}
-
-input[type="text"],
-input[type="date"],
textarea {
width: 100%;
padding: 10px;
- margin-top: 5px;
background-color: white;
- border-radius: 5px;
+ border: transparent;
resize: none;
font-size: 13px;
}
-.image-upload-container,
.star-box,
.pmi-box {
background-color: white;
@@ -147,37 +149,44 @@ textarea {
border-radius: 10px;
}
-.activity-info{
+.activity-name-container,
+.activity-date-container {
background-color: white;
padding: 20px;
- border-radius: 10px;
+ padding-top: 10px;
+ padding-bottom: 8px;
+ border-radius: 8px;
display: flex;
- flex-direction: column;
+ margin-bottom: 10px;
+ justify-content: space-between;
+ align-items: center;
}
.tag-container {
display: flex;
- flex-wrap: wrap;
+ flex-wrap: wrap;
margin-top: 10px;
- font-size: 12px;
+ font-size: 11px;
+ font-weight: 100;
}
-.tag-div {
+.tag-item {
display: inline-block;
- margin: 3px;
- padding: 5px 10px;
+ padding: 3px 8px;
border-radius: 40px;
background-color: white;
transition: background-color 0.3s;
border: 1px solid #eec092;
+ cursor: pointer;
+ margin: 2px;
}
-.tag-div.active {
- background-color: #f7c088;
+.tag-item.active {
+ background-color: #f6b87a;
}
-.tag-div:hover {
- background-color: #f7c088;
+.tag-item:hover {
+ background-color: #f6b87a;
cursor: pointer;
}
@@ -198,9 +207,17 @@ textarea {
margin-left: 10px;
background-color: #f6b87a;
color: black;
- padding: 5px 10px;
+ padding: 4px 8px;
border-radius: 20px;
- font-size: 13px;
+ font-size: 11px;
+ margin-top: 2px;
+}
+
+.dropdown-arrow {
+ width: 16px;
+ height: auto;
+ margin-left: auto;
+ margin-right: 13px;
}
.button-container {
@@ -210,7 +227,7 @@ textarea {
.save-button {
width: 160px;
- margin-top: 20px;
+ margin-top: 50px;
padding-left: 16px;
padding-right: 16px;
padding-top: 8px;
@@ -230,76 +247,34 @@ textarea {
cursor: pointer;
}
-.experience-container h3,
-.pmi-container h3 {
- font-size: 15px;
- color: #ff7f00;
- margin-bottom: 10px;
+h3 {
+ font-size: 15px;
+ color: #FF7F00;
margin-top: 10px;
- white-space: nowrap;
- padding: 0;
-}
-
-h3{
- font-size: 15px;
- color: #ff7f00;
- margin: 0;
- white-space: nowrap;
- padding: 0;
font-family: 'NanumSquareRound', sans-serif;
}
h2 {
- font-size: 16px;
- color: #ff7f00;
- margin-bottom: 10px;
- padding: 0;
- font-family: 'NanumSquareRound', sans-serif;
-}
-
-.category-box h2{
margin: 0;
+ color: #FF7F00;
+ font-size: 17px;
+ font-family: 'NanumSquareRound', sans-serif;
}
-p {
- margin:0;
- font-size: 14px;
- word-break: break-word;
- padding: 0;
-}
-
-.experience-container p,
-.pmi-container p {
- margin-bottom: 15px;
-}
-
-
label {
font-size: 15px;
+ font-family: 'NanumSquareRound', sans-serif;
}
-.delete-image-btn {
- position: absolute;
- top: 5px;
- right: 5px;
- color: black;
- background: none;
- font-size: 15px;
- cursor: pointer;
- transition: color 0.3s;
-}
-
-
-.delete-image-btn:hover {
- color:#d9d9d9;
-}
-
-
.image-preview-container {
display: flex;
flex-wrap: wrap;
- gap: 10px;
+ gap: 15px;
width: 100%;
+ background-color: white;
+ padding: 20px;
+ border-radius: 10px;
+ margin-bottom: 8px;
}
.image-preview-card {
@@ -315,26 +290,52 @@ label {
object-fit: contain; /* 이미지가 컨테이너 내에서 비율을 유지하면서 크기 조정 */
}
+.delete-image-btn {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ color: black;
+ border: none;
+ background: none; /* 배경색 제거 */
+ font-size: 16px; /* X 아이콘이 더 잘 보이도록 크기 조정 */
+ cursor: pointer;
+ transition: color 0.3s; /* 색상 전환 애니메이션 추가 */
+}
+
+
+.delete-image-btn:hover {
+ color: white;
+}
+
+/* 기본 input[type="file"] 숨기기 */
input[type="file"] {
display: none;
}
-.custom-file-upload {
- background-color: #faf5f0;
- color: #f3ab62;
- padding: 10px 128px;
- font-size: 13px;
- border-radius: 5px;
- cursor: pointer;
- margin-top: 10px;
- transition: background-color 0.3s ease;
- margin-bottom: 10px;
+.image-upload-title{
+ background-color: white;
+ padding-left: 20px;
+ padding-top: 12px;
+ padding-bottom: 5px;
+ border-radius: 10px;
+ margin-bottom: 8px;
+ margin-top: 40px;
}
-.custom-file-upload:hover {
- background-color: #f5eadf;
+.custom-file-upload {
+ background-color: white;
+ padding: 60px;
+ border-radius: 10px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
}
+.upload-icon {
+ width: 40px;
+ height: auto;
+}
-
-
+
\ No newline at end of file
diff --git a/src/views/akopolio/Edit/edit.js b/src/views/akopolio/Edit/edit.js
index 0d9a9b5..7433cb2 100644
--- a/src/views/akopolio/Edit/edit.js
+++ b/src/views/akopolio/Edit/edit.js
@@ -49,9 +49,10 @@ export default {
const activityDate = ref('');
const selectedTags = ref([]); // 초기값 배열로 설정
const tags = ref([
- '전공', '교양', '교내동아리', '교외동아리', '학회', '봉사활동', '인턴', '아르바이트',
- '대외활동', '서포터즈', '기자단', '강연/행사', '스터디', '부트캠프', '프로젝트',
- '연구', '학생회', '기타',
+ '전공', '교양', '교내동아리', '교외동아리', '학회', '봉사활동',
+ '인턴', '아르바이트', '대외활동', '서포터즈', '기자단', '기타',
+ '강연/행사', '스터디', '부트캠프', '프로젝트', '연구',
+ '학생회'
]);
const images = ref([]); // 초기값 배열로 설정
const star = ref({
diff --git a/src/views/akopolio/create/akopolioCreate.vue b/src/views/akopolio/create/akopolioCreate.vue
index 5cca151..52e06e3 100644
--- a/src/views/akopolio/create/akopolioCreate.vue
+++ b/src/views/akopolio/create/akopolioCreate.vue
@@ -23,9 +23,14 @@
분야 설정
- {{ tag }}
+ #{{ tag }}
+
![down arrow]()
@@ -36,7 +41,7 @@
:class="{ active: selectedTags.includes(tag) }"
class="tag-item"
>
- {{ tag }}
+ #{{ tag }}