Skip to content

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

調整下拉使選單、 

新增錯誤訊息提醒文字
parent 578cec64
Expand all Show whitespace changes
Inline Side-by-side
Showing with 243 additions and 39 deletions
css/style.css
View file @ ffbfd25c
......@@ -264,6 +264,24 @@ ul {
border-radius: 0;
}
.custom-select.blue {
height: 48px;
border: 1px solid #35a9e1;
border-radius: 2px;
padding: 0 10px;
font-size: 16px;
line-height: 32px;
color: #35a9e1;
width: 72px;
background: #fff url(../images/icon/icon_selectBG.gif) no-repeat right;
margin-right: 14px;
}
.custom-select.blue .items {
color: #35a9e1;
height: 48px !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: #35a9e1 !important;
......@@ -305,11 +323,14 @@ label.btn input[type="radio"].with-gap:checked + label:after {
}
.table.table-hrm td {
padding: 8px 16px;
vertical-align: middle;
line-height: 1.6;
}
.table.table-hrm td.pic {
padding: 8px 16px;
}
.table.table-bordered {
border: 1px solid #fff;
}
......@@ -863,10 +884,31 @@ h1 {
}
@media (max-width: 768px) {
article {
width: 88%;
float: left;
margin-left: 25px;
margin-right: 20px;
padding-top: 50px;
}
article .tab-cont {
padding: 0px;
}
article .tab-cont .tab-pane {
padding: 0 20px;
}
article .welcome-topic .welcome-pic {
width: 100%;
margin-top: 35px;
}
.custom-select {
width: 100% !important;
margin-bottom: 8px;
margin-top: 8px;
}
.custom-select.blue {
margin-right: 0px !important;
}
.search-group {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
......@@ -893,10 +935,19 @@ h1 {
height: 48px;
}
.phone-show {
display: inline-block;
display: inline-block !important;
}
.phone-row {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
}
.NB-show {
display: none;
display: none !important;
}
.pagination {
-webkit-box-pack: center;
......@@ -913,6 +964,9 @@ h1 {
.table.table-hrm td, .table.table-hrm th {
border: #3e697d 0px solid;
}
.table.table-hrm td.pic, .table.table-hrm th.pic {
padding: 0px;
}
.table-rwd {
min-width: 100%;
}
......@@ -1055,13 +1109,6 @@ h1 {
#products {
padding-top: 0;
}
article {
float: left;
width: 85%;
margin-left: 8%;
margin-right: 7%;
padding-top: 50px;
}
.modal.modal-backdrop.ItemsIcon.fade {
opacity: 0;
}
......
css/style.css.map
View file @ ffbfd25c
This diff is collapsed.
css/style.scss
View file @ ffbfd25c
......@@ -15,6 +15,10 @@ body {
padding: 0;
}
button {
outline: none;
}
.row,
.col {
margin: 0;
......@@ -167,6 +171,17 @@ ul {
}
}
&.bt48 {
height: 48px;background-color: #35a9e1;
color: #fff;
outline: none;
// border-radius: 0px;
&:hover {
background-color: #5dbae7;
outline: none;
}
}
// &.nopic {
// padding: 6px 30px;
// }
......@@ -217,6 +232,9 @@ ul {
display: block;
}
}
.form-group {
margin-bottom: 32px;
}
}
......@@ -340,6 +358,25 @@ ul {
.custom-select {
border: 1px solid #0e435d;
border-radius: 0;
&.blue {
height: 48px;
border: 1px solid #35a9e1;
border-radius: 2px;
padding: 0 10px;
font-size: 16px;
line-height: 32px;
color: #35a9e1;
width: 72px;
background: #fff url(../images/icon/icon_selectBG.gif) no-repeat right;
margin-right: 14px;
.items {
color: #35a9e1;
// background-color: #35a9e1;
height: 48px!important;
}
}
}
.custom-control-input:checked ~ .custom-control-label::before {
......@@ -368,12 +405,20 @@ label.btn input[type="radio"].with-gap:checked + label:after {
}
th {
padding: 15px;
min-width: 75px;
&.twoword {
min-width: 85px;
}
&.fourword {
min-width: 135px;
}
}
td {
padding: 8px 16px;
vertical-align: middle;
line-height: 1.6;
&.pic {
padding: 8px 16px;
}
}
}
......@@ -415,7 +460,7 @@ label.btn input[type="radio"].with-gap:checked + label:after {
margin-top: 65px;
.pren, .pren:hover {
display: inline-block;
// display: inline-block;
vertical-align: middle;
border: 0;
width: 24px;
......@@ -423,15 +468,19 @@ label.btn input[type="radio"].with-gap:checked + label:after {
background-image: url("../images/icon/icon-pren.svg");
background-repeat: none;
background-position: center;
cursor: pointer;
// cursor: pointer;
text-decoration: none;
&.active, &.active:hover {
background-image: url("../images/icon/icon-pren2.svg");
cursor: pointer;
}
&.all, &.all:hover {
background-image: url("../images/icon/icon-front.svg");
// cursor: pointer;
}
&.all.active, &.all.active:hover {
background-image: url("../images/icon/icon-front2.svg");
cursor: pointer;
}
}
......@@ -444,15 +493,18 @@ label.btn input[type="radio"].with-gap:checked + label:after {
background-image: url("../images/icon/icon-next.svg");
background-repeat: none;
background-position: center;
cursor: pointer;
// cursor: pointer;
&.active, &.active:hover {
background-image: url("../images/icon/icon-next2.svg");
cursor: pointer;
}
&.all, &.all:hover {
background-image: url("../images/icon/icon-end.svg");
// cursor: pointer;
}
&.all.active, &.all.active:hover {
background-image: url("../images/icon/icon-end2.svg");
cursor: pointer;
}
}
......@@ -472,18 +524,21 @@ label.btn input[type="radio"].with-gap:checked + label:after {
text-align: center;
background-color: #fff;
color: #35a9e1;
cursor: pointer;
text-decoration: none;
&.active {
background-color: #35a9e1;
color: #fff;
cursor: pointer;
}
}
.page-total {
margin-right: 14px;
font-size: 16px;
color: #525252;
line-height: 24px;
}
// .page-total {
// margin-right: 14px;
// font-size: 16px;
// color: #525252;
// line-height: 24px;
// }
}
......@@ -557,6 +612,7 @@ aside {
background-image: url(../images/icon/icon-nav.svg);
width: 45px;
height: 45px;
outline: none;
}
nav {
display: block;
......@@ -588,7 +644,7 @@ aside {
height: 64px;
margin-bottom: 5px;
}
&:hover {
&:hover, &.active {
// background-color: rgba(#fff, .5);
// border-radius: 50%;
// position: absolute;
......@@ -643,6 +699,10 @@ header {
justify-content: end;
align-items: center;
// display: none;
.btn-wt {
outline: none;
}
}
.login-cont {
......@@ -717,6 +777,7 @@ article {
// border-top-right-radius: 8px;
// border-color: #bfbfbf #bfbfbf #fff;
border-color: #86a1ae #86a1ae #fff;
border-bottom: 2px solid #86a1ae;
.nav-link:hover .line{
border-bottom: #2bb5c1 2px solid;
padding-bottom: 3px;
......@@ -741,6 +802,20 @@ article {
}
}
.welcome-topic {
font-size: 24px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 98px;
.welcome-pic {
max-width: 480px;
margin-top: 85px;
}
}
}
// nav {
......@@ -852,6 +927,7 @@ h1 {
color: #fff;
font-size: 1.5rem;
opacity: 1;
outline: none;
&.whitebg {
color: #0e435d!important;
font-weight: 900;
......@@ -873,6 +949,9 @@ h1 {
&.checkcont {
padding: 24px 20px 30px;
}
&.height100{
height: 100vh;
}
&.Addcont {
padding: 48px 48px 10px;
}
......@@ -921,13 +1000,69 @@ h1 {
}
@media (max-width: 768px) {
article {
width: 88%;
float: left;
margin-left: 25px;
margin-right: 20px;
padding-top: 50px;
.tab-cont {
padding: 0px;
.tab-pane {
padding: 0 20px;
}
}
.welcome-topic {
.welcome-pic {
width: 100%;
margin-top: 35px;
}
}
}
.custom-select {
width: 100%!important;
margin-bottom: 8px;
margin-top: 8px;
&.blue {
margin-right: 0px!important;
}
}
.search-group {
flex-direction: column;
.input {
width: 100%;
}
.dropdown-group {
width: 100%;
.dropdown {
width: 100%;
.dropdown-toggle {
width: 100%;
margin-bottom: 8px;
margin-top: 8px;
}
}
}
.btn-wt.blue {
width: 100%;
margin-bottom: 8px;
height: 48px;
}
}
.phone-show {
display: inline-block;
display: inline-block!important;
}
.phone-row {
display: flex!important;
flex-direction: row!important;
}
.NB-show {
display: none;
display: none!important;
}
.pagination {
......@@ -942,6 +1077,9 @@ h1 {
td, th {
border: #3e697d 0px solid;
&.pic {
padding: 0px;
}
}
}
}
......@@ -994,9 +1132,11 @@ h1 {
padding-top: 15px;
color: #35a9e1;
text-align: center !important;
}
}
......@@ -1178,13 +1318,7 @@ h1 {
#products {
padding-top: 0;
}
article {
float: left;
width: 85%;
margin-left: 8%;
margin-right: 7%;
padding-top: 50px;
}
.modal {
&.modal-backdrop.ItemsIcon.fade {
opacity: 0;
......@@ -1265,7 +1399,7 @@ h1 {
height: 64px;
margin-bottom: 5px;
}
&:hover {
&:hover, &.active {
// background-color: rgba(#fff, .5);
// border-radius: 50%;
// position: absolute;
......@@ -1302,3 +1436,9 @@ h1 {
index.html
View file @ ffbfd25c
......@@ -108,7 +108,14 @@
<div class="tab-pane fade show active" id="adminMeb" role="tabpanel" aria-labelledby="adminMeb-tab">
<div class="search-group">
<input type="text" class="input" placeholder="請輸入關鍵字">
<div class="dropdown-group">
<div class="form-group row">
<select name="select" class="custom-select blue">
<option class="itmes" seleted>全部</option>
<option class="itmes" value="帳號">帳號</option>
<option class="itmes" value="姓名">姓名</option>
</select>
</div>
<!-- <div class="dropdown-group">
<div class="dropdown dropdown-status">
<button type="button" class="btn dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">全部</button>
......@@ -118,7 +125,7 @@
<a class="dropdown-item" href="#">姓名</a>
</div>
</div>
</div>
</div> -->
<button type="button" class="btn-wt blue mr-auto"><img src="images/icon/icon-search.svg">搜尋</button>
<button type="button" class="btn-wt blue" data-toggle="modal"
data-target="#addAdminCount"><img src="images/icon/icon-add.svg">新增帳號</button>
......@@ -784,18 +791,22 @@
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">姓名</label>
<input type="text" class="form-control form-control-sm col-lg-9 col-sm-8 col-12 ">
<span class="small form-text text-danger w-100 text-center">錯誤訊息</span>
</div>
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">帳號</label>
<input type="text" class="form-control form-control-sm col-lg-9 col-sm-8 col-12 ">
<span class="small form-text text-danger w-100 text-center">錯誤訊息</span>
</div>
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">輸入密碼</label>
<input type="text" class="form-control form-control-sm col-lg-9 col-sm-8 col-12 ">
<span class="small form-text text-danger w-100 text-center">與下面密碼不同</span>
</div>
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">確認密碼</label>
<input type="text" class="form-control form-control-sm col-lg-9 col-sm-8 col-12 ">
<span class="small form-text text-danger w-100 text-center">與上面密碼不同</span>
</div>
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">角色</label>
......@@ -966,6 +977,7 @@
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">姓名</label>
<input type="text" class="form-control form-control-sm col-lg-9 col-sm-8 col-12" placeholder="管理員">
<span class="small form-text text-danger w-100 text-center">輸入錯誤</span>
</div>
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">帳號</label>
......@@ -974,14 +986,17 @@
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">舊密碼</label>
<input type="password" class="form-control form-control-sm col-lg-9 col-sm-8 col-12" placeholder="******">
<span class="small form-text text-danger w-100 text-center">輸入錯誤</span>
</div>
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">新密碼</label>
<input type="password" class="form-control form-control-sm col-lg-9 col-sm-8 col-12" placeholder="******">
<span class="small form-text text-danger w-100 text-center">與下面密碼不同</span>
</div>
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">確認密碼</label>
<input type="password" class="form-control form-control-sm col-lg-9 col-sm-8 col-12" placeholder="******">
<span class="small form-text text-danger w-100 text-center">與上面密碼不同</span>
</div>
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">角色</label>
......@@ -1128,7 +1143,7 @@
</div>
</div>
</div>
<!--新增管理員帳號 -->
<!--修改管理員帳號 -->
......@@ -1149,6 +1164,7 @@
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">角色名稱</label>
<input type="text" class="form-control form-control-sm col-lg-9 col-sm-8 col-12 ">
<span class="small form-text text-danger w-100 text-center">錯誤訊息</span>
</div>
<div class="form-group row">
......@@ -1232,6 +1248,7 @@
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">角色名稱</label>
<input type="text" class="form-control form-control-sm col-lg-9 col-sm-8 col-12" placeholder="一般班管理員">
<span class="small form-text text-danger w-100 text-center">錯誤訊息</span>
</div>
<div class="form-group row">
......
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