副标题

src/App.vue

@@ -21,6 +21,6 @@ export default {
   height: 100%;
   z-index: 999;
   background-image:
-    radial-gradient(RGBA(54, 130, 198, 0.4) 50%, rgba(28, 61, 104, 0.4) 70%, rgba(32, 54, 77, 0.4) 90%);
+    radial-gradient(rgba(54, 130, 198, 0.4) 50%, rgba(28, 61, 104, 0.4) 70%, rgba(32, 54, 77, 0.4) 90%);
 }
 </style>

src/views/cockpitNew1/hysy.vue

@@ -6,7 +6,24 @@
                 <span>海域使用权出让</span>
             </div>
             <div class="content">
+                <div class="icon_info">
 
+                </div>
+                <div class="info_left">
+
+                </div>
+                <div class="info_main">
+
+                </div>
+                <div class="text">
+                    <span>收储项目</span>
+                    <span class="count1">33</span>
+                    <span class="unit">个</span>
+
+                    <span>收储总面积</span>
+                    <span class="count2">213124.45</span>
+                    <span class="unit">公顷</span>
+                </div>
             </div>
             <div id="hysyEchart">
 
@@ -282,8 +299,71 @@ export default {
     background: no-repeat;
     width: 100%;
     height: 44px;
-    border: 1px solid red;
-    // background-image: url("/static/images/overview/info.jpg");
+    position: relative;
+    // background-image: url("/static/images/overview/info_all.png");
+    // background-size: 98% 87%;
+
+    .text {
+        position: relative;
+        left: 3.5rem;
+        top: 0.5rem;
+        font-size: 15px;
+        font-weight: 600;
+
+        .unit {
+            margin-right: 3rem;
+        }
+
+        .count1 {
+            color: RGBA(250, 160, 18, 1);
+        }
+
+        .count2 {
+            color: RGBA(100, 218, 255, 1);
+        }
+    }
+}
+
+.icon_info {
+    background: no-repeat;
+
+    // background-image: url("/static/images/overview/icon_info.png");
+    background-image: url("/static/images/overview/icon信息.png");
+
+    display: inline-block;
+    width: 2rem;
+    height: 3rem;
+    position: absolute;
+    left: 1.23rem;
+    top: 0.5rem;
+}
+
+.info_left {
+    background: no-repeat;
+
+    background-image: url("/static/images/overview/info_left.png");
+    // background-image: url("/static/images/overview/左侧主信息.png");
+
+    display: inline-block;
+    width: 10rem;
+    height: 2.5rem;
+    background-size: 100%;
+    position: absolute;
+    left: 2rem;
+}
+
+.info_main {
+    background: no-repeat;
+
+    background-image: url("/static/images/overview/info_main.png");
+    // background-image: url("/static/images/overview/右侧附属信息.png");
+
+    display: inline-block;
+    width: 13rem;
+    height: 2.5rem;
+    background-size: 100%;
+    position: absolute;
+    left: 12rem;
 }
 
 #hysyEchart {

src/views/cockpitNew1/tdsc.vue

@@ -14,7 +14,15 @@
       <div class="info_main">
 
       </div>
-
+      <div class="text">
+        <span>收储项目</span>
+        <span class="count1">33</span>
+        <span class="unit">个</span>
+
+        <span>收储总面积</span>
+        <span class="count2">213124.45</span>
+        <span class="unit">公顷</span>
+      </div>
     </div>
     <div id="tdsc_echart">
 
@@ -476,8 +484,27 @@ export default {
   background: no-repeat;
   width: 100%;
   height: 44px;
-  // border: 1px solid red;
   position: relative;
+  // background-image: url("/static/images/overview/info_all.png");
+  // background-size: 98% 87%;
+
+  .text {
+    position: relative;
+    left: 3.5rem;
+    top: 0.5rem;
+    font-size: 15px;
+    font-weight: 600;
+
+    .unit{
+      margin-right: 3rem;
+    }
+    .count1 {
+      color: RGBA(250, 160, 18, 1);
+    }
+    .count2 {
+      color: RGBA(100, 218, 255, 1);
+    }
+  }
 }
 
 #tdsc_echart {
@@ -498,7 +525,9 @@ export default {
 .icon_info {
   background: no-repeat;
 
-  background-image: url("/static/images/overview/icon_info.png");
+  // background-image: url("/static/images/overview/icon_info.png");
+  background-image: url("/static/images/overview/icon信息.png");
+
   display: inline-block;
   width: 2rem;
   height: 3rem;
@@ -511,6 +540,8 @@ export default {
   background: no-repeat;
 
   background-image: url("/static/images/overview/info_left.png");
+  // background-image: url("/static/images/overview/左侧主信息.png");
+
   display: inline-block;
   width: 10rem;
   height: 2.5rem;
@@ -523,6 +554,8 @@ export default {
   background: no-repeat;
 
   background-image: url("/static/images/overview/info_main.png");
+  // background-image: url("/static/images/overview/右侧附属信息.png");
+
   display: inline-block;
   width: 13rem;
   height: 2.5rem;