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