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

底部组件添加

master
Lee-1203 2022-03-03 17:38:35 +08:00
parent 9ef6aeeb3e
commit 9bf0d50852
6 changed files with 382 additions and 387 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/tabbar.vue
View File

@ -13,8 +13,8 @@
<span><img src="../assets/images/home/main/evaluation.png" alt=""></span> <span><img src="../assets/images/home/main/evaluation.png" alt=""></span>
<p>测评</p> <p>测评</p>
</li> </li>
<li :class="{my:true, active:myStyle}" @click="goPage('/my')"> <li :class="{my:true, active:myStyle}" @click="goPage('/ucenter')">
<span><img src="../../../assets/images/home/main/my.png" alt=""></span> <span><img src="../assets/images/home/main/my.png" alt=""></span>
<p>我的</p> <p>我的</p>
</li> </li>
</ul> </ul>
@ -23,52 +23,50 @@
<script> <script>
export default { export default {
name: "home", name: "tabbar",
props: ['current'],
data() { data() {
return { return {
homeStyle: true, homeStyle: true,
expertStyle: false, expertStyle: false,
evaluationStyle: false, evaluationStyle: false,
myStyle: false, myStyle: false,
isLogin: false isLogin: false,
} }
}, },
created() { created() {
this.changeStyleNav(this.current);
}, },
beforeRouteUpdate(to, from, next) { beforeRouteUpdate(to, from, next) {
// console.log(to); this.changeStyleNav(this.current);
document.title = to.meta.title;
this.changeStyleNav(to.name);
next(); next();
}, },
activated() { activated() {
document.title = this.$route.meta.title; this.changeStyleNav(this.current);
this.changeStyleNav(this.$route.name);
}, },
methods: { methods: {
// 判断当前高亮 // 判断当前高亮
changeStyleNav(name) { changeStyleNav(number) {
switch (name) { switch (number) {
case "index": case 1:
this.homeStyle = true; this.homeStyle = true;
this.expertStyle = false; this.expertStyle = false;
this.evaluationStyle = false; this.evaluationStyle = false;
this.myStyle = false; this.myStyle = false;
break; break;
case "expert": case 2:
this.homeStyle = false; this.homeStyle = false;
this.expertStyle = true; this.expertStyle = true;
this.evaluationStyle = false; this.evaluationStyle = false;
this.myStyle = false; this.myStyle = false;
break; break;
case "evaluation": case 3:
this.homeStyle = false; this.homeStyle = false;
this.expertStyle = false; this.expertStyle = false;
this.evaluationStyle = true; this.evaluationStyle = true;
this.myStyle = false; this.myStyle = false;
break; break;
case "my": case 4:
this.homeStyle = false; this.homeStyle = false;
this.expertStyle = false; this.expertStyle = false;
this.evaluationStyle = false; this.evaluationStyle = false;

7
src/router/index.js
View File

@ -2,7 +2,7 @@ import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import login from '../views/login.vue' //登录 import login from '../views/login.vue' //登录
import index from '../views/index/index.vue' //登录 import index from '../views/index/index.vue' //首页
import verification from '../views/login/verification.vue' //手机验证 import verification from '../views/login/verification.vue' //手机验证
import start from '../views/home/start/index.vue' //开屏 import start from '../views/home/start/index.vue' //开屏
@ -30,12 +30,13 @@ import editdetail from '../views/consultant/detail.vue' //预览详情
Vue.use(VueRouter) Vue.use(VueRouter)
const routes = [{ const routes = [
{
path: '/', path: '/',
name: 'login', name: 'login',
component: login component: login
}, },
{ {
path: '/index', path: '/index',
name: 'index', name: 'index',
component: index component: index

5
src/views/home/evaluation/index.vue
View File

@ -91,12 +91,17 @@
</ul> </ul>
<div class="tips-btn" @click="noTips()">下次不再提醒</div> <div class="tips-btn" @click="noTips()">下次不再提醒</div>
</div> </div>
<tabbar :current="3"></tabbar>
</div> </div>
</template> </template>
<script> <script>
import tabbar from '../../../components/tabbar.vue'
export default { export default {
name: "evaluation", name: "evaluation",
components: {
tabbar
},
data(){ data(){
return { return {
isScrollTop: false, isScrollTop: false,

5
src/views/home/expert/index.vue
View File

@ -75,12 +75,17 @@
<span @click="closeEV()">取消</span> <span @click="closeEV()">取消</span>
</div> </div>
</div> </div>
<tabbar :current="2"></tabbar>
</div> </div>
</template> </template>
<script> <script>
import tabbar from '../../../components/tabbar.vue'
export default { export default {
name: "expert", name: "expert",
components: {
tabbar
},
data(){ data(){
return { return {
isScrollTop: false, isScrollTop: false,

417
src/views/index/index.vue
View File

@ -1,221 +1,210 @@
<template> <template>
<div class="content main-content"> <div class="content main-content">
<!-- 头部 --> <!-- 头部 -->
<div :class="{ header: true, 'scroll white': isScrollTop }"> <div :class="{ header: true, 'scroll white': isScrollTop }">
<div class="back"></div> <div class="back"></div>
<div class="header-title">首页</div> <div class="header-title">首页</div>
</div> </div>
<!-- 轮播图 --> <!-- 轮播图 -->
<div class="banner-wrap"> <div class="banner-wrap">
<div class="swiper-container" ref="swiper-container"> <div class="swiper-container" ref="swiper-container">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<img :src="host + bannerSrc" alt="" /> <img :src="host + bannerSrc" alt="" />
</div> </div>
</div> </div>
<div class="swiper-pagination" ref="swiper-pagination"></div> <div class="swiper-pagination" ref="swiper-pagination"></div>
</div> </div>
</div> </div>
<!-- 领取咨询卡 --> <!-- 领取咨询卡 -->
<div <div class="index-receive" @click="goPage('/information')" v-if="consult_amount == 0">
class="index-receive" <img src="../../assets/images/home/index/receive.jpg" alt="" />
@click="goPage('/information')" <span>完善信息，立即领取免费咨询卡(1小时)</span>
v-if="consult_amount == 0" </div>
> <!-- 专家 -->
<img src="../../assets/images/home/index/receive.jpg" alt="" /> <div class="index-expert section">
<span>完善信息，立即领取免费咨询卡(1小时)</span> <div class="index-title">
</div> <h2>专家<em>团队</em></h2>
<!-- 专家 --> <span @click="goPage('/expert')">查看更多</span>
<div class="index-expert section"> </div>
<div class="index-title"> <ul class="index-expert-list">
<h2>专家<em>团队</em></h2> <li v-for="(item, index) in expertData" :key="index">
<span @click="goPage('/expert')">查看更多</span> <div class="expert-img">
</div> <img :src="host + item.avatar" alt="" />
<ul class="index-expert-list"> </div>
<li v-for="(item, index) in expertData" :key="index"> <div class="expert-name">
<div class="expert-img"> {{ item.name }}<span>{{ item.keywords_list[1] }}</span>
<img :src="item.avatar" alt="" /> </div>
</div> <div class="expert-honor">
<div class="expert-name"> <span>{{ item.keywords_list[0] }}</span>
{{ item.name }}<span>{{ item.keywords_list[1] }}</span> <span>{{ item.keywords_list[1] }}</span>
</div> </div>
<div class="expert-honor"> </li>
<span>{{ item.keywords_list[0] }}</span> </ul>
<span>{{ item.keywords_list[1] }}</span> </div>
</div> <!-- 计划 -->
</li> <div class="index-plan">
</ul> <ul class="index-plan-list">
</div> <li v-for="(item, index) in planData" :key="index">
<!-- 计划 --> <img src="../../assets/images/home/index/plan-01.png" alt="" />
<div class="index-plan"> <p>{{ item.title }}</p>
<ul class="index-plan-list"> </li>
<li v-for="(item, index) in planData" :key="index"> </ul>
<img src="../../assets/images/home/index/plan-01.png" alt="" /> </div>
<p>{{ item.title }}</p> <!-- 测评 -->
</li> <div class="index-evaluation section">
</ul> <div class="index-title">
</div> <h2>专业<em>测评</em></h2>
<!-- 测评 --> <span @click="goPage('/evaluation')">查看更多</span>
<div class="index-evaluation section"> </div>
<div class="index-title"> <ul class="index-evaluation-list">
<h2>专业<em>测评</em></h2> <li @click="cpUrl()" v-for="(item, index) in evaluationData" :key="index">
<span @click="goPage('/evaluation')">查看更多</span> <div class="evaluation-img">
</div> <img src="../../assets/images/home/index/evaluation-01.png" alt="" />
<ul class="index-evaluation-list"> </div>
<li <p>{{ item.title }}</p>
@click="cpUrl()" <div class="evaluation-btn" @click="goPage()">进入测评</div>
v-for="(item, index) in evaluationData" </li>
:key="index" </ul>
> </div>
<div class="evaluation-img"> <!-- 直播 -->
<img <div class="index-live section">
src="../../assets/images/home/index/evaluation-01.png" <div class="index-title">
alt="" <h2>有谱<em>直播</em></h2>
/> <span @click="goPage()">查看更多</span>
</div> </div>
<p>{{ item.title }}</p> <ul class="index-live-list">
<div class="evaluation-btn" @click="goPage()">进入测评</div> <li><img src="../../assets/images/home/index/live-01.png" alt="" /></li>
</li> <li><img src="../../assets/images/home/index/live-02.png" alt="" /></li>
</ul> </ul>
</div> </div>
<!-- 直播 --> <!-- 头条 -->
<div class="index-live section"> <div class="index-headlines section">
<div class="index-title"> <div class="index-title">
<h2>有谱<em>直播</em></h2> <h2>有谱<em>头条</em></h2>
<span @click="goPage()">查看更多</span> <span @click="goPage()">查看更多</span>
</div> </div>
<ul class="index-live-list"> <ul class="index-headlines-list">
<li><img src="../../assets/images/home/index/live-01.png" alt="" /></li> <li v-for="(item, index) in headlinesData" :key="index">
<li><img src="../../assets/images/home/index/live-02.png" alt="" /></li> <p>{{ item.title }}</p>
</ul> <span>{{ item.time }}</span>
</div> </li>
<!-- 头条 --> </ul>
<div class="index-headlines section"> </div>
<div class="index-title"> <tabbar :current="1"></tabbar>
<h2>有谱<em>头条</em></h2> </div>
<span @click="goPage()">查看更多</span>
</div>
<ul class="index-headlines-list">
<li v-for="(item, index) in headlinesData" :key="index">
<p>{{ item.title }}</p>
<span>{{ item.time }}</span>
</li>
</ul>
</div>
</div>
</template> </template>
<script> <script>
export default { import tabbar from '../../components/tabbar.vue'
name: "index", export default {
data() { name: "index",
return { components: {
isScrollTop: false, tabbar
isReceive: 0, //是否完善资料 },
bannerSrc: "", data() {
expertData: [ return {
{ isScrollTop: false,
name: "赵晓", isReceive: 0, //是否完善资料
imgSrc: "", bannerSrc: "",
year: "从业5年", expertData: [],
honor: [{ title: "硕士" }, { title: "中科院" }], planData: [{
}, imgSrc: "",
{ title: "强基计划"
name: "赵晓", },
imgSrc: "", {
year: "从业3年", imgSrc: "",
honor: [{ title: "硕士" }, { title: "中科院" }], title: "综合评价"
}, },
{ {
name: "赵晓", imgSrc: "",
imgSrc: "", title: "专项计划"
year: "从业8年", },
honor: [{ title: "硕士" }, { title: "中科院" }], ],
}, evaluationData: [{
], imgSrc: "",
planData: [ title: "霍兰德职业兴趣测评"
{ imgSrc: "", title: "强基计划" }, },
{ imgSrc: "", title: "综合评价" }, {
{ imgSrc: "", title: "专项计划" }, imgSrc: "",
], title: "MBIT职业性格测试"
evaluationData: [ },
{ imgSrc: "", title: "霍兰德职业兴趣测评" }, ],
{ imgSrc: "", title: "MBIT职业性格测试" }, headlinesData: [{
], title: "全国各省市最好大学+王牌专业盘点",
headlinesData: [ time: "2022年2月12日"
{ title: "全国各省市最好大学+王牌专业盘点", time: "2022年2月12日" }, },
{ {
title: "批次、批次线、大类招生到底是什么？？20个名词帮 你快速了解", title: "批次、批次线、大类招生到底是什么？？20个名词帮 你快速了解",
time: "2022年2月12日", time: "2022年2月12日",
}, },
{ {
title: "教育部公布2021年度全国高等学校名单，共计3012所", title: "教育部公布2021年度全国高等学校名单，共计3012所",
time: "2022年2月12日", time: "2022年2月12日",
}, },
{ {
title: "人民日报权威解读：热门专业和相似专业如何区分！", title: "人民日报权威解读：热门专业和相似专业如何区分！",
time: "2022年2月12日", time: "2022年2月12日",
}, },
{ {
title: title: "比普通批低100多分！从高一准备到高三报考，2022 年强基计划最新报考指南",
"比普通批低100多分！从高一准备到高三报考，2022 年强基计划最新报考指南", time: "2022年2月12日",
time: "2022年2月12日", },
}, ],
], };
}; },
}, created() {
created() { this.isScroll = true;
this.isScroll = true; window.addEventListener("scroll", this.eventScrollTop);
window.addEventListener("scroll", this.eventScrollTop); this.consult_amount = JSON.parse(localStorage.userData).consult_amount;
this.consult_amount = JSON.parse(localStorage.userData).consult_amount; },
}, mounted() {
mounted() { this.getBanner();
this.getBanner(); this.getExpertData();
this.getExpertData(); },
}, computed: {},
computed: {}, methods: {
methods: { cpUrl() {},
cpUrl() {}, getBanner() {
getBanner() { let that = this;
let that = this; this.axios
this.axios .post(this.HOME + "/api/dictionary/get-slide-list", {
.post(this.HOME + "/api/dictionary/get-slide-list", { position: "h5_home_banner",
position: "h5_home_banner", })
}) .then(function(res) {
.then(function (res) { that.bannerSrc = res.data.data[0].src;
that.bannerSrc = res.data.data[0].src; });
}); },
}, eventScrollTop() {
eventScrollTop() { let scrollTop =
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
document.body.scrollTop || document.documentElement.scrollTop; if (scrollTop >= 5) {
if (scrollTop >= 5) { if (this.isScroll) {
if (this.isScroll) { this.isScroll = false;
this.isScroll = false; this.isScrollTop = true;
this.isScrollTop = true; }
} } else {
} else { if (!this.isScroll) {
if (!this.isScroll) { this.isScroll = true;
this.isScroll = true; this.isScrollTop = false;
this.isScrollTop = false; }
} }
} },
}, // 获取专家列表
// 获取专家列表 getExpertData() {
getExpertData() { let that = this;
let that = this; this.axios
this.axios .post(this.HOME + "/api/consumer/expert-list", {
.post(this.HOME + "/api/consumer/expert-list", { page: "1",
page: "1", size: "3",
size: "3", })
}) .then(function(res) {
.then(function (res) { console.log(res.data.data);
console.log(res.data.data); that.expertData = res.data.data.list;
that.expertData = res.data.data.list; });
}); },
}, },
}, };
};
</script> </script>
<style scoped> <style scoped>

303
src/views/user/ucenter/index.vue
View File

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