修改课程名称样式问题

src/components/study.vue

@@ -5,7 +5,15 @@
       style="display: flex; height: 900px; position: relative"
     >
       <div class="pb_left">
-        <div class="courseTitle">{{ courseDetail.title }}</div>
+        <!-- <div class="courseTitle">{{ courseDetail.title }}</div> -->
+        <el-tooltip
+          class="courseTitle"
+          effect="light"
+          :content="courseDetail.title"
+          placement="top"
+        >
+          <div>{{ courseDetail.title }}</div>
+        </el-tooltip>
         <div class="ml">目录</div>
         <div class="cru_selectBox">
           <div v-for="(item, stageIndex) in navList" :key="stageIndex">
@@ -90,7 +98,9 @@
                     '&courseId=' +
                     id +
                     '&tType=' +
-                    tType + '&screenType=' + screenType
+                    tType +
+                    '&screenType=' +
+                    screenType
                 )
               "
             >
@@ -272,7 +282,9 @@
                 <div
                   class="vedioList"
                   :class="
-                    vedio[taskCount].length == 0 && file[taskCount].length == 0 && textList[taskCount].length == 0
+                    vedio[taskCount].length == 0 &&
+                    file[taskCount].length == 0 &&
+                    textList[taskCount].length == 0
                       ? 'listNoVedio'
                       : ''
                   "
@@ -3884,7 +3896,7 @@ export default {
 }
 .courseTitle {
   background: #205cc6;
-  width: 90%;
+  width: 85%;
   margin: 10px auto;
   height: 50px;
   color: #fff;
@@ -3893,6 +3905,11 @@ export default {
   font-size: 20px;
   font-weight: bold;
   border-radius: 5px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 10px;
 }
 .ml {
   margin-left: 20px;