style:增加学习路径页面

src/App.vue

@@ -52,15 +52,14 @@ export default defineComponent({
 #container {
   display: flex;
   width: 100%;
-  height: 100%;
+  min-height: 100%;
-
+  background-color: rgba(242, 245, 247, 1);
   main {
     flex: 1;
-    height: 100%;
+    // min-height: 100%;
     width: 100%;
     padding: 30px;
     box-sizing: border-box;
-    background-color: rgba(242, 245, 247, 1);
   }
 }
 </style>

src/views/faceteach/FaceTeach.vue

@@ -277,7 +277,7 @@ export default {
       flex: 1;
       margin-right: 20px;
       .detailT {
-        height: 263px;
+        min-height: 263px;
         background: #ffffff;
         border-radius: 8px;
         color: rgba(51, 51, 51, 1);
@@ -308,6 +308,7 @@ export default {
           font-weight: 500;
           line-height: 35px;
           margin-top: 30px;
+          padding-bottom: 30px;
         }
       }
       .detailB {

src/views/roadmap/LearnPath.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="LearnPath">
+  <div class="learnpath">
     <div class="content">
       <div class="title">
         <div class="titleL">
@@ -19,10 +19,54 @@
             <div style="margin-top: 2px">Band8</div>
           </div>
         </div>
-        <div class="titleR">进入未完成任务</div>
+        <div :style="{ display: !showmapdetail ? 'flex' : 'none' }">
+          <el-popover width="475px" trigger="hover" popper-class="lppopover">
+            <div>
+              <div class="finish">
+                <img
+                  src="../../assets/image/circle.png"
+                  style="width: 20px; height: 20px"
+                />
+                <div class="text">未完成</div>
+                <div class="box"></div>
               </div>
-      <div class="head">
+              <div
-        <el-table :data="tableData" style="width: 100%">
+                v-for="(value, index) in unfinishedTasks"
+                :key="index"
+                class="tasks"
+                :style="{
+                  'border-bottom':
+                    index === unfinishedTasks.length - 1
+                      ? null
+                      : '1px solid rgba(229, 228, 228, 1)',
+                }"
+              >
+                <div style="font-size: 14px; font-weight: 500; color: #677d86">
+                  {{ value.text }}
+                </div>
+                <img
+                  style="width: 20px; height: 20px"
+                  src="../../assets/image/go.png"
+                />
+              </div>
+            </div>
+            <template #reference>
+              <div class="titleR">进入未完成任务</div>
+            </template>
+          </el-popover>
+        </div>
+        <div
+          :style="{ display: showmapdetail ? 'flex' : 'none' }"
+          class="titleR"
+          @click="returnfun"
+        >
+          返回列表
+        </div>
+      </div>
+      <!-- 路径列表-->
+      <div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
+        <div style="min-width: 770px; width: 100%">
+          <el-table :data="tableData" style="width: 100%" @row-click="gofun">
             <el-table-column
               prop="img"
               label="缩略图"
@@ -32,28 +76,30 @@
             >
               <img :src="scope.row.img" style="width: 230px; height: 155px" />
             </el-table-column>
+            <el-table-column align="center" prop="name" label="路径名称" />
             <el-table-column
               align="center"
-            class-name="name"
-            prop="name"
-            label="路径名称"
-          />
-          <el-table-column
-            align="center"
-            class-name="introduce"
               prop="introduce"
               label="路径介绍"
-          />
+              #default="scope"
-          <el-table-column
+            >
-            align="center"
+              <el-popover
-            class-name="target"
+                placement="top-start"
-            prop="target"
+                title="路径介绍"
-            label="目标人群"
+                :width="350"
-          />
+                trigger="hover"
+                :content="scope.row.introduce"
+              >
+                <template #reference>
+                  <div>{{ scope.row.introduce }}</div>
+                </template>
+              </el-popover>
+            </el-table-column>
+
+            <el-table-column align="center" prop="target" label="目标人群" />
             <el-table-column
               #default="scope"
               align="center"
-            class-name="state"
               width="110"
               prop="state"
               label="状态"
@@ -72,6 +118,19 @@
           </el-table>
         </div>
       </div>
+      <!-- 路径列表-->
+      <!-- 路径详情图 -->
+      <div
+        :style="{ display: showmapdetail ? 'flex' : 'none' }"
+        class="mapdetail"
+      >
+        <img
+          src="../../assets/image/mapdetail.png"
+          style="width: calc(100% - 168px); height: 425px"
+        />
+      </div>
+      <!-- 路径详情图 -->
+    </div>
   </div>
 </template>
 <script>
@@ -85,7 +144,7 @@ export default {
           img: require("../../assets/image/roadmap1.png"),
           name: "产品经理学习路径图",
           introduce:
-            "为了提升集团各条线产品经理的 专业能力，集团XX组织为产品经 理设置了统一的学习径……",
+            "为了提升集团各条线产品经理的 专业能力，集团XX组织为产品经 理设置了统一的学习径……为了提升集团各条线产品经理的 专业能力，集团XX组织为产品经 理设置了统一的学习径",
           target: "Band8-Band12",
           state: 1,
         },
@@ -98,16 +157,39 @@ export default {
           state: 0,
         },
       ],
+      unfinishedTasks: [
+        {
+          id: 1,
+          text: "产品经理学习路径图-第三阶段",
+        },
+        {
+          id: 2,
+          text: "管理者进阶-启航班-",
+        },
+        // {
+        //   id: 3,
+        //   text: "产品经理学习路径图-第三阶段",
+        // },
+      ],
+      showmapdetail: false,
     });
-
+    const returnfun = () => {
+      state.showmapdetail = false;
+    };
+    const gofun = (row, column, event) => {
+      console.log("点击了", row, column, event);
+      state.showmapdetail = true;
+    };
     return {
       ...toRefs(state),
+      returnfun,
+      gofun,
     };
   },
 };
 </script>
 <style lang="scss">
-.LearnPath {
+.learnpath {
   width: 100%;
   min-height: 734px;
   border-radius: 8px;
@@ -143,6 +225,7 @@ export default {
       font-weight: 400;
       color: #387df7;
     }
+
     .title .titleR {
       width: 157px;
       height: 48px;
@@ -169,7 +252,77 @@ export default {
       margin-left: 53px;
       margin-right: 54px;
       width: calc(100% - 107px);
+      // min-width: 770px;
+      overflow-x: scroll;
+      .el-table th.el-table__cell {
+        background: rgba(249, 249, 249, 1);
+        color: rgba(51, 51, 51, 1);
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      .el-table .cell {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        word-break: break-all;
+      }
+      .el-table__row {
+        height: 231px;
+        font-size: 14px;
+        color: rgba(102, 102, 102, 1);
+        font-weight: 500;
+      }
+    }
+    .mapdetail {
+      width: calc(100% - 107px);
+      height: 577px;
+      background: rgba(242, 245, 247, 0.6);
+      margin-top: 26px;
+      border-radius: 8px;
+      margin-left: 53px;
+      margin-right: 54px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
   }
 }
+.lppopover {
+  .finish {
+    padding-left: 27px;
+    padding-right: 18px;
+    margin-top: 15px;
+    margin-bottom: 17px;
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .text {
+    font-size: 16px;
+    font-weight: 800;
+    color: #333333;
+    margin-left: 8px;
+  }
+  .box {
+    width: 59px;
+    height: 10px;
+    background-color: rgba(36, 120, 255, 0.15);
+    position: absolute;
+    left: 50px;
+    top: 15px;
+  }
+  .tasks {
+    width: 405px;
+    height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-left: 28px;
+    cursor: pointer;
+  }
+}
 </style>