From a8b5f48e21a57e871cfb0ccf6eebbe7c36841c31 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期四, 13 一月 2022 10:05:59 +0800
Subject: [PATCH] update: TODO#134222 [小鈴鐺通知] 客戶/顧問的小鈴鐺通知前端畫面刻版
---
PAMapp/pages/notification/index.vue | 133 +++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 130 insertions(+), 3 deletions(-)
diff --git a/PAMapp/pages/notification/index.vue b/PAMapp/pages/notification/index.vue
index 6d66b10..d9f0140 100644
--- a/PAMapp/pages/notification/index.vue
+++ b/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>
\ No newline at end of file
+</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>
\ No newline at end of file
--
Gitblit v1.8.0