diff --git a/src/App.vue b/src/App.vue
index d1f19fd..d525cc2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -254,6 +254,7 @@ import {getData} from './api/index.js'
       display: flex;
       align-items: center;
       justify-content: center;
+      font-size: 25px;
     }
     }
     .handleAction{
@@ -262,6 +263,17 @@ import {getData} from './api/index.js'
       display: flex;
       justify-content: flex-start;
       color:rgb(15,251,251);
+      .leftBtnText{
+      height: 61%;
+      // width: 56.62%;
+      width: 100%;
+      background: url("./assets/images/leftAct.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 25px;
+    }
     }
     .middleText{
       width:59%;
@@ -298,14 +310,26 @@ import {getData} from './api/index.js'
       display: flex;
       align-items: center;
       justify-content: center;
+      font-size: 25px;
     }
     }
     .handleAction1{
       width:25%;
       height: 100%;
-     display: flex;
-    justify-content: flex-end;
+       display: flex;
+      justify-content: flex-end;
       color:rgb(15,251,251);
+      .rightBtnText{
+      height: 61%;
+      // width: 56.62%;
+       width: 100%;
+      background: url("./assets/images/rightAct.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 25px;
+    }
     }
   }
   .right{
diff --git a/src/assets/images/btnLeftPdf.png b/src/assets/images/btnLeftPdf.png
index 40a43d1..0f12f4c 100644
Binary files a/src/assets/images/btnLeftPdf.png and b/src/assets/images/btnLeftPdf.png differ
diff --git a/src/assets/images/btnRightPdf.png b/src/assets/images/btnRightPdf.png
index 90d37dd..946b6a0 100644
Binary files a/src/assets/images/btnRightPdf.png and b/src/assets/images/btnRightPdf.png differ
diff --git a/src/assets/images/greenLeft.png b/src/assets/images/greenLeft.png
new file mode 100644
index 0000000..74c67f2
Binary files /dev/null and b/src/assets/images/greenLeft.png differ
diff --git a/src/assets/images/leftAct.png b/src/assets/images/leftAct.png
new file mode 100644
index 0000000..988921e
Binary files /dev/null and b/src/assets/images/leftAct.png differ
diff --git a/src/assets/images/rightAct.png b/src/assets/images/rightAct.png
new file mode 100644
index 0000000..73831f5
Binary files /dev/null and b/src/assets/images/rightAct.png differ
diff --git a/src/views/index.vue b/src/views/index.vue
index f5ff71b..2463c9c 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -115,7 +115,31 @@
       <div class="Bicarbon">
         <div class="title" text="绿色双碳">绿色双碳</div>
         <div class="content">
-          <div class="one"></div>
+          <div class="one">
+             <div class="oneContent">
+             <div class="details"><img src="../assets/images/details.png" style="width:99px;height:41px"/></div>
+             <div class="green">
+               <div class="greenLeft">
+                 <div class="powerGeneration" v-for="(item,index) in greenLeftData" :key="index">
+                   <div class="fadian" :text="item.name">{{item.name}}</div>
+                   <div class="fadianliang">
+                     <div class="shuzhi" :style="{color:item.color}" style="font-size:37px;font-family: emoji;">{{item.count}}</div>
+                     <div class="danwei" :text="item.company">{{item.company}}</div>
+                   </div>
+                 </div>
+               </div>
+               <div class="greenRight">
+                 <div class="powerGeneration" v-for="(item,index) in greenRightData" :key="index">
+                   <div class="fadian" :text="item.name">{{item.name}}</div>
+                   <div class="fadianliang">
+                     <div class="shuzhi" :style="{color:item.color}" style="font-size:30px;font-family: emoji;">{{item.count}}</div>
+                     <div class="danwei" :text="item.company">{{item.company}}</div>
+                   </div>
+                 </div>
+               </div>
+             </div>
+             </div>
+          </div>
           <div class="two">
             <div class="title" text="清洁能源电力消纳情况">清洁能源电力消纳情况</div>
             <div class="twoContent">
@@ -283,6 +307,34 @@ import {getData} from '../api/index.js'
 export default {
   data(){
     return{
+      greenLeftData:[
+        {
+          name:'上月清洁能源电厂发电量',
+          count:'025529',
+          company:'万千瓦时',
+          color:'rgb(255,204,0)',
+        },
+        {
+          name:'本年度清洁能源电厂发电量',
+          count:'262561',
+          company:'万千瓦时',
+          color:'rgb(71,211,252)',
+        },
+      ],
+      greenRightData:[
+        {
+          name:'减少碳排放量',
+          count:'068310',
+          company:'吨',
+          color:'rgb(2,244,177)',
+        },
+        {
+          name:'减少碳排放量',
+          count:'00055',
+          company:'万吨',
+          color:'rgb(249,163,70)',
+        },
+      ],
       smallMapData:'',
       smallMapDataShow:true,
       powerGeneration:'',//清洁能源发电量
@@ -4856,6 +4908,144 @@ export default {
           width: 100%;
           background: url("../assets/images/kuang.png") no-repeat;
           background-size: 100% 100%;
+          .oneContent{
+            width: 100%;
+            height: 100%;
+            .details{
+              height: 14%;
+              width: 100%;
+              padding-right: 2%;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: flex-end;
+            }
+            .green{
+              height: calc(100% - 14%);
+              width: 100%;
+              display: flex;
+              justify-content: space-evenly;
+              .greenLeft{
+                width: 58.5%;
+                height: 100%;
+                padding: 2%;
+                box-sizing: border-box;
+                display: flex;
+                flex-wrap: wrap;
+                align-content: space-between;
+                .powerGeneration{
+                  height: 46%;
+                  width: 100%;
+                  background: url("../assets/images/greenLeft.png") no-repeat;
+                  background-size: 100% 100%;
+                  .fadian{
+                    width: 100%;
+                    height: 35%;
+                    color: #ffffff;
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+                    padding-left: 7%;
+                    box-sizing: border-box;
+                  }
+                  .fadian:before{
+                      content: attr(text);
+                      position: absolute;
+                      z-index: 10;
+                      color:rgb(11,243,194);
+                      -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
+                  }
+                  .fadianliang{
+                    width: 100%;
+                    height: calc(100% - 35%);
+                    display: flex;
+                    .shuzhi{
+                      width: 70%;
+                      height: 100%;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    }
+                    .danwei{
+                      width: calc(100% - 75%);
+                      height: 100%;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      color: #fff;
+                    }
+                    .danwei:before{
+                      content: attr(text);
+                      position: absolute;
+                      z-index: 10;
+                      color:rgb(11,243,194);
+                      -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
+                  }
+                  }
+                }
+              }
+              .greenRight{
+                width: calc(100% - 60%);
+                height: 100%;
+                 padding: 2%;
+                 padding-left: 0;
+                box-sizing: border-box;
+                display: flex;
+                flex-wrap: wrap;
+                align-content: space-between;
+                .powerGeneration{
+                  height: 46%;
+                  width: 100%;
+                  background: url("../assets/images/greenLeft.png") no-repeat;
+                  background-size: 100% 100%;
+                  .fadian{
+                    width: 100%;
+                    height: 35%;
+                    color: #ffffff;
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+                    padding-left: 7%;
+                    box-sizing: border-box;
+                  }
+                  .fadian:before{
+                      content: attr(text);
+                      position: absolute;
+                      z-index: 10;
+                      color:rgb(11,243,194);
+                      -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
+                  }
+                  .fadianliang{
+                    width: 100%;
+                    height: calc(100% - 35%);
+                    display: flex;
+                    .shuzhi{
+                      width: 70%;
+                      height: 100%;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    }
+                    .danwei{
+                      width: calc(100% - 75%);
+                      height: 100%;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      color: #fff;
+                    }
+                    .danwei:before{
+                      content: attr(text);
+                      position: absolute;
+                      z-index: 10;
+                      color:rgb(11,243,194);
+                      -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
+                  }
+                  }
+                }
+              }
+            }
+          }
+          
         }
         .two{
           height: 32%;