Commit @ac7b397f6dc4437d8ecc9d01ee66e22e4e8d8a14

최정임 05-29

250529 최정임 css 수정

@ac7b397f6dc4437d8ecc9d01ee66e22e4e8d8a14

4614698

ac7b397

client/resources/css/user/sub.css

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

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


     top: 1rem;
     right: 1rem;
     z-index: 5;
-    padding: 5px 10px;
+    padding: 8px 15px 8px 45px;
     border-width: 1px;
-    border-style: solid;
-    border-radius: 3px;
+    border-radius: 100px;
     background-color: #FFFFFF;
   }
-
+  .float-div::before{
+    display: block;
+    content: '';
+    position: absolute;
+    left: 17px;
+    top: 8px;
+    width: 21px;
+    height: 16px;
+  }
   .float-txt {
     color: #fff;
     font-weight: 700;
-    font-size: 15x;
+    font-size: 15px;
     font-family: "Pretendard-SB" !important;
   }
 
-  .result-list-wrap:nth-child(odd) .float-div {
-    background-color: #a5067b;
-    border: 1px solid #a5067b;
+  .type-photo {
+    
+    background-color: #A91181;
+    &::before{
+      background-image: url(../../images/icon/pic_icon.png);
+     
+    }
   }
-
-  .result-list-wrap:nth-child(even) .float-div {
-    background-color: #007ac3;
-    border: 1px solid #007ac3;
+  .type-video {
+    background-color: #D87F17;
+    &::before{
+      background-image: url(../../images/icon/video_icon.png);
+      height: 18px;
+    }
+  }
+  .type-nesdta {
+    background-color:#555555;
+    &::before{
+      background-image: url(../../images/icon/bodo_icon.png);
+      height: 18px;
+    }
+  }
+  .type-media {
+    background-color: #007AC3;
+    &::before{
+      background-image: url(../../images/icon/media_icon.png);
+      
+    }
   }
 }
 

4614698

ac7b397

client/views/component/PrdctnSelectComponent.vue

--- client/views/component/PrdctnSelectComponent.vue

+++ client/views/component/PrdctnSelectComponent.vue

...	...	@@ -1,5 +1,5 @@
1	1	<template>
2		- <div class="date-input-group">
	2	+ <div class="date-input-group ">
3	3	<select id="prdctnYear" v-model="localDateForm.year" class="year-select" @change="emitChanges">
4	4	<option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
5	5	</select>
...	...	@@ -163,4 +163,7 @@
163	163	}
164	164	}
165	165	};
166		-</script> (파일 끝에 줄바꿈 문자 없음)
	166	+</script>
	167	+<style scoped>
	168	+
	169	+</style> (파일 끝에 줄바꿈 문자 없음)

4614698

ac7b397

client/views/component/listLayout/CardStyleComponent.vue

--- client/views/component/listLayout/CardStyleComponent.vue

+++ client/views/component/listLayout/CardStyleComponent.vue


     <li v-for="(item, idx) in list" :key="idx" class="mb-30" @click="fnMoveTo(item)">
       <div class="result-box">
         <div class="main-img">
-          <div v-if="!$isEmpty(typeText)" class="float-div">
+          <div v-if="!$isEmpty(typeText)" class="float-div" :class="typeClass">
             <p class="float-txt">{{ typeText }}</p>
           </div>
           <img v-if="name === 'M'" :src="getYouTubeThumbnail(item.link)" alt="영상 썸네일">

           return 'NewsReleaseDetail';
       }
     },
+    typeClass() {
+    // CSS 클래스 매핑
+    console.log(this.typeText)
+    switch (this.typeText) {
+      case '사진':
+        return 'type-photo';
+      case '영상':
+        return 'type-video';
+      case '스크랩 자료':
+        return 'type-nesdta';
+      case '미디어 영상':
+        return 'type-media';
+      default:
+        return '';
+    }
+  },
   },
 
   methods: {

Add a comment

Open 0
Closed 0

List

...	...	@@ -463,28 +463,55 @@
463	463	top: 1rem;
464	464	right: 1rem;
465	465	z-index: 5;
466		- padding: 5px 10px;
	466	+ padding: 8px 15px 8px 45px;
467	467	border-width: 1px;
468		- border-style: solid;
469		- border-radius: 3px;
	468	+ border-radius: 100px;
470	469	background-color: #FFFFFF;
471	470	}
472		-
	471	+ .float-div::before{
	472	+ display: block;
	473	+ content: '';
	474	+ position: absolute;
	475	+ left: 17px;
	476	+ top: 8px;
	477	+ width: 21px;
	478	+ height: 16px;
	479	+ }
473	480	.float-txt {
474	481	color: #fff;
475	482	font-weight: 700;
476		- font-size: 15x;
	483	+ font-size: 15px;
477	484	font-family: "Pretendard-SB" !important;
478	485	}
479	486
480		- .result-list-wrap:nth-child(odd) .float-div {
481		- background-color: #a5067b;
482		- border: 1px solid #a5067b;
	487	+ .type-photo {
	488	+
	489	+ background-color: #A91181;
	490	+ &::before{
	491	+ background-image: url(../../images/icon/pic_icon.png);
	492	+
	493	+ }
483	494	}
484		-
485		- .result-list-wrap:nth-child(even) .float-div {
486		- background-color: #007ac3;
487		- border: 1px solid #007ac3;
	495	+ .type-video {
	496	+ background-color: #D87F17;
	497	+ &::before{
	498	+ background-image: url(../../images/icon/video_icon.png);
	499	+ height: 18px;
	500	+ }
	501	+ }
	502	+ .type-nesdta {
	503	+ background-color:#555555;
	504	+ &::before{
	505	+ background-image: url(../../images/icon/bodo_icon.png);
	506	+ height: 18px;
	507	+ }
	508	+ }
	509	+ .type-media {
	510	+ background-color: #007AC3;
	511	+ &::before{
	512	+ background-image: url(../../images/icon/media_icon.png);
	513	+
	514	+ }
488	515	}
489	516	}
490	517

...	...	@@ -3,7 +3,7 @@
3	3	<li v-for="(item, idx) in list" :key="idx" class="mb-30" @click="fnMoveTo(item)">
4	4	<div class="result-box">
5	5	<div class="main-img">
6		- <div v-if="!$isEmpty(typeText)" class="float-div">
	6	+ <div v-if="!$isEmpty(typeText)" class="float-div" :class="typeClass">
7	7	<p class="float-txt">{{ typeText }}</p>
8	8	</div>
9	9	<img v-if="name === 'M'" :src="getYouTubeThumbnail(item.link)" alt="영상 썸네일">
...	...	@@ -65,6 +65,22 @@
65	65	return 'NewsReleaseDetail';
66	66	}
67	67	},
	68	+ typeClass() {
	69	+ // CSS 클래스 매핑
	70	+ console.log(this.typeText)
	71	+ switch (this.typeText) {
	72	+ case '사진':
	73	+ return 'type-photo';
	74	+ case '영상':
	75	+ return 'type-video';
	76	+ case '스크랩 자료':
	77	+ return 'type-nesdta';
	78	+ case '미디어 영상':
	79	+ return 'type-media';
	80	+ default:
	81	+ return '';
	82	+ }
	83	+ },
68	84	},
69	85
70	86	methods: {

Delete comment