zycp-demo/src/views/user/report/index.vue

406 lines
14 KiB
Vue
Raw Normal View History

2022-03-03 15:51:14 +08:00
<template>
<div class="content my-content">
<!-- 头部 -->
<div :class="{'header':true,'scroll white':isScrollTop,'white':true}">
<div class="back" @click="$router.go(-1)"><img src="../../../assets/images/home/expert/back.png" alt=""></div>
<div class="header-title">我的报告</div>
</div>
<div class="report pull-content">
<ul class="report-nav">
<li :class="{'active':isShow}" @click="isShow=!isShow">
个性特质分析
</li>
<li :class="{'active':!isShow}" @click="isShow=!isShow">
专业类匹配度
</li>
</ul>
<div class="report-item-all">
<div class="report-item" v-show="isShow">
<div class="report-relation">
<span>赵四</span>
<span>四川</span>
<span v-show="roleTType == 'student'"></span>
<span v-show="roleTType == 'parents'"></span>
<span>2022-02-28 15:25</span>
</div>
<div class="report-box1 report-box">
<div class="report-title">
职业价值观
<!-- {{baseList1.summary}} -->
</div>
<span class="report-h2">
报告人的职业价值观趋向管理型和创造型
<!-- {{baseList1.reportspanList.summary}} -->
</span>
<span class="txt2">
报告人的职业价值观关键词运筹帷幄推陈出新
<!-- {{baseList1.reportspanList.keywords_span}} -->
</span>
<span class="report-h3">
你最适合的职业类型是升迁到组织中更高的管理职位进入管理层或者成为总经理这样能够整合其他人的工作并对组织中某项工作的绩效承担责任你最适合的职业类型是能凭借自己的能力和冒险愿望扫除障碍的创业型企业一旦你认为时机成熟就会尽快开始自己的创业历程你希望自己的企业有非常高的现金收入以证明你的能力
<!-- {{baseList1.reportspanList.description}} -->
</span>
</div>
<div class="report-box2 report-box">
<div class="report-title">
职业价值观
<!-- {{baseList1.summary}} -->
</div>
<span class="report-h2">
报告人的职业价值观趋向管理型和创造型
<!-- {{baseList1.reportspanList.summary}} -->
</span>
<span class="txt2">
报告人的职业价值观关键词运筹帷幄推陈出新
<!-- {{baseList1.reportspanList.keywords_span}} -->
</span>
<span class="report-h3">
你最适合的职业类型是升迁到组织中更高的管理职位进入管理层或者成为总经理这样能够整合其他人的工作并对组织中某项工作的绩效承担责任你最适合的职业类型是能凭借自己的能力和冒险愿望扫除障碍的创业型企业一旦你认为时机成熟就会尽快开始自己的创业历程你希望自己的企业有非常高的现金收入以证明你的能力
<!-- {{baseList1.reportspanList.description}} -->
</span>
<!-- <div class="report-img">
<div style="height:600rpx" a:if="{{twobiao}}">
<f2 onInit="onInitChart2"></f2>
</div>
</div> -->
</div>
<div class="report-box3 report-box">
<div class="report-title">
职业价值观
<!-- {{baseList1.summary}} -->
</div>
<span class="report-h2">
报告人的职业价值观趋向管理型和创造型
<!-- {{baseList1.reportspanList.summary}} -->
</span>
<span class="txt2">
报告人的职业价值观关键词运筹帷幄推陈出新
<!-- {{baseList1.reportspanList.keywords_span}} -->
</span>
<span class="report-h3">
你最适合的职业类型是升迁到组织中更高的管理职位进入管理层或者成为总经理这样能够整合其他人的工作并对组织中某项工作的绩效承担责任你最适合的职业类型是能凭借自己的能力和冒险愿望扫除障碍的创业型企业一旦你认为时机成熟就会尽快开始自己的创业历程你希望自己的企业有非常高的现金收入以证明你的能力
<!-- {{baseList1.reportspanList.description}} -->
</span>
<!-- <div class="report-img">
<div style="height:600rpx">
<f2 onInit="onInitChartLei"></f2>
</div>
</div> -->
</div>
<div class="report-box4 report-box">
<div class="report-title">
职业价值观
<!-- {{baseList1.summary}} -->
</div>
<span class="report-h2">
报告人的职业价值观趋向管理型和创造型
<!-- {{baseList1.reportspanList.summary}} -->
</span>
<span class="txt2">
报告人的职业价值观关键词运筹帷幄推陈出新
<!-- {{baseList1.reportspanList.keywords_span}} -->
</span>
<span class="report-h3">
你最适合的职业类型是升迁到组织中更高的管理职位进入管理层或者成为总经理这样能够整合其他人的工作并对组织中某项工作的绩效承担责任你最适合的职业类型是能凭借自己的能力和冒险愿望扫除障碍的创业型企业一旦你认为时机成熟就会尽快开始自己的创业历程你希望自己的企业有非常高的现金收入以证明你的能力
<!-- {{baseList1.reportspanList.description}} -->
</span>
<!-- <div class="report-img">
<div class="item-k">
<div>{{dataList4[0][0].value}}</div>
<div><span style="width:{{leftNei}}" a:if="{{leftNei>rightNei}}"></span></div>
<div><span style="width:{{rightNei}}" a:if="{{leftNei<rightNei}}"></span></div>
<div>{{dataList4[0][1].value}}</div>
</div>
</div>
<div class="report-img">
<div class="item-k">
<div>{{dataList4[1][0].value}}</div>
<div><span style="width:{{twoLeftNei}}" a:if="{{twoLeftNei>twoRightNei}}"></span>
</div>
<div><span style="width:{{twoRightNei}}" a:if="{{twoLeftNei<twoRightNei}}"></span>
</div>
<div>{{dataList4[1][1].value}}</div>
</div>
</div>
<div class="report-img">
<div class="item-k">
<div>{{dataList4[2][0].value}}</div>
<div><span style="width:{{threeLeftNei}}"
a:if="{{threeLeftNei>threeRightNei}}"></span></div>
<div><span style="width:{{threeRightNei}}"
a:if="{{threeLeftNei<threeRightNei}}"></span></div>
<div>{{dataList4[2][1].value}}</div>
</div>
</div>
<div class="report-img">
<div class="item-k">
<div>{{dataList4[3][0].value}}</div>
<div><span style="width:{{fourLeftNei}}" a:if="{{fourLeftNei>fourRightNei}}"></span>
</div>
<div><span style="width:{{fourRightNei}}"
a:if="{{fourLeftNei<fourRightNei}}"></span></div>
<div>{{dataList4[3][1].value}}</div>
</div>
</div> -->
</div>
<div class="report-box5 report-box">
<div class="report-title">
职业价值观
<!-- {{baseList1.summary}} -->
</div>
<span class="report-h2">
报告人的职业价值观趋向管理型和创造型
<!-- {{baseList1.reportspanList.summary}} -->
</span>
<span class="txt2">
报告人的职业价值观关键词运筹帷幄推陈出新
<!-- {{baseList1.reportspanList.keywords_span}} -->
</span>
<span class="report-h3">
你最适合的职业类型是升迁到组织中更高的管理职位进入管理层或者成为总经理这样能够整合其他人的工作并对组织中某项工作的绩效承担责任你最适合的职业类型是能凭借自己的能力和冒险愿望扫除障碍的创业型企业一旦你认为时机成熟就会尽快开始自己的创业历程你希望自己的企业有非常高的现金收入以证明你的能力
<!-- {{baseList1.reportspanList.description}} -->
</span>
<!-- <div class="report-img">
<div style="height:600rpx" a:if="{{fivebiao}}">
<f2 onInit="onInitChartLei2"></f2>
</div>
</div> -->
</div>
</div>
<!-- 专业类匹配度 -->
<div class="report-item" v-show="!isShow">
<div class="report-exponent">
<div class="exponent-title">
<div class="exponent-star">
推荐指数<span></span><span></span><span></span><span></span><span></span>
<!-- <span a:for="{{item.stars}}"></span> -->
</div>
<div class="percentage">
匹配度>90%<!-- {{item.degree}} -->
</div>
</div>
<div class="exponent-list">
<div class="exponent-item">
<span>
自然学科类<br />
(10)
<!-- {{item2.name}}
({{item2.childrenSize}}) -->
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
</div>
</div>
<div class="exponent-item">
<span>
社会科学类<br />
(10)
<!-- {{item2.name}}
({{item2.childrenSize}}) -->
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
<span>中西医结合</span>
</div>
</div>
<div class="exponent-item">
<span>
人文科学类<br />
(10)
<!-- {{item2.name}}
({{item2.childrenSize}}) -->
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
</div>
</div>
</div>
</div>
<div class="report-exponent">
<div class="exponent-title">
<div class="exponent-star">
推荐指数<span></span><span></span><span></span><span></span><span></span>
<!-- <span a:for="{{item.stars}}"></span> -->
</div>
<div class="percentage">
匹配度>90%<!-- {{item.degree}} -->
</div>
</div>
<div class="exponent-list">
<div class="exponent-item">
<span>
自然学科类<br />
(10)
<!-- {{item2.name}}
({{item2.childrenSize}}) -->
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
</div>
</div>
<div class="exponent-item">
<span>
社会科学类<br />
(10)
<!-- {{item2.name}}
({{item2.childrenSize}}) -->
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
</div>
</div>
<div class="exponent-item">
<span>
人文科学类<br />
(10)
<!-- {{item2.name}}
({{item2.childrenSize}}) -->
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
</div>
</div>
</div>
</div>
<div class="report-exponent">
<div class="exponent-title">
<div class="exponent-star">
推荐指数<span></span><span></span><span></span><span></span><span></span>
<!-- <span a:for="{{item.stars}}"></span> -->
</div>
<div class="percentage">
匹配度>90%<!-- {{item.degree}} -->
</div>
</div>
<div class="exponent-list">
<div class="exponent-item">
<span>
自然学科类<br />
(10)
<!-- {{item2.name}}
({{item2.childrenSize}}) -->
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
<span>自然保护与环境生态类</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
</div>
</div>
<div class="exponent-item">
<span>
社会科学类<br />
(10)
<!-- {{item2.name}}
({{item2.childrenSize}}) -->
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
</div>
</div>
<div class="exponent-item">
<span>
人文科学类<br />
(10)
<!-- {{item2.name}}
({{item2.childrenSize}}) -->
</span>
<div class="exponent-item-son">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "report",
data() {
return {
isScrollTop: false,
isShow:true, //切换报告
roleTType: 'student', //报告人类型
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
methods: {
// 页面跳转
goPage(path) {
this.$router.push(path);
},
// 滚动改变样式
eventScrollTop() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop >= 5) {
if (this.isScroll) {
this.isScroll = false;
this.isScrollTop = true;
}
} else {
if (!this.isScroll) {
this.isScroll = true;
this.isScrollTop = false;
}
}
}
},
destroyed() {
window.removeEventListener("scroll", this.eventScrollTop);
},
//keep-alive进入时触发
activated() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop)
},
//keep-alive离开时触发
deactivated() {
window.removeEventListener("scroll", this.eventScrollTop);
}
}
</script>
<style scoped>
</style>