80 lines
2.7 KiB
Vue
80 lines
2.7 KiB
Vue
<script lang="ts" setup>
|
||
import { safeAreaInsets } from '@/utils/systemInfo'
|
||
|
||
// #ifdef MP-WEIXIN
|
||
definePage({
|
||
style: {
|
||
navigationStyle: 'custom',
|
||
},
|
||
})
|
||
// #endif
|
||
|
||
// #ifndef MP-WEIXIN
|
||
definePage({
|
||
style: {
|
||
navigationStyle: 'custom',
|
||
transparentTitle: 'always',
|
||
navigationBarTitleText: '',
|
||
},
|
||
})
|
||
// #endif
|
||
|
||
const opacity = ref(0)
|
||
onPageScroll((e) => {
|
||
const scrollTop = e.scrollTop
|
||
opacity.value = Math.min(scrollTop / 100, 1)
|
||
})
|
||
|
||
const testList = [{ name: '体育特长生', desc: '测算中考体育分数，评估专项优势，并获取升学路径建议', img: 'https://lwzk.ycymedu.com/img/cpgx/cp_ty.png', type: 'sports' },
|
||
{ name: '艺术特长生', desc: '上传作品，获取老师/AI点评，结合文化课成绩规划升学方向', img: 'https://lwzk.ycymedu.com/img/cpgx/cp_ys.png', type: 'art' },
|
||
{ name: '特色班', desc: '上传作品，获取老师/AI点评，结合文化课成绩规划升学方向', img: 'https://lwzk.ycymedu.com/img/cpgx/cp_tsb.png', type: "class" }]
|
||
|
||
const navigateToPage = (type: string) => {
|
||
if(type === "class"){
|
||
uni.showToast({ title: '特色班测评暂未开放，敬请期待~', icon: 'none' })
|
||
return
|
||
}
|
||
uni.navigateTo({ url: `/pages-sub/talented/create/${type}First` })
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="custom-background flex flex-col">
|
||
<sar-navbar :fixed="true" fixation-style="top:unset;"
|
||
:root-style="{ '--sar-navbar-bg': `rgba(255, 255, 255, ${opacity})`, '--sar-navbar-height': `${safeAreaInsets?.top + 44}px` }">
|
||
<template #title>
|
||
<view :style="{ 'padding-top': `${safeAreaInsets?.top}px` }" class="flex justify-center text-[32rpx] font-500">
|
||
<text>艺体生测评</text>
|
||
</view>
|
||
</template>
|
||
</sar-navbar>
|
||
|
||
<view class="mt-[30rpx]">
|
||
<view class="mx-[32rpx] rounded-[18rpx] mb-[20rpx] p-[32rpx] flex custom-item-bg"
|
||
v-for="(value, index) in testList" :key="index" @click="navigateToPage(value.type)">
|
||
<view class="flex flex-col justify-center">
|
||
<view class="text-[#333] text-[40rpx] font-600 mb-[10rpx]">{{ value.name }}</view>
|
||
<view class="text-[#999] text-[24rpx]">{{ value.desc }}</view>
|
||
</view>
|
||
<view class="w-[216rpx] h-[216rpx] flex items-center">
|
||
<image :src="value.img" mode="scaleToFill" class="w-[216rpx] h-[216rpx]" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.custom-background {
|
||
background: linear-gradient(180deg, #ecf2ff 0%, #f6f8ff 40rpx, #fff 128rpx);
|
||
background-position: 50% 50%;
|
||
background-origin: padding-box;
|
||
background-clip: border-box;
|
||
background-size: auto auto;
|
||
}
|
||
|
||
.custom-item-bg {
|
||
background: linear-gradient(90deg, #E6F4F2 0%, #CAF4F0 70%);
|
||
}
|
||
</style>
|