diff --git a/src/views/dataService/remoteSensingData/index.vue b/src/views/dataService/remoteSensingData/index.vue
index 664548f..b85207e 100644
--- a/src/views/dataService/remoteSensingData/index.vue
+++ b/src/views/dataService/remoteSensingData/index.vue
@@ -4,94 +4,125 @@
              @tab-click="handleClick">
       <el-tab-pane label="Search condition"
                    name="first">
+        <el-row>
+          <el-col :span="8">
+            <div class="rsSelect">
+              <el-card class="box-card">
+                <span>Select time range</span>
+                <el-row class="block">
+                  <el-col :span="5">
+                    <span class="demonstration">Start time</span>
+                  </el-col>
+                  <el-col :span="19">
+                    <el-date-picker style="width: 90%;"
+                                    v-model="state.startTime"
+                                    type="datetime"
+                                    placeholder="Select start time"
+                                    :shortcuts="shortcuts" />
+                  </el-col>
+                </el-row>
+                <el-row class="block">
+                  <el-col :span="5">
+                    <span class="demonstration">End time</span>
+                  </el-col>
+                  <el-col :span="19">
+                    <el-date-picker style="width: 90%;"
+                                    v-model="state.endTime"
+                                    type="datetime"
+                                    placeholder="Select end time"
+                                    :shortcuts="shortcuts" />
+                  </el-col>
+                </el-row>
+              </el-card>
 
