File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="maintop">
<h1>AI 안전통합 횡단보도 플랫폼</h1>
<div class="boxmenu">
<div class="box">
<div class="grid">
<img
src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
alt
/>
<span class="box_title">금일 누적보행자 수</span>
</div>
<span class="box_num">00</span>
<span class="box_subtxt">명</span>
</div>
<div class="box">
<div class="grid">
<img
src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
alt
/>
<span class="box_title">금일 무단횡단 발생</span>
</div>
<span class="box_num">00</span>
<span class="box_subtxt">회</span>
</div>
<div class="box">
<div class="grid">
<img
src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
alt
/>
<span class="box_title">금일 신호연장 발생 수</span>
</div>
<span class="box_num">00</span>
<span class="box_subtxt">회</span>
</div>
<div class="box">
<div class="grid">
<img
src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
alt
/>
<span class="box_title">금일 신호연장</span>
</div>
<span class="box_num">00</span>
<span class="box_subtxt">초</span>
</div>
<div class="box">
<div class="grid">
<img
src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
alt
/>
<span class="box_title">금일 신호 위반 발생</span>
</div>
<span class="box_num">00</span>
<span class="box_subtxt">회</span>
</div>
<div class="box">
<div class="grid">
<img
src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
alt
/>
<span class="box_title">금일 장애 발생 수</span>
</div>
<span class="box_num">00</span>
<span class="box_subtxt">회</span>
</div>
</div>
</div>
<div class="mainbottom">
<div class="main_section flex">
<div class="verticalbar flex">
<div class="bar_title img1">실시간 관제</div>
<div class="barinfo">
<div class="bar_element">
<img
src="../../../resources/images/icon/Real-timestatuscontrol.png"
alt=""
/>
<span class="elementtxt">실시간 현황 관제</span>
</div>
<div class="bar_element">
<img
src="../../../resources/images/icon/Lifeoccurrenceinformationinquiry.png"
alt=""
/>
<span class="elementtxt">생활발생 정보 조회</span>
</div>
<div class="bar_element">
<img
src="../../../resources/images/icon/Failureoccurrenceinformationinquiry.png"
alt=""
/>
<span class="elementtxt">장애발생 정보 조회</span>
</div>
<div class="bar_element">
<img
src="../../../resources/images/icon/Crosswalkinquiry.png"
alt=""
/>
<span class="elementtxt">횡단보도 조회</span>
</div>
</div>
</div>
<div class="verticalbar flex">
<div class="bar_title img2">통계 분석</div>
<div class="barinfo">
<div class="bar_element">
<img src="../../../resources/images/icon/Jaywalking.png" alt="" />
<span class="elementtxt">무단횡단</span>
</div>
<div class="bar_element">
<img
src="../../../resources/images/icon/anextensionoftime.png"
alt=""
/>
<span class="elementtxt">시간 연장</span>
</div>
<div class="bar_element">
<img src="../../../resources/images/icon/rightturn.png" alt="" />
<span class="elementtxt">우회전 위반 차</span>
</div>
<div class="bar_element">
<img src="../../../resources/images/icon/dang.png" alt="" />
<span class="elementtxt">장애 발생</span>
</div>
</div>
</div>
</div>
<div class="main_bottom">
<div class="board">
<div class="flex-between">
<div class="flex gap">
<img
class="board_logo"
src="../../../resources/images/icon/nemo.png"
alt=""
/>
<span class="board_title">장애 발생 내역</span>
</div>
<div>
<router-link to="/Main3">
<span class="board_add">+</span>
</router-link>
</div>
</div>
<div class="boardinfo">
<div class="board_element">
<span class="elementtxt">
<span class="beforetxt">●</span>공지사항 등록</span
>
<span class="elementdate">2023.05.09</span>
</div>
<div class="board_element">
<span class="elementtxt">
<span class="beforetxt">●</span>실시간 현황 관제</span
>
<span class="elementdate">2023.05.09</span>
</div>
<div class="board_element">
<span class="elementtxt">
<span class="beforetxt">●</span>실시간 현황 관제2</span
>
<span class="elementdate">2023.05.09</span>
</div>
</div>
</div>
<div class="board">
<div class="flex-between gap">
<div class="flex gap">
<img
class="board_logo"
src="../../../resources/images/icon/nemo.png"
alt=""
/>
<span class="board_title">상황 발생 내역</span>
</div>
<div>
<router-link to="/Main3">
<span class="board_add">+</span>
</router-link>
</div>
</div>
<div class="boardinfo">
<div class="board_element">
<span class="elementtxt">
<span class="beforetxt">●</span>공지사항 등록</span
>
<span class="elementdate">2023.05.09</span>
</div>
<div class="board_element">
<span class="elementtxt">
<span class="beforetxt">●</span>실시간 현황 관제</span
>
<span class="elementdate">2023.05.09</span>
</div>
<div class="board_element">
<span class="elementtxt">
<span class="beforetxt">●</span>실시간 현황 관제2</span
>
<span class="elementdate">2023.05.09</span>
</div>
</div>
</div>
</div>
</div>
<Footer></Footer>
</template>
<script>
import Footer from "../../layout/Footer.vue";
export default {
data() {
return {};
},
methods: {},
watch: {},
computed: {},
components: {Footer: Footer,},
mounted() {
console.log("main mounted");
},
};
</script>
<style scoped>
.top{height: auto;}
.main-warp > div {
height: auto;
}
.boxmenu {margin: 5rem auto; width: 80%; gap: 1rem;}
.maintop {
background-image: url(https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/main_bg.png?alt=media&token=bb87794d-6b33-426e-a67c-b907fa5b4251);
background-size: cover;
padding: 6rem 14rem 2rem 14rem;
}
.mainbottom .img1 {
background-image: url(https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/img_1.png?alt=media&token=59ca1efb-5246-4df5-a6b7-93dfad7f275a);
background-size: cover;
}
.mainbottom .img2 {
background-image: url(https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/img_2.png?alt=media&token=d6f86757-6276-4ced-9ac3-bd77599a2b2c);
background-size: cover;
}
.mainbottom {
background: #f7f7f6;
padding-top: 2%;
height: 52% !important;
}
.barinfo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0rem;
background: #e2e2e1;
}
.maintop h1 {
text-align: center;
font-size: 4rem;
color: #ffffff;
}
.box {
text-align: left;
background: #ffffff;
padding: 1rem;
width: 250px;
border-radius: 10px;
}
.boxmenu {
justify-content: space-around;
}
.boxmenu img {
width: 25px;
}
.bar_element img{width: 50px;}
template {
background-color: #f7f7f6;
}
.main_section {
display: flex;
/* flex-direction: column; */
justify-content: center;
align-items: center;
margin-left: auto;
}
.main_section h1 {
font-size: 48px;
color: #13833b;
margin: 3rem 0;
}
.main_bottom {
display: flex;
gap: 2.5rem;
justify-content: center;
align-items: center;
}
/* .flex-between {
height: 7rem;
width: 100%;
z-index: 2000;
padding: 0 4rem 0 1rem;
background: #13833b;
box-shadow: 0px 5px 20px #00000038;
} */
@media (max-width: 479px) {
.box {
display: flex;
gap: 1rem;
align-items: center;
padding: 0.5rem;
width: 250px;
}
.bar_element {
width: -webkit-fill-available;
}
.maintop {
overflow: scroll;
}
.boxmenu {
width: max-content;
height: fit-content;
display: flex !important;
padding: 1.5rem;
/* margin: 10px; */
/* border-radius: 20px;*/
}
.boxmenu {
}
.boxborder {
display: none;
}
.box_title {
/* margin-top: 172px; */
/* width: 1000px; */
/* border: 1px solid; */
color: #9c9b9a;
text-align: center;
/* margin-right: 30px; */
font-size: 15px;
}
.main_section h1 {
font-size: 20px;
color: #13833b;
margin: 3rem 0;
text-align: center;
/* width: 100vw; */
}
.verticalbar {
display: block;
width: -webkit-fill-available;
border-radius: 15px;
background-color: #dddddd00;
margin-bottom: 0;
margin: 0;
padding: 0;
}
.barinfo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0rem;
}
.barinfo img {
width: 30px;
margin-top: 15px;
}
.bar_title {
color: #3b3d3d;
font-size: 8px;
gap: none;
display: inline;
display: none;
}
.main_section .elementtxt {
display: flex;
font-size: 15px;
justify-content: center;
align-items: center;
}
.bar_element {
/* width: 100vw; */
border-radius: 20px;
height: 90px;
line-height: 30px;
background: #dddddd;
text-align: center;
margin: 5px;
}
.boxmenu img {
display: none;
}
.board_title {
font-size: 16px;
}
.board {
background: #ffffff;
border-radius: 15px;
width: -webkit-fill-available;
box-shadow: 0px 5px 20px #00000038;
padding: 2rem;
margin: 30px 10px;
}
.box_num {
color: #13833b;
font-size: 17px;
}
.boardinfo {
font-size: 17px;
padding: 2rem 0;
}
}
</style>