no message

src/views/Table/components/BasicInfor.vue

@@ -1,20 +1,109 @@
 <template>
-	<div class="Background"></div>
-	<div class="Text">
-		
+
+	<div class="Background">
+		<p>
+			系统建设应坚持“先进、可靠、实用、落地”的原则，实行“整体规划、分步实施；统一标准、加强管理；先进实用、政策落地”的建设方针。
+		</p>
+	</div>
+
+	<div class="leftTitle">
+		<div class='topIcon'>
+			<div class="fontInfo">20.4</div>
+			<div class="font">本年规划(亩)</div>
+		</div>
+		<div class='bottomIcon'>
+			<div class="fontInfo">100</div>
+			<div class="font">地块数量(块)</div>
+		</div>
+
+	</div>
+	<div class="rightTitle">
+		<div class='topRightIcon'>
+			<div class="fontInfo">121.94</div>
+			<div class="font">已完成(亩)</div>
+		</div>
+		<div class='bottomRightIcon'>
+			<div class="fontInfo">112.92</div>
+			<div class="font">累计面积(亩)</div>
+		</div>
+
 	</div>
 </template>
 
 <script>
 </script>
 <style>
- .Background{
-	 
-	 margin-top: 10rem;
-	 margin-left:5rem ;
-	 height: 120rem;
-	 width: 120rem;
-	 background: url('@/assets/images/base.png') ;
-	 border: 1px solid #53b8ff;
- }
-</style>
+	.Background {
+		margin-top: 10rem;
+		margin-left: 5rem;
+		font-size: 14rem;
+		height: 100rem;
+		width: 345rem;
+		background: url('@/assets/images/basic.png') no-repeat;
+
+	}
+
+	.Background p {
+		margin-top: 0rem;
+		text-indent: 30rem;
+		margin-left: 150rem;
+		display: inline-block;
+		text-align: left;
+	}
+
+	.leftTitle {
+		float: left;
+		width: 200rem;
+		display: inline-block
+	}
+
+	.topIcon {
+		margin-top: 15rem;
+		margin-left: 10rem;
+		height: 44rem;
+		width: 130rem;
+		background: url('@/assets/images/icon.png') no-repeat;
+	}
+
+	.bottomIcon {
+		margin-left: 10rem;
+		margin-top: 15rem;
+		height: 44rem;
+		width: 130rem;
+		background: url('@/assets/images/bottom.png') no-repeat;
+	}
+
+	.topRightIcon {
+		margin-right: 10rem;
+		margin-top: 15rem;
+		height: 44rem;
+		width: 130rem;
+		background: url('@/assets/images/rightTop.png') no-repeat;
+	}
+
+	.bottomRightIcon {
+		margin-right: 10rem;
+		margin-top: 15rem;
+		height: 44rem;
+		width: 130rem;
+		background: url('@/assets/images/rightBottom.png') no-repeat;
+	}
+
+	.rightTitle {
+		float: right;
+		display: inline-block
+	}
+
+	.fontInfo {
+		font-size: 24rem;
+		color: rgb(200, 250, 255);
+		margin-left: 50rem;
+
+	}
+
+	.font {
+		font-size: 14rem;
+		color: rgb(200, 250, 255);
+		margin-left: 50rem;
+	}
+</style>

src/views/Table/components/WaterLevelChart.vue

@@ -1,9 +1,25 @@
   <template>
  	<div style="display: inline-block;float:left">
- 		<jt-echarts style="width: 166rem;height: 166rem;margin:10rem" :chartData="option"></jt-echarts>
+ 		<jt-echarts style="width: 166rem;height: 166rem;margin-top:25rem" :chartData="option"></jt-echarts>
  	</div>
 	<div class="text">
-		123123
+		<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>
  
@@ -34,8 +50,8 @@
  					series: [{
  						name: '睡了',
  						type: 'liquidFill',
- 						radius: '160rem',
- 						data: [0.6],
+ 						radius: '150rem',
+ 						data: [0.80],
  						label: {
  							normal: {
  								color: '#27e5f1',
@@ -82,10 +98,27 @@
  
  <style>
 	 .text{
-		 height:160rem;
-		 width:160rem;
-		 background-color: red;
+		 margin-top: 10rem;
+		 height:170rem;
+		 width:165rem;
+		 
 		 display: inline-block;
 	 }
+	 .left{
+		 float: left;
+
+	 }
+	 .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>