动态检测自适应

src/views/dynamic/index.vue

@@ -84,7 +84,7 @@ export default {
 .dataShow {
   float: left;
   width: 100%;
-  height: 675px;
+  height: 505px;
   overflow: hidden;
   margin: 0 0 30px 0;
 }
@@ -113,11 +113,11 @@ export default {
 .dataShow .dataShowInfo .left {
   float: left;
   width: 33%;
-  height: 670px;
+  height: 500px;
 }
 .dataShow .dataShowInfo .left .leftInfo {
   width: 93%;
-  height: 670px;
+  height: 500px;
   background: #fff;
   border: 1px transparent solid;
   border-radius: 10px;
@@ -157,12 +157,12 @@ export default {
 .dataShow .dataShowInfo .center {
   float: left;
   width: 33%;
-  height: 670px;
+  height: 500px;
   // border: 1px solid red;
 }
 .dataShow .dataShowInfo .center .centerInfo {
   width: 93%;
-  height: 670px;
+  height: 500px;
   background: #fff;
   border: 1px transparent solid;
   border-radius: 10px;
@@ -184,12 +184,12 @@ export default {
 .dataShow .dataShowInfo .right {
   float: left;
   width: 34%;
-  height: 670px;
+  height: 500px;
   // border: 1px solid red;
 }
 .dataShow .dataShowInfo .right .rightInfo {
   width: 93%;
-  height: 670px;
+  height: 500px;
   background: #fff;
   border: 1px transparent solid;
   border-radius: 10px;

src/views/dynamic/parts/map.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="maps">
-    <div id="chartMap" class="" style="width:100%;height:550px;margin:40px 0 0 0"></div>
+    <div id="chartMap" class="map"></div>
   </div>
 </template>
 
@@ -135,4 +135,11 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.map {
+  width: 100%;
+  height: 450px;
+  margin: 40px auto;
+  float: none;
+}
+</style>

src/views/dynamic/parts/userTwo copy.vue

@@ -0,0 +1,102 @@
+<template>
+  <div id="userTwo">
+    <el-row>
+      <el-col :span="24" class="userTwo">
+        <el-col :span="12" class="left">
+          <el-col :span="24" class="one">
+            <el-image style="width:166px;height:166px;" :src="dynamic1"></el-image>
+            <p>企业注册数量</p>
+            <p>{{ detail.num1 }}</p>
+          </el-col>
+          <el-col :span="24" class="one two">
+            <el-image style="width:166px;height:166px;" :src="dynamic2"></el-image>
+            <p>个人注册数量</p>
+            <p>{{ detail.num2 }}</p>
+          </el-col>
+        </el-col>
+        <el-col :span="12" class="left right">
+          <el-col :span="24" class="one">
+            <el-image style="width:166px;height:166px;" :src="dynamic3"></el-image>
+            <p>在线人数</p>
+            <p>{{ detail.num3 }}</p>
+          </el-col>
+          <el-col :span="24" class="one two">
+            <el-image style="width:166px;height:166px;" :src="dynamic4"></el-image>
+            <p>企业项目数量</p>
+            <p>{{ detail.num4 }}</p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'userTwo',
+  props: {},
+  components: {},
+  data: () => ({
+    dynamic1: require('@/assets/dynamic1.png'),
+    dynamic2: require('@/assets/dynamic2.png'),
+    dynamic3: require('@/assets/dynamic3.png'),
+    dynamic4: require('@/assets/dynamic4.png'),
+    detail: {
+      num1: 1,
+      num2: 2,
+      num3: 3,
+      num4: 4,
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.userTwo {
+  float: left;
+  width: 100%;
+}
+.userTwo .left {
+  width: 50%;
+}
+.userTwo .left .one {
+  float: left;
+  width: 212px;
+  height: 212px;
+  overflow: hidden;
+  border-radius: 10px;
+  box-shadow: 0 0 5px #ccc;
+  text-align: center;
+  padding: 20px 0;
+  position: relative;
+  margin: 40px 0 0 15px;
+}
+
+.userTwo .left .one p:nth-child(2) {
+  position: absolute;
+  top: 80px;
+  font-size: 14px;
+  color: #346da4;
+  font-weight: bold;
+  left: 60px;
+  text-align: center;
+  width: 86px;
+}
+.userTwo .left .one p:nth-child(3) {
+  position: absolute;
+  top: 110px;
+  left: 60px;
+  font-size: 14px;
+  color: #346da4;
+  font-weight: bold;
+  text-align: center;
+  width: 86px;
+}
+.userTwo .right {
+  width: 50%;
+  margin: 110px 0 0 0;
+}
+</style>

src/views/dynamic/parts/userTwo.vue

@@ -3,27 +3,31 @@
     <el-row>
       <el-col :span="24" class="userTwo">
         <el-col :span="12" class="left">
-          <el-col :span="24" class="one">
-            <el-image style="width:166px;height:166px;" :src="dynamic1"></el-image>
-            <p>企业注册数量</p>
-            <p>{{ detail.num1 }}</p>
+          <el-col class="box" :span="20">
+            <el-col :span="24" class="one">
+              <p>企业注册数量</p>
+              <p>{{ detail.num1 }}</p>
+            </el-col>
           </el-col>
-          <el-col :span="24" class="one two">
-            <el-image style="width:166px;height:166px;" :src="dynamic2"></el-image>
-            <p>个人注册数量</p>
-            <p>{{ detail.num2 }}</p>
+          <el-col class="box" :span="20">
+            <el-col :span="24" class="two one">
+              <p>个人注册数量</p>
+              <p>{{ detail.num2 }}</p>
+            </el-col>
           </el-col>
         </el-col>
-        <el-col :span="12" class="left right">
-          <el-col :span="24" class="one">
-            <el-image style="width:166px;height:166px;" :src="dynamic3"></el-image>
-            <p>在线人数</p>
-            <p>{{ detail.num3 }}</p>
+        <el-col :span="12" class="right">
+          <el-col class="box" :span="20" style="margin:70px 10px 10px 15px;">
+            <el-col :span="24" class="three one">
+              <p>在线人数</p>
+              <p>{{ detail.num3 }}</p>
+            </el-col>
           </el-col>
-          <el-col :span="24" class="one two">
-            <el-image style="width:166px;height:166px;" :src="dynamic4"></el-image>
-            <p>企业项目数量</p>
-            <p>{{ detail.num4 }}</p>
+          <el-col class="box" :span="20">
+            <el-col :span="24" class="four one">
+              <p>企业项目数量</p>
+              <p>{{ detail.num4 }}</p>
+            </el-col>
           </el-col>
         </el-col>
       </el-col>
@@ -59,44 +63,44 @@ export default {
   float: left;
   width: 100%;
 }
-.userTwo .left {
-  width: 50%;
-}
-.userTwo .left .one {
+.left {
   float: left;
-  width: 212px;
-  height: 212px;
+}
+.right {
+  float: right;
+}
+.box {
   overflow: hidden;
   border-radius: 10px;
   box-shadow: 0 0 5px #ccc;
-  text-align: center;
-  padding: 20px 0;
-  position: relative;
-  margin: 40px 0 0 15px;
+  margin: 20px 10px 10px 15px;
+  padding: 10px;
 }
-
-.userTwo .left .one p:nth-child(2) {
-  position: absolute;
-  top: 80px;
-  font-size: 14px;
-  color: #346da4;
-  font-weight: bold;
-  left: 60px;
-  text-align: center;
-  width: 86px;
+.one {
+  background: url(../../../assets/dynamic1.png) no-repeat;
+  background-size: 100% 100%;
+  height: 150px;
 }
-.userTwo .left .one p:nth-child(3) {
-  position: absolute;
-  top: 110px;
-  left: 60px;
-  font-size: 14px;
+.one p {
+  font-size: 22px;
   color: #346da4;
   font-weight: bold;
   text-align: center;
-  width: 86px;
 }
-.userTwo .right {
-  width: 50%;
-  margin: 110px 0 0 0;
+.one p:first-child {
+  padding: 60px 0 0 0;
+  font-size: 12px;
+}
+.two {
+  background: url(../../../assets/dynamic2.png) no-repeat;
+  background-size: 100% 100%;
+}
+.three {
+  background: url(../../../assets/dynamic3.png) no-repeat;
+  background-size: 100% 100%;
+}
+.four {
+  background: url(../../../assets/dynamic4.png) no-repeat;
+  background-size: 100% 100%;
 }
 </style>