262 lines
8.1 KiB
Plaintext
262 lines
8.1 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<%@ include file="/WEB-INF/include/include-header2.jspf" %>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700&display=swap');
|
|
</style>
|
|
<style type="text/css">
|
|
body {
|
|
font-family:'Nanum Gothic', sans-serif;
|
|
height: 100vh;
|
|
/*background: url("/images/601822.jpg") no-repeat center/cover;*/
|
|
background: url("/images/bg/23.jpg") no-repeat center/cover;
|
|
overflow: hidden;
|
|
}
|
|
.container {
|
|
margin: 0 auto;
|
|
max-width: 3840px;
|
|
width: 98%;
|
|
}
|
|
|
|
.card-panel {
|
|
-webkit-transition: -webkit-box-shadow .25s;
|
|
transition: -webkit-box-shadow .25s;
|
|
transition: box-shadow .25s;
|
|
transition: box-shadow .25s, -webkit-box-shadow .25s;
|
|
padding: 1.3vw 0.5vw 1.3vw 0.5vw;
|
|
margin: 0.3rem 0 0.3rem 0;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.card-panel2 {
|
|
-webkit-transition: -webkit-box-shadow .25s;
|
|
transition: -webkit-box-shadow .25s;
|
|
transition: box-shadow .25s;
|
|
transition: box-shadow .25s, -webkit-box-shadow .25s;
|
|
padding: 1.3vw 0.5vw 1.3vw 0.5vw;
|
|
margin: 0.3rem 0 0.3rem 0;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
opacity: 0.8;
|
|
height: 14vw;
|
|
}
|
|
/* for MS계열 브라우저 */
|
|
@keyframes blink {
|
|
0% {color: red;} /*text를 blink*/
|
|
50% {color: #111;}
|
|
/*0% {background-color: red;} 배경을 blink
|
|
50% {background-color: #fff;}*/
|
|
}
|
|
|
|
/* for Chrome, Safari */
|
|
@-webkit-keyframes blink {
|
|
0% {color: red;} /*text를 blink*/
|
|
50% {color: #111;}
|
|
/*0% {background-color: red;} 배경을 blink
|
|
50% {background-color: #fff;}*/
|
|
}
|
|
|
|
/* blink CSS 브라우저 별로 각각 애니메이션을 지정해 주어야 동작한다. */
|
|
.blinkcss {
|
|
font-weight:bold;
|
|
animation: blink 1s step-end infinite;
|
|
-webkit-animation: blink 1s step-end infinite;
|
|
}
|
|
|
|
.valign-wrapper {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.Aligner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.Aligner-item {
|
|
max-width: 50%;
|
|
}
|
|
|
|
.Aligner-item--top {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.Aligner-item--bottom {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.card .card-content {
|
|
padding: 0.2vw 0.2vw 0.2vw 0.2vw;
|
|
border-radius: 0 0 2px 2px;
|
|
}
|
|
table {
|
|
height: 82vh;
|
|
opacity: 0.8;
|
|
}
|
|
table thead tr th {
|
|
font-size: 3vw;
|
|
text-align: center;
|
|
color: white;
|
|
border-color: #bdbdbd;
|
|
border-style : solid;
|
|
border-width: 4px;
|
|
padding: 0.2vw 0.5vw 0.2vw 0.5vw;
|
|
background-color: #00acc1;
|
|
}
|
|
table tbody tr td {
|
|
font-size: 3vw; /* 6줄일때 3vw, 9줄일떼 2.2vw*/
|
|
font-weight : 600;
|
|
text-align: center;
|
|
border-color: #bdbdbd;
|
|
border-style : solid;
|
|
border-width: 4px;
|
|
padding: 0.2vw 0.5vw 0.2vw 0.5vw;
|
|
}
|
|
|
|
.td_style1{
|
|
background-color: #00acc1;
|
|
}
|
|
|
|
.td_style2{
|
|
background-color: #e6ee9c;
|
|
}
|
|
|
|
.td_style3{
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Wallboard Test</title>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="row center-align" style="margin-top: 4vh;margin-bottom: 0.5vh;">
|
|
<div class="col s4 left-align"><img border="0" style="width: 10vw; height: 5.5vh; padding-top: 1vh;" src="<c:url value='/images/wells_logo.png' />"> </div>
|
|
<div class="col s4 center-align"><span style="font-size: 3vw;">센터전체현황</span></div>
|
|
<div class="col s4 right-align"><span id="clock" style="font-size: 2vw; font-weight : 500; line-height: 1.2;">0000-00-00(월) 00시 00분 00초</span></div>
|
|
</div>
|
|
<div class="row center-align" style="margin-bottom: 0.5vh;">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>구분</th>
|
|
<th>접수호</th>
|
|
<th>응대호</th>
|
|
<th>응대율</th>
|
|
<th>대기호</th>
|
|
<th>대기상담사</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="td_style2">전 체</td>
|
|
<td class="td_style2">1,291</td>
|
|
<td class="td_style2">1,247</td>
|
|
<td class="td_style2">89.1</td>
|
|
<td class="td_style2">5</td>
|
|
<td class="td_style2">2</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td_style1" style="color: white;">AS 이사 재설치</td>
|
|
<td class="td_style3">1,291</td>
|
|
<td class="td_style3">1,247</td>
|
|
<td class="td_style3 blinkcss">89.1</td>
|
|
<td class="td_style3">5</td>
|
|
<td class="td_style3">2</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td_style1" style="color: white;">신규 렌탈</td>
|
|
<td class="td_style3">1,291</td>
|
|
<td class="td_style3">1,247</td>
|
|
<td class="td_style3">89.1</td>
|
|
<td class="td_style3">5</td>
|
|
<td class="td_style3">2</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td_style1" style="color: white;">결재정보 관련문의</td>
|
|
<td class="td_style3">1,291</td>
|
|
<td class="td_style3">1,247</td>
|
|
<td class="td_style3">89.1</td>
|
|
<td class="td_style3">5</td>
|
|
<td class="td_style3">2</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td_style1" style="color: white;">계약정보 관련문의</td>
|
|
<td class="td_style3">1,291</td>
|
|
<td class="td_style3">1,247</td>
|
|
<td class="td_style3">89.1</td>
|
|
<td class="td_style3">5</td>
|
|
<td class="td_style3">2</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td_style1" style="color: white;">취소문의</td>
|
|
<td class="td_style3">1,291</td>
|
|
<td class="td_style3">1,247</td>
|
|
<td class="td_style3">89.1</td>
|
|
<td class="td_style3">5</td>
|
|
<td class="td_style3">2</td>
|
|
</tr>
|
|
<!-- tr>
|
|
<td class="td_style1" style="color: white;">신규 렌탈</td>
|
|
<td class="td_style3">1,291</td>
|
|
<td class="td_style3">1,247</td>
|
|
<td class="td_style3">89.1</td>
|
|
<td class="td_style3">5</td>
|
|
<td class="td_style3">2</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td_style1" style="color: white;">결재정보 관련문의</td>
|
|
<td class="td_style3">1,291</td>
|
|
<td class="td_style3">1,247</td>
|
|
<td class="td_style3">89.1</td>
|
|
<td class="td_style3">5</td>
|
|
<td class="td_style3">2</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td_style1" style="color: white;">계약정보 관련문의</td>
|
|
<td class="td_style3">1,291</td>
|
|
<td class="td_style3">1,247</td>
|
|
<td class="td_style3">89.1</td>
|
|
<td class="td_style3">5</td>
|
|
<td class="td_style3">2</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td_style1" style="color: white;">취소문의</td>
|
|
<td class="td_style3">1,291</td>
|
|
<td class="td_style3">1,247</td>
|
|
<td class="td_style3">89.1</td>
|
|
<td class="td_style3">5</td>
|
|
<td class="td_style3">2</td>
|
|
</tr-->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
function clock(){
|
|
var clock = parent.$('input#clock').val();
|
|
$('#clock').text(clock);
|
|
|
|
// 1000 밀리초(=1초) 후에, 이 함수를 실행하기 (반복 실행 효과).
|
|
setTimeout( "clock()", 1000 );
|
|
}
|
|
|
|
$( document ).ready(function() {
|
|
clock();
|
|
});
|
|
</script>
|
|
</html>
|
|
|