耕地保护ui

src/views/cockpit/gdbh.vue

@@ -23,7 +23,92 @@
       </div>
 
       <div v-show="tab == options[1].value">
-        zpqh
+        <div class="content">
+          <div class="item_back">
+            <div class="icon">
+              <div class="icon_jsyd">
+
+              </div>
+            </div>
+            <div class="text_back">
+              <p>建设用地占用耕地</p>
+              <span>673.56</span>公顷
+
+            </div>
+          </div>
+          <div class="item_back">
+            <div class="icon">
+              <div class="icon_bcyd">
+
+              </div>
+            </div>
+            <div class="text_back">
+              <p>补充耕地</p>
+              <span>673.56</span>公顷
+
+            </div>
+          </div>
+        </div>
+        <div class="info">
+          <div class="left_info">
+
+            <ul>
+              <li>
+                <div class="icon"></div>
+
+                <span class="zbph_label">其中水田</span>
+                <br>
+
+                <span class="zbph_value_unit">
+                  <span class="zbph_value">934.23</span>
+                  <span class="zbph_unit">公顷</span>
+                </span>
+              </li>
+
+              <li>
+                <div class="icon"></div>
+
+                <span class="zbph_label">损失粮食产能</span>
+                <br>
+
+                <span class="zbph_value_unit">
+                  <span class="zbph_value">934.23</span>
+                  <span class="zbph_unit">吨</span>
+                </span>
+              </li>
+
+            </ul>
+          </div>
+          <div class="right_info">
+            <ul>
+              <li>
+                <div class="icon"></div>
+
+                <span class="zbph_label">其中水田</span>
+                <br>
+
+                <span class="zbph_value_unit">
+                  <span class="zbph_value">934.23</span>
+                  <span class="zbph_unit">公顷</span>
+                </span>
+              </li>
+
+              <li>
+                <div class="icon"></div>
+
+                <span class="zbph_label">损失粮食产能</span>
+                <br>
+
+                <span class="zbph_value_unit">
+                  <span class="zbph_value">934.23</span>
+                  <span class="zbph_unit">吨</span>
+                </span>
+              </li>
+
+            </ul>
+          </div>
+
+        </div>
       </div>
       <div v-show="tab == options[0].value">
         <div class="content">
@@ -171,7 +256,7 @@ export default {
       let barTopColor = ["#CBB835", "#33C6E2", '#157FFE', '#8F48F0'];
       let barBottomColor = ["#D09311", "#279AB0", '#154AD2', '#670BFF'];
       let option = {
-        backgroundColor: '#051D44',
+        backgroundColor: 'rgba(0,0,0,0)',
         title: {
           show: false,
           text: '一行动一活动开展情况',
@@ -202,8 +287,8 @@ export default {
         grid: {
           top: '14%',
           bottom: '1%',
-          left: '2%',
-          right: '2%',
+          left: '0%',
+          right: '20%',
           containLabel: true
         },
         xAxis: {
@@ -257,88 +342,91 @@ export default {
           },
         },
 
-        series: [{
-          name: '一行动一活动开展情况',
-          type: 'pictorialBar',
-          symbolSize: [10, 26],
-          symbolOffset: [6, 0],
-          z: 12,
-          itemStyle: {
-            normal: {
-              color: function (params) {
-                return barBottomColor[params.dataIndex];
+        series: [
+          {
+            name: '一行动一活动开展情况',
+            type: 'pictorialBar',
+            symbolSize: [8, 14],
+            symbolOffset: [4, 0],
+            z: 12,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return barBottomColor[params.dataIndex];
+                }
               }
-            }
-          },
-          label: {
-            textStyle: {
-              rich: {
-                name: {
-                  color: "#fff", //#BCD3E5
-                  fontSize: 14,
-                },
-                value: {
-                  color: "#64DAFF",
-                  fontSize: 14,
-                },
-                unit: {
-                  color: "#fff", //#BCD3E5
-                  fontSize: 14,
+            },
+            label: {
+              textStyle: {
+                rich: {
+                  name: {
+                    color: "#fff", //#BCD3E5
+                    fontSize: 14,
+                  },
+                  value: {
+                    color: "#64DAFF",
+                    fontSize: 14,
+                  },
+                  unit: {
+                    color: "#fff", //#BCD3E5
+                    fontSize: 14,
+                  },
                 },
               },
+              show: true,
+              position: 'right',
+              fontSize: 16,
+              formatter: function (params) {
+                return `{value|${params.value}}  {unit|公顷}`;
+              }
             },
-            show: true,
-            position: 'right',
-            fontSize: 16,
-            formatter: function (params) {
-              return `{value|${params.value}}  {unit|公顷}`;
-            }
-          },
-          symbolPosition: 'end',
-          data: [22, 23, 18, 14],
-        }, {
-          name: '一行动一活动开展情况',
-          type: 'pictorialBar',
-          symbolSize: [10, 26],
-          symbolOffset: [-4, 0],
-          z: 12,
-          itemStyle: {
-            normal: {
-              color: function (params) {
-                return barTopColor[params.dataIndex];
+            symbolPosition: 'end',
+            data: [22.23, 23.57, 18.14, 14.75],
+
+          }, {
+            name: '一行动一活动开展情况',
+            type: 'pictorialBar',
+            symbolOffset: [-3, 0],
+
+            symbolSize: [8, 14],
+            z: 12,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return barTopColor[params.dataIndex];
+                }
               }
-            }
-          },
-          data: [22, 23, 18, 14],
-
-        }, {
-          type: 'bar',
-          itemStyle: {
-            normal: {
-              color: function (params) {
-                return new echarts.graphic.LinearGradient(
-                  0, 0, 0, 1,
-                  [{
-                    offset: 1,
-                    color: barTopColor[params.dataIndex]
-                  },
-                  {
-                    offset: 0,
-                    color: barBottomColor[params.dataIndex]
-                  }
-                  ]
-                );
-              },
-              opacity: .9
-            }
-          },
-          z: 16,
-          silent: true,
-          barWidth: 26,
-          barGap: '-100%',
-          data: [22, 23, 18, 14],
+            },
+            data: [22, 23, 18, 14],
+
+          }, {
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [{
+                      offset: 1,
+                      color: barTopColor[params.dataIndex]
+                    },
+                    {
+                      offset: 0,
+                      color: barBottomColor[params.dataIndex]
+                    }
+                    ]
+                  );
+                },
+                opacity: .9
+              }
+            },
+            z: 16,
+            silent: true,
+            barWidth: 15,
+            barCategoryGap: '100%',
+            data: [22.23, 23.57, 18.14, 14.75],
 
-        }]
+          }]
       };
 
       myChart.setOption(option);
