点击显示弹窗

src/views/study/Growth.vue

@@ -21,25 +21,56 @@
           </div>
           <div class="detailContent">
             <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',
-                top: getPosition(item.name, index).top + 'px'
-              }">
-                <div class="icon">
-                  <div v-if="item.status" class="icon-content" :style="{ background: getColor(item.status, 1) }">
-                    {{ item.progress }}%
+              <div v-for="item, index in dataList" :key="index">
+                <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">BOE端到端的流程体系</div>
+                    <div style="margin: 20px 0;">
+                      <el-tag>必修</el-tag>
+                      <el-tag type="success">在线</el-tag>
+                    </div>
+                    <div>
+                      <span style="color: #387DF7;">学习进度</span>
+                      <el-progress :percentage="50"></el-progress>
+                    </div>
+                    <div style="margin: 20px 0;">课程讲师：启用家</div>
+                    <div>课程简介：无</div>
+                    <el-button style="width: 100%;margin-top: 20px;" type="primary">
+                      <div style="display: flex;justify-content: space-between;align-items: center;">
+                        <div></div>
+                        <span>去学习</span>
+                        <svg t="1706166377362" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="10521" width="24"
+                          height="24">
+                          <path
+                            d="M512 102.4a422.912 422.912 0 1 0 422.570667 423.936A422.570667 422.570667 0 0 0 512 102.4z m117.418667 446.805333L462.506667 716.8a34.133333 34.133333 0 0 1-48.469334-48.128l143.018667-143.018667-143.018667-143.018666a34.133333 34.133333 0 0 1 0-48.128 34.133333 34.133333 0 0 1 48.469334 0l166.912 166.912a34.133333 34.133333 0 0 1 0 49.152z"
+                            fill="#b4caf7" p-id="10522"></path>
+                        </svg>
+                      </div>
+                    </el-button>
                   </div>
-                  <div v-else class="icon-content" style="background-color: #fff;">
-                    <svg style="width: 36px;height: 36px;" t="1706149497692" class="icon" viewBox="0 0 1024 1024"
-                      version="1.1" p-id="4648">
-                      <path
-                        d="M0 512C0 229.234759 229.234759 0 512 0s512 229.234759 512 512-229.234759 512-512 512S0 794.765241 0 512z m419.310345 194.630621a35.310345 35.310345 0 0 0 49.399172 1.271172l335.518897-311.931586a35.310345 35.310345 0 0 0-48.075035-51.729655l-309.124413 289.544827-145.125518-149.645241a35.310345 35.310345 0 1 0-50.688 49.169655l168.112552 173.320828z"
-                        fill="#F2675D" p-id="4649"></path>
-                    </svg>
+                  <div slot="reference" class="address" :style="{
+                    backgroundColor: getColor(item.status, 0),
+                    left: getPosition(item.name, index).left + 'px',
+                    top: getPosition(item.name, index).top + 'px'
+                  }">
+                    <div class="icon">
+                      <div v-if="item.status" class="icon-content" :style="{ background: getColor(item.status, 1) }">
+                        {{ item.progress }}%
+                      </div>
+                      <div v-else class="icon-content" style="background-color: #fff;">
+                        <svg style="width: 36px;height: 36px;" t="1706149497692" class="icon" viewBox="0 0 1024 1024"
+                          version="1.1" p-id="4648">
+                          <path
+                            d="M0 512C0 229.234759 229.234759 0 512 0s512 229.234759 512 512-229.234759 512-512 512S0 794.765241 0 512z m419.310345 194.630621a35.310345 35.310345 0 0 0 49.399172 1.271172l335.518897-311.931586a35.310345 35.310345 0 0 0-48.075035-51.729655l-309.124413 289.544827-145.125518-149.645241a35.310345 35.310345 0 1 0-50.688 49.169655l168.112552 173.320828z"
+                            fill="#F2675D" p-id="4649"></path>
+                        </svg>
+                      </div>
+                    </div>
+                    <div class="iconTitle">{{ item.title }}</div>
                   </div>
-                </div>
-                <div class="iconTitle">{{ item.title }}</div>
+                </el-popover>
+
               </div>
             </div>
           </div>
@@ -455,32 +486,32 @@ export default {
           progress: '10',
           title: '商务邮件撰写技巧',
           status: 1
-        },{
+        }, {
           name: '路径图背景全',
           progress: '99',
           title: '特训营/校招GROW180/社招入职',
           status: 0
-        },{
+        }, {
           name: '路径图背景全',
           progress: '99',
           title: '特训营/校招GROW180/社招入职',
           status: 2
-        },{
+        }, {
           name: '路径图背景全',
           progress: '99',
           title: '特训营/校招GROW180/社招入职',
           status: 0
-        },{
+        }, {
           name: '路径图背景全',
           progress: '99',
           title: '特训营/校招GROW180/社招入职',
           status: 1
-        },{
+        }, {
           name: '路径图背景全',
           progress: '99',
           title: '特训营/校招',
           status: 2
-        },{
+        }, {
           name: '路径图背景全',
           progress: '99',
           title: '特训营/校招',
@@ -579,6 +610,7 @@ export default {
     }
   }
 
+
   .iconTitle {
     position: absolute;
     top: 50%;