refactor: 页面优化

master
xjs 2025-04-11 15:00:35 +08:00
parent cb4b257702
commit bd4e874ac5
17 changed files with 64 additions and 43 deletions

View File

@ -51,7 +51,7 @@ const groupByFirstLetter = (lis: Province[]): { letter: string; provinces: Provi
export const newsList = ref([])
export const useCityNewTop = () => {
const fetchNewTopFun = (provinceCode) => {
getNewsTop({ Top: 2, CategoryId: 1, provinceCode }).then((res) => {
getNewsTop({ Top: 4, CategoryId: 1, provinceCode }).then((res) => {
if (res.code === 200) {
newsList.value = res.result as { title: string }[]
}

View File

@ -20,12 +20,12 @@
</template>
</Navbar>
<view class="flex-1 overflow-auto pb-[30rpx] relative">
<view class="flex-1 overflow-auto pb-[30rpx] relative mt-[40rpx]">
<!-- 顶部卡片 -->
<view
class="flex flex-col pt-[32rpx] mx-[24rpx] bg-[#fff] px-[30rpx] pt-[30rpx] border-class"
>
<text class="text-[#333] text-[28rpx] mb-[14rpx] z-2">你的弱势能力为</text>
<text class="text-[#333] text-[28rpx] mb-[14rpx] z-2 font-700">你的弱势能力为</text>
<text class="text-[#117CFC] text-[36rpx] z-2">
{{ studyRecord.title.replace('你的弱势能力:', '') }}
</text>

View File

@ -20,11 +20,11 @@
</template>
</Navbar>
<view class="flex-1 overflow-auto pb-[30rpx] relative">
<view class="flex-1 overflow-auto pb-[30rpx] relative mt-[40rpx]">
<!-- 顶部卡片 -->
<view class="flex flex-col pt-[32rpx] px-[84rpx] h-[244rpx] mb-[-148rpx]">
<view class="flex flex-col pt-[32rpx] px-[84rpx] h-[244rpx] mb-[-116rpx] font-700">
<image src="https://api.static.ycymedu.com/src/images/evaluate/bg.png" class="header-bg" />
<text class="text-[#333] text-[28rpx] mb-[14rpx] z-2">您的兴趣类型为</text>
<text class="text-[#333] text-[28rpx] mb-[14rpx] z-2">您的性格类型为</text>
<text class="text-[#117CFC] text-[36rpx] z-2">{{ studyRecord.title }}</text>
</view>
<!-- 雷达图占位 -->

View File

@ -20,9 +20,9 @@
</template>
</Navbar>
<view class="flex-1 overflow-auto pb-[30rpx] relative">
<view class="flex-1 overflow-auto pb-[30rpx] relative mt-[40rpx]">
<!-- 顶部卡片 -->
<view class="flex flex-col pt-[32rpx] px-[84rpx] h-[244rpx] mb-[-148rpx]">
<view class="flex flex-col pt-[32rpx] px-[84rpx] h-[244rpx] mb-[-116rpx] font-700">
<image src="https://api.static.ycymedu.com/src/images/evaluate/bg.png" class="header-bg" />
<text class="text-[#333] text-[28rpx] mb-[14rpx] z-2">您的兴趣类型为</text>
<text class="text-[#117CFC] text-[36rpx] z-2">{{ studyRecord.title }}</text>

View File

@ -20,12 +20,12 @@
</template>
</Navbar>
<view class="flex-1 overflow-auto pb-[30rpx] relative">
<view class="flex-1 overflow-auto pb-[30rpx] relative mt-[40rpx]">
<!-- 顶部卡片 -->
<view class="flex flex-col pt-[32rpx] px-[84rpx] h-[244rpx] mb-[-148rpx]">
<view class="flex flex-col pt-[32rpx] px-[84rpx] h-[244rpx] mb-[-116rpx] font-700">
<image src="https://api.static.ycymedu.com/src/images/evaluate/bg.png" class="header-bg" />
<text class="text-[#333] text-[28rpx] mb-[14rpx] z-2">您的职业价值观</text>
<text class="text-[#117CFC] text-[36rpx] z-2">{{ studyRecord.tag }}</text>
<text class="text-[#117CFC] text-[40rpx] z-2">{{ studyRecord.tag }}</text>
</view>
<OpinionChart :pic-charts="studyRecord.picCharts" />
<AbilityDimension :report-items="studyRecord.reportItems" />

View File

@ -4,7 +4,7 @@
<view class="flex flex-col gap-[40rpx]">
<view v-for="(item, index) in reportItems" :key="index">
<view class="text-[32rpx] text-[#000]">{{ item.title }}</view>
<view class="text-[32rpx] text-[#000] font-700">{{ item.title }}</view>
<view class="text-[26rpx] text-[#666] mt-[6rpx]">
{{ item.resolving || item.description }}
</view>

View File

@ -7,7 +7,7 @@
mode="scaleToFill"
class="w-[38rpx] h-[38rpx]"
/>
<text class="text-[32rpx] text-[#000]">生活建议</text>
<text class="text-[32rpx] text-[#000] font-700">生活建议</text>
</view>
<view class="text-[26rpx] text-[#666] font-400">
保持规律作息早睡早起避免熬夜 每天适当运动如散步跑步保持精力充沛
@ -21,7 +21,7 @@
mode="scaleToFill"
class="w-[38rpx] h-[38rpx]"
/>
<text class="text-[32rpx] text-[#000]">饮食建议</text>
<text class="text-[32rpx] text-[#000] font-700">饮食建议</text>
</view>
<view class="text-[26rpx] text-[#666] font-400">
保持规律作息早睡早起避免熬夜 每天适当运动如散步跑步保持精力充沛
@ -35,7 +35,7 @@
mode="scaleToFill"
class="w-[38rpx] h-[38rpx]"
/>
<text class="text-[32rpx] text-[#000]">学习建议</text>
<text class="text-[32rpx] text-[#000] font-700">学习建议</text>
</view>
<view class="text-[26rpx] text-[#666] font-400">
保持规律作息早睡早起避免熬夜 每天适当运动如散步跑步保持精力充沛

View File

@ -8,7 +8,7 @@
</view>
<view class="flex gap-[10rpx] w-full" v-for="(item, index) in reportItems" :key="index">
<view
class="w-[94rpx] py-[12rpx] bg-color text-center flex flex-col justify-center items-center"
class="w-[94rpx] py-[12rpx] bg-color text-center flex flex-col justify-center items-center text-[#333] font-700"
>
<view>{{ item.tag }}</view>
<view>{{ item.title }}</view>

View File

@ -1,12 +1,12 @@
<template>
<view
class="radar-chart-placeholder mx-[24rpx] bg-white chart-class h-[630rpx] flex flex-col justify-center px-[24rpx] pt-[62rpx]"
class="radar-chart-placeholder mx-[24rpx] bg-white chart-class h-[630rpx] flex flex-col justify-center px-[24rpx] pt-[62rpx] pb-[20rpx]"
>
<view class="w-full z-1 flex flex-col gap-[40rpx]">
<view
class="w-full flex items-center gap-[16rpx] text-[30rpx] text-[#A8A8A8]"
v-for="(item, index) in characterData"
:style="`--start-color:${colors[index].startColor};--end-color:${colors[index].endColor}`"
:style="`--start-color:${colors[index].startColor};--end-color:${colors[index].endColor};--active-color:${colors[index].activeColor}`"
:key="index"
>
<view
@ -29,7 +29,7 @@
</view>
<view class="px-[16rpx] py-[20rpx] flex flex-col bg-[#F5FAFF] mt-[32rpx]">
<text class="text-[30rpx] text-[#000] mb-[10rpx]">性格介绍</text>
<text class="text-[30rpx] text-[#000] mb-[10rpx] font-700">性格介绍</text>
<text class="text-[26rpx] text-[#333]">{{ description }}</text>
</view>
</view>
@ -51,10 +51,10 @@ const props = defineProps({
})
const colors = [
{ startColor: '#97FBCD', endColor: '#00BAAD' },
{ startColor: '#FF5940', endColor: '#FAA896' },
{ startColor: '#FFBF5E', endColor: '#F59300' },
{ startColor: '#96E4FA', endColor: '#117CFC' },
{ startColor: '#97FBCD', endColor: '#00BAAD', activeColor: '#00BAAD' },
{ startColor: '#FF5940', endColor: '#FAA896', activeColor: '#FF4117' },
{ startColor: '#FFBF5E', endColor: '#F59300', activeColor: '#EB8D00' },
{ startColor: '#96E4FA', endColor: '#117CFC', activeColor: '#117CFC' },
]
const transformData = (names: string[], values: number[]) => {
const result = []
@ -105,9 +105,11 @@ watch(
}
.left-active {
color: var(--start-color);
color: var(--active-color);
font-weight: 700;
}
.right-active {
color: var(--end-color);
color: var(--active-color);
font-weight: 700;
}
</style>

View File

@ -17,7 +17,7 @@
</view>
<text class="text-[#666] text-[28rpx]">{{ major }}</text>
<view class="flex items-center gap-[10rpx] mb-[10rpx] mt-[20rpx]">
<view class="flex items-center gap-[10rpx] mb-[10rpx] mt-[40rpx]">
<view class="w-[5rpx] h-[30rpx] bg-[#1580FF]"></view>
<text class="text-[#1580FF] text-[32rpx] font-bold">适合专业</text>
<text class="text-[#999] text-[24rpx]">以下数据仅作为参考</text>

View File

@ -44,26 +44,25 @@ watch(
if (newV.radars.length > 0) {
echart.value.init(echarts, (chart) => {
let option = {
legend: {
show: false,
data: ['Allocated Budget', 'Actual Spending'],
},
radar: {
center: ['50%', '50%'],
radius: '70%',
indicator: formatIndicator.value,
splitArea: {
show: false,
},
axisLine: {
lineStyle: {
color: '#999',
color: '#333',
},
},
splitLine: {
lineStyle: {
color: '#999',
color: '#e5e6eb',
},
},
},
series: [
{
name: '职业兴趣评测',

View File

@ -4,7 +4,7 @@
<LEchart ref="echart" :customStyle="`z-index:1;`"></LEchart>
</view>
<view class="bg-[#F5FAFF] px-[16rpx] pt-[20rpx] mx-[34rpx] pb-[26rpx]">
<view class="text-[#000] text-[30rpx] mb-[10rpx]">能力评测建议</view>
<view class="text-[#000] text-[30rpx] mb-[10rpx] font-700">能力评测建议</view>
<view class="text-[26rpx] text-[#333]">{{ description }}</view>
</view>
</view>
@ -57,12 +57,32 @@ const updateChart = () => {
axisPointer: {
type: 'cross',
},
formatter: function (params) {
let result = params[0].name.split('\n').join('') + '\n'
params.forEach((param) => {
result += `${param.marker} ${param.seriesName}: ${param.value}\n`
})
return result
},
textStyle: {
fontSize: 12,
},
position: function (point, params, dom, rect, size) {
const tooltipWidth = dom._rect.width
const canvasWidth = size.viewSize[0]
if (point[0] + tooltipWidth > canvasWidth) {
return [point[0] - tooltipWidth, '10%']
}
return [point[0], '10%']
},
},
grid: {
top: 40,
left: 10,
right: 20,
bottom: 0,
bottom: 10,
containLabel: true,
},
legend: {
@ -133,7 +153,7 @@ const updateChart = () => {
color: '#1580FF',
borderRadius: [4, 4, 0, 0],
},
data: (props.echartData[1] as { value: number[] })?.value,
data: (props.echartData[0] as { value: number[] })?.value,
},
{
name: '平均水平',
@ -150,7 +170,7 @@ const updateChart = () => {
borderWidth: 2,
borderColor: '#fff',
},
data: (props.echartData[0] as { value: number[] })?.value,
data: (props.echartData[1] as { value: number[] })?.value,
},
],
}

View File

@ -93,7 +93,7 @@ watch(
for (let i = 0; i < _val[0].length; i += maxLength) {
result.push(value.slice(i, i + maxLength))
}
result.push(_val[1])
result.push(`(${_val[1]})`)
return result.join('\n')
},
},

View File

@ -22,7 +22,7 @@
<view class="flex-1 overflow-auto pb-safe relative mx-[24rpx]">
<!-- 顶部卡片 -->
<view class="mt-[60rpx]">
<view class="mt-[30rpx]">
<StatusCard />
</view>
<view class="mt-[30rpx]"></view>

View File

@ -22,7 +22,7 @@
<view class="flex-1 overflow-auto pb-safe relative mx-[24rpx]">
<!-- 顶部卡片 -->
<view class="mt-[60rpx]">
<view class="mt-[30rpx]">
<StatusCard
:score="score"
:rules="anxietyRules"

View File

@ -22,7 +22,7 @@
<view class="flex-1 overflow-auto pb-safe relative mx-[24rpx]">
<!-- 顶部卡片 -->
<view class="mt-[60rpx]">
<view class="mt-[30rpx]">
<StatusCard
:score="score"
:rules="depressionRules"

View File

@ -66,14 +66,14 @@ const handleDelete = (item, index) => {
}
const handleDownload = (item) => {
uni.showToast({
title: '下载中...',
})
downloadPDF({
id: item.vId,
location: userStore.userInfo.estimatedAchievement.provinceCode,
}).then((res) => {
if (res.code === 200) {
uni.showToast({
title: '下载中...',
})
uni.downloadFile({
url: res.result as string,
filePath: '',