|
|
|
@ -11,6 +11,10 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
|
|
<div class="header-right">
|
|
|
|
|
|
|
|
<el-button class="back-btn" type="primary" size="small" plain @click="goBack">
|
|
|
|
|
|
|
|
<Icon icon="fa-solid:arrow-left" class="back-icon" />
|
|
|
|
|
|
|
|
<span>返回</span>
|
|
|
|
|
|
|
|
</el-button>
|
|
|
|
<span class="chip">
|
|
|
|
<span class="chip">
|
|
|
|
<Icon icon="fa-regular:clock" class="chip-icon" />
|
|
|
|
<Icon icon="fa-regular:clock" class="chip-icon" />
|
|
|
|
<span>{{ timeStr }}</span>
|
|
|
|
<span>{{ timeStr }}</span>
|
|
|
|
@ -26,6 +30,9 @@
|
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
|
|
|
|
|
import { useRouter } from 'vue-router'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
|
|
|
|
|
|
|
const timeStr = ref('')
|
|
|
|
const timeStr = ref('')
|
|
|
|
let timer: number | undefined
|
|
|
|
let timer: number | undefined
|
|
|
|
@ -41,6 +48,10 @@ const updateTime = () => {
|
|
|
|
timeStr.value = `${y}-${m}-${day} ${h}:${mi}:${s}`
|
|
|
|
timeStr.value = `${y}-${m}-${day} ${h}:${mi}:${s}`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const goBack = () => {
|
|
|
|
|
|
|
|
router.back()
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
onMounted(() => {
|
|
|
|
updateTime()
|
|
|
|
updateTime()
|
|
|
|
timer = window.setInterval(updateTime, 1000)
|
|
|
|
timer = window.setInterval(updateTime, 1000)
|
|
|
|
@ -123,6 +134,28 @@ header {
|
|
|
|
color: var(--muted);
|
|
|
|
color: var(--muted);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.back-btn {
|
|
|
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
gap: 4px;
|
|
|
|
|
|
|
|
padding: 4px 12px;
|
|
|
|
|
|
|
|
border-radius: 999px;
|
|
|
|
|
|
|
|
border-color: rgba(56, 189, 248, 0.85);
|
|
|
|
|
|
|
|
background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.22), transparent 70%);
|
|
|
|
|
|
|
|
color: #e0f2fe;
|
|
|
|
|
|
|
|
box-shadow: 0 0 18px rgba(56, 189, 248, 0.45);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.back-btn:hover {
|
|
|
|
|
|
|
|
border-color: rgba(96, 165, 250, 0.95);
|
|
|
|
|
|
|
|
background: radial-gradient(circle at 0 0, rgba(59, 130, 246, 0.35), transparent 70%);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.back-icon {
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
color: var(--accent);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chip {
|
|
|
|
.chip {
|
|
|
|
border-radius: 999px;
|
|
|
|
border-radius: 999px;
|
|
|
|
border: 1px solid rgba(148, 163, 184, 0.5);
|
|
|
|
border: 1px solid rgba(148, 163, 184, 0.5);
|
|
|
|
|