恢复导航栏

src/pages/home/index.vue

@@ -37,7 +37,7 @@
                 <p style="max-width: 247px">{{ msgData.text }}</p>
                 <div class="toolbth" @click="newGoToStudy">立即学习</div>
                 <i
-                  style="font-size: 18px; cursor: pointer"
+                  style="font-size: 18px;cursor:pointer;"
                   class="el-icon-close"
                   @click="clearMsg"
                 ></i>
@@ -154,6 +154,29 @@
             <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 }} -->
+                        {{ slideItem.aliasName }}
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
               <ul class="list">
                 <li v-for="(item, index) in typeList" :key="index">
                   <div class="text">
@@ -166,10 +189,10 @@
                         class="item"
                         v-for="(aItem, aIndex) in item.list"
                         :key="'aItem' + aIndex"
-                      >
+                        >
                         <!-- {{ aItem.projectName }}-{{ aItem.businessName }} -->
                         {{ aItem.aliasName }}
-                      </a>
+                        </a>
                     </div>
                   </div>
                 </li>
@@ -402,9 +425,14 @@
             </template>
           </ul>
         </div> -->
-
+        
         <div class="course__body">
-          <p v-if="!goodsList1.length" class="text_align">
+          <p
+            v-if="
+              !goodsList1.length
+            "
+            class="text_align"
+          >
             该培训项目无推荐课程
           </p>
           <ul v-else class="list clearfix">
@@ -431,6 +459,7 @@
         <!-- <div class="course__footer">
           <div class="btn" @click="go('/course-list')">查看更多</div>
         </div> -->
+
       </div>
     </section>
 
@@ -491,20 +520,29 @@
           </ul>
         </div> -->
 
+        
         <div class="bank__body">
-          <p v-if="!goodsList2.length" class="text_align">
+          <p
+            v-if="
+              !goodsList2.length
+            "
+            class="text_align"
+          >
             该培训项目无推荐题库
           </p>
           <ul v-else class="list clearfix">
             <template v-for="(item, index) in goodsList2">
               <!-- @click="goodsDetail(item, 2)" -->
-              <li class="bank-item" :key="index">
+              <li
+                class="bank-item"
+                :key="index"
+              >
                 <GoodsItem :item="item"></GoodsItem>
               </li>
             </template>
           </ul>
         </div>
-
+        
         <div class="pagination">
           <el-pagination
             @current-change="currentChangeBank"
@@ -516,6 +554,7 @@
           >
           </el-pagination>
         </div>
+        
       </div>
     </section>
 
@@ -541,11 +580,7 @@
             </el-input
           ></el-form-item>
           <el-form-item prop="idCard">
-            <el-input
-              placeholder="身份证号码"
-              v-model="bindForm.idCard"
-              maxlength="18"
-            >
+            <el-input placeholder="身份证号码" v-model="bindForm.idCard" maxlength="18">
             </el-input
           ></el-form-item>
           <el-button
@@ -671,6 +706,7 @@ export default {
       goodsList1: [{}], //推荐课程列表
       goodsList2: [{}], //推荐题库列表
       typeList: [],
+      slideList: [],
       active1: 0, //推荐课程index
       active2: 0, //推荐题库index
       searchKey: "",
@@ -681,31 +717,31 @@ export default {
         pageSize: 10,
       },
       paramList: [
-        {
-          pageNum: 1,
-          pageSize: 15,
-          total: 0,
-        },
-        {
-          pageNum: 1,
-          pageSize: 15,
-          total: 0,
-        },
-      ],
+				{
+					pageNum: 1,
+					pageSize: 15,
+					total: 0,
+				},
+				{
+					pageNum: 1,
+					pageSize: 15,
+					total: 0,
+				}
+			],
       total1: 0,
-      total2: 0,
+			total2: 0,
       courseName: [],
