<template>
    <div>
             <div class="scroll"  id="targetfive"  style="padding:15px 4%;">
                <div class="actilist" v-for="it in articlelist" :key="it.id" @click="singleArticleInfo(it.id,it.user_org_id)">
                    <div class="acthead">
                       <img :src="it.imgs" style="width:80px;height:80px">
                     </div>
                    <div class="actcontent">
                    <div class="actname"><span>{{it.title}}</span></div>
                    <!-- <div class="actcomments">阅读:{{it.real_read_num}}|评论:{{it.comment_num}}|点赞:{{it.star_num}}</div> -->
                    </div>
                 </div>
              </div>
     </div>
</template>

<script>
    import { articlemore,singleArticleInfo } from "@/api/micro/micro"
    export default {
        name: "articlelist",
        data(){
           return{
              articlelist:[], 
           }
        },
        methods:{
          articlemore(id,orgid){
            articlemore(id,orgid).then(response=>{
                  if(response.data.state == 1){
                   var articlelist =  response.data.data.articlelists;  
                   console.log("文章列表数据",articlelist)             
                   this.articlelist =  response.data.data.articlelists;
               }
            })  
          },

          singleArticleInfo(id,orgid){
            this.$router.push({
                path:"/articlelistdetail",
                query:{
                    id:id,
                    orgid:orgid,
                }
            })
          }
        },
        created(){
           const id = this.$route.query.id;
           const orgid = this.$route.query.orgid;
           console.log("id是多少",id)
           console.log("orgid是多少",orgid)
          this.articlemore(id,orgid)
        }
    }
</script>

<style scoped>
    .actilist{
      width:100%;
      height: 90px;
      /* border:solid 1px red; */
      margin-left: 5px;
    }

    .acthead{
      width: 80px;
      height: 80px;
     /* border: solid 1px red; */
      margin-left: 5px;
      margin-top: 5px;
    }

    .actcontent{
      width: 200px;
      height: 80px;
       /* border: solid 1px red; */
      margin-left: 90px;
      margin-top: -82px;
    }

     .actname{
      width:190px;
      height: 15px;
      /* border:solid 1px red; */
      margin-left: 5px;
      margin-top: 10px;
      font-size: 14px;
      overflow: hidden;
       text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .actcomments{
      width: 190px;
      height: 20px;
      /* border:solid 1px red; */
      margin-left: 5px;
      margin-top: 2px;
      font-size: 14px;
    }
</style>
