Merge branch 'master' of http://git.izouma.com/xiongzhu/9th

src/main/pc-space/src/views/Casting.vue

@@ -12,7 +12,7 @@
                 {{ item }}
             </div>
         </div> -->
-        <el-radio-group v-model="sort" size="normal">
+        <el-radio-group class="menu" v-model="sortStr" size="normal">
             <el-radio-button v-for="(item, index) in sortList" :key="index" :label="item.value">
                 <div class="radio-item">
                     <i class="font_family" :class="[item.icon]"></i>
@@ -22,7 +22,13 @@
         </el-radio-group>
 
         <div class="border" style="margin-top: 30px"></div>
-        <el-input prefix-icon="el-icon-search" placeholder="请输入您想找到的作者名称…" v-model="search" clearable>
+        <el-input
+            class="search"
+            prefix-icon="el-icon-search"
+            placeholder="请输入您想找到的作者名称…"
+            v-model="search"
+            clearable
+        >
         </el-input>
         <div class="content">
             <img class="imgBox" src="../assets/img/888.jpg" alt="" />
@@ -47,6 +53,19 @@
                 <div class="follow">关注</div>
             </div>
         </div>
+
+        <div class="pagination-wrapper">
+            <el-pagination
+                @size-change="onSizeChange"
+                @current-change="onCurrentChange"
+                :current-page="page"
+                :page-sizes="[10, 20, 30, 40, 50]"
+                :page-size="pageSize"
+                layout="total, prev, pager, next"
+                :total="totalElements"
+            >
+            </el-pagination>
+        </div>
     </div>
 </template>
 <script>
@@ -77,6 +96,7 @@ export default {
                 }
             ],
             search: '',
+            sortStr: 'id,desc',
             url: '/user/all'
         };
     },
@@ -95,14 +115,14 @@ export default {
 .container {
     padding: 0 200px;
     background: #1a1a1a;
-    /deep/.el-input {
+    .search {
         background: #1a1a1a;
         width: 280px;
         height: 42px;
         border-radius: 8px;
         margin: 30px 0 50px;
 
-        .el-input__inner {
+        /deep/.el-input__inner {
             border: 1px solid #898989;
             background-color: transparent;
             color: #fff;
@@ -245,7 +265,7 @@ export default {
     }
 }
 
-/deep/.el-radio-group {
+/deep/.menu {
     .el-radio-button__inner {
         border-color: #949699;
         background-color: transparent;
@@ -281,4 +301,30 @@ export default {
         margin-right: 6px;
     }
 }
+
+.pagination-wrapper {
+    display: flex;
+    justify-content: center;
+    margin: 80px auto;
+
+    /deep/.el-pagination {
+        button:disabled {
+            background-color: transparent;
+            color: #939599;
+        }
+
+        .btn-next,
+        .btn-prev {
+            background: transparent;
+            color: #939599;
+        }
+        .el-pager li {
+            background-color: transparent;
+            color: #939599;
+            &.active {
+                color: @prim;
+            }
+        }
+    }
+}
 </style>