tangyi
/
zycp-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改

master
tangyi 2022-03-03 15:57:18 +08:00
parent b4f22b7916 830b1c8f8f
commit 9ef6aeeb3e
22 changed files with 3009 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -36,7 +36,11 @@
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
"rules": {
"no-console": "off",
"no-debugger": "off",
"no-mixed-spaces-and-tabs": "off"
}
},
"browserslist": [
"> 1%",

132
src/components/tabbar.vue Normal file
View File

@ -0,0 +1,132 @@
<template>
<div>
<ul class="bottom-nav">
<li :class="{home:true, active:homeStyle}" @click="goPage('/index')">
<span><img src="../assets/images/home/main/index.png" alt=""></span>
<p>首页</p>
</li>
<li :class="{expert:true, active:expertStyle}" @click="goPage('/expert')">
<span><img src="../assets/images/home/main/expert.png" alt=""></span>
<p>专家</p>
</li>
<li :class="{evaluation:true, active:evaluationStyle}" @click="goPage('/evaluation')">
<span><img src="../assets/images/home/main/evaluation.png" alt=""></span>
<p>测评</p>
</li>
<li :class="{my:true, active:myStyle}" @click="goPage('/my')">
<span><img src="../../../assets/images/home/main/my.png" alt=""></span>
<p>我的</p>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
homeStyle: true,
expertStyle: false,
evaluationStyle: false,
myStyle: false,
isLogin: false
}
},
created() {
},
beforeRouteUpdate(to, from, next) {
// console.log(to);
document.title = to.meta.title;
this.changeStyleNav(to.name);
next();
},
activated() {
document.title = this.$route.meta.title;
this.changeStyleNav(this.$route.name);
},
methods: {
// 判断当前高亮
changeStyleNav(name) {
switch (name) {
case "index":
this.homeStyle = true;
this.expertStyle = false;
this.evaluationStyle = false;
this.myStyle = false;
break;
case "expert":
this.homeStyle = false;
this.expertStyle = true;
this.evaluationStyle = false;
this.myStyle = false;
break;
case "evaluation":
this.homeStyle = false;
this.expertStyle = false;
this.evaluationStyle = true;
this.myStyle = false;
break;
case "my":
this.homeStyle = false;
this.expertStyle = false;
this.evaluationStyle = false;
this.myStyle = true;
break;
default:
this.homeStyle = true;
this.expertStyle = false;
this.evaluationStyle = false;
this.myStyle = false;
break;
}
},
// 页面跳转
goPage(url) {
this.$router.replace(url);
}
}
}
</script>
<style scoped>
.bottom-nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 1.3rem;
background-color: #FFFFFF;
box-shadow: 0 0 .2rem #efefef;
position: fixed;
left: 0;
bottom: 0;
z-index: 10;
}
.bottom-nav li{
width: 25%;
font-size: .26rem;
text-align: center;
color: #333fc9;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
.bottom-nav li img{
width: .44rem;
height: .44rem;
margin: 0 auto .1rem;
}
.bottom-nav li.active{
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
transition: all .6s;
}
</style>

157
src/router/index.js
View File

@ -1,32 +1,147 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import login from '../views/login.vue'
import verification from '../views/login/verification.vue'
import index from '../views/index/index.vue'
import login from '../views/login.vue' //登录
import index from '../views/index/index.vue' //登录
import verification from '../views/login/verification.vue' //手机验证
import start from '../views/home/start/index.vue' //开屏
import expert from '../views/home/expert/index.vue' //专家列表
import expertdetail from '../views/home/expert/detail.vue' //专家详情
import ask from '../views/home/expert/ask.vue' //向TA提问
import evaluation from '../views/home/evaluation/index.vue' //测评
import question from '../views/home/evaluation/question.vue' //测评问题
import entrance from '../views/home/evaluation/entrance.vue' //测频入口
import ucenter from '../views/user/ucenter/index.vue' //我的
import information from '../views/user/information/index.vue' //完善考生信息
import feedback from '../views/user/feedback/index.vue' //意见与反馈
import info from '../views/user/info/index.vue' //个人信息
import bind from '../views/user/bind/index.vue' //手机绑定
import report from '../views/user/report/index.vue' //我的报告
import consultant from '../views/consultant/index.vue' //咨询师信息
import addcase from '../views/consultant/case.vue' //咨询师信息
import edit from '../views/consultant/edit.vue' //修改基本信息
import editlist from '../views/consultant/list.vue' //预览列表
import editdetail from '../views/consultant/detail.vue' //预览详情
Vue.use(VueRouter)
const routes = [
const routes = [{
path: '/',
name: 'login',
component: login
},
{
path: '/',
name: 'login',
component: login
},
{
path: '/verification',
name: 'verification',
component: verification
},
{
path: '/index',
name: 'index',
component: index
},
path: '/index',
name: 'index',
component: index
},
{
path: '/verification',
name: 'verification',
component: verification
},
{
path: '/start',
name: 'start',
component: start
},
{
path: '/expert',
name: 'expert',
component: expert
},
{
path: '/expert/detail',
name: 'expert-detail',
component: expertdetail
},
{
path: '/expert/ask',
name: 'expert-ask',
component: ask
},
{
path: '/evaluation',
name: 'evaluation',
component: evaluation
},
{
path: '/evaluation/question',
name: 'evaluation-question',
component: question
},
{
path: '/evaluation/entrance',
name: 'evaluation-entrance',
component: entrance
},
{
path: '/ucenter',
name: 'ucenter',
component: ucenter
},
{
path: '/information',
name: 'information',
component: information
},
{
path: '/feedback',
name: 'feedback',
component: feedback
},
{
path: '/info',
name: 'info',
component: info
},
{
path: '/bind',
name: 'bind',
component: bind
},
{
path: '/report',
name: 'report',
component: report
},
{
path: '/consultant',
name: 'consultant',
component: consultant
},
{
path: '/case',
name: 'case',
component: addcase
},
{
path: '/edit',
name: 'edit',
component: edit
},
{
path: '/edit/list',
name: 'edit-list',
component: editlist
},
{
path: '/edit/detail',
name: 'edit-detail',
component: editdetail
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router

114
src/views/consultant/case.vue Normal file
View File

@ -0,0 +1,114 @@
<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="case pull-content">
<div class="case-cover">
<p>封面图：</p>
<div class="cover-img">
</div>
<div class="cover-btn">上传</div>
</div>
<ul class="case-msg">
<li>
<p>标题：</p>
<input type="text" v-model="gName" placeholder="请输入标题"/>
</li>
<li>
<p>学生姓名：</p>
<input type="text" v-model="gPhone" placeholder="请输入学生姓名"/>
</li>
<li>
<p>是否主案例</p>
<div class="course-list key-list">
<span :class="{'checked':index==checkedIndex}" v-for="(item,index) in caseData" :key="index" @click="changeCase(index)">{{item.title}}</span>
</div>
</li>
<li>
<p>录取结果：</p>
<textarea placeholder="请输入录取结果"></textarea>
</li>
<li>
<p>专业定位：</p>
<textarea placeholder="请输入专业定位"></textarea>
</li>
<li>
<p>其他说明：</p>
<textarea placeholder="请输入其他说明"></textarea>
</li>
<li>
<p>客户反馈：</p>
<textarea placeholder="请输入客户反馈"></textarea>
</li>
</ul>
<div class="case-btn">确认</div>
</div>
</div>
</template>
<script>
export default {
name: "case",
data(){
return {
isScrollTop: false,
gName: '',
gPhone: '',
caseData: [
{title:'是'},
{title:'否'}
],
checkedIndex: 0,
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
methods:{
// 选择是否主案例
changeCase(index){
this.checkedIndex = index
},
// 页面跳转
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>

134
src/views/consultant/detail.vue Normal file
View File

@ -0,0 +1,134 @@
<template>
<div class="content">
<!-- 头部 -->
<div :class="{'header detail-header':true,'scroll white':isScrollTop}">
<div class="back white-back" @click="$router.go(-1)"><img src="../../assets/images/home/expert/back.png" alt=""></div>
<div class="header-title">专家详情</div>
</div>
<!-- 轮播图 -->
<div class="banner detail-banner">
<div class="detail-photo">
<span><img src="../../assets/images/home/expert/expert-list.jpg" ></span>
<div class="detail-txt">
<h1>赵晓<span>专家咨询师</span></h1>
<p>
<span>中科院心理所</span>
<span>硕士</span>
<span>从业5年</span>
<span>熟悉新高考</span>
</p>
</div>
</div>
</div>
<div class="detail">
<div class="expert-abstract">
<h2>
<img src="../../assets/images/home/expert/abstract-left.png">
<span>咨询理念</span>
<img src="../../assets/images/home/expert/abstract-right.png" >
</h2>
<p>这里展示咨询理念的文字内容，这里展示咨询理念的 文字内容，这里展示咨询理念的文字内容，这里展示 咨询理念的文字内容，这里展示理</p>
</div>
<div class="detail-content detail-section">
<div class="expert-body">
<h2>个人简介</h2>
<span>
<p>期从事高考志愿填报研究工作，尤其是在准确定位考生、定量分析院校录取数据方面有独到见解，创立了“3/8线差法”，是各大网站及电视台教育频道的常邀嘉宾，多次接受有关期刊杂志专访。长期从事高考志愿填报研究工作。</p>
</span>
</div>
<div class="expert-region">
<h2>服务区域</h2>
<p>
全国，尤其擅长河南省、北京市、河北省、内蒙古自治区的志愿填报。
</p>
</div>
<div class="expert-case">
<h2>咨询案例</h2>
<div class="expert-case-list">
<div class="expert-case-item">
<div class="case-img"><img src="../../assets/images/home/expert/detail.jpg" alt=""></div>
<h3><span>案例1：</span>完美的与湖北工业相遇</h3>
<p><span>录取结果：</span><span>604，超专业线4分，湖北工业大学电子工程 专业</span></p>
<p><span>专业定位：</span><span>兴趣纬度</span> </p>
<p><span>兴趣类型：</span><span>这里展示兴趣类型的文字内容，这里展示兴趣类型的文字内容，这里展示兴趣类型的文 字内容.</span></p>
</div>
<div class="expert-case-item">
<div class="case-img"><img src="../../assets/images/home/expert/detail.jpg" alt=""></div>
<h3><span>案例1：</span>完美的与湖北工业相遇</h3>
<p><span>录取结果：</span><span>604，超专业线4分，湖北工业大学电子工程 专业</span></p>
<p><span>专业定位：</span><span>兴趣纬度</span> </p>
<p><span>兴趣类型：</span><span>这里展示兴趣类型的文字内容，这里展示兴趣类型的文字内容，这里展示兴趣类型的文 字内容.</span></p>
</div>
<div class="expert-case-item">
<div class="case-img"><img src="../../assets/images/home/expert/detail.jpg" alt=""></div>
<h3><span>案例1：</span>完美的与湖北工业相遇</h3>
<p><span>录取结果：</span><span>604，超专业线4分，湖北工业大学电子工程 专业</span></p>
<p><span>专业定位：</span><span>兴趣纬度</span> </p>
<p><span>兴趣类型：</span><span>这里展示兴趣类型的文字内容，这里展示兴趣类型的文字内容，这里展示兴趣类型的文 字内容.</span></p>
</div>
<div class="expert-case-item">
<div class="case-img"><img src="../../assets/images/home/expert/detail.jpg" alt=""></div>
<h3><span>案例1：</span>完美的与湖北工业相遇</h3>
<p><span>录取结果：</span><span>604，超专业线4分，湖北工业大学电子工程 专业</span></p>
<p><span>专业定位：</span><span>兴趣纬度</span> </p>
<p><span>兴趣类型：</span><span>这里展示兴趣类型的文字内容，这里展示兴趣类型的文字内容，这里展示兴趣类型的文 字内容.</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "edit-detail",
data() {
return {
isScrollTop: false
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
mounted() {
},
computed: {
},
methods: {
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>

403
src/views/consultant/edit.vue Normal file
View File

@ -0,0 +1,403 @@
<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="edit pull-content">
<div class="edit-list">
<div class="personal-item">
<p>姓名：<span>李四</span></p>
<p>等级：<span>金牌咨询师</span></p>
</div>
<!-- 形象照 -->
<div class="personal-item">
<p>形象照</p>
<div class="personal-txt">
<div class="personal-photo">
<span>上传图片的区域，照片必须使用固定的宽高比16:17，比如宽400像素，高425像素，或其它同等比例</span>
<!-- <img src="" alt=""> -->
</div>
<div class="edit-btn">上传</div>
</div>
</div>
<!-- 关键特征 -->
<div class="personal-item">
<p>关键特征1</p>
<div class="left">
<div class="personal-txt">
<!-- 文本显示 -->
<!-- <span>硕士</span> -->
<!-- 输入框 -->
<input class="personal-input" />
</div>
<!-- 按钮事件 -->
<div class="edit-btn">确认</div>
</div>
</div>
<div class="personal-item">
<p>关键特征2</p>
<div class="left">
<div class="personal-txt">
<!-- 文本显示 -->
<!-- <span>硕士</span> -->
<!-- 输入框 -->
<input class="personal-input" />
</div>
<!-- 按钮事件 -->
<div class="edit-btn">确认</div>
</div>
</div>
<div class="personal-item">
<p>关键特征3</p>
<div class="left">
<div class="personal-txt">
<!-- 文本显示 -->
<!-- <span>硕士</span> -->
<!-- 输入框 -->
<input class="personal-input" />
</div>
<!-- 按钮事件 -->
<div class="edit-btn">确认</div>
</div>
</div>
<div class="personal-item">
<p>关键特征4</p>
<div class="left">
<div class="personal-txt">
<!-- 文本显示 -->
<!-- <span>硕士</span> -->
<!-- 输入框 -->
<input class="personal-input" />
</div>
<!-- 按钮事件 -->
<div class="edit-btn">确认</div>
</div>
</div>
<!-- 服务口号 -->
<div class="personal-item">
<p>服务口号</p>
<div class="personal-txt">
<div class="personal-top">
<textarea class="kh-input" v-model="sloganData" placeholder="请输入服务口号"></textarea>
</div>
<div class="edit-btn">确认</div>
</div>
</div>
<!-- 个人简介 start -->
<div class="personal-item">
<p>个人简介</p>
<div class="personal-txt">
<div class="personal-top">
<textarea v-model="bodyData" placeholder="介绍您最闪光点，不要少于200字，不要多于300字"></textarea>
</div>
<div class="edit-btn">确认</div>
</div>
</div>
<!-- 服务范围补充说明 -->
<div class="personal-item">
<p>服务范围补充说明</p>
<div class="personal-txt">
<div class="personal-top">
<textarea v-model="explainData" placeholder="请填写补充说明"></textarea>
</div>
<div class="edit-btn">确认</div>
</div>
</div>
<!-- 请择3个重点服务省域 -->
<div class="personal-item">
<p>请择3个重点服务省域</p>
<div class="personal-txt">
<div class="city-item">
<div>重点服务省域1：</div>
<input type="text" v-model="provinceData[cityIndex1].title" readonly="readonly" @click="openCity1()"/>
</div>
<div class="city-item">
<div>重点服务省域2：</div>
<input type="text" v-model="provinceData[cityIndex2].title" readonly="readonly" @click="openCity2()"/>
</div>
<div class="city-item">
<div>重点服务省域3：</div>
<input type="text" v-model="provinceData[cityIndex3].title" readonly="readonly" @click="openCity3()"/>
</div>
</div>
</div>
<!-- 服务价格（您是专家级咨询师可自由定价） -->
<div class="personal-item bottom-box">
<p>服务价格（您是专家级咨询师可自由定价）</p>
<div class="personal-txt">
<div class="price-item">
<div> 北京、上海</div>
<input type="text" v-model="priceData[priceIndex1].title" readonly="readonly" @click="openPrice1()"/>
</div>
<div class="price-item">
<div>天津、重庆、江苏、浙江、广东、福建</div>
<input type="text" v-model="priceData[priceIndex2].title" readonly="readonly" @click="openPrice2()"/>
</div>
<div class="price-item">
<div>辽宁、河北、山东、海南、湖北、湖南</div>
<input type="text" v-model="priceData[priceIndex3].title" readonly="readonly" @click="openPrice3()"/>
</div>
<div class="price-item">
<div>其他省域(老高考)</div>
<input type="text" v-model="priceData[priceIndex4].title" readonly="readonly" @click="openPrice4()"/>
</div>
<div class="edit-btn">确认</div>
</div>
</div>
</div>
</div>
<div class="preview-btns">
<span>预览列表页效果</span>
<span>预览详情页效果</span>
</div>
<!-- 地址弹出框1 -->
<div class="addr-select-bg" v-show="isCity1" @click="isCity1=!isCity1"></div>
<div class="addr-select-item" v-show="isCity1">
<div class="addr-btns">
<span>请选择城市</span>
<span @click="isCity1=!isCity1">取消</span>
</div>
<ul>
<li :class="{'checked':index == cityIndex1}" @click="getCityValue1(index,item)" v-for="(item,index) in provinceData" :key="index">{{item.title}}<img v-show="index==cityIndex1" src="../../assets/images/home/expert/yes.png"></li>
</ul>
</div>
<!-- 地址弹出框2 -->
<div class="addr-select-bg" v-show="isCity2" @click="isCity2=!isCity2"></div>
<div class="addr-select-item" v-show="isCity2">
<div class="addr-btns">
<span>请选择城市</span>
<span @click="isCity2=!isCity2">取消</span>
</div>
<ul>
<li :class="{'checked':index == cityIndex2}" @click="getCityValue2(index,item)" v-for="(item,index) in provinceData" :key="index">{{item.title}}<img v-show="index==cityIndex2" src="../../assets/images/home/expert/yes.png"></li>
</ul>
</div>
<!-- 地址弹出框3 -->
<div class="addr-select-bg" v-show="isCity3" @click="isCity3=!isCity3"></div>
<div class="addr-select-item" v-show="isCity3">
<div class="addr-btns">
<span>请选择城市</span>
<span @click="isCity3=!isCity3">取消</span>
</div>
<ul>
<li :class="{'checked':index == cityIndex3}" @click="getCityValue3(index,item)" v-for="(item,index) in provinceData" :key="index">{{item.title}}<img v-show="index==cityIndex3" src="../../assets/images/home/expert/yes.png"></li>
</ul>
</div>
<!-- 价格弹出框1 -->
<div class="addr-select-bg" v-show="isPrice1" @click="isPrice1=!isPrice1"></div>
<div class="addr-select-item" v-show="isPrice1">
<div class="addr-btns">
<span>请选择价格</span>
<span @click="isPrice1=!isPrice1">取消</span>
</div>
<ul>
<li :class="{'checked':index == priceIndex1}" @click="getPriceValue1(index,item)" v-for="(item,index) in priceData" :key="index">{{item.title}}<img v-show="index==priceIndex1" src="../../assets/images/home/expert/yes.png"></li>
</ul>
</div>
<!-- 价格弹出框2 -->
<div class="addr-select-bg" v-show="isPrice2" @click="isPrice2=!isPrice2"></div>
<div class="addr-select-item" v-show="isPrice2">
<div class="addr-btns">
<span>请选择价格</span>
<span @click="isPrice2=!isPrice2">取消</span>
</div>
<ul>
<li :class="{'checked':index == priceIndex2}" @click="getPriceValue2(index,item)" v-for="(item,index) in priceData" :key="index">{{item.title}}<img v-show="index==priceIndex2" src="../../assets/images/home/expert/yes.png"></li>
</ul>
</div>
<!-- 价格弹出框3 -->
<div class="addr-select-bg" v-show="isPrice3" @click="isPrice3=!isPrice3"></div>
<div class="addr-select-item" v-show="isPrice3">
<div class="addr-btns">
<span>请选择价格</span>
<span @click="isPrice3=!isPrice3">取消</span>
</div>
<ul>
<li :class="{'checked':index == priceIndex3}" @click="getPriceValue3(index,item)" v-for="(item,index) in priceData" :key="index">{{item.title}}<img v-show="index==priceIndex3" src="../../assets/images/home/expert/yes.png"></li>
</ul>
</div>
<!-- 价格弹出框4 -->
<div class="addr-select-bg" v-show="isPrice4" @click="isPrice4=!isPrice4"></div>
<div class="addr-select-item" v-show="isPrice4">
<div class="addr-btns">
<span>请选择价格</span>
<span @click="isPrice4=!isPrice4">取消</span>
</div>
<ul>
<li :class="{'checked':index == priceIndex4}" @click="getPriceValue4(index,item)" v-for="(item,index) in priceData" :key="index">{{item.title}}<img v-show="index==priceIndex4" src="../../assets/images/home/expert/yes.png"></li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "edit",
data(){
return {
isScrollTop: false,
sloganData: '',
bodyData: '',
explainData: '',
isCity1: false, //城市列表是否显示
provinceData:[
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'重庆'},
{title:'山西'},
{title:'贵州'},
{title:'河南'},
{title:'江西'},
{title:'宁夏'},
{title:'香港'},
{title:'台湾'},
{title:'澳门'}
],
cityIndex1: 0,
cityValue1:'', //选择城市编号
isCity2: false, //城市列表是否显示
cityIndex2: 0,
cityValue2:'', //选择城市编号
isCity3: false, //城市列表是否显示
cityIndex3: 0,
cityValue3:'', //选择城市编号
// 价格区间
priceData:[
{title:'3000-5000'},
{title:'5000-8000'},
{title:'8000-12000'},
{title:'12000-15000'},
{title:'15000-18000'},
{title:'18000-22000'}
],
isPrice1: false, //价格列表是否显示
priceIndex1: 0,
priceValue1:'', //选择价格值
isPrice2: false, //价格列表是否显示
priceIndex2: 0,
priceValue2:'', //选择价格值
isPrice3: false, //价格列表是否显示
priceIndex3: 0,
priceValue3:'', //选择价格值
isPrice4: false, //价格列表是否显示
priceIndex4: 0,
priceValue4:'', //选择价格值
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
methods:{
// 城市选择
openCity1(){
this.isCity1=!this.isCity1;
},
getCityValue1(index,item){
this.cityValue1 = item.title;
this.cityIndex1 = index;
this.isCity1=false;
},
openCity2(){
this.isCity2=!this.isCity2;
},
getCityValue2(index,item){
this.cityValue2 = item.title;
this.cityIndex2 = index;
this.isCity2=false;
},
openCity3(){
this.isCity3=!this.isCity3;
},
getCityValue3(index,item){
this.cityValue3 = item.title;
this.cityIndex3 = index;
this.isCity3=false;
},
// 价格选择
openPrice1(){
this.isPrice1=!this.isPrice1;
},
getPriceValue1(index,item){
this.priceValue1 = item.title;
this.priceIndex1 = index;
this.isPrice1=false;
},
openPrice2(){
this.isPrice2=!this.isPrice2;
},
getPriceValue2(index,item){
this.priceValue2 = item.title;
this.priceIndex2 = index;
this.isPrice2=false;
},
openPrice3(){
this.isPrice3=!this.isPrice3;
},
getPriceValue3(index,item){
this.priceValue3 = item.title;
this.priceIndex3 = index;
this.isPrice3=false;
},
openPrice4(){
this.isPrice4=!this.isPrice4;
},
getPriceValue4(index,item){
this.priceValue4 = item.title;
this.priceIndex4 = index;
this.isPrice4=false;
},
// 页面跳转
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>

150
src/views/consultant/index.vue Normal file
View File

@ -0,0 +1,150 @@
<template>
<div class="content my-content">
<!-- 头部 -->
<div :class="{'header':true,'scroll white':isScrollTop,'white':true}">
<div class="back"></div>
<div class="header-title">我的</div>
</div>
<div class="consultant pull-content">
<div class="consultant-photo">
<div>
<span><img src="../../assets/images/user/photo.png"></span>
<p>
<span><em>姓名：</em>李四</span>
<span><em>职称：</em>高级咨询师</span>
<span><em>电话：</em>18683958573</span>
</p>
</div>
<p @click="editInformation()">修改基本资料</p>
</div>
<div class="consultant-info">
<p><span>重点服务区域：</span>北京、上海</p>
<p><span>区域1的服务价格：</span>3000-12000</p>
<p><span>区域2的服务价格：</span>3000-12000</p>
<p><span>区域3的服务价格：</span>3000-12000</p>
<p><span>其他区域的服务价格：</span>3000-12000</p>
<p><span>服务口号：</span>教会孩子规划人生旅程，重要的是帮助TA构建终身学习的生活态度。</p>
</div>
<div class="case-administer">
<h3>案例管理</h3>
<span @click="addCase()">新增案例</span>
</div>
<ul class="consultant-case">
<li>
<span>封面图</span>
<span>标题</span>
<span>主案例</span>
<span>操作</span>
</li>
<li>
<span><img src="../../assets/images/home/expert/detail.jpg" alt=""></span>
<span><p>完美的与湖北工业相遇完美的与湖北业相遇</p></span>
<span>是</span>
<span>
<ins>
<em @click="editCase()">编辑</em>
<em>删除</em>
</ins>
</span>
</li>
<li>
<span><img src="../../assets/images/home/expert/detail.jpg" alt=""></span>
<span><p>完美的与湖北工业相遇</p></span>
<span>是</span>
<span>
<ins>
<em>编辑</em>
<em>删除</em>
</ins>
</span>
</li>
<li>
<span><img src="../../assets/images/home/expert/detail.jpg" alt=""></span>
<span><p>完美的与湖北工业相遇</p></span>
<span>是</span>
<span>
<ins>
<em>编辑</em>
<em>删除</em>
</ins>
</span>
</li>
<li>
<span><img src="../../assets/images/home/expert/detail.jpg" alt=""></span>
<span><p>完美的与湖北工业相遇</p></span>
<span>是</span>
<span>
<ins>
<em>编辑</em>
<em>删除</em>
</ins>
</span>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "consultant",
data(){
return {
isScrollTop: false,
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
methods:{
// 修改基本资料
editInformation(){
this.$router.push('/edit');
},
// 新增案例
addCase(){
this.$router.push('/case');
},
// 编辑案例
editCase(){
this.$router.push('/case');
},
// 页面跳转
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>

100
src/views/consultant/list.vue Normal file
View File

@ -0,0 +1,100 @@
<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="expert-list-all section">
<ul class="expert-list">
<li v-for="(item,index) in expertData" :key="index">
<div class="expert-list-con" @click="goPage('/expert/detail')">
<div class="expert-list-img"><img src="../../assets/images/home/index/expert.png" alt=""></div>
<div class="expert-list-txt">
<div class="title">
<h2>{{item.name}}</h2>
<span v-if="item.title">{{item.title}}</span>
</div>
<div class="integral">
<span>公益积分：{{item.integral}}</span>
<span>好评度：{{item.score}}</span>
</div>
<div class="honor">
<span v-for="(itemk,indexk) in item.honor" :key="indexk">{{itemk.title}}</span>
</div>
<div class="slogan">{{item.slogan}}</div>
</div>
</div>
<div class="expert-list-btns">
<div :class="{'btn':true}">向TA提问</div>
<div class="btn">查看详情</div>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "edit-list",
data(){
return {
isScrollTop: false,
isReceive: 1, //是否领取咨询机会
current: 0,
isConfirm: false,
expertData: [
{name:'赵晓',title:'金牌咨询师',imgsrc:'../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
{name:'赵晓',title:'专家咨询师',imgsrc:'../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
{name:'赵晓',title:'专家咨询师',imgsrc:'../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
{name:'赵晓',title:'专家咨询师',imgsrc:'../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
{name:'赵晓',title:'专家咨询师',imgsrc:'../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
{name:'赵晓',title:'专家咨询师',imgsrc:'../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
{name:'赵晓',title:'专家咨询师',imgsrc:'../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'}
],
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
methods:{
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;
}
}
},
goPage(path){
this.$router.push(path);
}
},
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>

77
src/views/home/evaluation/entrance.vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<div class="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="entrance pull-content list-section">
<div class="list-section">
<h3>这里展示专业定位测评的文字内容，专业定位测评 来帮你解读！高考志愿填报过程中，往往规划师老 师，会让考生和家长做一个专业定位测</h3>
<div class="entrance-tips">专业定位测评提示：你需要使用12-15分钟的时间，请 用第一感觉作答，勿做太多的思考！</div>
<div class="entrance-btns">
<span @click="goPage('/evaluation/question')">考生本人测评入口</span>
<span @click="goPage('/evaluation/question')">家长/亲属测评入口</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "evaluation-entrance",
data() {
return {
isScrollTop: false,
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
mounted() {
},
computed: {
},
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>

162
src/views/home/evaluation/index.vue Normal file
View File

@ -0,0 +1,162 @@
<template>
<div class="content main-content">
<!-- 头部 -->
<div :class="{'header':true,'scroll white':isScrollTop,'white':true}">
<div class="back"></div>
<div class="header-title">测评</div>
</div>
<div class="evaluation pull-content">
<div class="evaluation-list">
<div class="evaluation-item">
<h2>职业与专业定位整合测试（融合版）</h2>
<div class="evaluation-txt">
<span><img src="../../../assets/images/home/evaluation/evaluation-01.png" alt=""></span>
<p>从“兴趣”、“性格”、“能力”、“学科强弱”、“职业倾向“五大维度充分认知自己，依据测评结果推荐适合孩子的专业。由霍兰德职业兴趣测评、职业锚、多元智能、MBTI性格等四大测评整合而成，相对于各测评的完整版，题量有所精简，目的是为了更快完成测评。</p>
</div>
<div class="evaluation-bottom">
<span>测评时间：<em>20分钟</em></span>
<span>测评人数：<em>134人</em></span>
<span @click="toEntrance()">马上测试</span>
</div>
</div>
<div class="evaluation-item">
<h2>MBTI职业性格测试（完整版）</h2>
<div class="evaluation-txt">
<span><img src="../../../assets/images/home/evaluation/evaluation-02.png" alt=""></span>
<p>从“兴趣”、“性格”、“能力”、“学科强弱”、“职业倾向“五大维度充分认知自己，依据测评结果推荐适合孩子的专业。由霍兰德职业兴趣测评、职业锚、多元智能、MBTI性格等四大测评整合而成，相对于各测评的完整版，题量有所精简，目的是为了更快完成测评。</p>
</div>
<div class="evaluation-bottom">
<span>测评时间：<em>20分钟</em></span>
<span>测评人数：<em>134人</em></span>
<span @click="toEntrance()">马上测试</span>
</div>
</div>
<div class="evaluation-item">
<h2>霍兰德职业兴趣测评（完整版）</h2>
<div class="evaluation-txt">
<span><img src="../../../assets/images/home/evaluation/evaluation-03.png" alt=""></span>
<p>从“兴趣”、“性格”、“能力”、“学科强弱”、“职业倾向“五大维度充分认知自己，依据测评结果推荐适合孩子的专业。由霍兰德职业兴趣测评、职业锚、多元智能、MBTI性格等四大测评整合而成，相对于各测评的完整版，题量有所精简，目的是为了更快完成测评。</p>
</div>
<div class="evaluation-bottom">
<span>测评时间：<em>20分钟</em></span>
<span>测评人数：<em>134人</em></span>
<span @click="toEntrance()">马上测试</span>
</div>
</div>
<div class="evaluation-item">
<h2>DISC性格测评</h2>
<div class="evaluation-txt">
<span><img src="../../../assets/images/home/evaluation/evaluation-04.png" alt=""></span>
<p>从“兴趣”、“性格”、“能力”、“学科强弱”、“职业倾向“五大维度充分认知自己，依据测评结果推荐适合孩子的专业。由霍兰德职业兴趣测评、职业锚、多元智能、MBTI性格等四大测评整合而成，相对于各测评的完整版，题量有所精简，目的是为了更快完成测评。</p>
</div>
<div class="evaluation-bottom">
<span>测评时间：<em>20分钟</em></span>
<span>测评人数：<em>134人</em></span>
<span @click="toEntrance()">马上测试</span>
</div>
</div>
<div class="evaluation-item">
<h2>职业锚测评(完整版)</h2>
<div class="evaluation-txt">
<span><img src="../../../assets/images/home/evaluation/evaluation-05.png" alt=""></span>
<p>从“兴趣”、“性格”、“能力”、“学科强弱”、“职业倾向“五大维度充分认知自己，依据测评结果推荐适合孩子的专业。由霍兰德职业兴趣测评、职业锚、多元智能、MBTI性格等四大测评整合而成，相对于各测评的完整版，题量有所精简，目的是为了更快完成测评。</p>
</div>
<div class="evaluation-bottom">
<span>测评时间：<em>20分钟</em></span>
<span>测评人数：<em>134人</em></span>
<span @click="toEntrance()">马上测试</span>
</div>
</div>
<div class="evaluation-item">
<h2>多元智能测试（完整版）</h2>
<div class="evaluation-txt">
<span><img src="../../../assets/images/home/evaluation/evaluation-06.png" alt=""></span>
<p>从“兴趣”、“性格”、“能力”、“学科强弱”、“职业倾向“五大维度充分认知自己，依据测评结果推荐适合孩子的专业。由霍兰德职业兴趣测评、职业锚、多元智能、MBTI性格等四大测评整合而成，相对于各测评的完整版，题量有所精简，目的是为了更快完成测评。</p>
</div>
<div class="evaluation-bottom">
<span>测评时间：<em>20分钟</em></span>
<span>测评人数：<em>134人</em></span>
<span @click="toEntrance()">马上测试</span>
</div>
</div>
</div>
</div>
<div class="addr-select-bg" v-show="isTips" @click="isTips=!isTips"></div>
<div class="evaluation-tips" v-show="isTips">
<ul>
<li><span></span><p>根据你的实际情况作答并以最快速度完成 每道问题；</p></li>
<li><span></span><p>选择没有“对”与“错”之分；</p></li>
<li><span></span><p>选择更接近你平时的感受或行为的那项；</p></li>
<li><span></span><p>选择你是怎么做的，而不要选择你想要怎 样，以为会怎样;</p></li>
</ul>
<div class="tips-btn" @click="noTips()">下次不再提醒</div>
</div>
</div>
</template>
<script>
export default {
name: "evaluation",
data(){
return {
isScrollTop: false,
isTips: false,
isFirst: true, //是否弹出提示框
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
methods:{
toEntrance(){
if(this.isFirst){
this.isTips = !this.isTips;
}else{
this.$router.push('/evaluation/entrance');
}
},
//下次不再提醒
noTips(){
this.isFirst = !this.isFirst;
this.$router.push('/evaluation/entrance');
},
// 页面跳转
goPage(path){
this.isFirst == 1
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>

76
src/views/home/evaluation/question.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<div class="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">XXX测评</div>
</div>
<div class="question pull-content list-section">
<div class="question-item">
<div class="number"><span>12</span><em>/</em>80</div>
<h3>我最喜欢按兴致做事</h3>
<div class="question-btns">
<span @click="setQuestionEV()">完全相符合</span>
<span @click="setQuestionEV()">比较相符合</span>
<span @click="setQuestionEV()">不太好分辨</span>
<span @click="setQuestionEV()">比较不符合</span>
<span @click="setQuestionEV()">完全不符合</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "evaluation-question",
data() {
return {
isScrollTop: false,
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
mounted() {
},
computed: {
},
methods: {
// 滚动改变样式
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>

97
src/views/home/expert/ask.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<div class="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">向TA提问</div>
</div>
<div class="ask pull-content list-section">
<div class="ask-top">
<span><img src="../../../assets/images/home/expert/expert-list.jpg" ></span>
<p>请使用以下两种方式加入钉钉专属服务群，我 在您的专属服务群回答您的问题。</p>
</div>
<div class="ask-mode-item">
<span :class="{'active':isActive}" @click="isActive=!isActive">专属公益服务群二维码</span>
<span :class="{'active':!isActive}" @click="isActive=!isActive">专属公益服务群链接</span>
</div>
<div class="ask-mode-list">
<div class="ask-mode-txt" v-show="isActive">
<p>下载二维码并用钉钉扫一扫进入专属群</p>
<img src="../../../assets/images/home/expert/ewm.jpg" alt="">
<span>点击下载二维码</span>
</div>
<div class="ask-mode-txt" v-show="!isActive">
<p>专属群DingTalk链接<span>(复制此链接，在浏览器地址栏粘贴后打开钉钉， 自动进入专属群)</span></p>
<div class="mode-links">{{linkUrl}}</div>
<span @click="copyUrl()">点击复制此链接</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "expert-ask",
data() {
return {
isScrollTop: false,
isActive: true,
linkUrl: 'dingtalk://dingtalkclient/page/link?pc_slide=true&url=https%3A%2F%2Fh5.dingtalk.com%2Fservice-group%2Findex.html%3FjoinGroupCode%3Dp3cAnJVnxMMiPvkT1zJLiiup35T4nkdE3uNFJIiiUkGhZSCsiSL0qydvCuolCftWNT7C%23%2Fjoin-group'
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
mounted() {
},
computed: {
},
methods: {
// 复制链接
copyUrl(){
let input = document.createElement("input"); // 直接构建input
input.value = this.linkUrl; // 设置内容
document.body.appendChild(input); // 添加临时实例
input.select(); // 选择实例内容
document.execCommand("Copy"); // 执行复制
document.body.removeChild(input); // 删除临时实例
alert("链接复制成功")
},
// 滚动改变样式
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>

134
src/views/home/expert/detail.vue Normal file
View File

@ -0,0 +1,134 @@
<template>
<div class="content">
<!-- 头部 -->
<div :class="{'header detail-header':true,'scroll white':isScrollTop}">
<div class="back white-back" @click="$router.go(-1)"><img src="../../../assets/images/home/expert/back.png" alt=""></div>
<div class="header-title">专家详情</div>
</div>
<!-- 轮播图 -->
<div class="banner detail-banner">
<div class="detail-photo">
<span><img src="../../../assets/images/home/expert/expert-list.jpg" ></span>
<div class="detail-txt">
<h1>赵晓<span>专家咨询师</span></h1>
<p>
<span>中科院心理所</span>
<span>硕士</span>
<span>从业5年</span>
<span>熟悉新高考</span>
</p>
</div>
</div>
</div>
<div class="detail">
<div class="expert-abstract">
<h2>
<img src="../../../assets/images/home/expert/abstract-left.png">
<span>咨询理念</span>
<img src="../../../assets/images/home/expert/abstract-right.png" >
</h2>
<p>这里展示咨询理念的文字内容，这里展示咨询理念的 文字内容，这里展示咨询理念的文字内容，这里展示 咨询理念的文字内容，这里展示理</p>
</div>
<div class="detail-content detail-section">
<div class="expert-body">
<h2>个人简介</h2>
<span>
<p>期从事高考志愿填报研究工作，尤其是在准确定位考生、定量分析院校录取数据方面有独到见解，创立了“3/8线差法”，是各大网站及电视台教育频道的常邀嘉宾，多次接受有关期刊杂志专访。长期从事高考志愿填报研究工作。</p>
</span>
</div>
<div class="expert-region">
<h2>服务区域</h2>
<p>
全国，尤其擅长河南省、北京市、河北省、内蒙古自治区的志愿填报。
</p>
</div>
<div class="expert-case">
<h2>咨询案例</h2>
<div class="expert-case-list">
<div class="expert-case-item">
<div class="case-img"><img src="../../../assets/images/home/expert/detail.jpg" alt=""></div>
<h3><span>案例1：</span>完美的与湖北工业相遇</h3>
<p><span>录取结果：</span><span>604，超专业线4分，湖北工业大学电子工程 专业</span></p>
<p><span>专业定位：</span><span>兴趣纬度</span> </p>
<p><span>兴趣类型：</span><span>这里展示兴趣类型的文字内容，这里展示兴趣类型的文字内容，这里展示兴趣类型的文 字内容.</span></p>
</div>
<div class="expert-case-item">
<div class="case-img"><img src="../../../assets/images/home/expert/detail.jpg" alt=""></div>
<h3><span>案例1：</span>完美的与湖北工业相遇</h3>
<p><span>录取结果：</span><span>604，超专业线4分，湖北工业大学电子工程 专业</span></p>
<p><span>专业定位：</span><span>兴趣纬度</span> </p>
<p><span>兴趣类型：</span><span>这里展示兴趣类型的文字内容，这里展示兴趣类型的文字内容，这里展示兴趣类型的文 字内容.</span></p>
</div>
<div class="expert-case-item">
<div class="case-img"><img src="../../../assets/images/home/expert/detail.jpg" alt=""></div>
<h3><span>案例1：</span>完美的与湖北工业相遇</h3>
<p><span>录取结果：</span><span>604，超专业线4分，湖北工业大学电子工程 专业</span></p>
<p><span>专业定位：</span><span>兴趣纬度</span> </p>
<p><span>兴趣类型：</span><span>这里展示兴趣类型的文字内容，这里展示兴趣类型的文字内容，这里展示兴趣类型的文 字内容.</span></p>
</div>
<div class="expert-case-item">
<div class="case-img"><img src="../../../assets/images/home/expert/detail.jpg" alt=""></div>
<h3><span>案例1：</span>完美的与湖北工业相遇</h3>
<p><span>录取结果：</span><span>604，超专业线4分，湖北工业大学电子工程 专业</span></p>
<p><span>专业定位：</span><span>兴趣纬度</span> </p>
<p><span>兴趣类型：</span><span>这里展示兴趣类型的文字内容，这里展示兴趣类型的文字内容，这里展示兴趣类型的文 字内容.</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "expert-detail",
data() {
return {
isScrollTop: false
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
mounted() {
},
computed: {
},
methods: {
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>

214
src/views/home/expert/index.vue Normal file
View File

@ -0,0 +1,214 @@
<template>
<div class="content main-content">
<!-- 头部 -->
<div :class="{'header':true,'scroll white':isScrollTop}">
<div class="back"></div>
<div class="header-title">专家</div>
</div>
<!-- 轮播图 -->
<div class="banner">
<img src="../../../assets/images/home/expert/banner.jpg" alt="">
</div>
<!-- 领取咨询机会 -->
<div class="expert-receive" @click="goPage('/information')" v-if="isReceive==0">
<img src="../../../assets/images/home/expert/notice-01.png" alt="">
<p>完善信息，立即领取免费咨询卡(1小时)</p>
<span></span>
</div>
<div class="expert-receive expert-receive-01" v-if="isReceive==1">
<img src="../../../assets/images/home/expert/notice-02.png" alt="">
<p>您已领取一小时免费咨询权益，可向专家进行提问</p>
</div>
<!-- 导航 -->
<div class="expert-nav-list section">
<ul class="expert-nav-item">
<li :class="{'active':current==index}" v-for="(item,index) in navData" :key="index" @click="changeNav(index)">{{item.title}}</li>
</ul>
<div class="addr-select">
<div @click="openAddr()">{{addrData[addrIndex].title}}</div>
</div>
</div>
<!-- 地址弹出框 -->
<div class="addr-select-bg" v-show="isAddr" @click="isAddr=!isAddr"></div>
<div class="addr-select-item" v-show="isAddr">
<div class="addr-btns">
<span>请选择城市</span>
<span @click="isAddr=!isAddr">取消</span>
</div>
<ul>
<li :class="{'checked':index == addrIndex}" @click="getAddrValue(index,item)" v-for="(item,index) in addrData" :key="index">{{item.title}}<img v-show="index==addrIndex" src="../../../assets/images/home/expert/yes.png"></li>
</ul>
</div>
<!-- 咨询师列表 -->
<div class="expert-list-all section">
<ul class="expert-list">
<li v-for="(item,index) in expertData" :key="index">
<div class="expert-list-con" @click="goPage('/expert/detail')">
<div class="expert-list-img"><img src="../../../assets/images/home/index/expert.png" alt=""></div>
<div class="expert-list-txt">
<div class="title">
<h2>{{item.name}}</h2>
<span v-if="item.title">{{item.title}}</span>
</div>
<div class="integral">
<span>公益积分：{{item.integral}}</span>
<span>好评度：{{item.score}}</span>
</div>
<div class="honor">
<span v-for="(itemk,indexk) in item.honor" :key="indexk">{{itemk.title}}</span>
</div>
<div class="slogan">{{item.slogan}}</div>
</div>
</div>
<div class="expert-list-btns">
<div :class="{'btn':true,'noservice':isReceive==0}" @click="toAsk()">向TA提问</div>
<div class="btn" @click="goPage('/expert/detail')">查看详情</div>
</div>
</li>
</ul>
</div>
<div class="my-confirm-bg" v-show="isConfirm" @click="isConfirm=!isConfirm"></div>
<div class="my-confirm" v-show="isConfirm">
<p>您还未领取免费咨询卡，请前往领取！</p>
<div class="confirm-btns">
<span @click="goPage('/information')">确认</span>
<span @click="closeEV()">取消</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "expert",
data(){
return {
isScrollTop: false,
isReceive: 1, //是否领取咨询机会
current: 0,
isConfirm: false,
navData: [
{title:'所有专家'},
{title:'最近活跃'},
{title:'多元升学'}
],
addrData:[
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'}
],
addrIndex: 0,
isAddr: false, //城市列表是否显示
addrValue:'', //选择城市编号
expertData: [
{name:'赵晓',title:'金牌咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'}
],
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
methods:{
// 导航切换
changeNav(index){
switch(index) {
case 0:
this.current = 0;
break;
case 1:
this.current = 1;
break;
case 2:
this.current = 2;
break;
case 3:
this.current = 3;
break;
}
},
// 城市选择
openAddr(){
this.isAddr=!this.isAddr;
},
getAddrValue(index,item){
this.addrValue = item.title;
this.addrIndex = index;
this.isAddr=false;
},
// 向TA提问
toAsk(){
if(this.isReceive == 1){
this.$router.push('/expert/ask');
}else if(this.isReceive == 0){
this.isConfirm = true;
}
},
// 关闭提示框
closeEV(){
this.isConfirm = false;
},
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;
}
}
},
goPage(path){
this.$router.push(path);
}
},
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>
.banner,
.banner img{
width: 100%;
}
</style>

62
src/views/home/start/index.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div class="start">
<img src="../../../assets/images/home/start/start.jpg" alt="">
<span>{{timeNumber}} 秒</span>
</div>
</template>
<script>
export default {
name: "start",
data() {
return {
timeNumber: 3
}
},
beforeCreate() {
setTimeout(() => {
this.timeNumber = 2;
}, 1000);
setTimeout(() => {
this.timeNumber = 1;
}, 2000);
setTimeout(() => {
this.$router.replace("/index");
}, 3000);
},
created() {
},
methods: {
}
}
</script>
<style scoped>
.start {
width: 100%;
min-height: 100vh;
position: relative;
z-index: 999;
}
.start>img {
width: 100%;
min-height: 100vh;
}
.start>span {
display: block;
width: 1rem;
line-height: .54rem;
text-align: center;
color: #FFFFFF;
font-size: .28rem;
border-radius: .27rem;
background-color: #3f5ee0;
position: fixed;
left: .24rem;
top: 1.14rem;
}
</style>

70
src/views/user/bind/index.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<div class="content bind-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="feedback-bg pull-content">
<ul class="phone-bind">
<li><span>手机号</span>18683958573</li>
<li><span>验证码</span><input type="text" value="" placeholder="请输入验证码"/><em>获取验证码</em></li>
</ul>
</div>
<div class="bind-btn">确定</div>
</div>
</template>
<script>
export default {
name: "bind",
data() {
return {
isScrollTop: false,
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
mounted() {
},
computed: {
},
methods: {
// 滚动改变样式
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>

69
src/views/user/feedback/index.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<div class="content bind-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="info-bg pull-content">
<div class="feedback-msg">
<textarea rows="" cols="" placeholder="请输入您反馈的内容"></textarea>
</div>
</div>
<div class="bind-btn">提交</div>
</div>
</template>
<script>
export default {
name: "feedback",
data() {
return {
isScrollTop: false,
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
mounted() {
},
computed: {
},
methods: {
// 滚动改变样式
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>

70
src/views/user/info/index.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<div class="content bind-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="info-bg pull-content">
<ul class="phone-info">
<li><span>头像</span><p><img src="../../../assets/images/user/photo.png"></p></li>
<li><span>昵称</span><input type="text" value="" placeholder="请输入昵称"/></li>
</ul>
</div>
<div class="bind-btn">提交</div>
</div>
</template>
<script>
export default {
name: "info",
data() {
return {
isScrollTop: false,
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
mounted() {
},
computed: {
},
methods: {
// 滚动改变样式
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>

238
src/views/user/information/index.vue Normal file
View File

@ -0,0 +1,238 @@
<template>
<div class="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="information pull-content list-section">
<ul class="information-list">
<li>
<span><em>*</em>姓名</span>
<p>
<input type="text" value="" placeholder="请输入姓名">
</p>
</li>
<li @click="openAddr()">
<span><em>*</em>考籍</span>
<p>
<input type="text" readonly="readonly" :value="addrData[addrIndex].title" placeholder="请选择考生所在省份">
<img src="../../../assets/images/home/expert/arrow-right.png" >
</p>
</li>
<li @click="openSex()">
<span><em>*</em>性别</span>
<p>
<input type="text" readonly="readonly" :value="sexData[sexIndex].title" placeholder="请输入性别">
<img src="../../../assets/images/home/expert/arrow-right.png" >
</p>
</li>
<li @click="openCategory()">
<span><em>*</em>考生类型</span>
<p>
<input type="text" readonly="readonly" :value="categoryData[categoryIndex].title" placeholder="请输入姓名">
<img src="../../../assets/images/home/expert/arrow-right.png" >
</p>
</li>
<li>
<span><em>*</em>选科组合</span>
<div class="course-list">
<span :class="{'checked':index==checkedIndex}" v-for="(item,index) in courseData" :key="index" @click="changeCourse(index)">{{item.title}}</span>
</div>
</li>
<li>
<span>预估/模考成绩</span>
<p>
<input type="text" value="" placeholder="请填写预估/模考成绩（非必填）">
</p>
</li>
<li>
<span>预估/模考省内排名</span>
<p>
<input type="text" value="" placeholder="请填写预估/模考省内排名（非必填）">
</p>
</li>
</ul>
</div>
<div class="information-btn" @click="setInformationEV()">确认</div>
<!-- 地址弹出框 -->
<div class="addr-select-bg" v-show="isAddr" @click="isAddr=!isAddr"></div>
<div class="addr-select-item" v-show="isAddr">
<div class="addr-btns">
<span>请选择城市</span>
<span @click="isAddr=!isAddr">取消</span>
</div>
<ul>
<li :class="{'checked':index == addrIndex}" @click="getAddrValue(index,item)" v-for="(item,index) in addrData" :key="index">{{item.title}}<img v-show="index==addrIndex" src="../../../assets/images/home/expert/yes.png"></li>
</ul>
</div>
<!-- 性别弹出框 -->
<div class="addr-select-bg" v-show="isSex" @click="isSex=!isSex"></div>
<div class="addr-select-item" v-show="isSex">
<div class="addr-btns">
<span>请选择性别</span>
<span @click="isSex=!isSex">取消</span>
</div>
<ul>
<li :class="{'checked':index == sexIndex}" @click="getSexValue(index,item)" v-for="(item,index) in sexData" :key="index">{{item.title}}<img v-show="index==sexIndex" src="../../../assets/images/home/expert/yes.png"></li>
</ul>
</div>
<!-- 考生类别弹出框 -->
<div class="addr-select-bg" v-show="isCategory" @click="isCategory=!isCategory"></div>
<div class="addr-select-item" v-show="isCategory">
<div class="addr-btns">
<span>请选择考生类别</span>
<span @click="isCategory=!isCategory">取消</span>
</div>
<ul>
<li :class="{'checked':index == categoryIndex}" @click="getCategoryValue(index,item)" v-for="(item,index) in categoryData" :key="index">{{item.title}}<img v-show="index==categoryIndex" src="../../../assets/images/home/expert/yes.png"></li>
</ul>
</div>
<!-- 咨询卡弹出框 -->
<div class="addr-select-bg" v-show="isSeekCard" @click="isSeekCard=!isSeekCard"></div>
<div class="seek-card" v-show="isSeekCard">
<img @click="goPage('/expert')" src="../../../assets/images/user/seekcard.png">
<img @click="isSeekCard=!isSeekCard" src="../../../assets/images/user/close.png">
</div>
</div>
</template>
<script>
export default {
name: "information",
data(){
return {
isScrollTop: false,
addrData:[
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'}
],
addrIndex: 0,
isAddr: false, //城市列表是否显示
addrValue:'', //选择城市编号
sexData:[
{title:'男'},
{title:'女'}
],
sexIndex: 0,
isSex: false, //性别列表是否显示
sexValue:'', //选择性别
categoryData:[
{title:'普通高考生'},
{title:'艺考生'},
{title:'体考生'}
],
categoryIndex: 0,
isCategory: false, //性别列表是否显示
categoryValue:'', //选择性别
courseData: [
{title:'物理'},
{title:'化学'},
{title:'生物'},
{title:'政治'},
{title:'历史'},
{title:'地理'}
],
checkedIndex: -1,
isSeekCard: false
}
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
methods:{
// 城市选择
openAddr(){
this.isAddr=!this.isAddr;
},
getAddrValue(index,item){
this.addrValue = item.title;
this.addrIndex = index;
this.isAddr=false;
},
// 选择性别
openSex(){
this.isSex=!this.isSex;
},
getSexValue(index,item){
this.sexValue = item.title;
this.sexIndex = index;
this.isSex=false;
},
//选择考生类别
openCategory(){
this.isCategory=!this.isCategory;
},
getCategoryValue(index,item){
this.categoryValue = item.title;
this.categoryIndex = index;
this.isCategory=false;
},
// 选择学科
changeCourse(index){
this.checkedIndex = index
},
// 提交
setInformationEV(){
this.isSeekCard = !this.isSeekCard;
},
// 跳转
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>

405
src/views/user/report/index.vue Normal file
View File

@ -0,0 +1,405 @@
<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>

161
src/views/user/ucenter/index.vue Normal file
View File

@ -0,0 +1,161 @@
<template>
<div class="content my-content main-content">
<!-- 头部 -->
<div :class="{ header: true, 'scroll white': isScrollTop }">
<div class="back"></div>
<div class="header-title">我的</div>
</div>
<!-- 轮播图 -->
<div class="banner my-banner">
<img src="../../../assets/images/user/banner.jpg" alt="" />
<div class="my-photo">
<span><img src="../../../assets/images/user/photo.png" /></span>
<p>张桑</p>
</div>
</div>
<!-- 免费咨询卡 -->
<div class="user-receive" @click="toPage()" v-if="isUse == 0">
<img src="../../../assets/images/user/card.png" alt="" />
<div class="receive-txt">
<span class="use-btn" v-if="isReceive == 1">立即使用</span>
<span class="receive-btn" v-if="isReceive == 0">立即领取</span>
<p>有效期：2022.2.1-2022.2.15</p>
</div>
</div>
<div class="line" v-if="isReceive == 1"></div>
<ul class="student-information">
<li @click="goPage('/bind')">
<span
><img src="../../../assets/images/user/icon-phone.png" alt=""
/></span>
<p>手机号<em>18683958573</em></p>
<img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
</li>
<li @click="goPage('/info')">
<span
><img src="../../../assets/images/user/icon-student.png" alt=""
/></span>
<p>考生信息</p>
<img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
</li>
</ul>
<div class="feedback" @click="goPage('/feedback')">
<span
><img src="../../../assets/images/user/icon-feedback.png" alt=""
/></span>
<p>意见和反馈</p>
<img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
</div>
<div :class="{ 'my-report': true, open: isOpen }" @click="isOpen = !isOpen">
<span
><img src="../../../assets/images/user/icon-report.png" alt=""
/></span>
<p>我的报告</p>
<img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
</div>
<ul :class="{ 'report-list': true, open: isOpen }">
<li @click="goPage('/report')">
<p>职业与专业定位整合测试（融合版）</p>
<span>2022-05-12 13:28</span>
</li>
<li @click="goPage('/report')">
<p>职业与专业定位整合测试（融合版）</p>
<span>2022-05-12 13:28</span>
</li>
<li @click="goPage('/report')">
<p>霍兰德职业兴趣测评（完整版）</p>
<span>2022-05-12 13:28</span>
</li>
<li @click="goPage('/report')">
<p>DISC性格测评</p>
<span>2022-05-12 13:28</span>
</li>
<li @click="goPage('/report')">
<p>职业与专业定位整合测试（融合版）</p>
<span>2022-05-12 13:28</span>
</li>
<li @click="goPage('/report')">
<p>职业与专业定位整合测试（融合版）</p>
<span>2022-05-12 13:28</span>
</li>
<li @click="goPage('/report')">
<p>霍兰德职业兴趣测评（完整版）</p>
<span>2022-05-12 13:28</span>
</li>
<li @click="goPage('/report')">
<p>DISC性格测评</p>
<span>2022-05-12 13:28</span>
</li>
</ul>
<div class="feedback-btn">退出登录</div>
</div>
</template>
<script>
export default {
name: "expert",
data() {
return {
isScrollTop: false,
isReceive: 1, //是否领取咨询机会
isUse: 0, //是否使用
isOpen: false,
};
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
methods: {
// 判断跳转方式
toPage() {
if (this.isReceive == 1) {
this.$router.push("/expert");
} else if (this.isReceive == 0) {
this.$router.push("/information");
} else {
return false;
}
},
// 页面跳转
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>
.banner,
.banner img {
width: 100%;
}
</style>

8
vue.config.js
View File

@ -4,19 +4,11 @@ module.exports = {
'/api': {
target: 'https://ypzy.emingren.com', // 你请求的第三方接口
changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: { // 路径重写，
'^/api': '' // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
}
}
}
}
}