|
@@ -87,13 +87,43 @@
|
|
|
<div class="left-box">
|
|
|
<div class="left-box__header">课程导航</div>
|
|
|
<div class="left-box__body">
|
|
|
+ <div class="bg"></div>
|
|
|
+ <div class="slide-list">
|
|
|
+ <div
|
|
|
+ class="slide-list__item"
|
|
|
+ v-for="(type, typeItem) in typeList"
|
|
|
+ :key="'type' + typeItem"
|
|
|
+ >
|
|
|
+ <div class="title" @click="goCourse(type)">
|
|
|
+ {{ type.educationName }}
|
|
|
+ </div>
|
|
|
+ <ul class="nav">
|
|
|
+ <li
|
|
|
+ v-for="(slideItem, slideIndex) in slideList[typeItem]"
|
|
|
+ :key="'item' + slideIndex"
|
|
|
+ @click="goCourse(slideItem)"
|
|
|
+ >
|
|
|
+ <div class="text">
|
|
|
+ {{ slideItem.projectName }}-{{ slideItem.businessName }}
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<ul class="list">
|
|
|
- <li v-for="(item, index) in 5" :key="index">
|
|
|
+ <li v-for="(item, index) in typeList" :key="index">
|
|
|
<div class="text">
|
|
|
- <div class="text__title">继续教育</div>
|
|
|
+ <div class="text__title" @click="goCourse(item)">
|
|
|
+ {{ item.educationName }}
|
|
|
+ </div>
|
|
|
<div class="text__desc">
|
|
|
- <a class="item">建造师-一级</a>
|
|
|
- <a class="item">建造师-一级</a>
|
|
|
+ <a
|
|
|
+ @click="goCourse(aItem)"
|
|
|
+ class="item"
|
|
|
+ v-for="(aItem, aIndex) in item.list"
|
|
|
+ :key="'aItem' + aIndex"
|
|
|
+ >{{ aItem.projectName }}</a
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
@@ -103,6 +133,7 @@
|
|
|
|
|
|
<div class="swiper">
|
|
|
<swiper
|
|
|
+ v-if="bannerList.length > 1"
|
|
|
ref="mySwiper"
|
|
|
@slideChangeTransitionStart="slideChangeTransitionStart($event)"
|
|
|
class=""
|
|
@@ -125,6 +156,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="right-box">
|
|
|
+ <div class="bg"></div>
|
|
|
<div class="no-login" v-if="!userInfo">
|
|
|
<template v-if="loginType == 1">
|
|
|
<el-form :model="loginForm" ref="loginForm" :rules="loginRules">
|
|
@@ -446,7 +478,7 @@ export default {
|
|
|
return {
|
|
|
indexToken: "",
|
|
|
indexUserAccount: "",
|
|
|
- colors: ["red", "green", "blue", "gray", "black"],
|
|
|
+ colors: [],
|
|
|
color: "",
|
|
|
countDown: 0,
|
|
|
countDownTimer: null,
|
|
@@ -479,10 +511,13 @@ export default {
|
|
|
isloginSms: false,
|
|
|
swiperOptions: {
|
|
|
loop: true,
|
|
|
+ observer: true,
|
|
|
+ observeParents: true,
|
|
|
speed: 300,
|
|
|
+ autoplayDisableOnInteraction: false,
|
|
|
+ autoplayStopOnLast: false,
|
|
|
autoplay: {
|
|
|
- delay: 3000,
|
|
|
- stopOnLastSlide: false,
|
|
|
+ delay: 1000,
|
|
|
disableOnInteraction: false,
|
|
|
},
|
|
|
// 显示分页
|
|
@@ -499,6 +534,8 @@ export default {
|
|
|
bannerList: [],
|
|
|
goodsList1: [{}], //推荐课程列表
|
|
|
goodsList2: [{}], //推荐题库列表
|
|
|
+ typeList: [],
|
|
|
+ slideList: [],
|
|
|
active1: 0, //推荐课程index
|
|
|
active2: 0, //推荐题库index
|
|
|
};
|
|
@@ -507,9 +544,17 @@ export default {
|
|
|
this.getActivityList();
|
|
|
// this.color = this.colors[0];
|
|
|
this.advertisingList();
|
|
|
+ this.educationTypeList();
|
|
|
+ this.advertisingHomeLocation();
|
|
|
},
|
|
|
methods: {
|
|
|
...mapMutations(["setUserInfo"]),
|
|
|
+
|
|
|
+ advertisingHomeLocation() {
|
|
|
+ this.$request.advertisingHomeLocation().then((res) => {
|
|
|
+ this.swiperOptions.autoplay.delay = res.data.intervalTime * 1000;
|
|
|
+ });
|
|
|
+ },
|
|
|
/**
|
|
|
* 查看商品详情
|
|
|
*/
|
|
@@ -525,6 +570,22 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ educationTypeList() {
|
|
|
+ this.$request.educationTypeList().then((res) => {
|
|
|
+ this.typeList = res.rows.slice(0, 5);
|
|
|
+ this.typeList.forEach((typeItem, index) => {
|
|
|
+ this.businessList(typeItem.id, index);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ businessList(educationId, index) {
|
|
|
+ this.$request.businessList({ educationId }).then((res) => {
|
|
|
+ this.$set(this.slideList, index, res.rows);
|
|
|
+ this.$set(this.typeList[index], "list", res.rows.slice(0, 2));
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
/**
|
|
|
* 加入购物车
|
|
|
*/
|
|
@@ -567,6 +628,16 @@ export default {
|
|
|
this.goodsList2 = goodsList2;
|
|
|
});
|
|
|
},
|
|
|
+ goCourse(item) {
|
|
|
+ this.$router.push({
|
|
|
+ path: "/course-list",
|
|
|
+ query: {
|
|
|
+ educationId: item.educationId ? item.educationId : item.id || "",
|
|
|
+ projectId: item.projectId || "",
|
|
|
+ businessId: item.educationId ? item.id : "",
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
slideChangeTransitionStart(e) {
|
|
|
this.color = this.colors[this.$refs.mySwiper.swiper.realIndex];
|
|
|
},
|
|
@@ -930,10 +1001,85 @@ export default {
|
|
|
}
|
|
|
|
|
|
&__body {
|
|
|
+ position: relative;
|
|
|
height: 400px;
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ overflow: visible;
|
|
|
+ .slide-list {
|
|
|
+ opacity: 1;
|
|
|
+ left: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .slide-list {
|
|
|
+ opacity: 0;
|
|
|
+ transition: all 0.3s;
|
|
|
+ width: 672px;
|
|
|
+ padding: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ padding-left: 24px;
|
|
|
+ z-index: 10;
|
|
|
+
|
|
|
+ &__item {
|
|
|
+ min-height: 80px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.6);
|
|
|
+
|
|
|
+ &:nth-last-of-type(1) {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ width: 120px;
|
|
|
+ height: 28px;
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+ border-radius: 14px;
|
|
|
+ line-height: 26px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 15px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ li {
|
|
|
+ margin: 9px 24px 9px 0;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg {
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 12;
|
|
|
+ }
|
|
|
|
|
|
.list {
|
|
|
+ position: relative;
|
|
|
+ z-index: 22;
|
|
|
padding-left: 16px;
|
|
|
li {
|
|
|
padding: 12px 0;
|
|
@@ -941,8 +1087,13 @@ export default {
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
|
|
|
display: flex;
|
|
|
|
|
|
+ &:nth-last-of-type(1) {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
.text {
|
|
|
&__title {
|
|
|
+ cursor: pointer;
|
|
|
font-size: 16px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-weight: 400;
|
|
@@ -968,6 +1119,24 @@ export default {
|
|
|
.swiper {
|
|
|
.swiper-slide {
|
|
|
height: 400px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-pagination {
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 324px;
|
|
|
+
|
|
|
+ /deep/ .swiper-pagination-bullet {
|
|
|
+ background: rgba(255, 255, 255, 0.4);
|
|
|
+
|
|
|
+ &-active {
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -980,7 +1149,19 @@ export default {
|
|
|
top: 0;
|
|
|
z-index: 10;
|
|
|
|
|
|
+ .bg {
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
.no-login {
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
.input {
|
|
|
margin: 16px;
|
|
|
height: 40px;
|
|
@@ -1030,6 +1211,8 @@ export default {
|
|
|
}
|
|
|
|
|
|
.has-login {
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
padding: 14px 0 0 14px;
|
|
|
|
|
|
.userinfo {
|