From 480a4f556491f343242244ddbbee97e2e4f08798 Mon Sep 17 00:00:00 2001
From: huangzhe <3451701311@qq.com>
Date: Sun, 14 Sep 2025 14:24:35 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BF=AE=E6=AD=A3=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0=E6=8B=BC=E5=86=99=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/processStatus.vue          |    2 +-
 src/router/index.js                       |    6 +-
 src/utils/token.js                        |    3 +-
 src/views/Index.vue                       |   15 +-
 src/views/portal/course/qualityCourse.vue | 2198 +++++++++++++++++++++
 5 files changed, 2212 insertions(+), 12 deletions(-)
 create mode 100644 src/views/portal/course/qualityCourse.vue

diff --git a/src/components/processStatus.vue b/src/components/processStatus.vue
index ac56a6d0..a10d4972 100644
--- a/src/components/processStatus.vue
+++ b/src/components/processStatus.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script>
 import {getCertificationProcess} from "@/api/modules/lecturer";
 
 export default {
diff --git a/src/router/index.js b/src/router/index.js
index f494a683..c1bb7d83 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -364,12 +364,12 @@ export const constantRoutes = [{
     hidden: true
   },
    {
-    path: '/quailtyCourse',
+    path: '/qualityCourse',
     hidden: true,
-    component: (resolve) => require(['@/views/portal/course/quailtyCourse'], resolve),
+    component: (resolve) => require(['@/views/portal/course/qualityCourse'], resolve),
     name: 'course',
     meta: {title: '精品课课程', keepAlive: true, icon: 'dashboard', noCache: true, affix: false},
-  },
+  }
 
 ]
 
