yjryu / KERIS star
kimgkdud898 2023-10-26
231026김하영 회원가입 모달, 기술문서페이지
@99980be71e3fdf58f2efa99d3dc85f3a101944f9
fa84e1e
99980be
client/resources/css/Data.css
--- client/resources/css/Data.css
+++ client/resources/css/Data.css
@@ -9,7 +9,9 @@
 
 .data-b-b {
 
   width: 100%;
 
   padding: 6rem;
 
-  font-size: 3rem;
 
+  font-size: 4rem;
 
+  color: #0e0077;
 
+
 
   font-family: SBaggroM;
 
 }
@@ -21,7 +23,7 @@
 
   position: absolute;
 
   top: -30px;
 
   background-size: 60px 30px;
 
-  background-image: url("../jpg/data-img-text.png");
 
+  background-image: url("../jpg/tdata-img-text.png");
 
   width: 60px;
 
   height: 30px;
 
 }
fa84e1e
99980be
client/resources/css/responsive.css
--- client/resources/css/responsive.css
+++ client/resources/css/responsive.css
@@ -3,7 +3,7 @@
 
     font-size: 2.5rem;
 
   }
 
   .data-b-1 p span,.data-b-3 p span,.data-b-2 p span{
 
-    border: 1px solid red;
 
+    border: 1px/ solid red;
 
     padding: 2rem;
 
   }
 
   .m-benner{
 
99980be
client/resources/jpg/tech-logo.png (Binary) (added)
+++ client/resources/jpg/tech-logo.png
Binary file is not shown
fa84e1e
99980be
client/views/layout/Menu.vue
--- client/views/layout/Menu.vue
+++ client/views/layout/Menu.vue
@@ -64,10 +64,10 @@
 
                 },
 
                 {
 
                     text: "자료실",
 
-                    link: "",
 
+                    link: "/Technology.page",
 
                     isHovered: false,
 
                     subMenu: [
 
-                        { text: "기술문서", link: "" },
 
+                        { text: "기술문서", link: "/Technology.page" },
 
                         { text: "자료집", link: "/Data.page" }
 
                     ]
 
                 },
fa84e1e
99980be
client/views/pages/AppRouter.js
--- client/views/pages/AppRouter.js
+++ client/views/pages/AppRouter.js
@@ -6,6 +6,7 @@
 
 import Login from "../pages/login/Login.vue";
 
 import Join from "../pages/Join/Join.vue";
 
 import Introduction from "../pages/introduction/Introduction.vue";
 
