260 lines
7.2 KiB
Vue
260 lines
7.2 KiB
Vue
<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-wrap">
|
||
<div class="swiper-container" ref="swiper-container">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<img :src="host + bannerSrc" />
|
||
</div>
|
||
</div>
|
||
<div class="swiper-pagination" ref="swiper-pagination"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 领取咨询卡 -->
|
||
<div class="index-receive" @click="goPage('/information')" v-if="consult_amount == 0">
|
||
<img src="../../assets/images/home/index/receive.jpg" />
|
||
<span>完善信息，立即领取免费咨询卡(1小时)</span>
|
||
</div>
|
||
<!-- 专家 -->
|
||
<div class="index-expert section">
|
||
<div class="index-title">
|
||
<h2>专家<em>团队</em></h2>
|
||
<span @click="goPage('/expert')">查看更多</span>
|
||
</div>
|
||
<ul class="index-expert-list">
|
||
<li v-for="(item, index) in expertData" :key="index">
|
||
<div class="expert-img">
|
||
<img :src="host + item.avatar"/>
|
||
</div>
|
||
<div class="expert-name">
|
||
{{item.name}}<span>{{item.work_time}}</span>
|
||
</div>
|
||
<div class="expert-honor">
|
||
<span>{{item.home_keywords_list[0]}}</span>
|
||
<span>{{item.home_keywords_list[1]}}</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 计划 -->
|
||
<div class="index-plan">
|
||
<ul class="index-plan-list">
|
||
<li>
|
||
<img src="../../assets/images/home/index/plan-01.png"/>
|
||
<p>强基计划</p>
|
||
</li>
|
||
<li>
|
||
<img src="../../assets/images/home/index/plan-02.png"/>
|
||
<p>综合评价</p>
|
||
</li>
|
||
<li>
|
||
<img src="../../assets/images/home/index/plan-03.png"/>
|
||
<p>专项计划</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 测评 -->
|
||
<div class="index-evaluation section">
|
||
<div class="index-title">
|
||
<h2>专业<em>测评</em></h2>
|
||
<span @click="goPage('/evaluation')">查看更多</span>
|
||
</div>
|
||
<ul class="index-evaluation-list">
|
||
<li>
|
||
<div class="evaluation-img">
|
||
<img src="../../assets/images/home/index/evaluation-01.png"/>
|
||
</div>
|
||
<p>霍兰德职业兴趣测评</p>
|
||
<div class="evaluation-btn" @click="toEvaluation()">进入测评</div>
|
||
</li>
|
||
<li>
|
||
<div class="evaluation-img">
|
||
<img src="../../assets/images/home/index/evaluation-02.png"/>
|
||
</div>
|
||
<p>MBIT职业性格测试</p>
|
||
<div class="evaluation-btn" @click="toEvaluation()">进入测评</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 直播 -->
|
||
<div class="index-live section">
|
||
<div class="index-title">
|
||
<h2>有谱<em>直播</em></h2>
|
||
<span>查看更多</span>
|
||
</div>
|
||
<ul class="index-live-list">
|
||
<li>
|
||
<a href="https://h5.dingtalk.com/live/video_lesson.htm?itemId=aed09721-d784-4c70-8219-5466246ae2a9&dd_nav_bgcolor=FF2C2D2F&feedProperty=1&feedId=aed09721-d784-4c70-8219-5466246ae2a9&mcnId=9428021620221302755#/live"><img src="../../assets/images/home/index/live-01.png"/></a>
|
||
</li>
|
||
<li>
|
||
<a href="https://mp.weixin.qq.com/s/v5NEPtYRj9Ijwm3tk9g-yg"><img src="../../assets/images/home/index/live-02.png"/></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 头条 -->
|
||
<div class="index-headlines section">
|
||
<div class="index-title">
|
||
<h2>有谱<em>头条</em></h2>
|
||
<span>查看更多</span>
|
||
</div>
|
||
<ul class="index-headlines-list">
|
||
<li @click="goPage('/text01')">
|
||
<p>如何让孩子找到有幸福感的专业方向和职业目标？</p>
|
||
<!-- <span>{{ item.time }}</span> -->
|
||
</li>
|
||
<li @click="goPage('/text02')">
|
||
<p>生涯规划师的服务伦理，以及处理与客户价值判断不一致的方法探讨</p>
|
||
<!-- <span>{{ item.time }}</span> -->
|
||
</li>
|
||
<li @click="goPage('/text03')">
|
||
<p>升学规划师能力的“冰山结构”</p>
|
||
<!-- <span>{{ item.time }}</span> -->
|
||
</li>
|
||
<li @click="goPage('/text04')">
|
||
<p>双减政策，减“教”不减“学”；生涯规划的目标是点燃学生求学热情，真正体现教育情怀</p>
|
||
<!-- <span>{{ item.time }}</span> -->
|
||
</li>
|
||
<li @click="goPage('/text05')">
|
||
<p>强基计划、综合评价报名材料如何准备</p>
|
||
<!-- <span>{{ item.time }}</span> -->
|
||
</li>
|
||
<li @click="goPage('/text06')">
|
||
<p>数字化生涯规划师：获权威认证，服务钉钉千万考生与家长</p>
|
||
<!-- <span>{{ item.time }}</span> -->
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<tabbar :current="1"></tabbar>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import tabbar from "../../components/tabbar.vue";
|
||
export default {
|
||
name: "index",
|
||
components: {
|
||
tabbar,
|
||
},
|
||
data() {
|
||
return {
|
||
isScrollTop: false,
|
||
consult_amount: 0, //是否完善资料
|
||
bannerSrc: "",
|
||
expertData: [], //专家列表
|
||
headlinesData: [{
|
||
title: "全国各省市最好大学+王牌专业盘点",
|
||
time: "2022年2月12日"
|
||
},
|
||
{
|
||
title: "批次、批次线、大类招生到底是什么？？20个名词帮 你快速了解",
|
||
time: "2022年2月12日",
|
||
},
|
||
{
|
||
title: "教育部公布2021年度全国高等学校名单，共计3012所",
|
||
time: "2022年2月12日",
|
||
},
|
||
{
|
||
title: "人民日报权威解读：热门专业和相似专业如何区分！",
|
||
time: "2022年2月12日",
|
||
},
|
||
{
|
||
title: "比普通批低100多分！从高一准备到高三报考，2022 年强基计划最新报考指南",
|
||
time: "2022年2月12日",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
created() {
|
||
this.isScroll = true;
|
||
window.addEventListener("scroll", this.eventScrollTop);
|
||
this.consult_amount = (JSON.parse(localStorage.getItem("centerUserData"))).consult_amount;
|
||
console.log(this.consult_amount,3636)
|
||
},
|
||
mounted() {
|
||
this.getBanner();
|
||
this.getExpertData();
|
||
},
|
||
computed: {},
|
||
methods: {
|
||
// 测试跳转
|
||
toEvaluation() {
|
||
this.$router.push({
|
||
path: "/evaluation",
|
||
});
|
||
},
|
||
|
||
// 获取banner
|
||
getBanner() {
|
||
let that = this;
|
||
this.axios
|
||
.post(this.HOME + "/api/dictionary/get-slide-list", {
|
||
position: "h5_home_banner",
|
||
})
|
||
.then(function(res) {
|
||
that.bannerSrc = res.data.data[0].src;
|
||
});
|
||
},
|
||
|
||
|
||
// 获取专家列表
|
||
getExpertData() {
|
||
let that = this;
|
||
this.axios
|
||
.post(this.HOME + "/api/consumer/expert-list", {
|
||
page: "1",
|
||
size: "3",
|
||
is_home: 1,
|
||
})
|
||
.then(function(res) {
|
||
let list = res.data.data.list;
|
||
console.log(list,123)
|
||
let newArray = [];
|
||
list.forEach(item=>{
|
||
let obj = {
|
||
id: item.id,
|
||
work_time:item.work_time,
|
||
avatar: item.avatar,
|
||
name: item.name,
|
||
keywords_list: item.keywords_list,
|
||
home_keywords_list: item.home_keywords_list
|
||
}
|
||
newArray.push(obj);
|
||
})
|
||
that.expertData = newArray;
|
||
});
|
||
},
|
||
|
||
// 跳转页面
|
||
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;
|
||
}
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
</style>
|