<template>
|
<div class="remind-card">
|
<div class="remind-card-header">
|
<div class="mdTxt text--black">即將約訪排程</div>
|
<div class="smTxt_bold text--primary sub-title cursor--pointer" @click="toAgendaPage">查看全部</div>
|
</div>
|
<div class="remind-container">
|
<div class="remind-content">
|
<div class="remind-first-line mr-10">
|
<div class="txt-margin">2021</div>
|
<div>12/25</div>
|
</div>
|
<div class="remind-content-txt">
|
<div class="txt-margin">09:00</div>
|
<div>約訪林志零</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop, Emit, Action, State, namespace } from 'nuxt-property-decorator';
|
|
@Component
|
export default class ConsultantAppointmentRemind extends Vue {
|
|
toAgendaPage(){
|
this.$router.push('/appointmentAgenda')
|
}
|
//////////////////////////////////////////////////////////////////////
|
}
|
</script>
|
<style lang="scss" scoped>
|
.remind-card{
|
display: flex;
|
flex-direction:column;
|
justify-content: center;
|
border: 1px solid #CCCCCC;
|
height: 131px;
|
padding: 10px 20px;
|
background-color: #fff;
|
.remind-card-header{
|
display: flex;
|
justify-content: space-between;
|
align-items: baseline;
|
.sub-title{
|
border-bottom: 1px solid $PRIMARY_RED;
|
}
|
}
|
.remind-container{
|
margin-top: 13px;
|
border: 1px solid #CCCCCC;
|
height: 61px;
|
border-radius: 5px;
|
margin-bottom: 20px;
|
.remind-content{
|
display: flex;
|
padding: 13px 10px;
|
.remind-first-line{
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
.remind-content-txt{
|
display: flex;
|
flex-direction: column;
|
}
|
.txt-margin{
|
margin-bottom: 3px;
|
}
|
</style>
|
