improved problem list style

Signed-off-by: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>

Author: ZTL-UwU

src/assets/css/basic.css

@@ -191,6 +191,19 @@ h3::before {
     margin-top: 0;
 }
 
+.problem-list-pagination {
+    border: 1px solid #ebeef5;
+    background: #ffffff;
+    margin-left: -20px;
+    padding: 10px;
+    height: 36px;
+    max-width: 100vw;
+    width: 827px;
+    text-align: center;
+    bottom: 0px;
+    position: fixed;
+}
+
 * {
     border-radius: 0 !important;
 }

src/components/lib/AjaxTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ajax-table">
+  <div>
     <el-table
       v-loading="loading"
       :data="tableData"
@@ -16,14 +16,15 @@
         :sortable="item.sortable"
       />
     </el-table>
-    <el-pagination
-      :page-size="this.limit"
-      background
-      layout="prev, pager, next, jumper"
-      @current-change="this.onPageChange"
-      class="pagination"
-      :total="this.own_total"
-    />
+    <div :class="pagination_class + ' top-zindex'">
+      <el-pagination
+        :page-size="this.limit"
+        background
+        layout="prev, pager, next, jumper"
+        @current-change="this.onPageChange"
+        :total="this.own_total"
+      />
+    </div>
   </div>
 </template>
 
@@ -111,15 +112,16 @@ export default {
     default_sort: {
       type: Object,
       default: null
+    },
+    pagination_class: {
+      type: String,
+      default: 'pagination'
     }
   },
 };
 </script>
 
 <style scoped>
 .pagination {
-    height: 36px;
-    margin-top: 20px;
-    text-align: center;
 }
 </style>

src/components/lib/jumpToProblem.vue

@@ -1,13 +1,14 @@
 <template>
   <div>
     <el-card>
-      <i class="el-icon-s-promotion" />
-      Jump to
+      <div slot="header" class="clearfic">
+        <i class="el-icon-s-promotion" />
+        Jump to
+      </div>
       <el-input
         placeholder="PID"
         v-model="jumpToProblem"
-        class="input-with-select" 
-        style="margin-top: 9px;"
+        class="input-with-select"
       >
         <template slot="prepend">#.</template>
         <el-button slot="append" icon="el-icon-top-right" @click="jump"></el-button>

src/components/problem/list.vue

@@ -1,65 +1,52 @@
 <template>
   <div>
-    <el-row :gutter="20">
-      <el-col :span="10">
+    <el-row :gutter="20" style="margin-bottom: 30px">
+      <el-col :span="18">
+        <el-card v-if="alive">
+          <AjaxTable
+            :ajax_url="ajax_url"
+            :columns="columns"
+            :limit="limit"
+            :total="data_count"
+            :process="process"
+            :default_sort="{prop: 'pid', order: 'ascending'}"
+            :costumData="{title:title}"
+            pagination_class="problem-list-pagination"
+          />
+        </el-card>
+      </el-col>
+
+      <el-col :span="6">
         <el-card>
-          <i class="el-icon-search" />
-          Search
+          <div slot="header" class="clearfix">
+            <i class="el-icon-search" />
+            Search
+          </div>
           <el-input
             placeholder="Search"
             v-model="searchTitle"
-            class="input-with-select" 
-            style="margin-top: 9px;"
+            class="input-with-select"
             clearable
           >
           </el-input>
         </el-card>
-      </el-col>
-      <el-col :span="6">
-        <JumpToProblem />
-      </el-col>
-      <el-col :span="8">
-        <el-card>
-          <el-row :gutter="20">
-            <el-col :span="16">
-              <span>
-                <i class="el-icon-s-grid" />
-                Columns
-              </span>
-              <el-slider
-                v-model="limit"
-                :step="10"
-                :min="10"
-                style="margin-top: 10px;"
-              />
-            </el-col>
-            <el-col :span="8">
-              <div>
-                <i class="el-icon-collection-tag" />
-                Show Tags
-              </div>
-              <el-switch
-                v-model="showTags"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
-                style="margin-top: 18px;"
-              />
-            </el-col>
-          </el-row>
+        <JumpToProblem class="item" />
+        <el-card class="item">
+          <span>
+            <i class="el-icon-s-grid" />
+            Columns
+          </span>
+          <el-slider
+            v-model="limit"
+            :step="10"
+            :min="10"
+            style="margin-top: 10px;"
+          />
+          <el-divider />
+          <el-checkbox v-model="showTags"> Show Tags</el-checkbox>
         </el-card>
       </el-col>
     </el-row>
-    <el-card class="item" v-if="alive">
-      <AjaxTable
-        :ajax_url="ajax_url"
-        :columns="columns"
-        :limit="limit"
-        :total="data_count"
-        :process="process"
-        :default_sort="{prop: 'pid', order: 'ascending'}"
-        :costumData="{title:title}"
-      />
-    </el-card>
   </div>
 </template>