生涯故事 mycos 咨讯 和分頁

src/components/Pagination/index.vue

@@ -115,6 +115,8 @@
     .pagination-container {
         background: #f4f4f4;
         color: #64748b;
+        width:100%;
+        height: 40px;
     }
 
     .pagination-container.hidden {
@@ -127,6 +129,7 @@
     ::v-deep .el-pager li {
         background-color: #f4f4f4; /* 替换为你想要的背景色 */
         color : #64748b;
+        font-size: 30px;
     }
 
     ::v-deep .el-pagination.is-background .btn-next .is-active,

src/views/xjc-integratedmachine/components/xjc_pagination.vue

@@ -1,13 +1,11 @@
 <template>
-    <div style="width: 100%;height: 100px;">
+    <div class="fenye">
         <pagination v-show="pageProps.total" :total="pageProps.total" v-model:page="pageProps.pageNum"
                     v-model:limit="pageProps.pageSize" @pagination="changePage"/>
     </div>
-
 </template>
 
 <script setup>
-    import {defineExpose} from 'vue';
     import {defineEmits} from "vue";
     import { onMounted} from 'vue';
     const emit = defineEmits(['changePage'])
@@ -27,16 +25,16 @@
         pageProps.value.pageNum = props.pageNum;
         pageProps.value.pageSize = props.pageSize;
     })
-
-
-
     function changePage() {
         emit('changePage', pageProps)
     }
-
-
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+.fenye{
+  align-self: center;
+  margin-top: 10px;
+  border-radius: 0px 0px 0px 0px;
+  /*border: 1px solid #E2E8F0;*/
+}
 </style>

src/views/xjc-integratedmachine/environment/career_story1.vue

@@ -137,7 +137,7 @@
 
     const queryParams = ref({
         pageNum: 1,
-        pageSize: 5,
+        pageSize: 3,
         type: '5'
     })
     const loading = ref(false)
@@ -191,13 +191,13 @@
 
         .page-img-box {
             width: 1832px;
-            height: 922px;
+            height: 860px;
             margin-top: 13px;
             background: rgba(255, 255, 255, 0.4);
             border-radius: 35px 35px 35px 35px;
             display: flex;
             flex-direction: column;
-            overflow: auto;
+            //overflow: auto;
 
             .item-box {
                 width: 1750px;

src/views/xjc-integratedmachine/environment/mycos_info.vue

@@ -13,10 +13,12 @@
             </div>
           </div>
         </div>
-        <div class="fenye">
-          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-                    v-model:limit="queryParams.pageSize" @pagination="query"/>
-        </div>
+<!--        <div class="fenye">-->
+<!--          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+                    v-model:limit="queryParams.pageSize" @pagination="query"/>-->
+          <xjc-pagination v-if="!loading" :total="total" :pageNum="queryParams.pageNum" :pageSize="queryParams.pageSize"
+                          @changePage="changePage"></xjc-pagination>
+<!--        </div>-->
       </div>
       <drag_component></drag_component>
     </div>
@@ -28,7 +30,7 @@
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
 /*import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";*/
-
+import xjcPagination from "@/views/xjc-integratedmachine/components/xjc_pagination.vue"
 import {careerinformation} from '@/api/xjc-integratedmachine/environment/tscareer.js'
 import {ref} from "vue";
 const router = useRouter()
@@ -53,30 +55,39 @@ function setHeadinfo(){
 
 onMounted(() => {
   setHeadinfo()
+  query()
 })
 
+function toDetail(item) {
+  router.push({
+    path : '/xjc-integratedmachine/environment/info_detail',
+    query :{
+      id : item.id
+    }
+  })
+}
+
+//分页部分
 const queryParams = ref({
   pageNum: 1,
   pageSize: 5,
   type : '1'
 })
+function changePage(params) {
+  queryParams.value.pageSize = params.value.pageSize
+  queryParams.value.pageNum = params.value.pageNum
+  query()
+}
+
+const loading = ref(false)
 function query() {
-  careerinformation(queryParams.value).then(resp =>{
-    console.log(resp.data_list.rows)
+  loading.value = true
+  careerinformation(queryParams.value).then(resp => {
     list.value = resp.data_list.rows
     total.value = resp.data_list.total
+    loading.value = false
   })
 }
-function toDetail(item) {
-  router.push({
-    path : '/xjc-integratedmachine/environment/info_detail',
-    query :{
-      id : item.id
-    }
-  })
-}
-query()
-
 </script>
 
 <style scoped>
@@ -109,7 +120,7 @@ p, div {
     border-radius: 35px 35px 35px 35px;
     display: flex;
     flex-direction: column;
-    overflow: auto;
+/*    overflow: auto;*/
     .item-box{
       width: 1750px;
       height: 120px;
@@ -153,16 +164,5 @@ p, div {
     }
   }
 
-  .fenye{
-    width: 72px;
-    height: -48px;
-    align-self: center;
-    margin-top: 20px;
-    margin-left: 600px;
-    background: #F4F4F4;
-    border-radius: 0px 0px 0px 0px;
-    border: 1px solid #E2E8F0;
-  }
-
 }
 </style>