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 newsList = ref([])
export const useCityNewTop = () => { export const useCityNewTop = () => {
const fetchNewTopFun = (provinceCode) => { const fetchNewTopFun = (provinceCode) => {
getNewsTop({ Top: 2, CategoryId: 1, provinceCode }).then((res) => { getNewsTop({ Top: 4, CategoryId: 1, provinceCode }).then((res) => {
if (res.code === 200) { if (res.code === 200) {
newsList.value = res.result as { title: string }[] newsList.value = res.result as { title: string }[]
} }

View File

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

View File

@ -20,11 +20,11 @@
</template> </template>
</Navbar> </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" /> <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> <text class="text-[#117CFC] text-[36rpx] z-2">{{ studyRecord.title }}</text>
</view> </view>
<!-- 雷达图占位 --> <!-- 雷达图占位 -->

View File

@ -20,9 +20,9 @@
</template> </template>
</Navbar> </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" /> <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> <text class="text-[#117CFC] text-[36rpx] z-2">{{ studyRecord.title }}</text>

View File

@ -20,12 +20,12 @@
</template> </template>
</Navbar> </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" /> <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.tag }}</text> <text class="text-[#117CFC] text-[40rpx] z-2">{{ studyRecord.tag }}</text>
</view> </view>
<OpinionChart :pic-charts="studyRecord.picCharts" /> <OpinionChart :pic-charts="studyRecord.picCharts" />
<AbilityDimension :report-items="studyRecord.reportItems" /> <AbilityDimension :report-items="studyRecord.reportItems" />

View File

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

View File

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

View File

@ -8,7 +8,7 @@
</view> </view>
<view class="flex gap-[10rpx] w-full" v-for="(item, index) in reportItems" :key="index"> <view class="flex gap-[10rpx] w-full" v-for="(item, index) in reportItems" :key="index">
<view <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.tag }}</view>
<view>{{ item.title }}</view> <view>{{ item.title }}</view>

View File

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

View File

@ -17,7 +17,7 @@
</view> </view>
<text class="text-[#666] text-[28rpx]">{{ major }}</text> <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> <view class="w-[5rpx] h-[30rpx] bg-[#1580FF]"></view>
<text class="text-[#1580FF] text-[32rpx] font-bold">适合专业</text> <text class="text-[#1580FF] text-[32rpx] font-bold">适合专业</text>
<text class="text-[#999] text-[24rpx]">以下数据仅作为参考</text> <text class="text-[#999] text-[24rpx]">以下数据仅作为参考</text>

View File

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

View File

@ -4,7 +4,7 @@
<LEchart ref="echart" :customStyle="`z-index:1;`"></LEchart> <LEchart ref="echart" :customStyle="`z-index:1;`"></LEchart>
</view> </view>
<view class="bg-[#F5FAFF] px-[16rpx] pt-[20rpx] mx-[34rpx] pb-[26rpx]"> <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 class="text-[26rpx] text-[#333]">{{ description }}</view>
</view> </view>
</view> </view>
@ -57,12 +57,32 @@ const updateChart = () => {
axisPointer: { axisPointer: {
type: 'cross', 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: { grid: {
top: 40, top: 40,
left: 10, left: 10,
right: 20, right: 20,
bottom: 0, bottom: 10,
containLabel: true, containLabel: true,
}, },
legend: { legend: {
@ -133,7 +153,7 @@ const updateChart = () => {
color: '#1580FF', color: '#1580FF',
borderRadius: [4, 4, 0, 0], borderRadius: [4, 4, 0, 0],
}, },
data: (props.echartData[1] as { value: number[] })?.value, data: (props.echartData[0] as { value: number[] })?.value,
}, },
{ {
name: '平均水平', name: '平均水平',
@ -150,7 +170,7 @@ const updateChart = () => {
borderWidth: 2, borderWidth: 2,
borderColor: '#fff', 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) { for (let i = 0; i < _val[0].length; i += maxLength) {
result.push(value.slice(i, i + maxLength)) result.push(value.slice(i, i + maxLength))
} }
result.push(_val[1]) result.push(`(${_val[1]})`)
return result.join('\n') return result.join('\n')
}, },
}, },

View File

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

View File

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

View File

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