growth页面

src/views/study/Growth.vue

@@ -11,19 +11,33 @@
         </div>
         <div class="detailinfo">
           <div class="select">
-            <div class="address">
-              <div class="icon"></div>
-            </div>
-            <div>必修</div>
-            <div class="select-radio">选修</div>
-            <div class="select-radio">已完成</div>
+            <div class="select-radio" style="margin-left: 0;"><span></span> 必修</div>
+            <div class="select-radio"><span></span>选修</div>
+            <div class="select-radio"><span></span>已完成</div>
           </div>
           <div class="btn">
             <el-button type="primary">全岗位路径图</el-button>
             <el-button type="primary" style="margin-left: 0;margin-top: 30px;">未完成</el-button>
           </div>
           <div class="detailContent">
-            <div class="detailbgc"></div>
+            <div class="detailbgc">
+              <div v-for="item, index in dataList" :key="index" class="address" :style="{
+                backgroundColor: getColor(item.name, 'outsideColors'),
+                left: getPosition(item.name, index).left + 'px',
+                top: getPosition(item.name, index).top + 'px'
+              }">
+                <div class="icon">
+                  <div class="icon-content" :style="{ backgroundColor: getColor(item.name, 'withinColors') }">
+                    {{ item.progress }}%
+                  </div>
+                </div>
+                <div class="iconTitle">{{ item.title }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="footerBtn">
+            <el-button type="primary">1-7课</el-button>
+            <el-button>8-14课程</el-button>
           </div>
         </div>
       </div>
@@ -84,7 +98,58 @@ export default {
   data() {
     return {
       showUClass: false,
-      remark: '111',
+      iconAttrs: {
+        compulsory: {
+          outsideColors: "#b8e3b8",
+          withinColors: "#8bc94b",
+          positions: [
+            { left: 656, top: 594 },
+            { left: 440, top: 425 },
+            { left: 436, top: 360 },
+            { left: 904, top: 334 },
+            { left: 990, top: 56 },
+          ]
+        },
+        selectProcessing: {
+          outsideColors: "#e89e42",
+          withinColors: "#e89e42",
+          positions: [
+            { left: 50, top: 425 },
+            { left: 3, top: 530 },
+            { left: 400, top: 315 },
+            { left: 515, top: 220 },
+            { left: 800, top: 200 },
+            { left: 660, top: 115 },
+            { left: 760, top: 35 },
+            { left: 1000, top: 25 },
+          ]
+        },
+      },
+      dataList: [{
+        name: 'compulsory',
+        progress: '99',
+        title: '岗前培训+OJT辅导OJT辅导OJT辅导OJT辅导OJT辅导'
+      }, {
+        name: 'selectProcessing',
+        progress: '10',
+        title: '岗前培JT辅导OJT辅导'
+      },
+      {
+        name: 'compulsory',
+        progress: '10',
+        title: '岗前'
+      },
+      {
+        name: 'compulsory',
+        progress: '10',
+        title: '岗位'
+      },
+      {
+        name: 'compulsory',
+        progress: '10',
+        title: '岗前岗前'
+      }]
+
     };
   },
   mounted() {
@@ -99,6 +164,12 @@ export default {
       this.queryKeyWord = val;
       this.isSeach = true;
       this.search();
+    },
+    getColor(name, colorName) {
+      return this.iconAttrs[name][colorName]
+    },
+    getPosition(name, index) {
+      return this.iconAttrs[name].positions[index]
     }
   }
 };
@@ -106,10 +177,9 @@ export default {
 
 <style scoped lang="scss">
 .address {
-  position: relative;
+  position: absolute;
   width: 50px;
   height: 50px;
-  background-color: #b8e3b8;
   border-radius: 50%;
 
   &:before {
@@ -119,7 +189,7 @@ export default {
     width: 50px;
     height: 50px;
     clip: rect(26px 100px 50px 26px);
-    background-color: #b8e3b8;
+    background: inherit;
     transform: rotate(45deg);
   }
 
@@ -133,8 +203,7 @@ export default {
     border-radius: 50%;
     transform: translate(-50%, -50%);
 
-    &:before {
-      content: "99%";
+    .icon-content {
       position: absolute;
       top: 50%;
       left: 50%;
@@ -145,10 +214,25 @@ export default {
       width: 36px;
       height: 36px;
       line-height: 36px;
-      background-color: #8bc94b;
+      // background-color: #8bc94b;
       border-radius: 50%;
     }
   }
+
+  .iconTitle {
+    position: absolute;
+    top: 50%;
+    left: 53px;
+    transform: translateY(-60%);
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+    color: #ffffff;
+    background: linear-gradient(301deg, #0071FF 0%, #8FC1FF 99%, #3D73ED 100%);
+    border-radius: 80px 80px 80px 8px;
+    padding: 0 20px;
+    white-space: nowrap;
+  }
 }
 
 
@@ -174,9 +258,8 @@ export default {
       margin-top: 30px;
       background: #ffffff;
       border-radius: 8px;
-      padding-left: 45px;
-      padding-right: 45px;
-      padding-top: 23px;
+      padding: 23px 25px;
+      min-width: 1380px;
 
       .btn {
         position: absolute;
@@ -200,16 +283,40 @@ export default {
 
       .detailContent {
         width: 100%;
-        margin-top: 20px;
+        margin: 20px 0 40px;
         display: flex;
         align-items: center;
         justify-content: center;
 
         .detailbgc {
-          width: 1232px;
-          height: 1011px;
-          min-width: 1232px;
+          width: 1380px;
+          height: 699px;
+          min-width: 1380px;
           position: relative;
+          background-image: url('../../assets/images/growth/firstRoadmap.png');
+          background-repeat: no-repeat;
+
+          &::before {
+            content: '';
+            position: absolute;
+            bottom: -7px;
+            left: 750px;
+            background-image: url('../../assets/images/growth/begin.png');
+            background-repeat: no-repeat;
+            width: 190px;
+            height: 55px;
+            z-index: 1000;
+          }
+        }
+      }
+
+      .footerBtn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .el-button {
+          width: 100px;
         }
       }
     }