...

src/modules/marking/views/MarkWorkOverview.vue

@@ -1,81 +1,81 @@
 <template>
-  <div>
-    <section class="content content-header">
-      <div class="box box-info">
-        <div class="box-body">
-          <div>
-            <el-form
-              :inline="true"
-              :model="markWorkSearchForm"
-              label-position="right"
-              label-width="70px"
-            >
-              <el-row>
-                <el-col :span="24">
-                  <el-form-item label="评卷名称" class="pull-left">
-                    <el-select
-                      clearable
-                      filterable
-                      class="input"
-                      v-model="markWorkSearchForm.markId"
-                      placeholder="请选择"
-                      @change="searchMarkWork"
-                      @clear="cleanMarkWork"
-                    >
-                      <el-option
-                        v-for="item in markWorkSelect"
-                        :label="item.markName"
-                        :value="item.markId"
-                        :key="item.markId"
-                      ></el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            </el-form>
-          </div>
-          <div class="echarts echarts-div">
-            <div class="pie"><v-charts :options="pie"></v-charts></div>
-            <div class="pie"><v-charts :options="pie1"></v-charts></div>
-          </div>
-
+  <el-container>
+    <el-main class="el-main-padding">
+      <el-row>
+        <el-col :span="24">
+          <el-form
+            :inline="true"
+            :model="markWorkSearchForm"
+            label-position="right"
+            label-width="70px"
+          >
+            <el-form-item label="评卷名称" class="pull-left">
+              <el-select
+                clearable
+                filterable
+                class="input"
+                v-model="markWorkSearchForm.markId"
+                placeholder="请选择"
+                @change="searchMarkWork"
+                @clear="cleanMarkWork"
+              >
+                <el-option
+                  v-for="item in markWorkSelect"
+                  :label="item.markName"
+                  :value="item.markId"
+                  :key="item.markId"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+      <el-row :gutter="2">
+        <el-col :span="12" class="chart-border">
+          <div class="pie"><v-charts :options="pie"></v-charts></div>
+        </el-col>
+        <el-col :span="12" class="chart-border">
+          <div class="pie"><v-charts :options="pie1"></v-charts></div>
+        </el-col>
+      </el-row>
+      <el-row class="row-div">
+        <el-col :span="24">
           <el-form
             :inline="true"
             :model="formSearch"
             label-position="right"
             label-width="40px"
           >
-            <el-row>
-              <el-col :span="24">
-                <el-form-item label="课程" class="pull-left">
-                  <el-select
-                    clearable
-                    filterable
-                    class="input"
-                    v-model="formSearch.courseCode"
-                    placeholder="请选择"
-                  >
-                    <el-option
-                      v-for="item in courseAllListSelect"
-                      :label="item.courseInfo"
-                      :value="item.code"
-                      :key="item.code"
-                    ></el-option>
-                  </el-select>
-                </el-form-item>
-                <el-form-item>
-                  <el-button
-                    size="small"
-                    type="primary"
-                    icon="el-icon-search"
-                    @click="searchBtnFn"
-                    >查询</el-button
-                  >
-                </el-form-item>
-              </el-col>
-            </el-row>
+            <el-form-item label="课程" class="pull-left">
+              <el-select
+                clearable
+                filterable
+                class="input"
+                v-model="formSearch.courseCode"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in courseAllListSelect"
+                  :label="item.courseInfo"
+                  :value="item.code"
+                  :key="item.code"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                size="small"
+                type="primary"
+                icon="el-icon-search"
+                @click="searchBtnFn"
+                >查询</el-button
+              >
+            </el-form-item>
           </el-form>
-          <!-- 页面列表 -->
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
           <el-table
             stripe
             v-loading="loading"
@@ -131,22 +131,10 @@
               </template>
             </el-table-column>
           </el-table>
-          <div class="page pull-right">
-            <el-pagination
-              v-if="paginationShow"
-              @current-change="handleSettingCurrentChange"
-              @size-change="handleSizeChange"
-              :current-page="currentPage"
-              :page-size="pageSize"
-              :page-sizes="[10, 20, 50, 100]"
-              layout="total, sizes, prev, pager, next, jumper"
-              :total="total"
-            ></el-pagination>
-          </div>
-        </div>
-      </div>
-    </section>
-  </div>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
@@ -620,9 +608,6 @@ export default {
 };
 </script>
 <style lang="css" scoped>
-.content{
-  overflow-x: hidden;
-}
 li {
     list-style-type: none;
 }
@@ -643,18 +628,26 @@ li {
     background:#FFF;
     font-size: small;
 }
-.echarts {
-    display: flex;
-}
 .pie{
-    height: 350px;
-    width: 500px;
+    height: 400px;
     margin-top: 10px;
     margin-left: 10px
 }
 .echarts-div{
-  border:1px solid #CCC;
+  margin-left: 10px;
+  width: auto;
+}rts-div{
+  margin-left: 10px;
   width: auto;
-  margin-bottom: 10px;
+}
+.chart-border {
+  border: 1px solid #ddd;
+}
+.el-main-padding{
+  padding-top: 0px;
+  padding-left: 5px;
+}
+.row-div{
+  margin-top: 10px;
 }
 </style>