<template>
|
<div>
|
<el-dialog
|
:visible.sync="dialogVisible"
|
:width="dialogWidth"
|
@close="closeDialog"
|
:lock-scroll="false"
|
>
|
<div class="subTitle msg-dialog-title">約訪通知</div>
|
<div class="send-msg-nav">
|
<div class="mdTxt">通知內容</div>
|
<div class="mdTxt text--primary text--underline">編輯</div>
|
</div>
|
|
<el-input
|
type="textarea"
|
:rows="9"
|
placeholder="約訪通知"
|
resize="none"
|
v-model="interviewTxt">
|
</el-input>
|
<div class="mdTxt mt-30 mb-10">預計約訪時段</div>
|
<div class="date-input">
|
2022/01/10 09:00
|
<i class="icon-calender icon"></i>
|
</div>
|
|
<div class="msg-dialog-btn">
|
<el-button>傳送</el-button>
|
</div>
|
|
</el-dialog>
|
</div>
|
</template>
|
<script lang="ts">
|
import { AppointmentLog } from '~/shared/models/appointment.model';
|
import { Vue, Component, Prop, PropSync, Emit } from 'nuxt-property-decorator';
|
import authService from '~/shared/services/auth.service';
|
|
@Component
|
export default class InterviewMsg extends Vue {
|
@PropSync('isVisible')
|
dialogVisible!: boolean;
|
|
@Prop({default:'90%'})
|
dialogWidth!:string;
|
|
@Emit('closeDialog')
|
closeDialog() {
|
return;
|
}
|
|
interviewTxt = "";
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.msg-dialog-title{
|
display: flex;
|
justify-content: center;
|
margin-bottom:30px;
|
color: $PRIMARY_BLACK;
|
}
|
.send-msg-nav{
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 10px;
|
color: $PRIMARY_BLACK;
|
}
|
.el-dialog{
|
width:90%
|
}
|
.el-textarea__inner{
|
font-size: 20px;
|
padding:10px;
|
text-align: justify;
|
font-weight: 500;
|
}
|
.msg-dialog-btn{
|
margin-top: 30px;
|
display: flex;
|
justify-content: center;
|
}
|
|
.date-input {
|
align-items : center;
|
background-color: #fff;
|
border : 1px solid #707070;
|
border-radius : 5px;
|
display : flex;
|
font-size : 20px;
|
height : 46px;
|
margin-bottom : 30px;
|
padding-left : 20px;
|
padding-right : 20px;
|
}
|
.icon {
|
color : $PRIMARY_RED;
|
display : flex;
|
flex : 1;
|
justify-content: flex-end;
|
}
|
|
</style>
|
