修改课程推荐样式

src/views/portal/course/CourseRecommended.vue

@@ -3,6 +3,7 @@
     <div class="case-banner">
       <PortalHeader current="course" textColor="#fff" :keywords="keyword" @emitInput="emitInput" @showClass="showClass" />
     </div>
+    <!-- 搜索和nav -->
     <div class="xcontent2">
       <div class="xcontent2-main">
         <div class="left-div">
@@ -24,8 +25,15 @@
               <el-button class="sear-but" @click="searchJump()" type="primary" size="mini">搜索</el-button>
             </div>
           </div>
+        </div>
+      </div>
+    </div>
+    <!-- 中心 -->
+    <div v-for="item in courseList.list" :key="item.id" style="margin-bottom: 30px;" class="xcontent2">
+      <div class="xcontent2-main">
+        <div class="left-div">
           <div class="data-content">
-            <div v-for="item in courseList.list" :key="item.id" class="case-list" @click="handleClick(item.id)">
+            <div class="case-list" style="margin-top: 25px;" @click="handleClick(item.id)">
               <div class="imgEntrance">
                 <img src="../../../assets//images/grateful/empBanner.png" alt="">
               </div>
@@ -42,6 +50,10 @@
                 <div class="courseInfoSummary two-line-ellipsis">
                   {{ item.summary }}
                 </div>
+                <div class="recommendedAuthor">
+                  <div>京东方大学推荐</div>
+                  <div>共3门课程</div>
+                </div>
               </div>
             </div>
             <div v-if="courseList.showPagCount > params.pageSize">
@@ -52,6 +64,35 @@
         </div>
       </div>
     </div>
