|
|
@@ -0,0 +1,252 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { transportationMode } from '@/components/TransportationMode'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+const props = defineProps<{
|
|
|
+ data: {
|
|
|
+ type: 'milestone' | 'container' | 'delay' | 'change'
|
|
|
+ numericRecords?: number // 是否有多条记录
|
|
|
+ isRead: boolean // 是否已读
|
|
|
+ title?: string
|
|
|
+ mode: string // 运输方式
|
|
|
+ no: string // HBOL: SHJN2301234
|
|
|
+ tag: string // tag
|
|
|
+ location: string
|
|
|
+ delayTime?: string
|
|
|
+ changeTime?: string
|
|
|
+ time: string
|
|
|
+ previous?: string
|
|
|
+ }
|
|
|
+}>()
|
|
|
+
|
|
|
+const handleSeeAll = () => {
|
|
|
+ console.log('see all')
|
|
|
+ router.push({
|
|
|
+ name: 'System Message Detail'
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="notification-card" :class="{ 'is-read': data.isRead }">
|
|
|
+ <div class="header" v-if="data.title">
|
|
|
+ <div class="status-icon"></div>
|
|
|
+ <div class="title">{{ data.title }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="more-tips" v-if="data.numericRecords">
|
|
|
+ <span>Latest Status Updates ({{ data.numericRecords }})</span>
|
|
|
+ <el-button @click="handleSeeAll" class="see-all-icon el-button--text">
|
|
|
+ See All
|
|
|
+ <span class="font_family icon-icon_next_b"></span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="base-info">
|
|
|
+ <span
|
|
|
+ v-if="data.type !== 'container'"
|
|
|
+ class="font_family"
|
|
|
+ :class="[`icon-${transportationMode?.[data.mode]}`]"
|
|
|
+ ></span>
|
|
|
+ <span v-else class="font_family icon-icon_container__filled_b"></span>
|
|
|
+ <span class="no">{{ data.no }}</span>
|
|
|
+ <div class="tag" :class="{ delay: data.type === 'delay', change: data.type === 'change' }">
|
|
|
+ <span class="dot"></span>
|
|
|
+ <span class="text">{{ data.tag }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="route">
|
|
|
+ <span class="font_family icon-icon_route_b"></span>
|
|
|
+ <span>{{ data.location }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="location">
|
|
|
+ <span class="font_family icon-icon_location_b"></span>
|
|
|
+ <span>{{ data.location }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="delay-time" v-if="data.delayTime">
|
|
|
+ <span class="font_family icon-icon_delay_b"></span>
|
|
|
+ <span>{{ data.time }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="change-time" v-if="data.changeTime">
|
|
|
+ <span style="margin-left: 1px" class="font_family icon-icon_time_b"></span>
|
|
|
+ <span>{{ data.changeTime }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="time">
|
|
|
+ <span style="margin-left: 1px" class="font_family icon-icon_time_b"></span>
|
|
|
+ <span>{{ data.time }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="previous" v-if="data.previous">
|
|
|
+ <span class="previous-icon"></span>
|
|
|
+ <span>{{ data.previous }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.notification-card {
|
|
|
+ // max-width: 640px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ &.is-read {
|
|
|
+ .header {
|
|
|
+ .status-icon {
|
|
|
+ background-color: var(--color-border);
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ color: var(--color-neutral-1);
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ .status-icon {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: var(--color-theme);
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ padding: 16px 8px;
|
|
|
+ padding-top: 0;
|
|
|
+ background-color: var(--color-header-bg);
|
|
|
+ border-radius: 6px;
|
|
|
+ .more-tips {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 8px 0;
|
|
|
+ border-bottom: 1px dashed var(--color-border);
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 24px;
|
|
|
+ .see-all-icon {
|
|
|
+ width: 68px;
|
|
|
+ height: 24px;
|
|
|
+ :deep(span) {
|
|
|
+ color: var(--color-theme);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .base-info {
|
|
|
+ display: flex;
|
|
|
+ padding-top: 16px;
|
|
|
+ .no {
|
|
|
+ margin-left: 8px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ .tag {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 4px;
|
|
|
+ padding-left: 8px;
|
|
|
+ padding-right: 6px;
|
|
|
+ background-color: #e6f1eb;
|
|
|
+ border-radius: 3px;
|
|
|
+ &.delay {
|
|
|
+ background-color: #f7e7e9;
|
|
|
+ .dot {
|
|
|
+ background-color: #c9353f;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ color: #c9353f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.change {
|
|
|
+ background-color: #f5f2e6;
|
|
|
+ .dot {
|
|
|
+ background-color: #edb82f;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ margin-top: 0;
|
|
|
+ color: #edb82f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dot {
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #5bb462;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ margin-top: 2px;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #5bb462;
|
|
|
+ line-height: 10px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .route,
|
|
|
+ .location,
|
|
|
+ .change-time,
|
|
|
+ .delay-time,
|
|
|
+ .time {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 8px;
|
|
|
+ height: 16px;
|
|
|
+ span {
|
|
|
+ color: var(--color-neutral-2);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .font_family {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'iconfont';
|
|
|
+ color: var(--color-neutral-2);
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ div.delay-time {
|
|
|
+ margin-top: 6px;
|
|
|
+ span,
|
|
|
+ .font_family {
|
|
|
+ color: #c9353f;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ line-height: 19px;
|
|
|
+ }
|
|
|
+ .font_family {
|
|
|
+ line-height: 12px;
|
|
|
+ margin-left: -1px;
|
|
|
+ margin-right: 6px;
|
|
|
+ font-size: 19px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ div.change-time {
|
|
|
+ span,
|
|
|
+ .font_family {
|
|
|
+ color: #edb82f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .previous {
|
|
|
+ height: 24px;
|
|
|
+ margin-top: 8px;
|
|
|
+ padding-left: 8px;
|
|
|
+ line-height: 24px;
|
|
|
+ background-color: #e1e3e9;
|
|
|
+ border-radius: 6px;
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .previous-icon {
|
|
|
+ display: inline-block;
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ background-color: var(--color-neutral-1);
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 8px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zhouyuhao
