Update todo#134166 新增編輯約訪記錄 -元件

HelenHuang

2022-01-12 d03577bc39bf2be866d4643933515caa4aa71ac8

Update todo#134166 新增編輯約訪記錄 -元件

 PAMapp/components/Appointment/AppointmentRecord.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,87 @@
<template>
    <div>
        <div class="record-page">
            <div class="record">
                <div class="mdTxt">約訪紀錄</div>
                <div class="mdTxt text--underline text--primary"
                @click="$router.push('/appointment/EditAppointmentRecord')">+新增</div>
            </div>

            <div class="record-card">
                <div class="record-card-date">
                    <span class="bold">01/10</span>
                    <span class="mt-5 line-space">09:00</span>
                </div>
                <div class="record-card-content">
                    <span>預計提醒客戶約在公司樓下咖啡廳，推薦熊安心醫療險與防疫保單</span>
                </div>
            </div>
        </div>

        <section>
            <div class="record-card">
                <div class="record-card-date">
                    <span class="bold">01/08</span>
                    <span class="mt-5 line-space">09:00</span>
                </div>
                <div class="record-card-content">
                    <span>王聰明回信提供電話號碼，去電推薦預約時間</span>
                </div>
            </div>
        </section>

        <section class="more-log-action">
                <div class="mdTxt text--primary text--underline">展開看更多</div>
        </section>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator';

@Component
export default class AppointmentRecord extends Vue {

}
</script>

<style lang="scss" scoped>
.record-page{
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 17px;
    margin-bottom: 17px;
    .record{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
}
.record-card{
        height: 62px;
        border: 1px solid #707070;
        border-radius: 5px;
        display: flex;
        border-bottom: 1px solid #000;
        .record-card-date{
            display: flex;
            flex-direction: column;
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 10px;
        }
        .record-card-content{
            height: 42px;
            margin-top: 10px;
            margin-right: 10px;
            line-height: 1.2;
        }
    }
.line-space{
    letter-spacing: 1px;
}
.more-log-action{
    margin-top: 30px;
    display: flex;
    justify-content:flex-end;
}
</style>