@@ -363,9 +451,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 #gdxz_echart {
-  width: 34rem;
-  height: 9rem;
-  margin-top: 6rem;
+  width: 25rem;
+  height: 9.5rem;
+  margin-top: 5rem;
 
 }
 
@@ -397,7 +485,8 @@ export default {
     height: 45px;
     padding: 2%;
     border-radius: 8px;
-    display: block;
+    display: inline-block;
+
     background: no-repeat 50%;
     margin-left: 1rem;
     margin-bottom: 0.5rem;
@@ -602,6 +691,58 @@ export default {
 
 }
 
+.icon_jsyd {
+  background: no-repeat 50%;
+  background-image: url("/static/images/overview/gdxz_jsyd.png");
+  /* border: #00FFFF 1px solid; */
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+
+}
+
+.icon_bcyd {
+  background: no-repeat 50%;
+  background-image: url("/static/images/overview/gdxz_bcyd.png");
+  /* border: #00FFFF 1px solid; */
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+
+}
+
+.item_back {
+  width: 32%;
+  height: 45px;
+  display: inline-block;
+  margin-right: 4rem;
+  text-align: center;
+}
+
+.text_back {
+  background: no-repeat 100%;
+  background-image: url("/static/images/overview/zbph_back.png");
+  width: 161px;
+  height: 50px;
+  display: inline-block;
+
+
+  p {
+    font-kerning: normal;
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    color: #FFFFFF;
+  }
+
+  span {
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    color: #68F4FB;
+  }
+}
 
 .text {
   display: inline-block;
@@ -624,4 +765,66 @@ export default {
     color: #68F4FB;
   }
 }
+
+.info {
+  width: 21rem;
+  height: 7rem;
+  position: fixed;
+  top: 14rem;
+  right: 2rem;
+
+  ul {
+    list-style: none;
+
+    .zbph_value_unit {}
+
+    .zbph_unit {
+      position: relative;
+      left: 48px;
+      bottom: 12px;
+      font-size: 12px;
+
+    }
+
+    .zbph_label {
+      display: inline-block;
+      width: 93px;
+      height: 16px;
+      font-size: 15px;
+      position: relative;
+      top: -9px;
+      font-weight: 600;
+    }
+
+    .zbph_value {
+      color: #f9b447;
+      position: relative;
+      left: 43px;
+      top: -10px;
+      font-weight: 700;
+    }
+  }
+
+  .icon {
+
+    width: 12px;
+    height: 12px;
+    background: linear-gradient(180deg, rgba(37, 177, 255, 0.6) 0%, rgba(0, 48, 83, 0.48) 100%);
+    box-shadow: inset 0px 0 5px 0px #002B6C;
+    border-radius: 5px 5px 5px 5px;
+    border: 1px solid rgba(100, 218, 255, 0.5);
+  }
+
+  .left_info {
+    display: inline-block;
+    width: 50%;
+    height: 100%;
+  }
+
+  .right_info {
+    width: 50%;
+    height: 100%;
+    float: right;
+  }
+}
 </style>