163 lines
3.4 KiB
Vue
163 lines
3.4 KiB
Vue
<template>
|
||
<view class="test-result-screen">
|
||
<!-- 背景 -->
|
||
<view class="test-result-bg"></view>
|
||
|
||
<!-- 头部 -->
|
||
<view class="test-result-header">
|
||
<view class="header-left" @click="emit('back')">
|
||
<text class="header-back">‹</text>
|
||
</view>
|
||
<view class="header-title-wrap">
|
||
<text class="header-title">{{ mode === 'personal' ? '个人测名结果' : '公司测名结果' }}</text>
|
||
<text class="header-subtitle">接口原始数据展示（无任何模拟与加工）</text>
|
||
</view>
|
||
<view class="header-right" />
|
||
</view>
|
||
|
||
<!-- 内容 -->
|
||
<scroll-view scroll-y class="test-result-body">
|
||
<view class="test-result-card">
|
||
<text class="section-title">原始返回 JSON</text>
|
||
<view class="json-box">
|
||
<text class="json-text">
|
||
{{ formattedJson }}
|
||
</text>
|
||
</view>
|
||
<text class="tip-text">
|
||
当前为后端返回数据的直接展示，用于确保与接口保持 100% 一致；后续可以在此基础上做更精细的可视化拆解。
|
||
</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue';
|
||
|
||
const props = defineProps<{
|
||
mode: 'personal' | 'company';
|
||
data: any;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
back: [];
|
||
}>();
|
||
|
||
const formattedJson = computed(() => {
|
||
try {
|
||
return JSON.stringify(props.data ?? {}, null, 2);
|
||
} catch (e) {
|
||
return String(props.data ?? '');
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.test-result-screen {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
background-color: #050508;
|
||
color: #f5f5f5;
|
||
}
|
||
|
||
.test-result-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(circle at top, #1a1a2e 0, #050508 40%, #000 100%);
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.test-result-header {
|
||
position: relative;
|
||
z-index: 10;
|
||
padding: 24rpx 32rpx;
|
||
padding-top: calc(24rpx + env(safe-area-inset-top, 0px));
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||
background: rgba(5, 5, 8, 0.9);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.header-left,
|
||
.header-right {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.header-back {
|
||
font-size: 40rpx;
|
||
color: #a0a0a0;
|
||
}
|
||
|
||
.header-title-wrap {
|
||
flex: 1;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 0.2em;
|
||
color: #f2e6d8;
|
||
}
|
||
|
||
.header-subtitle {
|
||
margin-top: 6rpx;
|
||
font-size: 20rpx;
|
||
color: rgba(226, 232, 240, 0.7);
|
||
}
|
||
|
||
.test-result-body {
|
||
position: relative;
|
||
z-index: 10;
|
||
flex: 1;
|
||
padding: 32rpx;
|
||
}
|
||
|
||
.test-result-card {
|
||
background: rgba(15, 23, 42, 0.9);
|
||
border-radius: 20rpx;
|
||
padding: 28rpx;
|
||
border: 1px solid rgba(148, 163, 184, 0.4);
|
||
box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 0.16em;
|
||
margin-bottom: 20rpx;
|
||
color: #e5e7eb;
|
||
}
|
||
|
||
.json-box {
|
||
background: #020617;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
border: 1px solid rgba(15, 23, 42, 0.9);
|
||
}
|
||
|
||
.json-text {
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||
font-size: 22rpx;
|
||
color: #e5e7eb;
|
||
line-height: 1.7;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.tip-text {
|
||
margin-top: 20rpx;
|
||
font-size: 20rpx;
|
||
color: #9ca3af;
|
||
}
|
||
</style>
|