feat: 调整页面布局

master
xjs 2026-07-09 11:12:52 +08:00
parent e4494cc179
commit bb5406f3d9
6 changed files with 125 additions and 24 deletions

View File

@ -121,9 +121,7 @@ onShareAppMessage(() => {
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]"> <view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
<view class="text-[36rpx] font-600">{{ detailData.reportView.portraitTitle }}</view> <view class="text-[36rpx] font-600">{{ detailData.reportView.portraitTitle }}</view>
<view class="text-[28rpx] text-[#333] mt-[20rpx]"> <view class="text-[28rpx] text-[#333] mt-[20rpx]" v-html="detailData.reportView.portrait"></view>
{{ detailData.reportView.portrait }}
</view>
</view> </view>
<EnvironmentCardSection :detail-data="detailData" /> <EnvironmentCardSection :detail-data="detailData" />

View File

@ -124,8 +124,7 @@ onShareAppMessage(() => {
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]"> <view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
<view class="text-[36rpx] font-600">{{ detailData.reportView.portraitTitle }}</view> <view class="text-[36rpx] font-600">{{ detailData.reportView.portraitTitle }}</view>
<view class="text-[28rpx] text-[#333] mt-[20rpx]"> <view class="text-[28rpx] text-[#333] mt-[20rpx]" v-html="detailData.reportView.portrait">
{{ detailData.reportView.portrait }}
</view> </view>
</view> </view>
@ -144,7 +143,7 @@ onShareAppMessage(() => {
<button <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"> 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 class="font-600">免费领取</view> <view class="font-600">免费领取</view>
<view class="text-[22rpx] mt-[8rpx]">(家庭成长规划建议)</view> <view class="text-[22rpx] mt-[8rpx]">(未来方向规划建议)</view>
</button> </button>
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_anniulibao.png" mode="scaleToFill" <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" /> class="w-[106rpx] h-[106rpx] absolute right-0 top-[-18rpx]" style="pointer-events: none" />

View File

@ -121,9 +121,7 @@ onShareAppMessage(() => {
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]"> <view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
<view class="text-[36rpx] font-600">{{ detailData.reportView.portraitTitle }}</view> <view class="text-[36rpx] font-600">{{ detailData.reportView.portraitTitle }}</view>
<view class="text-[28rpx] text-[#333] mt-[20rpx]"> <view class="text-[28rpx] text-[#333] mt-[20rpx]" v-html="detailData.reportView.portrait"></view>
{{ detailData.reportView.portrait }}
</view>
</view> </view>
<EnvironmentCardSection :detail-data="detailData" /> <EnvironmentCardSection :detail-data="detailData" />

View File

@ -26,7 +26,7 @@
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/ceping_wancheng.png" mode="scaleToFill" <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/ceping_wancheng.png" mode="scaleToFill"
class="w-[32rpx] h-[32rpx]" v-if="item.testStatus === 1" /> class="w-[32rpx] h-[32rpx]" v-if="item.testStatus === 1" />
<view <view
class="w-[32rpx] h-[32rpx] rounded-full bg-[#F5663F] flex items-center justify-center text-[26rpx] text-[#fff]" class="w-[32rpx] h-[32rpx] rounded-full bg-[#CCCCCC] flex items-center justify-center text-[26rpx] text-[#fff]"
v-else>{{ index + 1 }}</view> v-else>{{ index + 1 }}</view>
<view class="flex-1 dashed-box"></view> <view class="flex-1 dashed-box"></view>
</view> </view>

View File

@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { getBusSpecialtyEntryList } from '@/service/requestApi'
import { systemInfo } from '@/utils/systemInfo' import { systemInfo } from '@/utils/systemInfo'
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
@ -25,12 +26,103 @@ onPageScroll((e) => {
opacity.value = Math.min(scrollTop / 100, 1) opacity.value = Math.min(scrollTop / 100, 1)
}) })
const testList = [{ name: '体育特长生', desc: '测算中考体育分数,评估专项优势,并获取升学路径建议', img: 'https://lwzk.ycymedu.com/img/cpgx/cp_ty.png', type: 'sports' }, interface TalentedTestItem {
{ name: '艺术特长生', desc: '上传作品,获取老师/AI点评结合文化课成绩规划升学方向', img: 'https://lwzk.ycymedu.com/img/cpgx/cp_ys.png', type: 'art' }, id: number | string
{ name: '特色班', desc: '上传作品,获取老师/AI点评结合文化课成绩规划升学方向', img: 'https://lwzk.ycymedu.com/img/cpgx/cp_tsb.png', type: "class" }] name: string
desc: string
img: string
type: string
backgroundColor: string
sort: number
}
const navigateToPage = (type: string) => { const testList = ref<TalentedTestItem[]>([])
if(type === "class"){
function isRecord(value: unknown): value is Record<string, unknown> {
return typeof value === 'object' && value !== null
}
function normalizeEntryList(result: unknown) {
if (Array.isArray(result)) {
return result
}
if (!isRecord(result)) {
return []
}
if (Array.isArray(result.list)) {
return result.list
}
if (Array.isArray(result.records)) {
return result.records
}
return [result]
}
function getEntryType(entryCode: string, targetUrl: string) {
if (entryCode.includes('sports')) {
return 'sports'
}
if (entryCode.includes('art')) {
return 'art'
}
if (entryCode.includes('class')) {
return 'class'
}
const targetType = targetUrl.match(/\/(sports|art|class)(?:\/|$)/)?.[1]
return targetType || entryCode
}
function toTalentedTestItem(entry: unknown): TalentedTestItem | null {
if (!isRecord(entry)) {
return null
}
const title = typeof entry.title === 'string' ? entry.title : ''
const subTitle = typeof entry.subTitle === 'string' ? entry.subTitle : ''
const imageUrl = typeof entry.imageUrl === 'string' ? entry.imageUrl : ''
const entryCode = typeof entry.entryCode === 'string' ? entry.entryCode : ''
const targetUrl = typeof entry.targetUrl === 'string' ? entry.targetUrl : ''
if (!title || !subTitle || !imageUrl || !entryCode) {
return null
}
return {
id: typeof entry.id === 'number' || typeof entry.id === 'string' ? entry.id : entryCode,
name: title,
desc: subTitle,
img: imageUrl,
type: getEntryType(entryCode, targetUrl),
backgroundColor: typeof entry.backgroundColor === 'string' ? entry.backgroundColor : '#DDF7F2',
sort: typeof entry.sort === 'number' ? entry.sort : Number.MAX_SAFE_INTEGER,
}
}
function getTestList() {
getBusSpecialtyEntryList().then((resp) => {
if (resp.code === 200) {
testList.value = normalizeEntryList(resp.result as unknown)
.map(toTalentedTestItem)
.filter((item): item is TalentedTestItem => item !== null)
.sort((a, b) => a.sort - b.sort)
}
})
}
onShow(() => {
getTestList()
})
function navigateToPage(type: string) {
if (type === 'class') {
uni.showToast({ title: '特色班测评暂未开放,敬请期待~', icon: 'none' }) uni.showToast({ title: '特色班测评暂未开放,敬请期待~', icon: 'none' })
return return
} }
@ -40,8 +132,10 @@ const navigateToPage = (type: string) => {
<template> <template>
<view class="custom-background flex flex-col"> <view class="custom-background flex flex-col">
<sar-navbar :fixed="true" fixation-style="top:unset;" <sar-navbar
:root-style="{ '--sar-navbar-bg': `rgba(255, 255, 255, ${opacity})`, '--sar-navbar-height': `${systemInfo?.statusBarHeight + 44}px` }"> :fixed="true" fixation-style="top:unset;"
:root-style="{ '--sar-navbar-bg': `rgba(255, 255, 255, ${opacity})`, '--sar-navbar-height': `${systemInfo?.statusBarHeight + 44}px` }"
>
<template #title> <template #title>
<view :style="{ 'padding-top': `${systemInfo?.statusBarHeight}px` }" class="flex justify-center text-[32rpx] font-500"> <view :style="{ 'padding-top': `${systemInfo?.statusBarHeight}px` }" class="flex justify-center text-[32rpx] font-500">
<text>艺体生测评</text> <text>艺体生测评</text>
@ -50,14 +144,20 @@ const navigateToPage = (type: string) => {
</sar-navbar> </sar-navbar>
<view class="mt-[30rpx]"> <view class="mt-[30rpx]">
<view class="mx-[32rpx] rounded-[18rpx] mb-[20rpx] p-[32rpx] flex custom-item-bg" <view
v-for="(value, index) in testList" :key="index" @click="navigateToPage(value.type)"> v-for="value in testList"
:key="value.id" class="custom-item-bg mx-[32rpx] mb-[20rpx] flex rounded-[18rpx] p-[32rpx]" :style="{ background: value.backgroundColor }" @click="navigateToPage(value.type)"
>
<view class="flex flex-col justify-center"> <view class="flex flex-col justify-center">
<view class="text-[#333] text-[40rpx] font-600 mb-[10rpx]">{{ value.name }}</view> <view class="mb-[10rpx] text-[40rpx] text-[#333] font-600">
<view class="text-[#999] text-[24rpx]">{{ value.desc }}</view> {{ value.name }}
</view>
<view class="text-[24rpx] text-[#999]">
{{ value.desc }}
</view>
</view> </view>
<view class="w-[216rpx] h-[216rpx] flex items-center"> <view class="h-[216rpx] w-[216rpx] flex items-center">
<image :src="value.img" mode="scaleToFill" class="w-[216rpx] h-[216rpx]" /> <image :src="value.img" mode="scaleToFill" class="h-[216rpx] w-[216rpx]" />
</view> </view>
</view> </view>
</view> </view>
@ -74,6 +174,6 @@ const navigateToPage = (type: string) => {
} }
.custom-item-bg { .custom-item-bg {
background: linear-gradient(90deg, #E6F4F2 0%, #CAF4F0 70%); background: linear-gradient(90deg, #e6f4f2 0%, #caf4f0 70%);
} }
</style> </style>

View File

@ -338,3 +338,9 @@ export const getHelpedFamilyCount = () => {
method: 'GET', method: 'GET',
}); });
} }
export const getBusSpecialtyEntryList = () => {
return request<API.Response>('/api/busSpecialtyEntry/list', {
method: 'GET',
});
}