This commit is contained in:
2026-09-14 20:03:27 +08:00
parent 66f49b97e5
commit 349e8f60df
44 changed files with 658 additions and 459 deletions
@@ -1,10 +1,12 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { ArrowLeft } from '@lucide/vue'
import AdminPage from '@/shared/components/AdminPage.vue'
import ContractPendingNotice from './ContractPendingNotice.vue'
withDefaults(defineProps<{
title: string
dense?: boolean
referenceLabel: string
referenceValue: string
backLabel: string
@@ -17,9 +19,9 @@ defineEmits<{ back: [] }>()
</script>
<template>
<AdminPage as="div" class="overseas-detail-page">
<AdminPage as="div" class="overseas-detail-page" :class="{ 'admin-density': dense }">
<header class="overseas-detail-head">
<el-button :aria-label="backLabel" @click="$emit('back')"><ArrowLeft :size="16" />返回</el-button>
<el-button :class="{ 'density-back': dense }" :link="dense" :aria-label="backLabel" @click="$emit('back')"><ArrowLeft :size="16" />返回</el-button>
<div class="overseas-detail-title">
<h1>{{ title }}</h1>
<p>{{ referenceLabel }} <strong><slot name="reference">{{ referenceValue }}</slot></strong></p>
@@ -41,4 +43,11 @@ defineEmits<{ back: [] }>()
.overseas-detail-title strong { min-width: 0; max-width: 100%; color: var(--cc-text); }
.overseas-detail-status { display: inline-flex; min-height: 26px; align-items: center; padding: 3px 10px; border: 1px solid #f3d19e; border-radius: 999px; background: #fdf6ec; color: #b88230; font-size: 12px; font-weight: 600; white-space: nowrap; }
.overseas-detail-status.is-live { border-color: var(--el-color-success-light-7); background: var(--el-color-success-light-9); color: var(--el-color-success-dark-2); }
.overseas-detail-page.admin-density { background: var(--admin-surface); border: 1px solid var(--cc-border); gap: 0; }
.admin-density .overseas-detail-head { padding: var(--admin-space-3) var(--admin-space-5); gap: var(--admin-space-5); border-bottom: 1px solid var(--cc-border); flex-wrap: wrap; }
.admin-density .overseas-detail-title { display: flex; flex: 0 1 auto; align-items: baseline; flex-wrap: wrap; gap: var(--admin-space-5); }
.admin-density .overseas-detail-title h1 { font-size: var(--admin-font-section); font-weight: 500; }
.admin-density .overseas-detail-title p { margin: 0; font-size: var(--admin-font-caption); }
.admin-density .overseas-detail-title strong { font-size: var(--admin-font-title); overflow-wrap: anywhere; }
.admin-density .overseas-detail-status { font-size: var(--admin-font-caption); }
</style>