统计查询页面头部统计背景修改

UI2/src/views/tj/sjtjModules.vue

@@ -16,8 +16,7 @@
           </a-col>
 
           <a-col :sm="24" :md="12" :xl="4">
-            <div
-              style="height:5rem;width: 100%;background-color:rgb(80,165,246); margin-left: 5rem;font-size:16px;text-align: center ;border-radius: 10px;cursor:pointer ">
+            <div class='tjcxcound1'>
               <div style="color: white;padding-top: 1rem">
                 <div>已上报省直单位地块总面积</div>
                 <div>
@@ -27,8 +26,7 @@
             </div>
           </a-col>
           <a-col :sm="24" :md="12" :xl="4">
-            <div
-              style="height:5rem;width: 100%;background-color: rgb(252,140,118); margin-left: 10rem;font-size:16px;text-align: center ;border-radius: 10px;cursor:pointer ">
+            <div class='tjcxcound2'>
               <div style="color: white;padding-top: 1rem">
                 <div>已上报省属企业地块总面积</div>
                 <div>
@@ -38,8 +36,7 @@
             </div>
           </a-col>
           <a-col :sm="24" :md="12" :xl="4">
-            <div
-              style="height:5rem;width: 100%;background-color: rgb(130,144,255); margin-left: 15rem;font-size:16px;text-align: center ;border-radius: 10px;cursor:pointer ">
+            <div class='tjcxcound3'>
               <div style="color: white;padding-top: 1rem">
                 <div>其中省直单位闲置低效面积</div>
                 <div>
@@ -49,8 +46,7 @@
             </div>
           </a-col>
           <a-col :sm="24" :md="12" :xl="4">
-            <div
-              style="height:5rem;width: 100%;background-color: rgb(66,220,172); margin-left: 20rem;font-size:16px;text-align: center ;border-radius:10px;cursor:pointer ">
+            <div class='tjcxcound4'>
               <div style="color: white;padding-top: 1rem">
                 <div>其中省属企业闲置低效面积</div>
                 <div>
@@ -89,21 +85,21 @@
             </a-col>
           </a-card>
         </a-col>
-<!--        <a-col :sm="24" :md="12" :xl="12">-->
-<!--          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">-->
-<!--            &lt;!&ndash;            <NightingaleCharData style="margin-left: 10rem"></NightingaleCharData>&ndash;&gt;-->
-<!--            <a-col :xl="5">-->
-<!--              <WaterWorld :titleText=this.WaterWorldTitle :bottomTitle=this.WaterWorldTitleByqyzy-->
-<!--                          :resultData="this.resWordDataZy"></WaterWorld>-->
-<!--            </a-col>-->
-<!--            <a-col :xl="5" style="margin-left: 5rem">-->
-<!--              <WaterWorld :bottomTitle=this.WaterWorldTitleBydycz :resultData="this.resWordDataCz"></WaterWorld>-->
-<!--            </a-col>-->
-<!--            <a-col :xl="5" style="margin-left: 5rem">-->
-<!--              <WaterWorld :bottomTitle=this.WaterWorldTitleByxzdx :resultData="this.resWordDataXz"></WaterWorld>-->
-<!--            </a-col>-->
-<!--          </a-card>-->
-<!--        </a-col>-->
+        <!--        <a-col :sm="24" :md="12" :xl="12">-->
+        <!--          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">-->
+        <!--            &lt;!&ndash;            <NightingaleCharData style="margin-left: 10rem"></NightingaleCharData>&ndash;&gt;-->
+        <!--            <a-col :xl="5">-->
+        <!--              <WaterWorld :titleText=this.WaterWorldTitle :bottomTitle=this.WaterWorldTitleByqyzy-->
+        <!--                          :resultData="this.resWordDataZy"></WaterWorld>-->
+        <!--            </a-col>-->
+        <!--            <a-col :xl="5" style="margin-left: 5rem">-->
+        <!--              <WaterWorld :bottomTitle=this.WaterWorldTitleBydycz :resultData="this.resWordDataCz"></WaterWorld>-->
+        <!--            </a-col>-->
+        <!--            <a-col :xl="5" style="margin-left: 5rem">-->
+        <!--              <WaterWorld :bottomTitle=this.WaterWorldTitleByxzdx :resultData="this.resWordDataXz"></WaterWorld>-->
+        <!--            </a-col>-->
+        <!--          </a-card>-->
+        <!--        </a-col>-->
         <a-col :sm="24" :md="12" :xl="24">
           <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
             <BarDobuleData style="width: 1600px" :titleText=this.BarTitleBysjzymj2 :result-x-data="resBarSzData"></BarDobuleData>
@@ -316,7 +312,7 @@ export default {
     },
     visibleInfoBySz(params){
       this.paramSz=params
-       this.visibleSz = true
+      this.visibleSz = true
     },
     handleOk(){
       this.visible = false
@@ -463,6 +459,50 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
+.tjcxcound1{
+  height:5rem;
+  width: 100%;
+  background-image: url('~@/assets/sytj_1.png');
+  background-size: 100% 100%;
+  margin-left: 5rem;
+  font-size:16px;
+  text-align: center ;
+  border-radius: 10px;
+  cursor:pointer
+}
+.tjcxcound2{
+  height:5rem;
+  width: 100%;
+  background-image: url('~@/assets/sytj_2.png');
+  background-size: 100% 100%;
+  margin-left: 10rem;
+  font-size:16px;
+  text-align: center ;
+  border-radius: 10px;
+  cursor:pointer
+}
+.tjcxcound3{
+  height:5rem;
+  width: 100%;
+  background-image: url('~@/assets/sytj_3.png');
+  background-size: 100% 100%;
+  margin-left: 15rem;
+  font-size:16px;
+  text-align: center ;
+  border-radius: 10px;
+  cursor:pointer
+}
+.tjcxcound4{
+  height:5rem;
+  width: 100%;
+  background-image: url('~@/assets/sytj_4.png');
+  background-size: 100% 100%;
+  margin-left: 20rem;
+  font-size:16px;
+  text-align: center ;
+  border-radius: 10px;
+  cursor:pointer
+}
 
 </style>