Skip to content

H
HRM-admin
Commit 2d24a72f authored by FionaChen's avatar FionaChen
Browse files
Options

新增歡迎頁、登入頁

parent a6c3b4b4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 548 additions and 12 deletions
css/style.css
View file @ 2d24a72f
...@@ -16,6 +16,10 @@ body { ...@@ -16,6 +16,10 @@ body {
padding: 0; padding: 0;
} }
button {
outline: none;
}
.row, .row,
.col { .col {
margin: 0; margin: 0;
...@@ -68,6 +72,18 @@ ul { ...@@ -68,6 +72,18 @@ ul {
outline: none; outline: none;
} }
.btn-wt.bt48 {
height: 48px;
background-color: #35a9e1;
color: #fff;
outline: none;
}
.btn-wt.bt48:hover {
background-color: #5dbae7;
outline: none;
}
.loginBG { .loginBG {
height: 100vh; height: 100vh;
background: #f5fbfd; background: #f5fbfd;
...@@ -122,6 +138,10 @@ ul { ...@@ -122,6 +138,10 @@ ul {
display: block; display: block;
} }
.loginBG .form-group {
margin-bottom: 32px;
}
#nav-btn { #nav-btn {
fill: white; fill: white;
position: absolute; position: absolute;
...@@ -273,6 +293,15 @@ label.btn input[type="radio"].with-gap:checked + label:after { ...@@ -273,6 +293,15 @@ label.btn input[type="radio"].with-gap:checked + label:after {
.table.table-hrm th { .table.table-hrm th {
padding: 15px; padding: 15px;
min-width: 75px;
}
.table.table-hrm th.twoword {
min-width: 85px;
}
.table.table-hrm th.fourword {
min-width: 135px;
} }
.table.table-hrm td { .table.table-hrm td {
...@@ -321,7 +350,6 @@ label.btn input[type="radio"].with-gap:checked + label:after { ...@@ -321,7 +350,6 @@ label.btn input[type="radio"].with-gap:checked + label:after {
} }
.pagination .pren, .pagination .pren:hover { .pagination .pren, .pagination .pren:hover {
display: inline-block;
vertical-align: middle; vertical-align: middle;
border: 0; border: 0;
width: 24px; width: 24px;
...@@ -329,11 +357,12 @@ label.btn input[type="radio"].with-gap:checked + label:after { ...@@ -329,11 +357,12 @@ label.btn input[type="radio"].with-gap:checked + label:after {
background-image: url("../images/icon/icon-pren.svg"); background-image: url("../images/icon/icon-pren.svg");
background-repeat: none; background-repeat: none;
background-position: center; background-position: center;
cursor: pointer; text-decoration: none;
} }
.pagination .pren.active, .pagination .pren.active:hover, .pagination .pren:hover.active, .pagination .pren:hover.active:hover { .pagination .pren.active, .pagination .pren.active:hover, .pagination .pren:hover.active, .pagination .pren:hover.active:hover {
background-image: url("../images/icon/icon-pren2.svg"); background-image: url("../images/icon/icon-pren2.svg");
cursor: pointer;
} }
.pagination .pren.all, .pagination .pren.all:hover, .pagination .pren:hover.all, .pagination .pren:hover.all:hover { .pagination .pren.all, .pagination .pren.all:hover, .pagination .pren:hover.all, .pagination .pren:hover.all:hover {
...@@ -342,6 +371,7 @@ label.btn input[type="radio"].with-gap:checked + label:after { ...@@ -342,6 +371,7 @@ label.btn input[type="radio"].with-gap:checked + label:after {
.pagination .pren.all.active, .pagination .pren.all.active:hover, .pagination .pren:hover.all.active, .pagination .pren:hover.all.active:hover { .pagination .pren.all.active, .pagination .pren.all.active:hover, .pagination .pren:hover.all.active, .pagination .pren:hover.all.active:hover {
background-image: url("../images/icon/icon-front2.svg"); background-image: url("../images/icon/icon-front2.svg");
cursor: pointer;
} }
.pagination .next, .pagination .next:hover { .pagination .next, .pagination .next:hover {
...@@ -353,11 +383,11 @@ label.btn input[type="radio"].with-gap:checked + label:after { ...@@ -353,11 +383,11 @@ label.btn input[type="radio"].with-gap:checked + label:after {
background-image: url("../images/icon/icon-next.svg"); background-image: url("../images/icon/icon-next.svg");
background-repeat: none; background-repeat: none;
background-position: center; background-position: center;
cursor: pointer;
} }
.pagination .next.active, .pagination .next.active:hover, .pagination .next:hover.active, .pagination .next:hover.active:hover { .pagination .next.active, .pagination .next.active:hover, .pagination .next:hover.active, .pagination .next:hover.active:hover {
background-image: url("../images/icon/icon-next2.svg"); background-image: url("../images/icon/icon-next2.svg");
cursor: pointer;
} }
.pagination .next.all, .pagination .next.all:hover, .pagination .next:hover.all, .pagination .next:hover.all:hover { .pagination .next.all, .pagination .next.all:hover, .pagination .next:hover.all, .pagination .next:hover.all:hover {
...@@ -366,6 +396,7 @@ label.btn input[type="radio"].with-gap:checked + label:after { ...@@ -366,6 +396,7 @@ label.btn input[type="radio"].with-gap:checked + label:after {
.pagination .next.all.active, .pagination .next.all.active:hover, .pagination .next:hover.all.active, .pagination .next:hover.all.active:hover { .pagination .next.all.active, .pagination .next.all.active:hover, .pagination .next:hover.all.active, .pagination .next:hover.all.active:hover {
background-image: url("../images/icon/icon-end2.svg"); background-image: url("../images/icon/icon-end2.svg");
cursor: pointer;
} }
.pagination .page-number { .pagination .page-number {
...@@ -380,18 +411,14 @@ label.btn input[type="radio"].with-gap:checked + label:after { ...@@ -380,18 +411,14 @@ label.btn input[type="radio"].with-gap:checked + label:after {
text-align: center; text-align: center;
background-color: #fff; background-color: #fff;
color: #35a9e1; color: #35a9e1;
cursor: pointer;
text-decoration: none;
} }
.pagination .page-number.active { .pagination .page-number.active {
background-color: #35a9e1; background-color: #35a9e1;
color: #fff; color: #fff;
} cursor: pointer;
.pagination .page-total {
margin-right: 14px;
font-size: 16px;
color: #525252;
line-height: 24px;
} }
.sorter:after { .sorter:after {
...@@ -442,6 +469,7 @@ aside .navbar-light .navbar-toggler-icon { ...@@ -442,6 +469,7 @@ aside .navbar-light .navbar-toggler-icon {
background-image: url(../images/icon/icon-nav.svg); background-image: url(../images/icon/icon-nav.svg);
width: 45px; width: 45px;
height: 45px; height: 45px;
outline: none;
} }
aside nav { aside nav {
...@@ -500,7 +528,7 @@ aside nav ul.item-list .items img { ...@@ -500,7 +528,7 @@ aside nav ul.item-list .items img {
margin-bottom: 5px; margin-bottom: 5px;
} }
aside nav ul.item-list .items:hover { aside nav ul.item-list .items:hover, aside nav ul.item-list .items.active {
text-decoration: none; text-decoration: none;
background-image: url(../images/icon/icon-bg.png); background-image: url(../images/icon/icon-bg.png);
background-repeat: none; background-repeat: none;
...@@ -545,6 +573,10 @@ header.headerbar { ...@@ -545,6 +573,10 @@ header.headerbar {
align-items: center; align-items: center;
} }
header.headerbar .btn-wt {
outline: none;
}
header .login-cont { header .login-cont {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -608,6 +640,7 @@ article .nav-tabs .nav-link .line { ...@@ -608,6 +640,7 @@ article .nav-tabs .nav-link .line {
article .nav-tabs .nav-link .nav-link:hover { article .nav-tabs .nav-link .nav-link:hover {
border-color: #86a1ae #86a1ae #fff; border-color: #86a1ae #86a1ae #fff;
border-bottom: 2px solid #86a1ae;
} }
article .nav-tabs .nav-link .nav-link:hover .nav-link:hover .line { article .nav-tabs .nav-link .nav-link:hover .nav-link:hover .line {
...@@ -627,6 +660,30 @@ article .nav-tabs .nav-link.active .line { ...@@ -627,6 +660,30 @@ article .nav-tabs .nav-link.active .line {
padding-bottom: 3px; padding-bottom: 3px;
} }
article .welcome-topic {
font-size: 24px;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 98px;
}
article .welcome-topic .welcome-pic {
max-width: 480px;
margin-top: 85px;
}
#products { #products {
padding-top: 40px; padding-top: 40px;
font-weight: bold; font-weight: bold;
...@@ -717,6 +774,7 @@ h1 { ...@@ -717,6 +774,7 @@ h1 {
color: #fff; color: #fff;
font-size: 1.5rem; font-size: 1.5rem;
opacity: 1; opacity: 1;
outline: none;
} }
.modal .modal-content .modal-header .close.whitebg { .modal .modal-content .modal-header .close.whitebg {
...@@ -743,6 +801,10 @@ h1 { ...@@ -743,6 +801,10 @@ h1 {
padding: 24px 20px 30px; padding: 24px 20px 30px;
} }
.modal .modal-content .modal-body.height100 {
height: 100vh;
}
.modal .modal-content .modal-body.Addcont { .modal .modal-content .modal-body.Addcont {
padding: 48px 48px 10px; padding: 48px 48px 10px;
} }
...@@ -801,6 +863,35 @@ h1 { ...@@ -801,6 +863,35 @@ h1 {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
article .welcome-topic .welcome-pic {
width: 100%;
margin-top: 35px;
}
.search-group {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.search-group .input {
width: 100%;
}
.search-group .dropdown-group {
width: 100%;
}
.search-group .dropdown-group .dropdown {
width: 100%;
}
.search-group .dropdown-group .dropdown .dropdown-toggle {
width: 100%;
margin-bottom: 8px;
margin-top: 8px;
}
.search-group .btn-wt.blue {
width: 100%;
margin-bottom: 8px;
height: 48px;
}
.phone-show { .phone-show {
display: inline-block; display: inline-block;
} }
...@@ -1060,7 +1151,7 @@ h1 { ...@@ -1060,7 +1151,7 @@ h1 {
height: 64px; height: 64px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.modal .modal-content.ItemsIcon .modal-body .phoneItem ul.item-list .items:hover { .modal .modal-content.ItemsIcon .modal-body .phoneItem ul.item-list .items:hover, .modal .modal-content.ItemsIcon .modal-body .phoneItem ul.item-list .items.active {
text-decoration: none; text-decoration: none;
background-image: url(../images/icon/icon-bg.png); background-image: url(../images/icon/icon-bg.png);
background-repeat: none; background-repeat: none;
......
images/icon/icon-add.svg 0 → 100644
View file @ 2d24a72f
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20 11h-7V4h-2v7H4v2h7v7h2v-7h7z" fill="#FFF" fill-rule="evenodd"/>
</svg>
images/icon/icon-search.svg 0 → 100644
View file @ 2d24a72f
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M4 10c0-3.308 2.692-6 6-6 3.309 0 6 2.692 6 6 0 3.309-2.691 6-6 6-3.308 0-6-2.691-6-6m17.707 10.293L16.314 14.9A7.955 7.955 0 0 0 18 10a8 8 0 1 0-8 8 7.955 7.955 0 0 0 4.9-1.686l5.393 5.393A.995.995 0 0 0 21 22a1 1 0 0 0 .707-1.707" fill="#FFF" fill-rule="evenodd"/>
</svg>
login.html 0 → 100644
View file @ 2d24a72f
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>訂閱管理後台</title>
<!--共用css-->
<link rel="stylesheet" type="text/css" href="libary/bootstrap-4.5.0-dist/css/bootstrap.min.css">
<link rel="preconnect" type="text/css" href="https://fonts.gstatic.com">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap">
<link rel="stylesheet" type="text/css" href="libary/fontawesome-free-5.13.0-web/css/all.css">
<link rel="stylesheet" type="text/css" href="libary/slick-1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="libary/slick-1.8.1/slick/slick-theme.css" />
<!-- <link rel="stylesheet" type="text/css" href="css/style.min.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css" >
<!-- <link rel="stylesheet" type="text/css" href="css/adminSchool.css">
<link rel="stylesheet" type="text/css" href="css/adminSystemAdv.css"> -->
</head>
<body>
<div class="loginBG">
<div class="container m-5">
<div class="row login-area">
<div class="col-lg-7 col-md-6 col-sm-6 col-12 login-title">
<img src="images/pic-login.png" class="img-fluid">
</div>
<div class="col-lg-5 col-md-6 col-sm-6 col-12">
<form>
<div class="login-title">
<img src="images/logo.svg" class="img-fluid">
<div class="topic">訂閱管理後台</div>
</div>
<div class="form-group row">
<label class="col-3">帳號</label>
<input type="text" class="form-control login col-8" name="systemAdminAccount" value="">
<span class="small form-text text-danger w-100 text-center">密碼錯誤。</span>
</div>
<div class="form-group row">
<label class="col-3">密碼</label>
<input type="text" class="form-control login col-8" name="systemAdminAccount" value="">
<span class="small form-text text-danger w-100 text-center">新密碼與下列不同。</span>
</div>
<div class="d-flex justify-content-center mt-3">
<button type="button" class="btn btn-wt mr-3" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-wt blue" onclick="window.location.href='welcome.html'">確認</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- ********************* Modal ********************* -->
<!-- 修改密碼 -->
<div class="modal fade" id="confirmBackToCalendarMgnt" tabindex="-1" aria-labelledby="confirmBackToStudentMgnt" aria-hidden="true">
<div class="modal-dialog changecode modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="topic">修改密碼</label>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body password">
<form>
<div class="form-group row">
<label class="col-4">舊密碼</span>
<input type="text" class="form-control form-control-sm col-8" name="systemAdminAccount" value="">
<span class="small form-text text-danger w-100 text-center">密碼錯誤。</span>
</div>
<div class="form-group row">
<label class="col-4">新密碼</span>
<input type="text" class="form-control form-control-sm col-8" name="systemAdminAccount" value="">
<span class="small form-text text-danger w-100 text-center">新密碼與下列不同。</span>
</div>
<div class="form-group row">
<label class="col-4">確認密碼</span>
<input type="text" class="form-control form-control-sm col-8" name="systemAdminAccount" value="">
<span class="small form-text text-danger w-100 text-center">新密碼與上列不同。</span>
</div>
<div class="d-flex justify-content-center mt-5">
<button type="button" class="btn btn-wt mr-3" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-wt blue" onclick="window.location.href='index.html'">確認</button>
</div>
<!-- <div class="message-group">
<label>舊密碼</label>
<div class="col-12 col-noPadding text-center">
<p>是否返回？</p>
<div class="submitBlock">
<div class="d-flex justify-content-around">
<button type="button" class="btn btn-wt" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-wt blue" onclick="window.location.href='">確認</button>
</div>
</div>
</div>
</div> -->
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- /修改密碼 -->
<!-- js files -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="libary/bootstrap-4.5.0-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="libary/slick-1.8.1/slick/slick.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
\ No newline at end of file
welcome.html 0 → 100644
View file @ 2d24a72f
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment