Commit @3752114bda407bcb011dcc8519e6e191a053f583

kimgkdud898 2023-11-07

231107김하영

@3752114bda407bcb011dcc8519e6e191a053f583

369bf5b

3752114

client/resources/css/Main.css

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

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


 }
 
 .mat-bos img {
-  width: 50px;
+  width: 50px !important;
   /* transform: translateY(10px);/ */
   z-index: -1;
 }

 
 .mat-sec2-end p span {
   color: #3f87f7;
-  margin-right: 1rem;
+  margin-left: 0.5rem;
 }
 
 .mat-sec2-end p:nth-child(2) {

   border-radius: 0.5rem;
   font-family: "Pretendard-Regular";
 }
+
+.join-modal2 {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 20%;
+  /* height: 10%; */
+  transform: translate(-50%, -50%);
+  background: white;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  z-index: 999;
+}
+
+.mat-modal {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 80% 1fr;
+}
+
+.join-modal2 h2 {
+  padding: 1rem 0;
+  text-align: center;
+}
+
+.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 button {
+  width: 100%;
+  padding: 0.5rem 0;
+  border-radius: 1rem;
+  color: white;
+  background-color: #3f87f7;
+}
+
 /* ---------------------------------------------------------------------------------------------- */
 
 /* Data css */
