upload project source code
This commit is contained in:
162
前端源码/uni-app/components/screens/TestResult.vue
Normal file
162
前端源码/uni-app/components/screens/TestResult.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user