250 lines
7.5 KiB
Vue
250 lines
7.5 KiB
Vue
<script lang="ts" setup>
|
|
import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
|
|
import { getCustomScaleExplains } from '@/service'
|
|
|
|
definePage({
|
|
style: {
|
|
navigationStyle: 'custom',
|
|
transparentTitle: 'always',
|
|
navigationBarTitleText: '',
|
|
},
|
|
})
|
|
|
|
const handleBack = () => {
|
|
uni.switchTab({
|
|
url: '/pages/evaluation/index'
|
|
})
|
|
}
|
|
|
|
const detailData = ref<any>({});
|
|
|
|
|
|
const environmentCardStyles = [
|
|
'bg-gradient-to-t from-[#D2F3FF] to-[#E8F9FE] 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}`,
|
|
})
|
|
}
|
|
|
|
const navigateToSerer = () => {
|
|
uni.navigateTo({
|
|
url: '/pages-sub/about/onlineCustom',
|
|
})
|
|
}
|
|
|
|
onLoad((options:any) => {
|
|
|
|
getCustomScaleExplains({query:{ CustomScaleId: options?.id }}).then((resp) => {
|
|
if (resp.code === 200) {
|
|
detailData.value = resp.result;
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<view class="flex flex-col bg-[#1880FC] h-screen">
|
|
<view class="flex-1 flex flex-col relative overflow-auto pb-[40rpx]">
|
|
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_BG.png" mode="scaleToFill"
|
|
class="w-full h-[296rpx] shrink-0" />
|
|
<Navbar safeAreaInsetTop :bordered="false" leftArrow @clickLeft="handleBack" bg-color="transparent"
|
|
:fixed="true" class="h-0">
|
|
</Navbar>
|
|
<view
|
|
class="rounded-[0_0_24rpx_24rpx] bg-white pb-[22rpx] mx-[30rpx] mt-[-24rpx] flex flex-col">
|
|
<view class="flex items-center mx-[30rpx]">
|
|
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_biaoqian.png" mode="scaleToFill"
|
|
class="w-[40rpx] h-[48rpx]" />
|
|
<view class="relative m-[4rpx]">
|
|
<view class="relative z-2 text-[32rpx] text-[#000]">
|
|
你的天赋类型为
|
|
</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.mainTitle }}</view>
|
|
<view class="mx-[30rpx] select-box bg-[#E7F2FF] border-[2rpx] border-[#1580FF] border-solid text-[26rpx] font-500 px-[48rpx] py-[20rpx] text-center">{{ detailData.reportView.keywords.join(' · ') }}</view>
|
|
<view class="text-[28rpx] text-[#333] mt-[20rpx] mx-[30rpx]">
|
|
{{ 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>
|
|
</view>
|
|
|
|
|
|
<view class="pb-safe bg-white">
|
|
<view class="py-[18rpx] px-[30rpx] flex items-center gap-[20rpx]">
|
|
<view class="" @click="redirectToTest()">
|
|
<button class="flex items-center justify-center rounded-full text-[32rpx] text-[#9E9E9E] h-[88rpx]! w-[240rpx]! bg-white border-solid border-[2rpx] border-[#9E9E9E]" >
|
|
重新测评
|
|
</button>
|
|
</view>
|
|
<view class="z-2 relative" @click="navigateToSerer">
|
|
<button
|
|
class="flex flex-col items-center justify-center leading-none rounded-full text-[32rpx] text-[#fff] h-[88rpx]! w-[430rpx]! bg-[url('https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/anniubeijing.png'),linear-gradient(to_right,#FF9411,#FFB11B)] bg-left-top bg-no-repeat">
|
|
<view>免费领取</view>
|
|
<view class="text-[22rpx] mt-[8rpx]">(家庭成长规划建议)</view>
|
|
</button>
|
|
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_anniulibao.png" mode="scaleToFill"
|
|
class="w-[106rpx] h-[106rpx] absolute right-0 top-[-18rpx]" style="pointer-events: none" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.icon-class) {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.select-box {
|
|
--blue: #1e86ff;
|
|
--dot-size: 10rpx;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
/* 左右两边的 3 个方点 */
|
|
.select-box::before,
|
|
.select-box::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: calc(var(--dot-size) / -2);
|
|
width: var(--dot-size);
|
|
height: calc(100% + var(--dot-size));
|
|
|
|
background:
|
|
linear-gradient(var(--blue), var(--blue)) center top / var(--dot-size) var(--dot-size) no-repeat,
|
|
linear-gradient(var(--blue), var(--blue)) center center / var(--dot-size) var(--dot-size) no-repeat,
|
|
linear-gradient(var(--blue), var(--blue)) center bottom / var(--dot-size) var(--dot-size) no-repeat;
|
|
}
|
|
|
|
/* 左侧 3 个点 */
|
|
.select-box::before {
|
|
left: calc(var(--dot-size) / -2 - 2rpx);
|
|
}
|
|
|
|
/* 右侧 3 个点 */
|
|
.select-box::after {
|
|
right: calc(var(--dot-size) / -2);
|
|
}
|
|
|
|
|
|
.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: #D2FEF7;
|
|
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;
|
|
}
|
|
</style>
|