merge 2207
This commit is contained in:
Your Name
@ -1,268 +1,195 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <v-btn :ripple="false" @click="dialog = !dialog">경고창</v-btn> -->
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
width="700"
|
||||
overlay-color="#000"
|
||||
overlay-opacity="0.8"
|
||||
>
|
||||
<v-dialog v-model="dialog" width="800" overlay-color="#000" overlay-opacity="0.8">
|
||||
<v-card>
|
||||
<v-toolbar
|
||||
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">{{ label }}</span>
|
||||
<a-button icon="close" type="text" @click="dialog = !dialog"></a-button>
|
||||
</v-card-title>
|
||||
<!-- <v-toolbar
|
||||
:color="isDarkMode ? '#2d3355' : '#3f4d7d'"
|
||||
class="py-4 pr-3 pl-5"
|
||||
height="auto"
|
||||
>
|
||||
<v-toolbar-title>{{ label }}</v-toolbar-title>
|
||||
<!-- <v-btn
|
||||
icon
|
||||
tile
|
||||
small
|
||||
:ripple="false"
|
||||
@click="dialog = !dialog"
|
||||
:style="{ backgroundColor: isDarkMode ? '#2d3355' : '#3f4d7d' }"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn> -->
|
||||
</v-toolbar>
|
||||
</v-toolbar> -->
|
||||
<!-- <v-card-title>
|
||||
일정 상세 내용
|
||||
</v-card-title> -->
|
||||
<!-- <template v-for="(item, index) in detailList"> -->
|
||||
<template>
|
||||
<div style="padding : 20px">
|
||||
<v-col :cols="12">
|
||||
<v-row>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<label class="search-box-label">
|
||||
<v-icon x-small color="#fb8200" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
일정 시작
|
||||
</label>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<!-- <DatePicker v-model="strtDt" :parentPrgmId="parentPrgmId"/> -->
|
||||
<div class="startpicker-container2">
|
||||
<v-text-field
|
||||
id="startpicker2"
|
||||
ref="startpicker2"
|
||||
v-model="strtDt"
|
||||
:class="'v-input__custom'"
|
||||
:hide-details="true"
|
||||
readonly
|
||||
outlined
|
||||
>
|
||||
<template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div
|
||||
ref="startpicker-container2"
|
||||
id="startpicker-container2"
|
||||
></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
<div class="pa-6 pt-0">
|
||||
<v-row no-gutters class="mb-4">
|
||||
<v-col :cols="12">
|
||||
<label class="search-box-label">
|
||||
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
||||
일정 시작
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-0 pr-2">
|
||||
<!-- <DatePicker v-model="strtDt" :parentPrgmId="parentPrgmId"/> -->
|
||||
<div class="startpicker-container2">
|
||||
<v-text-field id="startpicker2" ref="startpicker2" v-model="strtDt"
|
||||
:class="'v-input__custom'" :hide-details="true" readonly outlined>
|
||||
<template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div ref="startpicker-container2" id="startpicker-container2"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-0 pl-2">
|
||||
<!-- <DatePicker v-model="strtDt" :parentPrgmId="parentPrgmId"/> -->
|
||||
<div class="startpicker-container2">
|
||||
<v-text-field id="startpicker2" ref="startpicker2" v-model="strtDt"
|
||||
:class="'v-input__custom'" :hide-details="true" readonly outlined>
|
||||
<template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div ref="startpicker-container2" id="startpicker-container2"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</div>
|
||||
</v-col>
|
||||
<!-- <v-col :cols="2">
|
||||
<vue-numeric-input v-model="strtHh" :min="0" :max="23" controls-type="updown"
|
||||
class="v-input__slot" width="100%" align="center">
|
||||
</vue-numeric-input>
|
||||
</v-col>
|
||||
<v-col :cols="1" style="text-align: center;">
|
||||
:
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<vue-numeric-input v-model="strtMm" :min="0" :max="59" controls-type="updown"
|
||||
class="v-input__slot" width="100%" align="center">
|
||||
</vue-numeric-input>
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
<v-row no-gutters class="mb-4">
|
||||
<v-col :cols="12">
|
||||
<label class="search-box-label">
|
||||
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
||||
일정 종료
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="pr-2">
|
||||
<!-- <DatePicker v-model="endDt" :parentPrgmId="parentPrgmId"/> -->
|
||||
<div class="startpicker-container3">
|
||||
<v-text-field id="startpicker3" ref="startpicker3" v-model="endDt"
|
||||
:class="'v-input__custom'" :hide-details="true" readonly outlined>
|
||||
<template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div ref="startpicker-container3" id="startpicker-container3"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="pl-2">
|
||||
<div class="startpicker-container3">
|
||||
<v-text-field id="startpicker3" ref="startpicker3" v-model="endDt"
|
||||
:class="'v-input__custom'" :hide-details="true" readonly outlined>
|
||||
<template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div ref="startpicker-container3" id="startpicker-container3"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</div>
|
||||
</v-col>
|
||||
<!-- <v-col :cols="2">
|
||||
<vue-numeric-input v-model="endHh" :min="0" :max="23" controls-type="updown"
|
||||
class="v-input__slot" width="100%" align="center">
|
||||
</vue-numeric-input>
|
||||
</v-col>
|
||||
<v-col :cols="1" style="text-align: center;">
|
||||
:
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<vue-numeric-input v-model="endMm" :min="0" :max="59" controls-type="updown"
|
||||
class="v-input__slot" width="100%" align="center">
|
||||
</vue-numeric-input>
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
<v-row no-gutters class="mb-4">
|
||||
<v-col :cols="12">
|
||||
<label class="search-box-label">
|
||||
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
||||
일정 제목
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="12" class="py-0">
|
||||
<v-text-field v-model="planTitle" class="v-input__custom" outlined
|
||||
:hide-details="true"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters class="mb-4">
|
||||
<v-col :cols="12">
|
||||
<label class="search-box-label">
|
||||
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
||||
일정 상세 내용
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="12" class="py-0">
|
||||
<v-textarea v-model="planCntn" class="v-input__custom" outlined :hide-details="true"
|
||||
:maxlength="1000"></v-textarea>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters class="mb-4">
|
||||
<v-col :cols="12">
|
||||
<label class="search-box-label">
|
||||
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
||||
표시 색상
|
||||
</label>
|
||||
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
<div class="d-flex calendar-color" style="gap:16px">
|
||||
|
||||
<div id="redDiv" class="colPk redBg" @click="colorClick('red')">
|
||||
<div class="inner-color"></div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<vue-numeric-input
|
||||
v-model="strtHh"
|
||||
:min="0"
|
||||
:max="23"
|
||||
controls-type="updown"
|
||||
class="v-input__slot"
|
||||
width="100%"
|
||||
align="center"
|
||||
>
|
||||
</vue-numeric-input>
|
||||
</v-col>
|
||||
<v-col :cols="1" style="text-align: center;">
|
||||
:
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<vue-numeric-input
|
||||
v-model="strtMm"
|
||||
:min="0"
|
||||
:max="59"
|
||||
controls-type="updown"
|
||||
class="v-input__slot"
|
||||
width="100%"
|
||||
align="center"
|
||||
>
|
||||
</vue-numeric-input>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<label class="search-box-label">
|
||||
<v-icon x-small color="#fb8200" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
일정 종료
|
||||
</label>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<!-- <DatePicker v-model="endDt" :parentPrgmId="parentPrgmId"/> -->
|
||||
<div class="startpicker-container3">
|
||||
<v-text-field
|
||||
id="startpicker3"
|
||||
ref="startpicker3"
|
||||
v-model="endDt"
|
||||
:class="'v-input__custom'"
|
||||
:hide-details="true"
|
||||
readonly
|
||||
outlined
|
||||
>
|
||||
<template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div
|
||||
ref="startpicker-container3"
|
||||
id="startpicker-container3"
|
||||
></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
|
||||
<div id="blueDiv" class="colPk blueBg" @click="colorClick('blue')">
|
||||
<div class="inner-color"></div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<vue-numeric-input
|
||||
v-model="endHh"
|
||||
:min="0"
|
||||
:max="23"
|
||||
controls-type="updown"
|
||||
class="v-input__slot"
|
||||
width="100%"
|
||||
align="center"
|
||||
>
|
||||
</vue-numeric-input>
|
||||
</v-col>
|
||||
<v-col :cols="1" style="text-align: center;">
|
||||
:
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<vue-numeric-input
|
||||
v-model="endMm"
|
||||
:min="0"
|
||||
:max="59"
|
||||
controls-type="updown"
|
||||
class="v-input__slot"
|
||||
width="100%"
|
||||
align="center"
|
||||
>
|
||||
</vue-numeric-input>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<label class="search-box-label">
|
||||
<v-icon x-small color="#fb8200" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
일정 제목
|
||||
</label>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="9">
|
||||
<v-text-field
|
||||
v-model="planTitle"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<label class="search-box-label">
|
||||
<v-icon x-small color="#fb8200" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
일정 상세 내용
|
||||
</label>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="9">
|
||||
<v-textarea
|
||||
v-model="planCntn"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:maxlength="1000"
|
||||
></v-textarea>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-icon x-small color="#fb8200" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
표시 색상
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="redDiv"
|
||||
class="colPk redBg"
|
||||
@click="colorClick('red')"
|
||||
></div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="blueDiv"
|
||||
class="colPk blueBg"
|
||||
@click="colorClick('blue')"
|
||||
></div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="pupleDiv"
|
||||
class="colPk pupleBg"
|
||||
@click="colorClick('puple')"
|
||||
></div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="greenDiv"
|
||||
class="colPk greenBg"
|
||||
@click="colorClick('green')"
|
||||
></div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="orangeDiv"
|
||||
class="colPk orangeBg"
|
||||
@click="colorClick('orange')"
|
||||
></div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="pinkDiv"
|
||||
class="colPk pinkBg"
|
||||
@click="colorClick('pink')"
|
||||
></div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
|
||||
<div id="pupleDiv" class="colPk pupleBg" @click="colorClick('puple')">
|
||||
<div class="inner-color"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="greenDiv" class="colPk greenBg" @click="colorClick('green')">
|
||||
<div class="inner-color"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="orangeDiv" class="colPk orangeBg" @click="colorClick('orange')">
|
||||
<div class="inner-color"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="pinkDiv" class="colPk pinkBg" @click="colorClick('pink')">
|
||||
<div class="inner-color"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
<v-card-actions class="justify-end">
|
||||
<v-btn :ripple="false" @click="btnAction('save')">저장</v-btn>
|
||||
<v-btn
|
||||
v-show="popUpAction === 'update'"
|
||||
:ripple="false"
|
||||
@click="btnAction('delete')"
|
||||
>삭제</v-btn
|
||||
>
|
||||
<v-btn :ripple="false" @click="btnAction('close')">닫기</v-btn>
|
||||
<a-button :ripple="false" @click="btnAction('save')" class="mr-2">저장</a-button>
|
||||
<a-button v-show="popUpAction === 'update'" type="danger" ghost danger :ripple="false"
|
||||
@click="btnAction('delete')" class="mr-2">삭제</a-button>
|
||||
<a-button :ripple="false" type="primary" @click="btnAction('close')" class="mr-2">닫기</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -335,8 +262,8 @@ export default {
|
||||
strtMm: 0,
|
||||
endHh: 1,
|
||||
endMm: 0,
|
||||
strtDt:null,
|
||||
endDt:null,
|
||||
strtDt: null,
|
||||
endDt: null,
|
||||
// strtDt: new Date().toISOString().substr(0, 10),
|
||||
// endDt: new Date().toISOString().substr(0, 10),
|
||||
planColor: '',
|
||||
@ -344,7 +271,7 @@ export default {
|
||||
startDatepickerInstance3: null,
|
||||
planSeq: '',
|
||||
blocId: '',
|
||||
addPlanData:{
|
||||
addPlanData: {
|
||||
}
|
||||
};
|
||||
},
|
||||
@ -364,21 +291,21 @@ export default {
|
||||
if (val) {
|
||||
this.openDialog();
|
||||
|
||||
this.$nextTick(() => {});
|
||||
this.$nextTick(() => { });
|
||||
} else {
|
||||
}
|
||||
},
|
||||
strtDt(val){
|
||||
strtDt(val) {
|
||||
console.log('strtDt : ', val);
|
||||
this.checkStrtAndEndDateTime('start');
|
||||
if(this.startDatepickerInstance3){
|
||||
if (this.startDatepickerInstance3) {
|
||||
this.startDatepickerInstance3.setDate(new Date(this.endDt));
|
||||
}
|
||||
},
|
||||
endDt(val){
|
||||
endDt(val) {
|
||||
console.log('endDt : ', val);
|
||||
this.checkStrtAndEndDateTime('end');
|
||||
if(this.startDatepickerInstance){
|
||||
if (this.startDatepickerInstance) {
|
||||
this.startDatepickerInstance.setDate(new Date(this.strtDt));
|
||||
}
|
||||
},
|
||||
@ -405,18 +332,18 @@ export default {
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
getDomain: 'modules/list/getDomain',
|
||||
}),
|
||||
async checkStrtAndEndDateTime(startEndFlag){
|
||||
async checkStrtAndEndDateTime(startEndFlag) {
|
||||
var startDateTime = this.strtDt + ' ' + this.strtHh + ':' + this.strtMm;
|
||||
var endDateTime = this.endDt + ' ' + this.endHh + ':' + this.endMm;
|
||||
|
||||
startDateTime = new Date(startDateTime);
|
||||
endDateTime = new Date(endDateTime);
|
||||
|
||||
if(startDateTime > endDateTime){
|
||||
if(startEndFlag == 'start'){ // 시작 부분이 변경됨 -> 끝 부분 값을 변경
|
||||
if (startDateTime > endDateTime) {
|
||||
if (startEndFlag == 'start') { // 시작 부분이 변경됨 -> 끝 부분 값을 변경
|
||||
this.endDt = this.convertDateToString(new Date(new Date().setDate(new Date(this.strtDt).getDate() + 1)));
|
||||
this.startDatepickerInstance3.setDate(new Date(this.endDt));
|
||||
}else if(startEndFlag == 'end'){ // 끝 부분이 변경됨 -> 시작 부분 값을 변경
|
||||
} else if (startEndFlag == 'end') { // 끝 부분이 변경됨 -> 시작 부분 값을 변경
|
||||
this.strtDt = this.convertDateToString(new Date(new Date().setDate(new Date(this.endDt).getDate() - 1)));
|
||||
this.startDatepickerInstance.setDate(new Date(this.strtDt));
|
||||
}
|
||||
@ -432,17 +359,17 @@ export default {
|
||||
var dt1 = new Date();
|
||||
var dt2 = new Date();
|
||||
|
||||
if(this.strtDt){
|
||||
if (this.strtDt) {
|
||||
dt1 = this.strtDt;
|
||||
}
|
||||
|
||||
if(this.endDt){
|
||||
if (this.endDt) {
|
||||
dt2 = this.endDt;
|
||||
}
|
||||
|
||||
this.startDatepickerInstance = new TuiDatepicker(startContainer, {
|
||||
// date: new Date(),
|
||||
date : dt1,
|
||||
date: dt1,
|
||||
language: 'ko',
|
||||
type: 'date',
|
||||
input: {
|
||||
@ -455,7 +382,7 @@ export default {
|
||||
|
||||
this.startDatepickerInstance3 = new TuiDatepicker(startContainer3, {
|
||||
// date: new Date(),
|
||||
date : dt2,
|
||||
date: dt2,
|
||||
language: 'ko',
|
||||
type: 'date',
|
||||
input: {
|
||||
@ -492,8 +419,8 @@ export default {
|
||||
this.endDt = this.convertDateToString(dt);
|
||||
this.startDatepickerInstance3.setDate(new Date(this.endDt));
|
||||
},
|
||||
convertDateToString(dt){
|
||||
return dt.getFullYear() + '-' + String(dt.getMonth()+1).padStart(2, '0') + '-' + String(dt.getDate()).padStart(2, '0');
|
||||
convertDateToString(dt) {
|
||||
return dt.getFullYear() + '-' + String(dt.getMonth() + 1).padStart(2, '0') + '-' + String(dt.getDate()).padStart(2, '0');
|
||||
},
|
||||
convertStringToDateFormat(val) {
|
||||
var result = '';
|
||||
@ -526,7 +453,7 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
async insertPlanData(){
|
||||
async insertPlanData() {
|
||||
var year = this.addPlanData.year;
|
||||
var month = this.addPlanData.month;
|
||||
var day = this.addPlanData.day;
|
||||
@ -562,8 +489,8 @@ export default {
|
||||
// this.strtDt = Utility.setFormatDate(this.strtDt, 'YYYY-MM-DD');
|
||||
// this.endDt = Utility.setFormatDate(this.endDt, 'YYYY-MM-DD');
|
||||
|
||||
this.strtDt = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
|
||||
this.endDt = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
|
||||
this.strtDt = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
|
||||
this.endDt = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
|
||||
},
|
||||
async getPlanData() {
|
||||
let res = await this.postApiReturn({
|
||||
@ -786,100 +713,116 @@ export default {
|
||||
.v-card__actions {
|
||||
padding-bottom: 30px !important;
|
||||
}
|
||||
|
||||
.inner-color {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.colPk {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
border-radius: 5px 5px;
|
||||
border-radius: 6px 6px;
|
||||
cursor: pointer;
|
||||
padding: 4px
|
||||
}
|
||||
|
||||
.colPkSelect {
|
||||
border: 2px solid;
|
||||
border: 1px solid #00000073;
|
||||
}
|
||||
.redBg {
|
||||
|
||||
.redBg .inner-color {
|
||||
background-color: rgba(229, 62, 62, var(--bg-opacity));
|
||||
background-color: #e53e3e;
|
||||
background-color: #FF4D4F;
|
||||
}
|
||||
.blueBg {
|
||||
|
||||
.blueBg .inner-color {
|
||||
background-color: rgba(66, 153, 225, var(--bg-opacity));
|
||||
background-color: #4299e1;
|
||||
background-color: #597EF7;
|
||||
}
|
||||
.pupleBg {
|
||||
|
||||
.pupleBg .inner-color {
|
||||
background-color: rgba(102, 126, 234, var(--bg-opacity));
|
||||
background-color: #667eea;
|
||||
background-color: #9254DE;
|
||||
}
|
||||
.greenBg {
|
||||
|
||||
.greenBg .inner-color {
|
||||
background-color: rgba(56, 178, 172, var(--bg-opacity));
|
||||
background-color: #38b2ac;
|
||||
background-color: #73D13D;
|
||||
}
|
||||
.orangeBg {
|
||||
|
||||
.orangeBg .inner-color {
|
||||
background-color: rgba(237, 137, 54, var(--bg-opacity));
|
||||
background-color: #ed8936;
|
||||
background-color: #FFA940;
|
||||
}
|
||||
.pinkBg {
|
||||
|
||||
.pinkBg .inner-color {
|
||||
background-color: rgba(237, 100, 166, var(--bg-opacity));
|
||||
background-color: #ed64a6;
|
||||
background-color: #F759AB;
|
||||
}
|
||||
}
|
||||
|
||||
.startpicker-container2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.v-input {
|
||||
.v-input__append-outer {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
|
||||
#startpicker-container2,
|
||||
#endpicker-container2 {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.startpicker-container3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.v-input {
|
||||
.v-input__append-outer {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
|
||||
#startpicker-container3,
|
||||
#endpicker-container3 {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__custom {
|
||||
flex: 0 0 auto;
|
||||
|
||||
|
||||
&.half {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.tui-timepicker-row {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: #edf4fc;
|
||||
|
||||
.tui-timepicker-column.tui-timepicker-colon {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.startpicker-container2 {
|
||||
position: relative;
|
||||
|
||||
.v-input {
|
||||
.v-input__append-outer {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
|
||||
#startpicker-container2,
|
||||
#endpicker-container2 {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.startpicker-container3 {
|
||||
position: relative;
|
||||
|
||||
.v-input {
|
||||
.v-input__append-outer {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
|
||||
#startpicker-container3,
|
||||
#endpicker-container3 {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user