+import Technology from "../pages/Data/Technology.vue";
 
 
 const routes = [
 
   /* 메인화면 */
@@ -15,6 +16,7 @@
 
   { path: "/Login.page", name: "Login", component: Login },
 
   { path: "/Join.page", name: "Join", component: Join },
 
   { path: "/Introduction.page", name: "Introduction", component: Introduction },
 
+  { path: "/Technology.page", name: "Technology", component: Technology },
 
 ];
 
 
 const AppRouter = createRouter({
 
99980be
client/views/pages/Data/Technology.vue (added)
+++ client/views/pages/Data/Technology.vue
@@ -0,0 +1,311 @@
+<template>
+    <div class="w1400">
+        <div class="tech">
+            <section class="tech-logo">
+                <img src="../../../resources/jpg/tech-logo.png" alt="">
+
+                <h1>기술문서</h1>
+            </section>
+
+            <div class="tech-bos">
+
+                <section class="tech-box-sec">
+                    <div class="tech-box-sec-h3">
+
+                        <h3>기술문서</h3>
+
+                    </div>
+                    <div>
+                        <img src="../../../resources/jpg/data-img3.png" alt="">
+                    </div>
+                    <div>
+                        <p>기술문서1의 설명</p>
+                    </div>
+                    <div>
+                        <button>바로가기</button>
+                    </div>
+
+                </section>
+                <section class="tech-box-sec">
+                    <div class="tech-box-sec-h3">
+                        <h3>기술문서</h3>
+                    </div>
+                    <div>
+                        <img src="../../../resources/jpg/data-img3.png" alt="">
+                    </div>
+                    <div>
+                        <p>기술문서1의 설명</p>
+                    </div>
+                    <div>
+                        <button>바로가기</button>
+                    </div>
+
+                </section>
+                <section class="tech-box-sec">
+                    <div class="tech-box-sec-h3">
+                        <h3>기술문서</h3>
+                    </div>
+                    <div>
+                        <img src="../../../resources/jpg/data-img3.png" alt="">
+                    </div>
+                    <div>
+                        <p>기술문서1의 설명</p>
+                    </div>
+                    <div>
+                        <button>바로가기</button>
+                    </div>
+
+                </section>
+                <section class="tech-box-sec">
+                    <div class="tech-box-sec-h3">
+                        <h3>기술문서</h3>
+                    </div>
+                    <div>
+                        <img src="../../../resources/jpg/data-img3.png" alt="">
+                    </div>
+                    <div>
+                        <p>기술문서1의 설명</p>
+                    </div>
+                    <div>
+                        <button>바로가기</button>
+                    </div>
+
+                </section>
+                <section class="tech-box-sec">
+                    <div class="tech-box-sec-h3">
+                        <h3>기술문서</h3>
+                    </div>
+                    <div>
+                        <img src="../../../resources/jpg/data-img3.png" alt="">
+                    </div>
+                    <div>
+                        <p>기술문서1의 설명</p>
+                    </div>
+                    <div>
+                        <button>바로가기</button>
+                    </div>
+
+                </section>
+                <section class="tech-box-sec">
+                    <div class="tech-box-sec-h3">
+                        <h3>기술문서</h3>
+                    </div>
+                    <div>
+                        <img src="../../../resources/jpg/data-img3.png" alt="">
+                    </div>
+                    <div>
+                        <p>기술문서1의 설명</p>
+                    </div>
+                    <div>
+                        <button>바로가기</button>
+                    </div>
+
+                </section>
+                <section class="tech-box-sec">
+                    <div class="tech-box-sec-h3">
+                        <h3>기술문서</h3>
+                    </div>
+                    <div>
+                        <img src="../../../resources/jpg/data-img3.png" alt="">
+                    </div>
+                    <div>
+                        <p>기술문서1의 설명</p>
+                    </div>
+                    <div>
+                        <button>바로가기</button>
+                    </div>
+
+                </section>
+                <section class="tech-box-sec">
+                    <div class="tech-box-sec-h3">
+                        <h3>기술문서</h3>
+                    </div>
+                    <div>
+                        <img src="../../../resources/jpg/data-img3.png" alt="">
+                    </div>
+                    <div>
+                        <p>기술문서1의 설명</p>
+                    </div>
+                    <div>
+                        <button>바로가기</button>
+                    </div>
+
+                </section>
+                <section class="tech-box-sec">
+                    <div class="tech-box-sec-h3">
+                        <h3>기술문서</h3>
+                    </div>
+                    <div>
+                        <img src="../../../resources/jpg/data-img3.png" alt="">
+                    </div>
+                    <div>
+                        <p>기술문서1의 설명</p>
+                    </div>
+                    <div>
+                        <button>바로가기</button>
+                    </div>
+
+                </section>
+
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+        }
+    },
+    methods: {
+
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    mounted() {
+        console.log('Technology mounted');
+    }
+}
+</script>
+
+<style scoped>
+.tech-logo {
+    padding: 6rem 2rem 2rem 2rem;
+    width: 85%;
+}
+
+.tech-logo h1 {
+    font-size: 4rem;
+    font-family: SBaggroM;
+    font-weight: 500;
+    color: #0e0077;
+    /* position: relative; */
+
+}
+
+.tech-logo img {
+    width: 10rem;
+}
+
+
+
+.tech-bos {
+    width: 90%;
+    margin: 0 auto;
+    /* place-items: center; */
+
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 4rem;
+    padding: 6rem 3rem 6rem 3rem;
+    text-align: center;
+    /* border: 1px solid red; */
+}
+
+.tech-box-sec {
+    padding: 2rem;
+    /* border-radius: 2rem; */
+    background-color: #fafafa;
+    box-shadow: 2px 2px 5px rgba(191, 191, 191, 0.447);
+    /* border: 1px solid rgb(191, 191, 191); */
+}
+
+.tech-box-sec-h3 {
+    padding: 1rem;
+    font-size: 1.7rem;
+    font-family: "Pretendard-Regular";
+
+}
+
+.tech-box-sec div img {
+    /* border: 1px solid blue; */
+    box-shadow: 3px 3px 6px rgba(191, 191, 191, 0.447);
+    width: 85%;
+    height: 15rem;
+    margin: 0 auto;
+    background-size: cover;
+    border-radius: 1.5rem;
+}
+
+.tech-box-sec div p {
+    width: 85%;
+    padding: 2rem;
+    margin: 0 auto;
+    font-size: 1.5rem;
+    font-family: "Pretendard-Regular";
+
+}
+
+.tech-box-sec div button {
+    width: 85%;
+    border-radius: 2rem;
+    padding: 2rem;
+    font-size: 1.5rem;
+    color: white;
+    font-family: "Pretendard-Regular";
+
+    background-color: #3f87f7;
+}
+
+@media all and (max-width: 479px) {
+    .tech-logo {
+        width: 100%;
+        text-align: center;
+
+    }
+
+    .tech-logo img {
+        margin: 0 auto;
+
+    }
+
+    .tech-bos {
+        width: 90%;
+        grid-template-columns: 1fr;
+    }
+}
+
+@media all and (min-width: 480px) and (max-width: 767px) {
+    .tech-logo {
+        width: 100%;
+        text-align: center;
+
+    }
+
+    .tech-logo img {
+        margin: 0 auto;
+
+    }
+
+    .tech-bos {
+        width: 90%;
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@media all and (min-width: 767px) and (max-width: 1023px) {
+    .tech-logo {
+        width: 100%;
+        text-align: center;
+
+    }
+
+    .tech-logo img {
+        margin: 0 auto;
+
+    }
+
+    .tech-bos {
+        width: 90%;
+        grid-template-columns: 1fr 1fr;
+    }
+}
+</style>
+
+
fa84e1e
99980be
client/views/pages/introduction/Introduction.vue
--- client/views/pages/introduction/Introduction.vue
+++ client/views/pages/introduction/Introduction.vue
@@ -31,7 +31,7 @@
 
 
     },
 
     mounted() {
 
-        console.log('Login mounted');
 
+        console.log('Introduction mounted');
 
     }
 
 }
 
 </script>
