From 3f9ee5717077a8f4d66d3e6462c5c7fd283b9f02 Mon Sep 17 00:00:00 2001
From: zhaofang <752743406@qq.com>
Date: Fri, 30 Sep 2022 11:00:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E6=8A=A5=E5=90=8D=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/uc.scss   | 11 ++++-
 src/views/study/Courses.vue | 94 +++++++++++++++++++++++++------------
 2 files changed, 75 insertions(+), 30 deletions(-)

diff --git a/src/assets/styles/uc.scss b/src/assets/styles/uc.scss
index ad3162fb..feb88a5c 100644
--- a/src/assets/styles/uc.scss
+++ b/src/assets/styles/uc.scss
@@ -6,7 +6,7 @@
     font-weight: 600;
     color: #333333;
     line-height: 36px;
-    margin-right: 44px;
+   //  margin-right: 44px;
  }
  .uc-center-one-title{
     font-size: 18px;
@@ -62,3 +62,12 @@
  .el-message-box__btns button:nth-child(2) {
     margin-left:20px;
 }
+.search-btn{
+   background: #2C68FF;
+}
+.uc-input{
+   width: 210px;
+}
+.uc-select{
+   width: 125px;
+}
diff --git a/src/views/study/Courses.vue b/src/views/study/Courses.vue
index f18497c4..d4618148 100644
--- a/src/views/study/Courses.vue
+++ b/src/views/study/Courses.vue
@@ -2,9 +2,10 @@
   <div>
     <div style="display: flex;justify-content:space-between; padding: 12px 32px 10px 22px;">
       <div style="display: flex;justify-content: flex-start;">
-        <div>
-          <el-select v-model="courseType" clearable placeholder="类型">
-            <el-option label="全部" value='1'></el-option>
+        <div class="uc-center-page">我的报名</div>
+        <div style="margin-left:32px">
+          <el-select v-model="courseType" class="uc-select" clearable placeholder="类型">
+            <el-option label="全部类型" value='1'></el-option>
             <!-- <el-option label="微课" :value="10"></el-option> -->
             <el-option label="录播课" :value="20"></el-option>
             <!-- <el-option label="在线课" value="online-course"></el-option> -->
@@ -14,41 +15,57 @@
             <el-option label="学习项目" :value="40"></el-option>
          </el-select>
         </div>
-        <el-select style="margin-left:10px" v-model="status" clearable placeholder="学习进度">
-          <el-option label="全部" value='0'></el-option>
+        <el-select style="margin-left:12px" class="uc-select" v-model="status" clearable placeholder="学习进度">
+          <el-option label="所有进度" value='0'></el-option>
           <el-option label="未开始" :value="1"></el-option>
           <el-option label="进行中" :value="2"></el-option>
           <el-option label="已完成" :value="9"></el-option>
           <!-- <el-option label="已停用" :value="3"></el-option> -->
         </el-select>
-        <div style="padding-left: 10px;"><el-input v-model="params.courseName" clearable placeholder="搜索名称"></el-input></div>
-        <div style="padding-left: 10px;"><el-button type="primary" icon="el-icon-search" @click="searchData()">搜索</el-button></div>
-        <div style="padding-left: 10px"><el-button type="primary" icon="el-icon-refresh-right" @click="reset()">重置</el-button></div>
+        <div style="padding-left: 12px;"><el-input class="uc-input" v-model="params.courseName" clearable placeholder="搜索名称"></el-input></div>
+        <div style="padding-left: 12px;"><el-button type="primary" class="search-btn" icon="el-icon-search" @click="searchData()">搜索</el-button></div>
+        <div style="padding-left: 12px"><el-button type="primary" class="search-btn" icon="el-icon-refresh-right" @click="reset()">重置</el-button></div>
       </div>
     </div>
   <div class="uc-list" v-loading="loading">
     <div class="uc-course" v-for="(item,idx) in pageChange" @click="jumpRouter(item)" :key="idx">
-      <div class="uc-course-img" style="width: 212px;height:119px">
+      <div class="uc-course-img" style="width: 260px;height:144px">
         <course-image :course="item"></course-image>
+        <div class="uc-type">
+          <span v-if="item.courseType==10">录播</span>
+          <span v-if="item.courseType==20">录播</span>
+          <span v-if="item.courseType==30">线下课</span>
+          <span v-if="item.courseType==40">学习项目</span>
+          </div>
       </div>
       <div class="uc-course-info">
         <div class="uc-course-name" style="cursor: pointer;">
-          <div>
-          <span v-if="item.courseType==10" class="uc-course-type2">录播</span>
-          <span v-if="item.courseType==20" class="uc-course-type2">录播</span>
-          <span v-if="item.courseType==30" class="uc-course-type3">线下课</span>
-          <span v-if="item.courseType==40" class="uc-course-type4">学习项目</span>
-          </div>
+          
          <div style="flex:1;">
            <a v-html="$keywordActiveShow(item.courseName,params.courseName)" class="uc-title two-line-ellipsis"></a>
          </div>
         </div>
-        <div style="width: 80%;margin-top:38px"><el-progress :percentage="item.progress"></el-progress></div>
-        <div class="uc-course-text">报名时间：{{item.addTime}}</div>
+        <div style="padding-top:6px" class="uc-course-text"><i class="el-icon-time" style="margin-right:4px"></i>报名时间：{{item.addTime}}</div>
+        <div style="width: 80%;margin-top: 20px;display: flex;">
+          <div style="color: #333333;font-size: 14px;">当前进度：</div>
+          <div style="width:170px;padding-top: 5px;">
+            <el-progress :percentage="item.progress" color="#FFA050"></el-progress>
+          </div>
+        </div>
       </div>
       <div class="uc-course-btns">
           <div style="text-align: right;">
-            <el-button class="del" @click.stop="delItem(item,idx)" type="text" icon="el-icon-delete" size="mini" title="删除"></el-button>
+            <!-- <el-button class="del" @click.stop="delItem(item,idx)" type="text" icon="el-icon-delete" size="mini" title="删除"></el-button> -->
+            <el-dropdown>
+               <span class="el-dropdown-link">
+                   <svg-icon style="margin-right: 0;font-size:26px;" icon-class="spot"></svg-icon>
+               </span>
+               <el-dropdown-menu slot="dropdown" class="dropdown-box">
+                   <el-dropdown-item command="a">
+                     <el-button class="del" @click.stop="delItem(item,idx)" type="text" icon="el-icon-delete" size="mini" title="删除"></el-button>
+                    </el-dropdown-item>
+               </el-dropdown-menu>
+           </el-dropdown>
           </div>
           <span  @click.stop="jumpRouter(item)">
             <el-button style="margin-top:30px" v-if="item.progress==0" type="primary" size="small">开始学习</el-button>
@@ -73,9 +90,11 @@
             <span v-if="dataList.length==0">正在加载数据...</span>
             <span v-else>查询中...</span>
         </div>
-        <div v-else >
-            <span v-if="dataList.length==0">当前列表无数据</span>
-            <span v-else-if="couresList.length==0" >未找到您要搜索的内容</span>
+        <div v-else class="home-no-list">
+            <!-- <span v-if="dataList.length==0">当前列表无数据</span>
+            <span v-else-if="couresList.length==0" >未找到您要搜索的内容</span> -->
+            <img class="img" style="width:360px;height:226px" src="/images/homeWu/no-madel.png" alt="" srcset="">
+            <p class="text" style="color: #333333;margin-top:50px;font-size: 14px">你还没有报名课程哦～</p>
         </div>
       </div>
   </div>
@@ -413,6 +432,7 @@ computed: {
     }
 .uc-list{
   padding-left: 22px;
+  margin-top: 30px;
 }
 .uc-course-type1{
   width: 58px;
@@ -467,22 +487,38 @@ computed: {
 .uc-course {
   display: flex;
   justify-content: space-around;
-  border-bottom: 1px solid #E8E8E8;
+  // border-bottom: 1px solid #E8E8E8;
   margin-right: 32px;
-  padding: 20px 0px 15px  0px ;
+  padding: 20px 0px 25px  0px ;
   cursor: pointer;
   .uc-course-img {
-    width: 200px;
-    img {
-      width: 200px;
-      border: 1px solid #f4f4f5;
+    position: relative;
+    width: 260px;
+   ::v-deep img {
+      // width: 200px;
+      // border: 1px solid #f4f4f5;
+      border-radius: 8px;
+    }
+    .uc-type{
+      position: absolute;
+      top: 0;
+      right:0;
+      width: 60px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      background: #F99000;
+      border-radius: 2px 4px 2px 16px;
+      color: #fff;
+      font-size: 12px;
+      font-weight: 600;
     }
   }
   .uc-course-info {
     flex: 1;
     margin-top: -3px;
     line-height: 28px;
-    padding: 0px 10px;
+    padding: 0px 25px;
     .uc-course-name {
       display: flex;
       span{
@@ -491,7 +527,7 @@ computed: {
         margin-right: 8px;
       }
       font-size: 18px;
-      font-weight: 700;
+      font-weight: 600;
       color: #333;
     }
     .uc-course-text {