sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
1c1225fb973d7b3ab270f89ec6c025d63d5979d3
ks-app-employment-service/packageCa/testReport/interestTestReport.vue

1243 lines
52 KiB
Vue
Raw Normal View History

素质测评，生涯规划，个人档案，职业库功能完成
2025-11-05 11:09:27 +08:00
<template>
<view class="interest-report-wrap">
<view class="head-bar" :style="{'margin-top': barHeight + 5 + 'px'}">
<view class="go-back" @click="goback"></view>
<text>我的报告</text>
</view>
<view class="content">
<contrastBox :testType="testType" :userId="userId" :recordId="recordId" @compareParameters="opCompareParameters"></contrastBox>
<view class="section-block">
<testHead :reportTitle="'职业兴趣测评报告'" :testTime="testDate" :isIntroduce="false" :isVideo="true" :videoUrl="videoUrl" :introduceUrl="introduceUrl" ></testHead>
<view class="s-line"></view>
<view class="title">
<view class="name">兴趣代码</view>
</view>
<view class="code-value" v-if="interestCodeList.length > 0">
<text class="scort" v-for="(item,index) in interestCodeList" :key="index">{{item}}</text>
<view class="p-code-list">
<view class="code-row" v-for="(item,index) in codeList" :key="index">
<text class="h3-code">{{item.code}}</text>
{{item.name}}
</view>
</view>
</view>
<view class="empty-desc-value" v-else>你的六个兴趣代码类型分数沒有区别，无法提供代码。建议你重新测评，或咨询老师。</view>
<view class="code-desc" :class="showMore?'more':''" v-if="interestCodeList.length > 0 && gradeLevel>=2">
<view class="txt-wrap" v-if="codeDescription!=null">
{{codeDescription}}
</view>
<view class="more-btn" @click="showMore=!showMore"></view>
</view>
<view class="code-desc" v-else>
<view class="txt-wrap" v-if="codeDescription!=null">
{{interestTestRecordModel.InterestTwoCodeDesc}}
</view>
</view>
<view class="title">
<view class="name">兴趣分数</view>
</view>
<view class="chat-wrap">
<view class="row-item"><l-echart ref="chartRef" class="charts-box"></l-echart>
</view>
</view>
<view class="score-table-wrap">
<view class="tr">
<view class="th">实用型(R)</view>
<view class="th">研究型(I)</view>
<view class="th">艺术型(A)</view>
</view>
<view class="tr">
<view class="td">{{interestScort.R}}分</view>
<view class="td">{{interestScort.I}}分</view>
<view class="td">{{interestScort.A}}分</view>
</view>
<view class="tr">
<view class="th">社会型(S)</view>
<view class="th">企业型(E)</view>
<view class="th">事务型(C)</view>
</view>
<view class="tr">
<view class="td">{{interestScort.S}}分</view>
<view class="td">{{interestScort.E}}分</view>
<view class="td">{{interestScort.C}}分</view>
</view>
</view>
<view class="s-line"></view>
<view class="show-item" v-if="gradeLevel>=2">
<view class="title">
<view class="name">自我介绍</view>
</view>
<view class="h2-value">
{{interestTestRecordModel.SelfIntroductionCode}}
</view>
</view>
<view class="show-item" v-if="gradeLevel>=2">
<view class="title" @click="showTipLayer(2)">
<view class="name">谐和度</view>
<view class="tip-icon"></view>
</view>
<view class="h2-value">
{{interestTestRecordModel.SameCode}}
</view>
<view class="desc-value">
{{interestTestRecordModel.SameCode}}级，
<text v-if="interestTestRecordModel.SameCode===6">谐和度显示兴趣代码非常稳定与清晰。</text>
<text v-if="interestTestRecordModel.SameCode===5">谐和度显示兴趣代码稳定与清晰。</text>
<text v-if="interestTestRecordModel.SameCode===4">谐和度显示兴趣代码还算稳定与清晰。</text>
<text v-if="interestTestRecordModel.SameCode===3">谐和度显示兴趣代码在未来随着成长会有些变化。</text>
<text v-if="interestTestRecordModel.SameCode===2">谐和度显示兴趣代码在未来随着成长会改变。</text>
<text v-if="interestTestRecordModel.SameCode===1">谐和度显示兴趣代码在未来随着成长会改变。</text>
<text v-if="interestTestRecordModel.SameCode===0">谐和度显示兴趣代码在未来会有很大的改变。</text>
</view>
</view>
<view class="show-item" v-if="gradeLevel>=2">
<view class="title" @click="showTipLayer(1)">
<view class="name">区分值</view>
<view class="tip-icon"></view>
</view>
<view class="h2-value">
{{interestTestRecordModel.Discrimination}}
</view>
<view class="desc-value">
<text v-if="interestTestRecordModel.Discrimination<3">
区分值较低，兴趣六型分数很接近，分不出我对那个类型更有兴趣，建议找老师讨论，或对自己的兴趣做更多的探索</text>
<text v-else-if="interestTestRecordModel.Discrimination<5">区分值不高，兴趣六型分数有些差别，能知道我对那个类型较有兴趣</text>
<text
v-else-if="interestTestRecordModel.Discrimination<7">区分值适中，兴趣六型分数区分蛮明显，能知道我对那个类型较有兴趣</text>
<text
v-else-if="interestTestRecordModel.Discrimination<10">区分值高，兴趣六型分数区分明显，明显的知道我对那个类型较有兴趣</text>
<text
v-else-if="interestTestRecordModel.Discrimination<45">区分值很高，六兴趣类型区分很明显，明确的知道我对那个类型较有兴趣</text>
<text v-else>区分值非常高，六兴趣类型区分非常明显，非常明确知道我对那个类型较有兴趣</text>
</view>
</view>
</view>
<view class="section-block" >
<view class="title">
<view class="name">选择兴趣代码查看推荐的专业/职业</view>
</view>
<view class="label-wrap" v-if="interestCodeList.length > 0">
<view class="litem" :class="item == selCode?'on':''" v-for="(item,index) in interestCodeList"
:key="index" @click="changeCode(item)">
{{item}}
</view>
</view>
<view class="empty-desc-value" v-else>你的六个兴趣代码类型分数沒有区别，无法提供代码。建议你重新测评，或咨询老师。</view>
<view class="title" @click="showTipLayer(3)">
<view class="name"><text>推荐的专业</text></view>
<view class="tip-icon"></view>
</view>
<view class="title-h3">
普通本科专业：
</view>
<view class="label-wrap" v-if="showSpecialtyList.length > 0 && gradeLevel>=2">
<view class="job-item" v-for="(item,index) in showSpecialtyList" :key="index">
<view class="type">{{item.name}}</view>
<view class="child-wrap">
<text class="text" v-for="(ritem,rindex) in item.value" :key="rindex">
{{ritem.Name}}
</text>
</view>
</view>
</view>
<view class="label-wrap" v-if="showSpecialtyList.length > 0 && gradeLevel==1">
<view class="job-item">
<view class="mid-child-wrap" v-for="(item,index) in showSpecialtyList" :key="index">
<text class="text" v-for="(ritem,rindex) in item.value" :key="index">
{{ritem.Name}}
</text>
</view>
</view>
</view>
<view class="label-wrap" v-if="showSpecialtyList.length == 0">
<view class="null-tip">无匹配的专业学类</view>
</view>
<view class="title-h3">
高职本科专业：
</view>
<view class="label-wrap" v-if="GZBKList.length > 0">
<view class="job-item" v-for="(item,index) in GZBKList" :key="index">
<view class="type">{{item.name}}</view>
<view class="child-wrap">
<text class="text" v-for="(ritem,rindex) in item.children" :key="rindex">
{{ritem.GaoZhiSpecialty}}
</text>
</view>
</view>
</view>
<view class="label-wrap" v-else>
<view class="null-tip">无匹配的专业学类</view>
</view>
<view class="title-h3">
高职专科专业：
</view>
<view class="label-wrap" v-if="GZZKList.length > 0">
<view class="job-item" v-for="(item,index) in GZZKList" :key="index">
<view class="type">{{item.name}}</view>
<view class="child-wrap">
<text class="text" v-for="(ritem,rindex) in item.children" :key="rindex">
{{ritem.GaoZhiSpecialty}}
</text>
</view>
</view>
</view>
<view class="label-wrap" v-else>
<view class="null-tip">无匹配的专业学类</view>
</view>
<view class="title-h3" v-if="gradeLevel==1">
中职专业：
</view>
<view class="label-wrap" v-if="ZZList.length > 0 && gradeLevel==1">
<view class="job-item" v-for="(item,index) in ZZList" :key="index">
<view class="type">{{item.name}}</view>
<view class="child-wrap">
<text class="text" v-for="(ritem,rindex) in item.children" :key="rindex">
{{ritem.GaoZhiSpecialty}}
</text>
</view>
</view>
</view>
<view class="label-wrap" v-if="ZZList.length == 0 && gradeLevel==1">
<view class="null-tip">无匹配的专业学类</view>
</view>
<view class="title" @click="showTipLayer(4)">
<view class="name">推荐的职业</view>
<view class="tip-icon"></view>
</view>
<view class="label-wrap" v-if="showJobList.length > 0 && gradeLevel>=2">
<view class="job-item" v-for="(item,index) in showJobList" :key="index">
<view class="type">{{item.name}}</view>
<view class="child-wrap">
<text class="text" v-for="(ritem,rindex) in item.value" :key="rindex">{{ritem.Name}}</text>
</view>
</view>
</view>
<view class="label-wrap" v-if="showJobList.length > 0 && gradeLevel==1">
<view class="job-item">
<view class="mid-child-wrap" v-for="(item,index) in showJobList" :key="index">
<text class="text" v-for="(ritem,rindex) in item.value" :key="rindex">
{{ritem.Name}}
</text>
</view>
</view>
</view>
<view class="label-wrap" v-if="showJobList.length == 0">
<view class="null-tip">无匹配的职业类</view>
</view>
</view>
</view>
<!-- <u-modal :show="showTip" @confirm="showTip=false" @cancel="showTip=false" confirmText="我明白了">
<view class="slot-content">
<view class="tip-layer">
<view class="title">{{layerTitile}}</view>
<view class="desc" v-html="layerDesc"></view>
</view>
</view>
</u-modal> -->
</view>
</template>
<script>
import testHead from "@/packageCa/testReport/components/testHead.vue"
import contrastBox from "@/packageCa/testReport/components/contrastBox.vue"
修复主包内容
2025-11-07 18:38:01 +08:00
import api from "@/packageCa/apiCa/testManage.js";
素质测评，生涯规划，个人档案，职业库功能完成
2025-11-05 11:09:27 +08:00
import theme from '@/uni_modules/lime-echart/static/walden.json';
const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js');
// import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
// // 注册主题
// echarts.registerTheme('theme', theme);
export default {
components: {
contrastBox,
testHead
},
data() {
return {
platform: uni.getDeviceInfo().platform,
barHeight: wx.getWindowInfo().statusBarHeight,
showTip: false,
layerTitile: "",
layerDesc: "",
videoUrl: "http://2-video.oss-cn-shenzhen.aliyuncs.com/2023%E5%B9%B4%E8%A7%86%E9%A2%91/%E5%88%9D%E4%B8%AD%E8%AF%BE%E7%A8%8B%E8%B5%84%E6%BA%90/%E9%AB%98%E4%B8%AD%E5%85%B4%E8%B6%A3%E6%B5%8B%E8%AF%84%E7%BB%93%E6%9E%9C%E8%A7%A3%E8%AF%BB.mp4",
introduceUrl: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh/report/interestTestReport.png",
routerType: 1, //1正常入口，2活动中心
testDate: "",
// year: 0,
emptyData: true,
gradeLevel: 2,
interestScort: {
R: "-",
I: "-",
A: "-",
S: "-",
E: "-",
C: "-"
}, //兴趣六码
codeList: [], //三码
showMore: false,
codeDescription: "", //第一个兴趣码描述
interestCodeList: {}, //兴趣组合码
interestTestRecordModel: {
InterestTwoCodeDesc: ""
},
selCode: "",
perfosionalAndJobList: {}, //兴趣码对应职业专业
showSpecialtyList: [], //显示专业内容
showJobList: [],
// 柱状图
barOption: {
title: {
text: ''
},
legend: {
show: true,
},
label: {
show: true,
position: 'top'
},
tooltip: {},
xAxis: {
type: 'category',
data: ['实用型(R)', '研究型(I)', '艺术型(A)', '社会型(S)', '企业型(E)', '事务型(C)']
},
yAxis: {
type: 'value',
},
series: [
// {
// name: '2012',
// data: [120, 200, 150, 80, 70, 110, 130,50],
// type: 'bar'
// },
// {
// name: '2011',
// data: [120, 200, 150, 80, 70, 110, 130,50],
// type: 'bar'
// }
]
},
//蜘蛛图
radarOption: {
title: {
text: ''
},
legend: {
show: true,
orient: "vertical",
right: 0,
},
radar: {
radius: '60%', // 或者使用数组指定内外半径，例如：[20%, 40%]
splitNumber: 3,
axisName: {
color: '#555555',
fontSize: 14,
},
splitArea: {
show: false
},
indicator: [{
name: '实用型\n(R)',
max: 90,
min: 0,
axisLabel: {
show: true
}
},
{
name: '研究型\n(I)',
max: 90,
min: 0
},
{
name: '艺术型\n(A)',
max: 90,
min: 0
},
{
name: '社会型\n(S)',
max: 90,
min: 0
},
{
name: '企业型\n(E)',
max: 90,
min: 0
},
{
name: '事务型\n(C)',
max: 90,
min: 0
},
],
},
tooltip: {
show: false // 关闭 tooltip 显示
},
label: {
show: true
},
series: [{
name: '',
type: 'radar',
data: [
// {
// value: [1, 2, 3, 3, 3, 2],
// name: '2024级'
// },
// {
// value: [4, 4, 4, 2, 2, 1],
// name: '班级'
// },
],
lineStyle: {
width: 3
}
}]
},
interestingGZSpecialty: [],//高职本科、专科、中职专业列表
GZBKList: [],//高职本科
GZZKList: [], //高职专科
ZZList: [], //中职
testType: "11",
userId: "",
currentYear: 0,
currentTerm: 0,
recordId: 0,
labelName1: "",//表值1
labelName2: "",//表值2
params: {},//筛选参数
}
},
onLoad(e) {
if (e.year != null) {
this.currentYear = e.year;
}
if (e.term != null) {
this.currentTerm = e.term;
}
if (e.recordId != null) {
this.recordId = e.recordId;
}
if (e.routerType != undefined) {
this.routerType = e.routerType;
}
if (uni.getStorageSync("CAuserInfo").user.GradeLevel == 1) {
this.testType = "18";
this.radarOption.radar.indicator.forEach(item=>{
item.max = 72;
})
this.queryJuniorTestRecord();
} else {
this.testType = "11";
this.getTestRecord();
}
this.gradeLevel = uni.getStorageSync("CAuserInfo").user.GradeLevel;
},
methods: {
showConfirmInfor(){
uni.showModal({
title:this.layerTitile,
content:this.layerDesc,
confirmText:"我明白了",
confirmColor:"#1677ff",
showCancel:false
})
},
// 处理高职本科，专科，中职
getInterestingGZSpecialty(CODE){
let list = this.interestingGZSpecialty[CODE];
const GZBKList = [];
const GZZKList = [];
const ZZList = [];
// 遍历数据，根据条件将对象添加到对应的列表中
list.forEach(item => {
if (item.GZBKId > 0) {
GZBKList.push({
GaoZhiSpecialty: item.GaoZhiSpecialty,
GZBKId: item.GZBKIdStr,
GZBKParentName: item.GZBKParentName
});
}
if (item.GZZKId > 0) {
GZZKList.push({
GaoZhiSpecialty: item.GaoZhiSpecialty,
GZZKId: item.GZZKIdStr,
GZZKParentName: item.GZZKParentName
});
}
if (item.ZZId > 0) {
ZZList.push({
GaoZhiSpecialty: item.GaoZhiSpecialty,
ZZId: item.ZZIdStr,
ZZParentName: item.ZZParentName
});
}
});
const GZBKArr = GZBKList.reduce((acc, item) => {
const { GZBKParentName, ...rest } = item;
const existingCategory = acc.find(category => category.name === GZBKParentName);
if (existingCategory) {
existingCategory.children.push(rest);
} else {
acc.push({
name: GZBKParentName,
children: [rest]
});
}
return acc;
}, []);
const GZZKArr = GZZKList.reduce((acc, item) => {
const { GZZKParentName, ...rest } = item;
const existingCategory = acc.find(category => category.name === GZZKParentName);
if (existingCategory) {
existingCategory.children.push(rest);
} else {
acc.push({
name: GZZKParentName,
children: [rest]
});
}
return acc;
}, []);
const ZZArr = ZZList.reduce((acc, item) => {
const { ZZParentName, ...rest } = item;
const existingCategory = acc.find(category => category.name === ZZParentName);
if (existingCategory) {
existingCategory.children.push(rest);
} else {
acc.push({
name: ZZParentName,
children: [rest]
});
}
return acc;
}, []);
this.GZBKList = GZBKArr;
this.GZZKList = GZZKArr;
this.ZZList = ZZArr;
},
getJobSpecialty(ITEM) {
let jobList = [];
let specialtyList = [];
ITEM.forEach(item => {
if (item.CodeType == 1) {
specialtyList.push(item);
} else if (item.CodeType == 2) {
jobList.push(item);
}
})
const m1 = new Map()
specialtyList.map(item => {
m1.set(item.ParentName, [...(m1.get(item.ParentName) || ''), item])
})
let listObj1 = Object.fromEntries(m1.entries());
let list1 = [];
Reflect.ownKeys(listObj1).forEach(key => {
list1.push({
name: key,
value: listObj1[key]
})
})
const m = new Map()
jobList.map(item => {
m.set(item.ParentName, [...(m.get(item.ParentName) || ''), item])
})
let listObj = Object.fromEntries(m.entries());
let list = [];
Reflect.ownKeys(listObj).forEach(key => {
list.push({
name: key,
value: listObj[key]
})
})
this.showJobList = list;
this.showSpecialtyList = list1;
},
//对比参数
opCompareParameters(value){
this.labelName1 = value.name1;
this.labelName2 = value.name2;
this.params = value;
this.getValue()
},
//获取报告结果
getTestRecord() {
uni.showLoading({
title: "加载中"
})
api.queryInterestTestResult(this.currentYear, this.currentTerm,this.recordId).then(res => {
uni.hideLoading();
if (res.Result === 1) {
if (res.Data != null) {
let data = res.Data;
this.interestScort = data.InterestScort;
this.testDate = data.TestDate;
this.currentYear = data.Year;
this.currentTerm = data.Term;
this.recordId = data.TestRecord.Id;
this.userId = data.TestRecord.UserId;
this.labelName1 = data.TestDate;
this.selCode = data.InterestCodeList[0];
if (data.InterestCodeList[0]) {
let codeArr = data.InterestCodeList[0].split("");
let codeList = [];
codeArr.forEach(item => {
if (item == 'R') {
codeList.push({
code: item,
name: "实用型",
})
} else if (item == 'I') {
codeList.push({
code: item,
name: "研究型",
})
} else if (item == 'A') {
codeList.push({
code: item,
name: "艺术型",
})
} else if (item == 'S') {
codeList.push({
code: item,
name: "社会型",
})
} else if (item == 'E') {
codeList.push({
code: item,
name: "企业型",
})
} else if (item == 'C') {
codeList.push({
code: item,
name: "事务型",
})
}
})
this.codeList = codeList;
data.InterestingCodeDesc.forEach(item => {
if (item.Code == data.InterestCodeList[0].substring(0, 2)) {
this.codeDescription = item.Description;
}
})
}
this.interestTestRecordModel = data;
this.interestCodeList = data.InterestCodeList;
this.perfosionalAndJobList = data.InterestingPerfosionalAndJob;
this.getJobSpecialty(data.InterestingPerfosionalAndJob[this.selCode])
this.interestingGZSpecialty = data.InterestingGZSpecialty;
this.getInterestingGZSpecialty(data.InterestCodeList[0])
this.initChart();
this.emptyData = false;
} else {
this.emptyData = true;
}
} else {
this.emptyData = true;
uni.showToast({
title: res.Message,
icon: "none"
})
}
})
},
//获取初中报告结果
queryJuniorTestRecord() {
uni.showLoading({
title: "加载中"
})
api.queryJuniorTestRecord(this.currentYear, this.currentTerm,this.recordId).then(res => {
uni.hideLoading();
if (res.Result === 1) {
if (res.Data != null) {
let data = res.Data;
this.interestScort = {};
this.interestScort = data.InterestScort;
this.selCode = data.InterestCodeList[0];
this.testDate = data.TestDate;
this.currentYear = data.Year;
this.currentTerm = data.Term;
this.recordId = data.TestRecord.Id;
this.userId = data.TestRecord.UserId;
this.labelName1 = data.TestDate;
this.initChart();
this.interestTestRecordModel = data;
this.interestCodeList = data.InterestCodeList;
if (data.InterestCodeList[0]) {
let codeArr = data.InterestCodeList[0].split("");
let codeList = [];
codeArr.forEach(item => {
if (item == 'R') {
codeList.push({
code: item,
name: "实用型",
})
} else if (item == 'I') {
codeList.push({
code: item,
name: "研究型",
})
} else if (item == 'A') {
codeList.push({
code: item,
name: "艺术型",
})
} else if (item == 'S') {
codeList.push({
code: item,
name: "社会型",
})
} else if (item == 'E') {
codeList.push({
code: item,
name: "企业型",
})
} else if (item == 'C') {
codeList.push({
code: item,
name: "事务型",
})
}
})
this.codeList = codeList;
}
this.perfosionalAndJobList = data.InterestingPerfosionalAndJob;
if(data.InterestingPerfosionalAndJob != null){
this.getJobSpecialty(data.InterestingPerfosionalAndJob[this.selCode])
}
this.interestingGZSpecialty = data.InterestingGZSpecialty;
this.getInterestingGZSpecialty(data.InterestCodeList[0])
this.emptyData = false;
} else {
this.emptyData = true;
}
} else {
this.emptyData = true;
uni.showToast({
title: res.Message,
icon: "none"
})
}
})
},
//更改对比图
getValue() {
//群体维度对比
api.getInterestTestGroupResult(this.params.year, this.params.term,this.params.schoolId, this.params.gradeid, this.params.classid, this.params.sex, this.params.departId,this.userId,this.params.recordId).then(res => {
if (res.Result >= 1) {
this.doChart(res.Data.data);
}
})
},
//初始化图表
async initChart() {
let arr = [this.interestScort.R, this.interestScort.I, this.interestScort.A, this.interestScort.S,this.interestScort.E, this.interestScort.C];
this.radarOption.series[0].data = [{
name: this.labelName,
value: arr,
}]
// chart 图表实例不能存在data里
const chart = await this.$refs.chartRef.init(echarts, "theme");
chart.clear();
chart.setOption(this.radarOption)
},
//时间维度/群体维度对比
async doChart(DATA) {
let name1 = this.labelName1;
let name2 = this.labelName2;
let arr = [this.interestScort.R, this.interestScort.I, this.interestScort.A, this.interestScort.S,this.interestScort.E, this.interestScort.C];
this.radarOption.series[0].data = [{
name: name1,
value: arr,
},
{
name: name2,
value: DATA,
},
];
const chart = await this.$refs.chartRef.init(echarts, "theme");
chart.clear();
chart.setOption(this.radarOption)
},
changeCode(item) {
this.selCode = item;
this.getJobSpecialty(this.perfosionalAndJobList[item])
this.getInterestingGZSpecialty(item)
},
goback() {
uni.navigateBack(-1);
},
showTipLayer(INDEX) {
switch (INDEX) {
case 1: {
this.layerTitile = "区分值";
this.layerDesc =
"· 区分值代表学生对于自己喜欢或不喜欢什么的清晰程度。<br>· 区分值高的学生说明他很清楚自己喜欢什么，不喜欢什么，因此他做出的选择会比较稳定，变动不会太大。<br>· 而区分值较低的学生，不太清楚自己喜欢什么、排斥什么，因此在未来的选择上常有变动。";
break;
}
case 2: {
this.layerTitile = "谐和度";
this.layerDesc =
"· 谐和度指的是自我介绍代码和测评得出的兴趣代码的一致程度，以此来推测个人兴趣代码稳定与清晰的程度。<br>· 谐和度高代表个人的兴趣代码比较稳定与清晰，而谐和度低代表该学生的兴趣代码在未来会有改变。";
break;
}
case 3: {
this.layerTitile = "推荐的专业";
this.layerDesc = "· 基于兴趣代码对专业库进行检索后推荐的专业。<br>· 此处列出推荐的专业，仅是具有代表性的部分专业，并非全部的专业。";
break;
}
case 4: {
this.layerTitile = "推荐的职业";
this.layerDesc = "· 基于兴趣代码对职业库进行检索后推荐的职业。<br>· 此处列出推荐的职业，仅是具有代表性的部分职业，并非全部的职业。";
break;
}
}
//this.showTip = true;
this.showConfirmInfor();
},
}
}
</script>
<style lang="scss">
$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
page {
background: #EEF1F8 url('#{$image-oss-url}/test_bg.png') no-repeat;
background-size: contain;
overflow-y:scroll;
}
</style>
<style lang="scss" scoped>
$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
.vip-tip-block {
width: 650rpx;
height: 400rpx;
background: #fff url('#{$image-oss-url}/report-vip-tip.png') no-repeat;
background-size: 100%;
}
.interest-report-wrap {
min-height: 100vh;
.tip-layer {
.title {
font-size: 36rpx;
color: #000000;
text-align: center;
font-weight: 600;
margin-bottom: 30rpx;
}
.desc {
font-size: 28rpx;
color: #666666;
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
}
}
.head-bar {
position: relative;
text-align: center;
font-size: 36rpx;
font-weight: 600;
height: 60rpx;
line-height: 60rpx;
.go-back {
position: absolute;
left: 10rpx;
top: 0;
width: 60rpx;
height: 60rpx;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABUklEQVRoQ+3ZOwrCQBCA4UlyCVsrQauQdPYewcNYWXoHK1s9gYeYdIKlracYWYggkgiTnccuaB3D/+1sYEMKyPxXZN4Pf0DMBOu6XpZluQOANRGduq7bc+/nNoE+/gwAq3c0IrJ72H/grtDQ9UPxAPBAxDn3/uaAkfjQvUXES9IA6fiANZuARrwZQCveBKAZrw7QjlcFWMSrAaziVQCW8eIA63hRgEe8GMArXgTgGR8N8I6PAqQQPxmQSvxkQNM0VwDYfJ3dJ53nuef/7+vZx+l+9W8pxE+aQNu2CyK6ZwsI4VlvoQDI/iFOCcF+iD/3fgqTiAKkMIlogDdCBOCJEAN4IUQBHghxgDVCBWCJUANYIVQBFgh1gDbCBKCJMANoIUwBGghzwA/EExFn3HdkF8AYIpvPrO9VDu8TVVUdiKghomNWH7q5W2Xserct9Af0K/AChQ/cMY9OGScAAAAASUVORK5CYII=") center no-repeat;
background-size: 38rpx 38rpx;
}
}
.exp-gard-btn {
position: fixed;
bottom: 130rpx;
left: 0;
display: flex;
align-items: center;
justify-content: center;
height: 120rpx;
width: 100%;
background: #fff;
z-index: 9;
.btn {
width: 670rpx;
height: 88rpx;
line-height: 88rpx;
background: #1677ff;
font-size: 28rpx;
color: #fff;
border-radius: 60rpx;
text-align: center;
}
}
.content {
padding: 35rpx 20rpx 220rpx;
.section-block {
padding: 40rpx 30rpx 20rpx;
background: #fff;
border-radius: 12rpx;
margin-bottom: 20rpx;
overflow: hidden;
.s-line {
position: relative;
width: 630rpx;
margin: 15rpx auto 45rpx;
height: 2rpx;
background: #FAFAFA;
&:before {
content: "";
display: block;
position: absolute;
left: -56rpx;
top: -16rpx;
width: 32rpx;
height: 32rpx;
border-radius: 50%;
background: #EEF1F8;
}
&::after {
content: "";
display: block;
position: absolute;
right: -56rpx;
top: -16rpx;
width: 32rpx;
height: 32rpx;
border-radius: 50%;
background: #EEF1F8;
}
}
.code-value {
position: relative;
display: flex;
align-items: flex-end;
margin-bottom: 20rpx;
padding-top: 40rpx;
padding-bottom: 20rpx;
.scort {
font-weight: 600;
font-size: 32rpx;
color: #1677ff;
margin-right: 20rpx;
&:nth-child(1) {
font-size: 88rpx;
line-height: 92rpx;
}
}
.p-code-list {
position: absolute;
right: 0;
top: -70rpx;
.code-row {
font-size: 24rpx;
margin-bottom: 20rpx;
color: #666;
text-align: right;
.h3-code {
color: #000000;
font-weight: 600;
margin-right: 4rpx;
}
}
}
}
.code-desc {
position: relative;
margin-bottom: 40rpx;
.txt-wrap {
width: 536rpx;
height: 84rpx;
font-size: 28rpx;
color: #666666;
line-height: 40rpx;
transition: all 1.5s;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.more-btn {
position: absolute;
right: 30rpx;
top: 20rpx;
width: 44rpx;
height: 44rpx;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAG+SURBVFiF7ZjPTcMwFId/dlEPPXWEbABMAN2gbNCeLJ8oEzSdIOIUOZd2A2CDMgFs0IwAA+SZSwNJiN20TlKB/J2ivMTvp6dPzh/A4/F4/hXMVIiiaDwcDgPO+bjPQAAgpdyaasbASqkdgKCDPE14F0Jc1xW45abeJ1sgMBUuTAUiuuOc33QS5wBE9HqOvh5PH9i2tQWA+x6zFNkIIVZ1BeMuASDqKEwTQgBHBw4BzNrP0ojHM/X1eDx/HuuDgzF2mWXZSkqZ9hEmSZIrrfWSiF6klJu6a2zvw5HWesY53ymllt1E/EEptdBavwGYcs7XputsD45nANP9cZgkSdDFtKMoGo9Go3WhV967FqMSALCfbFg4lRLRpK3QewWeUP7CCE3vEYBdCQghVkQ0AZAHDNpSpKBAHjYlooktLHBgwjlxHAeDwWCttb79vpGxzSmK1CnAGNtmWTZvslajwDmuipyiQBWrElVcFDlVgSpHTTjnGEVcFWglcM4hRdpQoIpTYACI4/h2v9GXQgH4RPmrJSWiue03VBOcAwP1ipSaOCjway3XBYrUKAI4KlCl1cBASZEPInpwVcDj8XiO4wvpvvJkdM3Z9AAAAABJRU5ErkJggg==") no-repeat;
background-size: 100%;
transition: transform .8s;
}
&.more {
.txt-wrap {
overflow: inherit;
height: initial;
-webkit-line-clamp: 100;
}
.more-btn {
transform: rotate(180deg);
}
}
}
.chat-wrap {
position: relative;
// padding: 15rpx 0 0;
// margin: 30rpx 0 54rpx;
z-index: 1;
// &:before {
// position: absolute;
// left: 118rpx;
// top: 0;
// content: "";
// display: block;
// width: 2rpx;
// height: 100%;
// background: #c9cdd4;
// }
.row-item {
display: flex;
align-items: center;
justify-items: center;
justify-content: center;
.charts-box {
width: 100%;
height: 400px;
}
}
}
.empty-desc-value {
font-size: 28rpx;
color: #333;
padding: 20rpx 0;
}
.title {
display: flex;
align-items: center;
margin-bottom: 30rpx;
.name {
position: relative;
font-weight: 600;
font-size: 32rpx;
color: #000000;
z-index: 1;
&::after {
content: "";
display: block;
position: absolute;
bottom: -3rpx;
left: -6rpx;
width: calc(100% + 12rpx);
height: 12rpx;
background: #BBDCFF;
border-radius: 12rpx;
z-index: -1;
}
}
.tip-icon {
margin-left: 10rpx;
width: 56rpx;
height: 56rpx;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAM1BMVEUAAADMzMzPz8/Hx8fLy8vMzMzNzc3Nzc3KysrMzMzMzMzMzMzKysrLy8vMzMzMzMzMzMxTlLHLAAAAEHRSTlMA3xAgQFCPfzCfr+9gcL/P9mj/kgAAAQFJREFUKM9tUtsWwyAIUwS1um78/9fOFPB0l7woEAIi6QZikV7SH5Sa9UJu5Tt06A0H3WM9I2U0lnPgOjltPBDqYTHCj20to9Kl0HFQXQ7n0lSV8OkTirKUrK1j5SGW1QDv4h1Xo4sFsabaiNrKdWYx59Vb1ozjpdNTqjsBWCZIwQVlpMsygWmZaYDUVU9ruievnFJUE3uHo+3ZMfwCxm1Uh90siaHjINVX3E/VDsdwO1SioWI9O0oOXrgrKA6Ki1Xz8UWdabwYXwweeBrdB++VVCVewtHZdLW+P5tKio/ljzXZVvE1CfBEeJzCbeRYqA36XM2fzW2x1PX/0ncRppvjDWNoDuKTMIXYAAAAAElFTkSuQmCC") center no-repeat;
background-size: 50%;
border-radius: 50%;
}
}
.title-h3 {
font-weight: 600;
font-size: 28rpx;
color: #000000;
margin-bottom: 25rpx;
}
.label-wrap {
display: flex;
flex-wrap: wrap;
padding-bottom: 20rpx;
.null-tip {
font-size: 28rpx;
color: #000;
margin-bottom: 10rpx;
}
.litem {
width: 88rpx;
height: 72rpx;
text-align: center;
line-height: 72rpx;
background: #F3F4F6;
margin-right: 20rpx;
border-radius: 8rpx;
font-size: 28rpx;
color: #000000;
&:nth-child(6) {
margin-right: 0;
}
&.on {
color: #1677ff;
font-weight: 600;
background: #EDF6FF;
}
}
.job-item {
margin-bottom: 15rpx;
width: 100%;
.type {
display: flex;
align-items: center;
font-size: 28rpx;
font-weight: 600;
color: #1677ff;
margin-bottom: 25rpx;
&:before {
content: "";
display: block;
width: 6rpx;
height: 6rpx;
background: #1677ff;
border-radius: 50%;
margin-right: 10rpx;
}
}
.child-wrap {
display: flex;
flex-wrap: wrap;
.text {
padding: 0 25rpx;
height: 72rpx;
line-height: 72rpx;
margin: 0 20rpx 25rpx 0;
background: #F3F4F6;
border-radius: 8rpx;
font-size: 28rpx;
color: #000000;
}
}
.mid-child-wrap {
display: inline-block;
.text {
display: inline-block;
padding: 0 25rpx;
height: 72rpx;
line-height: 72rpx;
margin: 0 20rpx 25rpx 0;
background: #F3F4F6;
border-radius: 8rpx;
font-size: 28rpx;
color: #000000;
}
}
}
}
.score-table-wrap {
border-left: 2rpx solid #EEF2FD;
border-top: 2rpx solid #EEF2FD;
border-right: 2rpx solid #EEF2FD;
border-radius: 4rpx;
width: 588rpx;
margin: 0 auto 50rpx;
.tr {
display: flex;
border-bottom: 2rpx solid #EEF2FD;
.th {
width: 200rpx;
height: 72rpx;
font-size: 28rpx;
color: #666666;
text-align: center;
line-height: 72rpx;
background: #f6f9fe;
}
.td {
width: 200rpx;
height: 72rpx;
font-size: 28rpx;
color: #1677ff;
text-align: center;
line-height: 72rpx;
}
}
}
.show-item {
.h2-value {
font-weight: 600;
font-size: 36rpx;
color: #1677ff;
margin-bottom: 32rpx;
}
.desc-value {
font-size: 28rpx;
color: #666666;
line-height: 40rpx;
margin-bottom: 35rpx;
}
}
}
}
}
</style>
Reference in New Issue Copy Permalink