no message

src/views/Table/components/TianluEngin.vue

@@ -1,36 +1,83 @@
-  <template>
-	<!-- <div class="Chart">
-		  <img class="imga" src="@/assets/images/mid.png" alt="">
-	  </div> -->
- 	
- </template>
- 
- <script>
- 	export default {
- 		data() {
- 			return {
- 				option: {}
- 			}
- 		},
- 		created() {
-			
-		},
- 		mounted() {
- 			
- 		},
- 		methods: {
- 
- 		},
- 
- 	}
- </script>
- 
- <style>
-	.imga{
-		margin:10rem ;
-		width: 150rem;
-		height: 200px;
+<template>
+  	<div class="Chart">
+  		<img class="imga" src="@/assets/images/mid.png" >
+  	</div>
+	<div class="text">
+		<div class="left">
+			<div class="leftTop">15.7亩</div>
+			<div class="leftMid">灌溉面积</div>
+			<div class="leftTop">180个</div>
+			<div class="leftMid">灌溉井数</div>
+			<div class="leftTop">15.4km</div>
+			<div class="leftMid">灌溉管网</div>
+		</div>
+		<div class="right">
+			<div class="leftTop">280个</div>
+			<div class="leftMid">覆盖地块</div>
+			<div class="leftTop">83条</div>
+			<div class="leftMid">灌溉水渠</div>
+			<div class="leftTop">8.9km</div>
+			<div class="leftMid">排水管网</div>
+		</div>
+	
+	</div>
+
+  </template>
+
+  <script>
+  	export default {
+  		data() {
+  			return {
+  				option: {}
+  			}
+  		},
+  		created() {
+
+  		},
+  		mounted() {
+
+  		},
+  		methods: {
+
+  		},
+
+  	}
+  </script>
+
+  <style>
+
+  	.imga {
+		margin-left:-200rem ;
+  		width: 150rem;
+  		height: 200px;
+		display: inline-block;
+		float:left
+  	}
+	.text {
+		margin-top: 10rem;
+		height: 170rem;
+		width: 165rem;
+	
+		display: inline-block;
+	}
+	
+	.left {
+		float: left;
+	
 	}
 	
- </style>
- 
+	.leftTop {
+		margin-top: 10rem;
+		color: rgb(200, 250, 255);
+		font-size: 24rem;
+		font-weight: bold;
+	}
+	
+	.leftMid {
+		color: rgb(200, 250, 255);
+	}
+	
+	.right {
+		float: right;
+	}
+  </style>