Commit @a3fa4ba726bf472935c11a3684b47e16a4620ff9

최정임 2023-03-09

230309 최정임 반응형 css 수정

@a3fa4ba726bf472935c11a3684b47e16a4620ff9

b579bf0

a3fa4ba

client/resources/css/common.css

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

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


   grid-template-rows: 0.1fr 0.5fr 0.3fr 0.3fr 0.3fr;
   gap: 1rem;
 }
+.sub-grid-government{
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 0.1fr;
+  grid-column: 1/5;
+  gap: 1rem;
+}
 .main-grid {
   height: 100%;
   display: grid;

 }
 
 .main-grid-guardian {
-  height: 100%;
   display: grid;
   grid-template-columns: 0.9fr 0.9fr;
-  grid-template-rows: 0.1fr 0.5fr 0.5fr;
+  grid-template-rows: 0.1fr 0.1fr 1fr;
   gap: 2rem;
 }
 

b579bf0

a3fa4ba

client/resources/css/layout.css

--- client/resources/css/layout.css

+++ client/resources/css/layout.css


 .page-title-span {
   font-size: 2.5rem;
   font-weight: bold;
+
 }
 
 nav{

   padding: 3rem;
   background-color: #f4f4f2;
   grid-area: main;
- 
+ height: inherit;
 }
 
 

b579bf0

a3fa4ba

client/resources/css/main.css

--- client/resources/css/main.css

+++ client/resources/css/main.css


 .menuicon {
   display: none;
   cursor: pointer;
-  left: 1.5rem;
-  top: 2.6rem;
+  right: 1.5rem;
+  top: 2.9rem;
   position: absolute;
 }
-
+header .logo{display: none;}
 /* 시행기관 장비관리 리스트 */
 .visitlist {
   height: 55vh;

   flex: 0 0 2.85% !important;
   padding: 1rem 0;
 }
