feat: 修改页面参数
parent
6a4b71482f
commit
e4494cc179
|
|
@ -0,0 +1,142 @@
|
|||
<script lang="ts" setup>
|
||||
interface EnvironmentCard {
|
||||
title?: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
interface ReportView {
|
||||
environmentTitle?: string
|
||||
environmentCards?: EnvironmentCard[]
|
||||
}
|
||||
|
||||
interface ReportDetail {
|
||||
reportView?: ReportView
|
||||
environmentCards?: EnvironmentCard[]
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
detailData?: ReportDetail
|
||||
}>()
|
||||
|
||||
const environmentCardStyles = [
|
||||
'bg-gradient-to-t from-[#E3F7FE] to-[#D6F2FF] outer-dot-1',
|
||||
'bg-gradient-to-t from-[#F6F3FE] to-[#F2EAFF] outer-dot-2',
|
||||
'bg-gradient-to-t from-[#E5FFF9] to-[#D2FEF7] outer-dot-3',
|
||||
'bg-gradient-to-t from-[#E7F9FF] to-[#D3F3FF] outer-dot-4',
|
||||
]
|
||||
|
||||
const environmentTitle = computed(() => props.detailData?.reportView?.environmentTitle ?? '')
|
||||
|
||||
const environmentCards = computed(() => {
|
||||
const cards = props.detailData?.reportView?.environmentCards ?? props.detailData?.environmentCards
|
||||
return Array.isArray(cards) ? cards : []
|
||||
})
|
||||
|
||||
function getEnvironmentCardClass(index: number) {
|
||||
return environmentCardStyles[index % environmentCardStyles.length]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="mx-[30rpx] mt-[20rpx] rounded-[24rpx] bg-white p-[30rpx]">
|
||||
<view class="text-[36rpx] font-600">
|
||||
{{ environmentTitle }}
|
||||
</view>
|
||||
<view class="grid grid-cols-2 mt-[20rpx] gap-[6rpx]">
|
||||
<view
|
||||
v-for="(item, index) in environmentCards"
|
||||
:key="`${item.title}-${index}`"
|
||||
class="box-border h-[176rpx] px-[24rpx] py-[30rpx]"
|
||||
:class="getEnvironmentCardClass(index)"
|
||||
>
|
||||
<view class="text-[32rpx] font-600">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
<view class="text-[24rpx] text-[#3D3D3D]">
|
||||
{{ item.description }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.outer-dot-1,
|
||||
.outer-dot-2,
|
||||
.outer-dot-3,
|
||||
.outer-dot-4 {
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.outer-dot-1::before,
|
||||
.outer-dot-2::before,
|
||||
.outer-dot-3::before,
|
||||
.outer-dot-4::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.outer-dot-1::after,
|
||||
.outer-dot-2::after,
|
||||
.outer-dot-3::after,
|
||||
.outer-dot-4::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.outer-dot-1::before {
|
||||
bottom: -12rpx;
|
||||
left: 24rpx;
|
||||
background-color: #E2F7FE;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.outer-dot-1::after {
|
||||
right: -12rpx;
|
||||
top: 24rpx;
|
||||
}
|
||||
|
||||
.outer-dot-2::before {
|
||||
top: 24rpx;
|
||||
left: -12rpx;
|
||||
background-color: #f2ebff;
|
||||
}
|
||||
|
||||
.outer-dot-2::after {
|
||||
bottom: -12rpx;
|
||||
right: 24rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.outer-dot-3::before {
|
||||
right: -12rpx;
|
||||
bottom: 24rpx;
|
||||
background-color: #e1fff9;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.outer-dot-3::after {
|
||||
top: -12rpx;
|
||||
left: 24rpx;
|
||||
}
|
||||
|
||||
.outer-dot-4::before {
|
||||
top: -12rpx;
|
||||
right: 24rpx;
|
||||
background-color: #d3f3ff;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.outer-dot-4::after {
|
||||
left: -12rpx;
|
||||
bottom: 24rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
|
||||
import RadarChart from '@/chart-sub/evaluate/components/RadarChart.vue'
|
||||
import { getCustomScaleExplains } from '@/service'
|
||||
import EnvironmentCardSection from './components/EnvironmentCardSection.vue'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
|
|
@ -45,22 +46,6 @@ const sharePath = computed(() => {
|
|||
: '/chart-sub/evaluate/sixReport/explorePotential'
|
||||
})
|
||||
|
||||
const environmentCardStyles = [
|
||||
'bg-gradient-to-t from-[#E3F7FE] to-[#D6F2FF] outer-dot-1',
|
||||
'bg-gradient-to-t from-[#F6F3FE] to-[#F2EAFF] outer-dot-2',
|
||||
'bg-gradient-to-t from-[#E5FFF9] to-[#D2FEF7] outer-dot-3',
|
||||
'bg-gradient-to-t from-[#E7F9FF] to-[#D3F3FF] outer-dot-4',
|
||||
]
|
||||
|
||||
const environmentCards = computed(() => {
|
||||
const cards = detailData.value?.reportView?.environmentCards ?? detailData.value?.environmentCards
|
||||
return Array.isArray(cards) ? cards : []
|
||||
})
|
||||
|
||||
function getEnvironmentCardClass(index: number) {
|
||||
return environmentCardStyles[index % environmentCardStyles.length]
|
||||
}
|
||||
|
||||
const redirectToTest = () => {
|
||||
uni.navigateTo({
|
||||
url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`,
|
||||
|
|
@ -120,7 +105,7 @@ onShareAppMessage(() => {
|
|||
<view class="font-700 text-[72rpx] font-[DinBold]">{{ detailData.reportView.score }}</view>
|
||||
<view class="text-[28rpx] font-700">分</view>
|
||||
</view>
|
||||
<view class="text-[#333] text-[24rpx] font-500">组织管理能力</view>
|
||||
<view class="text-[#333] text-[24rpx] font-500">{{ detailData.reportView.scoreDimension }}</view>
|
||||
<view class="w-[132rpx] h-[40rpx] mt-[10rpx]">
|
||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_youshi.png"
|
||||
mode="scaleToFill" class="w-[132rpx] h-[40rpx]" />
|
||||
|
|
@ -141,16 +126,7 @@ onShareAppMessage(() => {
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
|
||||
<view class="text-[36rpx] font-600">{{ detailData.reportView.environmentTitle }}</view>
|
||||
<view class="grid grid-cols-2 gap-[6rpx] mt-[20rpx]">
|
||||
<view v-for="(item, index) in environmentCards" :key="`${item.title}-${index}`"
|
||||
class="h-[176rpx] px-[24rpx] py-[30rpx] box-border" :class="getEnvironmentCardClass(index)">
|
||||
<view class="font-600 text-[32rpx]">{{ item.title }}</view>
|
||||
<view class="text-[24rpx] text-[#3D3D3D]">{{ item.description }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<EnvironmentCardSection :detail-data="detailData" />
|
||||
</view>
|
||||
|
||||
|
||||
|
|
@ -213,90 +189,6 @@ onShareAppMessage(() => {
|
|||
}
|
||||
|
||||
|
||||
.outer-dot-1,
|
||||
.outer-dot-2,
|
||||
.outer-dot-3,
|
||||
.outer-dot-4 {
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.outer-dot-1::before,
|
||||
.outer-dot-2::before,
|
||||
.outer-dot-3::before,
|
||||
.outer-dot-4::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.outer-dot-1::after,
|
||||
.outer-dot-2::after,
|
||||
.outer-dot-3::after,
|
||||
.outer-dot-4::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.outer-dot-1::before {
|
||||
bottom: -12rpx;
|
||||
left: 24rpx;
|
||||
background-color: #D2F3FF;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.outer-dot-1::after {
|
||||
right: -12rpx;
|
||||
top: 24rpx;
|
||||
}
|
||||
|
||||
.outer-dot-2::before {
|
||||
top: 24rpx;
|
||||
left: -12rpx;
|
||||
background-color: #F2EBFF;
|
||||
}
|
||||
|
||||
.outer-dot-2::after {
|
||||
bottom: -12rpx;
|
||||
right: 24rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.outer-dot-3::before {
|
||||
right: -12rpx;
|
||||
bottom: 24rpx;
|
||||
background-color: #E1FFF9 ;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.outer-dot-3::after {
|
||||
top: -12rpx;
|
||||
left: 24rpx;
|
||||
|
||||
}
|
||||
|
||||
.outer-dot-4::before {
|
||||
top: -12rpx;
|
||||
right: 24rpx;
|
||||
background-color: #D3F3FF;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.outer-dot-4::after {
|
||||
left: -12rpx;
|
||||
bottom: 24rpx;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
|
||||
import RadarChart from '@/chart-sub/evaluate/components/RadarChart.vue'
|
||||
import { getCustomScaleExplains } from '@/service'
|
||||
import EnvironmentCardSection from './components/EnvironmentCardSection.vue'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
|
|
@ -45,22 +46,6 @@ const sharePath = computed(() => {
|
|||
: '/chart-sub/evaluate/sixReport/explorePotential'
|
||||
})
|
||||
|
||||
const environmentCardStyles = [
|
||||
'bg-gradient-to-t from-[#E3F7FE] to-[#D6F2FF] outer-dot-1',
|
||||
'bg-gradient-to-t from-[#F6F3FE] to-[#F2EAFF] outer-dot-2',
|
||||
'bg-gradient-to-t from-[#E5FFF9] to-[#D2FEF7] outer-dot-3',
|
||||
'bg-gradient-to-t from-[#E7F9FF] to-[#D3F3FF] outer-dot-4',
|
||||
]
|
||||
|
||||
const environmentCards = computed(() => {
|
||||
const cards = detailData.value?.reportView?.environmentCards ?? detailData.value?.environmentCards
|
||||
return Array.isArray(cards) ? cards : []
|
||||
})
|
||||
|
||||
function getEnvironmentCardClass(index: number) {
|
||||
return environmentCardStyles[index % environmentCardStyles.length]
|
||||
}
|
||||
|
||||
const redirectToTest = () => {
|
||||
uni.navigateTo({
|
||||
url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`,
|
||||
|
|
@ -107,13 +92,13 @@ onShareAppMessage(() => {
|
|||
class="w-[40rpx] h-[48rpx]" />
|
||||
<view class="relative m-[4rpx]">
|
||||
<view class="relative z-2 text-[32rpx] text-[#000]">
|
||||
你的天赋类型为
|
||||
{{ detailData.reportView.headerTitle }}
|
||||
</view>
|
||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_xiantiao.png" mode="scaleToFill"
|
||||
class="absolute top-[22rpx] left-[66rpx] w-[124rpx] h-[28rpx]" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-[92rpx] font-[700] font-[AlimamaShuHeiTi] text-center my-[24rpx]">{{ detailData.reportView.scoreDimension }}</view>
|
||||
<view class="text-[92rpx] font-[700] font-[AlimamaShuHeiTi] text-center my-[24rpx]">{{ detailData.reportView.mainTitle }}</view>
|
||||
<view
|
||||
class="select-box bg-[#E7F2FF] border-[2rpx] border-[#1580FF] border-solid text-[26rpx] font-500 text-center py-[20rpx]">{{ detailData.reportView.keywords.join(' · ') }}</view>
|
||||
|
||||
|
|
@ -124,7 +109,7 @@ onShareAppMessage(() => {
|
|||
<view class="font-700 text-[72rpx] font-[DinBold]">{{ detailData.reportView.score }}</view>
|
||||
<view class="text-[28rpx] font-700">分</view>
|
||||
</view>
|
||||
<view class="text-[#333] text-[24rpx] font-500">组织管理能力</view>
|
||||
<view class="text-[#333] text-[24rpx] font-500">{{ detailData.reportView.scoreDimension }}</view>
|
||||
<view class="w-[132rpx] h-[40rpx] mt-[10rpx]">
|
||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_youshi.png" mode="scaleToFill"
|
||||
class="w-[132rpx] h-[40rpx]" />
|
||||
|
|
@ -144,20 +129,7 @@ onShareAppMessage(() => {
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
|
||||
<view class="text-[36rpx] font-600">{{ detailData.reportView.environmentTitle }}</view>
|
||||
<view class="grid grid-cols-2 gap-[6rpx] mt-[20rpx]">
|
||||
<view
|
||||
v-for="(item, index) in environmentCards"
|
||||
:key="`${item.title}-${index}`"
|
||||
class="h-[176rpx] px-[24rpx] py-[30rpx] box-border"
|
||||
:class="getEnvironmentCardClass(index)"
|
||||
>
|
||||
<view class="font-600 text-[32rpx]">{{ item.title }}</view>
|
||||
<view class="text-[24rpx] text-[#3D3D3D]">{{ item.description }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<EnvironmentCardSection :detail-data="detailData" />
|
||||
</view>
|
||||
|
||||
|
||||
|
|
@ -221,90 +193,6 @@ onShareAppMessage(() => {
|
|||
}
|
||||
|
||||
|
||||
.outer-dot-1,
|
||||
.outer-dot-2,
|
||||
.outer-dot-3,
|
||||
.outer-dot-4 {
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.outer-dot-1::before,
|
||||
.outer-dot-2::before,
|
||||
.outer-dot-3::before,
|
||||
.outer-dot-4::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.outer-dot-1::after,
|
||||
.outer-dot-2::after,
|
||||
.outer-dot-3::after,
|
||||
.outer-dot-4::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.outer-dot-1::before {
|
||||
bottom: -12rpx;
|
||||
left: 24rpx;
|
||||
background-color: #D2F3FF;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.outer-dot-1::after {
|
||||
right: -12rpx;
|
||||
top: 24rpx;
|
||||
}
|
||||
|
||||
.outer-dot-2::before {
|
||||
top: 24rpx;
|
||||
left: -12rpx;
|
||||
background-color: #F2EBFF;
|
||||
}
|
||||
|
||||
.outer-dot-2::after {
|
||||
bottom: -12rpx;
|
||||
right: 24rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.outer-dot-3::before {
|
||||
right: -12rpx;
|
||||
bottom: 24rpx;
|
||||
background-color: #E1FFF9 ;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.outer-dot-3::after {
|
||||
top: -12rpx;
|
||||
left: 24rpx;
|
||||
|
||||
}
|
||||
|
||||
.outer-dot-4::before {
|
||||
top: -12rpx;
|
||||
right: 24rpx;
|
||||
background-color: #D3F3FF;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.outer-dot-4::after {
|
||||
left: -12rpx;
|
||||
bottom: 24rpx;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
|
||||
import { getCustomScaleExplains } from '@/service'
|
||||
import EnvironmentCardSection from './components/EnvironmentCardSection.vue'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
|
|
@ -19,22 +20,6 @@ const handleBack = () => {
|
|||
const detailData = ref<any>({});
|
||||
|
||||
|
||||
const environmentCardStyles = [
|
||||
'bg-gradient-to-t from-[#E3F7FE] to-[#D6F2FF] outer-dot-1',
|
||||
'bg-gradient-to-t from-[#F6F3FE] to-[#F2EAFF] outer-dot-2',
|
||||
'bg-gradient-to-t from-[#E5FFF9] to-[#D2FEF7] outer-dot-3',
|
||||
'bg-gradient-to-t from-[#E7F9FF] to-[#D3F3FF] outer-dot-4',
|
||||
]
|
||||
|
||||
const environmentCards = computed(() => {
|
||||
const cards = detailData.value?.reportView?.environmentCards ?? detailData.value?.environmentCards
|
||||
return Array.isArray(cards) ? cards : []
|
||||
})
|
||||
|
||||
function getEnvironmentCardClass(index: number) {
|
||||
return environmentCardStyles[index % environmentCardStyles.length]
|
||||
}
|
||||
|
||||
const redirectToTest = () => {
|
||||
uni.navigateTo({
|
||||
url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`,
|
||||
|
|
@ -74,7 +59,7 @@ onLoad((options:any) => {
|
|||
class="w-[40rpx] h-[48rpx]" />
|
||||
<view class="relative m-[4rpx]">
|
||||
<view class="relative z-2 text-[32rpx] text-[#000]">
|
||||
你的天赋类型为
|
||||
{{ detailData.reportView.headerTitle }}
|
||||
</view>
|
||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_xiantiao.png" mode="scaleToFill"
|
||||
class="absolute top-[22rpx] left-[66rpx] w-[124rpx] h-[28rpx]" />
|
||||
|
|
@ -85,16 +70,7 @@ onLoad((options:any) => {
|
|||
<view class="text-[28rpx] text-[#333] mt-[20rpx] mx-[30rpx]" v-html="detailData.reportView.portrait">
|
||||
</view>
|
||||
</view>
|
||||
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
|
||||
<view class="text-[36rpx] font-600">{{ detailData.reportView.environmentTitle }}</view>
|
||||
<view class="grid grid-cols-2 gap-[6rpx] mt-[20rpx]">
|
||||
<view v-for="(item, index) in environmentCards" :key="`${item.title}-${index}`"
|
||||
class="h-[176rpx] px-[24rpx] py-[30rpx] box-border" :class="getEnvironmentCardClass(index)">
|
||||
<view class="font-600 text-[32rpx]">{{ item.title }}</view>
|
||||
<view class="text-[24rpx] text-[#3D3D3D]">{{ item.description }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<EnvironmentCardSection :detail-data="detailData" />
|
||||
</view>
|
||||
|
||||
|
||||
|
|
@ -158,90 +134,6 @@ onLoad((options:any) => {
|
|||
}
|
||||
|
||||
|
||||
.outer-dot-1,
|
||||
.outer-dot-2,
|
||||
.outer-dot-3,
|
||||
.outer-dot-4 {
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.outer-dot-1::before,
|
||||
.outer-dot-2::before,
|
||||
.outer-dot-3::before,
|
||||
.outer-dot-4::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.outer-dot-1::after,
|
||||
.outer-dot-2::after,
|
||||
.outer-dot-3::after,
|
||||
.outer-dot-4::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.outer-dot-1::before {
|
||||
bottom: -12rpx;
|
||||
left: 24rpx;
|
||||
background-color: #D2F3FF;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.outer-dot-1::after {
|
||||
right: -12rpx;
|
||||
top: 24rpx;
|
||||
}
|
||||
|
||||
.outer-dot-2::before {
|
||||
top: 24rpx;
|
||||
left: -12rpx;
|
||||
background-color: #F2EBFF;
|
||||
}
|
||||
|
||||
.outer-dot-2::after {
|
||||
bottom: -12rpx;
|
||||
right: 24rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.outer-dot-3::before {
|
||||
right: -12rpx;
|
||||
bottom: 24rpx;
|
||||
background-color: #E1FFF9 ;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.outer-dot-3::after {
|
||||
top: -12rpx;
|
||||
left: 24rpx;
|
||||
|
||||
}
|
||||
|
||||
.outer-dot-4::before {
|
||||
top: -12rpx;
|
||||
right: 24rpx;
|
||||
background-color: #D3F3FF;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.outer-dot-4::after {
|
||||
left: -12rpx;
|
||||
bottom: 24rpx;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
|
||||
import RadarChart from '@/chart-sub/evaluate/components/RadarChart.vue'
|
||||
import { getCustomScaleExplains } from '@/service'
|
||||
import EnvironmentCardSection from './components/EnvironmentCardSection.vue'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
|
|
@ -45,22 +46,6 @@ const sharePath = computed(() => {
|
|||
: '/chart-sub/evaluate/sixReport/explorePotential'
|
||||
})
|
||||
|
||||
const environmentCardStyles = [
|
||||
'bg-gradient-to-t from-[#E3F7FE] to-[#D6F2FF] outer-dot-1',
|
||||
'bg-gradient-to-t from-[#F6F3FE] to-[#F2EAFF] outer-dot-2',
|
||||
'bg-gradient-to-t from-[#E5FFF9] to-[#D2FEF7] outer-dot-3',
|
||||
'bg-gradient-to-t from-[#E7F9FF] to-[#D3F3FF] outer-dot-4',
|
||||
]
|
||||
|
||||
const environmentCards = computed(() => {
|
||||
const cards = detailData.value?.reportView?.environmentCards ?? detailData.value?.environmentCards
|
||||
return Array.isArray(cards) ? cards : []
|
||||
})
|
||||
|
||||
function getEnvironmentCardClass(index: number) {
|
||||
return environmentCardStyles[index % environmentCardStyles.length]
|
||||
}
|
||||
|
||||
const redirectToTest = () => {
|
||||
uni.navigateTo({
|
||||
url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`,
|
||||
|
|
@ -101,14 +86,14 @@ onShareAppMessage(() => {
|
|||
class="w-[40rpx] h-[48rpx]" />
|
||||
<view class="relative m-[4rpx]">
|
||||
<view class="relative z-2 text-[32rpx] text-[#000]">
|
||||
你的天赋类型为
|
||||
{{ detailData.reportView.headerTitle }}
|
||||
</view>
|
||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_xiantiao.png"
|
||||
mode="scaleToFill" class="absolute top-[22rpx] left-[66rpx] w-[124rpx] h-[28rpx]" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="mx-[30rpx] text-[92rpx] font-[700] font-[AlimamaShuHeiTi] text-center my-[24rpx]">{{
|
||||
detailData.reportView.scoreDimension }}</view>
|
||||
detailData.reportView.mainTitle }}</view>
|
||||
<view
|
||||
class="mx-[18rpx] select-box bg-[#E7F2FF] border-[2rpx] border-[#1580FF] border-solid text-[26rpx] font-500 py-[20rpx] text-center">
|
||||
{{ detailData.reportView.keywords.join(' · ') }}</view>
|
||||
|
|
@ -120,7 +105,7 @@ onShareAppMessage(() => {
|
|||
<view class="font-700 text-[72rpx] font-[DinBold]">{{ detailData.reportView.score }}</view>
|
||||
<view class="text-[28rpx] font-700">分</view>
|
||||
</view>
|
||||
<view class="text-[#333] text-[24rpx] font-500">组织管理能力</view>
|
||||
<view class="text-[#333] text-[24rpx] font-500">{{ detailData.reportView.scoreDimension }}</view>
|
||||
<view class="w-[132rpx] h-[40rpx] mt-[10rpx]">
|
||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_youshi.png"
|
||||
mode="scaleToFill" class="w-[132rpx] h-[40rpx]" />
|
||||
|
|
@ -141,16 +126,7 @@ onShareAppMessage(() => {
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
|
||||
<view class="text-[36rpx] font-600">{{ detailData.reportView.environmentTitle }}</view>
|
||||
<view class="grid grid-cols-2 gap-[6rpx] mt-[20rpx]">
|
||||
<view v-for="(item, index) in environmentCards" :key="`${item.title}-${index}`"
|
||||
class="h-[176rpx] px-[24rpx] py-[30rpx] box-border" :class="getEnvironmentCardClass(index)">
|
||||
<view class="font-600 text-[32rpx]">{{ item.title }}</view>
|
||||
<view class="text-[24rpx] text-[#3D3D3D]">{{ item.description }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<EnvironmentCardSection :detail-data="detailData" />
|
||||
</view>
|
||||
|
||||
|
||||
|
|
@ -213,90 +189,6 @@ onShareAppMessage(() => {
|
|||
}
|
||||
|
||||
|
||||
.outer-dot-1,
|
||||
.outer-dot-2,
|
||||
.outer-dot-3,
|
||||
.outer-dot-4 {
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.outer-dot-1::before,
|
||||
.outer-dot-2::before,
|
||||
.outer-dot-3::before,
|
||||
.outer-dot-4::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.outer-dot-1::after,
|
||||
.outer-dot-2::after,
|
||||
.outer-dot-3::after,
|
||||
.outer-dot-4::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.outer-dot-1::before {
|
||||
bottom: -12rpx;
|
||||
left: 24rpx;
|
||||
background-color: #D2F3FF;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.outer-dot-1::after {
|
||||
right: -12rpx;
|
||||
top: 24rpx;
|
||||
}
|
||||
|
||||
.outer-dot-2::before {
|
||||
top: 24rpx;
|
||||
left: -12rpx;
|
||||
background-color: #F2EBFF;
|
||||
}
|
||||
|
||||
.outer-dot-2::after {
|
||||
bottom: -12rpx;
|
||||
right: 24rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.outer-dot-3::before {
|
||||
right: -12rpx;
|
||||
bottom: 24rpx;
|
||||
background-color: #E1FFF9;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.outer-dot-3::after {
|
||||
top: -12rpx;
|
||||
left: 24rpx;
|
||||
|
||||
}
|
||||
|
||||
.outer-dot-4::before {
|
||||
top: -12rpx;
|
||||
right: 24rpx;
|
||||
background-color: #D3F3FF;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.outer-dot-4::after {
|
||||
left: -12rpx;
|
||||
bottom: 24rpx;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/ceping_touxiang.png" mode="scaleToFill"
|
||||
class="w-[74rpx] h-[28rpx]" />
|
||||
<view>已帮助</view>
|
||||
<view class="text-[#F5663E] font-[DinBold] font-700 text-[26rpx] leading-[1]">22632</view>
|
||||
<view>济南家庭</view>
|
||||
<view class="text-[#F5663E] font-[DinBold] font-700 text-[26rpx] leading-[1]">{{ count }}</view>
|
||||
<view>{{ city }}家庭</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -132,7 +132,7 @@ const navigateToServer = () => {
|
|||
}
|
||||
|
||||
const count = ref(0)
|
||||
|
||||
const city = ref('')
|
||||
onShow(() => {
|
||||
getEvaluationList({ query: { menuid: '339907260608593' } }).then(resp => {
|
||||
if (resp.code === 200) {
|
||||
|
|
@ -141,7 +141,8 @@ onShow(() => {
|
|||
})
|
||||
getHelpedFamilyCount().then(resp => {
|
||||
if (resp.code === 200) {
|
||||
count.value = resp.result
|
||||
count.value = resp.result.count
|
||||
city.value = resp.result.city
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue