Commit @76971f73d9445de964bbc81f7e8d18558daee828

류윤주 2023-11-30

231130 류윤주 기업홍보관 상세보기 수정

@76971f73d9445de964bbc81f7e8d18558daee828

8561939

76971f7

client/resources/css/Main.css

--- client/resources/css/Main.css

+++ client/resources/css/Main.css


 .mat-sec2-end {
   display: grid;
   grid-template-columns: 1fr 1fr;
+  padding: 10px 0;
 }
 
 .mat-sec2 p {

 
 .mat-sec2-end p {
   font-size: 1.5rem;
+  display: inline-block;
 }
-
-.mat-sec2-end p span {
+.mat-sec2-end > div > p {
+  cursor: pointer;
+}
+.mat-sec2-end > div > p > span {
   color: #3f87f7;
   margin-left: 0.5rem;
 }

   position: fixed;
   top: 50%;
   left: 50%;
-  width: 20%;
+  width: 400px;
+  height: 400px;
   transform: translate(-50%, -50%);
   background: white;
   padding: 20px;

   z-index: 999;
 }
 
-.mat-modal {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: 80% 1fr;
-}
-
 .matching-modal2 h2 {
   padding: 1rem 0;
-  text-align: center;
+  text-align: left;
 }
 
 .join-text-bt3 {
-  width: 100%;
-  margin: 0 auto;
-  height: 3rem;
   color: rgb(0, 0, 0);
   border-radius: 0.5rem;
-
   background-color: #3f86f700;
 }
-
-.mat-modal-img {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+.mat-modal-img{
+  border-top: 0;
+  border-bottom: 0;
 }
 
+.mat-modal-img tr td{
+  text-align: left;
+  padding: 10px 0;
+}
+.mat-modal-img img{
+  max-width: 100%;
+  height: auto;
+  object-fit: cover;
+}
 .modal-img > p {
   padding: 10px 0;
   font-size: 1.6rem;

   transform: translateY(-6.9rem);
 }
 
-.info-sec-summary p {
+/* .info-sec-summary p {
   color: #000000;
-}
+} */
 
 /* wg커뮤니티 전문가 협의체 페이지*/
 .wg-wrap-h2 {

   border-radius: 1rem;
 }
 
+.introduce-title{
+  font-size: 3.5rem;
+  font-weight: 800;
+  color: #007aff;
+}
+
 /* 모달css */
 .matchingmodal {
   width: 100%;

8561939

76971f7

client/resources/css/admin.css

--- client/resources/css/admin.css

+++ client/resources/css/admin.css

...	...	@@ -681,4 +681,50 @@
681	681	.popup-preview{
682	682	width: 100%;
683	683	min-height: 200px;
684		-} (No newline at end of file)
	684	+}
	685	+
	686	+/* 태그 */
	687	+.tag-search{
	688	+ margin-bottom: 30px;
	689	+}
	690	+.tag-search input{
	691	+ flex: 0 0 79%
	692	+}
	693	+
	694	+.tag-search button{
	695	+ flex: 0 0 20%;
	696	+}
	697	+
	698	+.tag-title{
	699	+ font-size: 1.8rem;
	700	+ margin-bottom: 10px;
	701	+ font-weight: 700;
	702	+}
	703	+
	704	+.tag-list{
	705	+ padding: 10px;
	706	+ border: 1px solid #aaa;
	707	+ border-radius: 10px;
	708	+ height: 300px;
	709	+ overflow-y: auto;
	710	+}
	711	+
	712	+.tag{
	713	+ border-radius: 5px;
	714	+ padding: 8px 10px;
	715	+ font-size: 1.4rem;
	716	+ margin-left: 5px;
	717	+ display: inline-block;
	718	+}
	719	+.tag:nth-of-type(1){
	720	+ margin-left: 0px;
	721	+}
	722	+
	723	+.old-tag{
	724	+ background-color: #eee;
	725	+}
	726	+
	727	+.new-tag{
	728	+ background-color: #ff5f5f;
	729	+ color: #fff;
	730	+}

8561939

76971f7

client/resources/css/reset.css

--- client/resources/css/reset.css

+++ client/resources/css/reset.css


 
 table {
   width: 100%;
-  height: 100%;
+  /* height: 100%; */
   border-collapse: collapse;
   font-size: 1.4rem;
   border-top: 2px solid #007aff;

8561939

76971f7

client/views/layout/AdminMenu.vue

--- client/views/layout/AdminMenu.vue

+++ client/views/layout/AdminMenu.vue


         { path: "/adm/networkingSelectList.page", pathName: "네트워킹", subMenu: [{ path: "/adm/networkingSelectList.page", pathName: "기업홍보관" }], icon: '<i class="fa-solid fa-network-wired"></i>', icon2: "<i class='fa-solid fa-angle-right'></i>", isOpen: false, isActive: false },
         { path: "/adm/popupSelectList.page", pathName: "팝업관리", icon: '<i class="fa-solid fa-layer-group"></i>', isActive: false },
         { path: "/adm/mailSelectList.page", pathName: "메일발송", icon: '<i class="fa-regular fa-envelope"></i>', isActive: false },
+        { path: "/adm/tag.page", pathName: "태그관리", icon: '<i class="fa-solid fa-hashtag"></i>', isActive: false },
         { path: "/adm/userSelectList.page", pathName: "사용자관리", icon: '<i class="fa-regular fa-circle-user"></i>', isActive: false },
         { path: "/adm/subscribe.page", pathName: "구독서비스", icon: '<i class="fa-regular fa-bell"></i>', isActive: false },
       ],

8561939

76971f7

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import AdminPopupInsert from "../pages/admin/popup/PopupInsert.vue";
 import AdminPopupUpdate from "../pages/admin/popup/PopupUpdate.vue";
 import AdminSubscribe from "../pages/admin/subscribe/Subscribe.vue";
+import AdminTag from "../pages/admin/tag/Tag.vue";
 
 import AdminVisit from "../pages/admin/statistics/Visit.vue";
 import AdminMenuVisit from "../pages/admin/statistics/MenuStatistics.vue";

   { path: "/adm/popupInsert.page", name: "AdminPopupInsert", component: AdminPopupInsert },
   { path: "/adm/popupUpdate.page", name: "AdminPopupUpdate", component: AdminPopupUpdate },
   { path: "/adm/subscribe.page", name: "AdminSubscribe", component: AdminSubscribe },
+  { path: "/adm/tag.page", name: "AdminTag", component: AdminTag },
+
   { path: "/adm/visit.page", name: "AdminVisit", component: AdminVisit },
-  
   { path: "/adm/menuVisit.page", name: "AdminMenuVisit", component: AdminMenuVisit },
   { path: "/adm/pr.page", name: "AdminCoporate", component: AdminCoporate },
   { path: "/adm/dataStatistics.page", name: "AdminData", component: AdminData },

76971f7

client/views/pages/admin/tag/Tag.vue (added)

+++ client/views/pages/admin/tag/Tag.vue

...	...	@@ -0,0 +1,51 @@
	1	+<template>
	2	+ <div class="tag-wrap">
	3	+ <div class="content-box">
	4	+ <div class="title-wrap">
	5	+ <div class="flex-start">
	6	+ <img src="../../../../resources/jpg/notic-logo-img.png" alt="태그관리 아이콘" class="title-icon">
	7	+ <h2 class="main-title">태그관리</h2>
	8	+ </div>
	9	+ </div>
	10	+ <div class="content-wrap">
	11	+ <div class="tag-wrap">
	12	+ <div class="tag-search flex">
	13	+ <input type="text" name="" id="" v-model="tag" placeholder="추가 할 태그를 입력해주세요." />
	14	+ <button class="red-btn">태그 추가</button>
	15	+ </div>
	16	+ <div class="tag-list-wrap">
	17	+ <p class="tag-title">태그 리스트</p>
	18	+ <div class="tag-list">
	19	+ <span class="old-tag tag">기존에 있는 태그</span>
	20	+ <span class="new-tag tag">추가한 태그 <span>x</span></span>
	21	+ </div>
	22	+ </div>
	23	+ </div>
	24	+ <div class="btn-wrap">
	25	+ <button class="blue-btn">태그 저장하기</button>
	26	+ </div>
	27	+ </div>
	28	+ </div>
	29	+ </div>
	30	+</template>
	31	+<script>
	32	+import axios from 'axios';
	33	+import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
	34	+
	35	+export default {
	36	+ data() {
	37	+ return {
	38	+ tag: "#"
	39	+ };
	40	+ },
	41	+ methods: {
	42	+
	43	+ },
	44	+ watch: {},
	45	+ computed: {},
	46	+ components: {},
	47	+ mounted() {
	48	+
	49	+ }
	50	+};
	51	+</script>

8561939

76971f7

client/views/pages/user/networking/MatchingOne.vue

--- client/views/pages/user/networking/MatchingOne.vue

+++ client/views/pages/user/networking/MatchingOne.vue


                 <section class="mat-sec2">
                     <div class="info-sec-summary">
                         <sapn class="info-th"></sapn>
-                        <div id="viewer1" ref="viewer1" class="viewer"></div>
-                                <div id="viewer2" ref="viewer2" class="viewer"></div>
-                                <div id="viewer3" ref="viewer3" class="viewer"></div>
+                        <div>
+                            <p class="introduce-title">기업소개</p>
+                            <div id="viewer1" ref="viewer1" class="viewer"></div>
+                        </div>
+                        <div>
+                            <p class="introduce-title">대표 기술 소개</p>
+                            <div id="viewer2" ref="viewer2" class="viewer"></div>
+                        </div>
+                        <div>
+                            <p class="introduce-title">서비스 소개</p>
+                        <div id="viewer3" ref="viewer3" class="viewer"></div>
+                        </div>
                     </div>
                     <div class="mat-sec2-end">
-                        <p>
-
+                        <div>
                             <i v-if="!company.pick_yn" class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"
                                 @click="pickConfirm()"></i>
                             <i v-else class="fa fa-heart fa-lg" style="color: #d41515;" @click="pickCancelModal()"></i>
-                            <span id="pickBtn" @click="openPickListMadal">{{ company.company_pick_cnt }}개</span>의 기업이
+                            <p  @click="openPickListMadal">
+                                <span id="pickBtn">{{ company.company_pick_cnt }}개</span>의 기업이
                             pick했습니다!
-                        </p>
+                            </p>
+                            
+                        </div>
                         <p><span>조회수</span>{{ company.view_cnt }}</p>
 
                     </div>

 
 
     <div v-show="pickModal" class="matching-modal2">
-        <div class="mat-modal">
-
-            <h2>우리기업을 PICK한 기업</h2>
+        <div class="flex-end">
             <button class="join-text-bt3" @click="closePickListMadal">X</button>
         </div>
-        <table class="mat-modal-img" v-for="(item, idx) in pickSelectList" :key="idx">
-            <td><img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"></td>
-            <td>
-                {{ item.company_nm }}
-            </td>
-            <td>
-                <button v-if="item.pick_yn" disabled :style="{ backgroundColor: '#ccc' }">완료</button>
-                <button v-else :style="{ backgroundColor: '#3f87f7' }" @click="modalPick(item)"> 수락</button>
-            </td>
+        <div class="mat-modal">
+            <h2>우리기업을 PICK한 기업</h2>
+        </div>
+        <table class="mat-modal-img">
+            <colgroup>
+                <col style="width: 30%;" />
+                <col style="width: 40%;" />
+                <col style="width: 30%;" />
+            </colgroup>
+            <tbody>
+                <tr v-for="(item, idx) in pickSelectList" :key="idx">
+                    <td>
+                        <p>
+                            <img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm">
+                        </p>
+                    </td>
+                    <td>
+                        {{ item.company_nm }}
+                    </td>
+                    <td>
+                        <button v-if="item.pick_yn" disabled :style="{ backgroundColor: '#ccc' }">완료</button>
+                        <button v-else :style="{ backgroundColor: '#3f87f7' }" @click="modalPick(item)"> 수락</button>
+                    </td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>

Add a comment

Open 0
Closed 0

List

...	...	@@ -800,6 +800,7 @@
800	800	.mat-sec2-end {
801	801	display: grid;
802	802	grid-template-columns: 1fr 1fr;
	803	+ padding: 10px 0;
803	804	}
804	805
805	806	.mat-sec2 p {
...	...	@@ -808,9 +809,12 @@
808	809
809	810	.mat-sec2-end p {
810	811	font-size: 1.5rem;
	812	+ display: inline-block;
811	813	}
812		-
813		-.mat-sec2-end p span {
	814	+.mat-sec2-end > div > p {
	815	+ cursor: pointer;
	816	+}
	817	+.mat-sec2-end > div > p > span {
814	818	color: #3f87f7;
815	819	margin-left: 0.5rem;
816	820	}
...	...	@@ -838,7 +842,8 @@
838	842	position: fixed;
839	843	top: 50%;
840	844	left: 50%;
841		- width: 20%;
	845	+ width: 400px;
	846	+ height: 400px;
842	847	transform: translate(-50%, -50%);
843	848	background: white;
844	849	padding: 20px;
...	...	@@ -847,32 +852,30 @@
847	852	z-index: 999;
848	853	}
849	854
850		-.mat-modal {
851		- display: grid;
852		- gap: 1rem;
853		- grid-template-columns: 80% 1fr;
854		-}
855		-
856	855	.matching-modal2 h2 {
857	856	padding: 1rem 0;
858		- text-align: center;
	857	+ text-align: left;
859	858	}
860	859
861	860	.join-text-bt3 {
862		- width: 100%;
863		- margin: 0 auto;
864		- height: 3rem;
865	861	color: rgb(0, 0, 0);
866	862	border-radius: 0.5rem;
867		-
868	863	background-color: #3f86f700;
869	864	}
870		-
871		-.mat-modal-img {
872		- display: grid;
873		- grid-template-columns: 1fr 1fr 1fr;
	865	+.mat-modal-img{
	866	+ border-top: 0;
	867	+ border-bottom: 0;
874	868	}
875	869
	870	+.mat-modal-img tr td{
	871	+ text-align: left;
	872	+ padding: 10px 0;
	873	+}
	874	+.mat-modal-img img{
	875	+ max-width: 100%;
	876	+ height: auto;
	877	+ object-fit: cover;
	878	+}
876	879	.modal-img > p {
877	880	padding: 10px 0;
878	881	font-size: 1.6rem;
...	...	@@ -1709,9 +1712,9 @@
1709	1712	transform: translateY(-6.9rem);
1710	1713	}
1711	1714
1712		-.info-sec-summary p {
	1715	+/* .info-sec-summary p {
1713	1716	color: #000000;
1714		-}
	1717	+} */
1715	1718
1716	1719	/* wg커뮤니티 전문가 협의체 페이지*/
1717	1720	.wg-wrap-h2 {
...	...	@@ -1937,6 +1940,12 @@
1937	1940	border-radius: 1rem;
1938	1941	}
1939	1942
	1943	+.introduce-title{
	1944	+ font-size: 3.5rem;
	1945	+ font-weight: 800;
	1946	+ color: #007aff;
	1947	+}
	1948	+
1940	1949	/* 모달css */
1941	1950	.matchingmodal {
1942	1951	width: 100%;

...	...	@@ -59,6 +59,7 @@
59	59	import AdminPopupInsert from "../pages/admin/popup/PopupInsert.vue";
60	60	import AdminPopupUpdate from "../pages/admin/popup/PopupUpdate.vue";
61	61	import AdminSubscribe from "../pages/admin/subscribe/Subscribe.vue";
	62	+import AdminTag from "../pages/admin/tag/Tag.vue";
62	63
63	64	import AdminVisit from "../pages/admin/statistics/Visit.vue";
64	65	import AdminMenuVisit from "../pages/admin/statistics/MenuStatistics.vue";
...	...	@@ -132,8 +133,9 @@
132	133	{ path: "/adm/popupInsert.page", name: "AdminPopupInsert", component: AdminPopupInsert },
133	134	{ path: "/adm/popupUpdate.page", name: "AdminPopupUpdate", component: AdminPopupUpdate },
134	135	{ path: "/adm/subscribe.page", name: "AdminSubscribe", component: AdminSubscribe },
	136	+ { path: "/adm/tag.page", name: "AdminTag", component: AdminTag },
	137	+
135	138	{ path: "/adm/visit.page", name: "AdminVisit", component: AdminVisit },
136		-
137	139	{ path: "/adm/menuVisit.page", name: "AdminMenuVisit", component: AdminMenuVisit },
138	140	{ path: "/adm/pr.page", name: "AdminCoporate", component: AdminCoporate },
139	141	{ path: "/adm/dataStatistics.page", name: "AdminData", component: AdminData },

...	...	@@ -67,7 +67,7 @@
67	67
68	68	table {
69	69	width: 100%;
70		- height: 100%;
	70	+ /* height: 100%; */
71	71	border-collapse: collapse;
72	72	font-size: 1.4rem;
73	73	border-top: 2px solid #007aff;

...	...	@@ -46,6 +46,7 @@
46	46	{ path: "/adm/networkingSelectList.page", pathName: "네트워킹", subMenu: [{ path: "/adm/networkingSelectList.page", pathName: "기업홍보관" }], icon: '<i class="fa-solid fa-network-wired"></i>', icon2: "<i class='fa-solid fa-angle-right'></i>", isOpen: false, isActive: false },
47	47	{ path: "/adm/popupSelectList.page", pathName: "팝업관리", icon: '<i class="fa-solid fa-layer-group"></i>', isActive: false },
48	48	{ path: "/adm/mailSelectList.page", pathName: "메일발송", icon: '<i class="fa-regular fa-envelope"></i>', isActive: false },
	49	+ { path: "/adm/tag.page", pathName: "태그관리", icon: '<i class="fa-solid fa-hashtag"></i>', isActive: false },
49	50	{ path: "/adm/userSelectList.page", pathName: "사용자관리", icon: '<i class="fa-regular fa-circle-user"></i>', isActive: false },
50	51	{ path: "/adm/subscribe.page", pathName: "구독서비스", icon: '<i class="fa-regular fa-bell"></i>', isActive: false },
51	52	],

...	...	@@ -43,19 +43,30 @@
43	43	<section class="mat-sec2">
44	44	<div class="info-sec-summary">
45	45	<sapn class="info-th"></sapn>
46		- <div id="viewer1" ref="viewer1" class="viewer"></div>
47		- <div id="viewer2" ref="viewer2" class="viewer"></div>
48		- <div id="viewer3" ref="viewer3" class="viewer"></div>
	46	+ <div>
	47	+ <p class="introduce-title">기업소개</p>
	48	+ <div id="viewer1" ref="viewer1" class="viewer"></div>
	49	+ </div>
	50	+ <div>
	51	+ <p class="introduce-title">대표 기술 소개</p>
	52	+ <div id="viewer2" ref="viewer2" class="viewer"></div>
	53	+ </div>
	54	+ <div>
	55	+ <p class="introduce-title">서비스 소개</p>
	56	+ <div id="viewer3" ref="viewer3" class="viewer"></div>
	57	+ </div>
49	58	</div>
50	59	<div class="mat-sec2-end">
51		- <p>
52		-
	60	+ <div>
53	61	<i v-if="!company.pick_yn" class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"
54	62	@click="pickConfirm()"></i>
55	63	<i v-else class="fa fa-heart fa-lg" style="color: #d41515;" @click="pickCancelModal()"></i>
56		- <span id="pickBtn" @click="openPickListMadal">{{ company.company_pick_cnt }}개</span>의 기업이
	64	+ <p @click="openPickListMadal">
	65	+ <span id="pickBtn">{{ company.company_pick_cnt }}개</span>의 기업이
57	66	pick했습니다!
58		- </p>
	67	+ </p>
	68	+
	69	+ </div>
59	70	<p><span>조회수</span>{{ company.view_cnt }}</p>
60	71
61	72	</div>
...	...	@@ -70,20 +81,34 @@
70	81
71	82
72	83	<div v-show="pickModal" class="matching-modal2">
73		- <div class="mat-modal">
74		-
75		- <h2>우리기업을 PICK한 기업</h2>
	84	+ <div class="flex-end">
76	85	<button class="join-text-bt3" @click="closePickListMadal">X</button>
77	86	</div>
78		- <table class="mat-modal-img" v-for="(item, idx) in pickSelectList" :key="idx">
79		- <td><img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"></td>
80		- <td>
81		- {{ item.company_nm }}
82		- </td>
83		- <td>
84		- <button v-if="item.pick_yn" disabled :style="{ backgroundColor: '#ccc' }">완료</button>
85		- <button v-else :style="{ backgroundColor: '#3f87f7' }" @click="modalPick(item)"> 수락</button>
86		- </td>
	87	+ <div class="mat-modal">
	88	+ <h2>우리기업을 PICK한 기업</h2>
	89	+ </div>
	90	+ <table class="mat-modal-img">
	91	+ <colgroup>
	92	+ <col style="width: 30%;" />
	93	+ <col style="width: 40%;" />
	94	+ <col style="width: 30%;" />
	95	+ </colgroup>
	96	+ <tbody>
	97	+ <tr v-for="(item, idx) in pickSelectList" :key="idx">
	98	+ <td>
	99	+ <p>
	100	+ <img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm">
	101	+ </p>
	102	+ </td>
	103	+ <td>
	104	+ {{ item.company_nm }}
	105	+ </td>
	106	+ <td>
	107	+ <button v-if="item.pick_yn" disabled :style="{ backgroundColor: '#ccc' }">완료</button>
	108	+ <button v-else :style="{ backgroundColor: '#3f87f7' }" @click="modalPick(item)"> 수락</button>
	109	+ </td>
	110	+ </tr>
	111	+ </tbody>
87	112	</table>
88	113	</div>
89	114	</template>

Delete comment