-
+.react-calendar__month-view__days__day--neighboringMonth{color: #f0f0f0;;}
 /* .agency-calendar .react-calendar__month-view__days{overflow: hidden;} */
 
 /* Q&A */

 .guardian-medicine {
   height: 17vh;
 }
-
+.main-grid-guardian > div:nth-child(3) ul{height: 6rem;}
 .statistics-guardian li {
   padding: 1rem 3rem;
   background: #ffffff;
   border-radius: 20px;
   margin: 0 auto;
-  margin-bottom: 1rem;
   position: relative;
 }
 .medicine-title{

b579bf0

a3fa4ba

client/resources/css/responsive.css

--- client/resources/css/responsive.css

+++ client/resources/css/responsive.css


 
 /* 테블릿 가로 (해상도 768px ~ 1023px)*/
 @media all and (min-width:768px) and (max-width:1023px) {
-
-}
-
-/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
-@media all and (min-width:480px) and (max-width:767px) {
-}
-
-/* 모바일 세로 (해상도 ~ 479px)*/
-@media all and (max-width:479px) {
   .menuicon {
     display: block;
     position: fixed;
   }
-
-  .usericon {
+  .weather-info{
+    display: none;
+  }
+  .info-wrap {
     display: none;
   }
   .ittLqr{font-size: 1.3rem !important;}

   header {
     padding: 1rem;
     position: fixed;
+    box-shadow:1px 1px 10px 1px rgb(0 0 0 / 9%);
   }
+  header .logo{display: block;}
   nav {
     position: fixed;
     left: -320px;
     top: 87px;
     z-index: 12;
     transition: 0.5s;
-    box-shadow:12px -6px 10px -10px rgb(0 0 0 / 20%);
+    box-shadow:none;
     height:91vh;
   }
   nav.on {

     transition: 0.5s;
   }
   .bottom-section{padding: 0.9rem ; bottom: 6rem;}
-  .content-wrap{padding: 1rem 1rem 0 1rem; }
+  .content-wrap{padding: 1rem; }  
   th,td,tr{display: block;}
-  .header-info-id,#fullDate, #temp,.cCoJhO{display: none;}
+  .logo img{width: 27rem;}
+  nav .logo{display: none;}
+  /* 올잇메디 메인 */
+  .main-grid-agency .statistics-agency img{width: 7rem; margin: 0 0 1rem 0;}
+  .main-grid-agency .statistics-agency li{display: block; text-align: center;}
   /* 에이젼시 메인 */
-  .main-grid-agency{display: block;}
+  .main-grid-agency{grid-template-columns: 1fr 1fr; gap: 1rem;}
   .main-grid-agency .agency-visitlist{margin-top: 22rem;}
   .agency-calendar .react-calendar__month-view__weekdays{display: flex !important;}
   .agency-calendar .react-calendar__month-view__days__day{flex: 0 0 12.5% !important;}
   .agency-calendar .react-calendar__month-view__days{flex-wrap: wrap !important;}
   .tab-menu-agency li{padding: 1rem;}
-  .statistics-agency{margin-bottom: 1rem;}
   /* 지자체 메인 */
   .main-grid-government{display: block;}
-  .main-grid-government .content-box:nth-child(8), .main-grid-government .content-box:nth-child(6){height: 30rem;}
-  #RowChart>div{height: 36rem;}  
-  .main-grid-government .content-box{margin-bottom: 1rem;}
-  .statistics-govern{margin-bottom: 1rem;}
+  .main-grid-government .content-box{margin-bottom: 0rem;}
+  .statistics-govern{margin-bottom: 0; display: block;}
+  .sub-grid-government{ grid-template-columns: 1fr 1fr ;}
+  .main-grid-government div:nth-child(3){height: 42rem;}
+  .main-grid-government div:nth-child(5){height: 42rem;}
   /* 보호자 메인 */
   .main-guardian img{width: 3rem;}
   .main-grid-guardian{display: block; padding: 0 1rem;}

   }
 
   /* 사용자관리 */
+  .senior-search{width: 39% !important;}
+  .searchselect label{margin-right: 2rem;}
+  .protector-user{margin-top: 2rem;}
+  .userauthoriylist{display: block;}
+  .userauthoriylist .left, .userauthoriylist .right {
+    width: 100% ;
+}
+.userauthoriylist .right{margin-top: 2rem;}
+.tab-menu {display: block;}
+.tab-menu li{display: -webkit-inline-flex;}
+.userlist{padding: 1rem !important;}
+  .search-management {
+    justify-content: space-between;
+    gap: 1rem;
+  }
+  .search-management button{width: 20%;}
+  .search-management select {
+    width: 35%;
+    margin: 0;
+  }
+
+  .search-management input {
+    width: 100%;margin: 0;
+  }
+
+ .searchselect-wrap{display: block;}
+ .searchselect{width: max-content;}
+ .page-title-span{display: block;
+  width: 14rem;
+    position: absolute;
+    right: 0; top: 3.2rem; color: #827e7e; font-size: 2rem;}
+
+  /* button */
+
+  .btn-large {
+    font-size: 1.4rem;
+  }
+
+  /* 로그인 */
+  .login-wrap h1 {
+    font-size: 1.8rem;
+    line-height: 1rem;
+  }
+
+  .login-wrap h3 {
+    margin: 20% 0 5% 0;
+    font-size: 2rem;
+    text-align: center;
+  }
+
+  .login-form .login-inner .content {
+    width: 80%;
+    margin: 1rem auto;
+  }
+
+  .container {
+    width: 100%;
+    margin: 0;
+    padding: 2rem;
+  }
+
+  .container .btn-wrap {
+    margin-top: 5rem;
+  }
+
+  .container button {
+    width: 30%;
+  }
+
+
+  /* 검색창 */
+  .detail-search tbody select{margin-right: 1rem;}
+  .area-wrap {
+    display: none;
+  }
+
+  .search-area {
+    padding: 1rem;
+  }
+
+  .detail-search table tr,
+  .detail-search table th,
+  .detail-search table td {
+    display: block;
+  }
+
+  .detail-search table th {
+    width: 100%;
+    margin: 1rem 0;
+  }
+
+  .detail-search table td::before {
+    display: none;
+  }
+
+  .detail-search table tr {
+    border: 0;
+  }
+
+  .detail-search table td {
+    padding: 0;
+    border: 0;
+  }
+
+  .detail-search tbody tr:nth-of-type(3) td {
+    width: 50%;
+    display: flex;
+  }
+
+  .detail-search tbody tr:nth-of-type(3) th:nth-child(3) {
+    width: 100%;
+  }
+
+  /* 시니어 정보 상세 조회 */
+  .senior-detail th,
+  .senior-detail td {
+    display: block;
+  }
+
+  .senior-detail th {
+    font-size: 1.2rem;
+    width: 100%;
+  }
+
+  .senior-detail td {
+    width: 100%;
+    font-size: 1.2rem;
+  }
+
+  .senior-detail td span {
+    width: 100%;
+    font-size: 1.2rem;
+    text-align: center;
+  }
+
+  /* 시니어 등록창 */
+  .senior-insert {
+    display: grid;
+  }
+
+  .senior-insert th {
+    font-size: 1.4rem;
+    width: 50%;
+    padding: 1rem 10rem;
+  }
+
+  .senior-insert td {
+    display: list-item;
+    padding-top: 1rem;
+  }
+
+  .senior-insert select {
+    width: 100%;
+  }
+
+  .senior-insert input {
+    width: 100%;
+  }
+
+  .senior-insert tr:nth-child(2) .gender {
+    padding: 1rem 1rem;
+    display: flex;
+    flex: 0 0 25%;
+  }
+
+  .senior-insert tr:nth-child(2) .gender input {
+    width: 25%;
+  }
+
+  .senior-insert td::marker {
+    content: "";
+  }
+
+  /* 복약조회*/
+
+  /* 복약 상세페이지 */
+  .medicine-detail-graph {
+    display: block;
+  }
+
+  /* 복약 수정 페이지 */
+  .modal-main table th,
+  .modal-main table td {
+    display: block;
+  }
+
+  .modal-main table th {
+    width: 100%;
+  }
+
+  .modal-main table td {
+    padding: 0.5rem 0 0 12rem;
+  }
+
+  .medicine-revise tr {
+    border: 0;
+  }
+
+  .medicine-revise tr:nth-child(3)>td div,
+  .medicine-revise tr:nth-child(4)>td div,
+  .medicine-revise tr:nth-child(5)>td div {
+    width: 50%;
+  }
+
+  .medicine-revise tr:nth-child(3)>td div input,
+  .medicine-revise tr:nth-child(4)>td div input,
+  .medicine-revise tr:nth-child(5)>td div input {
+    width: 20%;
+  }
+
+  .medicine-revise tr:nth-child(3)>td div label,
+  .medicine-revise tr:nth-child(4)>td div label,
+  .medicine-revise tr:nth-child(5)>td div label {
+    width: 50%;
+  }
+
+
+  /* 댁내 온도 조회 */
+
+
+  /* 최근 일주일 댁내 온도(모달창) */
+  .temperature-modal td:nth-of-type(1) {
+    font-weight: 900;
+    padding: 1rem;
+  }
+
+  .temperature-modal td:nth-of-type(2):before {
+    content: "날짜";
+  }
+
+  .temperature-modal td:nth-of-type(3):before {
+    content: "02:00";
+  }
+
+  .temperature-modal td:nth-of-type(4):before {
+    content: "10:00";
+  }
+
+  .temperature-modal td:nth-of-type(5):before {
+    content: "14:00";
+  }
+
+  .temperature-modal td:nth-of-type(6):before {
+    content: "23:00";
+  }
+
+  /* 방문 조회 */
+
+  /* 방문 관리 상세 페이지 */
+  .senior-detail tr:nth-of-type(6) td {
+    display: flex;
+    justify-content: center;
+  }
+
+  .senior-detail td {
+    padding: 0;
+  }
+
+  /* 방문 수정 페이지 */
+  .visit-revise th {
+    width: 40%;
+    font-size: 1.4rem;
+  }
+
+  .visit-revise tr:nth-child(3) td {
+    display: block;
+  }
+
+  .visit-revise tr:nth-child(3) td>div {
+    display: flex;
+    margin: 0.5rem 0;
+  }
+
+  /* 방문 등록 */
+  .user-list {
+    display: none;
+  }
+
+  .insert {
+    display: block;
+  }
+
+  .insert table tr:nth-child(6) td {
+    display: block;
+  }
+
+  .insert tr:nth-child(6) td>div {
+    display: flex;
+    margin: 0.5rem 0;
+  }
+
+  .insert tr:nth-child(6) td>div input {
+    width: 50%;
+  }
+
+  /* 장비조회 */
+  .equip-tab{display: block;}
+  /* 장비 상세 조회 */
+  /* 장비등록창 */
+  .equipment-modal tbody td {
+    padding: 0.5rem;
+  }
+
+}
+
+/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
+@media all and (min-width:480px) and (max-width:767px) {
+  .menuicon {
+    display: block;
+    position: fixed;
+  }
+  .weather-info{
+    display: none;
+  }
+  .info-wrap {
+    display: none;
+  }
+  .ittLqr{font-size: 1.3rem !important;}
+  /* 공통 */
+  #layout{display: block;}
+  #pages{padding: 0; padding-top: 8rem; background-color: #ffffff;}
+  main{padding: 3rem 1rem 2rem 1rem;}
+  header {
+    padding: 1rem;
+    position: fixed;
+    box-shadow:1px 1px 10px 1px rgb(0 0 0 / 9%);
+  }
+  header .logo{display: block;}
+  nav {
+    position: fixed;
+    left: -320px;
+    top: 87px;
+    z-index: 12;
+    transition: 0.5s;
+    box-shadow:none;
+    height:91vh;
+  }
+  nav.on {
+    left: 0;
+    transition: 0.5s;
+  }
+  .bottom-section{padding: 0.9rem ; bottom: 6rem;}
+  .content-wrap{padding: 1rem; }  
+  th,td,tr{display: block;}
+  .logo img{width: 27rem;}
+  nav .logo{display: none;}
+  /* 올잇메디 메인 */
+  .main-grid-agency .statistics-agency img{width: 7rem; margin: 0 0 1rem 0;}
+  .main-grid-agency .statistics-agency li{display: block; text-align: center;}
+  /* 에이젼시 메인 */
+  .main-grid-agency{grid-template-columns: 1fr 1fr; gap: 1rem;}
+  .main-grid-agency .agency-visitlist{margin-top: 22rem;}
+  .agency-calendar .react-calendar__month-view__weekdays{display: flex !important;}
+  .agency-calendar .react-calendar__month-view__days__day{flex: 0 0 12.5% !important;}
+  .agency-calendar .react-calendar__month-view__days{flex-wrap: wrap !important;}
+  .tab-menu-agency li{padding: 1rem;}
+  /* 지자체 메인 */
+  .main-grid-government{display: block;}
+  .main-grid-government .content-box:nth-child(8), .main-grid-government .content-box:nth-child(6){height: 30rem;}
+  #RowChart>div{height: 36rem;}  
+  .main-grid-government .content-box{margin-bottom: 0rem;}
+  .statistics-govern{margin-bottom: 0; display: block;}
+  .sub-grid-government{ grid-template-columns: 1fr 1fr ;}
+  .main-grid-government div:nth-child(3){height: 52rem;}
+  .main-grid-government div:nth-child(5){height: 52rem;}
+  /* 보호자 메인 */
+  .main-guardian img{width: 3rem;}
+  .main-grid-guardian{display: block; padding: 0 1rem;}
+  .main-grid-guardian #fullDate{display: block;}
+  .guardian-img{width: 2rem;}
+  .battery{display: none;}
+  .battery-mobile{display: block;}
+  .statistics-guardian li{padding: 1rem; }
+  .smallbox{box-shadow: 1px 1px 9px 3px rgb(0 0 0 / 11%);}
+  .guardian-medicine{height: 28vh;}
+  .guardian-medicine ul li img{left: -23px;}
+  .medicine-title{
+    right: -9px;
+    top: 96px;
+    width: 3rem;}
+  .react-calendar__month-view__days button{padding: 1rem;}
+  .pink{background-color: #fdeeea;}
+  /* 보호자 그래프보기 */
+  #chartdiv1{height: 26vh !important;}
+  #chartdiv{height: 26vh !important;}
+  #chart{height: 27vh !important;}
+  #Chart2{height: 27vh !important;}
+  .statistics-grid{display: block;}
+  .statistics-grid .statistics-guardian {
+   margin-bottom: 1rem; padding: 0; height: 32vh;
+  }
+  .statistics-grid .statistics-guardian li{padding: 0;}
+  .statistics-grid .statistics-guardian li p:nth-child(1){margin-right: 1rem;}
+  .statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(2){width: 100%;}
+  .statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(3){display: none;}
+  /* Q&A */
+  .question-select select{width: 22%;}
+  /* 권한관리 */
+  .authority-table-pc {
+    display: none;
+  }
+
+  .authority-table-mobile thead tr:nth-child(1) {
+    display: flex;
+  }
+
+  .authority-table-mobile thead tr:nth-child(1)>div {
+    font-size: 1.6rem;
+    width: 100%;
+  }
+
+  .authority-table-mobile select {
+    margin: 1rem 0;
+  }
+
+  .authority-table-mobile {
+    display: block;
+  }
+
+  .authority-table-mobile thead {
+    display: inline-table;
+    width: 100%;
+  }
+
+  .authority-table-mobile tr,
+  .authority-table-mobile td {
+    display: revert;
+  }
+
+  .authority-table-mobile tr {
+    width: 100%;
+  }
+
+  .authority-table-mobile tr:nth-child(2) th:nth-child(1) {
+    width: 50%;
+  }
+
+  .authority-table-mobile td {
+    padding: 1rem;
+    width: 10%;
+  }
+
+  .authority-table-mobile tbody td input {
+    margin-right: 1rem;
+  }
+
+  .authority-table-mobile tbody td label {}
+
+  .authority-table-mobile th {
+    width: 50%;
+  }
+
+  /* 사용자관리 */
+  .senior-search{width: 39% !important;}
+  .searchselect label{margin-right: 2rem;}
+  .protector-user{margin-top: 2rem;}
+  .userauthoriylist{display: block;}
+  .userauthoriylist .left, .userauthoriylist .right {
+    width: 100% ;
+}
+.userauthoriylist .right{margin-top: 2rem;}
+.tab-menu {display: block;}
+.tab-menu li{display: -webkit-inline-flex;}
+.userlist{padding: 1rem !important;}
+  .search-management {
+    justify-content: space-between;
+    gap: 1rem;
+  }
+  .search-management button{width: 20%;}
+  .search-management select {
+    width: 35%;
+    margin: 0;
+  }
+
+  .search-management input {
+    width: 100%;margin: 0;
+  }
+
+ .searchselect-wrap{display: block;}
+ .searchselect{width: max-content;}
+ .page-title-span{display: block;
+  width: 14rem;
+    position: absolute;
+    right: 0; top: 3.2rem; color: #827e7e; font-size: 2rem;}
+
+  /* button */
+
+  .btn-large {
+    font-size: 1.4rem;
+  }
+
+  /* 로그인 */
+  .login-wrap h1 {
+    font-size: 1.8rem;
+    line-height: 1rem;
+  }
+
+  .login-wrap h3 {
+    margin: 20% 0 5% 0;
+    font-size: 2rem;
+    text-align: center;
+  }
+
+  .login-form .login-inner .content {
+    width: 80%;
+    margin: 1rem auto;
+  }
+
+  .container {
+    width: 100%;
+    margin: 0;
+    padding: 2rem;
+  }
+
+  .container .btn-wrap {
+    margin-top: 5rem;
+  }
+
+  .container button {
+    width: 30%;
+  }
+
+
+  /* 검색창 */
+  .detail-search tbody select{margin-right: 1rem;}
+  .area-wrap {
+    display: none;
+  }
+
+  .search-area {
+    padding: 1rem;
+  }
+
+  .detail-search table tr,
+  .detail-search table th,
+  .detail-search table td {
+    display: block;
+  }
+
+  .detail-search table th {
+    width: 100%;
+    margin: 1rem 0;
+  }
+
+  .detail-search table td::before {
+    display: none;
+  }
+
+  .detail-search table tr {
+    border: 0;
+  }
+
+  .detail-search table td {
+    padding: 0;
+    border: 0;
+  }
+
+  .detail-search tbody tr:nth-of-type(3) td {
+    width: 50%;
+    display: flex;
+  }
+
+  .detail-search tbody tr:nth-of-type(3) th:nth-child(3) {
+    width: 100%;
+  }
+
+  /* 시니어 정보 상세 조회 */
+  .senior-detail th,
+  .senior-detail td {
+    display: block;
+  }
+
+  .senior-detail th {
+    font-size: 1.2rem;
+    width: 100%;
+  }
+
+  .senior-detail td {
+    width: 100%;
+    font-size: 1.2rem;
+  }
+
+  .senior-detail td span {
+    width: 100%;
+    font-size: 1.2rem;
+    text-align: center;
+  }
+
+  /* 시니어 등록창 */
+  .senior-insert {
+    display: grid;
+  }
+
+  .senior-insert th {
+    font-size: 1.4rem;
+    width: 50%;
+    padding: 1rem 10rem;
+  }
+
+  .senior-insert td {
+    display: list-item;
+    padding-top: 1rem;
+  }
+
+  .senior-insert select {
+    width: 100%;
+  }
+
+  .senior-insert input {
+    width: 100%;
+  }
+
+  .senior-insert tr:nth-child(2) .gender {
+    padding: 1rem 1rem;
+    display: flex;
+    flex: 0 0 25%;
+  }
+
+  .senior-insert tr:nth-child(2) .gender input {
+    width: 25%;
+  }
+
+  .senior-insert td::marker {
+    content: "";
+  }
+
+  /* 복약조회*/
+
+  /* 복약 상세페이지 */
+  .medicine-detail-graph {
+    display: block;
+  }
+
+  /* 복약 수정 페이지 */
+  .modal-main table th,
+  .modal-main table td {
+    display: block;
+  }
+
+  .modal-main table th {
+    width: 100%;
+  }
+
+  .modal-main table td {
+    padding: 0.5rem 0 0 12rem;
+  }
+
+  .medicine-revise tr {
+    border: 0;
+  }
+
+  .medicine-revise tr:nth-child(3)>td div,
+  .medicine-revise tr:nth-child(4)>td div,
+  .medicine-revise tr:nth-child(5)>td div {
+    width: 50%;
+  }
+
+  .medicine-revise tr:nth-child(3)>td div input,
+  .medicine-revise tr:nth-child(4)>td div input,
+  .medicine-revise tr:nth-child(5)>td div input {
+    width: 20%;
+  }
+
+  .medicine-revise tr:nth-child(3)>td div label,
+  .medicine-revise tr:nth-child(4)>td div label,
+  .medicine-revise tr:nth-child(5)>td div label {
+    width: 50%;
+  }
+
+
+  /* 댁내 온도 조회 */
+
+
+  /* 최근 일주일 댁내 온도(모달창) */
+  .temperature-modal td:nth-of-type(1) {
+    font-weight: 900;
+    padding: 1rem;
+  }
+
+  .temperature-modal td:nth-of-type(2):before {
+    content: "날짜";
+  }
+
+  .temperature-modal td:nth-of-type(3):before {
+    content: "02:00";
+  }
+
+  .temperature-modal td:nth-of-type(4):before {
+    content: "10:00";
+  }
+
+  .temperature-modal td:nth-of-type(5):before {
+    content: "14:00";
+  }
+
+  .temperature-modal td:nth-of-type(6):before {
+    content: "23:00";
+  }
+
+  /* 방문 조회 */
+
+  /* 방문 관리 상세 페이지 */
+  .senior-detail tr:nth-of-type(6) td {
+    display: flex;
+    justify-content: center;
+  }
+
+  .senior-detail td {
+    padding: 0;
+  }
+
+  /* 방문 수정 페이지 */
+  .visit-revise th {
+    width: 40%;
+    font-size: 1.4rem;
+  }
+
+  .visit-revise tr:nth-child(3) td {
+    display: block;
+  }
+
+  .visit-revise tr:nth-child(3) td>div {
+    display: flex;
+    margin: 0.5rem 0;
+  }
+
+  /* 방문 등록 */
+  .user-list {
+    display: none;
+  }
+
+  .insert {
+    display: block;
+  }
+
+  .insert table tr:nth-child(6) td {
+    display: block;
+  }
+
+  .insert tr:nth-child(6) td>div {
+    display: flex;
+    margin: 0.5rem 0;
+  }
+
+  .insert tr:nth-child(6) td>div input {
+    width: 50%;
+  }
+
+  /* 장비조회 */
+  .equip-tab{display: block;}
+  /* 장비 상세 조회 */
+  /* 장비등록창 */
+  .equipment-modal tbody td {
+    padding: 0.5rem;
+  }
+
+}
+
+/* 모바일 세로 (해상도 ~ 479px)*/
+@media all and (max-width:479px) {
+  .menuicon {
+    display: block;
+    position: fixed;
+  }
+  .weather-info{
+    display: none;
+  }
+  .info-wrap {
+    display: none;
+  }
+  .ittLqr{font-size: 1.3rem !important;}
+  /* 공통 */
+  html{height: 100%;}
+  body{height: initial;}
+  #layout{display: block; height: 100%;} 
+  #pages{padding: 0; padding-top: 8rem; background-color: #ffffff; height: 100%;}
+  main{padding: 3rem 1rem 2rem 1rem;}
+  header {
+    padding: 1rem;
+    position: fixed;
+    box-shadow:1px 1px 10px 1px rgb(0 0 0 / 9%);
+  }
+  header .logo{display: block;}
+  nav {
+    position: fixed;
+    left: -320px;
+    top: 87px;
+    z-index: 12;
+    transition: 0.5s;
+    box-shadow:none;
+    height:91vh;
+  }
+  nav.on {
+    left: 0;
+    transition: 0.5s;
+  }
+  .bottom-section{padding: 0.9rem ; bottom: 6rem;}
+  .content-wrap{padding: 1rem; }  
+  th,td,tr{display: block;}
+  .logo img{width: 27rem;}
+  nav .logo{display: none;}
+  /* 에이젼시 메인 */
+  .main-grid-agency{display: block;}
+  .main-grid-agency .agency-visitlist{margin-top: 22rem;}
+  .agency-calendar .react-calendar__month-view__weekdays{display: flex !important;}
+  .agency-calendar .react-calendar__month-view__days__day{flex: 0 0 12.5% !important;}
+  .agency-calendar .react-calendar__month-view__days{flex-wrap: wrap !important;}
+  .tab-menu-agency li{padding: 1rem;}
+  .statistics-agency{margin-bottom: 1rem;}
+  /* 지자체 메인 */
+  .main-grid-government{display: block;}
+  .main-grid-government .content-box:nth-child(8), .main-grid-government .content-box:nth-child(6){height: 30rem;}
+  #RowChart>div{height: 36rem !important;}  
+  #Chart5{height: 29rem !important;}
+  .main-grid-government .content-box{margin-bottom: 1rem;}
+  .main-grid-government > .content-box{box-shadow: 1px 1px 7px 1px rgb(0 0 0 / 11%);}
+  .statistics-govern{margin-bottom: 0;}
+  .sub-grid-government{display: block;}
+  .main-grid-government .gOfcrs{font-size: 2rem;}
+  /* 보호자 메인 */
+  .main-guardian{text-align: center; display: block;}
+  .main-guardian img{display: none;}
+  .main-grid-guardian{display: block; padding: 0 1rem;}
+  .main-grid-guardian > div:nth-child(4) li{background: none; box-shadow: none;}
+  .main-grid-guardian > div:nth-child(3) >div{margin-top: 2rem;}
+  .main-grid-guardian > div:nth-child(4) {margin-top: 20rem;}
+
+  .main-grid-guardian #fullDate{display: block;}
+  .guardian-img{width: 2rem;}
+  .battery{display: none;}
+  .battery-mobile{display: block;}
+  .statistics-guardian li{padding: 1rem; }
+  .statistics-guardian h4{width: 14rem;}
+  .statistics-guardian > div >div{display: block;}
+  .statistics-guardian > div >div p{padding: 0;}
+  .smallbox{box-shadow: 1px 1px 9px 3px rgb(0 0 0 / 11%);}
+  .guardian-medicine{height: 15vh;}
+  .guardian-medicine ul li img{left: -23px;}
+  .medicine-title{
+    right: -9px;
+    top: 96px;
+    width: 3rem;}
+  .react-calendar__month-view__days button{padding: 1rem;}
+  .pink{background-color: #fdeeea;}
+  .statistics-guardian .react-calendar{background: none; height: 43vh;} 
+  
+  /* 보호자 그래프보기 */
+  #chartdiv1{height: 26vh !important;}
+  #chartdiv{height: 26vh !important;}
+  #chart{height: 27vh !important;}
+  #Chart2{height: 27vh !important;}
+  .statistics-grid{display: block;}
+  .statistics-grid .statistics-guardian {
+   margin-bottom: 1rem; padding: 0; height: 32vh;
+  }
+  .statistics-grid .statistics-guardian li{padding: 0;}
+  .statistics-grid .statistics-guardian li p:nth-child(1){margin-right: 1rem;}
+  .statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(2){width: 100%;}
+  .statistics-grid .statistics-guardian li:nth-child(1) p:nth-child(3){display: none;}
+  /* Q&A */
+  .question-select select{width: 22%;}
+  /* 권한관리 */
+  .authority-table-pc {
+    display: none;
+  }
+
+  .authority-table-mobile thead tr:nth-child(1) {
+    display: flex;
+  }
+
+  .authority-table-mobile thead tr:nth-child(1)>div {
+    font-size: 1.6rem;
+    width: 100%;
+  }
+
+  .authority-table-mobile select {
+    margin: 1rem 0;
+  }
+
+  .authority-table-mobile {
+    display: block;
+  }
+
+  .authority-table-mobile thead {
+    display: inline-table;
+    width: 100%;
+  }
+
+  .authority-table-mobile tr,
+  .authority-table-mobile td {
+    display: revert;
+  }
+
+  .authority-table-mobile tr {
+    width: 100%;
+  }
+
+  .authority-table-mobile tr:nth-child(2) th:nth-child(1) {
+    width: 50%;
+  }
+
+  .authority-table-mobile td {
+    padding: 1rem;
+    width: 10%;
+  }
+
+  .authority-table-mobile tbody td input {
+    margin-right: 1rem;
+  }
+
+  .authority-table-mobile tbody td label {}
+
+  .authority-table-mobile th {
+    width: 50%;
+  }
+
+  /* 사용자관리 */
   .senior-search{width: 25% !important;}
   .searchselect label{margin-right: 2rem;}
   .protector-user{margin-top: 2rem;}

   }
 
   .search-management select {
-    width: 22%;
+    width: 75%;
     margin: 0;
   }
 
   .search-management input {
-    width: 52%;margin: 0;
+    width: 100%;margin: 0;
   }
 
  .searchselect-wrap{display: block;}
  .searchselect{width: max-content;}
- .page-title-span{display: block;
-  margin-left: 5rem;}
+ .page-title-span{display: none}
 
   /* button */
 

b579bf0

a3fa4ba

client/views/layout/Header.jsx

--- client/views/layout/Header.jsx

+++ client/views/layout/Header.jsx


 import Weather from "../pages/main/Weather.jsx";
 import PersonIcon from "@mui/icons-material/Person";
 import { useNavigate } from "react-router";
+import logo from "../../resources/files/images/logo.png";
 
 function Header({ title }) {
   const navigate = useNavigate();

   return (
     <header>
       <div className="header-flex flex flex-align">
+        <h1 className="logo"><img src={logo} alt="" /></h1>
         <span className="page-title-span">{title}</span>
         <div className="page-title flex flex-align">
           {/* <MenuIcon /> */}

b579bf0

a3fa4ba

client/views/layout/Menu.jsx

--- client/views/layout/Menu.jsx

+++ client/views/layout/Menu.jsx


       <nav
         className={menuToggle? "nav on" : "nav"}        
       >
-        <div className="menuicon" onClick={onClickshow}><MenuIcon sx={{ width:35, height:35,}}/></div >
+        <div className="menuicon" onClick={onClickshow}><MenuIcon sx={{ width:35, height:35,color:"#7a7f87"}}/></div >
         <h1 className="logo"><img src={logo} alt="" /></h1>
         <div className="flex-align-column" style={{ marginTop: `3rem` }}>
           <ul onClick={closeSidebar}>

b579bf0

a3fa4ba

client/views/pages/main/Main_government.jsx

--- client/views/pages/main/Main_government.jsx

+++ client/views/pages/main/Main_government.jsx


   return (
     <main>
       <div className="main-grid-government">
-        <ul className="content-box statistics-govern" background="#f7acba">
-          <li> 
-            <p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>           
-            <p>{cityName} 전체 대상자</p>
-            <p>400</p>
-          </li>
-                  </ul>
-        <ul className="content-box statistics-govern" background="#8ef3d1">
-          <li>
-           <p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
-            <p>{cityName} 미복약 위험 대상자</p>
-            <p>400</p>
-          </li>
-        </ul>
-        <ul className="content-box statistics-govern" background="#ebe7b9" >
-          <li>
-             <p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
-            <p>{cityName} 댁내 온도 위험 대상자</p>
-            <p>400</p>
-          </li>
-        </ul>
-        <ul className="content-box statistics-govern" background="#5f9af3">
-          <li>
-            <p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
-            <p>{cityName} 배터리 부족 대상자 </p>
-            <p>400</p>
-          </li>
-        </ul>
+        <div className="sub-grid-government">
+          <ul className="content-box statistics-govern" background="#f7acba">
+            <li> 
+              <p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>           
+              <p>{cityName} 전체 대상자</p>
+              <p>400</p>
+            </li>
+                    </ul>
+          <ul className="content-box statistics-govern" background="#8ef3d1">
+            <li>
+             <p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
+              <p>{cityName} 미복약 위험 대상자</p>
+              <p>400</p>
+            </li>
+          </ul>
+          <ul className="content-box statistics-govern" background="#ebe7b9" >
+            <li>
+               <p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
+              <p>{cityName} 댁내 온도 위험 대상자</p>
+              <p>400</p>
+            </li>
+          </ul>
+          <ul className="content-box statistics-govern" background="#5f9af3">
+            <li>
+              <p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
+              <p>{cityName} 배터리 부족 대상자 </p>
+              <p>400</p>
+            </li>
+          </ul>
+        </div>
         <div className="content-box combine-left-government combine-bottom-government2 main-main">
           <div className="flex">
             <Title title={"지역별 케어 대상자 분포 현황"} explanation={"지역 선택 시 해당 지역의 대상자리스트가 보여집니다."} />

b579bf0

a3fa4ba

client/views/pages/main/Main_guardian.jsx

--- client/views/pages/main/Main_guardian.jsx

+++ client/views/pages/main/Main_guardian.jsx


 
           </div>
           <div className="statistics-guardian combine-right3">
-            <div className="flex-start margin-bottom2 margin-top"><img className="guardian-img" src={medicine} alt="" /><TitleSmall title={"복약체크"} explanation={"약을 잘 복용하고 계신지 체크해주세요."} /></div>
+            <div className="flex-start margin-bottom2"><img className="guardian-img" src={medicine} alt="" /><TitleSmall title={"복약체크"} explanation={"약을 잘 복용하고 계신지 체크해주세요."} /></div>
             <ul className="">
               <li className="guardian-medicine smallbox">
                 <DateDay />

             </ul>
           </div>
           <div className=" statistics-guardian combine-right3">
-            <div className="flex-start margin-bottom2 margin-top"><img className="guardian-img" src={temperature} alt="" /><TitleSmall title={"온도체크"} explanation={"댁내 온도가 적절한지 체크해보세요."} /></div>
+            <div className="flex-start margin-bottom2 "><img className="guardian-img" src={temperature} alt="" /><TitleSmall title={"온도체크"} explanation={"댁내 온도가 적절한지 체크해보세요."} /></div>
             <ul >
               <li className="smallbox">
                 <DateMonth />

             </ul>
           </div>
           <div className=" statistics-guardian combine-left2 combine-middle-government">
-            <div className="flex-start margin-bottom2 margin-top"><img className="guardian-img" src={calendarBig} alt="" /><TitleSmall title={"방문체크"} /></div>
+            <div className="flex-start margin-bottom2 "><img className="guardian-img" src={calendarBig} alt="" /><TitleSmall title={"방문체크"} /></div>
             <ul >
               <li className="smallbox">
                 <Calendar />

Add a comment

Open 0
Closed 0

List

...	...	@@ -28,6 +28,7 @@
28	28	.page-title-span {
29	29	font-size: 2.5rem;
30	30	font-weight: bold;
	31	+
31	32	}
32	33
33	34	nav{
...	...	@@ -132,7 +133,7 @@
132	133	padding: 3rem;
133	134	background-color: #f4f4f2;
134	135	grid-area: main;
135		-
	136	+ height: inherit;
136	137	}
137	138
138	139

...	...	@@ -15,11 +15,11 @@
15	15	.menuicon {
16	16	display: none;
17	17	cursor: pointer;
18		- left: 1.5rem;
19		- top: 2.6rem;
	18	+ right: 1.5rem;
	19	+ top: 2.9rem;
20	20	position: absolute;
21	21	}
22		-
	22	+header .logo{display: none;}
23	23	/* 시행기관 장비관리 리스트 */
24	24	.visitlist {
25	25	height: 55vh;
...	...	@@ -50,7 +50,7 @@
50	50	flex: 0 0 2.85% !important;
51	51	padding: 1rem 0;
52	52	}
53		-
	53	+.react-calendar__month-view__days__day--neighboringMonth{color: #f0f0f0;;}
54	54	/* .agency-calendar .react-calendar__month-view__days{overflow: hidden;} */
55	55
56	56	/* Q&A */
...	...	@@ -279,13 +279,12 @@
279	279	.guardian-medicine {
280	280	height: 17vh;
281	281	}
282		-
	282	+.main-grid-guardian > div:nth-child(3) ul{height: 6rem;}
283	283	.statistics-guardian li {
284	284	padding: 1rem 3rem;
285	285	background: #ffffff;
286	286	border-radius: 20px;
287	287	margin: 0 auto;
288		- margin-bottom: 1rem;
289	288	position: relative;
290	289	}
291	290	.medicine-title{

...	...	@@ -126,7 +126,7 @@
126	126
127	127	</div>
128	128	<div className="statistics-guardian combine-right3">
129		- <div className="flex-start margin-bottom2 margin-top"><img className="guardian-img" src={medicine} alt="" /><TitleSmall title={"복약체크"} explanation={"약을 잘 복용하고 계신지 체크해주세요."} /></div>
	129	+ <div className="flex-start margin-bottom2"><img className="guardian-img" src={medicine} alt="" /><TitleSmall title={"복약체크"} explanation={"약을 잘 복용하고 계신지 체크해주세요."} /></div>
130	130	<ul className="">
131	131	<li className="guardian-medicine smallbox">
132	132	<DateDay />
...	...	@@ -151,7 +151,7 @@
151	151	</ul>
152	152	</div>
153	153	<div className=" statistics-guardian combine-right3">
154		- <div className="flex-start margin-bottom2 margin-top"><img className="guardian-img" src={temperature} alt="" /><TitleSmall title={"온도체크"} explanation={"댁내 온도가 적절한지 체크해보세요."} /></div>
	154	+ <div className="flex-start margin-bottom2 "><img className="guardian-img" src={temperature} alt="" /><TitleSmall title={"온도체크"} explanation={"댁내 온도가 적절한지 체크해보세요."} /></div>
155	155	<ul >
156	156	<li className="smallbox">
157	157	<DateMonth />
...	...	@@ -160,7 +160,7 @@
160	160	</ul>
161	161	</div>
162	162	<div className=" statistics-guardian combine-left2 combine-middle-government">
163		- <div className="flex-start margin-bottom2 margin-top"><img className="guardian-img" src={calendarBig} alt="" /><TitleSmall title={"방문체크"} /></div>
	163	+ <div className="flex-start margin-bottom2 "><img className="guardian-img" src={calendarBig} alt="" /><TitleSmall title={"방문체크"} /></div>
164	164	<ul >
165	165	<li className="smallbox">
166	166	<Calendar />

...	...	@@ -21,6 +21,13 @@
21	21	grid-template-rows: 0.1fr 0.5fr 0.3fr 0.3fr 0.3fr;
22	22	gap: 1rem;
23	23	}
	24	+.sub-grid-government{
	25	+ display: grid;
	26	+ grid-template-columns: 1fr 1fr 1fr 1fr;
	27	+ grid-template-rows: 0.1fr;
	28	+ grid-column: 1/5;
	29	+ gap: 1rem;
	30	+}
24	31	.main-grid {
25	32	height: 100%;
26	33	display: grid;
...	...	@@ -43,10 +50,9 @@
43	50	}
44	51
45	52	.main-grid-guardian {
46		- height: 100%;
47	53	display: grid;
48	54	grid-template-columns: 0.9fr 0.9fr;
49		- grid-template-rows: 0.1fr 0.5fr 0.5fr;
	55	+ grid-template-rows: 0.1fr 0.1fr 1fr;
50	56	gap: 2rem;
51	57	}
52	58

...	...	@@ -86,34 +86,36 @@
86	86	return (
87	87	<main>
88	88	<div className="main-grid-government">
89		- <ul className="content-box statistics-govern" background="#f7acba">
90		- <li>
91		- <p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>
92		- <p>{cityName} 전체 대상자</p>
93		- <p>400</p>
94		- </li>
95		- </ul>
96		- <ul className="content-box statistics-govern" background="#8ef3d1">
97		- <li>
98		- <p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
99		- <p>{cityName} 미복약 위험 대상자</p>
100		- <p>400</p>
101		- </li>
102		- </ul>
103		- <ul className="content-box statistics-govern" background="#ebe7b9" >
104		- <li>
105		- <p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
106		- <p>{cityName} 댁내 온도 위험 대상자</p>
107		- <p>400</p>
108		- </li>
109		- </ul>
110		- <ul className="content-box statistics-govern" background="#5f9af3">
111		- <li>
112		- <p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
113		- <p>{cityName} 배터리 부족 대상자 </p>
114		- <p>400</p>
115		- </li>
116		- </ul>
	89	+ <div className="sub-grid-government">
	90	+ <ul className="content-box statistics-govern" background="#f7acba">
	91	+ <li>
	92	+ <p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>
	93	+ <p>{cityName} 전체 대상자</p>
	94	+ <p>400</p>
	95	+ </li>
	96	+ </ul>
	97	+ <ul className="content-box statistics-govern" background="#8ef3d1">
	98	+ <li>
	99	+ <p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
	100	+ <p>{cityName} 미복약 위험 대상자</p>
	101	+ <p>400</p>
	102	+ </li>
	103	+ </ul>
	104	+ <ul className="content-box statistics-govern" background="#ebe7b9" >
	105	+ <li>
	106	+ <p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
	107	+ <p>{cityName} 댁내 온도 위험 대상자</p>
	108	+ <p>400</p>
	109	+ </li>
	110	+ </ul>
	111	+ <ul className="content-box statistics-govern" background="#5f9af3">
	112	+ <li>
	113	+ <p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
	114	+ <p>{cityName} 배터리 부족 대상자 </p>
	115	+ <p>400</p>
	116	+ </li>
	117	+ </ul>
	118	+ </div>
117	119	<div className="content-box combine-left-government combine-bottom-government2 main-main">
118	120	<div className="flex">
119	121	<Title title={"지역별 케어 대상자 분포 현황"} explanation={"지역 선택 시 해당 지역의 대상자리스트가 보여집니다."} />

Delete comment