1
0
Fork 0

style: tab menu 디자인 변경

This commit is contained in:
sychoi 2024-04-29 09:39:06 +09:00
parent 07a9a4bd79
commit b85b1801c1
5 changed files with 39 additions and 16 deletions

View File

@ -29,10 +29,12 @@ form {
border-bottom: none;
border-radius: 5px 5px 0 0;
background: white;
color: $blue-005;
font-size: 13px;
font-weight: 600;
&:hover{
&:hover, &.on{
background: $blue-005;
color: white;
}
@ -79,7 +81,15 @@ form {
li{
border-radius: 50px;
border-bottom: solid 2px $blue-005;
border: solid 2px $blue-001;
&:hover{
background-color: $blue-001;
}
&.on{
background-color: $blue-001;
}
}
}
.table-title{

View File

@ -941,8 +941,9 @@ form[name=frmWorkData] > div.form-button-container .form-button-box button {
background: white;
color: #162788;
font-size: 13px;
font-weight: 600;
}
form[name=frmWorkData] > div.form-button-container .form-button-box button:hover {
form[name=frmWorkData] > div.form-button-container .form-button-box button:hover, form[name=frmWorkData] > div.form-button-container .form-button-box button.on {
background: #162788;
color: white;
}
@ -981,7 +982,13 @@ form[name=frmWorkData] > div.form-contents .detail-container .detail-contents .t
}
form[name=frmWorkData] > div.form-contents .detail-container .detail-contents .table-box .tab-menu li {
border-radius: 50px;
border-bottom: solid 2px #162788;
border: solid 2px #4A5ED2;
}
form[name=frmWorkData] > div.form-contents .detail-container .detail-contents .table-box .tab-menu li:hover {
background-color: #4A5ED2;
}
form[name=frmWorkData] > div.form-contents .detail-container .detail-contents .table-box .tab-menu li.on {
background-color: #4A5ED2;
}
form[name=frmWorkData] > div.form-contents .detail-container .detail-contents .table-box .table-title {
width: 99%;

File diff suppressed because one or more lines are too long

View File

@ -104,6 +104,14 @@ class FieldPop {
isInsp: true,
isFile: false
},
tabs1: ['과거불량이력 조회', '작업표준서 조회', '도면 조회'],
tabs2: ['설비 고장등록', '가동', '비가동'],
com2:['isFacltBreak','isRun','isNoRun'],
activeTab : '',
tableField : {
isWorker : [
@ -218,7 +226,9 @@ class FieldPop {
},
// 클릭시 컴포넌트 생성 및 삭제로 페이지 레이아웃 변경
showComponent(com) {
showComponent(com, tab) {
this.activeTab = tab;
Object.keys(this.isComponent).map((key)=>{
this.isComponent[key] = com == key ? true : false;
});

View File

@ -15,14 +15,10 @@ include_once "{$_SERVER['DOCUMENT_ROOT']}/common.inc.php";
<!-- form button-container -->
<div class="form-button-container flexrow flexcenter gap10">
<div class="form-button-box flexrow gap06">
<button class="form-button" type="button" @click="showDefect">과거불량이력 조회</button>
<button class="form-button" type="button" @click="showWrkDocs">작업표준서 조회</button>
<button class="form-button" type="button" @click="showDraw">도면 조회</button>
<button type="button" v-for="(tab, idx) in tabs1" :key="idx" :class="{ on : activeTab === tab}" @click="activeTab = tab" >{{ tab }}</button>
</div>
<div class="form-button-box flexrow gap06">
<button class="form-button" type="button" @click="showComponent('isFacltBreak')">설비 고장등록</button>
<button class="form-button run-btn" type="button" @click="showComponent('isRun')">가동</button>
<button class="form-button norun-btn" type="button" @click="showComponent('isNoRun')">비가동</button>
<button type="button" v-for="(tab, idx) in tabs2" :key="idx" :class="{ on : activeTab === tab }" @click="showComponent(com2[idx], tab)" >{{ tab }}</button>
</div>
</div>
@ -68,7 +64,7 @@ include_once "{$_SERVER['DOCUMENT_ROOT']}/common.inc.php";
<div class="input-container flexrow gap06">
<div class="input-box flex-1">
<label for="EMP_NO">작업자</label>
<input v-model="formData.EMP_NO" @click="showComponent('isWorker')" type="text" id="EMP_NO" name="EMP_NO"
<input v-model="formData.EMP_NO" @click="showComponent('isWorker')" :class="{on : isComponent['isWorker']}" type="text" id="EMP_NO" name="EMP_NO"
class="form-control form-control-sm" readonly />
</div>
<div class="input-box flex-1">
@ -81,7 +77,7 @@ include_once "{$_SERVER['DOCUMENT_ROOT']}/common.inc.php";
<div class="input-container flexrow gap06">
<div class="input-box flex-1">
<label for="WO_NO">설비</label>
<input v-model="formData.FACLT_CD" @click="showComponent('isFacility')" type="text" id="WO_NO" name="WO_NO"
<input v-model="formData.FACLT_CD" @click="showComponent('isFacility')" :class="{on : isComponent['isFacility']}" type="text" id="WO_NO" name="WO_NO"
class="form-control form-control-sm" readonly />
</div>
<div class="input-box flex-1">
@ -119,12 +115,12 @@ include_once "{$_SERVER['DOCUMENT_ROOT']}/common.inc.php";
<div class="input-container flexrow gap06">
<div class="input-box flex-1">
<label for="WO_NO">양품수량</label>
<input @click="showComponent('isProd')" type="text" id="WO_NO" name="WO_NO"
<input @click="showComponent('isProd')" :class="{on : isComponent['isProd']}" type="text" id="WO_NO" name="WO_NO"
class="form-control form-control-sm" readonly />
</div>
<div class="input-box flex-1">
<label for="">불량수량</label>
<input @click="showComponent('isDef')" type="text" id="" name="" class="form-control form-control-sm"
<input @click="showComponent('isDef')" :class="{on : isComponent['isDef']}" type="text" id="" name="" class="form-control form-control-sm"
readonly />
</div>
</div>