diff --git a/src/utils/token.js b/src/utils/token.js
index 8d7cf728..c4d8d9be 100644
--- a/src/utils/token.js
+++ b/src/utils/token.js
@@ -5,7 +5,8 @@ import Cookies from 'vue-cookies'
 const TokenKey = 'token'
 
 export function getToken() {
-  return Cookies.get(TokenKey)
+  return "eyJ0eXBlIjoidG9rZW4iLCJhbGciOiJIUzI1NiJ9.eyJjb21wYW55Q29kZSI6IkMwMDEiLCJ1SWQiOiI5NjUzNDIwMjc0OTc2MDcxNjgiLCJjb21wYW55SWQiOiIxMDQxNjczOTc3Mzc5OTQ2NDk2IiwibG9naW5JZCI6IjE5NjcxMDg4NDQyNTc3MjIzNzAiLCJpc3MiOiJodHRwOi8vdS5ib2UuY29tIiwiR2l2ZW5OYW1lIjoiYm9ldSIsImV4cCI6MTc1NzgzNzQ3MDI1NSwidXNlck5hbWUiOiLmnY7njonlhrAiLCJ1c2VySWQiOiI2QjA0OUZBRi1DMzE0LTdDQ0YtMEQyOC0wRDIzRjRDNDI1MzEifQ==.44294f0a6c8aaadeca41eeeb86844d164eb4657262ba69694d198ac6603cf1ab"
+  // return Cookies.get(TokenKey)
 }
 
 export function setToken(token) {
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 43266fed..62b1c4ea 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -153,12 +153,13 @@
       </div>
     </div>
     <div class="xindex-content">
-      
+
+
       <!-- 推荐课程 -->
       <div class="modules xcontent2">
         <!-- <div class="xcontent2-main"> -->
           <!--内容块-->
-        
+
           <!-- </div> -->
            <!-- 精品课模块 -->
         <div class="xcontent2-main">
@@ -169,12 +170,12 @@
               <img class="modules-text" style="height: 24px;" src="../assets/images/course/courseTitle.png" alt="">
             </span>
             <span class="more">
-              <router-link to="/quailtyCourse">查看更多>></router-link>
+              <router-link to="/qualityCourse">查看更多>></router-link>
             </span>
           </div>
 
 
-          
+
           <div
               v-for="(course, eIndex) in exquisiteList"
               :key="'cc' + eIndex"
@@ -231,7 +232,7 @@
             </div>
 
 
-        
+
           <!--内容块-->
           <div class="modules-title xindex-main" v-if="courseComputedOneList.length > 0">
             <span class="modules-text">推荐课程</span>
@@ -1308,7 +1309,7 @@ export default {
       return this.courseList.list.slice(3)
     },
     // 精品课展示
-    exquisiteList() { 
+    exquisiteList() {
       return this.qusisityList.list.slice(0,3)
     },
   },
@@ -1561,7 +1562,7 @@ export default {
       let course = {
         aid: this.userInfo.aid,
       }
-      apiIndex.qualitylist(course).then((res) => { 
+      apiIndex.qualitylist(course).then((res) => {
         let courseIds = [];
          res.data.result.forEach((item) => {
             item.authorInfo = {
diff --git a/src/views/portal/course/qualityCourse.vue b/src/views/portal/course/qualityCourse.vue
new file mode 100644
index 00000000..c25591b8
--- /dev/null
+++ b/src/views/portal/course/qualityCourse.vue
@@ -0,0 +1,2198 @@
+<template>
+  <div id="couser-list-content" class="couser-list-content">
+    <div class="course-banner">
+      <portal-header current="course" textColor="#fff" :keywords="keyword" @emitInput="emitInput"
+        @showClass="showClass"></portal-header>
+    </div>
+    <div style="padding-top:30px">
+      <div class="xcontent2">
+        <!-- <div class="navTitle">
+          <a @click="handleClearTags">课程分类&nbsp;</a>
+          <span v-if="navTitle.length">></span>
+          <template v-if="navTitle.length">
+            <div class="oneTitle" v-for="(item, index) in navTitle" :key="item.id"
+              @click="handleOptionClick(item, index)">
+              <span class="titleName">&nbsp;{{ item.name }}&nbsp;</span>
+              <span v-if="index !== navTitle.length - 1">></span>
+            </div>
+          </template>
+        </div> -->
+      </div>
+      <div class="xcontent2">
+        <!-- 左侧三级 -->
+        <div class="xcontent2-minor" style="margin-right:36px;">
+          <!-- <router-link to="/courseRecommended" style="margin-bottom: 20px;" class="course-recommended-style">
+            <div class="imgTilte">
+            </div>
+          </router-link> -->
+          <div class="course-title-style">
+            <div class="imgTilte">
+              <div>精品课程</div>
+              <div>COURSE</div>
+            </div>
+          </div>
+          <div class="course-list">
+            <div class="course-one" v-for="one in oneList" :key="one.id" @click.stop="handleOptionClick(one, 1, oneList)">
+              <div class="course-one-content">{{ one.name }}</div>
+              <div class="course-two" v-for="(twoList, twoIndex) in one.children" :key="twoList.id"
+                @click.stop="handleOptionClick(twoList, 2, one.children)"
+                :class="{ courseTwoActive: twoList.id == twoId || twoList.checked }" @mouseleave.stop="leaveIndex"
+                @mouseenter.stop="changeIndex(twoList.id)">
+                <!-- 三级分类 -->
+                <el-popover class="popover" popper-class='coursePopperClass' placement="right-start" width="536"
+                  :disabled="!twoList.children.length" :open-delay="0" :close-delay="0" trigger="hover"
+                  :visible-arrow="false" @hide="leaveIndex" @show="changeIndex(twoList.id)" transition="none">
+                  <div class="course-two-content" slot="reference">{{
+                    twoList.name }}</div>
+                  <!-- 内容 -->
+                  <div class="course-three-box">
+                    <div class="course-three-box-title">
+                      {{ twoList.name }}
+                    </div>
+                    <div style="padding: 0 40px;display: flex;flex-wrap: wrap;">
+                      <div :class="threeList.checked ? 'threeActive' : ''" v-for="threeList in twoList.children"
+                        :key="threeList.id" @click.stop="handleOptionClick(threeList, 3, twoList.children)"
+                        class="course-three">
+                        <span>{{ threeList.name }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </el-popover>
+              </div>
+            </div>
+          </div>
+          <div id="fixd-box">
+
+          </div>
+        </div>
+        <!-- 右侧 -->
+        <div class="xcontent2-main content-div">
+         
+          <!-- 内容导航 -->
+          <div class="topNav" v-if="!newData">
+            <div class="search-div nav" style="height: 100px;flex: 1;">
+              <div @click="handleTypeAllClick(1)" class="option-item" :class="{ 'option-active': ctypeTagAll }">
+                <a>全部</a>
+                <span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>
+              </div>
+              <div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item"
+                :class="{ 'option-active': ctypeList[0].checked }">
+                <a>内部专享</a>
+                <span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span>
+              </div>
+              <div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item"
+                :class="{ 'option-active': ctypeList[1].checked }">
+                <a>外部精选</a>
+                <span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>
+              </div>
+              <div style="display: flex;justify-content: space-between;">
+                <el-input placeholder="请输入关键字" v-model="keyword" @input="handleInput" clearable
+                  style="width: 300px;"></el-input>
+            </div>
+
+            </div>
+          
+          </div>
+          <!-- 清除 -->
+          <!-- <div v-if="stagList.length > 0 && !newData" class="search-div" style="padding: 0;margin-bottom: 20px;">
+            <div class="searchbar" style="background-color:#f6f7fb;display: flex;justify-content: space-between;">
+              <div style="line-height: 30px;">
+                <span class="item-title"> 搜索条件</span>
+                <el-tag closable v-for="(tag, tagIdx) in stagList" :key="'t' + tagIdx" @close="stagClose(tag, tagIdx)">{{
+                  tag.name }}</el-tag>
+              </div>
+              <div>
+                <el-button type="primary" size="mini" @click="handleClearTags">清除</el-button>
+              </div>
+            </div>
+          </div> -->
+
+          <!-- 标题最新最热好评率 -->
+          <div class="xcourse-list" style="background-color: #fff;border-radius: 8px;padding:0 25px;">
+            <div class="order-div" v-if="!newData">
+              <span class="quyer-tag">
+                <el-button type="text" class="order-class" @click="orderChange('studys')"
+                  :class="{ actice: course.orderField == 'studys' }">全部课程</el-button>
+                <el-button type="text" class="order-class" @click="orderChange('studys')"
+                  :class="{ actice: course.orderField == 'studys1' }">最热</el-button>
+                <el-button type="text" class="order-class" @click="orderChange('publishTime')"
+                  :class="{ actice: course.orderField == 'publishTime' }">最新</el-button>
+                <el-button type="text" class="order-class" @click="orderChange('score')"
+                  :class="{ actice: course.orderField == 'score' }">好评率</el-button>
+              </span>
+              <span class="order-count">
+                共找到<span>{{ count }}</span>个结果
+              </span>
+            </div>
+            <template v-if="!newData">
+              <div class="xcourse-card" v-for="(cinfo, cidx) in courseList" :key="cinfo.id">
+                <div class="course-card" style="padding: 10px;">
+                  <a @click="toCourseDetail(cinfo)">
+                    <div class="course-img-box">
+                      <course-image :text="true" :course="cinfo"></course-image>
+                      <span v-if="cinfo.type == 20 || 10" class="course-type-left">录播课</span>
+                      <span v-if="cinfo.type == 30" class="course-type-left">线下课</span>
+                      <span v-if="cinfo.type == 40" class="course-type-left">学习项目</span>
+                    </div>
+                    <div class="course-title two-line-ellipsis" :title="cinfo.title" v-html="cinfo.name"></div>
+                    <!-- 关键字 -->
+                    <div class="keywordInfo-every">
+                      <div class="keywordInfo" v-for="(keyword, index) in cinfo.keywordsActive" :key="index">
+                        <el-tooltip popper-class="keywordInfo-class" :visible-arrow="false"
+                          :disabled="!keyword.showTitle">
+                          <template #content>
+                            <span v-html="keyword.title"></span>
+                          </template>
+                          <div class="keyword-content" v-html="keyword.name"></div>
+                        </el-tooltip>
+                      </div>
+                    </div>
+                    <div class="couresstartTime">
+                      <span v-if="cinfo.type == 30 && cinfo.startTime">开课时间：{{ cinfo.startTime }}</span>
+                    </div>
+
+                    <div class="course-info">
+                      <div class="course-info-user" style="max-width: 100px;" v-if="cinfo.teacher">
+                        <el-tooltip :content="cinfo.teacher" placement="bottom" effect="light">
+                          <span class="course-info-author">{{ cinfo.teacher }}</span>
+                        </el-tooltip>
+                      </div>
+                      <div class="course-info-user">
+                        <span class="course-info-studys">{{ formatNum(cinfo.studies) }}人学习</span>
+                      </div>
+                      <div class="course-info-score">
+                        <div style="display: flex;">
+                          <interactBar :type="1" nodeWidth="20px" :data="cinfo" :courseExclusive="true" :comments="false"
+                            :praises="false" :shares="false" :views="false"></interactBar>
+                          <div v-if="cinfo.score">
+                            <span class="course-score-value">{{ toScore(cinfo.score) }}分</span>
+                          </div>
+                          <div v-else class="course-score-no">未评分</div>
+                        </div>
+                      </div>
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </template>
+            <!-- 线上品牌系列课程 -->
+            <template v-if="newData">
+              <div class="xcourse-card"  v-for="cinfo in courseList" :key="cinfo.id" style="margin-bottom: 0;margin-top: 36px;">
+                <div class="course-card" style="padding: 10px;">
+                  <a @click="() => $message.success('如需了解详情，请联系BOEU')">
+                    <div class="course-img-box">
+                      <course-image :text="true" :course="cinfo"></course-image>
+                    </div>
+                    <div class="course-title two-line-ellipsis" :title="cinfo.title" v-html="cinfo.name"></div>
+                    <div class="course-title two-line-ellipsis">
+                      {{ cinfo.remark }}
+                    </div>
+                    <div class="course-info">
+                      <div class="course-info-user">
+                        <span class="course-info-author" v-if="cinfo.teacher" v-html="cinfo.teacher"></span>
+                      </div>
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </template>
+            <!--  暂无数据 -->
+            <div class="pagination-div">
+              <!-- <span class="pag-text" @click="loadMore()"
+                v-if="moreState == 1 && courseList.length >= course.pageSize">加载更多</span> -->
+              <!-- <span class="pag-text-msg" v-if="moreState == 2">数据加载中</span> -->
+              <!-- <span class="pag-text-msg" v-else-if="moreState == 3 && courseList.length > 0">没有更多数据了</span> -->
+              <span class="notcoures" v-if="moreState == 3 && courseList.length == 0">
+                <img :src="`${webBaseUrl}/images/nocouresimg.png`" alt="">
+                <h5>暂无课程，请优先学习其它课程吧～</h5>
+              </span>
+              <div v-if="courseList.length > 0">
+                <pagination :size="course.pageSize" :total="count" :page="course.pageIndex"
+                  layout="total, prev, pager, next, jumper" @change-page="currentChange"></pagination>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <portal-footer></portal-footer>
+    <portalFloatTools ref="floatTools"></portalFloatTools>
+    <!-- U课堂弹窗 -->
+    <div class="u-class">
+      <el-dialog :visible.sync="showUClass" width="833px">
+        <div class="ClassBoxContent">
+          <img src="../../../assets/images/u_class.png" alt="" class="img" />
+          <div class="ContentBox">
+            <div class="left">
+              <div class="title">U选小课堂</div>
+              <div class="jy">项目简介</div>
+              <div class="msg">
+                于22年首推，是一个面向全集团员工开放的职业通识类数字化培养项目，旨在帮助员工开阔眼界、加厚职业素养。在原有外部精选通用力课程基础上，2023年引入创新专区，以新鲜的话题、新颖的形式，带给全员丰富、有趣的学习体验。
+              </div>
+              <div class="bottom"></div>
+            </div>
+            <div class="right">
+              <div class="tyl" @click="tylClick">
+                <div class="tyl_title">
+                  <img src="../../../assets/images/dc.png" alt="" class="tyl_title_img" />
+                  <span class="tyl_title_msg">通用力专区</span>
+                </div>
+                <div class="tyl_jy">加厚职业素养，轻学习、快成长！</div>
+                <div class="tyl_msg">
+                  内容涵盖：领导力、市场营销、职场技能、财务知识、法律常识、人力资源、经典国学、人文社科
+                </div>
+              </div>
+              <div class="text_msg">
+                创新力专区课程版权已到期！
+              </div>
+              <!-- <div class="cyl" @click="cylClick">
+                <div class="tyl_title">
+                  <img src="../../../assets/images/cyl.png" alt="" class="tyl_title_img" />
+                  <span class="tyl_title_msg">创新力专区</span>
+                </div>
+                <div class="tyl_jy">激发创新潜力，拓视野、促思考！</div>
+                <div class="tyl_msg">
+                  内容涵盖：组合创新、单点破局、错位竞争、分形创新、第二曲线、数字化、元宇宙<br/>
+                  创新力专区课程版权将于2024年4月16日到期，逾期将无法继续访问，请尽快完成学习
+                </div>
+              </div> -->
+            </div>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters, mapActions } from "vuex";
+import couresinteract from '@/components/Portal/course/couresinteract.vue';
+import portalHeader from "@/components/PortalHeader.vue";
+import portalFooter from "@/components/PortalFooter.vue";
+import portalFloatTools from "@/components/PortalFloatTools.vue";
+import authorInfo from "@/components/Portal/authorInfo.vue";
+import courseItem from "@/components/Portal/course/courseItem.vue";
+import apiCoursePortal from "@/api/modules/coursePortal.js";
+import apiCourseStudy from "@/api/modules/courseStudy.js";
+import courseForm from "@/components/Course/courseForm.vue";
+import apiType from "@/api/modules/type.js";
+import apiCourse from "@/api/modules/coursePortal.js";
+import apiOldCourse from "@/api/boe/course.js";
+import apiTeacher from "@/api/modules/teacher.js";
+import apiUser from "@/api/system/user.js";
+import scene from "@/api/modules/scene.js";
+import apiUserbasic from "@/api/boe/userbasic.js";
+import interactBar from "@/components/Portal/interactBar.vue";
+import courseImage from "@/components/Course/courseImage.vue";
+import { courseType, getType, toScore, formatDate, formatUserNumber, formatDateByFmt } from "@/utils/tools.js";
+import { deepClone, param } from "../../../utils";
+import apiSearchterm from "@/api/modules/searchterm.js";
+import apiPlace from "@/api/phase2/place.js"
+export default {
+  name: "index",
+  components: {
+    portalHeader,
+    portalFooter,
+    portalFloatTools,
+    courseItem,
+    courseForm,
+    authorInfo,
+    couresinteract,
+    courseImage,
+    interactBar
+  },
+  computed: {
+    ...mapGetters(["resOwnerMap", "sysTypeMap", "userInfo", "identity"]),
+    typeList() {
+      let list = [];
+
+    },
+    stagList() { //计算出选择的内容
+      let list = [];
+      if (this.keyword) {
+        list.push({
+          type: 0,
+          id: 'keyword',
+          name: this.keyword,
+          checked: true
+        })
+      }
+      this.ctypeList.forEach(item => {
+        if (item.checked) {
+          list.push(item);
+        }
+      });
+      this.oneList.forEach(one => {
+        var twoChildChecked = false;//是否有下级
+        one.children.forEach(two => {
+          if (two.checked) {
+            twoChildChecked = true;
+          }
+          var threeChildChecked = false;
+          two.children.forEach(three => {
+            if (three.checked) {
+              list.push(three);
+              threeChildChecked = true;
+            }
+          });
+          if (two.checked && !threeChildChecked) {
+            list.push(two);
+          }
+        });
+        if (one.checked && !twoChildChecked) {
+          list.push(one);
+        }
+      })
+      // this.oneList.forEach(item=>{
+      //   if(item.checked){
+      //     list.push(item);
+      //   }
+      // });
+      // this.twoList.forEach(item=>{
+      //   if(item.checked){
+      //     list.push(item);
+      //   }
+      // });
+      // this.threeList.forEach(item=>{
+      //   if(item.checked){
+      //     list.push(item);
+      //   }
+      // });
+      //console.log(list,'list');
+      return list;
+    },
+    ctypeTagAll() {
+      let flag = this.ctypeList.some(item => {
+        return item.checked;
+      });
+      return !flag;
+    },
+    // oneTagAll() {
+    //   let flag = this.oneList.some(item => {
+    //     return item.checked;
+    //   });
+    //   return !flag;
+    // },
+    // twoTagAll() {
+    //   let flag = this.twoList.some(item => {
+    //     return item.checked;
+    //   });
+    //   return !flag;
+    // },
+    // threeTagAll() {
+    //   let flag = this.threeList.some(item => {
+    //     return item.checked;
+    //   });
+    //   return !flag;
+    // }
+  },
+  data() {
+    return {
+      newData: false,//线上品牌系列隐藏
+      navTitle: [],
+      // 设置高亮
+      twoId: '',
+      count: 0,//分页总条条数
+      showUClass: false,
+      ctypeList: [
+        { type: 1, id: 20, name: '录播课', checked: false },
+        { type: 1, id: 30, name: '线下课', checked: false },
+        { type: 1, id: 40, name: '学习项目', checked: false },
+      ],
+      id: '',
+      oneList: [], //一级分类{type:11}
+      twoList: [], //二级分类{type:12}
+      threeList: [],//三级分类{type:13}
+      searching: false,//是否正在搜索中
+
+      resonimg: {},
+      formatDate,
+      formatNum: formatUserNumber,
+      audiences: [],//当前用户的受众
+      couretitle: "",
+      toScore,
+      noPageList: true, //判断接口是否还有数据
+      noDataList: true, //判断接口是否还有数据
+      moreState: 1, // 1 加载更多 2 加载中 3无数据
+      columns: 3, //列的数量
+      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
+      // 查询信息
+      course: {
+        orderField: "studys",
+        companyId: '',
+        keyword: '',//关键词
+        topOrder: true,
+        orderAsc: false,
+        pageIndex: 1, // 第几页
+        pageSize: 9,//每页多少条
+        openCourse: 0,//增加的公开课查询
+        userId:''
+      },
+      sceneList: [], //场景
+      keyword: "",//查询的关键字
+      anking: "",
+      isFind: false,
+      searchbar: {
+        top: false
+      },
+      ankingList: [],
+      scorelist: [],
+      queryExpand: true, // true更多，false收起
+      //status: 1,
+      pager: {
+        total: 40
+      },
+      data: [{}, {}, {}, {}],
+      order: 1,
+      courseList: [],
+      searchRecords: [],
+      hotList: [],
+      totalPages: 1,
+      localSessionKey: this.$xpage.constants.localCourseFiltersKey
+    };
+  },
+  // 受众需要每次刷新
+  created() {
+    let localKey = "user_" + this.userInfo.sysId + "_gids";
+    apiUserbasic.getInAudienceIds().then(rs => {
+      if (rs.status == 200) {
+        this.audiences = rs.result;
+        sessionStorage.setItem(localKey, this.audiences);
+      } else {
+        console.log(rs.message);
+      }
+    })
+  },
+  mounted() {
+    let screenWidth = window.screen.availWidth;
+    // if (screenWidth < 1280) {
+    //   this.course.pageSize = 9;
+    //   this.columns = 3;
+    // } else if (screenWidth < 1600) {
+    //   this.course.pageSize = 12;
+    //   this.columns = 3;
+    // } else if (screenWidth >= 1600) {
+    //   this.course.pageSize = 15;
+    //   this.columns = 3;
+    // }
+
+    let el_top = document.querySelector("#searchbar");
+    let el_search = document.querySelector("#searchbar");
+    let height = 200;
+    let flag = true;
+    let $this = this;
+    this.getAnkingData();
+    // window.addEventListener("scroll", this.handleScroll);
+    // if (this.$route.query !== {}) {
+    if (this.$route.query.keyword) {
+      this.keyword = this.$route.query.keyword;
+    }
+    this.loadTypeData();//加载分类
+    //this.getSceneData(); //已经没有场景了
+    if (this.keyword) {
+      this.totalPages = 4;
+    }
+    //新加
+    this.refId = this.$route.query.recommendId;
+    if (this.refId) {
+      this.course.type = 'recommend'
+    }
+    this.loadSysTypes();
+    this.getScoreList();
+    this.getHotList();
+    // this.toCourseDetail(item);
+    // this.orderChange(id);
+    //查询排行榜，页面打开只查询一次
+    let localKey = "user_" + this.userInfo.sysId + "_gids";
+    if (this.audiences.length == 0) {
+      //let hasIds;
+      let hasIds = sessionStorage.getItem(localKey);
+      if (hasIds && hasIds.length > 0) {
+        this.audiences = hasIds.split(",");
+        this.search();
+      } else {
+        apiUserbasic.getInAudienceIds().then(rs => {
+          if (rs.status == 200) {
+            this.audiences = rs.result;
+            sessionStorage.setItem(localKey, this.audiences);
+          } else {
+            console.log(rs.message);
+          }
+          this.search();
+        })
+        // Promise.all([apiOldCourse.audience(this.userInfo.sysId),apiUserGroup.userGroupIds()]).then(rs=>{
+        //    //console.log(rs,'rs');
+        //    let aids=[];
+        //    if(rs[0].status==200){
+        //      aids.push(rs[0].result);
+        //    }
+        //    if(rs[1].status==200){
+        //      aids.push(rs[1].result);
+        //    }
+        //    this.audiences=aids;
+        //    sessionStorage.setItem(localKey,this.audiences);
+        //    this.search();
+        // })
+      }
+    }
+
+    //this.searchterm();//搜索词已经没有了
+    this.couresreso();//广告位
+
+  },
+  beforeDestroy() {
+    // window.removeEventListener("scroll", this.handleScroll);
+  },
+  methods: {
+    // 改变分页
+    currentChange(val) {
+      this.course.pageIndex = val
+      this.search()
+    },
+    // 移入
+    changeIndex(twoId) {
+      this.twoId = twoId
+    },
+    // 移除
+    leaveIndex() {
+      this.twoId = ''
+    },
+    tylClick() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
+    },
+    cylClick() {
+      window.open("https://u.boe.com/pc/course?keyword=创新力专区");
+    },
+    showClass(flag) {
+      if (flag) {
+        this.showUClass = flag;
+      }
+    },
+    uClassClick() {
+      // this.showUClass = true;
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130")
+    },
+    saveLocalFilters() {
+      let typeCodeList = [];
+      this.stagList.forEach(item => {
+        typeCodeList.push({
+          type: item.type,
+          id: item.id,
+          name: item.name
+        })
+      });
+      let typeCodeString = JSON.stringify(typeCodeList);
+      //console.log(typeCodeString);
+      sessionStorage.setItem(this.localSessionKey, typeCodeString);
+    },
+    loadLocalFilters() {
+      let hasData = sessionStorage.getItem(this.localSessionKey);
+      let $this = this;
+      if (hasData) {
+        let typeCodeList = JSON.parse(hasData);
+        typeCodeList.forEach(item => {
+          if (item.type == 0) {
+            this.keyword = item.name;
+          } else if (item.type == 1) {
+            if (item.id == 20) {
+              $this.ctypeList[0].checked = true;
+            } else if (item.id == 30) {
+              $this.ctypeList[1].checked = true;
+            } else if (item.id == 40) {
+              $this.ctypeList[2].checked = true;
+            }
+          } else { //三级分类的处理，如果一个分类选中多个，显示哪个，显示第一个，是否可以
+            this.oneList.forEach(one => {
+              if (one.id == item.id && item.type == '11') {
+                this.navTitle = [{ ...one }]
+                one.checked = true
+              }
+              one.children.forEach(two => {
+                if (two.id == item.id && item.type == '12') {
+                  this.navTitle = [{ ...one }, { ...two }]
+                  two.checked = true
+                }
+                two.children.forEach(three => {
+                  if (three.id == item.id && item.type == '13') {
+                    this.navTitle = [{ ...one }, { ...two }, { ...three }]
+                    three.checked = true
+                  }
+                })
+              })
+            })
+          }
+        })
+      }
+    },
+    //搜索条件
+    stagClose(tag, tagIndex) {
+      tag.checked = false;
+      if (tag.type == 0) {
+        this.keyword = '';
+      }
+      this.navTitle = []
+      this.searchData();
+    },
+
+    // 导航全选
+    handleTypeAllClick(t) {
+      if (t == 1) {
+        this.ctypeList.forEach(ct => {
+          ct.checked = false;
+        })
+      } else if (t == 11) {
+        this.oneList.forEach(ct => {
+          ct.checked = true;
+        });
+        this.twoList.forEach(ct => {
+          ct.checked = true;
+        });
+        this.threeList.forEach(ct => {
+          ct.checked = false;
+        });
+        this.twoList = [];
+        this.threeList = [];
+      } else if (t == 12) {
+        this.twoList.forEach(ct => {
+          ct.checked = false;
+        });
+        this.threeList.forEach(ct => {
+          ct.checked = false;
+        });
+        this.threeList = [];
+      } else if (t == 13) {
+        this.threeList.forEach(ct => {
+          ct.checked = false;
+        })
+      }
+      this.searchData();
+    },
+    // 清除
+    handleClearTags() {
+      //清空所有的条件
+      this.keyword = '';
+      this.ctypeList.forEach(item => {
+        item.checked = false;
+      });
+      this.oneList.forEach(one => {
+        one.checked = false;
+        one.children.forEach(two => {
+          two.checked = false;
+          two.children.forEach(three => {
+            three.checked = false;
+          })
+        })
+      });
+      this.twoList = [];
+      this.threeList = [];
+      this.navTitle = [];
+      this.newData = false;
+      sessionStorage.removeItem(this.localSessionKey)
+      this.searchData();
+    },
+    // 导航切换(录播课，线下课，学习项目)
+    handleTypeClick(item, list) {
+      item.checked = !item.checked;
+      //使用上面一行是可以多选，使用下面是单选
+      // list.forEach(row=>{
+      //   row.checked=false;
+      // })
+      // item.checked=true;
+
+      this.searchData();
+    },
+    //三级分类
+    handleOptionClick(item, level, list) {
+      // 线上品牌展示效果
+      this.newData = item.newData;
+      console.log(this.newData);
+      // 单选，排除法
+      this.oneList.forEach(one => {
+        one.checked = false;
+        if (one.id == item.id) {
+          this.navTitle = [{ ...one }]
+          one.checked = true;
+        }
+        one.children.forEach(two => {
+          two.checked = false;
+          if (two.id == item.id) {
+            this.navTitle = [{ ...one }, { ...two }]
+            two.checked = true
+          }
+          two.children.forEach(three => {
+            three.checked = false;
+            if (three.id == item.id) {
+              this.navTitle = [{ ...one }, { ...two }, { ...three }]
+              three.checked = true
+            }
+          })
+        })
+      })
+
+      // item.checked = !item.checked;
+      //使用上面一行是可以多选，使用下面是单选
+      // list.forEach(row => {
+      //   row.checked = false;
+      // })
+      // item.checked = true;
+      // //以下是新的规则的修改，
+      // if (!item.checked) {
+      //   //清空它下面的所有的中的
+      //   item.children.forEach(subItem => {
+      //     subItem.checked = false;
+      //     if (subItem.children) {
+      //       subItem.children.forEach(sub => {
+      //         sub.checked = false;
+      //       })
+      //     }
+      //   });
+      //   if (level == 1) {
+      //     this.twoList = [];
+      //     this.threeList = [];
+      //   }
+      //   if (level == 2) {
+      //     this.threeList = [];
+      //   }
+      //   this.searchData();
+      //   return;
+      // }
+
+      // let $this = this;
+      // if (level == 1) { //一级的情况
+      //   this.twoList = [];
+      //   this.threeList = [];
+      //   let lastCheked = null;
+      //   item.children.forEach(two => {
+      //     $this.twoList.push(two);
+      //     if (two.checked) {
+      //       lastCheked = two;
+      //     }
+      //   });
+      //   if (lastCheked != null) {
+      //     $this.threeList = lastCheked.children;
+      //     item.children.forEach(three => {
+      //     });
+      //   }
+      // } else if (level == 2) { //二级的情况
+      //   this.threeList = item.children;
+      // } else if (level == 3) { //三级的情况
+
+      // }
+      //this.handleChangeTypes(item);
+      this.searchData();
+    },
+    // 无用
+    handleChangeTypes(item) {
+      console.log(item);
+      //重新计算
+      this.twoList = [];
+      this.threeList = [];
+      let $this = this;
+      // this.oneList.forEach(one=>{
+      //   if(one.checked){
+      //      one.children.forEach(two=>{
+      //        $this.twoList.push(two);
+      //        if(two.checked){
+      //           two.children.forEach(three=>{
+      //             $this.threeList.push(three);
+      //           })
+      //        }
+      //      });
+      //   }
+      // })
+      this.oneList.forEach(one => {
+        if (one.checked) {
+          one.children.forEach(two => {
+            $this.twoList.push(two);
+            if (two.checked) {
+              two.children.forEach(three => {
+                $this.threeList.push(three);
+              })
+            }
+          });
+        }
+      })
+    },
+    // 加载分类
+    async loadTypeData() {
+      let $this = this;
+      try {
+        const { result, status } = await apiType.tree(1);
+        if (status === 200) {
+          let tree = [];
+          result.forEach((item, index) => {
+            let newItem = {
+              type: 11,
+              id: item.id,
+              name: item.name,
+              children: [],
+
+              checked: false
+            }
+            if (item.children) {
+              //增加死数据
+              // item.children.push({
+              //   type: 12,
+              //   id: item.id * (index + 200),
+              //   name: '线上品牌系列课程',
+              //   children: [],
+              //   checked: false,
+              //   newData: true
+              // })
+              item.children.forEach(subItem => {
+                let newSubItem = {
+                  type: 12,
+                  id: subItem.id,
+                  name: subItem.name,
+                  children: [],
+                  checked: false,
+                  newData: subItem?.newData || false
+                }
+
+                if (subItem.children) {
+                  subItem.children.forEach(sub => {
+                    let newSub = {
+                      type: 13,
+                      id: sub.id,
+                      name: sub.name,
+                      children: [],
+                      checked: false
+                    }
+                    newSubItem.children.push(newSub);
+                  })
+                }
+                newItem.children.push(newSubItem);
+              })
+            }
+            $this.oneList.push(newItem);
+
+
+          });
+          this.loadLocalFilters();
+          // this.search()
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 无用
+    banJump() {
+      if (this.resonimg.JumpUrl) {
+        window.open(this.resonimg.JumpUrl);
+      }
+    },
+    couresreso() {
+      let key = 'course';
+      apiPlace.detail(key).then(res => {
+        let resImgList = JSON.parse(res.result.content);
+        if (resImgList && resImgList.length > 0) {
+          this.resonimg = resImgList[0]
+        }
+      })
+    },
+    // 无用
+    jumUX() {
+      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130", "_blank");
+    },
+    // 无用
+    jumOpen() {
+      //公开课 openCourse=1
+      this.course.openCourse = 1;//
+      this.searchData();
+    },
+    // 头部
+    emitInput(val) {
+      this.keyword = val;
+      //this.stagList;
+      this.searchData();
+    },
+
+    // 滚动
+    // handleScroll() {
+    //   if (this.courseList.length > 6) {
+
+    //     let innerHeight = document.querySelector("#couser-list-content").clientHeight;
+    //     let outerHeight = document.documentElement.clientHeight;
+    //     let scrollTop = document.documentElement.scrollTop;
+    //     let outerWidth = document.querySelector(".xcontent2-minor").clientWidth;
+    //     if (outerHeight + scrollTop + 350 >= innerHeight) {
+    //       if (this.moreState == 1 && this.course.pageIndex < 4) {
+    //         this.loadMore();
+    //       }
+    //     }
+    //     //console.log(this.course.pageIndex,'this.course.pageIndex');
+    //     //加此判断，是为了没有数据时的闪动问题
+    //     //if(this.course.pageIndex >1){
+    //     if (scrollTop > 1176) {
+    //       document.querySelector("#fixd-box").style.cssText =
+    //         "position: fixed;top: -882px;width:" + outerWidth + "px";
+    //     } else {
+    //       document.querySelector("#fixd-box").style.cssText = "position: static";
+    //     }
+    //     //}
+    //   }
+    // },
+
+    toNeedCourse() {// 上传
+      // 需要先切换标签
+      //this.$store.dispatch('SetCurIdentity',2);
+      //this.$router.push('/need/course?open=new');
+      this.$refs.floatTools.toNeedCourse();
+
+    },
+    searchData() {
+      this.course.pageIndex = 1;
+      this.noPageList = true; //判断接口是否还有数据
+      this.noDataList = true; //判断接口是否还有数据
+      this.courseList = [];
+      this.totalPages = 4;
+      this.search();
+    },
+    inputOn() {
+      this.$forceUpdate();
+    },
+    ...mapActions({
+      getResOwnerTree: "resOwner/getResOwnerTree",
+      loadResOwners: "resOwner/loadResOwners",
+      getSysTypeTree: "sysType/getSysTypeTree",
+      loadSysTypes: "sysType/loadSysTypes"
+    }),
+    sysTypeName(code) {
+      if (code == "") {
+        return "";
+      }
+      return this.sysTypeMap.get(code);
+    },
+    searchterm() {
+      apiSearchterm.list(5, 1).then(res => {
+        if (res.status == 200) {
+          this.searchRecords = res.result;
+        }
+      });
+    },
+    //课程列表详情
+    toCourseDetail(item) {
+      let $this = this;
+      let courseId = item.id;
+      if (!courseId) {
+        courseId = item.courseId;
+      }
+      if (item.source == 1) {
+        //return `${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${item.type}`;
+        //location.href=`${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${item.type}`;
+        this.$router.push('/course/boeframe?id=' + courseId + '&type=' + item.type);
+        //此处使用window.open有问题
+        //window.open(`${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${item.type}`);
+      } else if (item.source == 3) {
+        //跳转到管理系统的页面
+        let manageApi = process.env.VUE_APP_MANAGER_API_PATH;
+        let studentPath = process.env.VUE_APP_STUDENT_PATH;
+        if (item.type == 30) { //线下课，面授课
+          let params = encodeURIComponent('courseId=' + courseId);
+          this.$router.push('/forward?to=' + manageApi + '/stu/project/redirectDetail&params=' + params);
+        } else if (item.type == 40) { //学习项目
+          let params = encodeURIComponent('projectId=' + courseId);
+          this.$router.push('/forward?to=' + studentPath + '/projectdetails&params=' + params);
+          //this.$router.push('/forward?to='+manageApi+'/stu/project/redirectDetail&params='+params);
+        }
+      } else {
+        if (item.type == 10) {
+          //return this.webBaseUrl + "/course/studyindex?id=" + item.id;
+          this.$router.push("/course/studyindex?id=" + courseId);
+        } else if (item.type == 20) {
+          apiCourseStudy.hasSignup(courseId).then(rs => {
+            if (rs.status == 200) {
+              //return $this.webBaseUrl + "/course/studyindex?id=" + item.id;
+              this.$router.push("/course/studyindex?id=" + courseId);
+            } else {
+              //return $this.webBaseUrl + "/course/detail?id=" + item.id;
+              this.$router.push("/course/detail?id=" + courseId);
+            }
+          })
+          //return $this.webBaseUrl + "/course/detail?id=" + item.id;
+        }
+      }
+    },
+    orderChange(id) {
+      this.course.orderField = id;
+      this.course.pageIndex = 1;
+      this.noPageList = true; //判断接口是否还有数据
+      this.noDataList = true; //判断接口是否还有数据
+      this.courseList = [];
+      this.totalPages = 1;
+      this.search();
+    },
+    //获取场景，保留
+    async getSceneData() {
+      try {
+        const { result, status } = await scene.list(1);
+        if (status === 200) {
+          this.sceneList = result;
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    loadMore() {
+      this.course.pageIndex += 1;
+      this.search();
+    },
+    // 高亮搜索词
+    brightenKeyword(val, keyword) {
+      const Reg = new RegExp(keyword, 'i');
+      let res = '';
+      if (val) {
+        res = val.replace(Reg, `<span style="color: #3e7fff;">${keyword}</span>`);
+        return res;
+      }
+    },
+    brightenKeywords(val, keyword) {
+      if (!val) return
+      const keywordData = val.filter(item => item.indexOf(keyword) != -1)
+      const Reg = new RegExp(keyword, 'i');
+      return keywordData.map(item => {
+        let color = '#e89e42'
+        let equalityColor = '#387DF7'
+        let listData = item.replace(Reg, `<span style="color: ${item == keyword ? equalityColor : color};">${keyword}</span>`)
+        const regex = /(.*?)(<span.*?>)(.*?)(<\/span>)(.*)/i;
+        const match = regex.exec(listData);
+        console.log(match);
+        const contentStart = match[1];
+        const spanTag = match[2];
+        const content = match[3];
+        const spanEnd = match[4];
+        const contentEnd = match[5];
+        let modifiedStr = '';
+        if (!contentStart) {
+          modifiedStr = `${spanTag}${content.substring(0, 3)}${spanEnd}${content.length == 1 ? contentEnd.substring(0, 2) : content.length == 2 ? contentEnd.substring(0, 1) : ''}`
+        } else if (contentStart.length == 1) {
+          modifiedStr = `${contentStart}${spanTag}${content.substring(0, 2)}${spanEnd}${content.length == 1 ? contentEnd.substring(0, 1) : ''}`
+        } else if (contentStart.length == 2) {
+          modifiedStr = `${contentStart}${spanTag}${content.substring(0, 1)}${spanEnd}`
+        } else {
+          modifiedStr = contentStart.substring(0, 3)
+        }
+        console.log(modifiedStr);
+        return {
+          name: modifiedStr,
+          title: listData,
+          showTitle: item.length > 3
+        }
+      })
+    },
+    getAllChecked() { //获取全部选中的标签
+      let list = [];
+
+      this.ctypeList.forEach(item => {
+        if (item.checked) {
+          list.push(item);
+        }
+      });
+      this.oneList.forEach(one => {
+        one.children.forEach(two => {
+          two.children.forEach(three => {
+            if (three.checked) {
+              list.push(three);
+            }
+          });
+          if (two.checked) {
+            list.push(two);
+          }
+        });
+        if (one.checked) {
+          list.push(one);
+        }
+      })
+      return list;
+    },
+    // 查询
+    async search() {
+      //
+      if (this.searching) {
+        this.$message.warning("正在搜索中，请待搜索完成后再重新搜索");
+        return;
+      }
+      this.searching = true;
+      //测试时间格式化
+      // let s=1650973801;
+      // var d = new Date(1650973801*1000);
+      // console.log(formatDateByFmt(d,'yyyy-MM-dd hh:mm'),'data');
+      this.saveLocalFilters();
+      let that = this;
+      if (this.keyword) {
+        apiSearchterm.save({ keyword: this.course.keyword, type: 1 });
+      }
+
+      if (this.audiences.length > 0) {
+        this.course.audiences = this.audiences.join(",");
+      }
+      //console.log(this.userInfo)
+      //this.course.companyId=this.userInfo.companyId;
+      this.course.type = "";//不使用单查询了
+      this.course.types = "";
+      this.course.sysType1 = "";
+      this.course.sysType2 = "";
+      this.course.sysType3 = "";
+      this.course.keyword = this.keyword;
+      let allChecked = this.getAllChecked();
+      allChecked.forEach(item => {
+        if (item.type == 1) {
+          if (that.course.types) { that.course.types += '-'; }
+          that.course.types += item.id;
+        } else if (item.type == 11) {
+          if (that.course.sysType1) { that.course.sysType1 += '-'; }
+          that.course.sysType1 += item.id;
+        } else if (item.type == 12) {
+          if (that.course.sysType2) { that.course.sysType2 += '-'; }
+          that.course.sysType2 += item.id;
+        } else if (item.type == 13) {
+          if (that.course.sysType3) { that.course.sysType3 += '-'; }
+          that.course.sysType3 += item.id;
+        }
+      });
+
+      this.isFind = true;
+      this.course.device = 1;
+      if (this.course.pageIndex == 1) {
+        this.courseList = [];
+      }
+
+      let isTopList = [];
+      // 隐藏loadMore
+      this.moreState = 2;
+      this.course.userId = this.userInfo.aid
+      await apiCoursePortal.courseSearch(this.course).then(res => {
+        this.searching = false;
+        if (res.status == 200) {
+          this.totalPages = res.result.totalPages;
+          res.result.list.forEach(item => {
+            if (item.startTime != '') {
+              item.startTime = formatDateByFmt(new Date(item.startTime * 1000), 'yyyy-MM-dd hh:mm')
+              //let time = item.startTime.split('-');
+              //item.startTime = `${time[0]}年${time[1]}月${time[2]}日`
+            }
+            //教师转化
+            if (item.teacher) {
+              item.teacher = item.teacher.split(',').filter(itemValue => itemValue !== 'BOE教师').join(',');
+              // if (dotIdx > 0) {
+                // item.teacher = item.teacher.substring(0, dotIdx);
+              // }
+            }
+            if (item.teacher && item.teacher == 'BOE教师') {
+              item.teacher = '';
+            }
+
+            //转化标红显示
+            item.title = item.name;
+            if (that.course.keyword) {
+              item.name = that.brightenKeyword(item.name, that.course.keyword);
+              item.keywordsActive = that.brightenKeywords(item.keywordsList, that.course.keyword)
+              console.log(item.keywordsActive);
+            } else {
+              item.name = item.name;
+            }
+          });
+console.log(res.result.list,'data')
+          this.courseList = res?.result?.list ?? []
+          console.log(this.courseList);
+          if (this.newData) {
+            this.courseList = [
+              {
+                audiences: "",
+                companyId: "",
+                coverImg: "",
+                createdAt: "",
+                device: 3,
+                domainIds: "",
+                duration: 7,
+                endTime: "",
+                esId: "Z4LAbYkBfn0lSHQ9acXX",
+                id: "1091051270927183872",
+                isSetAudience: 0,
+                isTop: 0,
+                keywords: "回归,新建,在线,课程",
+                keywordsList: ['回归', '新建', '在线', '课程'],
+                maxDuration: "",
+                name: "人力资源知识技能晋升（人力资源总监空降现场，为各位答疑解惑",
+                openCourse: 0,
+                openEnroll: 0,
+                orderType: "",
+                publishTime: 1689748779,
+                resOwner: "",
+                score: 5,
+                source: 2,
+                startTime: "",
+                studies: 2,
+                studiesFormat: "",
+                summary: "",
+                sysType1: "966458733088919552",
+                sysType2: "966459050400600064",
+                sysType3: "1060578278816509959",
+                tags: "",
+                teacher: "张学智",
+                teacherCode: "",
+                title: "BOE",
+                topTime: "",
+                type: 20,
+                types: "",
+                remark: '备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备'
+              },
+            ]
+          }
+          this.count = res?.result?.count
+          if (this.newData) {
+            this.count = 1
+          }
+          this.moreState = 3
+        } else {
+          this.moreState = 2;
+        }
+      })
+        .catch(err => {
+          this.moreState = 2;
+        });
+    },
+    // showInApply() {
+    //   this.inapply.show = true;
+    // },
+    // pushEnter(type) {
+    //   this.type1.push(type);
+    // },
+    // deleteOut(type) {
+    //   this.type1 = this.type.filter(item => item != type);
+    // },
+    // chooseShow(type) {
+    //   return this.type1.some(item => item == type);
+    // },
+    getAnkingData() {
+      apiCourse.ranking().then(res => {
+        if (res.status == 200) {
+          res.result.forEach(item => {
+            if (item.publishTime != '') {
+              item.coverImg = item.images;
+              let time = item.publishTime.split('-');
+              item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
+            }
+          })
+          this.ankingList = res.result;
+        }
+      });
+    },
+    getScoreList() {
+      apiCourse.scorelist(5, 2).then(res => {
+        if (res.status == 200) {
+          res.result.forEach(item => {
+            if (item.publishTime != '') {
+              item.coverImg = item.images;
+              let time = item.publishTime.split('-');
+              item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
+            }
+          })
+          this.scorelist = res.result;
+          // console.log(this.scorelist)
+        }
+      });
+    },
+    getHotList() {
+      apiCourse.studyCounts(5).then(res => {
+        if (res.status == 200) {
+          res.result.forEach(item => {
+            if (item.publishTime != '') {
+              item.coverImg = item.images;
+              let time = item.publishTime.split('-');
+              item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
+            }
+          })
+          this.hotList = res.result;
+        }
+      });
+    },
+    jumpRouter(item) {
+      //console.log(item.type, "item.type");
+      // return console.log(id,type,"fihkj1")
+      // if (item.type == 20) {
+      //录播课
+      //  window.open(`${this.webBaseUrl}/course/detail?id=${id}`)
+      this.$router.push(`/course/detail?id=${item.id}`);
+      // }
+      // if (item.type == 10) {
+      //微课
+      //  window.open(`${this.webBaseUrl}/course/micro?id=${id}`)
+      //   this.$router.push(`/course/micro?id=${item.id}`);
+      // }
+    },
+    jumpRouter2(item) {
+      // console.log(item,"土豪包括九年")
+      let type = item.courseType;
+      let id = item.courseId;
+
+      //console.log(item.type,type,'item.type');
+      // return console.log(id,type,"fihkj1")
+      // if (type == 20) {
+      //录播课
+      //  window.open(`${this.webBaseUrl}/course/detail?id=${id}`)
+      this.$router.push(`/course/detail?id=${id}`);
+      // }
+      // if (type == 10) {
+      //微课
+      //  window.open(`${this.webBaseUrl}/course/micro?id=${id}`)
+      //   this.$router.push(`/course/micro?id=${id}`);
+      // }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.couser-list-content {
+  min-height: 110%;
+}
+
+// 标题
+.navTitle {
+  margin-bottom: 20px;
+
+  & a:hover {
+    color: #387DF7;
+  }
+
+  .oneTitle {
+    display: inline-block;
+    cursor: pointer;
+
+    & .titleName:hover {
+      color: #387DF7;
+    }
+  }
+}
+
+// 三级背景高度
+.course-recommended-style{
+  position: relative;
+  height: 142px;
+  background-image: url('../../../assets/images/course/courserecommended.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+}
+.course-title-style {
+  position: relative;
+  height: 100px;
+  background-image: url('../../../../public/images/courseBg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+
+  .imgTilte {
+
+    & div:first-child {
+      padding-left: 40px;
+      font-size: 30px;
+      color: #FFFFFF;
+    }
+
+    & div:last-child {
+      padding-left: 40px;
+      font-size: 20px;
+      color: #FFFFFF;
+      opacity: .5;
+      font-family: ArialMT !important;
+    }
+
+  }
+}
+
+// 三级列表
+.course-list {
+  background-color: #fff;
+
+  .course-one {
+    position: relative;
+
+    .course-one-content {
+      cursor: pointer;
+      line-height: 38px;
+      height: 38px;
+      padding-left: 40px;
+      background: linear-gradient(270deg, #F0F7FF 0%, #DDEDFF 100%);
+    }
+
+    // 二级的高亮
+    .courseTwoActive {
+      color: #387DF7;
+      border-image: linear-gradient(90deg, rgba(47, 101, 236, 1), rgba(228, 236, 255, 1)) 1 1 !important;
+    }
+
+    .course-two {
+      position: relative;
+      border-bottom: 1px solid;
+      border-image: linear-gradient(333deg, rgba(243, 243, 243, 1), rgba(227, 227, 227, 1)) 1 1;
+
+      .course-two-content {
+        cursor: pointer;
+        height: 38px;
+        line-height: 38px;
+        font-size: 16px;
+        padding-left: 40px;
+      }
+    }
+
+    .popover {
+      background: linear-gradient(180deg, rgba(78, 166, 255, 0.2) 0%, rgba(78, 166, 255, 0) 100%);
+    }
+
+  }
+
+}
+
+// 导航
+.topNav {
+  display: flex;
+  margin-bottom: 20px;
+
+  .nav {
+    display: flex;
+    align-items: center;
+
+    .option-item {
+      position: relative;
+
+      .nav-bottbor {
+        position: absolute;
+        top: 130%;
+        left: 0;
+        width: 100%;
+        height: 4px;
+        background: #387DF7;
+        border-radius: 5px;
+      }
+    }
+  }
+}
+
+.u-class {
+  ::v-deep .el-dialog {
+    border-radius: 15px;
+
+    .el-dialog__headerbtn .el-dialog__close {
+      color: white;
+      position: absolute;
+      z-index: 99;
+      right: 15px;
+    }
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 0px;
+  }
+
+  .ClassBoxContent {
+    width: 100%;
+    height: 396px;
+    // background: red;
+    border-radius: 15px;
+
+    .ContentBox {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 9;
+      display: flex;
+
+      .left,
+      .right {
+        height: calc(100% - 30px);
+      }
+
+      .left {
+        padding-left: 30px;
+        width: 48%;
+        margin-top: -32px;
+
+        .title {
+          width: 200px;
+          height: 59px;
+          line-height: 59px;
+          text-align: center;
+          margin-left: -8px;
+          font-size: 38px;
+          color: white;
+          margin-top: 42.97px;
+          padding-top: 5px;
+          text-shadow: 0 6px 3px rgba(96, 85, 243, 0.4);
+        }
+
+        .jy {
+          color: white;
+          font-size: 20px;
+          margin-top: 87.53px;
+          font-weight: 400;
+        }
+
+        .msg {
+          margin-top: 5px;
+          color: rgba(255, 255, 255, 0.85);
+          width: 326px;
+          text-align: justify;
+          line-height: 20px;
+        }
+
+        .bottom {
+          width: 100px;
+          height: 1px;
+          background: rgba(255, 255, 255, 0.85);
+          margin-top: 40px;
+        }
+      }
+
+      .right {
+        // padding-left: 10px;
+        width: 50%;
+
+        .tyl {
+          cursor: pointer;
+          width: calc(100% - 20px);
+          background: rgba(255, 255, 255, 0.95);
+          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+          border-radius: 4px;
+          height: 160px;
+          margin-top: 163px;
+
+          .tyl_title {
+            width: 100%;
+            padding-left: 20px;
+            padding-top: 20px;
+
+            .tyl_title_img {
+              width: 18px;
+              height: 18px;
+            }
+
+            .tyl_title_msg {
+              font-size: 20px;
+              margin-left: 10px;
+              color: #333333;
+              font-weight: 600;
+            }
+          }
+
+          .tyl_jy {
+            margin-top: 6.5px;
+            font-size: 14px;
+            font-weight: 600;
+            padding-left: 20px;
+            color: #333333;
+          }
+
+          .tyl_msg {
+            width: 350.36px;
+            margin-top: 13px;
+            margin-left: 20px;
+            font-size: 14px;
+            color: #666666;
+            font-weight: 400;
+            letter-spacing: 0;
+            text-align: justify;
+          }
+        }
+
+        .tyl:hover {
+          border: 0.96px solid rgba(140, 105, 242, 1);
+          box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.3);
+        }
+        .text_msg{
+          margin: 43px 0 0 222px;
+          font-size: 14px;
+          color: #000;
+        }
+
+        .cyl {
+          cursor: pointer;
+          width: calc(100% - 20px);
+          background: rgba(255, 255, 255, 0.95);
+          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+          border-radius: 4px;
+          height: 180px;
+          margin-top: 10px;
+
+          .tyl_title {
+            width: 100%;
+            padding-left: 20px;
+            padding-top: 20px;
+
+            .tyl_title_img {
+              width: 18px;
+              height: 18px;
+            }
+
+            .tyl_title_msg {
+              font-size: 20px;
+              margin-left: 10px;
+              color: #333333;
+              font-weight: 600;
+            }
+          }
+
+          .tyl_jy {
+            margin-top: 6.5px;
+            font-size: 14px;
+            font-weight: 600;
+            padding-left: 20px;
+            color: #333333;
+          }
+
+          .tyl_msg {
+            width: 350.36px;
+            margin-top: 13px;
+            margin-left: 20px;
+            font-size: 14px;
+            color: #666666;
+            font-weight: 400;
+            letter-spacing: 0;
+            text-align: justify;
+          }
+        }
+
+        .cyl:hover {
+          border: 0.96px solid rgba(140, 105, 242, 1);
+          box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.24);
+        }
+      }
+    }
+
+    .img {
+      width: 835px;
+      height: 428px;
+      margin-left: -1px;
+      margin-top: -1px;
+      position: absolute;
+      top: 0px;
+    }
+  }
+}
+
+.couresstartTime {
+  line-height: 26px;
+  height: 26px;
+  padding-top: 5px;
+  font-size: 14px;
+  color: #666;
+  // position: absolute;
+  // right:2px;
+  // height: 20px;
+  // bottom: 50px;
+}
+
+.interact-bar-value {
+  color: #999;
+}
+
+.couderbox {
+  // width: 5px;
+  // padding: 0;
+  // display: inline-block;
+  // text-align: center;
+}
+
+.coures-border {
+  width: 2px;
+  height: 15px;
+  border-radius: 20%;
+  background: #666;
+}
+
+.notcoures {
+  text-align: center;
+
+  img {
+    width: 360px;
+    height: 226px;
+  }
+
+  h5 {
+    font-size: 14px;
+    color: #333333;
+    font-weight: 400;
+  }
+}
+
+.course-type-left {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 60px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  background-color: #f99000;
+  border-radius: 2px 4px 2px 14px;
+  font-size: 12px;
+  color: #ffffff;
+  -moz-user-select: none;
+  /*火狐*/
+  -webkit-user-select: none;
+  /*webkit浏览器*/
+  -ms-user-select: none;
+  /*IE10*/
+  -khtml-user-select: none;
+  /*早期浏览器*/
+  user-select: none;
+}
+
+.list-lidex {
+  display: inline-block;
+  display: flex;
+}
+
+.course-resources {
+  margin-top: 24px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+  }
+}
+
+.course-img-box {
+  position: relative;
+}
+
+.course-img-box:hover {
+  transform: scale(1.15) translateY(-15px);
+  transition: all 0.6s;
+}
+
+// 关键字卡片的样式
+.keywordInfo-every {
+  display: flex;
+  padding-top: 5px;
+
+  .keywordInfo {
+    width: 54px;
+    font-size: 12px;
+    line-height: 26px;
+    background: #F2F5F7;
+    border-radius: 4px;
+    position: relative;
+    border: 1px solid #387DF7;
+
+    .keyword-content {
+      color: #387DF7;
+      text-align: center;
+    }
+  }
+
+  & .keywordInfo:last-child {
+    margin-right: 0 !important;
+  }
+
+}
+
+
+.list-active {
+  display: none;
+  // width: 458px;
+  width: 135%;
+  height: 165px;
+  padding: 20px;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 2px;
+  border: 1px solid #EDEFF0;
+  position: absolute;
+  top: 30px;
+  left: -17.5%;
+  z-index: 999;
+
+  .list-content {
+    display: flex;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #EDEFF0;
+
+    .list-img {
+      width: 125px;
+      height: 70px;
+      position: relative;
+
+      ::v-deep .el-image {
+        border-radius: 4px !important;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      .course-type {
+        position: absolute;
+        right: 23.5%;
+        // bottom: 26%;
+        top: 0;
+        height: 20;
+        line-height: 20px;
+        font-size: 12px;
+        color: #FFFFFF;
+        padding: 0px 8px;
+        background: #f99000;
+        border-radius: 0px 0px 0px 10px;
+      }
+    }
+
+    .list-text {
+      flex: 1;
+
+      // margin-left: 12px;
+      h6 {
+        font-size: 14px;
+        margin: 0px;
+        font-weight: 500;
+        line-height: normal;
+        color: #04243C;
+      }
+
+      span {
+        font-size: 14px;
+        color: #6E7B84;
+      }
+    }
+  }
+
+  .list-bottom {
+    padding-top: 10px;
+
+    ::v-deep .interact-bar-btns {
+      justify-content: space-between !important;
+
+      .interact-bar-btn {
+        margin: 0 !important;
+      }
+    }
+  }
+}
+
+.list-info {
+  position: relative;
+
+  .span {
+    display: flex;
+  }
+}
+
+.list-info:hover .list-active {
+  // transition: all 0.5s;
+  display: block;
+}
+
+.course-banner {
+  // height: 240px;
+  // background: url('../../../../public/images/course-banner.png');
+  background-color: #0078FC;
+}
+
+::v-deep .el-radio-button {
+  margin-right: 0px;
+}
+
+::v-deep .title-line-ellipsis {
+  // width: 100%;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  box-sizing: border-box;
+  word-break: break-all;
+}
+
+::v-deep .el-card__body {
+  padding: 0;
+}
+
+::v-deep .bacolor:nth-child(odd) {
+  background-color: #fff;
+  padding: 0 5px;
+}
+
+::v-deep .bacolor:nth-child(even) {
+  background-color: #f6f6f6;
+  padding: 0 5px;
+}
+
+.Uxtext {
+  font-weight: 450;
+  margin-top: 5px;
+  margin-left: 15px;
+  font-size: 14px;
+  color: #3d3d3d;
+  cursor: pointer;
+  position: relative;
+}
+
+.uxicon {
+  font-size: 10px;
+  position: absolute;
+  top: -14px;
+  left: 98%;
+}
+
+// .el-radio-button{
+//   margin-right: 10px;
+//   margin-bottom: 10px;
+
+//   .el-radio-button__inner{
+//     background: #fff;
+//     border: none;
+//     height: 20px;
+//   }
+// }
+::v-deep .el-radio-button__inner,
+.el-radio-group {
+  vertical-align: top;
+}
+
+::v-deep .el-radio-button__inner {
+  background: none;
+}
+
+::v-deep .el-radio-button:first-child .el-radio-button__inner {
+  border-left: none;
+  // border-radius: 4px 0 0 4px;
+  //box-shadow: none!important;
+}
+
+.item-title {
+  margin: 10px 10px 10px 0;
+  font-size: 14px;
+  color: #6E7B84;
+}
+
+.item-line {
+  padding-left: 2px;
+  height: 20px;
+  background: #ddd;
+}
+
+.btn-label {
+  position: relative;
+  display: inline-block;
+  outline: 0;
+
+  span {
+    padding: 7px 15px;
+    font-size: 12px;
+    border-radius: 0;
+    white-space: nowrap;
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    font-weight: 500;
+    border-left: 0;
+    color: #606266;
+    -webkit-appearance: none;
+    text-align: center;
+    box-sizing: border-box;
+    outline: 0;
+    margin: 0;
+    position: relative;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+}
+
+.searchbar {
+  background-color: #ffffff;
+  // border: 1px solid #f3f3f3;
+  // width: 900px;
+  // padding: 5px 20px;
+}
+
+.fixed {
+  position: fixed;
+  top: 0px;
+  background-color: #f0f0f0;
+  z-index: 999;
+  height: 50px;
+}
+
+.content-div {
+  .quyer-tag {
+
+    // margin-left: 10px;
+    .order-class {
+      margin: 30px 0;
+      color: #6E7B84;
+      text-align: left;
+      font-size: 14px;
+      padding: 4px 8px;
+      margin-right: 30px;
+    }
+
+    .actice {
+      background: #387DF7;
+      color: #fff;
+    }
+  }
+
+  /* 分页div */
+  .pagination-div {
+    text-align: center;
+    padding: 10px 0;
+    margin: 10px;
+
+    .pag-text {
+      border: 1px solid #292828;
+      padding: 10px 20px;
+      border-radius: 20px;
+      background: #fff;
+      cursor: pointer;
+    }
+
+    .pag-text-msg {
+      padding: 10px 20px;
+      background: #fff;
+    }
+  }
+
+  .search-div {
+    background: #fff;
+    padding: 10px 25px;
+    border-radius: 8px;
+
+    ::v-deep .el-input {
+      width: 420px;
+      height: 38px;
+      margin-bottom: 13px;
+
+      .el-input__inner {
+        height: 38px;
+        border-radius: 0;
+      }
+
+      .el-input-group__append {
+        width: 44px;
+        height: 38px;
+        border: 0;
+        padding: 0;
+        background: #3e7fff;
+        border-radius: 0;
+
+        .el-button {
+          margin: 0;
+          border: 0;
+          width: 100%;
+          height: 38px;
+          padding: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          .el-icon-search {
+            color: #fff;
+            font-size: 22px;
+          }
+        }
+      }
+    }
+
+    // .tip{
+    //   color:#999999;
+    //   font-size: 12px;
+    //   >span{
+    //     margin-right: 8px;
+    //     cursor: pointer;
+    //   }
+    // }
+    .search-item {
+      // padding: 10px 0;
+    }
+
+    .search-item:not(:last-child) {
+      // border-bottom: 1px solid #dfdfdf;
+    }
+
+    .search-item-sub {
+      // margin-top: 10px;
+      display: flex;
+    }
+  }
+
+  .search-div-collapse {
+    display: block;
+  }
+
+  .search-div-expand {
+    // display: none;
+  }
+
+  .search-div-more {
+    text-align: center;
+  }
+
+  .order-div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 15px 0 0px;
+
+    .order-count {
+      font-size: 14px;
+      color: #6E7B84;
+
+      span {
+        color: #000;
+      }
+    }
+  }
+}
+
+// .course-form {
+//   width: 100%;
+//   margin: 10px 0;
+//   ::v-deep.el-button {
+//     width: 100%;
+//     color: #fff;
+//   }
+// }
+
+// .right-box {
+//   .add-btn {
+//     width: 100%;
+//     padding: 15px 0;
+//   }
+//   .ranking-card {
+//     margin-top: 0px;
+//   }
+
+//   .ranking-data {
+//     margin: 10px 0;
+//     color: #999999;
+//   }
+// }]
+.search-item-type {
+  line-height: 25px;
+  padding-right: 10px;
+  width: 85px;
+  white-space: nowrap;
+}
+
+.option-item {
+  font-family: "Menlo", "苹方-简" !important;
+  color: #3d3d3d;
+  display: inline-block;
+  font-size: 14px;
+  margin: 0px 15px;
+}
+
+.option-border {
+  width: 2px;
+  display: inline-block;
+  height: 15px;
+  margin: 0px 20px -2px 20px;
+  background: #666;
+}
+
+.option-active {
+  color: #387DF7;
+}</style>