-        <div class="rsSelect">
-          <el-card class="box-card">
-            <span>Select time range</span>
-            <div class="block">
-              <span class="demonstration">Start time</span>
-              <el-date-picker style="width: 70%;"
-                              v-model="state.startTime"
-                              type="datetime"
-                              placeholder="Select start time"
-                              :shortcuts="shortcuts" />
-            </div>
-
-            <div class="block">
-              <span class="demonstration">End time</span>
-              <el-date-picker style="width: 70%;"
-                              v-model="state.endTime"
-                              type="datetime"
-                              placeholder="Select end time"
-                              :shortcuts="shortcuts" />
-            </div>
-          </el-card>
-
-          <el-card class="box-card"
-                   style="margin-top: 3%;">
-            <span>Select a region</span>
-            <el-scrollbar wrap-class="list"
-                          view-class="view-box"
-                          :native="false">
-              <div class="coordinateContainer"
-                   v-for="(coordinate,i) in state.coordinateList">
-                <span style="font-size:14px;float: left;width: 70%;">{{
+              <el-card class="box-card"
+                       style="margin-top: 3%;">
+                <span>Select a region</span>
+                <el-scrollbar wrap-class="list"
+                              view-class="view-box"
+                              :native="false">
+                  <div v-for="(coordinate,i) in state.coordinateList">
+                    <el-row class="coordinateContainer">
+                      <el-col :span="1"></el-col>
+                      <el-col :span="19">
+                        <span style="font-size:14px;width: 100%;">{{
                       'Lat:&emsp;' + parseFloat(coordinate.Lat).toFixed(4) + ',&emsp;&emsp;Lng:&emsp;' + parseFloat(coordinate.Lng).toFixed(4)
                       }}</span>
-                <span style="width:20%;margin-left: 80%;">
-                  <el-button class="el-icon"
-                             @click="editCoordinate"
-                             size="small">
-                    <ele-Edit />
-                  </el-button>
-                  <el-button class="el-icon"
-                             @click="state.coordinateList.splice(i, 1);"
-                             size="small">
-                    <ele-Delete />
-                  </el-button>
-                </span>
+                      </el-col>
+                      <el-col :span="2">
+                        <el-button class="el-icon"
+                                   @click="editCoordinate"
+                                   size="small">
+                          <ele-Edit />
+                        </el-button>
+                      </el-col>
+                      <el-col :span="2">
+                        <el-button class="el-icon"
+                                   @click="state.coordinateList.splice(i, 1);"
+                                   size="small">
+                          <ele-Delete />
+                        </el-button>
+                      </el-col>
+                    </el-row>
+                  </div>
+                </el-scrollbar>
+                <el-row>
+                  <el-col :span="1"></el-col>
+                  <el-col :span="7">
+                    <el-button class="coordinateBtn"
+                               @click="addCoordinate">Add coordinates</el-button>
+                  </el-col>
+                  <el-col :span="7">
+                    <el-button class="coordinateBtn"
+                               @click="clearCoordinate">Clear coordinates</el-button>
+                  </el-col>
+                </el-row>
 
-              </div>
-            </el-scrollbar>
-            <el-button class="coordinateBtn"
-                       @click="addCoordinate">Add coordinates</el-button>
-            <el-button class="coordinateBtn"
-                       @click="clearCoordinate">Clear coordinates</el-button>
-          </el-card>
+              </el-card>
 
-          <el-card class="box-card"
-                   style="margin-top: 3%;">
-            <span>Select satellite type</span>
-            <el-tree-select class="satelliteSelect"
-                            v-model="state.satelliteSelected"
-                            :data="sensor"
-                            multiple
-                            :render-after-expand="false"
-                            show-checkbox
-                            placeholder="Select satellite type" />
-          </el-card>
+              <el-card class="box-card"
+                       style="margin-top: 3%;">
+                <span>Select satellite type</span>
+                <el-tree-select class="satelliteSelect"
+                                v-model="state.satelliteSelected"
+                                :data="sensor"
+                                multiple
+                                :render-after-expand="false"
+                                show-checkbox
+                                placeholder="Select satellite type" />
+              </el-card>
 
-          <el-card class="box-card"
-                   style="margin-top: 3%;">
-            <span>Select VoRDM ID</span>
-            <el-select class="idSelect"
-                       v-model="state.selectID"
-                       clearable
-                       placeholder="Select VoRDM ID">
-              <el-option v-for="item in idOptions"
-                         :key="item.value"
-                         :label="item.label"
-                         :value="item.value" />
-            </el-select>
-          </el-card>
+              <el-card class="box-card"
+                       style="margin-top: 3%;">
+                <span>Select VoRDM ID</span>
+                <el-select class="idSelect"
+                           v-model="state.selectID"
+                           clearable
+                           placeholder="Select VoRDM ID">
+                  <el-option v-for="item in idOptions"
+                             :key="item.value"
+                             :label="item.label"
+                             :value="item.value" />
+                </el-select>
+              </el-card>
+              <el-row>
+                <el-col :span="1"></el-col>
+                <el-col :span="6">
+                  <el-button class="lowerBtn"
+                             @click="startCrawl">Start Crawl</el-button>
+                </el-col>
+                <el-col :span="6">
+                  <el-button class="lowerBtn"
+                             @click="ClearCondition">Cancel</el-button>
+                </el-col>
+              </el-row>
+            </div>
+          </el-col>
+          <el-col :span="16">
+            <Map id="map"></Map>
+          </el-col>
 
-          <el-button class="lowerBtn"
-                     @click="startCrawl">Start Crawl</el-button>
-          <el-button class="lowerBtn"
-                     @click="ClearCondition">Cancel</el-button>
-        </div>
-
-        <Map id="map"></Map>
+        </el-row>
 
       </el-tab-pane>
 
@@ -553,9 +584,7 @@ const ClearCondition = () => {
 .container {
 	padding: 1% 1%;
 	.rsSelect {
-		float: left;
 		border: 1px solid #040728;
-		width: 30%;
 		height: 52rem;
 		span {
 			display: block;
@@ -570,29 +599,27 @@ const ClearCondition = () => {
 
 		.block {
 			margin-top: 2%;
-			.demonstration {
-				font-size: 14px;
-				float: left;
-				height: 20px;
-				line-height: 40px;
-				margin: 0 3%;
-				width: 20%;
-			}
+		}
+		.demonstration {
+			font-size: 14px;
+			float: left;
+			height: 20px;
+			line-height: 40px;
 		}
 		.coordinateContainer {
 			margin: 3%;
+			height: 15px;
 		}
 		.coordinateBtn {
-			margin-left: 3%;
+			width: 90%;
 		}
 		.lowerBtn {
-			margin: 3% 0 3% 3%;
+			width: 90%;
+			margin: 3% 0;
 		}
 	}
 	#map {
-		width: 70%;
 		height: 52rem;
-		float: left;
 	}
 }
 </style>
\ No newline at end of file