|
|
@@ -0,0 +1,206 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import NotificationCard from '@/views/SystemMessage/src/components/NotificationCard.vue'
|
|
|
+
|
|
|
+const drawerModel = defineModel('drawerModel', { type: Boolean, default: false })
|
|
|
+
|
|
|
+function confirmClick() {
|
|
|
+ ElMessageBox.confirm(`Are you confirm to chose ?`)
|
|
|
+ .then(() => {
|
|
|
+ drawerModel.value = false
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // catch error
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const notificationList = [
|
|
|
+ {
|
|
|
+ numericRecords: 3,
|
|
|
+ isRead: true,
|
|
|
+ title: 'Milestone Update',
|
|
|
+ mode: 'Ocean Freight',
|
|
|
+ no: 'HBOL: SHJN2301234',
|
|
|
+ tag: 'Booking Confirmed',
|
|
|
+ location: 'Hong Kong',
|
|
|
+ time: 'Jan 10, 2025 14:30 UTC+8'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ numericRecords: 0,
|
|
|
+ isRead: false,
|
|
|
+ title: 'Milestone Update Daily Summary (Jan 10, 2025)',
|
|
|
+ mode: 'Air Freight',
|
|
|
+ no: 'HBOL: SHJN2301234',
|
|
|
+ tag: 'Booking Confirmed',
|
|
|
+ location: 'Hong Kong',
|
|
|
+ time: 'Jan 10, 2025 14:30 UTC+8'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ numericRecords: 0,
|
|
|
+ isRead: false,
|
|
|
+ title: '',
|
|
|
+ mode: 'Air Freight',
|
|
|
+ no: 'HBOL: SHJN2301234',
|
|
|
+ tag: 'Booking Confirmed',
|
|
|
+ location: 'Hong Kong',
|
|
|
+ time: 'Jan 10, 2025 14:30 UTC+8',
|
|
|
+ previous: 'Previous: Departure from Shanghai (08:15 UTC+8)'
|
|
|
+ }
|
|
|
+]
|
|
|
+const data = {
|
|
|
+ title: 'Feature Update',
|
|
|
+ mode: 'Ocean Freight',
|
|
|
+ no: 'HBOL: SHJN2301234',
|
|
|
+ tag: 'Booking Confirmed',
|
|
|
+ location: 'Hong Kong',
|
|
|
+ time: 'Jan 10, 2025 14:30 UTC+8',
|
|
|
+ previous: 'Previous: Departure from Shanghai (08:15 UTC+8)'
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <el-drawer
|
|
|
+ class="notice-drawer"
|
|
|
+ :modal="false"
|
|
|
+ v-model="drawerModel"
|
|
|
+ direction="rtl"
|
|
|
+ size="432px"
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <el-select size="large" class="notification-type"> </el-select>
|
|
|
+ </template>
|
|
|
+ <template #default>
|
|
|
+ <div class="notification-header">
|
|
|
+ <div class="mark-all-read">
|
|
|
+ <span class="font_family icon-icon_confirm_b show-icon"></span>
|
|
|
+ <span>Mark all read</span>
|
|
|
+ </div>
|
|
|
+ <div class="view-all">
|
|
|
+ <span class="font_family icon-icon_confirm_b show-icon"></span>
|
|
|
+ <span>View all</span>
|
|
|
+ <span class="font_family icon-icon_administration_b setting"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="notification-content">
|
|
|
+ <NotificationCard
|
|
|
+ class="notification-item"
|
|
|
+ v-for="(item, index) in notificationList"
|
|
|
+ :key="index"
|
|
|
+ :data="item"
|
|
|
+ ></NotificationCard>
|
|
|
+ <div class="feature-update">
|
|
|
+ <div class="header" v-if="data.title">
|
|
|
+ <div class="status-icon"></div>
|
|
|
+ <div class="title">{{ data.title }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <div class="title">
|
|
|
+ <span class="font_family icon-icon_password_b"></span>
|
|
|
+ <span>Password Expiration in 7 Days</span>
|
|
|
+ </div>
|
|
|
+ <div class="details">
|
|
|
+ Your password will expire in 7 days. To ensure the security of your account, please
|
|
|
+ change your password as soon as possible.
|
|
|
+ </div>
|
|
|
+ <div class="change-btn" style="text-align: center">
|
|
|
+ <el-button class="el-button--main" style="height: 40px" @click="confirmClick">
|
|
|
+ <span class="font_family icon-icon_edit_b" style="margin-right: 4px"></span>
|
|
|
+ <span>Change Password</span></el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-drawer>
|
|
|
+</template>
|
|
|
+<style lang="scss" scoped>
|
|
|
+div.layout-toolbar {
|
|
|
+ .notification-content {
|
|
|
+ padding: 16px;
|
|
|
+ .notification-item {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .feature-update {
|
|
|
+ .header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ .status-icon {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: var(--color-theme);
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-content {
|
|
|
+ padding: 16px 8px 24px;
|
|
|
+ background: #ffe39a;
|
|
|
+ border-radius: 12px;
|
|
|
+ .title {
|
|
|
+ span {
|
|
|
+ vertical-align: middle;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .font_family {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .details {
|
|
|
+ margin: 8px 0 16px 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+div.layout-toolbar {
|
|
|
+ .notice-drawer {
|
|
|
+ top: 48px;
|
|
|
+ height: calc(100% - 48px);
|
|
|
+ .el-drawer__body {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .notification-type {
|
|
|
+ .el-select__wrapper {
|
|
|
+ width: 320px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .notification-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 40px;
|
|
|
+ padding: 0 16px;
|
|
|
+ line-height: 40px;
|
|
|
+ border-bottom: 1px solid var(--color-border);
|
|
|
+ .mark-all-read {
|
|
|
+ span {
|
|
|
+ color: var(--color-theme);
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .show-icon {
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .view-all {
|
|
|
+ span {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .show-icon {
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+ .setting {
|
|
|
+ margin-left: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zhouyuhao