format-code

king

2019-07-16 ed58afaaa564c54d22a42593265addce08bd5850

 src/views/news/index.vue

@@ -1,431 +1,430 @@
<template>
    <div>
        <div class="banner">
            <img src="../../img/newsBanner.png" alt="" class="m_hide">
            <img src="../../img/xin.png" alt="" class="p_hide">
        </div>
        <div class="wrapper">
            <div class="contentTitle">
                <i class="contentTitle_before"></i>  
                <span v-for="(tab, i) in tabs" :key="i" @click="cur=i" :class="{active:cur==i}">{{tab.name}}</span>
                <i class="contentTitle_after"></i>
            </div>
			
            <div class="tab-content">
                <div v-show="cur==0">
                    <ul class="news_ul">
                        <router-link to="/dynamicDetail" tag="li">
                            <h3>
                                <img src="../../img/qi1.png" alt="">
                            </h3>
                            <div class="news_ul_card"> 
                                <h2>                        
                                    <span style="display: block;">明科产品质量安全追溯系统解决方案</span>
                                    <span>2017-03-08</span>
                                </h2>
                                <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
                            </div>
                        </router-link>
                        <router-link to="/dynamicDetail" tag="li">
                            <h3>
                                <img src="../../img/qi2.png" alt="">
                            </h3>
                            <div class="news_ul_card"> 
                                <h2>                        
                                    <span style="display: block;">宝时得电商平台项目启动会议隆重举行</span>
                                    <span>2017-10-10</span>
                                </h2>
                                <p>9月22日上午，宝时得电商平台项目启动会在苏州厅隆重召开，专业工具营销中心朱总、财务张总、信息化管理部丁总，携项目组团队参加了此次会议。北京明科普华副总经理张富贵携顾问代表4人出席了会议。</p>
                            </div>
                        </router-link>
                        <router-link to="/dynamicDetail" tag="li">
                            <h3>
                                <img src="../../img/qi3.png" alt="">
                            </h3>
                            <div class="news_ul_card"> 
                                <h2>                        
                                    <span style="display: block;">明科售后服务跟踪系统解决方案</span>
                                    <span>2017-03-08</span>
                                </h2>
                                <p>明科服务跟踪系统MK-SES 是由明科公司首创的基于自动识别技术的服务系统，它能让企业能够更好的为用户提供更人性化的跟踪服务，并且能有效的降低服务成本。</p>
                            </div>
                        </router-link>
                        
                        
                        <router-link to="/dynamicDetail" tag="li">
                            <h3>
                                <img src="../../img/qi4.png" alt="">
                            </h3>
                            <div class="news_ul_card"> 
                                <h2>                        
                                    <span style="display: block;">明科产品质量安全追溯系统解决方案</span>
                                    <span>2017-03-08</span>
                                </h2>
                                <p>明科服务跟踪系统MK-SES 是由明科公司首创的基于自动识别技术的服务系统，它能让企业能够更好的为用户提供更人性化的跟踪服务，并且能有效的降低服务成本。</p>
                            </div>
                        </router-link>
                        <router-link to="/dynamicDetail" tag="li">
                            <h3>
                                <img src="../../img/qi5.png" alt="">
                            </h3>
                            <div class="news_ul_card"> 
                                <h2>                        
                                    <span style="display: block;">明科产品质量安全追溯系统解决方案</span>
                                    <span>2017-03-08</span>
                                </h2>
                                <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期、批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码，查询流通过程中的商品流向，达到防伪...</p>
                            </div>
                        </router-link>
                  <router-link to="/dynamicDetail" tag="li">
                      <h3>
                          <img src="../../img/qi6.png" alt="">
                      </h3>
                      <div class="news_ul_card"> 
                          <h2>                        
                              <span style="display: block;">明科产品质量安全追溯系统解决方案</span>
                              <span>2017-03-08</span>
                          </h2>
                          <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期、批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码，查询流通过程中的商品流向，达到防伪...</p>
                      </div>
                  </router-link>
                    </ul>
                </div>
                <div v-show="cur==1">
                    <ul class="news_ul">
                        <router-link to="/dynamicDetail" tag="li">
                            <h3>
                                <img src="../../img/qi1.png" alt="">
                            </h3>
                            <div class="news_ul_card"> 
                                <h2>                        
                                    <span style="display: block;">明科产品质量安全追溯系统解决方案</span>
                                    <span>2017-03-08</span>
                                </h2>
                                <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
                            </div>
                        </router-link>
                  <router-link to="/dynamicDetail" tag="li">
                      <h3>
                          <img src="../../img/qi4.png" alt="">
                      </h3>
                      <div class="news_ul_card"> 
                          <h2>                        
                              <span style="display: block;">明科产品质量安全追溯系统解决方案</span>
                              <span>2017-03-08</span>
                          </h2>
                          <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
                      </div>
                  </router-link>
                    </ul>
                </div>
                <div v-show="cur==2">
                    <ul class="news_ul">
                        <router-link to="/dynamicDetail" tag="li">
                            <h3>
                                <img src="../../img/qi2.png" alt="">
                            </h3>
                            <div class="news_ul_card"> 
                                <h2>                        
                                    <span>明科售后服务跟踪系统解决方案</span>
                                    <span>2017-03-08</span>
                                </h2>
                                <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
                            </div>
                        </router-link>
                  <router-link to="/dynamicDetail" tag="li">
                      <h3>
                          <img src="../../img/qi5.png" alt="">
                      </h3>
                      <div class="news_ul_card"> 
                          <h2>                        
                              <span>明科售后服务跟踪系统解决方案</span>
                              <span>2017-03-08</span>
                          </h2>
                          <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
                      </div>
                  </router-link>
                    </ul>
                </div><div v-show="cur==3">
                    <ul class="news_ul">
                        <router-link to="/dynamicDetail" tag="li">
                            <h3>
                                <img src="../../img/qi3.png" alt="">
                            </h3>
                            <div class="news_ul_card">
                                <h2>                        
                                    <span>明科产品质量安全追溯系统解决方案</span>
                                    <span>2017-03-08</span>
                                </h2>
                                <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
                            </div>
                        </router-link>
                  <router-link to="/dynamicDetail" tag="li">
                      <h3>
                          <img src="../../img/qi6.png" alt="">
                      </h3>
                      <div class="news_ul_card">
                          <h2>                        
                              <span>明科产品质量安全追溯系统解决方案</span>
                              <span>2017-03-08</span>
                          </h2>
                          <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
                      </div>
                  </router-link>
                    </ul>
                </div>
                
            <div class="p_hide" style="margin-bottom: -1rem;"></div>
                <div style="text-align: center;visibility: hidden;">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage3"
                    :page-size="10"
                    background
                    prev-text="上一页"
                    next-text="下一页"
                    style="display: inline-block;margin: 0.6rem 0;"
                    layout="prev, pager, next, jumper"
                    :total="50">
                    </el-pagination>
                </div>
            </div>
        </div>
  <div>
    <div class="banner">
      <img src="../../img/newsBanner.png" alt="" class="m_hide">
      <img src="../../img/xin.png" alt="" class="p_hide">
    </div>
    <div class="wrapper">
      <div class="contentTitle">
        <i class="contentTitle_before"></i>
        <span v-for="(tab, i) in tabs" :key="i" @click="cur=i" :class="{active:cur==i}">{{tab.name}}</span>
        <i class="contentTitle_after"></i>
      </div>

      <div class="tab-content">
        <div v-show="cur==0">
          <ul class="news_ul">
            <router-link to="/dynamicDetail" tag="li">
              <h3>
                <img src="../../img/qi1.png" alt="">
              </h3>
              <div class="news_ul_card">
                <h2>
                  <span style="display: block;">明科产品质量安全追溯系统解决方案</span>
                  <span>2017-03-08</span>
                </h2>
                <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
              </div>
            </router-link>
            <router-link to="/dynamicDetail" tag="li">
              <h3>
                <img src="../../img/qi2.png" alt="">
              </h3>
              <div class="news_ul_card"> 
                <h2>                        
                  <span style="display: block;">宝时得电商平台项目启动会议隆重举行</span>
                  <span>2017-10-10</span>
                </h2>
                <p>9月22日上午，宝时得电商平台项目启动会在苏州厅隆重召开，专业工具营销中心朱总、财务张总、信息化管理部丁总，携项目组团队参加了此次会议。北京明科普华副总经理张富贵携顾问代表4人出席了会议。</p>
              </div>
            </router-link>
            <router-link to="/dynamicDetail" tag="li">
              <h3>
                <img src="../../img/qi3.png" alt="">
              </h3>
              <div class="news_ul_card"> 
                <h2>                        
                  <span style="display: block;">明科售后服务跟踪系统解决方案</span>
                  <span>2017-03-08</span>
                </h2>
                <p>明科服务跟踪系统MK-SES 是由明科公司首创的基于自动识别技术的服务系统，它能让企业能够更好的为用户提供更人性化的跟踪服务，并且能有效的降低服务成本。</p>
              </div>
            </router-link>
            
            <router-link to="/dynamicDetail" tag="li">
              <h3>
                <img src="../../img/qi4.png" alt="">
              </h3>
              <div class="news_ul_card"> 
                <h2>                        
                  <span style="display: block;">明科产品质量安全追溯系统解决方案</span>
                  <span>2017-03-08</span>
                </h2>
                <p>明科服务跟踪系统MK-SES 是由明科公司首创的基于自动识别技术的服务系统，它能让企业能够更好的为用户提供更人性化的跟踪服务，并且能有效的降低服务成本。</p>
              </div>
            </router-link>
            <router-link to="/dynamicDetail" tag="li">
              <h3>
                <img src="../../img/qi5.png" alt="">
              </h3>
              <div class="news_ul_card"> 
                <h2>                        
                  <span style="display: block;">明科产品质量安全追溯系统解决方案</span>
                  <span>2017-03-08</span>
                </h2>
                <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期、批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码，查询流通过程中的商品流向，达到防伪...</p>
              </div>
            </router-link>
            <router-link to="/dynamicDetail" tag="li">
              <h3>
                <img src="../../img/qi6.png" alt="">
              </h3>
              <div class="news_ul_card"> 
                <h2>                        
                  <span style="display: block;">明科产品质量安全追溯系统解决方案</span>
                  <span>2017-03-08</span>
                </h2>
                <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期、批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码，查询流通过程中的商品流向，达到防伪...</p>
              </div>
            </router-link>
          </ul>
        </div>
        <div v-show="cur==1">
          <ul class="news_ul">
            <router-link to="/dynamicDetail" tag="li">
              <h3>
                <img src="../../img/qi1.png" alt="">
              </h3>
              <div class="news_ul_card"> 
                <h2>                        
                  <span style="display: block;">明科产品质量安全追溯系统解决方案</span>
                  <span>2017-03-08</span>
                </h2>
                <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
              </div>
            </router-link>
            <router-link to="/dynamicDetail" tag="li">
              <h3>
                <img src="../../img/qi4.png" alt="">
              </h3>
              <div class="news_ul_card"> 
                <h2>                        
                  <span style="display: block;">明科产品质量安全追溯系统解决方案</span>
                  <span>2017-03-08</span>
                </h2>
                <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
              </div>
            </router-link>
          </ul>
        </div>
        <div v-show="cur==2">
          <ul class="news_ul">
            <router-link to="/dynamicDetail" tag="li">
              <h3>
                <img src="../../img/qi2.png" alt="">
              </h3>
              <div class="news_ul_card"> 
                <h2>                        
                  <span>明科售后服务跟踪系统解决方案</span>
                  <span>2017-03-08</span>
                </h2>
                <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
              </div>
            </router-link>
            <router-link to="/dynamicDetail" tag="li">
              <h3>
                <img src="../../img/qi5.png" alt="">
              </h3>
              <div class="news_ul_card"> 
                <h2>                        
                  <span>明科售后服务跟踪系统解决方案</span>
                  <span>2017-03-08</span>
                </h2>
                <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
              </div>
            </router-link>
          </ul>
        </div>
        <div v-show="cur==3">
          <ul class="news_ul">
            <router-link to="/dynamicDetail" tag="li">
              <h3>
                <img src="../../img/qi3.png" alt="">
              </h3>
              <div class="news_ul_card">
                <h2>                        
                  <span>明科产品质量安全追溯系统解决方案</span>
                  <span>2017-03-08</span>
                </h2>
                <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
              </div>
            </router-link>
            <router-link to="/dynamicDetail" tag="li">
              <h3>
                <img src="../../img/qi6.png" alt="">
              </h3>
              <div class="news_ul_card">
                <h2>                        
                  <span>明科产品质量安全追溯系统解决方案</span>
                  <span>2017-03-08</span>
                </h2>
                <p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
              </div>
            </router-link>
          </ul>
        </div>

        <div class="p_hide" style="margin-bottom: -1rem;"></div>
        <div style="text-align: center;visibility: hidden;">
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="10"
          background
          prev-text="上一页"
          next-text="下一页"
          style="display: inline-block;margin: 0.6rem 0;"
          layout="prev, pager, next, jumper"
          :total="50">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            cur: 0,
            tabs:[
                {
                    name:'全部'
                },
                {
                    name:'企业资讯'
                },
                {
                    name:'公司活动'
                },
                {
                    name:'解决方案'
                }
            ],
            currentPage3: 5,
  data() {
    return {
      cur: 0,
      tabs:[
        {
          name:'全部'
        },
        {
          name:'企业资讯'
        },
        {
          name:'公司活动'
        },
        {
          name:'解决方案'
        }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    mounted(){
        
      ],
      currentPage3: 5,
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  mounted () {

  }
}
</script>

<style lang="less" scoped>
@media (max-width: 750px) and (min-width: 0){
    .wrapper{
        width: 100%;
@media (max-width: 750px) and (min-width: 0) {
  .wrapper {
    width: 100%;
  }
  .contentTitle {
    width: 100%;
    margin-bottom: .2rem;
    span {
      display: block;
      height: .9rem;
      line-height: .9rem;
      font-size: .34rem;
      text-align: center;
      background-color: #F4F4F4;
      border-bottom: 0.01rem solid #D7D7D7;
    }
    .contentTitle{
        width: 100%;
        margin-bottom: .2rem;
        span{
            display: block;
            height: .9rem;
         line-height: .9rem;
            font-size: .34rem;
            text-align: center;
         background-color: #F4F4F4;
         border-bottom: 0.01rem solid #D7D7D7;
    .active {
      background: #20B7FE;
      color: #fff;
      border:none;
    }
  }
  .news_ul {
    width: 100%;
    padding: 0.2rem 6% 0;
    li {
      margin-bottom: .35rem;
      h3 {
        position: relative;
        span {
          position: absolute;
          left: 0.5rem;
          bottom: 0.1rem;
          color: #fff;
          font-size: 0.3rem;
        }
      .active{
          background: #20B7FE;
          color: #fff;
          border:none;
      }
      }
      p {
        font-size: .24rem;
        padding: .2rem .25rem .5rem;
        color:#676767;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(103,103,103,1);
        line-height:0.44rem;
      }
      .news_ul_card {
        background-color: #F4F4F4;
      }
    }
    .news_ul{
        width: 100%;
        padding: 0.2rem 6% 0;
        li{
            margin-bottom: .35rem;
         h3{
            position: relative;
            span{
               position: absolute;
               left: 0.5rem;
               bottom: 0.1rem;
               color: #fff;
               font-size: 0.3rem;
            }
         }
            p{
                font-size: .24rem;
                padding: .2rem .25rem .5rem;
                color:#676767;
            font-family:PingFang-SC-Regular;
            font-weight:400;
            color:rgba(103,103,103,1);
            line-height:0.44rem;
            }
         .news_ul_card{
            background-color: #F4F4F4;
         }
        }
        h2{
            width: 100%;
            span{
                display: block;
            color: #676767;
            }
            span:first-child{
                font-size: .27rem;
                font-family:PingFang-SC-Bold;
                font-weight:bold;
                padding: .2rem 0.2rem 0;
            }
            span:nth-child(2){
                text-align: right;
                font-size: .22rem;
                padding: .2rem 0.2rem 0;
            }
        }
    h2 {
      width: 100%;
      span {
        display: block;
        color: #676767;
      }
      span:first-child {
        font-size: .27rem;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        padding: .2rem 0.2rem 0;
      }
      span:nth-child(2) {
        text-align: right;
        font-size: .22rem;
        padding: .2rem 0.2rem 0;
      }
    }
    .is-background{
        display: none;
    }
    button{
        width: 50%;
        margin-left:25%;
        border: 1px solid #52b6E7;
        color: #52b6E7;
        background: #fff;
        padding: .3rem 0;
        margin-bottom: .4rem;
    }
  }
  .is-background {
    display: none;
  }
  button {
    width: 50%;
    margin-left:25%;
    border: 1px solid #52b6E7;
    color: #52b6E7;
    background: #fff;
    padding: .3rem 0;
    margin-bottom: .4rem;
  }
}
@media (min-width: 751px) {
    .contentTitle{
  .contentTitle {
    position: relative;
    text-align: center;
    margin: 0.99rem auto;
    display: flex;
    width: 30%;
    span {    
      flex:1;
      padding: 0.1rem 0.1rem;
      display: inline-block;
      font-size: 0.13rem;
      cursor: pointer;
    }
    .contentTitle_before,.contentTitle_after {
      position: absolute;
      height: 1px;
      width: .7rem;
      background: #999;
      top: 50%;
    }
    .contentTitle_before {
      left: -.8rem;
    }
    .contentTitle_after {
      right: -.8rem;
    }
  }
  .news_ul {
    // width: 70%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 31.5%;
      margin-right: .3rem;
      margin-bottom: .4rem;
      cursor: pointer;
      h2 {
        padding: 0 .11rem;
        span:first-child{
          color: #20242A;
          font-size: 0.15rem;
          line-height: .3rem;
        }
        span:nth-child(2){
          color:#676767;
          font-size: 0.11rem;
          float: right;
          margin-top: 0.03rem;
        }
      }
      p {
        padding: 0.14rem 0.11rem;
        color: #676767;
        font-size: 0.11rem; 
        line-height: 0.25rem;
        margin-top: 0.25rem;
      }
    }
    li:nth-child(3n) {
      margin-right: 0;
    }
    h3 {
      width: 3.6rem;
      position: relative;
      overflow: hidden;
      span {
        display: inline-block;
        width: 50%;
        height: .22rem;
        position: relative;
        text-align: center;
        margin: 0.99rem auto;
        display: flex;
        width: 30%;
        span{    
            flex:1;
            padding: 0.1rem 0.1rem;
            display: inline-block;
            font-size: 0.13rem;
            cursor: pointer;
        }
        .contentTitle_before,.contentTitle_after{
            position: absolute;
            height: 1px;
            width: .7rem;
            background: #999;
            top: 50%;
        }
        .contentTitle_before{
            left: -.8rem;
        }
        .contentTitle_after{
            right: -.8rem;
        }
    }
    .news_ul {
        // width: 70%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        li{
            width: 31.5%;
            margin-right: .3rem;
            margin-bottom: .4rem;
         cursor: pointer;
            h2{
                padding: 0 .11rem;
                span:first-child{
                    color: #20242A;
                    font-size: 0.15rem;
                    line-height: .3rem;
                }
                span:nth-child(2){
                    color:#676767;
                    font-size: 0.11rem;
                    float: right;
               margin-top: 0.03rem;
                }
            }
            p{
                padding: 0.14rem 0.11rem;
                color: #676767;
                font-size: 0.11rem; 
                line-height: 0.25rem;
            margin-top: 0.25rem;
            }
        }
        li:nth-child(3n){
            margin-right: 0;
        }
         h3{
         width: 3.6rem;
            position: relative;
            overflow: hidden;
            span{
                display: inline-block;
                width: 50%;
                height: .22rem;
                position: relative;
                bottom: 0.29rem;
                right: 0;
                color: #fff;
            text-align: center;
            }
         .b_txt{
            font-size: 0.2rem;
            position: absolute;
            top: 43%;
            left: 26%;
         }
        }
    }

    .news_ul_card{
      width: 3.6rem;
      height: 2.2rem;
        background:rgba(243,243,243,1);
        padding: 0.2rem 0.1rem 0;
    }
    button{
        display: none;
    }
    .is-background{
        margin: .8rem 3rem;
    }
    .active{
        background: #20B7FE;
        bottom: 0.29rem;
        right: 0;
        color: #fff;
        border:none;
        text-align: center;
      }
      .b_txt {
        font-size: 0.2rem;
        position: absolute;
        top: 43%;
        left: 26%;
      }
    }
}
  }

  .news_ul_card {
    width: 3.6rem;
    height: 2.2rem;
    background:rgba(243,243,243,1);
    padding: 0.2rem 0.1rem 0;
  }
  button {
    display: none;
  }
  .is-background {
    margin: .8rem 3rem;
  }
  .active {
    background: #20B7FE;
    color: #fff;
    border:none;
  }
}
</style>
<style>
   .el-pagination.is-background .el-pager li{
   .el-pagination.is-background .el-pager li {
      width: 0.3rem;
      height: 0.3rem;
      line-height: 0.3rem;
   }
   .el-pagination button, .el-pagination span:not([class*="suffix"]){
   .el-pagination button, .el-pagination span:not([class*="suffix"]) {
      width: 0.45rem;
      height: 0.3rem;
      line-height: 0.3rem;