图标

src/views/study/Growth.vue

@@ -20,7 +20,7 @@
             <el-button type="primary" @click="drawer = true" style="margin-left: 0;margin-top: 30px;">信息概览</el-button>
           </div>
           <div class="detailContent">
-            <div class="detailbgc">
+            <div :class="dataList.length <= 7 ? 'detailbgc' : 'detailAllbgc'">
               <div v-for="item, index in dataList" :key="index" class="address" :style="{
                 backgroundColor: getColor(item.status, 0),
                 left: getPosition(item.name, index).left + 'px',
@@ -212,6 +212,18 @@ export default {
             { left: 988, top: 56 },
           ]
         },
+        '路径图背景全': {
+          positions: [
+            { left: 500, top: 1440 },
+            { left: 270, top: 1380 },
+            { left: 0, top: 1225 },
+            { left: 504, top: 360 },
+            { left: 904, top: 336 },
+            { left: 1200, top: 190 },
+            { left: 988, top: 56 },
+            { left: 988, top: 56 },
+          ]
+        }
       },
       dataList: [{
         name: '路径图背景',
@@ -390,6 +402,55 @@ export default {
         }]
         return false
       }
+      if (num === 14) {
+        this.dataList = [{
+          name: '路径图背景全',
+          progress: '99',
+          title: '特训营/校招GROW180/社招入职',
+          status: 0
+        }, {
+          name: '路径图背景全',
+          progress: '10',
+          title: '入模培训',
+          status: 2
+        },
+        {
+          name: '路径图背景全',
+          progress: '10',
+          title: '岗前培训+OJT辅导',
+          status: 1
+        },
+        {
+          name: '路径图背景全',
+          progress: '10',
+          title: 'BOE薪酬福利体系',
+          status: 0
+        },
+        {
+          name: '路径图背景全',
+          progress: '10',
+          title: 'PDCA循环工作法',
+          status: 1
+        },
+        {
+          name: '路径图背景全',
+          progress: '10',
+          title: '如何让沟通更有效率',
+          status: 2
+        },
+        {
+          name: '路径图背景全',
+          progress: '10',
+          title: '商务邮件撰写技巧',
+          status: 1
+        },
+        {
+          name: '路径图背景全',
+          progress: '10',
+          title: '商务邮件撰写技巧',
+          status: 1
+        }]
+      }
     },
     showClass(flag) {
       if (flag) {
@@ -559,7 +620,7 @@ export default {
 
       .detailContent {
         width: 100%;
-        margin: 20px 0 40px;
+        margin: 80px 0 40px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -584,6 +645,27 @@ export default {
             z-index: 1000;
           }
         }
+
+        .detailAllbgc {
+          width: 1380px;
+          height: 1590px;
+          min-width: 1380px;
+          position: relative;
+          background-image: url('../../assets/images/growth/roadmap.png');
+          background-repeat: no-repeat;
+
+          &::before {
+            content: '';
+            position: absolute;
+            bottom: 10px;
+            left: 750px;
+            background-image: url('../../assets/images/growth/begin.png');
+            background-repeat: no-repeat;
+            width: 190px;
+            height: 55px;
+            z-index: 1000;
+          }
+        }
       }
 
       .footerBtn {