调整页面样式

src/views/mining/systemData.vue

@@ -1,127 +1,127 @@
 <template>
-	<div>
-		<div v-if="this.$router.currentRoute.path=='/coal_mining'">
-			<el-breadcrumb separator-class="el-icon-arrow-right">
-				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-				<el-breadcrumb-item :to="{ path: '/coal_mining'}">采煤工作面</el-breadcrumb-item>
-				<el-breadcrumb-item>系统数据</el-breadcrumb-item>
-			</el-breadcrumb>
-		</div>
-
-		<div class="top">
-			<el-button type="primary" @click="coalcutter">采煤机</el-button>
-		</div>
-		<!-- 第一行 -->
-		<el-row :gutter="20">
-      <!-- 1-1 采煤工作面设备摘要 -->
-			<el-col :span="8">
-				<div class="grid-content ">
-					<el-card style="width: 330px;">
-						<div class="text">采煤机工作面设备摘要</div>
-						<el-divider class="divi"></el-divider>
-						<el-row :gutter="20">
-							<el-col :span="12">
-								<div style="border-right: 1px solid #9d9aab; width: 140px; ">
-									<span style="font-size: 30px;font-weight:normal;">{{coal_abstract.num}}</span>
-									</br>
-									<span style="font-size: 20px;">{{coal_abstract.name}}</span>
-								</div>
-							</el-col>
-							<el-col :span="12">
-								<div v-for="item in options"  style="justify-content:space-evenly;">
-									<span style="font-size: 14px; ">{{item.name}}</span>
-									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-									<span style="font-size: 14px;">{{item.num}}</span>
-								</div>
-							</el-col>
-						</el-row>
-					</el-card>
-		
-				</div>
-			</el-col>
-      <!-- 1-2 液压支架压力 折线图 -->
-			<el-col :span="8">
-				<div class="grid-content ">
-          <el-card style="width: 330px;">
-            <pressure></pressure>
-          
-        </el-card>
-				</div>
-			</el-col>
-      <!-- 1-3 健康状态 -->
-			<el-col :span="8">
-				<div class="grid-content">
-					<el-card style="width: 330px;">
-            <div class="text">健康状态</div>
-            <el-divider class="divi_small"></el-divider>
-             <img style="margin-left:110px;" src="@/assets/img/warn.png" alt="warn">
-             <el-divider class="divi_small"></el-divider>
-        <div style="display:flex;justify-content: space-around;">
-            <span style="font-size: small;">牵引</span>
-             <img style="margin-left:110px;" src="@/assets/img/u1371.png" alt="u1371">
-        </div>
-        <el-divider class="divi_small"></el-divider>
-        <div style="display:flex;justify-content: space-around;">
-            <span style="font-size: small;">摇臂</span>
-             <img style="margin-left:110px;" src="@/assets/img/u1371.png" alt="u1373">
-        </div>
-        <el-divider class="divi_small"></el-divider>
-        <div style="display:flex;justify-content: space-around;">
-            <span style="font-size: small;">主泵</span>
-             <img style="margin-left:110px;" src="@/assets/img/u1371.png" alt="u1371">
-        </div>
-             
-        </el-card>
-				</div>
-			</el-col>
-		</el-row>
-    <!-- 第二行 -->
-    <el-row :gutter="20">
-      <!-- 2-1  瓦斯浓度  折线图 -->
-			<el-col :span="8">
-				<div class="grid-content ">
-					<el-card style="width: 330px;">
-						<gas_concentration></gas_concentration>
-					</el-card>
-		
-				</div>
-			</el-col>
-      <!-- 2-2 浮尘浓度 折线图 -->
-			<el-col :span="8">
-				<div class="grid-content ">
-          <el-card style="width: 330px;">
-            <dust_concentration></dust_concentration>
-        </el-card>
-				</div>
-			</el-col>
-      <!-- 2-3 警报信息  -->
-			<el-col :span="8">
-				<div class="grid-content">
-          <el-card style="width: 330px;">
-            <div class="text">警报信息</div>
-            <el-divider class="divi_small"></el-divider>
-            <img style="margin-left:110px;" src="@/assets/img/u1399.png" alt="u1399">
-            <el-divider class="divi_small"></el-divider>
-            <div style="display:flex;justify-content: space-around;">
+  <el-container>
+    <el-header>
+      <div v-if="this.$router.currentRoute.path=='/coal_mining'">
+        <el-breadcrumb separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ path: '/coal_mining'}">采煤工作面</el-breadcrumb-item>
+          <el-breadcrumb-item>系统数据</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+    </el-header>
+
+    <el-main>
+      <div class="top">
+        <el-button type="primary" @click="coalcutter">采煤机</el-button>
+      </div>
+
+      <el-row :gutter="20">
+        <!-- 1-1 采煤工作面设备摘要 -->
+        <el-col :span="8">
+          <div class="grid-content ">
+            <el-card style="width: 330px;">
+              <div class="text">采煤机工作面设备摘要</div>
+              <el-divider class="divi"></el-divider>
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <div style="border-right: 1px solid #9d9aab; width: 140px; ">
+                    <span style="font-size: 30px;font-weight:normal;">{{coal_abstract.num}}</span>
+                    <br>
+                    <span style="font-size: 20px;">{{coal_abstract.name}}</span>
+                  </div>
+                </el-col>
+                <el-col :span="12">
+                  <div v-for="item in options"  style="justify-content:space-evenly;">
+                    <span style="font-size: 14px; ">{{item.name}}</span>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    <span style="font-size: 14px;">{{item.num}}</span>
+                  </div>
+                </el-col>
+              </el-row>
+            </el-card>
+
+          </div>
+        </el-col>
+        <!-- 1-2 液压支架压力 折线图 -->
+        <el-col :span="8">
+          <div class="grid-content ">
+            <el-card style="width: 330px;">
+              <pressure></pressure>
+
+            </el-card>
+          </div>
+        </el-col>
+        <!-- 1-3 健康状态 -->
+        <el-col :span="8">
+          <div class="grid-content">
+            <el-card style="width: 330px;">
+              <div class="text">健康状态</div>
+              <el-divider class="divi_small"></el-divider>
+              <img style="margin-left:110px;" src="@/assets/img/warn.png" alt="warn">
+              <el-divider class="divi_small"></el-divider>
+              <div style="display:flex;justify-content: space-around;">
+                <span style="font-size: small;">牵引</span>
+                <img style="margin-left:110px;" src="@/assets/img/u1371.png" alt="u1371">
+              </div>
+              <el-divider class="divi_small"></el-divider>
+              <div style="display:flex;justify-content: space-around;">
+                <span style="font-size: small;">摇臂</span>
+                <img style="margin-left:110px;" src="@/assets/img/u1371.png" alt="u1373">
+              </div>
+              <el-divider class="divi_small"></el-divider>
+              <div style="display:flex;justify-content: space-around;">
+                <span style="font-size: small;">主泵</span>
+                <img style="margin-left:110px;" src="@/assets/img/u1371.png" alt="u1371">
+              </div>
+
+            </el-card>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第二行 -->
+      <el-row :gutter="20">
+        <!-- 2-1  瓦斯浓度  折线图 -->
+        <el-col :span="8">
+          <div class="grid-content ">
+            <el-card style="width: 330px;">
+              <gas_concentration></gas_concentration>
+            </el-card>
+
+          </div>
+        </el-col>
+        <!-- 2-2 浮尘浓度 折线图 -->
+        <el-col :span="8">
+          <div class="grid-content ">
+            <el-card style="width: 330px;">
+              <dust_concentration></dust_concentration>
+            </el-card>
+          </div>
+        </el-col>
+        <!-- 2-3 警报信息  -->
+        <el-col :span="8">
+          <div class="grid-content">
+            <el-card style="width: 330px;">
+              <div class="text">警报信息</div>
+              <el-divider class="divi_small"></el-divider>
+              <img style="margin-left:110px;" src="@/assets/img/u1399.png" alt="u1399">
+              <el-divider class="divi_small"></el-divider>
+              <div style="display:flex;justify-content: space-around;">
                 <span style="font-size: small;">牵引</span>
                 <span style="font-size: small;">2021.1.20 12:25 &nbsp;&nbsp;&nbsp;重启</span>
-            </div>
-            <el-divider class="divi_small"></el-divider>
-            <div style="display:flex;justify-content: space-around;">
+              </div>
+              <el-divider class="divi_small"></el-divider>
+              <div style="display:flex;justify-content: space-around;">
                 <span style="font-size: small;">主泵</span>
                 <span style="font-size: small;">2021.1.19 17:56 &nbsp;&nbsp;&nbsp;关机</span>
-            </div>
-
-        </el-card>
-				</div>
-			</el-col>
-		</el-row>
-		
-		
-	
-	</div>
-
-	
+              </div>
+
+            </el-card>
+          </div>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
 </template>
 
 
@@ -180,7 +180,7 @@
         /* border: 1px solid rgb(139, 136, 136); */
         height: 185px;
     }
-    
+
     .el-card {
         background: #FFFFFF;
         border-radius: 8px;
@@ -190,7 +190,7 @@
         margin-left: 5px;
         box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
     }
-    
+
     .divi {
         display: block;
         height: 1px;
@@ -200,7 +200,7 @@
         position: relative;
         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     }
-    
+
     .divi_small {
         display: block;
         height: 1px;
@@ -210,4 +210,4 @@
         position: relative;
         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     }
-</style>
+</style>