<template>
|
<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>
|
|
<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>
|
