refactor: 页面优化
parent
cb4b257702
commit
bd4e874ac5
|
|
@ -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 }[]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<!-- 雷达图占位 -->
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
保持规律作息,早睡早起,避免熬夜。 每天适当运动(如散步、跑步),保持精力充沛。
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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: '职业兴趣评测',
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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: '',
|
||||
|
|
|
|||
Loading…
Reference in New Issue