diff --git a/src/assets/font/font.css b/src/assets/font/font.css
index 646a5cd..930bb61 100644
--- a/src/assets/font/font.css
+++ b/src/assets/font/font.css
@@ -17,4 +17,9 @@
 @font-face {
   font-family: 'Regular';
   src: url("./tell/Alibaba-PuHuiTi-Regular.otf");
+}
+
+@font-face {
+  font-family: 'Alibaba PuHuiTi';
+  src: url("./tell/Alibaba-PuHuiTi-Regular.otf");
 }
\ No newline at end of file
diff --git a/src/views/bigpage/bigcomponents/AdverseBox.vue b/src/views/bigpage/bigcomponents/AdverseBox.vue
index fb3fbd2..5bcea7f 100644
--- a/src/views/bigpage/bigcomponents/AdverseBox.vue
+++ b/src/views/bigpage/bigcomponents/AdverseBox.vue
@@ -74,27 +74,41 @@ export default {
   },
   methods: {
     getData() {
-      getDrugBL({ name: "国药准字B20020034" }).then((res) => {
-        this.$nextTick(() => {
-          let chartDom = this.$refs["bottom-box"];
-          this.myChart1 = echarts.init(chartDom);
-          this.initEcharts();
+      let newRouter = this.$route.query;
+      console.log(newRouter.type);
+      if (newRouter.type == 1) {
+        //药品
+        getDrugBL({ name: newRouter.code }).then((res) => {
+          console.log(res);
+          this.$nextTick(() => {
+            let chartDom = this.$refs["bottom-box"];
+            this.myChart1 = echarts.init(chartDom);
+            this.initEcharts();
+          });
         });
-      });
-      getCosmeticsBL({}).then(res=>{
-        this.$nextTick(() => {
-          let chartDom = this.$refs["bottom-box"];
-          this.myChart1 = echarts.init(chartDom);
-          this.initEcharts();
+      }
+      if (newRouter.type != 1 && newRouter.type != 2) {
+        //化妆品
+        getCosmeticsBL({ name: newRouter.code }).then((res) => {
+          console.log(res);
+          this.$nextTick(() => {
+            let chartDom = this.$refs["bottom-box"];
+            this.myChart1 = echarts.init(chartDom);
+            this.initEcharts();
+          });
         });
-      })
-      getMedicalDevicesBL({}).then(res=>{
-        this.$nextTick(() => {
-          let chartDom = this.$refs["bottom-box"];
-          this.myChart1 = echarts.init(chartDom);
-          this.initEcharts();
+      }
+      if (newRouter.type == 2) {
+        //医疗器械
+        getMedicalDevicesBL({ name: newRouter.code }).then((res) => {
+          console.log(res);
+          this.$nextTick(() => {
+            let chartDom = this.$refs["bottom-box"];
+            this.myChart1 = echarts.init(chartDom);
+            this.initEcharts();
+          });
         });
-      })
+      }
     },
     initEcharts() {
       this.option1 = {
@@ -451,7 +465,7 @@ export default {
         font-family: Alibaba PuHuiTi;
         font-weight: 400;
         color: #ffffff;
-        background: linear-gradient(0deg,#ffffff 0%, #d21b1b 100%);
+        background: linear-gradient(0deg, #ffffff 0%, #d21b1b 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         margin-right: 5px;
diff --git a/src/views/bigpage/bigcomponents/ChangeinformationList.vue b/src/views/bigpage/bigcomponents/ChangeinformationList.vue
index 77707c2..7b90b67 100644
--- a/src/views/bigpage/bigcomponents/ChangeinformationList.vue
+++ b/src/views/bigpage/bigcomponents/ChangeinformationList.vue
@@ -7,6 +7,7 @@
       element-loading-text="加载中..."
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
+      height="208"
       stripe
       style="width: 100%; background-color: transparent"
     >
@@ -67,7 +68,7 @@ export default {
       tableData: [],
       query: {
         current: 1,
-        size: 5,
+        size: 10,
         name: "",
       },
       total: 0,
@@ -80,6 +81,8 @@ export default {
   },
   methods: {
     getList() {
+      let newRouter = this.$route.query;
+      this.query.name = newRouter.code;
       this.load1 = true;
       getDrugChange(this.query).then((res) => {
         this.tableData = res.data.records;
diff --git a/src/views/bigpage/bigcomponents/informationBox.vue b/src/views/bigpage/bigcomponents/informationBox.vue
index 26aba5b..3ef268a 100644
--- a/src/views/bigpage/bigcomponents/informationBox.vue
+++ b/src/views/bigpage/bigcomponents/informationBox.vue
@@ -41,7 +41,7 @@
 
 <script>
 import * as echarts from "echarts";
-
+import { getCPCJ } from "@/api/largeScreen/index";
 export default {
   name: "informationBox",
   components: {},
@@ -69,22 +69,27 @@ export default {
       // echarts
       myChart2: {},
       //==============
-
     };
   },
   created() {},
   mounted() {
-    this.$nextTick(() => {
-      let chartDom = this.$refs["left-echart"];
-      this.myChart1 = echarts.init(chartDom);
-      this.initEcharts();
-
-      let chartDom2 = this.$refs["right-echart"];
-      this.myChart2 = echarts.init(chartDom2);
-      this.initEcharts2();
-    });
+    this.getData();
   },
   methods: {
+    getData() {
+      let newRouter = this.$route.query;
+      getCPCJ({ name: newRouter.code }).then((res) => {
+        console.log(res);
+        this.$nextTick(() => {
+          let chartDom = this.$refs["left-echart"];
+          this.myChart1 = echarts.init(chartDom);
+          this.initEcharts();
+          let chartDom2 = this.$refs["right-echart"];
+          this.myChart2 = echarts.init(chartDom2);
+          this.initEcharts2();
+        });
+      });
+    },
     initEcharts() {
       this.option1 = {
         tooltip: {
diff --git a/src/views/bigpage/bigcomponents/recallbox.vue b/src/views/bigpage/bigcomponents/recallbox.vue
index 5024036..e2f36c1 100644
--- a/src/views/bigpage/bigcomponents/recallbox.vue
+++ b/src/views/bigpage/bigcomponents/recallbox.vue
@@ -55,7 +55,8 @@ export default {
   },
   methods: {
     getData() {
-      getRecall({ name: "国药准字B20020034" }).then((res) => {
+      let newRouter = this.$route.query;
+      getRecall({ name: newRouter.code }).then((res) => {
         this.zhcs = res.data.cpzhcs;
         this.cpzhbs = res.data.zhcppc;
         this.cpzhcs = res.data.cpzhl;
@@ -175,17 +176,18 @@ export default {
 </script>
 <style scoped lang='scss'>
 .box {
+  height: calc(100% - 41px);
+  width: 100%;
 }
-
 .top-box {
   margin: 10px 0;
   height: 85px;
   width: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
 
   .topbox-item {
-    width: 240px;
+    width: 30%;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -269,7 +271,7 @@ export default {
 }
 
 .bottom-content {
-  height: 210px;
+  height: calc(100% - 20px - 85px);
   display: flex;
 
   .right-echart {
diff --git a/src/views/bigpage/index.vue b/src/views/bigpage/index.vue
index 39a6dac..9ccb8cb 100644
--- a/src/views/bigpage/index.vue
+++ b/src/views/bigpage/index.vue
@@ -1,337 +1,331 @@
 
 <template>
-    <div class="pc-container">
-        <div class="system-header">
-            <div class="left-tags">
-                2023年8月11日 星期五 16:23:34
-            </div>
-            <div class="system-title" text="产品画像">
-                产品画像
-            </div>
-            <div class="rigth-tags">
-
-                <div class="rigth-tags-diva"> <span class="rigth-tags-spana"><i class="el-icon-sunny"></i></span>晴天 17~28°C
-                    <span class="rigth-tags-spanb"> | </span>东南风3级
-                </div>
-            </div>
+  <div class="pc-container">
+    <div class="system-header">
+      <div class="left-tags">2023年8月11日 星期五 16:23:34</div>
+      <div class="system-title" text="产品画像">产品画像</div>
+      <div class="rigth-tags">
+        <div class="rigth-tags-diva">
+          <span class="rigth-tags-spana"><i class="el-icon-sunny"></i></span
+          >晴天 17~28°C <span class="rigth-tags-spanb"> | </span>东南风3级
         </div>
-        <div class="system-bottom">
-            <div class="bg-left"></div>
-            <div class="bg-right"></div>
-            <div class="bg-bottom"></div>
-
-            <div class="system-box">
-                <!-- 左边 -->
-                <div class="system-box-left">
-                    <div class="system-boxleft-top top">
-                        <headtitle mytitle="基本信息"></headtitle>
-                        <!-- 组件 -->
-                        <Basicbox></Basicbox>
-                    </div>
-                    <div class="system-boxleft-bottom bottom">
-                        <headtitle mytitle="变更信息"></headtitle>
-                        <ChangeinformationList></ChangeinformationList>
-                    </div>
-                </div>
-                <!-- 中间 -->
-                <div class="system-box-content">
-                    <div class="top">
-                        <!-- 头部 -->
-                        <div class="fengxian-top">
-                            <div class="fengxian-top-left">复方枸杞子胶囊</div>
-                            <div class="fengxian-top-right">
-                                <span>保健药</span>
-                                <span>保健药</span>
-                                <span>保健药</span>
-                                <span>保健药</span>
-                            </div>
-                        </div>
-                        <headtitle mytitle="风险提示信息"></headtitle>
-                        <riskinformationList></riskinformationList>
-                    </div>
-                    <div class="bottom">
-                        <headtitle mytitle="检验检测信息"></headtitle>
-                        <informationBox></informationBox>
-                    </div>
-                </div>
-                <!-- 右边 -->
-                <div class="system-box-right">
-                    <div class="top">
-                        <headtitle mytitle="召回信息"></headtitle>
-                        <recallbox></recallbox>
-                    </div>
-                    <div class="bottom">
-                        <headtitle mytitle="不良反应信息"></headtitle>
-                        <AdverseBox></AdverseBox>
-                    </div>
-                </div>
+      </div>
+    </div>
+    <div class="system-bottom">
+      <div class="bg-left"></div>
+      <div class="bg-right"></div>
+      <div class="bg-bottom"></div>
+
+      <div class="system-box">
+        <!-- 左边 -->
+        <div class="system-box-left">
+          <div class="system-boxleft-top top">
+            <headtitle mytitle="基本信息"></headtitle>
+            <!-- 组件 -->
+            <Basicbox></Basicbox>
+          </div>
+          <div class="system-boxleft-bottom bottom">
+            <headtitle mytitle="变更信息"></headtitle>
+            <ChangeinformationList></ChangeinformationList>
+          </div>
+        </div>
+        <!-- 中间 -->
+        <div class="system-box-content">
+          <div class="top">
+            <!-- 头部 -->
+            <div class="fengxian-top">
+              <div class="fengxian-top-left">复方枸杞子胶囊</div>
+              <div class="fengxian-top-right">
+                <span>保健药</span>
+                <span>保健药</span>
+                <span>保健药</span>
+                <span>保健药</span>
+              </div>
             </div>
+            <headtitle mytitle="风险提示信息"></headtitle>
+            <riskinformationList></riskinformationList>
+          </div>
+          <div class="bottom">
+            <headtitle mytitle="检验检测信息"></headtitle>
+            <informationBox></informationBox>
+          </div>
+        </div>
+        <!-- 右边 -->
+        <div class="system-box-right">
+          <div class="top">
+            <headtitle mytitle="召回信息"></headtitle>
+            <recallbox></recallbox>
+          </div>
+          <div class="bottom">
+            <headtitle mytitle="不良反应信息"></headtitle>
+            <AdverseBox></AdverseBox>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
   
 <script>
 // 头部
-import headtitle from './bigcomponents/headtitle.vue';
+import headtitle from "./bigcomponents/headtitle";
 // 基本信息
-import Basicbox from './bigcomponents/Basicbox.vue';
+import Basicbox from "./bigcomponents/Basicbox.vue";
 // 变更信息
-import ChangeinformationList from './bigcomponents/ChangeinformationList.vue';
+import ChangeinformationList from "./bigcomponents/ChangeinformationList";
 // 风险提示信息
-import riskinformationList from './bigcomponents/riskinformationList.vue';
+import riskinformationList from "./bigcomponents/riskinformationList";
 // 检验检测信息
-import informationBox from './bigcomponents/informationBox.vue';
+import informationBox from "./bigcomponents/informationBox";
 // 召回信息
-import recallbox from './bigcomponents/recallbox.vue';
+import recallbox from "./bigcomponents/recallbox.vue";
 // 不良反应
-import AdverseBox from './bigcomponents/AdverseBox.vue';
+import AdverseBox from "./bigcomponents/AdverseBox.vue";
 export default {
-    name: '',
-    components: { headtitle, Basicbox, ChangeinformationList,riskinformationList,informationBox,recallbox,AdverseBox },
-    data() {
-        return {
-
-        }
-    },
-    created() { },
-    mounted() { },
-    methods: {},
-    computed: {}
-}
+  name: "",
+  components: {
+    headtitle,
+    Basicbox,
+    ChangeinformationList,
+    riskinformationList,
+    informationBox,
+    recallbox,
+    AdverseBox,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+  computed: {},
+};
 </script>
 <style scoped lang='scss'>
-@import '@/assets/styles/theme.scss';
+@import "@/assets/styles/theme.scss";
 
 div {
-    text-align: left;
+  text-align: left;
 }
 
 .pc-container {
-    overflow: hidden;
-    height: 100%;
-    background: url('../../assets/images/daping/main-background.png') no-repeat center;
-    background-size: cover;
-    position: relative;
+  overflow: hidden;
+  height: 100%;
+  background: url("../../assets/images/daping/main-background.png") no-repeat
+    center;
+  background-size: cover;
+  position: relative;
+
+  // 头部
+  .system-header {
+    // position: absolute;
+    // top: 0;
+    // left: 0;
+    height: 10vh;
+    width: 100%;
+    background-image: url("../../assets/images/daping/img_title@2x.png");
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+
+    & > div {
+      flex: 1;
+      height: 100%;
+    }
 
-    // 头部
-    .system-header {
-        // position: absolute;
-        // top: 0;
-        // left: 0;
-        height: 12vh;
-        width: 100%;
-        background-image: url('../../assets/images/daping/img_title@2x.png');
-        background-size: 100% 100%;
-        display: flex;
-        justify-content: space-between;
+    .system-title {
+      padding: 0 0 10px 0;
+      font-size: 50px;
+      font-family: "YouSheBiaoTiHei";
+      font-weight: 400;
+      color: #ffffff;
+      display: flex;
+      justify-content: center;
+      align-items: flex-end;
+      text-shadow: 0px 2px 4px #03101c;
+      letter-spacing: 5px;
+
+      &::before {
+        content: attr(text);
+        position: absolute;
+        z-index: 10;
+        color: #ffffff;
+        // 渐变样式
+        background: linear-gradient(0deg, #5abdf7 20%, #ecf8fe 80%);
+        -webkit-background-clip: text;
+        color: transparent;
+        // 去除继承父级样式
+        text-shadow: none;
+      }
+    }
 
-        &>div {
-            flex: 1;
-            height: 100%;
-        }
+    .rigth-tags {
+      display: flex;
+      align-items: flex-end;
+      flex-direction: row-reverse;
+      box-sizing: border-box;
+      color: #86a3c3;
+      padding: 0 20px 20px 0;
 
-        .system-title {
-            padding: 0 0 10px 0;
-            font-size: 50px;
-            font-family: 'YouSheBiaoTiHei';
-            font-weight: 400;
-            color: #ffffff;
-            display: flex;
-            justify-content: center;
-            align-items: flex-end;
-            text-shadow: 0px 2px 4px #03101c;
-            letter-spacing: 5px;
+      .rigth-tags-spana {
+        margin-right: 10px;
 
-            &::before {
-                content: attr(text);
-                position: absolute;
-                z-index: 10;
-                color: #ffffff;
-                // 渐变样式
-                background: linear-gradient(0deg, #5abdf7 20%, #ecf8fe 80%);
-                -webkit-background-clip: text;
-                color: transparent;
-                // 去除继承父级样式
-                text-shadow: none;
-            }
+        i {
+          color: yellow;
         }
+      }
+
+      .rigth-tags-spanb {
+        width: 2px;
+        height: 16px;
+        padding: 0 5px;
+        color: #2d8ef2;
+      }
+    }
 
-        .rigth-tags {
-            display: flex;
-            align-items: flex-end;
-            flex-direction: row-reverse;
-            box-sizing: border-box;
-            color: #86A3C3;
-            padding: 0 20px 20px 0;
-
-            .rigth-tags-spana {
-                margin-right: 10px;
+    .left-tags {
+      display: flex;
+      align-items: flex-end;
+      box-sizing: border-box;
+      color: #ffffff;
+      font-weight: 400;
+      padding: 0 0 20px 20px;
+      color: #86a3c3;
+    }
+  }
 
-                i {
-                    color: yellow;
-                }
-            }
+  // 底部
+  .system-bottom {
+    height: 89vh;
+    padding: 24px;
+    position: relative;
 
-            .rigth-tags-spanb {
-                width: 2px;
-                height: 16px;
-                padding: 0 5px;
-                color: #2D8EF2;
-            }
+    .bg-left,
+    .bg-right,
+    .bg-bottom {
+      position: absolute;
+      /* 将背景图定位为绝对定位 */
+      z-index: 0;
+      /* 将背景图放在容器最下方 */
+      background-repeat: no-repeat;
+      /* 禁止重复显示背景图 */
+      background-size: contain;
+    }
 
-        }
+    .bg-left {
+      top: 0;
+      bottom: 12px;
+      left: 5px;
+      right: 0;
+      background-image: url("../../assets/images/daping/left-line@2x.png");
+      background-position: left top;
+      /* 将背景图左上角对齐容器左上角 */
+      /* 按比例缩放背景图，尽可能填充容器 */
+    }
 
-        .left-tags {
-            display: flex;
-            align-items: flex-end;
-            box-sizing: border-box;
-            color: #ffffff;
-            font-weight: 400;
-            padding: 0 0 20px 20px;
-            color: #86A3C3;
-        }
+    .bg-right {
+      top: 0;
+      bottom: 12px;
+      left: 0;
+      right: 5px;
+      background-image: url("../../assets/images/daping/right-line@2x.png");
+      background-position: right top;
+      /* 将背景图右上角对齐容器右上角 */
+      /* 按比例缩放背景图，尽可能填充容器 */
     }
 
-    // 底部
-    .system-bottom {
-        height: 87vh;
-        padding: 24px;
-        position: relative;
+    .bg-bottom {
+      top: 0;
+      bottom: 0px;
+      left: 5px;
+      right: 5px;
+      background-image: url("../../assets/images/daping/bottom-line.png");
+      background-position: center bottom;
+      /* 将背景图中心点对齐容器底部中心 */
+      /* 按比例缩放背景图，保持其宽高比，同时确保不会溢出容器 */
+    }
 
-        .bg-left,
-        .bg-right,
-        .bg-bottom {
-            position: absolute;
-            /* 将背景图定位为绝对定位 */
-            z-index: 0;
-            /* 将背景图放在容器最下方 */
-            background-repeat: no-repeat;
-            /* 禁止重复显示背景图 */
-            background-size: contain;
-        }
+    .system-box {
+      position: relative;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      display: flex;
 
-        .bg-left {
-            top: 0;
-            bottom: 12px;
-            left: 5px;
-            right: 0;
-            background-image: url("../../assets/images/daping/left-line@2x.png");
-            background-position: left top;
-            /* 将背景图左上角对齐容器左上角 */
-            /* 按比例缩放背景图，尽可能填充容器 */
-        }
+      & > div {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        /* 设置垂直方向排列 */
+        justify-content: space-between;
 
-        .bg-right {
-            top: 0;
-            bottom: 12px;
-            left: 0;
-            right: 5px;
-            background-image: url("../../assets/images/daping/right-line@2x.png");
-            background-position: right top;
-            /* 将背景图右上角对齐容器右上角 */
-            /* 按比例缩放背景图，尽可能填充容器 */
+        .top {
+          flex: 1;
+          margin-bottom: 15px;
         }
 
-        .bg-bottom {
-            top: 0;
-            bottom: 0px;
-            left: 5px;
-            right: 5px;
-            background-image: url("../../assets/images/daping/bottom-line.png");
-            background-position: center bottom;
-            /* 将背景图中心点对齐容器底部中心 */
-            /* 按比例缩放背景图，保持其宽高比，同时确保不会溢出容器 */
+        .bottom {
+          flex: 1;
         }
+      }
 
-        .system-box {
-            position: relative;
-            z-index: 1;
-            width: 100%;
-            height: 100%;
-            display: flex;
-
-            &>div {
-                height: 100%;
-                display: flex;
-                flex-direction: column;
-                /* 设置垂直方向排列 */
-                justify-content: space-between;
-
-                .top {
-                    flex: 1;
-                    margin-bottom: 15px;
-                }
-
-                .bottom {
-                    flex: 1;
-                }
-            }
+      .system-box-left {
+        flex: 1;
 
-            .system-box-left {
-                flex: 1;
-                width: 25vw;
-
-                .system-boxleft-top,
-                .system-boxleft-bottom {
-                    background: url('../../assets/images/daping/boxBG.png');
-                    background-size: cover;
-                    background-repeat: no-repeat;
-
-                }
-
-                /* 将项目从下往上排列 */
-                .system-boxleft-top {}
-
-                .system-boxleft-bottom {}
-            }
-
-            .system-box-content {
-                width: 48vw;
-                margin: 0 15px;
-                flex: 2;
-            }
-
-            .system-box-right {
-                width: 25vw;
-
-                flex: 1;
-            }
+        .system-boxleft-top,
+        .system-boxleft-bottom {
+          background: url("../../assets/images/daping/boxBG.png");
+          background-size: cover;
+          background-repeat: no-repeat;
         }
+      }
 
-        .fengxian-top {
-            padding: 0 30px;
-            height: 80px;
-            background: rgba(0, 168, 255, 0.04);
-            border-radius: 10px;
-            margin-bottom: 10px;
-            box-shadow: inset 0px 0px 35px rgba(4, 72, 161, 1);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+      .system-box-content {
+        margin: 0 15px;
+        flex: 2;
+      }
 
-            .fengxian-top-left {
-                font-size: 32px;
-                font-family: Regular;
-                font-weight: bold;
-                color: #61B5F5;
-                line-height: 42px;
-            }
+      .system-box-right {
+        flex: 1;
+      }
+    }
 
-            .fengxian-top-right {
-                display: flex;
-                span {
-                    margin: 0 3px;
-                    width: 93px;
-                    height: 49px;
-                    background: url('../../assets/images/daping/fengxianbgc.png') no-repeat center;
-                    background-size: contain;
-                    text-align: center;
-                    line-height: 49px;
-                    color: #4DA5FF;
-                    font-weight: 400;
-                }
-            }
+    .fengxian-top {
+      padding: 0 30px;
+      height: 80px;
+      background: rgba(0, 168, 255, 0.04);
+      border-radius: 10px;
+      margin-bottom: 10px;
+      box-shadow: inset 0px 0px 35px rgba(4, 72, 161, 1);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .fengxian-top-left {
+        font-size: 32px;
+        font-family: Regular;
+        font-weight: bold;
+        color: #61b5f5;
+        line-height: 42px;
+      }
+
+      .fengxian-top-right {
+        display: flex;
+        span {
+          margin: 0 3px;
+          width: 93px;
+          height: 49px;
+          background: url("../../assets/images/daping/fengxianbgc.png")
+            no-repeat center;
+          background-size: contain;
+          text-align: center;
+          line-height: 49px;
+          color: #4da5ff;
+          font-weight: 400;
         }
+      }
     }
-}</style> 
+  }
+}
+</style> 
    
\ No newline at end of file
diff --git a/src/views/components/Pagination.vue b/src/views/components/Pagination.vue
index cdf6b2d..cf40b52 100644
--- a/src/views/components/Pagination.vue
+++ b/src/views/components/Pagination.vue
@@ -5,7 +5,7 @@
       background
       :current-page.sync="currentPage"
       :page-size.sync="pageSize"
-      layout="->,prev, total,pager, next,jumper"
+      layout="prev, pager, next,jumper"
       :page-sizes="pageSizes"
       :pager-count="pagerCount"
       :total="total"
@@ -104,6 +104,14 @@ export default {
 };
 </script>
 <style scoped lang='scss'>
+::v-deep .el-pagination {
+  width: 100%;
+  display: flex;
+  justify-content: end;
+  padding: 8px 5px;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
 .box {
   background-color: transparent !important;
 }
@@ -117,18 +125,17 @@ export default {
   border: 1px solid #123864;
   color: #579acf;
 }
-::v-deep .el-pagination.is-background .el-pager li {
+::v-deep .el-pagination .el-pager li {
   background-color: transparent !important;
   border: 1px solid #123864;
   color: #579acf;
 }
-
-::v-deep .el-pagination.is-background.el-pager li:not(.disabled).active {
-  background: rgba(20, 131, 242, 0.2) !important;
-  border: 1px solid #1483f2;
-  border-radius: 4px;
-  color: #fff;
-}
+// ::v-deep .el-pagination.is-background.el-pager li:not(.disabled).active {
+//   background: rgba(20, 131, 242, 0.2) !important;
+//   border: 1px solid #1483f2;
+//   border-radius: 4px;
+//   color: #fff;
+// }
 ::v-deep .el-pagination__jump {
   margin: 0;
   color: #2668d6;
@@ -138,17 +145,13 @@ export default {
     color: #2668d6;
   }
 }
-::v-deep .el-pagination__total {
-  color: #2668d6;
-}
-::v-deep .el-pagination.is-background .el-pager li:hover {
-  background: rgba(20, 131, 242, 0.2) !important;
-  border: 1px solid #1483f2;
-  border-radius: 4px;
-}
 ::v-deep .el-pager li.active {
-  background: rgba(20, 131, 242, 0.2) !important;
+  background: rgba(20, 131, 242, 0.52) !important;
   border: 1px solid #1483f2;
   border-radius: 4px;
 }
+
+// ::v-deep .el-pagination__total {
+//   color: #2668d6;
+// }
 </style>