课程推荐页面

src/router/index.js

@@ -110,6 +110,20 @@ export const constantRoutes = [{
   name: 'course',
   meta: { title: '课程', keepAlive: true, icon: 'dashboard', noCache: true, affix: false },
 },
+{
+    path: '/courseRecommended',
+    hidden: true,
+    component: (resolve) => require(['@/views/portal/course/CourseRecommended'], resolve),
+    name: 'courseRecommended',
+    meta: { title: '推荐课程', keepAlive: true, icon: 'dashboard', noCache: true, affix: false },
+},
+{
+    path: '/courseSeries',
+    hidden: true,
+    component: (resolve) => require(['@/views/portal/course/CourseSeries'], resolve),
+    name: 'courseSeries',
+    meta: { title: '系列课程', keepAlive: true, icon: 'dashboard', noCache: true, affix: false },
+},
 {
   path: '/course/micro',
   hidden: true,

src/views/portal/course/CourseRecommended.vue

@@ -0,0 +1,203 @@
+<template>
+  <div id="couser-list-content">
+    <div class="case-banner">
+      <PortalHeader current="course" textColor="#fff" :keywords="keyword" @emitInput="emitInput" @showClass="showClass" />
+    </div>
+    <div class="xcontent2">
+      <div class="xcontent2-main">
+        <div class="left-div">
+          <div class="navTitle">
+            <diV>
+              <template v-if="navTitle.length">
+                <div class="oneTitle" v-for="(item, index) in navTitle" :key="item.id">
+                  <router-link :to="item.path" class="titleName">&nbsp;{{
+                    item.name
+                  }}&nbsp;</router-link>
+                  <span v-if="index !== navTitle.length - 1">></span>
+                </div>
+              </template>
+            </diV>
+            <div style="position: relative;">
+              <el-input class="portal-input" placeholder="请输入课程名称" style="border-radius: 20px !important; "
+                @keyup.enter.native="searchJump()" clearable maxlength="50" v-model="params.courseName">
+              </el-input>
+              <el-button class="sear-but" @click="searchJump()" type="primary" size="mini">搜索</el-button>
+            </div>
+          </div>
+          <div class="data-content">
+            <div v-for="item in courseList.list" :key="item.id" class="case-list" @click="handleClick(item.id)">
+              <div class="imgEntrance">
+                <img src="../../../assets//images/grateful/empBanner.png" alt="">
+              </div>
+              <div class="courseTitle" :data-type="item.id">
+                <div class="courseTop">
+                  <div class="case-tittext">
+                    <span class="title-line-ellipsis">{{ item.title }}</span>
+                  </div>
+                  <div class="case-info-date portal-time">
+                    <i class="el-icon-time"></i>
+                    <TimeShow :time="item.sysCreateTime" />
+                  </div>
+                </div>
+                <div class="courseInfoSummary two-line-ellipsis">
+                  {{ item.summary }}
+                </div>
+              </div>
+            </div>
+            <div v-if="courseList.showPagCount > params.pageSize">
+              <pagination :size="params.pageSize" :total="courseList.count" :page="params.pageNo"
+                layout="total, prev, pager, next, jumper" @change-page="currentChange"></pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import PortalHeader from "@/components/PortalHeader.vue";
+import TimeShow from "@/components/Portal/datetimeShow.vue";
+export default {
+  name: 'CourseRecommended',
+  components: { PortalHeader, TimeShow },
+  data() {
+    return {
+      keyword: "",
+      navTitle: [{
+        name: "课程",
+        path: '/course'
+      }, {
+        name: "推荐课程",
+        path: ''
+      }],
+      params: {
+        pageNo: 1,
+        pageSize: 10,
+        courseName: '',
+      },
+      courseList: {
+        list: [{
+          id: 1,
+          title: "项目管理系列课程",
+          sysCreateTime: '2023-09-22',
+          summary: "哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊红i哈好哈啊哈好哈啊哈哈好哈哈啊哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊哈哈好哈哈啊"
+        }, {
+          id: 2,
+          title: "项目管理系列课程",
+          sysCreateTime: '2023-09-22',
+          summary: "哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊红i哈好哈啊哈好哈啊哈哈好哈哈啊哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊哈哈好哈哈啊"
+        }],
+        showPagCount: 0,
+        count: 0
+      }
+    }
+  },
+  computed: {
+    queryId() {
+      console.log(this.$route.query);
+      return this.$route.query.id
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    emitInput() {
+
+    },
+    showClass() { },
+    // 点击跳转到链接
+    handleClick(id) {
+      this.$router.push({
+        path: '/courseSeries',
+        query: { id }
+      })
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.case-banner {
+  height: 240px;
+  background: url('../../../../public/images/case-banner.png');
+  margin-bottom: 30px;
+}
+
+/* 标题 */
+.navTitle {
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  & a:hover {
+    color: #387DF7;
+  }
+
+  .oneTitle {
+    display: inline-block;
+    cursor: pointer;
+
+    & .titleName:hover {
+      color: #387DF7;
+    }
+  }
+
+  .sear-but {
+    position: absolute;
+    bottom: 10%;
+    right: 5px;
+  }
+}
+
+// 中心内容
+.data-content {
+  background-color: #fff;
+  padding: 5px 50px;
+  // .case-list:last-child {
+  //   border-bottom: none;
+  // }
+
+  .case-list {
+    // border-bottom: 1px solid rgba(153, 153, 153, .2);
+    margin-top: 10px;
+    margin-bottom: 25px;
+    padding-left: 5px;
+    padding-right: 5px;
+    display: flex;
+
+    .imgEntrance {
+      width: 200px;
+      height: 200px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      margin-right: 20px;
+    }
+
+    .courseTitle {
+      flex: 1;
+
+      .courseTop {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .courseInfoSummary {
+        margin-top: 16px;
+        cursor: pointer;
+        margin-bottom: 5px;
+        word-break: break-all;
+        line-height: 24px;
+        font-size: 14px;
+        color: #333330;
+        font-weight: 400;
+      }
+    }
+  }
+
+}
+</style>

src/views/portal/course/CourseSeries.vue

@@ -0,0 +1,181 @@
+<template>
+  <div id="couser-list-content">
+    <div class="case-banner">
+      <PortalHeader current="course" textColor="#fff" :keywords="keyword" @emitInput="emitInput" @showClass="showClass" />
+    </div>
+    <div class="xcontent2">
+      <div class="xcontent2-main">
+        <div class="left-div">
+          <div class="navTitle">
+            <diV>
+              <template v-if="navTitle.length">
+                <div class="oneTitle" v-for="(item, index) in navTitle" :key="item.id" @click="">
+                  <router-link :to="{ path: item.path, query: { id: !item.path ? queryId : undefined } }"
+                    class="titleName">&nbsp;{{ item.name }}&nbsp;</router-link>
+                  <span v-if="index !== navTitle.length - 1">></span>
+                </div>
+              </template>
+            </diV>
+            <div style="position: relative;">
+              <el-input class="portal-input" placeholder="请输入课程名称" style="border-radius: 20px !important; "
+                @keyup.enter.native="searchJump()" clearable maxlength="50" v-model="params.courseName">
+              </el-input>
+              <el-button class="sear-but" @click="searchJump()" type="primary" size="mini">搜索</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="xcontent2">
+      <div class="xcontent2-main content-div">
+        <div class="xcourse-list" style="background-color: #fff;border-radius: 8px;padding:0 25px;">
+          <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">
+                  <CourseImage :text="true" :course="cinfo"></CourseImage>
+                  <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">
+                    <span class="course-info-author" v-if="cinfo.teacher" v-html="cinfo.teacher"></span>
+                    <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>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+import PortalHeader from "@/components/PortalHeader.vue";
+import TimeShow from "@/components/Portal/datetimeShow.vue";
+import { formatUserNumber, toScore } from "@/utils/tools.js";
+import CourseImage from "@/components/Course/courseImage.vue";
+import InteractBar from "@/components/Portal/interactBar.vue";
+export default {
+  name: 'CourseRecommended',
+  components: { PortalHeader, TimeShow, CourseImage, InteractBar },
+  data() {
+    return {
+      keyword: "",
+      formatNum: formatUserNumber,
+      toScore,
+      navTitle: [{
+        name: "课程",
+        path: '/course'
+      }, {
+        name: "推荐课程",
+        path: "/courseRecommended"
+      }, {
+        name: '项目管理系列课程',
+        path: ''
+      }],
+      params: {
+        pageNo: 1,
+        pageSize: 10,
+        courseName: '',
+      },
+      courseList: {
+        list: [{
+          id: 1,
+          title: "项目管理系列课程",
+          sysCreateTime: '2023-09-22',
+          summary: "哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊红i哈好哈啊哈好哈啊哈哈好哈哈啊哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊哈哈好哈哈啊"
+        }, {
+          id: 2,
+          title: "项目管理系列课程",
+          sysCreateTime: '2023-09-22',
+          summary: "哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊红i哈好哈啊哈好哈啊哈哈好哈哈啊哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊哈哈好哈哈啊"
+        }],
+        showPagCount: 0,
+        count: 0
+      }
+    }
+  },
+  computed: {
+    queryId() {
+      console.log(this.$route.query);
+      return this.$route.query.id
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    toCourseDetail(cinfo) {
+      console.log(cinfo);
+
+    },
+    emitInput() {
+
+    },
+    showClass() { },
+  }
+};
+</script>
+<style scoped lang="scss">
+.case-banner {
+  height: 240px;
+  background: url('../../../../public/images/case-banner.png');
+  margin-bottom: 30px;
+}
+
+/* 标题 */
+.navTitle {
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  & a:hover {
+    color: #387DF7;
+  }
+
+  .oneTitle {
+    display: inline-block;
+    cursor: pointer;
+
+    & .titleName:hover {
+      color: #387DF7;
+    }
+  }
+
+  .sear-but {
+    position: absolute;
+    bottom: 10%;
+    right: 5px;
+  }
+}
+</style>

src/views/portal/course/Index.vue

@@ -21,6 +21,11 @@
       <div class="xcontent2">
         <!-- 左侧三级 -->
         <div class="xcontent2-minor" style="margin-right:36px;">
+          <router-link to="/courseRecommended" style="margin-bottom: 20px;" class="course-title-style">
+            <div class="imgTilte">
+              <div>课程推荐</div>
+            </div>
+          </router-link>
           <div class="course-title-style">
             <div class="imgTilte">
               <div>课程分类</div>