<template>
  <div>
    <div class="pushlist_topbar">
      <div class="pushlist_topbar_left">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui"></use>
        </svg>
      </div>
      <div class="pushlist_topbar_middle">
        推送资讯
      </div>
      <div class="pushlist_topbar_right">

      </div>
    </div>

    <div class="pushlist_list_wrap">
      <div class="pushlist_list" v-for="(pushitem,index) in pushlist" :key="index">
        <div class="pushlist_list_top">
          <div class="pushlist_list_top_type">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shujukanban"  v-if="pushitem.type == '报告'"></use>
              <use xlink:href="#icon-icon-test"  v-if="pushitem.type == '单据'"></use>
            </svg>
            {{pushitem.type}}
          </div>
          <div class="pushlist_list_top_time">{{pushitem.time}}</div>
        </div>
        <div class="pushlist_list_content">
          {{pushitem.content}}

        </div>
      </div>
    </div>

  </div>

</template>
<script>
  export default {
    name: "pushlist",
    data() {
      return {
        pushlist: [{
            type: "报告",
            time: "2019-02-25 18:30",
            content: "2月25日公司经营日报已出炉，欢迎查看！"
          },
          {
            type: "单据",
            time: "2019-02-25 16:30",
            content: "客户【张三经销商】销售订单SC190214001已完成发货！"
          },
          {
            type: "单据",
            time: "2019-02-25 16:20",
            content: "收到客户【张三经销商】一笔销售订金款项：20,000元！"
          },
          {
            type: "报告",
            time: "2019-02-24 18:30",
            content: "2月24日公司经营日报已出炉，欢迎查看！"
          },
          {
            type: "单据",
            time: "2019-02-24 11:30",
            content: "客户【李四经销商】销售订单SC190213009已完成发货！"
          },
          {
            type: "报告",
            time: "2019-02-23 18:30",
            content: "2月23日公司经营日报已出炉，欢迎查看！"
          },
          {
            type: "报告",
            time: "2019-02-22 18:30",
            content: "2月22日公司经营日报已出炉，欢迎查看！"
          },
          {
            type: "报告",
            time: "2019-02-21 18:30",
            content: "2月21日公司经营日报已出炉，欢迎查看！"
          },
          {
            type: "报告",
            time: "2019-02-20 18:30",
            content: "2月20日公司经营日报已出炉，欢迎查看！"
          },
          {
            type: "报告",
            time: "2019-02-19 18:30",
            content: "2月19日公司经营日报已出炉，欢迎查看！"
          },
          {
            type: "报告",
            time: "2019-02-18 18:30",
            content: "2月18日公司经营日报已出炉，欢迎查看！"
          }
        ]

      }
    }

  }

</script>
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    font-family: "微软雅黑";
  }

  .pushlist_topbar {
    min-height: 44px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 9999;
    display: flex;
    font-size: 18px;
    align-items: center;
  }

  .pushlist_topbar_left {
    /* flex: 0 0 %; */
    margin-left: 10px;
  }

  .pushlist_topbar_middle {
    text-align: center;
    flex: 0 0 85%;
  }

  .pushlist_topbar_right {
    /* flex: 0 0 10%; */
    position: absolute;
    right: 10px;
  }

  .pushlist_list_wrap {
    padding: 50px 0
  }

  .pushlist_list {
    margin: 10px 20px;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .pushlist_list_top {
    display: flex;
    align-items: center;
  }

  .pushlist_list_top_type {
    color: #0275c2;
    font-size: 16px;
  }

  .pushlist_list_top_time {
    font-size: 13px;
    color: #838383;
    position: absolute;
    right: 20px
  }

  .pushlist_list_content {
    padding-top: 10px;
    font-size: 16px;
  }

</style>
