细节

src/views/study/Growth.vue

@@ -181,7 +181,7 @@ export default {
     startLearn(){
       this.$router.push({
         path: '/growthpath',
-        query: {growId:this.detailData.growId,name: this.detailData.growName}
+        query: {growId:this.detailData.growId,name: this.detailData.growName,isTrue: true}
       })
     },
     checkedTrue(){

src/views/study/GrowthPath.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="growth">
-    <div style="background-color: #0078fc;">
+    <div v-if="isIframe" style="background-color: #0078fc;">
       <portalHeader textColor="#fff" class="qa-nav" @emitInput="emitInput" @showClass="showClass"></portalHeader>
     </div>
-    <div class="growth-content">
+    <div v-if="isIframe" class="growth-content">
       <div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
       <div class="pathdetails">
         <div class="pdname">
@@ -31,7 +31,7 @@
                 <el-popover popper-class="pathdetails" placement="right-start" width="360" trigger="click"
                   :visible-arrow="false">
                   <div style="font-size: 14px;padding: 20px 20px 10px; ">
-                    <div style="font-size: 16px;font-weight: 600">{{ item.title }}</div>
+                    <div style="font-size: 16px;font-weight: 600;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="item.title">{{ item.title }}</div>
                     <div style="margin: 20px 0;">
                       <el-tag hit :type="item.flag == 0 ? 'danger' : 'success'">{{ item.flag == 0 ? '选修' : '必修' }}</el-tag>
                       <el-tag>{{item.type == 1 ? '在线' : item.type == 5 ?'考试' : '课程'}}</el-tag>
@@ -80,6 +80,7 @@
                   top: getPosition(item.name, index).top + 'px'
                 }" class="iconTitle" :title="item.title">{{ item.title.length>15?item.title.slice(0,15)+'...':item.title }}</div>
               </div>
+              <div class="text_end">您的学习之旅已结束</div>
             </div>
           </div>
           <!-- <div class="footerBtn">
@@ -92,8 +93,42 @@
         </div>
       </div>
     </div>
-
+    <!-- 嵌入 -->
-
+    <div v-else class="growth-content">
+      <div class="pathdetails">
+        <div class="detailinfo">
+          <div class="select">
+            <div class="select-radio" style="margin-left: 0;"><span style="background: #34CA2B;"></span> 必修</div>
+            <div class="select-radio"><span style="background: #FE9C4A;"></span>选修</div>
+          </div>
+          <div class="btn">
+            <el-button type="primary">全岗位路径图</el-button>
+          </div>
+          <div class="detailContent">
+            <div :class="dataList.length <= 7 ? 'detailbgc' : 'detailAllbgc'">
+              <div v-for="item, index in dataList" :key="index">
+                <div class="address" :style="{
+                  backgroundColor: getColor(item.flag, 0),
+                  left: getPosition(item.name, index).left + 'px',
+                  top: getPosition(item.name, index).top + 'px'
+                }">
+                  <div class="icon">
+                    <div class="icon-content" :style="{ background: getColor(item.flag, 1) }">
+                      {{ item.currentRatio || 0 }}%
+                    </div>
+                  </div>
+                </div>
+                <div :style="{
+                  left: (getPosition(item.name, index).left + 55) + 'px',
+                  top: getPosition(item.name, index).top + 'px'
+                }" class="iconTitle" :title="item.title">{{ item.title.length>15?item.title.slice(0,15)+'...':item.title }}</div>
+              </div>
+              <div class="text_end">您的学习之旅已结束</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
 
 
     <div class="u-class">
@@ -225,6 +260,7 @@ export default {
   components: { portalHeader },
   data() {
     return {
+      isIframe: this.$route.query.isTrue,
       switchFalse: false,
       showUClass: false,
       colorAttrValue: {
@@ -623,7 +659,16 @@ export default {
   padding: 0 20px;
   white-space: nowrap;
 }
-
+.text_end{
+  position: absolute;
+  right: 69px;
+  top: 17px;
+  font-weight: 400;
+  font-size: 16px;
+  color: #387DF7;
+  line-height: 22px;
+  text-align: left;
+}
 
 .growth-content {
   position: relative;
@@ -713,6 +758,18 @@ export default {
             height: 55px;
             z-index: 1000;
           }
+          &::after {
+            content: '';
+            position: absolute;
+            top: -2px;
+            right: 14px;
+            background-image: url('../../assets/images/growth/plane.png');
+            background-repeat: no-repeat;
+            background-size: 100%;
+            width: 50px;
+            height: 50px;
+            z-index: 1000;
+          }
         }
 
         .detailAllbgc {
@@ -734,6 +791,18 @@ export default {
             height: 55px;
             z-index: 1000;
           }
+          &::after {
+            content: '';
+            position: absolute;
+            top: -6px;
+            right: 218px;
+            background-image: url('../../assets/images/growth/plane.png');
+            background-repeat: no-repeat;
+            background-size: 100%;
+            width: 50px;
+            height: 50px;
+            z-index: 1000;
+          }
         }
       }