代码提交

src/App.vue

@@ -33,7 +33,7 @@
           overflow-y:scroll
           z-index: 9999;
           top: 98px;
-          border: 20px solid rgb(5,53,45);
+          border: 10px solid rgb(5,53,45);
         "
       >
         <div
@@ -42,17 +42,14 @@
             width: 20%;
             height: 3%;
             font-size: 18px;
-            padding: 5px 10px 0 0;
-            color: #fff;
             text-align: right;
             cursor: pointer;
             box-sizing: border-box;
             background: rgb(5,53,45,0.7);
             z-index: 9999;
           "
-          @click="handleClosePdf"
         >
-          x
+          <img src="./assets/images/close.png" style="position: absolute;right:0"  @click="handleClosePdf"/>
         </div>
         <pdf v-for="i in numPages" :key="i"  :page="i" :src="filePdf" style="top:3.2%;z-index:999"></pdf>
       </div>
@@ -70,7 +67,7 @@ import {getData} from './api/index.js'
       handleAction:'',
       handleAction1:'',
       fileType:false, //pdf显示
-      numPages: 1, //pdf页数
+      numPages: null, //pdf页数
       filePdf:'', //pdf文件
       weather:require('./assets/weather/Cloudy .png'),
       weekList:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
@@ -83,14 +80,6 @@ import {getData} from './api/index.js'
       }
     },
     mounted() {
-      //pdf文件加载
-    //   this.$nextTick(()=>{
-    //     this.filePdf.promise.then((pdf) => {
-    //   this.numPages = pdf.numPages
-    // }).catch(err =>{
-    //   console.log(err);
-    // })
-    //   })
       let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
       this.week = this.weekList[week]
       window.setInterval(()=>{
@@ -159,34 +148,57 @@ import {getData} from './api/index.js'
             this.weather = require('./assets/weather/Cloudy .png');
           }
         }
-      })
+      });
     },
     methods:{
       //关闭PDF文件
      handleClosePdf(){
         this.fileType  =  false
        this.filePdf = ''
+       this.numPages = null
        this.$nextTick(()=>{
          this.handleAction = ''
           this.handleAction1 = ''
        })
       },
       powerPdf(){
+        if (this.filePdf != '') {
+          return false
+        }else{
           this.filePdf = ''
             let fileUrl = "/pdf/power.pdf";
-      this.numPages = 20
           this.filePdf = pdf.createLoadingTask(fileUrl)
+          //pdf文件加载
+            this.filePdf.promise.then(pdf => {
+              this.numPages = pdf.numPages
+            }).catch(err =>{
+              // this.$message.error(err.message);
+              console.log('pdf加载失败',err);
+            })
             this.fileType  =  true
           this.handleAction = '电力行业发展'
+        }
+        
       },
       energyPdf(){
+        if (this.filePdf != '') {
+          return false
+        }else{
           this.filePdf = ''
           let fileUrl = "/pdf/energy.pdf";
           this.filePdf = pdf.createLoadingTask(fileUrl)
-      this.numPages = 27
+          //pdf文件加载
+            this.filePdf.promise.then(pdf => {
+              this.numPages = pdf.numPages
+            }).catch(err =>{
+              // this.$message.error(err.message);
+              console.log('pdf加载失败',err);
+            })
           this.fileType  =  true
           this.handleAction1 = '能源发展综述'
         }
+        
+      }
     },
     components: {
     pdf
@@ -350,8 +362,38 @@ import {getData} from './api/index.js'
   justify-content: space-around;
 }
 .pdfShow{
+   -webkit-animation: fadeInDown 0.3s;
+       animation: fadeInDown 0.3s;
   &::-webkit-scrollbar{
       width: 0;
     }
 }
+/**
+下拉显示动画效果
+*/
+@keyframes fadeInDown {
+  0% {
+    -webkit-transform: translate3d(0, -20%, 0);
+    transform: translate3d(0, -20%, 0);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeInDown {
+  0% {
+    -webkit-transform: translate3d(0, -20%, 0);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform: none;
+    opacity: 1;
+  }
+}
 </style>>

src/views/greenPop.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="greenPop">
+    <div class="close">
+      <img src="../assets/images/close.png" style="position: absolute;right:0" @click="close"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name:'greenPop',
+    data(){
+      return{
+
+      }
+    },
+    mounted(){
+
+    },
+    methods:{
+      close(){
+        this.$parent.componentShow = "";
+        this.$parent.modelOthers = false;
+      }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.greenPop{
+      width: 20%;
+      height: 85%;
+      position: absolute;
+      background: rgb(5,53,45);
+        -webkit-animation: fadeInDown 0.3s;
+       animation: fadeInDown 0.3s;
+       top: 11%;
+      .close{
+        height: 5%;
+        width: 100%;
+        // color: #ffffff;
+        // background: url("../assets/images/twoTitle.png") no-repeat;
+        // background-size: 100% 100%;
+        font-size: 18px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        position: relative;
+      }
+}
+/**
+下拉显示动画效果
+*/
+@keyframes fadeInDown {
+  0% {
+    -webkit-transform: translate3d(0, -20%, 0);
+    transform: translate3d(0, -20%, 0);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeInDown {
+  0% {
+    -webkit-transform: translate3d(0, -20%, 0);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform: none;
+    opacity: 1;
+  }
+}
+</style>

src/views/index.vue

@@ -117,7 +117,7 @@
         <div class="content">
           <div class="one">
              <div class="oneContent">
-             <div class="details"><img src="../assets/images/details.png" style="width:99px;height:41px"/></div>
+             <div class="details"><img src="../assets/images/details.png" style="width:99px;height:41px"  @click="handlePop(5)" /></div>
              <div class="green">
                <div class="greenLeft">
                  <div class="powerGeneration" v-for="(item,index) in greenLeftData" :key="index">
@@ -303,6 +303,7 @@
 import geoJson from '../json/320900.json';
 import axios from 'axios'
 import pop from './pop.vue'
+import greenPop from './greenPop.vue'
 import {getData} from '../api/index.js'
 export default {
   data(){
@@ -4326,11 +4327,15 @@ export default {
           this.componentShow = 'pop';
           this.popName = '非统调光伏电站装机容量分布';
           this.popTableShow = val
+       }else if (val == 5) {
+         this.modelOthers = true
+          this.componentShow = 'greenPop';
        }
      }
   },
   components:{
-    pop
+    pop, //弹窗
+    greenPop  //绿色双碳弹窗
   }
 }