修改样式

src/components/courseDetail.vue

@@ -119,7 +119,7 @@
             <div
               v-if="((tType == 1 || tType == 4) && type == 2) || tType == 2"
               :class="courseDetail.brief != '' ? 'rightTd' : 'noBRight'"
-              style="width:100%"
+              style="width: 100%"
             >
               <div
                 class="blue_box_one"
@@ -167,11 +167,30 @@
                     >
                       <div
                         class="stage"
-                        style="cursor: pointer"
+                        style="
+                          cursor: pointer;
+                          display: flex;
+                          flex-direction: row;
+                          flex-wrap: nowrap;
+                          justify-content: center;
+                          align-items: center;
+                          padding: 0 10px;
+                        "
                         @click="addUserRate(index)"
                       >
-                        第{{ index + 1 }}阶段
+                        <div>第{{ index + 1 }}阶段</div>
+                        <div>
+                          <el-tooltip
+                            class="item"
+                            effect="light"
+                            :content="item.name"
+                            placement="top"
+                          >
+                            <div class="titleCss" style="max-width: 260px">{{ item.name }}</div>
+                          </el-tooltip>
+                        </div>
                       </div>
+
                       <!-- {{ chaptersJson.chapterState[index].isFinsh ? '已完成' : '进行中' }} -->
                       <div class="task">
                         <div
@@ -179,7 +198,19 @@
                           :key="index + '-' + index2"
                           class="taskBox"
                         >
-                          <div class="taskName">任务{{ index2 + 1 }}</div>
+                          <div class="taskName">
+                            <div class="navIndex">任务{{ index2 + 1 }}</div>
+                            <div>
+                              <el-tooltip
+                                class="item"
+                                effect="light"
+                                :content="item2.name"
+                                placement="top"
+                              >
+                                <div class="titleCss">{{ item2.name }}</div>
+                              </el-tooltip>
+                            </div>
+                          </div>
                           <div class="p_tool_box">
                             <span
                               v-for="(item3, index3) in item2.array"
@@ -605,7 +636,9 @@
                                     </div>
                                     <div class="blueBtn">
                                       <div>点赞：{{ item3.likeCount }}</div>
-                                      <div style="margin-left: 15px;">评论：{{ item3.commentCount }}</div>
+                                      <div style="margin-left: 15px">
+                                        评论：{{ item3.commentCount }}
+                                      </div>
                                     </div>
                                   </div>
                                   <div v-if="item3.isScore">
@@ -883,7 +916,7 @@ export default {
           for (var i = 0; i < _chapters.length; i++) {
             _chaptersJson.chapterState[i].isFinsh = false;
             // _chaptersJson.tool[i] = []
-            _chaptersJson.tool[i] = {array:[],name:_chapters[i].dyName};
+            _chaptersJson.tool[i] = { array: [], name: _chapters[i].dyName };
             _chaptersJson.chapter[i] = [];
             _chaptersJson.work[i] = {
               name: _chapters[i].dyName,
@@ -901,7 +934,7 @@ export default {
             let el = _chapters[i].chapterInfo[0].taskJson;
             for (var z = 0; z < el.length; z++) {
               // _chaptersJson.tool[i][z] = [];
-              _chaptersJson.tool[i].array[z] = {array:[],name:el[z].task};
+              _chaptersJson.tool[i].array[z] = { array: [], name: el[z].task };
               _chaptersJson.chapter[i][z] = [];
               _chaptersJson.work[i].chapter[z] = { name: el[z].task, task: [] };
               _chaptersJson.work[i].is = false;
@@ -951,7 +984,9 @@ export default {
                 // }
                 _chaptersJson.chapter[i][z][k] = { tool: tools[k].tool[0] };
                 // _chaptersJson.tool[i][z][k] = { tool: tools[k].tool[0] };
-                _chaptersJson.tool[i].array[z].array[k] = { tool: tools[k].tool[0] }
+                _chaptersJson.tool[i].array[z].array[k] = {
+                  tool: tools[k].tool[0],
+                };
               }
             }
           }
@@ -1585,7 +1620,7 @@ export default {
 }
 
 .chapter {
-  margin-right: 10px;
+  margin-right: 30px;
 }
 
 .chapter + .chapter {
@@ -1622,6 +1657,10 @@ export default {
 .chapter .task .taskBox .taskName {
   text-align: center;
   margin: 10px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
 }
 
 .toolIcon::before {
@@ -1763,4 +1802,26 @@ export default {
 .disCss > div {
   margin: 10px 10px 0 0;
 }
+.titleCss {
+  text-align: center;
+  max-width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  margin-left: 10px;
+}
+.navIndex {
+  border-bottom: 1px solid #d7d7d7;
+  padding-bottom: 5px;
+  background: #96d1ff;
+  width: 55px;
+  min-width: 55px;
+  border-radius: 5px;
+  color: #fff;
+  text-align: center;
+  height: 20px;
+  line-height: 26px;
+  font-size: 14px;
+}
 </style>