update: TODO#134222 [小鈴鐺通知] 客戶/顧問的小鈴鐺通知前端畫面刻版

Mila

2022-01-13 a8b5f48e21a57e871cfb0ccf6eebbe7c36841c31

 PAMapp/pages/notification/index.vue

@@ -1,5 +1,132 @@
<template>
    <div>通知功能
        <el-button @click="$router.push('/notification/detail')">通知細節</el-button>
    <div>
        <div class="text--right mb-10" @click="showNotificationHint = true">
            <i class="satisfaction-icon icon-edit"></i>
        </div>
        <div class="satisfaction-banner my-10 cursor--pointer" @click="$router.push('/satisfactionList')">
            <p class="satisfaction-text text--center">請填寫滿意度調查</p>
        </div>
        <el-row
            v-for="(item, index) in notificationList"
            :key="index"
            type="flex"
            justify="space-between"
            align="middle"
            class="notification-card"
        >
            <el-col class="unRead" :span="3"></el-col>
            <el-col :span="18">
                <p class="text">{{item.content}}</p>
            </el-col>
            <el-col :span="3" class="notification-period text--right">
                <div>
                    <UiDateFormat
                        class="date"
                        :date="item.date"
                        onlyShowSection="DAY" />
                </div>
                <div>
                    <UiDateFormat
                        class="time"
                        :date="item.date"
                        onlyShowSection="TIME" />
                </div>

            </el-col>
        </el-row>

        <PopUpFrame
             :isOpen.sync="showNotificationHint"
        >
            <div class="text--center mdTxt">
                <p class="mb-30">通知</p>
                <div class="mb-20 cursor--pointer">全部已讀</div>
                <div class="cursor--pointer">全部刪除</div>
                <div class="text--center mt-30">
                    <el-button
                        type="primary"
                        @click="showNotificationHint = false"
                    >確定</el-button>
                </div>
            </div>
        </PopUpFrame>
    </div>
</template>
</template>

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

@Component
export default class Notification extends Vue {
    showNotificationHint = false;

    notificationList = [
        {
            content: '系統停機公告：10/19(五)22:30至10/21(日)20:00進行系統更新',
            date: '2022-01-05T04:18:05.249Z'
        },
        {
            content: '系統停機公告：10/19(五)22:30至10/21(日)20:00進行系統更新',
            date: '2022-01-05T04:18:05.249Z'
        }
    ]
}
</script>

<style lang="scss" scoped>
    .satisfaction-banner {
        width: 100%;
        height: 60px;
        background-image: url('~/assets/images/satisfaction/satisfactionBtn_mob.svg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 10px;

        .satisfaction-text {
            @extend .mdTxt;
            @extend .text--PRIMARY_WHITE;
            line-height: 60px;
        }

        @include desktop {
            height: 110px;
            background-image: url('~/assets/images/satisfaction/satisfactionBtn_web.svg');

            .satisfaction-text {
                font-size: 24px;
                line-height: 110px;
            }
        }
    }

    .notification-card {
        padding: 10px;
        border-bottom: solid 1px #CCCCCC;

        .unRead {
            width: 10px;
            height: 10px;
            border-radius: 50px;
            background-color: $YELLOW;
        }

        .notification-period {
            color: #707070;
            .date {
                font-size: 10px;
                line-height: 12px;
            }
            .time {
                font-size: 12px;
                line-height: 14px;
            }
        }

    }

    .satisfaction-icon {
        font-size: 24px;
        @extend .cursor--pointer;
    }
</style>