<template>
  <div class="container8">
    <div class="aj" v-for="(item,index) in data" :key="index">
      <div id="triangle-up"></div>
      <div class="top">
        <div class="left">{{item.title}}</div>
        <div class="right">{{item.date}}</div>
      </div>
      <div class="text">
        {{item.content}}
      </div>
    </div>
    
  </div>
  <!-- {data:{},list:[
  {title:'工作室动态',content:'王XX工作室举办了一项党建活动',date:'2021-03-15'}
  ,{title:'组织生活',content:'举办了支部委员会议：会议内容是两学一做，会议地点：二楼会议室',date:'2021-03-15'},
  {title:'组织生活',content:'研究定制12月主题党日相关工作',date:'2021-03-15'},
  {title:'组织生活',content:'落实保持共产党员先进性教育要求，抓好党员队伍建设',date:'2021-03-15'},
  {title:'全体党员大会',content:'学习党的章程讨论党支部相关规章制度草案',date:'2021-03-15'},
  {title:'全体党员大会',content:'明确党员发展工作程序',date:'2021-03-15'},
  {title:'互联互动',content:'共驻共建双向服务|枣园街道推进社区党建与行业党建互联互动',date:'2021-03-15'},
  {title:'互联互动',content:'市体育局党总支开展党建互联互动活动',date:'2021-03-15'},
  {title:'党建案例',content:'城市基层党建工作经验分享',date:'2021-03-15'},
  {title:'党建案例',content:'乡村党建工作重点发展方向',date:'2021-03-15'}
  ],
  msg:'加载成功',state:'200'} -->
</template>
  
<script>
// import {getTzhddt} from 
export default {
  data() {
    return {
      data: [
        { title: '工作室动态', content: '王XX工作室举办了一项党建活动', date: '2021-03-15' },
        { title: '组织生活', content: '举办了支部委员会议：会议内容是两学一做，会议地点：二楼会议室', date: '2021-03-15' },
        { title: '组织生活', content: '研究定制12月主题党日相关工作', date: '2021-03-15' },
        { title: '组织生活', content: '落实保持共产党员先进性教育要求，抓好党员队伍建设', date: '2021-03-15' },
        { title: '全体党员大会', content: '学习党的章程讨论党支部相关规章制度草案', date: '2021-03-15' },
        { title: '全体党员大会', content: '明确党员发展工作程序', date: '2021-03-15' },
        { title: '互联互动', content: '共驻共建双向服务|枣园街道推进社区党建与行业党建互联互动', date: '2021-03-15' },
        { title: '互联互动', content: '市体育局党总支开展党建互联互动活动', date: '2021-03-15' },
        { title: '党建案例', content: '城市基层党建工作经验分享', date: '2021-03-15' },
        { title: '党建案例', content: '乡村党建工作重点发展方向', date: '2021-03-15' }
      ]
    }
  }
};
</script>
  
<style scoped lang="scss">
.container8 {
  width: 22.3958vw;
  height: 49.4623vh;

  //   background-color: pink;
  //   border: 1px solid #00ffff;
  .aj {
    width: 22.3958vw;
    height: 4.5161vh;
    border-bottom: 1px solid #1a66ae;
    background-color: rgba(255, 255, 255, .1);
    overflow: hidden;
    padding: 0 1.0417vw;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    #triangle-up {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      border-right: .3646vw solid transparent;
      border-top: 0.7526vh solid #00ffff;
    }

    .top {
      //  background-color: #fff;
      // width: 430px;
      display: flex;
      justify-content: space-between;
      font-size: .625vw;
      color: #fff;
      //  justify-content: space-around;
      // padding-right: 10px;
      // padding-right: ;
      // padding: 0.3236vh .5208vw;
      align-items: center;
      // .left {
      // // margin-right: 1.5625vw;
      // }
    }

    .text {
      // width: 100%;
      width: 22.3958vw;
      // height: 5.8252vh;
      text-align: left;
      font-size: .625vw;
      color: #fff;
      // padding-left: .7813vw;
      // overflow: hidden;
      // background-color: pink;
    }
  }
}
</style>