swkim / crosswalk_back star
Forked from ysseo / crosswalk
최정임 최정임 2023-07-24
230724 최정임 css 수정중
@68ce638be153c3d203205cc0a477a28a26016c66
7f238de
68ce638
client/resources/css/common.css
--- client/resources/css/common.css
+++ client/resources/css/common.css
@@ -20,6 +20,7 @@
 
   font-style: normal;
 
 }
 
 .grid{display: grid;}
 
+.grid2{display: grid; grid-template-columns: 1fr 1fr;}
 
 .flex {
 
   display: flex;
 
   align-items: center;
@@ -141,6 +142,9 @@
 
 .bg-green {
 
   background: #6dba67;
 
 }
 
+.green{color: #a7d292;}
 
+.black{color: #333;}
 
+.lined{text-decoration: underline;}
 
 .bg-yellow {
 
   background: #e6c772;
 
 }
@@ -152,7 +156,9 @@
 
 }
 
 
 .m-b{margin-bottom: 1rem;}
 
+.m-b3{margin-bottom: 3rem;}
 
 .m-r{margin-right: 1rem;}
 
+.m-r3{margin-right: 3rem;}
 
 .gap{gap: 1rem;}
 
 .gap5{gap: 5rem;}
 
 button{padding: 0.3rem 2rem;}
 
68ce638
client/resources/images/dg_logo.png (Binary) (added)
+++ client/resources/images/dg_logo.png
Binary file is not shown
 
68ce638
client/resources/images/icon/icon1.png (Binary) (added)
+++ client/resources/images/icon/icon1.png
Binary file is not shown
 
68ce638
client/resources/images/icon/icon2.png (Binary) (added)
+++ client/resources/images/icon/icon2.png
Binary file is not shown
 
68ce638
client/resources/images/icon/icon3.png (Binary) (added)
+++ client/resources/images/icon/icon3.png
Binary file is not shown
 
68ce638
client/resources/images/icon/icon4.png (Binary) (added)
+++ client/resources/images/icon/icon4.png
Binary file is not shown
 
68ce638
client/resources/images/icon/icon5.png (Binary) (added)
+++ client/resources/images/icon/icon5.png
Binary file is not shown
 
68ce638
client/resources/images/icon/icon6.png (Binary) (added)
+++ client/resources/images/icon/icon6.png
Binary file is not shown
7f238de
68ce638
client/views/layout/Header.vue
--- client/views/layout/Header.vue
+++ client/views/layout/Header.vue
@@ -51,7 +51,7 @@
 
       </router-link>
 
     </div>
 
     <div class="header_menu">
 
-      <nav class="flex">
 
+      <nav class="flex gap">
 
         <router-link to="/Introduction.page">
 
           <span
 
             @mouseover="showDropdown = true"
@@ -65,7 +65,7 @@
 
           @mouseover="showDropdown = true"
 
           @mouseleave="showDropdown = false"
 
         >
 
-          <div class="menu flex-end">
 
+          <div class="menu flex-end gap">
 
             <ul>
 
               <li
 
                 v-for="option in dropdownOptions"
@@ -441,7 +441,7 @@
 
 header {
 
   position: relative;
 
 }
 
-
 
+nav{position: relative;}
 
 nav a {
 
   width: 16rem;
 
   text-align: center;
@@ -450,27 +450,26 @@
 
   padding: 2.7rem 0;
 
   /* border: 1px solid blue; */
 
 }
 
+.nav{position: absolute;
 
+    left: 0;
 
+    top: 65px;
 
+    z-index: 500;
 
+    width: -webkit-fill-available;
 
+    padding: -1rem;
 
+    height: 14rem;}
 
 .menu {
 
   position: absolute;
 
-  background: #ffffffd1;
 
-  left: 0;
 
-  top: 0rem;
 
-  z-index: 500;
 
-  width: 100%;
 
-  /* border: 1px solid red */
 
-  padding: 1rem 34rem 1rem 1rem;
 
-  text-align: center;
 
+    left: 0;
 
+    top: 0rem;
 
+    z-index: 500;
 
+    width: fit-content;
 
+    /* border: 1px solid red; */
 
+    /* padding: 1rem 25.5rem 1rem 1rem; */
 
+    text-align: center;
 
 }
 
 .menu li:hover{background: #13833b; }
 
 .menu li:hover a{color: #fff;}
 
-.nav {
 
-  position: absolute;
 
-  left: -148rem;
 
-  top: 7rem;
 
-  z-index: 500;
 
-  width: -webkit-fill-available;
 
-  padding: 1rem;
 
-}
 
+
 
 ul {
 
   width: 16rem;
 
 }
7f238de
68ce638
client/views/pages/Introduction/Introduction.vue
--- client/views/pages/Introduction/Introduction.vue
+++ client/views/pages/Introduction/Introduction.vue
@@ -1,38 +1,105 @@
 
 <template>
 
-  <div><h2>플랫폼 소개</h2>
 
- <h3 style="margin-top: 3rem;">1. AI 안정통합 횡단보도 플랫폼이란?</h3> 
- <p>AI 영상감지, 실시간 신호개방 등 최첨단 기술을 적용하여 횡단보도를 이용하는 보행자 보호를 위한 보행신호 자동연장, 
-무단횡단 방지, 우회전 차량사고등을 예방하고 주행중인 차량 내비게이션에 실시간으로 횡단보도 내 위험 정보를 제공하여 
-교통안전 예방정책을 추진하고, 횡단보도 사고를 줄이는데 목표를 둔 플랫폼
 
-</p>
 
- <h3 style="margin-top: 3rem;">2. 주요 서비스</h3> 
- <p>① 보행약자를 위한 보행신호 자동연장 서비스
 
-</p>
 
-<p>- AI 영상인식으로 사람, 목발, 우산, 휠체어, 유모차 등 보행자를 판별하고 보행자의 상태 정 보를 식별하여 
-     신호제어기에 신호연장 신호를 전달</p>
 
- <p>② 무단횡단 방지 및 무단횡단 사고 예방 서비스</p>
 
- <p>- 차량 및 보행신호, 횡단보도 대기공간의 보행대기자를 판별하여 보행신호 시 우회전 차량의 진입 상황을 현장 음향신호 장비로 
-    안내</p>
 
- <p>③ 우회전 차량 교통사고 예방 서비스</p>
 
- <p>- 신호대기 상태에서 보행 대기자 판별 및 횡단보도 진입 여부를 인식하고 보행자 무단횡단 발생 시 음향 신호방비로 정보를 전달</p>
 
- <p>④ 차량 운전자 안내를 위한 실시간 내비게이션 안내 서비스</p>
 
- <p>- 횡단보도 대기 공간의 보행대기자를 판별하고 횡단보도 내 무단횡단 및 우회전 준법 주행이 가능한지에 대한 정보를 
-      내비게이션을 통해 안내 할 수 있도록 정보 제공</p>
 
- <p>⑤ 실시간 관제 시스템</p>
 
- <p>- 현장 실시간 CCTV 영상을 제공하고, 발생하는 위험/사고현황을 한눈에 쉽게 볼 수 있는 서비스를 제공</p>
 
- <p>⑥ GIS기반 분석 시스템</p>
 
- <p>- 실시간으로 발생하는 위험/사고 정보를 수집하고 수집된 데이터를 활용하여 상황발생 테마별로 데이터를 분석, 시각화 하여 
-   현황파악 및 해결책 도출에 도움을 주는 서비스를 제공</p>
 
+  <div class="wrap">
 
+    <div>
 
+      <h2 style="color: #10833b;">플랫폼 소개</h2>
 
+      <h3 style="margin-top: 3rem; color: #72be65;" >1. AI 안정통합 횡단보도 플랫폼이란?</h3>
 
+      <p>
 
+        AI 영상감지, 실시간 신호개방 등 최첨단 기술을 적용하여 횡단보도를 이용하는
 
+        보행자 보호를 위한 보행신호 자동연장, 무단횡단 방지, 우회전 차량사고등을
 
+        예방하고 주행중인 차량 내비게이션에 실시간으로 횡단보도 내 위험 정보를
 
+        제공하여 교통안전 예방정책을 추진하고, 횡단보도 사고를 줄이는데 목표를 둔
 
+        플랫폼
 
+      </p>
 
+      <h3 style="margin-top: 3rem; color: #72be65;" class="m-b3">2. 주요 서비스</h3>
 
+    </div>
 
+    <div class="grid2 gap ">
 
+      <div class="flex gap m-b3">
 
+        <img src="../../../resources/images/icon/icon1.png" alt="" class="m-r3">
 
+        <div class="box">
 
+          <p class="m-b green">보행약자를 위한 보행신호 자동연장 서비스</p>
 
+          <p>
 
+            AI 영상인식으로 사람, 목발, 우산, 휠체어, 유모차 등 보행자를
 
+            판별하고 보행자의 상태 정 보를 식별하여 신호제어기에 신호연장 신호를
 
+            전달
 
+          </p>
 
+        </div>
 
+      </div>
 
+      <div class="flex gap m-b3">
 
+        <img src="../../../resources/images/icon/icon2.png" alt="" class="m-r3">
 
+        <div class="box">
 
+          <p class="m-b green">무단횡단 방지 및 무단횡단 사고 예방 서비스</p>
 
+          <p>
 
+            차량 및 보행신호, 횡단보도 대기공간의 보행대기자를 판별하여 보행신호
 
+            시 우회전 차량의 진입 상황을 현장 음향신호 장비로 안내
 
+          </p>
 
+        </div>
 
+      </div>
 
+      <div class="flex gap m-b3">
 
+        <img src="../../../resources/images/icon/icon3.png" alt="" class="m-r3">
 
+        <div class="box">
 
+          <p class="m-b green">우회전 차량 교통사고 예방 서비스</p>
 
+          <p>
 
+            신호대기 상태에서 보행 대기자 판별 및 횡단보도 진입 여부를 인식하고
 
+            보행자 무단횡단 발생 시 음향 신호방비로 정보를 전달
 
+          </p>
 
+        </div>
 
+      </div>
 
+      <div class="flex gap m-b3">
 
+        <img src="../../../resources/images/icon/icon4.png" alt="" class="m-r3">
 
+       <div class="box">
 
+          <p class="m-b green">차량 운전자 안내를 위한 실시간 내비게이션 안내 서비스</p>
 
+          <p>
 
+            횡단보도 대기 공간의 보행대기자를 판별하고 횡단보도 내 무단횡단 및
 
+            우회전 준법 주행이 가능한지에 대한 정보를 내비게이션을 통해 안내 할 수
 
+            있도록 정보 제공
 
+          </p>
 
+       </div>
 
+      </div>
 
+      <div class="flex gap ">
 
+        <img src="../../../resources/images/icon/icon5.png" alt="" class="m-r3">
 
+        <div class="box">
 
+          <p class="m-b green">실시간 관제 시스템</p>
 
+          <p>
 
+            현장 실시간 CCTV 영상을 제공하고, 발생하는 위험/사고현황을 한눈에
 
+            쉽게 볼 수 있는 서비스를 제공
 
+          </p>
 
+        </div>
 
+      </div>
 
+      <div class="flex gap">
 
+        <img src="../../../resources/images/icon/icon6.png" alt="" class="m-r3">
 
+        <div class="box">
 
+          <p class="m-b green">GIS기반 분석 시스템</p>
 
+          <p>
 
+            실시간으로 발생하는 위험/사고 정보를 수집하고 수집된 데이터를
 
+            활용하여 상황발생 테마별로 데이터를 분석, 시각화 하여 현황파악 및
 
+            해결책 도출에 도움을 주는 서비스를 제공
 
+          </p>
 
+        </div>
 
+      </div>
 
+    </div>
 
   </div>
 
 </template>
 
 <style scoped>
 
 @media all and (max-width: 479px) {
 
-  div{padding: 3rem 1rem !important;}
 
+  /* div {
 
+    padding: 3rem 1rem !important;
 
+  } */
 
 }
 
-  div{padding: 3rem 15rem; line-height: 4rem;}
 
-  h2{font-size: 2rem;}
 
-  h3{font-size: 1.8rem;}
 
-  p{font-size: 1.6rem;}
 
+.box{    width: 80%;
 
+    line-height: 2.5rem;}
 
+.wrap {
 
+  padding: 5rem 15rem;
 
+  line-height: 4rem;
 
+}
 
+h2 {
 
+  font-size: 2rem;
 
+}
 
+h3 {
 
+  font-size: 1.8rem;
 
+}
 
+p {
 
+  font-size: 1.6rem;
 
+}
 
 </style>
 
 
 <script>
7f238de
68ce638
client/views/pages/main/Login.vue
--- client/views/pages/main/Login.vue
+++ client/views/pages/main/Login.vue
@@ -1,25 +1,23 @@
 
 <template>
 
   <div class="wrap">
 
     <div>
 
-      <div>
 
-        <h2 class="page-title">Login</h2>
 
+      <div class="flex-center m-b3">
 
+        <img src="../../../resources/images/dg_logo.png" alt="">
 
       </div>
 
-      <hr class="margin">
 
       <div class="form-wrap">
 
         <form action="">
 
           <div class="flex-center m-b">
 
-            <label for="id">아이디</label>
 
-            <input type="text" name="" id="" ref="user_id" placeholder="ID" v-model="userLogin.user_id" @keyup.enter="login">
 
+            <!-- <label for="id">아이디</label> -->
 
+            <input type="text" name="" id="" ref="user_id" placeholder="아이디를 입력하세요" v-model="userLogin.user_id" @keyup.enter="login">
 
           </div>
 
           <div class="flex-center m-b">
 
-            <label for="password">비밀번호</label>
 
-            <input type="password" name="" id="" ref="user_pw" placeholder="Password" v-model="userLogin.user_pw" @keyup.enter="login">
 
-          </div>   
-    
+            <!-- <label for="password">비밀번호</label> -->
 
+            <input type="password" name="" id="" ref="user_pw" placeholder="비밀번호를 입력하세요" v-model="userLogin.user_pw" @keyup.enter="login">
 
+          </div>      
 
+          <router-link to="/IdFind.page"> <span class="black flex-center"><em class="lined">아이디</em>를 잊어버리셨나요?</span></router-link>
 
           <div class="btn-wrap">
 
             <button type="button" class="green-btn btn-l loginbtn"  @click="login">로그인</button>
 
-            <router-link to="/IdFind.page"> <span class="">아이디 찾기</span></router-link>
 
           </div>
 
         </form>
 
       </div>
@@ -112,8 +110,8 @@
 
 .btn-wrap span{font-size: 13px; margin-top: 2rem; color: #333;}
 
 .loginbtn{padding: 1rem 0; margin-bottom: 1rem;}
 
 .wrap {
 
-  width: 155rem;
 
-  margin: 100px auto;
 
+  padding: 19rem ;
 
+  background: #f7f7f6;
 
 }
 
 
 .tab-wrap {
@@ -180,7 +178,7 @@
 
 }
 
 
 .form-wrap input:not([type="radio"]) {
 
-  min-width: 30rem;
 
+  width: -webkit-fill-available;
 
   min-height: 4rem;
 
 }
Add a comment
List