样式调整

src/views/cockpit/common/DialWatch.vue

@@ -288,6 +288,14 @@ export default {
 };
 </script>
 <style lang="scss"  scoped>
+.space {
+    width: 27rem;
+    height: 11rem;
+    position: relative;
+    top: -2rem;
+    z-index: -1;
+}
+
 #content_dial_watch {
     #dial_watch_scjg {
         // border: 1px red solid;

src/views/cockpit/hysy.vue

@@ -333,9 +333,9 @@ export default {
 
 <style lang="scss"  scoped>
 .hysy {
+    display: none;
     position: relative;
-    left: 62rem;
-    top: 43rem;
+    top: 14rem;
     width: 430px;
     height: 310px;
     z-index: 100;

src/views/cockpit/kjgh.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="jsyd">
-    <div class="title">
-      <div class="icon"></div>
-      <span>空间规划指标</span>
-    </div>
+    <Title :title="'空间规划指标'"></Title>
+
     <div class="content">
       <div class="item">
         <div class="icon">
@@ -55,36 +53,6 @@
 
         </div>
       </div>
-
-      <!-- <div class="item">
-        <div class="icon">
-          <div class="icon_yrk">
-
-          </div>
-        </div>
-        <div class="text">
-          <p>己入库控规范围
-
-          </p>
-          <span>{{ store.state.cockpit_gkzb.ghdkmj }}</span>k㎡
-
-        </div>
-      </div>
-
-      <div class="item">
-        <div class="icon">
-          <div class="icon_fgczkfbj">
-
-          </div>
-        </div>
-        <div class="text">
-          <p>覆盖城镇开发边界
-
-          </p>
-          <span>{{ store.state.cockpit_gkzb.bfb }}</span>%
-
-        </div>
-      </div> -->
       <div class="box_bottom"></div>
       <div class="box_text">
         <div class="text box_bottom_text">
@@ -109,9 +77,10 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 import { cockpitInfo } from '@/api/cockpit'
+import Title from './common/Title.vue';
 
 export default {
-  components: {},
+  components: { Title },
   data() {
     return {
       yjjbntmj: 0,
@@ -185,11 +154,10 @@ export default {
 };
 </script>
 <style  lang="scss"  scoped>
-
 .jsyd {
   position: fixed;
-  left: vh(20);
-  top: 16.5rem;
+  left: 1rem;
+  top: 15rem;
   z-index: 1;
   width: 416px;
   height: 221px;
@@ -202,28 +170,6 @@ export default {
 
 }
 
-.title {
-  border-width: 0px;
-  width: 100%;
-  height: 40px;
-  // font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-  // font-weight: 700;
-  // font-style: normal;
-  // color: #fff;
-  // padding: 2%;
-  background: no-repeat;
-  background-image: url("/static/images/overview/titlebox.gif");
-
-  span {
-    color: #fff;
-    font-size: 14px;
-    font-weight: bold;
-    position: relative;
-    bottom: 1.8rem;
-    right: 1rem;
-  }
-}
-
 .content {
   position: absolute;
   left: 1%;
@@ -273,7 +219,7 @@ export default {
 
 .box_text {
   width: 23.4375vw;
-  margin-left: 3vw;
+  margin-left: 4.5rem;
 
   p {
     font-size: 12px;

src/views/cockpit/tdsc.vue

@@ -1,22 +1,19 @@
 <template>
   <div class="tdsc">
-    <div class="title">
-      <div class="icon"></div>
-      <span>土地收储</span>
-      <div class="selectTab">
-        <el-select v-model="tab" placeholder="请选择" :popper-append-to-body="false" @change="change_model">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-          </el-option>
-        </el-select>
-      </div>
-    </div>
+    <Title :title="'土地收储'"></Title>
 
 
+    <div class="selectTab">
+      <el-select v-model="tab" placeholder="请选择" :popper-append-to-body="false" @change="change_model">
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+        </el-option>
+      </el-select>
+    </div>
     <div v-show="tab == options[1].value">
-      <BarGraph3D ref="tdsc_bar_graph" />
+      <BarGraph3D ref="tdsc_bar_graph"  />
     </div>
     <div v-show="tab == options[0].value">
-      <DialWatch :dial_watch_info="dial_watch_info" ref="tdsc_scjd" />
+      <DialWatch :dial_watch_info="dial_watch_info" ref="tdsc_scjd" class="tdsc_scjd" />
     </div>
   </div>
 </template>
@@ -26,9 +23,10 @@
 import { QueryOne, QueryList } from '@/api/cockpitNew'
 import BarGraph3D from './common/BarGraph3D.vue';
 import DialWatch from './common/DialWatch.vue';
+import Title from './common/Title.vue';
 
 export default {
-  components: { BarGraph3D, DialWatch },
+  components: { BarGraph3D, DialWatch, Title },
   data() {
     return {
       tab: 'scjd',
@@ -149,9 +147,9 @@ export default {
 </script>
 <style  lang="scss"  scoped>
 .tdsc {
-  position: absolute;
+  position: relative;
   left: 1rem;
-  top: 27.5rem;
+  top: 24.5rem;
   width: 416px;
   height: 221px;
   background: inherit;
@@ -190,8 +188,8 @@ export default {
 
 .selectTab {
   position: absolute;
-  right: 4px;
-  bottom: 9px;
+  right: 1rem;
+  bottom: 12rem;
 
   /deep/ .el-input__inner {
     // padding-right: 30px;
@@ -265,4 +263,7 @@ export default {
   width: 26rem;
   height: 10rem;
 }
+.tdsc_scjd{
+  color: #163253;
+}
 </style>