-      bankName: [],
-      couIndex: 0,
-      bankIndex: 0,
-      courseId: "",
-      bankId: "",
+			bankName: [],
+			couIndex: 0,
+			bankIndex: 0,
+			courseId: '',
+			bankId: '',
     };
   },
   created() {
-    this.goodsList1 = [];
-    this.goodsList2 = [];
-    this.courseLists();
+    this.goodsList1 = []
+		this.goodsList2 = []
+		this.courseLists()
   },
   mounted() {
     if (this.userInfo) {
@@ -729,105 +765,93 @@ export default {
   },
   methods: {
     //课程
-    courseLists() {
-      this.$request
-        .appCommonActivityRecommendList({ platform: 2, status: 1 })
-        .then(async (res) => {
-          // return
-          if (res.code == 200) {
-            let list = res.rows || [];
-            //课程
-            this.courseName = list
-              .filter((x) => x.type == 1)
-              .sort((a, b) => a.sort - b.sort)
-              .map((x) => {
-                return {
-                  name: x.name,
-                  recommendId: x.recommendId,
-                };
-              });
-            console.log("couIndex", this.couIndex, this.courseName);
-            //题库
-            this.bankName = list
-              .filter((x) => x.type == 2)
-              .sort((a, b) => a.sort - b.sort)
-              .map((x) => {
-                return {
-                  name: x.name,
-                  recommendId: x.recommendId,
-                };
-              });
-            if (this.courseName.length) {
-              this.courseId = this.courseName[0].recommendId;
-              let list1 = await this.getGoodsList(
-                this.courseName[0].recommendId,
-                0
-              );
-              this.goodsList1.push(...list1);
-            }
-
-            if (this.bankName.length) {
-              this.bankId = this.bankName[0].recommendId;
-              let list2 = await this.getGoodsList(
-                this.bankName[0].recommendId,
-                1
-              );
-              this.goodsList2.push(...list2);
-            }
-          }
-        });
-    },
-    getGoodsList(recommendId, num) {
-      return new Promise((resolve, reject) => {
-        this.$axios({
-          url: `/app/common/activity/recommend/goodsList`,
-          method: "get",
-          params: {
-            pageNum: this.paramList[num].pageNum,
-            pageSize: this.paramList[num].pageSize,
-            recommendId: recommendId,
-          },
-          noToken: true,
-        }).then((res) => {
-          if (res.code == 200) {
-            this.paramList[num].total = res.total;
-            resolve(res.rows);
-          }
-        });
-      });
-    },
+		 courseLists() {			
+			this.$request.appCommonActivityRecommendList({ platform: 2, status: 1 }).then(async (res) => {
+        // return
+				if (res.code == 200) {
+					let list = res.rows || []
+					//课程
+					this.courseName = list.filter(x => x.type == 1).sort((a,b) => a.sort - b.sort).map(x => {
+						return {
+							name: x.name,
+							recommendId: x.recommendId
+						}
+					});
+					console.log('couIndex', this.couIndex, this.courseName)
+					//题库
+					this.bankName = list.filter(x => x.type == 2).sort((a,b) => a.sort - b.sort).map(x => {
+						return {
+							name: x.name,
+							recommendId: x.recommendId
+						}
+					});
+					if (this.courseName.length) {
+						this.courseId = this.courseName[0].recommendId
+						let list1 = await this.getGoodsList(this.courseName[0].recommendId, 0)
+						this.goodsList1.push(...list1)
+					}
+					
+					if (this.bankName.length) {
+						this.bankId = this.bankName[0].recommendId
+						let list2 = await this.getGoodsList(this.bankName[0].recommendId, 1)
+						this.goodsList2.push(...list2)
+					}
+
+				}
+			});
+		},
+    getGoodsList(recommendId, num) {	
+			return new Promise((resolve, reject) => {
+				 this.$axios({
+					url: `/app/common/activity/recommend/goodsList`,
+					method: 'get',
+					params: {
+						pageNum: this.paramList[num].pageNum,
+						pageSize: this.paramList[num].pageSize,
+						recommendId: recommendId
+					},
+					noToken: true
+				}).then((res) => {
+					if (res.code == 200) {
+						this.paramList[num].total = res.total
+						resolve(res.rows)
+					}	
+				})
+			})
+			 
+		},
     async currentChangeCou(val) {
-      console.log("vallll", val);
-      this.paramList[0].pageNum = val;
-      this.goodsList1 = [];
-      let list1 = await this.getGoodsList(this.courseId, 0);
-      this.goodsList1.push(...list1);
+      console.log('vallll', val)
+      this.paramList[0].pageNum = val
+      this.goodsList1 = []
+      let list1 = await this.getGoodsList(this.courseId, 0)
+      this.goodsList1.push(...list1)
     },
     async changeCou(recommendId, index) {
-      this.couIndex = index;
-      this.courseId = recommendId;
-      this.paramList[0].pageNum = 1;
-      this.paramList[0].currentPage = 1;
-      this.goodsList1 = [];
-      let list1 = await this.getGoodsList(recommendId, 0);
-      this.goodsList1.push(...list1);
-    },
+			this.couIndex = index
+			this.courseId = recommendId
+			this.paramList[0].pageNum = 1
+      this.paramList[0].currentPage = 1
+			this.goodsList1 = []
+			let list1 = await this.getGoodsList(recommendId, 0)
+			this.goodsList1.push(...list1)
+		},
     async currentChangeBank(val) {
-      console.log("val--", val);
-      this.paramList[1].pageNum = val;
-      this.goodsList2 = [];
-      let list2 = await this.getGoodsList(this.bankId, 1);
-      this.goodsList2.push(...list2);
+      console.log('val--', val)
+      this.paramList[1].pageNum = val
+      this.goodsList2 = []
+      let list2 = await this.getGoodsList(this.bankId, 1)
+      this.goodsList2.push(...list2)
     },
     async changebank(recommendId, index) {
-      this.bankIndex = index;
-      this.bankId = recommendId;
-      this.paramList[1].pageNum = 1;
-      this.paramList[1].currentPage = 1;
-      this.goodsList2 = [];
-      let list2 = await this.getGoodsList(recommendId, 1);
-      this.goodsList2.push(...list2);
-    },
+			this.bankIndex = index
+			this.bankId = recommendId
+			this.paramList[1].pageNum = 1
+      this.paramList[1].currentPage = 1
+			this.goodsList2 = []
+			let list2 = await this.getGoodsList(recommendId, 1)
+			this.goodsList2.push(...list2)
+		},
     /**
      * 关闭消息
      */
@@ -1095,6 +1119,7 @@ export default {
       localStorage.setItem("user_account", res.data.user_account);
       localStorage.setItem("token", res.data.token);
       if (res.data.full_info) {
+        
         this.getInfo();
       } else {
         this.indexUserAccount = res.data.user_account;
@@ -1238,15 +1263,35 @@ export default {
     educationTypeList() {
       this.$request.educationTypeList().then((res) => {
         this.typeList = res.rows.slice(0, 5);
-        this.typeList.map(this.businessList);
+        this.typeList.forEach((typeItem, index) => {
+          this.businessList(typeItem.id, index);
+        });
       });
     },
 
-    businessList(item) {
+    businessList(educationId, index) {
       this.$request
-        .businessList({ educationId: item.id })
+        .businessList({ educationId })
         .then((res) => {
-          item.list = res.rows.filter((item) => item.aliasName);
+          let rows = res.rows.filter((item) => item.aliasName)
+          this.$set(this.slideList, index, rows);
+          if (rows.length >= 2) {
+            let newRows = rows.slice(0, 2);
+            let length = 0;
+            newRows.forEach((row) => {
+              let str = row.projectName + "-" + row.businessName;
+              length = length + str.length;
+            });
+
+            if (length >= 17) {
+              this.$set(this.typeList[index], "list", rows.slice(0, 1));
+            } else {
+              this.$set(this.typeList[index], "list", rows.slice(0, 2));
+            }
+          } else {
+            this.$set(this.typeList[index], "list", rows);
+          }
+           console.log('this.typeList:',this.slideList, this.typeList)
         })
         .catch((err) => {
           console.log(err, "err");
@@ -1299,17 +1344,17 @@ export default {
         });
     },
     goCourse(item) {
-      console.log("sdsf", item);
+      console.log('sdsf', item)
       if (item.topicId) {
         this.$router.push({
           path: "/goodsTopic",
           query: {
             topicId: item.topicId,
           },
-        });
-        return;
+        })
+        return
       }
-
+      
       this.$router.push({
         path: "/course-list",
         query: {
@@ -1450,6 +1495,7 @@ export default {
               localStorage.setItem("token", res.data.token);
               this.$tools.setUuid(new Date().valueOf() + "");
               if (res.data.full_info) {
+                
                 this.getInfo();
               } else {
                 this.indexUserAccount = res.data.user_account;
@@ -1495,7 +1541,7 @@ export default {
      */
     getInfo() {
       this.$request
-        .getInfo({ fromPlat: 2 })
+        .getInfo({fromPlat: 2})
         .then((res) => {
           this.loginForm = {};
           this.loginSmsForm = {};
@@ -1764,6 +1810,68 @@ export default {
             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(255, 255, 255, 1);
+              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 #ddd;
+
+                &:nth-last-of-type(1) {
+                  border: 0;
+                }
+                .title {
+                  cursor: pointer;
+                  color: #fff;
+                  width: 120px;
+                  height: 28px;
+                  border: 1px solid #ffffff;
+                  border-radius: 14px;
+                  background: #3f8dfd;
+                  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: #666;
+                    }
+                  }
+                }
+              }
+            }
+
             .bg {
               backdrop-filter: blur(10px);
               position: absolute;
@@ -1778,20 +1886,18 @@ export default {
               position: relative;
               z-index: 22;
               padding-left: 16px;
-              height: 100%;
-              overflow: auto;
               li {
-                padding: 14px 0;
-                // height: 80px;
+                padding: 12px 0;
+                height: 80px;
                 border-bottom: 1px solid rgba(255, 255, 255, 0.6);
-                // display: flex;
+                display: flex;
+
                 &:nth-last-of-type(1) {
                   border: 0;
                 }
 
                 .text {
-                  // flex: 1;
-                  // width: 100%;
+                  flex: 1;
                   &__title {
                     cursor: pointer;
                     font-size: 16px;
@@ -1801,49 +1907,17 @@ export default {
                   }
 
                   &__desc {
-                    margin-top: 10px;
-                    // white-space: pre-line;
-                    display: flex;
-                    flex-wrap: wrap;
-                    
+                    margin-top: 16px;
                     .item {
                       font-size: 14px;
                       font-family: Microsoft YaHei;
                       font-weight: 400;
-                      line-height: 26px;
                       color: #ffffff;
                       margin-right: 30px;
                     }
                   }
                 }
               }
-              &::-webkit-scrollbar {
-                width: 6px;
-
-                height: 16px;
-
-                background-color: transparent;
-
-                border-radius: 10px;
-              }
-
-              /*滚动条轨道*/
-
-              &::-webkit-scrollbar-track {
-                box-shadow: inset 0 0 5px transparent;
-
-                border-radius: 10px;
-
-                background: transparent;
-              }
-
-              /*滑块*/
-
-              &::-webkit-scrollbar-thumb {
-                border-radius: 10px;
-
-                background: #909090;
-              }
             }
           }
         }
@@ -2047,7 +2121,7 @@ export default {
       align-items: center;
       justify-content: space-between;
       padding-bottom: 15px;
-      border-bottom: 1px solid #dcdcdc;
+      border-bottom: 1px solid #DCDCDC;
       .lefts {
         display: flex;
       }
@@ -2060,6 +2134,8 @@ export default {
         color: #333333;
         text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
       }
+
+      
     }
     .tabs {
       margin-left: 28px;
@@ -2100,13 +2176,13 @@ export default {
         width: 72px;
         height: 28px;
         line-height: 28px;
-        background: #d5e4ff;
+        background: #D5E4FF;
         border-radius: 4px;
         // margin: 20px auto 40px;
-        color: #3f8dfd;
+        color: #3F8DFD;
         text-align: center;
         transition: all 0.2s;
-
+        
         &:hover {
           color: #fff;
           box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
@@ -2125,7 +2201,7 @@ export default {
       align-items: center;
       justify-content: space-between;
       padding-bottom: 15px;
-      border-bottom: 1px solid #dcdcdc;
+      border-bottom: 1px solid #DCDCDC;
       .lefts {
         display: flex;
       }
@@ -2138,23 +2214,25 @@ export default {
         color: #333333;
         text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
       }
+
+      
     }
     .tabs {
-      margin-left: 40px;
-      display: flex;
-      align-items: center;
+        margin-left: 40px;
+        display: flex;
+        align-items: center;
 
-      .tab {
-        cursor: pointer;
-        color: #888888;
-        font-size: 14px;
-        margin-right: 32px;
-        &.active {
-          font-weight: 600;
-          color: #222222;
+        .tab {
+          cursor: pointer;
+          color: #888888;
+          font-size: 14px;
+          margin-right: 32px;
+          &.active {
+            font-weight: 600;
+            color: #222222;
+          }
         }
       }
-    }
     .pagination {
       padding: 30px 0;
       text-align: center;
@@ -2177,13 +2255,13 @@ export default {
         width: 72px;
         height: 28px;
         line-height: 28px;
-        background: #d5e4ff;
+        background: #D5E4FF;
         border-radius: 4px;
         // margin: 20px auto 40px;
-        color: #3f8dfd;
+        color: #3F8DFD;
         text-align: center;
         transition: all 0.2s;
-
+        
         &:hover {
           color: #fff;
           box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
@@ -2298,9 +2376,9 @@ export default {
   color: #fff;
 }
 .tooltipStyle .popper__arrow {
-  border-bottom-color: #3f8dfd !important;
+  border-bottom-color: #3f8dfd!important;
 }
 .tooltipStyle .popper__arrow::after {
-  border-bottom-color: #3f8dfd !important;
+  border-bottom-color: #3f8dfd!important;
 }
 </style>