+
+/* 231107수정 김하영 */
+#data-app p {
+  padding: 1rem;
+  font-size: 2rem;
+  font-family: "Pretendard-Regular";
+}
+#data-app span {
+  font-weight: 700;
+  font-family: "Pretendard-Regular";
+
+  color: #007aff;
+}
+.data-wrap {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 70% 1fr;
+}
+.data-wrap-search {
+  width: 100%;
+  float: right;
+  display: grid;
+  grid-template-columns: 30% 1fr;
+}
 .data-btn-wrap {
-  padding: 3rem !important;
+  padding: 3rem 0rem !important;
 }
 .data-box {
   border: 1px solid red;

 }
 .data-b-b {
   width: 100%;
-  padding: 6rem;
+  padding: 6rem 0;
   font-size: 4rem;
   color: #0e0077;
 

 
 .data-b-grid {
   width: 100%;
-  padding: 3rem;
+  padding: 3rem 0;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
 }

   width: 100%;
 }
 .da1 {
-  width: 80%;
-  height: 40rem;
+  max-width: 100%;
+  height: auto;
   margin: 0 auto;
-  display: grid;
-  grid-template-columns: 1fr;
-  align-content: start;
+  position: relative;
+  top: 0;
+  left: 0;
+}
+.data-da1-1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.da1 img {
+  width: 100%;
 }
 .da1 h2 {
   font-family: SBaggroM;

 .da1 h2 span {
   font-size: 4rem;
 }
-.data-b-1 {
-  /* background-color: #007aff; */
-  background: url(../jpg/data-img.png) no-repeat center center;
-  background-size: cover;
+/* 
+.background-image-2 {
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr;
+  align-content: start;
+  background: url(../jpg/data-imgbak.png) no-repeat center center;
+  background-size: contain;
   position: relative;
   text-align: center;
+} */
+/* .background-image-3 {
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr;
+  align-content: start;
+  cursor: pointer;
+  background: url(../jpg/data-img3.png) no-repeat center center;
+  background-size: contain;
+  position: relative;
+  text-align: center;
+} */
+.background-image-4 {
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr;
+  cursor: pointer;
+  align-content: start;
+  background: url(../jpg/data-img3back.png) no-repeat center center;
+  background-size: contain;
+  position: relative;
+  text-align: center;
+}
+.background-image-5 {
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr;
+  align-content: start;
+  /* background-color: #007aff; */
+  background: url(../jpg/data-img2.png) no-repeat center center;
+  background-size: contain;
+  position: relative;
+  cursor: pointer;
+  text-align: center;
   /* border-radius: 2rem; */
+}
+.background-image-6 {
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+  display: grid;
+  cursor: pointer;
+  grid-template-columns: 1fr;
+  align-content: start;
+  background: url(../jpg/data-imgback.png) no-repeat center center;
+  background-size: contain;
+  position: relative;
+  text-align: center;
 }
 .data-b-1 h2 {
   text-align: left;

   cursor: pointer;
 }
 
-.data-b-1::after {
-  position: absolute;
-  content: "";
-  width: 90px;
-  height: 90px;
-  right: -90px;
-  top: 40%;
-
-  background-color: #e2ecfc;
-  border-radius: 45px;
-  transform: translateX(-50%);
-  z-index: -1;
-}
-.data-b-2 {
-  background: url(../jpg/data-img3.png) no-repeat center center;
-  background-size: cover;
-  position: relative;
-  text-align: center;
-  cursor: pointer;
-}
 .data-b-2 h2 {
   text-align: center;
   padding: 3rem;

 .data-table-tr {
   width: 100%;
   padding: 12rem 3rem;
-}
-.data-b-3 {
-  background: url(../jpg/data-img2.png) no-repeat center center;
-  background-size: cover;
-  position: relative;
-  text-align: center;
-  cursor: pointer;
-
-  /* border: 1px solid red; */
-}
-.data-b-3::after {
-  position: absolute;
-  content: "";
-  width: 90px;
-  height: 90px;
-  left: 0px;
-  top: 40%;
-
-  background-color: #f8e7cd;
-  border-radius: 45px;
-  transform: translateX(-50%);
-  z-index: -1;
 }
 
 .data-b-3 h2 {

 }
 .data-table-tr {
   width: 100%;
-  padding: 0rem 3rem 12rem 3rem;
+  padding: 0rem 0rem 12rem 0rem;
 }
 
 .data-table-tr td:nth-child(2) {

   padding: 1rem;
   border-radius: 1rem;
 }
+/* 매칭관리css */
+.matching-wrap-sub {
+  width: 100%;
+  margin: 0 auto;
+}
+.matching-box-button {
+  border: 1px solid red;
+  width: 50%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+.matching-box-button input {
+  display: none;
+}
+.matching-box-button label {
+  text-align: center;
+  width: 100%;
+
+  font-size: 2rem;
+}
+.matching-box-button div {
+  width: 100%;
+  padding: 3rem;
+  background-color: #007aff;
+  color: white;
+  border: 1px solid red;
+}
+.inbox {
+  display: grid;
+  border: 1px solid red;
+  grid-template-columns: 1fr;
+}
+.inbox-sub {
+  width: 100%;
+  padding: 6rem 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 3rem;
+}
+.inbox-img {
+  width: 100%;
+  border-radius: 2rem;
+  background-color: #f9f9f9;
+  padding: 3rem 3rem 01rem 3rem;
+  box-shadow: 1px 1px 5px #33333344;
+}
+.inbox-img img {
+  width: 100%;
+
+  border-radius: 2rem;
+}
+.inbox-img div {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+
+  margin: 1rem;
+}
+.inbox-img button {
+  padding: 1rem 2rem;
+  border-radius: 1rem;
+}
+.inbox-img button:nth-child(1) {
+  background-color: #007aff;
+  color: white;
+  font-weight: 700;
+}
+.inbox-img button:nth-child(2) {
+  background-color: rgb(126, 126, 126) 8b8;
+  color: rgb(49, 49, 49);
+  font-weight: 700;
+}
+.inbox-img-2 img {
+  width: 100%;
+
+  border-radius: 2rem;
+}
+.inbox-img-2 {
+  width: 100%;
+  border-radius: 2rem;
+  background-color: #f9f9f9;
+  padding: 3rem 3rem 01rem 3rem;
+  box-shadow: 1px 1px 5px #33333344;
+}
+.inbox-img-2 div {
+  margin: 1rem;
+}
+.inbox-img-2 button {
+  width: 100%;
+  padding: 1rem 2rem;
+  border-radius: 1rem;
+  background-color: #007aff;
+  color: white;
+  font-weight: 700;
+}

369bf5b

3752114

client/resources/css/common.css

--- client/resources/css/common.css

+++ client/resources/css/common.css


   font-family: "Pretendard-Regular";
 }
 
-.insert-table th{
+.insert-table th {
   background-color: transparent;
   color: #007aff;
 }
 
-.insert-table td{
+.insert-table td {
   border-top: 0;
 }

369bf5b

3752114

client/resources/jpg/data-img.png (Binary)

--- client/resources/jpg/data-img.png

+++ client/resources/jpg/data-img.png

Binary file is not shown

369bf5b

3752114

client/resources/jpg/data-img2.png (Binary)

--- client/resources/jpg/data-img2.png

+++ client/resources/jpg/data-img2.png

Binary file is not shown

3752114

client/resources/jpg/data-img3back.png (Binary) (added)

+++ client/resources/jpg/data-img3back.png

Binary file is not shown

3752114

client/resources/jpg/data-imgback.png (Binary) (added)

+++ client/resources/jpg/data-imgback.png

Binary file is not shown

3752114

client/resources/jpg/data-imgbak.png (Binary) (added)

+++ client/resources/jpg/data-imgbak.png

Binary file is not shown

3752114

client/resources/jpg/inbox-img.jpg (Binary) (added)

+++ client/resources/jpg/inbox-img.jpg

Binary file is not shown

369bf5b

3752114

client/views/layout/Menu.vue

--- client/views/layout/Menu.vue

+++ client/views/layout/Menu.vue


                     isHovered: false,
                     subMenu: [
                         { text: "내 정보 수정", link: "/Info.page" },
-                        { text: "매칭 관리", link: "" }
+                        { text: "매칭 관리", link: "/MatchingManager.page" }
                     ]
                 }
             ]

369bf5b

3752114

client/views/pages/AppRouter.js

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

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


 import Wgcommunity from "../pages/user/community/Wgcommunity.vue";
 import NoticeOne from "./user/community/NoticeOne.vue";
 import Info from "../pages/user/mypage/Info.vue";
+import MatchingManager from "../pages/user/mypage/MatchingManager.vue";
 import Infosub from "../pages/user/mypage/Infosub.vue";
 import Guide from "../pages/user/Data/Guide.vue";
 import DataDtali from "./user/Data/DataOne.vue";

   { path: "/NoticeOne.page", name: "NoticeOne", component: NoticeOne },
   { path: "/Wgcommunity.page", name: "Wgcommunity", component: Wgcommunity },
   { path: "/MatchingOne.page", name: "MatchingOne", component: MatchingOne },
-  { path: "/TechnologyOne.page", name: "TechnologyOne", component: TechnologyOne },
+  {
+    path: "/TechnologyOne.page",
+    name: "TechnologyOne",
+    component: TechnologyOne,
+  },
+  {
+    path: "/MatchingManager.page",
+    name: "MatchingManager",
+    component: MatchingManager,
+  },
   /* 관리자 */
-  { path: "/adm.page", name: "AdminMain", component: AdminMain, meta: { requiresAuth: true } },
+  {
+    path: "/adm.page",
+    name: "AdminMain",
+    component: AdminMain,
+    meta: { requiresAuth: true },
+  },
   { path: "/adm/login.page", name: "AdminLogin", component: AdminLogin },
-  { path: "/adm/userSelectList.page", name: "AdminUserSelectList", component: AdminUserSelectList },
-  { path: "/adm/userSelectOne.page", name: "AdminUserSelectOne", component: AdminUserSelectOne },
-  { path: "/adm/noticeSelectList.page", name: "AdminNoticeSelectList", component: AdminNoticeSelectList },
-  { path: "/adm/noticeSelectOne.page", name: "AdminNoticeSelectOne", component: AdminNoticeSelectOne },
-  { path: "/adm/noticeInsert.page", name: "AdminNoticeInsert", component: AdminNoticeInsert },
-  { path: "/adm/newsSelectList.page", name: "AdminNewsSelectList", component: AdminNewsSelectList },
-  { path: "/adm/newsSelectOne.page", name: "AdminNewsSelectOne", component: AdminNewsSelectOne },
-  { path: "/adm/newsInsert.page", name: "AdminNewsInsert", component: AdminNewsInsert },
-  { path: "/adm/techSelectList.page", name: "AdminTechSelectList", component: AdminTechSelectList },
-  { path: "/adm/techSelectOne.page", name: "AdminTechSelectOne", component: AdminTechSelectOne },
-  { path: "/adm/techInsert.page", name: "AdminTechInsert", component: AdminTechInsert },
-  { path: "/adm/dataSelectList.page", name: "AdminDataSelectList", component: AdminDataSelectList },
-  { path: "/adm/dataSelectOne.page", name: "AdminDataSelectOne", component: AdminDataSelectOne },
-  { path: "/adm/dataInsert.page", name: "AdminDataInsert", component: AdminDataInsert },
-  { path: "/adm/dataUpdate.page", name: "AdminDataUpdate", component: AdminDataUpdate },
-  { path: "/adm/networkingSelectList.page", name: "AdminNetworkingSelectList", component: AdminNetworkingSelectList },
-  { path: "/adm/networkingSelectOne.page", name: "AdminNetworkingSelectOne", component: AdminNetworkingSelectOne },
-  { path: "/adm/networkingUpdate.page", name: "AdminNetworkingUpdate", component: AdminNetworkingUpdate },
+  {
+    path: "/adm/userSelectList.page",
+    name: "AdminUserSelectList",
+    component: AdminUserSelectList,
+  },
+  {
+    path: "/adm/userSelectOne.page",
+    name: "AdminUserSelectOne",
+    component: AdminUserSelectOne,
+  },
+  {
+    path: "/adm/noticeSelectList.page",
+    name: "AdminNoticeSelectList",
+    component: AdminNoticeSelectList,
+  },
+  {
+    path: "/adm/noticeSelectOne.page",
+    name: "AdminNoticeSelectOne",
+    component: AdminNoticeSelectOne,
+  },
+  {
+    path: "/adm/noticeInsert.page",
+    name: "AdminNoticeInsert",
+    component: AdminNoticeInsert,
+  },
+  {
+    path: "/adm/newsSelectList.page",
+    name: "AdminNewsSelectList",
+    component: AdminNewsSelectList,
+  },
+  {
+    path: "/adm/newsSelectOne.page",
+    name: "AdminNewsSelectOne",
+    component: AdminNewsSelectOne,
+  },
+  {
+    path: "/adm/newsInsert.page",
+    name: "AdminNewsInsert",
+    component: AdminNewsInsert,
+  },
+  {
+    path: "/adm/techSelectList.page",
+    name: "AdminTechSelectList",
+    component: AdminTechSelectList,
+  },
+  {
+    path: "/adm/techSelectOne.page",
+    name: "AdminTechSelectOne",
+    component: AdminTechSelectOne,
+  },
+  {
+    path: "/adm/techInsert.page",
+    name: "AdminTechInsert",
+    component: AdminTechInsert,
+  },
+  {
+    path: "/adm/dataSelectList.page",
+    name: "AdminDataSelectList",
+    component: AdminDataSelectList,
+  },
+  {
+    path: "/adm/dataSelectOne.page",
+    name: "AdminDataSelectOne",
+    component: AdminDataSelectOne,
+  },
+  {
+    path: "/adm/dataInsert.page",
+    name: "AdminDataInsert",
+    component: AdminDataInsert,
+  },
+  {
+    path: "/adm/dataUpdate.page",
+    name: "AdminDataUpdate",
+    component: AdminDataUpdate,
+  },
+  {
+    path: "/adm/networkingSelectList.page",
+    name: "AdminNetworkingSelectList",
+    component: AdminNetworkingSelectList,
+  },
+  {
+    path: "/adm/networkingSelectOne.page",
+    name: "AdminNetworkingSelectOne",
+    component: AdminNetworkingSelectOne,
+  },
+  {
+    path: "/adm/networkingUpdate.page",
+    name: "AdminNetworkingUpdate",
+    component: AdminNetworkingUpdate,
+  },
 ];
 
 const AppRouter = createRouter({

369bf5b

3752114

client/views/pages/user/Data/Data.vue

--- client/views/pages/user/Data/Data.vue

+++ client/views/pages/user/Data/Data.vue


                 <div class="w1400">
                     <div class="data-b-grid">
                         <!-- 윗쪽 아이콘 -->
-                        <div class="data-b-1 da1">
-                            <h2>AI 디지털교과서<br><span>정책자료</span></h2>
-                            <div class="data-t">
+                        <div class="data-b-1 da1" @click="updateContent('정책자료')">
+                            <div @click="changeBackground"
+                                :class="{ 'background-image-1': isBackground1, 'background-image-2': isBackground2 }">
+                                <img src="../../../../resources/jpg/data-img.png" alt="">
+                                <div class="data-da1-1">
 
-                                <p>· 개발 지원 정책 문서</p>
-                                <p>· 법·제도 문서 등</p>
+                                    <h2>AI 디지털교과서<br><span>정책자료</span></h2>
+                                    <div class="data-t">
+
+                                        <p>· 개발 지원 정책 문서</p>
+                                        <p>· 법·제도 문서 등</p>
+                                    </div>
+                                </div>
+
                             </div>
+
                         </div>
-                        <div class="data-b-2 da1">
-                            <h2>AI 디지털교과서<br><span>연구자료</span></h2>
-                            <div class="data-t data-t2">
-                                <p>· 서비스 모델, 프로토타입 연구·보고서 등</p>
+                        <div class="data-b-2 da1" @click="updateContent('연구자료')">
+                            <div>
+                                <img @click="changeBackground2"
+                                    :class="{ 'background-image-3': isBackground3, 'background-image-4': isBackground4 }"
+                                    src="../../../../resources/jpg/data-img3.png" alt="">
+                                <div class="data-da1-1">
+
+                                    <h2>AI 디지털교과서<br><span>연구자료</span></h2>
+                                    <div class="data-t data-t2">
+                                        <p>· 서비스 모델, 프로토타입 연구·보고서 등</p>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                         <div class="data-b-3 da1">
-                            <h2>AI 디지털교과서<br><span>가이드라인</span></h2>
-                            <div class="data-t">
+                            <div @click="changeBackground3"
+                                :class="{ 'background-image-5': isBackground5, 'background-image-6': isBackground6 }">
+                                <h2>AI 디지털교과서<br><span>가이드라인</span></h2>
+                                <div class="data-t">
 
-                                <div class="guide-logo-bt">
+                                    <div class="guide-logo-bt">
 
-                                    <a style="font-size: 15px;" class="down-btn-1"
-                                        href="https://webst.edunet.net/AIDT/AI 디지털교과서 개발 가이드라인.pdf" target='_blank'
-                                        download>
-                                        <i class="fa-solid fa-circle-down guide_i"
-                                            style="font-size: 20px; margin-right: 10px;"></i>가이드라인
-                                        다운받기</a>
+                                        <a style="font-size: 15px;" class="down-btn-1"
+                                            href="https://webst.edunet.net/AIDT/AI 디지털교과서 개발 가이드라인.pdf" target='_blank'
+                                            download>
+                                            <i class="fa-solid fa-circle-down guide_i"
+                                                style="font-size: 20px; margin-right: 10px;"></i>가이드라인
+                                            다운로드</a>
+                                    </div>
                                 </div>
                             </div>
                         </div>

             <div class="data-b">
                 <div class="w1400">
                     <div class="btn-wrap data-btn-wrap">
-                        <select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild">
-                            <option :value=null selected>전체</option>
-                            <option value="title">제목</option>
-                            <option value="user">작성자</option>
-                            <option value="조회순">조회순</option>
-                        </select>
-                        <div class="input-group">
-                            <input type="text" class="input" placeholder="검색어를 입력해주세요." v-model="postListSearch.searchText"
-                                @keyup.enter="postSelectList()">
-                            <input class="button--submit" value="검색" type="submit" @click="postSelectList()">
+                        <div class="data-wrap">
+
+
+                            <div id="data-app">
+
+                                <p>자료집> <span>{{ content }}</span></p>
+                            </div>
+                            <div class="data-wrap-search">
+
+                                <select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild">
+                                    <option :value=null selected>전체</option>
+                                    <option value="title">제목</option>
+                                    <option value="user">작성자</option>
+                                    <option value="조회순">조회순</option>
+                                </select>
+                                <div class="input-group">
+                                    <input type="text" class="input" placeholder="검색어를 입력해주세요."
+                                        v-model="postListSearch.searchText" @keyup.enter="postSelectList()">
+                                    <input class="button--submit" value="검색" type="submit" @click="postSelectList()">
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <div class="data-table-tr">

 
 export default {
     data() {
+
         return {
             postListSearch: {
                 currentPage: 1,

             },
             postList: [],
             postListCount: 0,
-            postIdx: 0
+            postIdx: 0,
+            isBackground1: true,
+            isBackground2: false,
+            isBackground3: false,
+            isBackground4: true,
+            isBackground5: false,
+            isBackground6: true,
+            content: '정책자료'
+
         }
     },
     methods: {
+        updateContent(newContent) {
+            this.content = newContent
+        },
+        //click시 backgroundimg 변경
+        changeBackground() {
+            this.isBackground1 = !this.isBackground1;
+            this.isBackground2 = !this.isBackground2;
+            // 정책자료 클릭시, 연구자료와 가이드라인의 상태를 변경
+            this.isBackground3 = !this.isBackground1;
+            this.isBackground4 = this.isBackground1;
+            this.isBackground5 = !this.isBackground1;
+            this.isBackground6 = this.isBackground1;
+        },
+        changeBackground2() {
+
+            this.isBackground3 = !this.isBackground3;
+            this.isBackground4 = !this.isBackground4;
+            // 연구자료 클릭시, 정책자료와 가이드라인의 상태를 변경
+            this.isBackground1 = !this.isBackground3;
+            this.isBackground2 = this.isBackground3;
+            this.isBackground5 = !this.isBackground3;
+            this.isBackground6 = this.isBackground3;
+        },
+        changeBackground3() {
+            this.isBackground5 = !this.isBackground5;
+            this.isBackground6 = !this.isBackground6;
+            // 가이드라인 클릭시, 정책자료와 연구자료의 상태를 변경
+            this.isBackground1 = !this.isBackground5;
+            this.isBackground2 = this.isBackground5;
+            this.isBackground3 = !this.isBackground5;
+            this.isBackground4 = this.isBackground5;
+        },
         postSelectList: function () {
             const vm = this;
 

369bf5b

3752114

client/views/pages/user/Data/Technology.vue

--- client/views/pages/user/Data/Technology.vue

+++ client/views/pages/user/Data/Technology.vue


     },
     methods: {
         goToPage3() {
-            this.$router.push('/TechnologyDtail.page')
+            this.$router.push('/TechnologyOne.page')
         }
     },
     watch: {

3752114

client/views/pages/user/mypage/MatchingManager.vue (added)

+++ client/views/pages/user/mypage/MatchingManager.vue

...	...	@@ -0,0 +1,103 @@
	1	+<template>
	2	+ <div class="w1400">
	3	+ <section class="main-sec sec1">
	4	+ <!-- <div class="main-content"> -->
	5	+ <div class="flex">
	6	+ <!-- 매칭관리 비주얼 -->
	7	+ <div class="data-b">
	8	+ <div class="w1400">
	9	+ <div class="data-b-b">
	10	+ <!-- 매칭관리 텍스트 -->
	11	+ <div class="data-text">
	12	+ <img src="../../../../resources/jpg/data-img-text.png" alt="">
	13	+ <p>매칭 관리</p>
	14	+ </div>
	15	+ </div>
	16	+ </div>
	17	+ </div>
	18	+ </div>
	19	+ </section>
	20	+ <section class="matching-wrap-sub">
	21	+ <div class="matching-box-button">
	22	+ <div @click="selectedBox = 'inbox'">
	23	+
	24	+ <input type="radio" id="inbox" value="inbox" v-model="selectedBox">
	25	+ <label for="inbox">수신함</label>
	26	+ </div>
	27	+ <div @click="selectedBox = 'outbox'">
	28	+
	29	+ <input type="radio" id="outbox" value="outbox" v-model="selectedBox">
	30	+ <label for="outbox">발신함</label>
	31	+ </div>
	32	+ </div>
	33	+
	34	+ </section>
	35	+ <!-- 상세 -->
	36	+ <section>
	37	+ <div v-show="selectedBox === 'inbox'" class="inbox">
	38	+ <section>
	39	+
	40	+ <h1>PICK</h1>
	41	+ <div class="inbox-sub">
	42	+ <div class="inbox-img">
	43	+ <img src="../../../../resources/jpg/inbox-img.jpg" alt="명함박스">
	44	+ <div>
	45	+
	46	+ <button>수락</button>
	47	+ <button>거부</button>
	48	+ </div>
	49	+ </div>
	50	+ <div class="inbox-img">
	51	+ <img src="../../../../resources/jpg/inbox-img.jpg" alt="명함박스">
	52	+ <div>
	53	+
	54	+ <button>수락</button>
	55	+ <button>거부</button>
	56	+ </div>
	57	+ <div><button>수락된 기업</button></div>
	58	+ </div>
	59	+
	60	+ </div>
	61	+ </section>
	62	+ <section>
	63	+
	64	+ <h1>MACTHING</h1>
	65	+ <div class="inbox-sub">
	66	+ <div class="inbox-img-2">
	67	+ <img src="../../../../resources/jpg/inbox-img.jpg" alt="명함박스">
	68	+ <div>
	69	+
	70	+ <button>명함보기</button>
	71	+
	72	+ </div>
	73	+ </div>
	74	+ <div class="inbox-img-2">
	75	+ <img src="../../../../resources/jpg/inbox-img.jpg" alt="명함박스">
	76	+ <div>
	77	+
	78	+ <button>명함보기</button>
	79	+
	80	+ </div>
	81	+ </div>
	82	+ </div>
	83	+ </section>
	84	+ </div>
	85	+
	86	+
	87	+ </section>
	88	+ <section>
	89	+
	90	+ <div v-show="selectedBox === 'outbox'">내용2</div>
	91	+ </section>
	92	+
	93	+ </div>
	94	+</template>
	95	+<script>
	96	+export default {
	97	+ data() {
	98	+ return {
	99	+ selectedBox: 'inbox'
	100	+ }
	101	+ },
	102	+}
	103	+</script>(No newline at end of file)

369bf5b

3752114

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

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

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


     },
     methods: {
         goToPage1() {
-            this.$router.push('/MatchingDtail.page')
+            this.$router.push('/MatchingOne.page')
         }
     },
     watch: {

369bf5b

3752114

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

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

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


 <template>
-    <div class="mat-main">
-        <section class="main-sec sec1">
-            <!-- <div class="main-content"> -->
-            <div class="flex">
-                <!-- 매칭비주얼 -->
-                <div class="mat-b">
-                    <div class="w1400">
-                        <div class="mat-b-b">
-                            <div class="mat-img">
-                                <img src="../../../../resources/jpg/mat-img.png" alt="">
-                            </div>
-                            <!-- 매칭 텍스트 -->
-                            <div class="mat-text">
-                                <i class="fa-regular fa-handshake fa-lg" style="color: #ffffff;"></i>
-                                <p>기업 홍보관</p>
-                            </div>
-                            <div class="mat-img">
-                                <img src="../../../../resources/jpg/mat-img1.png" alt="">
-                            </div>
-
+    <section class="main-sec sec1">
+        <!-- <div class="main-content"> -->
+        <div class="flex">
+            <!-- 매칭비주얼 -->
+            <div class="matching-box-wrap">
+                <div class="w1400">
+                    <div class="matching-wrap">
+                        <div class="matching-img">
+                            <img src="../../../../resources/jpg/mat-img.png" alt="">
+                        </div>
+                        <!-- 매칭 텍스트 -->
+                        <div class="matching-text">
+                            <i class="fa-regular fa-handshake fa-lg" style="color: #ffffff;"></i>
+                            <p>기업 홍보관</p>
+                        </div>
+                        <div class="matching-img">
+                            <img src="../../../../resources/jpg/mat-img1.png" alt="">
                         </div>
 
                     </div>
+
                 </div>
             </div>
-        </section>
-
-
-        <div class="w1400">
-            <div class="mat-bos">
-                <h1><img src="../../../../resources/jpg/mat-img-d.png" alt="">회사소개</h1>
-
-            </div>
-            <div class="matDtail-sec">
-                <section class="mat-sec1">
-                    <h2>(주)지학사 <span>(1등급)</span></h2>
-                    <div>
-                        <input type="file" id="dtaildown" style="display: none;">
-                        <label for="dtaildown">회사소개서 다운로드</label>
-                        <i class="fa-solid fa-download" style="color: #ffffff;"></i>
-                    </div>
-                </section>
-
-                <!-- /상세내용 -->
-                <section class="mat-sec2">
-                    <div>
-                        <img src="../../../../resources/jpg/matching-img.png" alt="">
-                    </div>
-                    <div>
-                        <p>교과서
-                            지학사는 1956년 창립이후 공교육의 핵심인 교과용 도서 개발을 근간으로 초중고 학생들을 위한 국정,검정,인정 전 과목 교과서를 발행하고 있습니다.
-                        </p>
-                    </div>
-                    <div class="mat-sec2-end">
-                        <p>
-
-                            <i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i>
-                            366666
-                        </p>
-                        <p><span>조회수</span>45454</p>
-
-                    </div>
-                </section>
-
-                <section class="mat-sec2-bt">
-                    <button @click="goToPage2">목록</button>
-                </section>
-            </div>
         </div>
+    </section>
 
+    <div class="w1400">
+        <div class="mat-bos">
+            <h1><img src="../../../../resources/jpg/mat-img-d.png" width="50px" alt="">회사소개</h1>
+
+        </div>
+        <div class="matDtail-sec">
+            <section class="mat-sec1">
+                <h2>(주)지학사 <span>(1등급)</span></h2>
+                <div>
+                    <input type="file" id="dtaildown" style="display: none;">
+                    <label for="dtaildown">회사소개서 다운로드</label>
+                    <i class="fa-solid fa-download" style="color: #ffffff;"></i>
+                </div>
+            </section>
+
+            <!-- /상세내용 -->
+            <section class="mat-sec2">
+                <div>
+                    <img src="../../../../resources/jpg/matching-img.png" alt="">
+                </div>
+                <div>
+                    <p>교과서
+                        지학사는 1956년 창립이후 공교육의 핵심인 교과용 도서 개발을 근간으로 초중고 학생들을 위한 국정,검정,인정 전 과목 교과서를 발행하고 있습니다.
+                    </p>
+                </div>
+                <div class="mat-sec2-end">
+                    <p>
+
+                        <i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i>
+                        <span @click="openModal2">366666개</span>의 기업이 pick했습니다!
+                    </p>
+                    <p><span>조회수</span>45454</p>
+
+                </div>
+            </section>
+
+            <section class="mat-sec2-bt">
+                <button @click="goToPage2">목록</button>
+            </section>
+        </div>
+    </div>
+
+
+    <div v-show="showModal2" class="join-modal2">
+        <div class="mat-modal">
+
+            <h2>우리기업을 PICK한 기업</h2>
+            <button class="join-text-bt3" @click="closeModal2">X</button>
+        </div>
+        <table class="mat-modal-img">
+            <td><img src="../../../../resources/jpg/logo/edutech.png" alt=""></td>
+            <td v-for="item in items" :key="item.id">
+                <!-- <img :src="item.image" alt="" />/ -->
+                {{ item.text }}
+            </td>
+            <td><button :style="{ backgroundColor: buttonColor }" @click="accept">
+                    {{ buttonText }}
+                </button></td>
+        </table>
     </div>
 </template>
 

 export default {
     data() {
         return {
+            showModal2: false,
+            isAccepted: false,
+            buttonText: '수락',
+            buttonColor: '#3f87f7',
+            items: [
+
+                { id: 2, text: "oo출판사" },
+
+
+            ],
+            imagePath1: require("../../../../resources/jpg/fille.png"),
         }
     },
     methods: {
         goToPage2() {
             this.$router.push('/Matching.page')
-        }
+        },
+        openModal2() {
+            this.showModal2 = true;
+        },
+        closeModal2() {
+            this.showModal2 = false;
+        },
+        accept() {
+            this.isAccepted = !this.isAccepted;
+            this.buttonText = this.isAccepted ? '수락완료' : '수락';
+            this.buttonColor = this.isAccepted ? '#ccc' : '#3f87f7';
+        },
     },
     watch: {
 

 </script>
 
 <style scoped>
+img {
+    width: 100%;
+}
+
+.fa-lg {
+    font-size: 2rem;
+}
+
+
+
 @media all and (min-width: 1023px) and (max-width: 1268px) {
     .mat-sec1 {
         grid-template-columns: 80% 20%;

Add a comment

Open 0
Closed 0

List

...	...	@@ -265,11 +265,11 @@
265	265	font-family: "Pretendard-Regular";
266	266	}
267	267
268		-.insert-table th{
	268	+.insert-table th {
269	269	background-color: transparent;
270	270	color: #007aff;
271	271	}
272	272
273		-.insert-table td{
	273	+.insert-table td {
274	274	border-top: 0;
275	275	}

...	...	@@ -170,7 +170,7 @@
170	170	},
171	171	methods: {
172	172	goToPage3() {
173		- this.$router.push('/TechnologyDtail.page')
	173	+ this.$router.push('/TechnologyOne.page')
174	174	}
175	175	},
176	176	watch: {

...	...	@@ -660,7 +660,7 @@
660	660	}
661	661
662	662	.mat-bos img {
663		- width: 50px;
	663	+ width: 50px !important;
664	664	/* transform: translateY(10px);/ */
665	665	z-index: -1;
666	666	}
...	...	@@ -739,7 +739,7 @@
739	739
740	740	.mat-sec2-end p span {
741	741	color: #3f87f7;
742		- margin-right: 1rem;
	742	+ margin-left: 0.5rem;
743	743	}
744	744
745	745	.mat-sec2-end p:nth-child(2) {
...	...	@@ -760,11 +760,83 @@
760	760	border-radius: 0.5rem;
761	761	font-family: "Pretendard-Regular";
762	762	}
	763	+
	764	+.join-modal2 {
	765	+ position: fixed;
	766	+ top: 50%;
	767	+ left: 50%;
	768	+ width: 20%;
	769	+ /* height: 10%; */
	770	+ transform: translate(-50%, -50%);
	771	+ background: white;
	772	+ padding: 20px;
	773	+ border: 1px solid #ccc;
	774	+ border-radius: 10px;
	775	+ z-index: 999;
	776	+}
	777	+
	778	+.mat-modal {
	779	+ display: grid;
	780	+ gap: 1rem;
	781	+ grid-template-columns: 80% 1fr;
	782	+}
	783	+
	784	+.join-modal2 h2 {
	785	+ padding: 1rem 0;
	786	+ text-align: center;
	787	+}
	788	+
	789	+.join-text-bt3 {
	790	+ width: 100%;
	791	+ margin: 0 auto;
	792	+ height: 3rem;
	793	+ color: rgb(0, 0, 0);
	794	+ border-radius: 0.5rem;
	795	+
	796	+ background-color: #3f86f700;
	797	+}
	798	+
	799	+.mat-modal-img {
	800	+ display: grid;
	801	+ grid-template-columns: 1fr 1fr 1fr;
	802	+}
	803	+.mat-modal-img button {
	804	+ width: 100%;
	805	+ padding: 0.5rem 0;
	806	+ border-radius: 1rem;
	807	+ color: white;
	808	+ background-color: #3f87f7;
	809	+}
	810	+
763	811	/* ---------------------------------------------------------------------------------------------- */
764	812
765	813	/* Data css */
	814	+
	815	+/* 231107수정 김하영 */
	816	+#data-app p {
	817	+ padding: 1rem;
	818	+ font-size: 2rem;
	819	+ font-family: "Pretendard-Regular";
	820	+}
	821	+#data-app span {
	822	+ font-weight: 700;
	823	+ font-family: "Pretendard-Regular";
	824	+
	825	+ color: #007aff;
	826	+}
	827	+.data-wrap {
	828	+ width: 100%;
	829	+ display: grid;
	830	+ grid-template-columns: 70% 1fr;
	831	+}
	832	+.data-wrap-search {
	833	+ width: 100%;
	834	+ float: right;
	835	+ display: grid;
	836	+ grid-template-columns: 30% 1fr;
	837	+}
766	838	.data-btn-wrap {
767		- padding: 3rem !important;
	839	+ padding: 3rem 0rem !important;
768	840	}
769	841	.data-box {
770	842	border: 1px solid red;
...	...	@@ -779,7 +851,7 @@
779	851	}
780	852	.data-b-b {
781	853	width: 100%;
782		- padding: 6rem;
	854	+ padding: 6rem 0;
783	855	font-size: 4rem;
784	856	color: #0e0077;
785	857
...	...	@@ -807,7 +879,7 @@
807	879
808	880	.data-b-grid {
809	881	width: 100%;
810		- padding: 3rem;
	882	+ padding: 3rem 0;
811	883	display: grid;
812	884	grid-template-columns: 1fr 1fr 1fr;
813	885	}
...	...	@@ -816,12 +888,20 @@
816	888	width: 100%;
817	889	}
818	890	.da1 {
819		- width: 80%;
820		- height: 40rem;
	891	+ max-width: 100%;
	892	+ height: auto;
821	893	margin: 0 auto;
822		- display: grid;
823		- grid-template-columns: 1fr;
824		- align-content: start;
	894	+ position: relative;
	895	+ top: 0;
	896	+ left: 0;
	897	+}
	898	+.data-da1-1 {
	899	+ position: absolute;
	900	+ top: 0;
	901	+ left: 0;
	902	+}
	903	+.da1 img {
	904	+ width: 100%;
825	905	}
826	906	.da1 h2 {
827	907	font-family: SBaggroM;
...	...	@@ -831,13 +911,72 @@
831	911	.da1 h2 span {
832	912	font-size: 4rem;
833	913	}
834		-.data-b-1 {
835		- /* background-color: #007aff; */
836		- background: url(../jpg/data-img.png) no-repeat center center;
837		- background-size: cover;
	914	+/*
	915	+.background-image-2 {
	916	+ max-width: 100%;
	917	+ height: auto;
	918	+ margin: 0 auto;
	919	+ display: grid;
	920	+ grid-template-columns: 1fr;
	921	+ align-content: start;
	922	+ background: url(../jpg/data-imgbak.png) no-repeat center center;
	923	+ background-size: contain;
838	924	position: relative;
839	925	text-align: center;
	926	+} */
	927	+/* .background-image-3 {
	928	+ max-width: 100%;
	929	+ height: auto;
	930	+ margin: 0 auto;
	931	+ display: grid;
	932	+ grid-template-columns: 1fr;
	933	+ align-content: start;
	934	+ cursor: pointer;
	935	+ background: url(../jpg/data-img3.png) no-repeat center center;
	936	+ background-size: contain;
	937	+ position: relative;
	938	+ text-align: center;
	939	+} */
	940	+.background-image-4 {
	941	+ max-width: 100%;
	942	+ height: auto;
	943	+ margin: 0 auto;
	944	+ display: grid;
	945	+ grid-template-columns: 1fr;
	946	+ cursor: pointer;
	947	+ align-content: start;
	948	+ background: url(../jpg/data-img3back.png) no-repeat center center;
	949	+ background-size: contain;
	950	+ position: relative;
	951	+ text-align: center;
	952	+}
	953	+.background-image-5 {
	954	+ max-width: 100%;
	955	+ height: auto;
	956	+ margin: 0 auto;
	957	+ display: grid;
	958	+ grid-template-columns: 1fr;
	959	+ align-content: start;
	960	+ /* background-color: #007aff; */
	961	+ background: url(../jpg/data-img2.png) no-repeat center center;
	962	+ background-size: contain;
	963	+ position: relative;
	964	+ cursor: pointer;
	965	+ text-align: center;
840	966	/* border-radius: 2rem; */
	967	+}
	968	+.background-image-6 {
	969	+ max-width: 100%;
	970	+ height: auto;
	971	+ margin: 0 auto;
	972	+ display: grid;
	973	+ cursor: pointer;
	974	+ grid-template-columns: 1fr;
	975	+ align-content: start;
	976	+ background: url(../jpg/data-imgback.png) no-repeat center center;
	977	+ background-size: contain;
	978	+ position: relative;
	979	+ text-align: center;
841	980	}
842	981	.data-b-1 h2 {
843	982	text-align: left;
...	...	@@ -856,26 +995,6 @@
856	995	cursor: pointer;
857	996	}
858	997
859		-.data-b-1::after {
860		- position: absolute;
861		- content: "";
862		- width: 90px;
863		- height: 90px;
864		- right: -90px;
865		- top: 40%;
866		-
867		- background-color: #e2ecfc;
868		- border-radius: 45px;
869		- transform: translateX(-50%);
870		- z-index: -1;
871		-}
872		-.data-b-2 {
873		- background: url(../jpg/data-img3.png) no-repeat center center;
874		- background-size: cover;
875		- position: relative;
876		- text-align: center;
877		- cursor: pointer;
878		-}
879	998	.data-b-2 h2 {
880	999	text-align: center;
881	1000	padding: 3rem;
...	...	@@ -897,28 +1016,6 @@
897	1016	.data-table-tr {
898	1017	width: 100%;
899	1018	padding: 12rem 3rem;
900		-}
901		-.data-b-3 {
902		- background: url(../jpg/data-img2.png) no-repeat center center;
903		- background-size: cover;
904		- position: relative;
905		- text-align: center;
906		- cursor: pointer;
907		-
908		- /* border: 1px solid red; */
909		-}
910		-.data-b-3::after {
911		- position: absolute;
912		- content: "";
913		- width: 90px;
914		- height: 90px;
915		- left: 0px;
916		- top: 40%;
917		-
918		- background-color: #f8e7cd;
919		- border-radius: 45px;
920		- transform: translateX(-50%);
921		- z-index: -1;
922	1019	}
923	1020
924	1021	.data-b-3 h2 {
...	...	@@ -943,7 +1040,7 @@
943	1040	}
944	1041	.data-table-tr {
945	1042	width: 100%;
946		- padding: 0rem 3rem 12rem 3rem;
	1043	+ padding: 0rem 0rem 12rem 0rem;
947	1044	}
948	1045
949	1046	.data-table-tr td:nth-child(2) {
...	...	@@ -1726,3 +1823,98 @@
1726	1823	padding: 1rem;
1727	1824	border-radius: 1rem;
1728	1825	}
	1826	+/* 매칭관리css */
	1827	+.matching-wrap-sub {
	1828	+ width: 100%;
	1829	+ margin: 0 auto;
	1830	+}
	1831	+.matching-box-button {
	1832	+ border: 1px solid red;
	1833	+ width: 50%;
	1834	+ display: grid;
	1835	+ grid-template-columns: 1fr 1fr;
	1836	+}
	1837	+.matching-box-button input {
	1838	+ display: none;
	1839	+}
	1840	+.matching-box-button label {
	1841	+ text-align: center;
	1842	+ width: 100%;
	1843	+
	1844	+ font-size: 2rem;
	1845	+}
	1846	+.matching-box-button div {
	1847	+ width: 100%;
	1848	+ padding: 3rem;
	1849	+ background-color: #007aff;
	1850	+ color: white;
	1851	+ border: 1px solid red;
	1852	+}
	1853	+.inbox {
	1854	+ display: grid;
	1855	+ border: 1px solid red;
	1856	+ grid-template-columns: 1fr;
	1857	+}
	1858	+.inbox-sub {
	1859	+ width: 100%;
	1860	+ padding: 6rem 0;
	1861	+ display: grid;
	1862	+ grid-template-columns: 1fr 1fr 1fr;
	1863	+ gap: 3rem;
	1864	+}
	1865	+.inbox-img {
	1866	+ width: 100%;
	1867	+ border-radius: 2rem;
	1868	+ background-color: #f9f9f9;
	1869	+ padding: 3rem 3rem 01rem 3rem;
	1870	+ box-shadow: 1px 1px 5px #33333344;
	1871	+}
	1872	+.inbox-img img {
	1873	+ width: 100%;
	1874	+
	1875	+ border-radius: 2rem;
	1876	+}
	1877	+.inbox-img div {
	1878	+ display: grid;
	1879	+ grid-template-columns: 1fr 1fr;
	1880	+ gap: 1rem;
	1881	+
	1882	+ margin: 1rem;
	1883	+}
	1884	+.inbox-img button {
	1885	+ padding: 1rem 2rem;
	1886	+ border-radius: 1rem;
	1887	+}
	1888	+.inbox-img button:nth-child(1) {
	1889	+ background-color: #007aff;
	1890	+ color: white;
	1891	+ font-weight: 700;
	1892	+}
	1893	+.inbox-img button:nth-child(2) {
	1894	+ background-color: rgb(126, 126, 126) 8b8;
	1895	+ color: rgb(49, 49, 49);
	1896	+ font-weight: 700;
	1897	+}
	1898	+.inbox-img-2 img {
	1899	+ width: 100%;
	1900	+
	1901	+ border-radius: 2rem;
	1902	+}
	1903	+.inbox-img-2 {
	1904	+ width: 100%;
	1905	+ border-radius: 2rem;
	1906	+ background-color: #f9f9f9;
	1907	+ padding: 3rem 3rem 01rem 3rem;
	1908	+ box-shadow: 1px 1px 5px #33333344;
	1909	+}
	1910	+.inbox-img-2 div {
	1911	+ margin: 1rem;
	1912	+}
	1913	+.inbox-img-2 button {
	1914	+ width: 100%;
	1915	+ padding: 1rem 2rem;
	1916	+ border-radius: 1rem;
	1917	+ background-color: #007aff;
	1918	+ color: white;
	1919	+ font-weight: 700;
	1920	+}

...	...	@@ -16,6 +16,7 @@
16	16	import Wgcommunity from "../pages/user/community/Wgcommunity.vue";
17	17	import NoticeOne from "./user/community/NoticeOne.vue";
18	18	import Info from "../pages/user/mypage/Info.vue";
	19	+import MatchingManager from "../pages/user/mypage/MatchingManager.vue";
19	20	import Infosub from "../pages/user/mypage/Infosub.vue";
20	21	import Guide from "../pages/user/Data/Guide.vue";
21	22	import DataDtali from "./user/Data/DataOne.vue";
...	...	@@ -61,28 +62,114 @@
61	62	{ path: "/NoticeOne.page", name: "NoticeOne", component: NoticeOne },
62	63	{ path: "/Wgcommunity.page", name: "Wgcommunity", component: Wgcommunity },
63	64	{ path: "/MatchingOne.page", name: "MatchingOne", component: MatchingOne },
64		- { path: "/TechnologyOne.page", name: "TechnologyOne", component: TechnologyOne },
	65	+ {
	66	+ path: "/TechnologyOne.page",
	67	+ name: "TechnologyOne",
	68	+ component: TechnologyOne,
	69	+ },
	70	+ {
	71	+ path: "/MatchingManager.page",
	72	+ name: "MatchingManager",
	73	+ component: MatchingManager,
	74	+ },
65	75	/* 관리자 */
66		- { path: "/adm.page", name: "AdminMain", component: AdminMain, meta: { requiresAuth: true } },
	76	+ {
	77	+ path: "/adm.page",
	78	+ name: "AdminMain",
	79	+ component: AdminMain,
	80	+ meta: { requiresAuth: true },
	81	+ },
67	82	{ path: "/adm/login.page", name: "AdminLogin", component: AdminLogin },
68		- { path: "/adm/userSelectList.page", name: "AdminUserSelectList", component: AdminUserSelectList },
69		- { path: "/adm/userSelectOne.page", name: "AdminUserSelectOne", component: AdminUserSelectOne },
70		- { path: "/adm/noticeSelectList.page", name: "AdminNoticeSelectList", component: AdminNoticeSelectList },
71		- { path: "/adm/noticeSelectOne.page", name: "AdminNoticeSelectOne", component: AdminNoticeSelectOne },
72		- { path: "/adm/noticeInsert.page", name: "AdminNoticeInsert", component: AdminNoticeInsert },
73		- { path: "/adm/newsSelectList.page", name: "AdminNewsSelectList", component: AdminNewsSelectList },
74		- { path: "/adm/newsSelectOne.page", name: "AdminNewsSelectOne", component: AdminNewsSelectOne },
75		- { path: "/adm/newsInsert.page", name: "AdminNewsInsert", component: AdminNewsInsert },
76		- { path: "/adm/techSelectList.page", name: "AdminTechSelectList", component: AdminTechSelectList },
77		- { path: "/adm/techSelectOne.page", name: "AdminTechSelectOne", component: AdminTechSelectOne },
78		- { path: "/adm/techInsert.page", name: "AdminTechInsert", component: AdminTechInsert },
79		- { path: "/adm/dataSelectList.page", name: "AdminDataSelectList", component: AdminDataSelectList },
80		- { path: "/adm/dataSelectOne.page", name: "AdminDataSelectOne", component: AdminDataSelectOne },
81		- { path: "/adm/dataInsert.page", name: "AdminDataInsert", component: AdminDataInsert },
82		- { path: "/adm/dataUpdate.page", name: "AdminDataUpdate", component: AdminDataUpdate },
83		- { path: "/adm/networkingSelectList.page", name: "AdminNetworkingSelectList", component: AdminNetworkingSelectList },
84		- { path: "/adm/networkingSelectOne.page", name: "AdminNetworkingSelectOne", component: AdminNetworkingSelectOne },
85		- { path: "/adm/networkingUpdate.page", name: "AdminNetworkingUpdate", component: AdminNetworkingUpdate },
	83	+ {
	84	+ path: "/adm/userSelectList.page",
	85	+ name: "AdminUserSelectList",
	86	+ component: AdminUserSelectList,
	87	+ },
	88	+ {
	89	+ path: "/adm/userSelectOne.page",
	90	+ name: "AdminUserSelectOne",
	91	+ component: AdminUserSelectOne,
	92	+ },
	93	+ {
	94	+ path: "/adm/noticeSelectList.page",
	95	+ name: "AdminNoticeSelectList",
	96	+ component: AdminNoticeSelectList,
	97	+ },
	98	+ {
	99	+ path: "/adm/noticeSelectOne.page",
	100	+ name: "AdminNoticeSelectOne",
	101	+ component: AdminNoticeSelectOne,
	102	+ },
	103	+ {
	104	+ path: "/adm/noticeInsert.page",
	105	+ name: "AdminNoticeInsert",
	106	+ component: AdminNoticeInsert,
	107	+ },
	108	+ {
	109	+ path: "/adm/newsSelectList.page",
	110	+ name: "AdminNewsSelectList",
	111	+ component: AdminNewsSelectList,
	112	+ },
	113	+ {
	114	+ path: "/adm/newsSelectOne.page",
	115	+ name: "AdminNewsSelectOne",
	116	+ component: AdminNewsSelectOne,
	117	+ },
	118	+ {
	119	+ path: "/adm/newsInsert.page",
	120	+ name: "AdminNewsInsert",
	121	+ component: AdminNewsInsert,
	122	+ },
	123	+ {
	124	+ path: "/adm/techSelectList.page",
	125	+ name: "AdminTechSelectList",
	126	+ component: AdminTechSelectList,
	127	+ },
	128	+ {
	129	+ path: "/adm/techSelectOne.page",
	130	+ name: "AdminTechSelectOne",
	131	+ component: AdminTechSelectOne,
	132	+ },
	133	+ {
	134	+ path: "/adm/techInsert.page",
	135	+ name: "AdminTechInsert",
	136	+ component: AdminTechInsert,
	137	+ },
	138	+ {
	139	+ path: "/adm/dataSelectList.page",
	140	+ name: "AdminDataSelectList",
	141	+ component: AdminDataSelectList,
	142	+ },
	143	+ {
	144	+ path: "/adm/dataSelectOne.page",
	145	+ name: "AdminDataSelectOne",
	146	+ component: AdminDataSelectOne,
	147	+ },
	148	+ {
	149	+ path: "/adm/dataInsert.page",
	150	+ name: "AdminDataInsert",
	151	+ component: AdminDataInsert,
	152	+ },
	153	+ {
	154	+ path: "/adm/dataUpdate.page",
	155	+ name: "AdminDataUpdate",
	156	+ component: AdminDataUpdate,
	157	+ },
	158	+ {
	159	+ path: "/adm/networkingSelectList.page",
	160	+ name: "AdminNetworkingSelectList",
	161	+ component: AdminNetworkingSelectList,
	162	+ },
	163	+ {
	164	+ path: "/adm/networkingSelectOne.page",
	165	+ name: "AdminNetworkingSelectOne",
	166	+ component: AdminNetworkingSelectOne,
	167	+ },
	168	+ {
	169	+ path: "/adm/networkingUpdate.page",
	170	+ name: "AdminNetworkingUpdate",
	171	+ component: AdminNetworkingUpdate,
	172	+ },
86	173	];
87	174
88	175	const AppRouter = createRouter({

...	...	@@ -24,32 +24,52 @@
24	24	<div class="w1400">
25	25	<div class="data-b-grid">
26	26	<!-- 윗쪽 아이콘 -->
27		- <div class="data-b-1 da1">
28		- <h2>AI 디지털교과서<br><span>정책자료</span></h2>
29		- <div class="data-t">
	27	+ <div class="data-b-1 da1" @click="updateContent('정책자료')">
	28	+ <div @click="changeBackground"
	29	+ :class="{ 'background-image-1': isBackground1, 'background-image-2': isBackground2 }">
	30	+ <img src="../../../../resources/jpg/data-img.png" alt="">
	31	+ <div class="data-da1-1">
30	32
31		- <p>· 개발 지원 정책 문서</p>
32		- <p>· 법·제도 문서 등</p>
	33	+ <h2>AI 디지털교과서<br><span>정책자료</span></h2>
	34	+ <div class="data-t">
	35	+
	36	+ <p>· 개발 지원 정책 문서</p>
	37	+ <p>· 법·제도 문서 등</p>
	38	+ </div>
	39	+ </div>
	40	+
33	41	</div>
	42	+
34	43	</div>
35		- <div class="data-b-2 da1">
36		- <h2>AI 디지털교과서<br><span>연구자료</span></h2>
37		- <div class="data-t data-t2">
38		- <p>· 서비스 모델, 프로토타입 연구·보고서 등</p>
	44	+ <div class="data-b-2 da1" @click="updateContent('연구자료')">
	45	+ <div>
	46	+ <img @click="changeBackground2"
	47	+ :class="{ 'background-image-3': isBackground3, 'background-image-4': isBackground4 }"
	48	+ src="../../../../resources/jpg/data-img3.png" alt="">
	49	+ <div class="data-da1-1">
	50	+
	51	+ <h2>AI 디지털교과서<br><span>연구자료</span></h2>
	52	+ <div class="data-t data-t2">
	53	+ <p>· 서비스 모델, 프로토타입 연구·보고서 등</p>
	54	+ </div>
	55	+ </div>
39	56	</div>
40	57	</div>
41	58	<div class="data-b-3 da1">
42		- <h2>AI 디지털교과서<br><span>가이드라인</span></h2>
43		- <div class="data-t">
	59	+ <div @click="changeBackground3"
	60	+ :class="{ 'background-image-5': isBackground5, 'background-image-6': isBackground6 }">
	61	+ <h2>AI 디지털교과서<br><span>가이드라인</span></h2>
	62	+ <div class="data-t">
44	63
45		- <div class="guide-logo-bt">
	64	+ <div class="guide-logo-bt">
46	65
47		- <a style="font-size: 15px;" class="down-btn-1"
48		- href="https://webst.edunet.net/AIDT/AI 디지털교과서 개발 가이드라인.pdf" target='_blank'
49		- download>
50		- <i class="fa-solid fa-circle-down guide_i"
51		- style="font-size: 20px; margin-right: 10px;"></i>가이드라인
52		- 다운받기</a>
	66	+ <a style="font-size: 15px;" class="down-btn-1"
	67	+ href="https://webst.edunet.net/AIDT/AI 디지털교과서 개발 가이드라인.pdf" target='_blank'
	68	+ download>
	69	+ <i class="fa-solid fa-circle-down guide_i"
	70	+ style="font-size: 20px; margin-right: 10px;"></i>가이드라인
	71	+ 다운로드</a>
	72	+ </div>
53	73	</div>
54	74	</div>
55	75	</div>
...	...	@@ -64,16 +84,27 @@
64	84	<div class="data-b">
65	85	<div class="w1400">
66	86	<div class="btn-wrap data-btn-wrap">
67		- <select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild">
68		- <option :value=null selected>전체</option>
69		- <option value="title">제목</option>
70		- <option value="user">작성자</option>
71		- <option value="조회순">조회순</option>
72		- </select>
73		- <div class="input-group">
74		- <input type="text" class="input" placeholder="검색어를 입력해주세요." v-model="postListSearch.searchText"
75		- @keyup.enter="postSelectList()">
76		- <input class="button--submit" value="검색" type="submit" @click="postSelectList()">
	87	+ <div class="data-wrap">
	88	+
	89	+
	90	+ <div id="data-app">
	91	+
	92	+ <p>자료집> <span>{{ content }}</span></p>
	93	+ </div>
	94	+ <div class="data-wrap-search">
	95	+
	96	+ <select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild">
	97	+ <option :value=null selected>전체</option>
	98	+ <option value="title">제목</option>
	99	+ <option value="user">작성자</option>
	100	+ <option value="조회순">조회순</option>
	101	+ </select>
	102	+ <div class="input-group">
	103	+ <input type="text" class="input" placeholder="검색어를 입력해주세요."
	104	+ v-model="postListSearch.searchText" @keyup.enter="postSelectList()">
	105	+ <input class="button--submit" value="검색" type="submit" @click="postSelectList()">
	106	+ </div>
	107	+ </div>
77	108	</div>
78	109	</div>
79	110	<div class="data-table-tr">
...	...	@@ -108,6 +139,7 @@
108	139
109	140	export default {
110	141	data() {
	142	+
111	143	return {
112	144	postListSearch: {
113	145	currentPage: 1,
...	...	@@ -117,10 +149,50 @@
117	149	},
118	150	postList: [],
119	151	postListCount: 0,
120		- postIdx: 0
	152	+ postIdx: 0,
	153	+ isBackground1: true,
	154	+ isBackground2: false,
	155	+ isBackground3: false,
	156	+ isBackground4: true,
	157	+ isBackground5: false,
	158	+ isBackground6: true,
	159	+ content: '정책자료'
	160	+
121	161	}
122	162	},
123	163	methods: {
	164	+ updateContent(newContent) {
	165	+ this.content = newContent
	166	+ },
	167	+ //click시 backgroundimg 변경
	168	+ changeBackground() {
	169	+ this.isBackground1 = !this.isBackground1;
	170	+ this.isBackground2 = !this.isBackground2;
	171	+ // 정책자료 클릭시, 연구자료와 가이드라인의 상태를 변경
	172	+ this.isBackground3 = !this.isBackground1;
	173	+ this.isBackground4 = this.isBackground1;
	174	+ this.isBackground5 = !this.isBackground1;
	175	+ this.isBackground6 = this.isBackground1;
	176	+ },
	177	+ changeBackground2() {
	178	+
	179	+ this.isBackground3 = !this.isBackground3;
	180	+ this.isBackground4 = !this.isBackground4;
	181	+ // 연구자료 클릭시, 정책자료와 가이드라인의 상태를 변경
	182	+ this.isBackground1 = !this.isBackground3;
	183	+ this.isBackground2 = this.isBackground3;
	184	+ this.isBackground5 = !this.isBackground3;
	185	+ this.isBackground6 = this.isBackground3;
	186	+ },
	187	+ changeBackground3() {
	188	+ this.isBackground5 = !this.isBackground5;
	189	+ this.isBackground6 = !this.isBackground6;
	190	+ // 가이드라인 클릭시, 정책자료와 연구자료의 상태를 변경
	191	+ this.isBackground1 = !this.isBackground5;
	192	+ this.isBackground2 = this.isBackground5;
	193	+ this.isBackground3 = !this.isBackground5;
	194	+ this.isBackground4 = this.isBackground5;
	195	+ },
124	196	postSelectList: function () {
125	197	const vm = this;
126	198

...	...	@@ -369,7 +369,7 @@
369	369	},
370	370	methods: {
371	371	goToPage1() {
372		- this.$router.push('/MatchingDtail.page')
	372	+ this.$router.push('/MatchingOne.page')
373	373	}
374	374	},
375	375	watch: {

...	...	@@ -1,74 +1,89 @@
1	1	<template>
2		- <div class="mat-main">
3		- <section class="main-sec sec1">
4		- <!-- <div class="main-content"> -->
5		- <div class="flex">
6		- <!-- 매칭비주얼 -->
7		- <div class="mat-b">
8		- <div class="w1400">
9		- <div class="mat-b-b">
10		- <div class="mat-img">
11		- <img src="../../../../resources/jpg/mat-img.png" alt="">
12		- </div>
13		- <!-- 매칭 텍스트 -->
14		- <div class="mat-text">
15		- <i class="fa-regular fa-handshake fa-lg" style="color: #ffffff;"></i>
16		- <p>기업 홍보관</p>
17		- </div>
18		- <div class="mat-img">
19		- <img src="../../../../resources/jpg/mat-img1.png" alt="">
20		- </div>
21		-
	2	+ <section class="main-sec sec1">
	3	+ <!-- <div class="main-content"> -->
	4	+ <div class="flex">
	5	+ <!-- 매칭비주얼 -->
	6	+ <div class="matching-box-wrap">
	7	+ <div class="w1400">
	8	+ <div class="matching-wrap">
	9	+ <div class="matching-img">
	10	+ <img src="../../../../resources/jpg/mat-img.png" alt="">
	11	+ </div>
	12	+ <!-- 매칭 텍스트 -->
	13	+ <div class="matching-text">
	14	+ <i class="fa-regular fa-handshake fa-lg" style="color: #ffffff;"></i>
	15	+ <p>기업 홍보관</p>
	16	+ </div>
	17	+ <div class="matching-img">
	18	+ <img src="../../../../resources/jpg/mat-img1.png" alt="">
22	19	</div>
23	20
24	21	</div>
	22	+
25	23	</div>
26	24	</div>
27		- </section>
28		-
29		-
30		- <div class="w1400">
31		- <div class="mat-bos">
32		- <h1><img src="../../../../resources/jpg/mat-img-d.png" alt="">회사소개</h1>
33		-
34		- </div>
35		- <div class="matDtail-sec">
36		- <section class="mat-sec1">
37		- <h2>(주)지학사 <span>(1등급)</span></h2>
38		- <div>
39		- <input type="file" id="dtaildown" style="display: none;">
40		- <label for="dtaildown">회사소개서 다운로드</label>
41		- <i class="fa-solid fa-download" style="color: #ffffff;"></i>
42		- </div>
43		- </section>
44		-
45		- <!-- /상세내용 -->
46		- <section class="mat-sec2">
47		- <div>
48		- <img src="../../../../resources/jpg/matching-img.png" alt="">
49		- </div>
50		- <div>
51		- <p>교과서
52		- 지학사는 1956년 창립이후 공교육의 핵심인 교과용 도서 개발을 근간으로 초중고 학생들을 위한 국정,검정,인정 전 과목 교과서를 발행하고 있습니다.
53		- </p>
54		- </div>
55		- <div class="mat-sec2-end">
56		- <p>
57		-
58		- <i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i>
59		- 366666
60		- </p>
61		- <p><span>조회수</span>45454</p>
62		-
63		- </div>
64		- </section>
65		-
66		- <section class="mat-sec2-bt">
67		- <button @click="goToPage2">목록</button>
68		- </section>
69		- </div>
70	25	</div>
	26	+ </section>
71	27
	28	+ <div class="w1400">
	29	+ <div class="mat-bos">
	30	+ <h1><img src="../../../../resources/jpg/mat-img-d.png" width="50px" alt="">회사소개</h1>
	31	+
	32	+ </div>
	33	+ <div class="matDtail-sec">
	34	+ <section class="mat-sec1">
	35	+ <h2>(주)지학사 <span>(1등급)</span></h2>
	36	+ <div>
	37	+ <input type="file" id="dtaildown" style="display: none;">
	38	+ <label for="dtaildown">회사소개서 다운로드</label>
	39	+ <i class="fa-solid fa-download" style="color: #ffffff;"></i>
	40	+ </div>
	41	+ </section>
	42	+
	43	+ <!-- /상세내용 -->
	44	+ <section class="mat-sec2">
	45	+ <div>
	46	+ <img src="../../../../resources/jpg/matching-img.png" alt="">
	47	+ </div>
	48	+ <div>
	49	+ <p>교과서
	50	+ 지학사는 1956년 창립이후 공교육의 핵심인 교과용 도서 개발을 근간으로 초중고 학생들을 위한 국정,검정,인정 전 과목 교과서를 발행하고 있습니다.
	51	+ </p>
	52	+ </div>
	53	+ <div class="mat-sec2-end">
	54	+ <p>
	55	+
	56	+ <i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i>
	57	+ <span @click="openModal2">366666개</span>의 기업이 pick했습니다!
	58	+ </p>
	59	+ <p><span>조회수</span>45454</p>
	60	+
	61	+ </div>
	62	+ </section>
	63	+
	64	+ <section class="mat-sec2-bt">
	65	+ <button @click="goToPage2">목록</button>
	66	+ </section>
	67	+ </div>
	68	+ </div>
	69	+
	70	+
	71	+ <div v-show="showModal2" class="join-modal2">
	72	+ <div class="mat-modal">
	73	+
	74	+ <h2>우리기업을 PICK한 기업</h2>
	75	+ <button class="join-text-bt3" @click="closeModal2">X</button>
	76	+ </div>
	77	+ <table class="mat-modal-img">
	78	+ <td><img src="../../../../resources/jpg/logo/edutech.png" alt=""></td>
	79	+ <td v-for="item in items" :key="item.id">
	80	+ <!-- <img :src="item.image" alt="" />/ -->
	81	+ {{ item.text }}
	82	+ </td>
	83	+ <td><button :style="{ backgroundColor: buttonColor }" @click="accept">
	84	+ {{ buttonText }}
	85	+ </button></td>
	86	+ </table>
72	87	</div>
73	88	</template>
74	89
...	...	@@ -76,12 +91,34 @@
76	91	export default {
77	92	data() {
78	93	return {
	94	+ showModal2: false,
	95	+ isAccepted: false,
	96	+ buttonText: '수락',
	97	+ buttonColor: '#3f87f7',
	98	+ items: [
	99	+
	100	+ { id: 2, text: "oo출판사" },
	101	+
	102	+
	103	+ ],
	104	+ imagePath1: require("../../../../resources/jpg/fille.png"),
79	105	}
80	106	},
81	107	methods: {
82	108	goToPage2() {
83	109	this.$router.push('/Matching.page')
84		- }
	110	+ },
	111	+ openModal2() {
	112	+ this.showModal2 = true;
	113	+ },
	114	+ closeModal2() {
	115	+ this.showModal2 = false;
	116	+ },
	117	+ accept() {
	118	+ this.isAccepted = !this.isAccepted;
	119	+ this.buttonText = this.isAccepted ? '수락완료' : '수락';
	120	+ this.buttonColor = this.isAccepted ? '#ccc' : '#3f87f7';
	121	+ },
85	122	},
86	123	watch: {
87	124
...	...	@@ -96,6 +133,16 @@
96	133	</script>
97	134
98	135	<style scoped>
	136	+img {
	137	+ width: 100%;
	138	+}
	139	+
	140	+.fa-lg {
	141	+ font-size: 2rem;
	142	+}
	143	+
	144	+
	145	+
99	146	@media all and (min-width: 1023px) and (max-width: 1268px) {
100	147	.mat-sec1 {
101	148	grid-template-columns: 80% 20%;

Delete comment