yjryu / KERIS star
kimgkdud898 2023-11-09
231109김하영 기술문서 상세
@9151f1f8275d5adae07aee8ea0f81653f31afcc2
27a7d89
9151f1f
client/resources/css/Main.css
--- client/resources/css/Main.css
+++ client/resources/css/Main.css
@@ -97,11 +97,11 @@
 
   grid-template-columns: 1fr 1fr 1fr;
 
 }
 
 
-.main-puzzle-container>div:nth-child(4) {
 
+.main-puzzle-container > div:nth-child(4) {
 
   position: relative;
 
 }
 
 
-.main-puzzle-container>div:nth-child(4)::after {
 
+.main-puzzle-container > div:nth-child(4)::after {
 
   position: absolute;
 
   content: "";
 
   width: 90px;
@@ -507,7 +507,7 @@
 
   background-color: #e2e2e2;
 
 }
 
 
-.matching-box-grid>h3 {
 
+.matching-box-grid > h3 {
 
   font-size: 2.6rem;
 
   padding: 3rem;
 
   font-family: SBaggroM;
@@ -1042,7 +1042,6 @@
 
   color: #0e5e2e;
 
 }
 
 
-
 
 .data-b-3 h2 {
 
   text-align: right;
 
   padding: 3rem;
@@ -1164,7 +1163,6 @@
 
   display: grid;
 
   gap: 5rem;
 
   grid-template-columns: 1fr 1fr 1fr;
 
-
 
 }
 
 
 .news-bos-box {
@@ -1319,7 +1317,6 @@
 
 
 .tech-box-sec-h3 {
 
   margin-bottom: 1.5rem;
 
-
 
 }
 
 
 .tech-box-sec-h3 h3 {
@@ -1366,40 +1363,98 @@
 
   background-color: #3f87f7;
 
 }
 
 
-.tech-detail{
 
+.tech-detail {
 
   width: 100%;
 
-}
 
-.tech-sec1{
 
-  padding: 2rem;
 
-  border-top: 1px solid gray;
 
-  border-bottom: 1px solid gray;
 
-  display: grid;
 
-  grid-template-columns: 80% 1fr;
 
 }
 
 
-.tech-sec1 button{
 
-  font-size: 2.5rem;
 
-  padding: 1rem;
 
+.tech-report {
 
+  display: flex;
 
+  justify-content: space-between;
 
 }
 
-.tech-sec1 h2{
 
-  font-size: 2.5rem;
 
-  padding: 1rem;
 
+.tech-view .tech-info > * {
 
+  display: inline-block;
 
+  vertical-align: middle;
 
 }
 
-.tech-sec-div{
 
+
 
+.tech-view {
 
+  padding: 21px 0 0;
 
+  border-bottom: 1px solid #132331;
 
+}
 
+.tech-report {
 
+  border-top: 1px solid #132331;
 
+  padding: 21px 10px;
 
+  background-color: #f9f9f9;
 
+}
 
+.tech-report h2 {
 
+  font-size: 2.5rem;
 
+  color: #007aff;
 
+}
 
+.tech-report button {
 
+  padding: 1rem 2rem;
 
+  color: white;
 
+  background-color: #007aff;
 
+  border-radius: 0.5rem;
 
+  font-weight: 700;
 
+}
 
+.tech-info {
 
+  padding: 31px 0 31px;
 
+  border-top: 1px solid #132331;
 
+}
 
+.tech-info-img {
 
+  width: 300px;
 
+  height: 400px;
 
+
 
+  overflow: hidden;
 
+}
 
+.tech-info-img img {
 
+  padding: 22px 28px;
 
+  background: #f2f4f6;
 
   width: 100%;
 
-  border: 1px solid red;
 
-  display: grid;
 
-  padding: 3rem;
 
-  grid-template-columns: 1fr 1fr;
 
+  height: auto;
 
+  text-align: center;
 
+  box-sizing: border-box;
 
 }
 
-.tech-sec-div div{
 
-  border: 1px solid red;
 
+.tech-txt-wrap {
 
+  width: calc(100%-100px);
 
+  margin-left: 65px;
 
 }
 
-.tech-sec-div div:nth-child(1){
 
-  padding: 2rem;
 
+.tech-txt-wrap li > * {
 
+  display: inline-block;
 
+  font-weight: 400;
 
+  font-size: 2rem;
 
+  padding: 15px 0 15px;
 
 }
 
-.tech-sec2 div img{ 
-  width: 50%;
 
+.tech-txt-wrap li {
 
+  border-bottom: 1px solid #e5e5e5;
 
+}
 
+.tech-txt-wrap li strong {
 
+  min-width: 152px;
 
+  padding-left: 1.8rem;
 
+  margin-right: 4.2rem;
 
+  position: relative;
 
+  font-weight: 700;
 
+}
 
+.tech-txt-wrap li strong::after {
 
+  position: absolute;
 
+  right: 0;
 
+  top: 50%;
 
+  transform: translateY(-50%);
 
+  width: 3px;
 
+  height: 10px;
 
+  background: #a6a6a6;
 
+  content: "";
 
+}
 
+.tech-btn {
 
+  width: 100%;
 
+  padding: 21px 10px;
 
+}
 
+.tech-btn button {
 
+  float: right;
 
+  padding: 1rem 2rem;
 
+  color: white;
 
+  background-color: #007aff;
 
+  border-radius: 0.5rem;
 
+  font-weight: 700;
 
 }
 
 /* --------------------------------------------------------------------------- */
 
 /* lnfo css */
@@ -1646,7 +1701,7 @@
 
 }
 
 
 /* wg커뮤니티 전문가 협의체 페이지*/
 
-.wg-wrap-h2{
 
+.wg-wrap-h2 {
 
   font-weight: 200px;
 
   padding: 10px 0;
 
 }
@@ -1885,4 +1940,4 @@
 
 
 .matching-section-box {
 
   padding: 6rem 0;
 
-}
(No newline at end of file) 
+}
27a7d89
9151f1f
client/views/pages/user/Data/TechnologyOne.vue
--- client/views/pages/user/Data/TechnologyOne.vue
+++ client/views/pages/user/Data/TechnologyOne.vue
@@ -1,37 +1,47 @@
 
 <template>
 
-    <div class="w1400">
 
-        <div class="tech-detail-page">
 
-            <div class="page-logo flex-start">
 
-                <img src="../../../../resources/jpg/tech-logo.png" alt="">
 
-                <h1>기술문서</h1>
 
+    <div class="page">
 
+
 
+        <div class="w1400">
 
+            <div class="tech-view">
 
+                <div class="page-logo flex-start">
 
+                    <img src="../../../../resources/jpg/tech-logo.png" alt="">
 
+                    <h1>기술문서</h1>
 
+                </div>
 
+                <div class="tech-report">
 
+                    <h2>2022년 온라인 콘텐츠 활용 교과서 선도학교 교권 역량 효과성 분석</h2>
 
+                    <button>기술문서 다운받기</button>
 
+
 
+                </div>
 
+                <div class="tech-info">
 
+                    <span class="tech-info-img">
 
+                        <img src="../../../../resources/jpg/tech-img.png" alt="기술문서 이미지">
 
+                    </span>
 
+                    <div class="tech-txt-wrap">
 
+                        <ul>
 
+                            <li style="border-top: 1px solid #e5e5e5 ;">
 
+                                <strong>연구책임자</strong>
 
+                                <p>정종원</p>
 
+                            </li>
 
+                            <li>
 
+                                <strong>연구진</strong>
 
+                                <p> 안성훈, 최준석, 이정태, 나화정, 민예슬</p>
 
+                            </li>
 
+                            <li>
 
+                                <strong>키워드</strong>
 
+                                <p>온라인콘텐츠;선도학교;교원역량</p>
 
+                            </li>
 
+                            <li>
 
+                                <strong>담당부서</strong>
 
+                                <p>디지털교과서부</p>
 
+                            </li>
 
+
 
+                        </ul>
 
+                    </div>
 
+
 
+                </div>
 
             </div>
 
-            <div class="tech-detail">
 
-                <div class="tech-sec1">
 
-                    <h2>2022년 온라인 콘텐츠 활용 교과서 선도학교 교원 역량 효과성 분석</h2>
 
-                    <div>
 
-                       <button>기술문서 다운로드</button>
 
-                        <i class="fa-solid fa-download" style="color: #ffffff;"></i>
 
-                    </div>
 
-                </div>
 
-                <!-- /상세내용 -->
 
-                <div class="tech-sec2">
 
-                    <div class="tech-sec-div">
 
-                        <div>
 
-                            <img src="../../../../resources/jpg/tech-img.png" alt="">
 
-                        </div>
 
-                        <div>
 
-                            <p><span>연구책임자</span> 정종원</p>
 
-                            <p><span>연구진</span> 안성훈, 최준석, 이정태, 나화정, 민예슬</p>
 
-                            <p><span>담당부서</span> 디지털교과서부</p>
 
-                        </div>
 
-                    </div>
 
-                    <div class="tech-sec2-end">
 
-                        <p><span>조회수</span>45454</p>
 
-                    </div>
 
-                </div>
 
-                <div class="tech-sec2-bt">
 
-                    <button @click="goToPage4">목록</button>
 
-                </div>
 
+            <div class="tech-btn">
 
+                <button @click="goToPage4">목록</button>
 
             </div>
 
         </div>
 
     </div>
@@ -59,10 +69,3 @@
 
     }
 
 }
 
 </script>
 
-<style scoped>
 
-@media all and (min-width: 1023px) and (max-width: 1268px) {
 
-    .tech-sec1 {
 
-        grid-template-columns: 80% 20%;
 
-    }
 
-}
 
-</style>
Add a comment
List