fa84e1e
99980be
client/views/pages/join/Join.vue
--- client/views/pages/join/Join.vue
+++ client/views/pages/join/Join.vue
@@ -7,11 +7,11 @@
 
             <div class="join-b-button">
 
                 <input type="radio" id="one" v-model="selectedMembership" value="one">
 
                 <label for="one" class="radio-t t1"
 
-                    :style="{ backgroundColor: selectedMembership === 'one' ? 'gray' : '#e2ecfc' }">기관회원
 
+                    :style="{ backgroundColor: selectedMembership === 'one' ? '#86868644' : '#e2ecfc' }">기관회원
 
                     <img src="../../../resources/jpg/join-bt2.png" alt=""></label>
 
                 <input type="radio" id="two" v-model="selectedMembership" value="two">
 
                 <label for="two" class="radio-t t2"
 
-                    :style="{ backgroundColor: selectedMembership === 'two' ? 'gray' : '#e2ecfc' }">일반회원
 
+                    :style="{ backgroundColor: selectedMembership === 'two' ? '#86868644' : '#e6fff1' }">일반회원
 
                     <img src="../../../resources/jpg/join-bt.png" alt=""></label>
 
 
             </div>
@@ -281,10 +281,32 @@
 
             <section class="join-end-bt">
 
                 <button>이전</button>
 
 
-                <button>회원가입</button>
 
+                <button @click="showDiv">회원가입</button>
 
             </section>
 
         </div>
 
 
+    </div>
 
+
 
+
 
+
 
+    <!-- 회원가입 완료 모달 -->
 
+    <div class="joinmodal" v-if="isVisible">
 
+        <section class="join-modal-a">
 
+            <div>
 
+                <h1>회원가입 안내</h1>
 
+            </div>
 
+            <div>
 
+                <p>회원가입 신청이 완료되었습니다. <br>
 
+                    가입승인이 완료 시까지 특정 서비스는 이용하실 수 없으며 가입승인이 완료되면
 
+                    AI 디지털 교과서 통합지원센터 서비스를 이용하실 수 있습니다.
 
+                    또한 해당기업은 같은 기업명으로 중복 가입이
 
+                    불가합니다.
 
+                </p>
 
+            </div>
 
+            <div>
 
+                <button @click="hideDiv">확인</button>
 
+            </div>
 
+        </section>
 
     </div>
 
 </template>
@@ -294,11 +316,18 @@
 
 export default {
 
     data() {
 
         return {
 
-            selectedMembership: 'one'
 
+            selectedMembership: 'one',
 
+            isVisible: false
 
         }
 
     },
 
     methods: {
 
 
+        showDiv: function () {
 
+            this.isVisible = true;
 
+        },
 
+        hideDiv: function () {
 
+            this.isVisible = false;
 
+        }
 
     },
 
     watch: {
@@ -313,6 +342,57 @@
 
 </script>
 
 
 <style scoped>
 
+/* 모달 */
 
+.joinmodal {
 
+    width: 100%;
 
+    height: 100%;
 
+    background-color: #33333324;
 
+    margin: 0 auto;
 
+    text-align: center;
 
+    padding: 3rem;
 
+    position: fixed;
 
+    top: 0;
 
+    left: 0;
 
+}
 
+
 
+.join-modal-a {
 
+    position: fixed;
 
+    top: 50%;
 
+    left: 50%;
 
+    padding: 4rem;
 
+    border-radius: 2rem;
 
+    background-color: #f9f9f9;
 
+    transform: translate(-50%, -50%);
 
+    /* margin: 0 auto; */
 
+    box-shadow: 2px 2px 5px #86868644;
 
+
 
+    width: 25%;
 
+}
 
+
 
+.join-modal-a h1 {
 
+    font-size: 2rem;
 
+    padding: 3rem 0 0 0;
 
+}
 
+
 
+.join-modal-a p {
 
+    width: 85%;
 
+    margin: 0 auto;
 
+    font-size: 1.5rem;
 
+    padding: 3rem;
 
+    text-align: left;
 
+}
 
+
 
+.join-modal-a button {
 
+    width: 20%;
 
+    background-color: #3f87f7;
 
+    border-radius: 1.5rem;
 
+    color: white;
 
+    font-family: "Pretendard-Regular";
 
+
 
+
 
+}
 
+
 
+/* ----------------------------------- */
 
 .join-b {
 
     width: 100%;
Add a comment
List