scrm-vue/src/scrm_pages/site/components/news-information.vue

<template>
    <div class="wq7">
      <img src="static\images\u.png" style="width:5px;height;20px;">
       <div class="kefont"><span >新闻动态</span></div>
         <div class="more" @click="more()">查看更多</div>
            <div class="logo"><img src="static\images\u216.png"></div>
              <div class="swiper-container" id="swiper3">
                <div class="swiper-wrapper" id="wrapper3">

                  <div class="swiper-slide">
                    <div class="new">
                     <div class="new2">
                      <img src="static/images/a.jpg" style="width:160px;height:125px;border-radius:5px;"/> 
                    </div>
                    <div class="new3">
                     <span>胎儿鉴定样本采集方法</span>
                    </div>
                    <div class="new4"></div>
                    <div class="new5">
                    <span>
                        孕期胎儿DNA鉴定,必须通过穿刺的办法提取绒毛组织或者...
                     </span>
                    </div>
                 </div>   
               </div>

                <div class="swiper-slide">
                   <div class="new">
                     <div class="new2">
                        <img src="static/images/a.jpg" style="width:160px;height:125px;border-radius:5px;"/> 
                     </div>
                    <div class="new3">
                        <span>胎儿鉴定样本采集方法</span>
                    </div>
                     <div class="new4"></div>
                     <div class="new5">
                     <span>
                      孕期胎儿DNA鉴定,必须通过穿刺的办法提取绒毛组织或者...
                     </span>
                     </div>
                  </div>   
                 </div>                               
             </div>
          </div>
     </div>
</template>

<script>
     import { getQueryNewModel } from '@/api/site/site'
    export default {
        name: "news-information",
        data(){
           return{
           
           } 
        },
        methods:{         
        
        },
        created(){
          this.getQueryNewModel();
        },
        mounted(){
            var mySwiper2 = new Swiper('#swiper3', {
              direction:"horizontal",
              autoplay:false,
              spaceBetween:3,
              loopAdditionalSlides:10,
              slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量
              centeredSlides: true, // active slide 居中
              observer:true,//动态加载图片
              pagination: {
                el: '.swiper-pagination',
               },
            });

             var swiper1 = new Swiper('#swiper4', {
                direction:"vertical",               
                spaceBetween:3,
                loopAdditionalSlides:10,
                slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量
                centeredSlides: true, // active slide 居中
                paginationClickable: true,
                observer:true,//动态加载图片
                observeParents:true,
                pagination: {
                    el: '.swiper-pagination',
                },
            });
        }
    }
</script>

<style scoped>
   .wq7{
        width: 320px;
        height: 250px;
        /* background-color: black; */
        color: #ffffff;
       /* // border: solid 1px black; */
        margin-bottom: 0px;
     }

       .new{
    width: 160px;
    height: 210px;
    border: solid 0.8px #333333;
    border-radius:5px;
  }
  .new2{
    width: 160px;
    height: 125px;
   /* // border:solid 1px yellow; */
  }
  .new3{
    width: 140px;
    height: 20px;
    font-size: 14px;
  /* //  border: solid 1px yellow; */
    margin-top: 5px;
    margin-left: 10px;
    color:  #666666;
  }
  .new4{
    width: 150px;
    /* //height: 1px; */
    border: solid 0.8px #333333;
    background-color: #333333;
    margin-left: 3px;
  }
  
  .new5{
    width: 145px;
    height: 40px;
    /* //border:solid 1px red; */
    margin-top: 5px;
    margin-left: 5px;
    font-size: 10px;
    color: #333333;
  }

    #wrapper4{
     width: 50%;
   }  

    .kefont{
      font-size: 14px;
       color: red;
       margin-left: 8px;
       margin-top: -20px;
    }

     .more{
       position: absolute;
       font-size: 14px;
       color:black;
       margin-left: 220px;
       margin-top: -22px;
     }

     
    .logo{
       position: absolute;
       margin-left: 280px;
       margin-top: -22px;
     }
</style>