新版

src/views/cockpit/gkzb.vue

@@ -56,7 +56,7 @@
         </div>
       </div>
 
-      <div class="item">
+      <!-- <div class="item">
         <div class="icon">
           <div class="icon_yrk">
 
@@ -84,7 +84,8 @@
           <span>{{ store.state.cockpit_gkzb.bfb }}</span>%
 
         </div>
-      </div>
+      </div> -->
+      <div class="box_bottom"></div>
     </div>
   </div>
 </template>
@@ -238,6 +239,14 @@ export default {
   height: 50px
 }
 
+.box_bottom {
+  position: fixed;
+  border: 1px solid red;
+  width: 16rem;
+  height: 4rem;
+  left: 4%;
+}
+
 .icon_zxkg {
   background: no-repeat 50%;
   background-image: url("/static/images/overview/icon_zxkg.png");

src/views/cockpit/jcbd.vue

@@ -1,6 +1,9 @@
 <template>
-    <div class="jcbd" style="border: 1px solid red;">
-        基础本地
+    <div class="jcbd">
+        <div class="title">
+            <div class="icon"></div>
+            <span>管控指标</span>
+        </div>
     </div>
 </template>
 
@@ -30,7 +33,7 @@ export default {
     deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
 };
 </script>
-<style  scoped>
+<style lang="scss"  scoped>
 .jcbd {
     border-width: 0px;
     position: absolute;
@@ -45,5 +48,32 @@ export default {
     -webkit-box-shadow: none;
     box-shadow: none;
     z-index: 100;
+    border: 1px solid red;
+}
+
+.title {
+    border-width: 0px;
+    width: 100%;
+    height: 40px;
+    background: no-repeat;
+    background-image: url("/static/images/overview/标题框.png");
+
+    .icon {
+        background: no-repeat;
+
+        background-image: url("/static/images/overview/icon_标题框装饰.png");
+        display: inline-block;
+        width: 30px;
+        height: 30px;
+        background-position: 14px 7px;
+    }
+
+    span {
+        color: #fff;
+        font-size: 14px;
+        font-weight: bold;
+        position: relative;
+        bottom: 0.5rem;
+    }
 }
 </style>