99 lines
1.6 KiB
Plaintext
99 lines
1.6 KiB
Plaintext
<template>
|
|
<view class="info-card">
|
|
<view class="header-row">
|
|
<view>
|
|
<text class="title">{{ title }}</text>
|
|
<text class="code">{{ code }}</text>
|
|
</view>
|
|
<ServiceStatusTag v-if="statusText != ''" :text="statusText" :tone="statusTone"></ServiceStatusTag>
|
|
</view>
|
|
<view v-for="item in items" :key="item.label" class="info-line">
|
|
<text class="info-label">{{ item.label }}</text>
|
|
<text class="info-value">{{ item.value }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'
|
|
|
|
type ServiceInfoItem = {
|
|
label: string
|
|
value: string
|
|
}
|
|
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
code: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
statusText: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
statusTone: {
|
|
type: String,
|
|
default: 'neutral'
|
|
},
|
|
items: {
|
|
type: Array<ServiceInfoItem>,
|
|
default: [] as Array<ServiceInfoItem>
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.info-card {
|
|
padding: 24rpx;
|
|
border-radius: 20rpx;
|
|
background: #f8fbfc;
|
|
}
|
|
|
|
.header-row {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.title {
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
color: #16324f;
|
|
}
|
|
|
|
.code,
|
|
.info-label,
|
|
.info-value {
|
|
margin-top: 10rpx;
|
|
font-size: 26rpx;
|
|
line-height: 38rpx;
|
|
}
|
|
|
|
.code,
|
|
.info-label {
|
|
color: #66788a;
|
|
}
|
|
|
|
.info-value {
|
|
color: #16324f;
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
|
|
.info-line {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
padding-top: 14rpx;
|
|
border-top-width: 1rpx;
|
|
border-top-style: solid;
|
|
border-top-color: #e2e8f0;
|
|
margin-top: 14rpx;
|
|
gap: 24rpx;
|
|
}
|
|
</style> |