新增弹窗

manpower/index.html

@@ -34,9 +34,9 @@
       <div class="left">
         <dv-border-box-8 :dur="10" style="flex: 1;">
           <div class="my-panel">
-            <div class="panel-title">
+            <div class="panel-title flex-between " >
               <span class="text">定机构</span>
-              <span>智能分析</span>
+              <span class="tip-window" @click="handleShowTip(0)">智能分析</span>
             </div>
             <div class="content flex">
               <div ref="echartL1" style="flex: 1;height: 100%;"></div>
@@ -57,8 +57,9 @@
         </dv-border-box-8>
         <dv-border-box-8 :dur="12" style="flex: 2;">
           <div class="my-panel">
-            <div class="panel-title">
+            <div class="panel-title flex-between">
               <span class="text">定员额</span>
+              <span class="tip-window" @click="handleShowTip(1)">智能分析</span>
             </div>
             <div class="content flex flex-wrap">
               <div ref="echartL5" style="flex: 0 0 49.9%;height: 50%;"></div>
@@ -153,8 +154,9 @@
         </dv-border-box-8>
         <dv-border-box-8 :dur="10">
           <div class="my-panel">
-            <div class="panel-title">
+            <div class="panel-title flex-between">
               <span class="text">核心指标监测</span>
+              <span class="tip-window" @click="handleShowTip(2)">智能分析</span>
             </div>
             <div class="content flex">
               <div ref="echartC1" style="flex: 1;height: 100%;"></div>
@@ -197,8 +199,9 @@
         </dv-border-box-8>
         <dv-border-box-8 :dur="11" style="flex: 1">
           <div class="my-panel">
-            <div class="panel-title">
+            <div class="panel-title flex-between">
               <span class="text">定薪酬</span>
+              <span class="tip-window" @click="handleShowTip(3)">智能分析</span>
             </div>
             <div class="content flex">
               <div ref="echartR5" style="flex: 1;height: 100%;"></div>
@@ -223,7 +226,17 @@
       <a class="item" v-for="(item,index) in companyList" :key="index"><img
           :src="`./images/logos/logo${index+1}.png`"></img> {{item.name}}</a>
     </div>
+
+    <div class="tip" @click="showTip = false" v-if="showTip">
+      <div class="tip-box">
+        <div>{{tipData[tipNum]}}</div>
+        <!-- <div class="btm20">全员劳动生产率从去年前的人均XX万元提升到XX万元；在岗职工平均工资从去年前的人均XX万元提升到XX万元。</div>
+        <div>打破工资“大锅饭”，所有盈利企业工资增幅不高于利润增幅。实行薪酬“双挂钩”，省属企业负责人绩效年薪与经营业绩考核结果挂钩后，还要与企业经济效益挂钩。</div> -->
+      </div>
+    </div>
   </div>
+ 
+ 
   <script src="./js/index.js"></script>
 </body>
 

manpower/js/fjx.js

@@ -13,4 +13,11 @@ const fjxdataL1 = [
   ]
   const fjxdataL4 = [
     [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,100],
+  ]
+
+  const tipData = [
+    '全员劳动生产率从去年前的人均XX万元提升到XX万元；在岗职工平均工资从去年前的人均XX万元提升到XX万元。打破工资“大锅饭”，所有盈利企业工资增幅不高于利润增幅。实行薪酬“双挂钩”，省属企业负责人绩效年薪与经营业绩考核结果挂钩后，还要与企业经济效益挂钩。',
+    '全员劳动生产率从去年前的人均XX万元提升到XX万元；在岗职工平均工资从去年前的人均XX万元提升到XX万元。打破工资“大锅饭”，所有盈利企业工资增幅不高于利润增幅。实行薪酬“双挂钩”，省属企业负责人绩效年薪与经营业绩考核结果挂钩后，还要与企业经济效益挂钩2。',
+    '全员劳动生产率从去年前的人均XX万元提升到XX万元；在岗职工平均工资从去年前的人均XX万元提升到XX万元。打破工资“大锅饭”，所有盈利企业工资增幅不高于利润增幅。实行薪酬“双挂钩”，省属企业负责人绩效年薪与经营业绩考核结果挂钩后，还要与企业经济效益挂钩3。',
+    '全员劳动生产率从去年前的人均XX万元提升到XX万元；在岗职工平均工资从去年前的人均XX万元提升到XX万元。打破工资“大锅饭”，所有盈利企业工资增幅不高于利润增幅。实行薪酬“双挂钩”，省属企业负责人绩效年薪与经营业绩考核结果挂钩后，还要与企业经济效益挂钩4。'
   ]

manpower/js/index.js

@@ -4,6 +4,8 @@ let app = new Vue({
   el: '#app',
   data () {
     return {
+      showTip: false,
+      tipNum: '',
       time: '',
       year: '2022',
       config1: {
@@ -161,6 +163,11 @@ let app = new Vue({
     }
   },
   methods: {
+    handleShowTip(index){
+      this.showTip = true
+      this.tipNum = index
+    },
+
     numFormat (value) {
       if (!value) return '0'
       var intPart = Number(value).toFixed(0) // 获取整数部分

manpower/styles/index.css

@@ -79,6 +79,7 @@ a {
   background: url('../images/page-bg.png') center center no-repeat;
   background-size: 100% 100%;
   padding-top: 10px;
+  position: relative;
 }
 .my-header {
   position: relative;
@@ -313,4 +314,46 @@ a {
 }
 .dv-scroll-board .rows .row-item {
   font-size: 18px!important;
+}
+.tip-window{
+  margin-right: 50px;
+  margin-top: 10px;
+  color: #69C0FF;
+  display: inline-block;
+  width: 142px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  background-color: rgba(64,169,255,0.12);
+  border: 2px solid #40A9FF;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.tip {
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.tip-box {
+  position: absolute;
+  /* top: 35%;
+  left: 32.5%; */
+   /* width: 35%;
+  height: 30%; */
+  width: 1000px;
+  height: 700px;
+  top: calc(50% - 350px);
+  left: calc(50% - 500px);
+  background: url('../images/sex-bg.png') no-repeat center;
+  background-color: #133B65;
+  background-size: 100% 100%;
+ 
+  padding: 60px;
+}
+.tip-box > div {
+  font-size: 42px;
+  line-height: 70px;
 }