+    <!-- 评分  -->
+    <div class="float-tools" @click="() => (evaluateVisible = !evaluateVisible)">
+      <div class="content">
+        <img src="../../../assets/images/grateful/suggestion.png" alt="" />
+        <span>去评分</span>
+      </div>
+    </div>
+    <!-- 意见 -->
+    <el-dialog :close-on-click-modal="false" width="629px" :visible.sync="evaluateVisible" :append-to-body="true"
+      @closed="closeDlg">
+      <div class="dialogContent">
+        <div class="dialogTop">
+          <div class="words">
+            <div>我对本次推荐课程很满意</div>
+          </div>
+        </div>
+        <el-form >
+          <el-form-item>
+            哈哈哈
+          </el-form-item>
+          <el-form-item>
+            <div style="display: flex; justify-content: center">
+              <el-button style="width: 100px;" @click="closeDlg">取消</el-button>
+              <el-button style="width: 100px;" @click="submitNotice" type="primary">确认</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -62,6 +103,7 @@ export default {
   components: { PortalHeader, TimeShow },
   data() {
     return {
+      evaluateVisible:false,
       keyword: "",
       navTitle: [{
         name: "课程",
@@ -86,6 +128,11 @@ export default {
           title: "项目管理系列课程",
           sysCreateTime: '2023-09-22',
           summary: "哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊红i哈好哈啊哈好哈啊哈哈好哈哈啊哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊哈哈好哈哈啊"
+        }, {
+          id: 3,
+          title: "项目管理系列课程",
+          sysCreateTime: '2023-09-22',
+          summary: "哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊红i哈好哈啊哈好哈啊哈哈好哈哈啊哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊哈哈好哈哈啊"
         }],
         showPagCount: 0,
         count: 0
@@ -102,6 +149,12 @@ export default {
 
   },
   methods: {
+    closeDlg() {
+
+    },
+    submitNotice() {
+
+    },
     emitInput() {
 
     },
@@ -119,7 +172,7 @@ export default {
 <style scoped lang="scss">
 .case-banner {
   height: 240px;
-  background: url('../../../../public/images/case-banner.png');
+  background: url('../../../../public/images/courseBanner.png');
   margin-bottom: 30px;
 }
 
@@ -154,12 +207,9 @@ export default {
 .data-content {
   background-color: #fff;
   padding: 5px 50px;
-  // .case-list:last-child {
+  cursor: pointer;
-  //   border-bottom: none;
-  // }
 
   .case-list {
-    // border-bottom: 1px solid rgba(153, 153, 153, .2);
     margin-top: 10px;
     margin-bottom: 25px;
     padding-left: 5px;
@@ -167,8 +217,8 @@ export default {
     display: flex;
 
     .imgEntrance {
-      width: 200px;
+      width: 350px;
-      height: 200px;
+      height: 196px;
 
       img {
         width: 100%;
@@ -179,11 +229,17 @@ export default {
     }
 
     .courseTitle {
+      padding-top: 30px;
       flex: 1;
 
       .courseTop {
         display: flex;
         justify-content: space-between;
+
+        .case-tittext {
+          font-size: 18px;
+          color: #00253E;
+        }
       }
 
       .courseInfoSummary {
@@ -195,9 +251,64 @@ export default {
         font-size: 14px;
         color: #333330;
         font-weight: 400;
+        color: #6E7B84;
+      }
+
+      .recommendedAuthor {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 40px;
+        color: #6E7B84;
+        font-size: 14px;
       }
     }
   }
-
 }
+
+.float-tools {
+  position: fixed;
+  right: 0;
+  bottom: 40%;
+  z-index: 999;
+  cursor: pointer;
+
+  .content {
+    width: 152px;
+    height: 55px;
+    display: flex;
+    align-items: center;
+    background: linear-gradient(86deg, #00c8ff 0%, #167cff 100%);
+    border-radius: 100px 0px 0px 100px;
+    padding: 20px;
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
+
+    span {
+      margin-left: 10px;
+      color: #fff;
+      font-size: 20px;
+    }
+  }
+}
+
+.dialogContent {
+
+.dialogTop {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 40px;
+
+  .words {
+    font-size: 26px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 37px;
+  }
+}
+}
+
 </style>

src/views/portal/course/CourseSeries.vue

@@ -32,15 +32,14 @@
         <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"
+            <div v-for="(course, ccidx) in courseList.list" :key="'cc' + ccidx" class="xindex-course"
               style="position: relative">
               <a @click="toCourseDetail(course)">
                 <div class="xindex-course-image">
-                  <course-image :course="course"></course-image>
+                  <CourseImage :course="course"></CourseImage>
-                  <span v-if="course.type == 20 || course.type == 10" class="course-type overType">录播课</span>
+                  <span v-if="course.type == 20 || course.type == 10" class="course-type">录播课</span>
-                  <span class="overType coursePosition">面授课</span>
+                  <span class="course-type">面授课</span>
                   <span v-if="course.type == 40" class="course-type">学习项目</span>
-                  <span class="overType courseTime">2023-09-22</span>
                 </div>
                 <div style="width: 80%" :title="course.name" v-html="course.name"
                   class="course-title portal-title-tow two-line-ellipsis"></div>
@@ -49,14 +48,14 @@
                     {{ course.teacher }}
                     <span class="study-num">{{ formatNum(course.studies) }}人学习</span>
                   </div>
-                  <!-- <div style="display: flex">
+                  <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 v-else class="course-score-no">未评分</div>
-                  </div> -->
+                  </div>
                 </div>
               </a>
             </div>
@@ -113,11 +112,13 @@ export default {
           id: 1,
           title: "项目管理系列课程",
           sysCreateTime: '2023-09-22',
+          name: "哈哈哈",
           summary: "哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊红i哈好哈啊哈好哈啊哈哈好哈哈啊哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊哈哈好哈哈啊"
         }, {
           id: 2,
           title: "项目管理系列课程",
           sysCreateTime: '2023-09-22',
+          ame: "哈哈哈",
           summary: "哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊红i哈好哈啊哈好哈啊哈哈好哈哈啊哈哈i啊hi哈斯哈塞回电话后啊后端哈说好话哦哈哈啊哈哈哈哈怂哈哈哦哈哈i哈哈地晒哦还好爱好i和腮红i哈好哈啊哈好哈啊哈哈好哈哈啊"
         }],
         showPagCount: 0,
@@ -143,14 +144,26 @@ export default {
 
     },
     showClass() { },
+    loadData() { },
+    changePageSize() { }
   }
 };
 </script>
 <style scoped lang="scss">
 .case-banner {
+  position: relative;
   height: 240px;
-  background: url('../../../../public/images/case-banner.png');
+  background: url('../../../../public/images/courseBanner.png');
   margin-bottom: 30px;
+
+  &::before {
+    content: '课程推荐';
+    position: absolute;
+    bottom: 25px;
+    left: 240px;
+    font-size: 64px;
+    color: #FFFFFF;
+  }
 }
 
 /* 标题 */
@@ -185,32 +198,8 @@ export default {
   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 {
+.courseTime {
-  bottom: 0px;
-  left: 0px;
-  width: 60px;
-  background-color: #f99000;
-  border-radius: 2px 8px 2px 3px;
-}
-.courseTime{
   bottom: 0px;
   right: 0px;
   padding: 0 20px;

src/views/portal/course/Index.vue

@@ -21,9 +21,9 @@
       <div class="xcontent2">
         <!-- 左侧三级 -->
         <div class="xcontent2-minor" style="margin-right:36px;">
-          <router-link to="/courseRecommended" style="margin-bottom: 20px;" class="course-title-style">
+          <router-link to="/courseRecommended" style="margin-bottom: 20px;" class="course-recommended-style">
             <div class="imgTilte">
-              <div>课程推荐</div>
+              <!-- <div>课程推荐</div> -->
             </div>
           </router-link>
           <div class="course-title-style">
@@ -1582,6 +1582,15 @@ export default {
 }
 
 // 三级背景高度
+.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;