计算宽度

src/components/courseDetail.vue

@@ -166,27 +166,33 @@
                       class="chapter"
                     >
                       <div
-                        class="stage"
-                        style="
-                          cursor: pointer;
-                          display: flex;
-                          flex-direction: row;
-                          flex-wrap: nowrap;
-                          justify-content: center;
-                          align-items: center;
-                        "
+                        class="stage stageCss"
+                        :style="{
+                          width:
+                            item.array.length * 180 +
+                            (item.array.length - 1) * 10 +
+                            'px',
+                        }"
                         @click="addUserRate(index)"
                       >
-                        <div>第{{ index + 1 }}阶段</div>
-                        <div>
+                        <div
+                          style="
+                            width: 100%;
+                            display: flex;
+                            justify-content: center;
+                          "
+                        >
                           <el-tooltip
                             class="item"
                             effect="light"
                             :content="item.name"
                             placement="top"
                           >
-                            <div class="titleCss" style="max-width: 260px">
-                              {{ item.name }}
+                            <div
+                              class="titleCss"
+                              style="width: 80%; max-width: unset"
+                            >
+                              第{{ index + 1 }}阶段 {{ item.name }}
                             </div>
                           </el-tooltip>
                         </div>
@@ -1863,4 +1869,12 @@ export default {
   line-height: 26px;
   font-size: 14px;
 }
+.stageCss {
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+}
 </style>