Commit @cdda3f078c5928041b8a883b315faa23d097f54d

최정임 05-02

250502 최정임 메인 select css수정

@cdda3f078c5928041b8a883b315faa23d097f54d

8dba234

cdda3f0

client/resources/css/user/main.css

--- client/resources/css/user/main.css

+++ client/resources/css/user/main.css


             }
         }
     }
+   
+    /* .new-pic, .new-video, .new-update {flex-direction: column; gap: 10px;} */
+}
+@media screen and (max-width: 1500px) {
     .new-update {
         & .info {
             p {
                 width: min-content !important;
             }}}
-    /* .new-pic, .new-video, .new-update {flex-direction: column; gap: 10px;} */
 }
-
 .all-menu {
     position: absolute;
     top: 0;

             font-weight: bold;
         }
     }
-
-    select {
-        border: 0;
+    /* 셀렉트박스 */
+    .custom-select {
+        position: relative;
+        width: 145px;
         font-size: 20px;
         font-family: "Pretendard-L";
         color: #555;
-        appearance: none;
-        background-image: url(../../images/icon/select.png);
-        background-repeat: no-repeat;
-        background-position: right 0px center;
+        cursor: pointer;
+      }
+      
+      .selected-option {
+        padding: 10px 15px;
+        background: #fff url(../../images/icon/select.png) no-repeat right center;
         background-size: 17px;
-
-        option {
-
-            font-family: "Pretendard-L";
-        }
-    }
+      }
+      
+      .select-options {
+        position: absolute;
+        width: 100%;
+        border: 1px solid #ccc;
+        background: #fff;
+        max-height: 165px;
+        overflow-y: auto;
+        z-index: 10;
+        top: 42px;
+      }
+      
+      .select-options li {
+        padding: 10px 15px;
+        cursor: pointer;
+      }
+      
+      .select-options li:hover {
+        background-color: #f0f0f0;
+      }
 }
 
 .search-wrap {

 
 @media screen and (max-width: 1220px) {
     .search-wrap {
-        bottom: 80px !important;
+        bottom: 20% !important;
         .search-area {
             width: auto;
         }

8dba234

cdda3f0

client/resources/css/user/sub.css

--- client/resources/css/user/sub.css

+++ client/resources/css/user/sub.css


         textarea {
             min-height: 425px;
             width: 100%;
+            padding: 15px;
         }
-
+        textarea:focus {
+            outline: none;
+            box-shadow: none;
+          }
         .category-add {
             width: 72px;
             height: 29px;

         height: 20px;
         background: #fff;
         border-radius: 50%;
-        transition: left 0.3s ease, transform 0.3s ease;
-        /* Smooth transition for the toggle ball */
     }
 
     /* When the input is checked */

8dba234

cdda3f0

client/views/pages/main/Main.vue

--- client/views/pages/main/Main.vue

+++ client/views/pages/main/Main.vue


     </swiper> -->
     <div class="search-wrap">
       <div class="search-area">
-        <select name="" id="" v-model="searchRecord">
-          <option value="all" selected>전체</option>
-          <option value="pic">사진</option>
-          <option value="video">영상</option>
-          <option value="media">미디어 영상</option>
-          <option value="bodo">보도자료</option>
-        </select>
+        <div class="custom-select" @click="toggleDropdown">
+  <div class="selected-option">{{ getSelectedText }}</div>
+  <ul v-if="isDropdownOpen" class="select-options">
+    <li v-for="option in options" :key="option.value" @click.stop="selectOption(option)">
+      {{ option.text }}
+    </li>
+  </ul>
+</div>
         <div class="line"></div>
         <div style="width: 60%;"><input type="text" placeholder="검색어를 입력하세요" v-model="searchText"
             @keyup.enter="fnMoveTo('TotalSearch')"></div>

       mediaContents: [], // 신규 미디어 영상
       bodoContents: [], // 신규 보도자료
       searchRecord: 'all', // 통합검색 Selectbox 내용
+      isDropdownOpen: false,
+    options: [
+      { value: 'all', text: '전체' },
+      { value: 'pic', text: '사진' },
+      { value: 'video', text: '영상' },
+      { value: 'media', text: '미디어 영상' },
+      { value: 'bodo', text: '보도자료' },
+    ],
       searchText: null, // 통합검색 Input 내용
       icons: [
         {

   created() {
     this.fnFindAllSttuses();
   },
+  computed: {
+  getSelectedText() {
+    const selected = this.options.find(opt => opt.value === this.searchRecord);
+    return selected ? selected.text : '';
+  }
+},
   methods: {
+    toggleDropdown() {
+    this.isDropdownOpen = !this.isDropdownOpen;
+  },
+  selectOption(option) {
+    this.searchRecord = option.value;
+    this.isDropdownOpen = false;
+  },
     selectTab(index) {
       this.selectedTab = index; // Update the selected tab index
     },

Add a comment

Open 0
Closed 0

List

...	...	@@ -44,14 +44,16 @@
44	44	}
45	45	}
46	46	}
	47	+
	48	+ /* .new-pic, .new-video, .new-update {flex-direction: column; gap: 10px;} */
	49	+}
	50	+@media screen and (max-width: 1500px) {
47	51	.new-update {
48	52	& .info {
49	53	p {
50	54	width: min-content !important;
51	55	}}}
52		- /* .new-pic, .new-video, .new-update {flex-direction: column; gap: 10px;} */
53	56	}
54		-
55	57	.all-menu {
56	58	position: absolute;
57	59	top: 0;
...	...	@@ -206,23 +208,41 @@
206	208	font-weight: bold;
207	209	}
208	210	}
209		-
210		- select {
211		- border: 0;
	211	+ /* 셀렉트박스 */
	212	+ .custom-select {
	213	+ position: relative;
	214	+ width: 145px;
212	215	font-size: 20px;
213	216	font-family: "Pretendard-L";
214	217	color: #555;
215		- appearance: none;
216		- background-image: url(../../images/icon/select.png);
217		- background-repeat: no-repeat;
218		- background-position: right 0px center;
	218	+ cursor: pointer;
	219	+ }
	220	+
	221	+ .selected-option {
	222	+ padding: 10px 15px;
	223	+ background: #fff url(../../images/icon/select.png) no-repeat right center;
219	224	background-size: 17px;
220		-
221		- option {
222		-
223		- font-family: "Pretendard-L";
224		- }
225		- }
	225	+ }
	226	+
	227	+ .select-options {
	228	+ position: absolute;
	229	+ width: 100%;
	230	+ border: 1px solid #ccc;
	231	+ background: #fff;
	232	+ max-height: 165px;
	233	+ overflow-y: auto;
	234	+ z-index: 10;
	235	+ top: 42px;
	236	+ }
	237	+
	238	+ .select-options li {
	239	+ padding: 10px 15px;
	240	+ cursor: pointer;
	241	+ }
	242	+
	243	+ .select-options li:hover {
	244	+ background-color: #f0f0f0;
	245	+ }
226	246	}
227	247
228	248	.search-wrap {
...	...	@@ -594,7 +614,7 @@
594	614
595	615	@media screen and (max-width: 1220px) {
596	616	.search-wrap {
597		- bottom: 80px !important;
	617	+ bottom: 20% !important;
598	618	.search-area {
599	619	width: auto;
600	620	}

...	...	@@ -671,8 +671,12 @@
671	671	textarea {
672	672	min-height: 425px;
673	673	width: 100%;
	674	+ padding: 15px;
674	675	}
675		-
	676	+ textarea:focus {
	677	+ outline: none;
	678	+ box-shadow: none;
	679	+ }
676	680	.category-add {
677	681	width: 72px;
678	682	height: 29px;
...	...	@@ -1398,8 +1402,6 @@
1398	1402	height: 20px;
1399	1403	background: #fff;
1400	1404	border-radius: 50%;
1401		- transition: left 0.3s ease, transform 0.3s ease;
1402		- /* Smooth transition for the toggle ball */
1403	1405	}
1404	1406
1405	1407	/* When the input is checked */

...	...	@@ -28,13 +28,14 @@
28	28	</swiper> -->
29	29	<div class="search-wrap">
30	30	<div class="search-area">
31		- <select name="" id="" v-model="searchRecord">
32		- <option value="all" selected>전체</option>
33		- <option value="pic">사진</option>
34		- <option value="video">영상</option>
35		- <option value="media">미디어 영상</option>
36		- <option value="bodo">보도자료</option>
37		- </select>
	31	+ <div class="custom-select" @click="toggleDropdown">
	32	+ <div class="selected-option">{{ getSelectedText }}</div>
	33	+ <ul v-if="isDropdownOpen" class="select-options">
	34	+ <li v-for="option in options" :key="option.value" @click.stop="selectOption(option)">
	35	+ {{ option.text }}
	36	+ </li>
	37	+ </ul>
	38	+</div>
38	39	<div class="line"></div>
39	40	<div style="width: 60%;"><input type="text" placeholder="검색어를 입력하세요" v-model="searchText"
40	41	@keyup.enter="fnMoveTo('TotalSearch')"></div>
...	...	@@ -258,6 +259,14 @@
258	259	mediaContents: [], // 신규 미디어 영상
259	260	bodoContents: [], // 신규 보도자료
260	261	searchRecord: 'all', // 통합검색 Selectbox 내용
	262	+ isDropdownOpen: false,
	263	+ options: [
	264	+ { value: 'all', text: '전체' },
	265	+ { value: 'pic', text: '사진' },
	266	+ { value: 'video', text: '영상' },
	267	+ { value: 'media', text: '미디어 영상' },
	268	+ { value: 'bodo', text: '보도자료' },
	269	+ ],
261	270	searchText: null, // 통합검색 Input 내용
262	271	icons: [
263	272	{
...	...	@@ -301,7 +310,20 @@
301	310	created() {
302	311	this.fnFindAllSttuses();
303	312	},
	313	+ computed: {
	314	+ getSelectedText() {
	315	+ const selected = this.options.find(opt => opt.value === this.searchRecord);
	316	+ return selected ? selected.text : '';
	317	+ }
	318	+},
304	319	methods: {
	320	+ toggleDropdown() {
	321	+ this.isDropdownOpen = !this.isDropdownOpen;
	322	+ },
	323	+ selectOption(option) {
	324	+ this.searchRecord = option.value;
	325	+ this.isDropdownOpen = false;
	326	+ },
305	327	selectTab(index) {
306	328	this.selectedTab = index; // Update the selected tab index
307	329	},

Delete comment