底部组件添加

src/components/tabbar.vue

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

src/router/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 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 start from '../views/home/start/index.vue' //开屏
 
@@ -30,7 +30,8 @@ import editdetail from '../views/consultant/detail.vue' //预览详情
 
 Vue.use(VueRouter)
 
-const routes = [{
+const routes = [
+	{
 		path: '/',
 		name: 'login',
 		component: login

src/views/home/evaluation/index.vue

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

src/views/home/expert/index.vue

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

src/views/index/index.vue

@@ -17,11 +17,7 @@
 			</div>
 		</div>
 		<!-- 领取咨询卡 -->
-    <div
+		<div class="index-receive" @click="goPage('/information')" v-if="consult_amount == 0">
-      class="index-receive"
-      @click="goPage('/information')"
-      v-if="consult_amount == 0"
-    >
 			<img src="../../assets/images/home/index/receive.jpg" alt="" />
 			<span>完善信息，立即领取免费咨询卡(1小时)</span>
 		</div>
@@ -34,7 +30,7 @@
 			<ul class="index-expert-list">
 				<li v-for="(item, index) in expertData" :key="index">
 					<div class="expert-img">
-            <img :src="item.avatar" alt="" />
+						<img :src="host + item.avatar" alt="" />
 					</div>
 					<div class="expert-name">
 						{{ item.name }}<span>{{ item.keywords_list[1] }}</span>
@@ -62,16 +58,9 @@
 				<span @click="goPage('/evaluation')">查看更多</span>
 			</div>
 			<ul class="index-evaluation-list">
-        <li
+				<li @click="cpUrl()" v-for="(item, index) in evaluationData" :key="index">
-          @click="cpUrl()"
-          v-for="(item, index) in evaluationData"
-          :key="index"
-        >
 					<div class="evaluation-img">
-            <img
+						<img src="../../assets/images/home/index/evaluation-01.png" alt="" />
-              src="../../assets/images/home/index/evaluation-01.png"
-              alt=""
-            />
 					</div>
 					<p>{{ item.title }}</p>
 					<div class="evaluation-btn" @click="goPage()">进入测评</div>
@@ -102,48 +91,49 @@
 				</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,
 				isReceive: 0, //是否完善资料
 				bannerSrc: "",
-      expertData: [
+				expertData: [],
-        {
+				planData: [{
-          name: "赵晓",
 						imgSrc: "",
-          year: "从业5年",
+						title: "强基计划"
-          honor: [{ title: "硕士" }, { title: "中科院" }],
 					},
 					{
-          name: "赵晓",
 						imgSrc: "",
-          year: "从业3年",
+						title: "综合评价"
-          honor: [{ title: "硕士" }, { title: "中科院" }],
 					},
 					{
-          name: "赵晓",
 						imgSrc: "",
-          year: "从业8年",
+						title: "专项计划"
-          honor: [{ title: "硕士" }, { title: "中科院" }],
 					},
 				],
-      planData: [
+				evaluationData: [{
-        { imgSrc: "", title: "强基计划" },
+						imgSrc: "",
-        { imgSrc: "", title: "综合评价" },
+						title: "霍兰德职业兴趣测评"
-        { imgSrc: "", title: "专项计划" },
+					},
+					{
+						imgSrc: "",
+						title: "MBIT职业性格测试"
+					},
 				],
-      evaluationData: [
+				headlinesData: [{
-        { imgSrc: "", title: "霍兰德职业兴趣测评" },
+						title: "全国各省市最好大学+王牌专业盘点",
-        { imgSrc: "", title: "MBIT职业性格测试" },
+						time: "2022年2月12日"
-      ],
+					},
-      headlinesData: [
-        { title: "全国各省市最好大学+王牌专业盘点", time: "2022年2月12日" },
 					{
 						title: "批次、批次线、大类招生到底是什么？？20个名词帮 你快速了解",
 						time: "2022年2月12日",
@@ -157,8 +147,7 @@ export default {
 						time: "2022年2月12日",
 					},
 					{
-          title:
+						title: "比普通批低100多分！从高一准备到高三报考，2022 年强基计划最新报考指南",
-            "比普通批低100多分！从高一准备到高三报考，2022 年强基计划最新报考指南",
 						time: "2022年2月12日",
 					},
 				],

src/views/user/ucenter/index.vue

@@ -25,31 +25,23 @@
 		<div class="line" v-if="isReceive == 1"></div>
 		<ul class="student-information">
 			<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=""
-        /></span>
 				<p>手机号<em>18683958573</em></p>
 				<img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
 			</li>
 			<li @click="goPage('/info')">
-        <span
+				<span><img src="../../../assets/images/user/icon-student.png" alt="" /></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
+			<span><img src="../../../assets/images/user/icon-feedback.png" alt="" /></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
+			<span><img src="../../../assets/images/user/icon-report.png" alt="" /></span>
-        ><img src="../../../assets/images/user/icon-report.png" alt=""
-      /></span>
 			<p>我的报告</p>
 			<img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
 		</div>
@@ -88,12 +80,17 @@
 			</li>
 		</ul>
 		<div class="feedback-btn">退出登录</div>
+		<tabbar :current="4"></tabbar>
 	</div>
 </template>
 
 <script>
+	import tabbar from '../../../components/tabbar.vue'
 	export default {
 		name: "expert",
+		components: {
+			tabbar
+		},
 		data() {
 			return {
 				isScrollTop: false,