系列课程

src/views/portal/course/CourseSeries.vue

@@ -26,55 +26,55 @@
         </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 class="xindex-content" style="padding: 0">
+      <div class="modules xcontent2">
+        <div class="xcontent2-main">
+          <div class="modules-list list" style="margin-top: 0">
+            <!--内容列表内容-->
+            <div v-for="(course, ccidx) in courseList" :key="'cc' + ccidx" class="xindex-course"
+              style="position: relative">
+              <a @click="toCourseDetail(course)">
+                <div class="xindex-course-image">
+                  <course-image :course="course"></course-image>
+                  <span v-if="course.type == 20 || course.type == 10" class="course-type overType">录播课</span>
+                  <span class="overType coursePosition">面授课</span>
+                  <span v-if="course.type == 40" class="course-type">学习项目</span>
+                  <span class="overType courseTime">2023-09-22</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 style="width: 80%" :title="course.name" v-html="course.name"
+                  class="course-title portal-title-tow two-line-ellipsis"></div>
+                <div class="course-author">
+                  <div class="course-author-left">
+                    {{ course.teacher }}
+                    <span class="study-num">{{ formatNum(course.studies) }}人学习</span>
                   </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 style="display: flex">
+                    <div v-if="course.score != '0'">
+                      <span class="course-score-value" style="margin-left: 10px">
+                        {{ toScore(Number(course.score)) }}分
+                      </span>
                     </div>
-                  </div>
+                    <div v-else class="course-score-no">未评分</div>
+                  </div> -->
                 </div>
               </a>
             </div>
           </div>
+          <div v-if="courseList.length == 0" class="pagination-div">
+            <span class="notcoures">
+              <img :src="`${webBaseUrl}/images/nocase.png`" alt="">
+              <h5>暂无数据～</h5>
+            </span>
+          </div>
         </div>
       </div>
     </div>
+    <div v-if="courseList.length !== 0" style="margin-bottom: 45px;">
+      <pagination :size="params.pageSize" :total="total" :page="params.pageNo" @change-size="changePageSize"
+        @change-page="loadData" style="background-color: rgba(0, 0, 0, 0);" :autoScroll="false"
+        :pageSizes="[12, 24, 36, 48]"></pagination>
+    </div>
 
   </div>
 </template>
@@ -102,6 +102,7 @@ export default {
         name: '项目管理系列课程',
         path: ''
       }],
+      total: 0,
       params: {
         pageNo: 1,
         pageSize: 10,
@@ -178,4 +179,42 @@ export default {
     right: 5px;
   }
 }
+
+.xindex-course-image:hover {
+  transform: scale(1.25) translateY(-15px);
+  transition: all 0.6s;
+}
+
+.overType {
+  position: absolute;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  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;
+}
+
+.coursePosition {
+  bottom: 0px;
+  left: 0px;
+  width: 60px;
+  background-color: #f99000;
+  border-radius: 2px 8px 2px 3px;
+}
+.courseTime{
+  bottom: 0px;
+  right: 0px;
+  padding: 0 20px;
+  background-color: #f99000;
+  border-radius: 8px 2px 3px 2px;
+}
 </style>