admin_home/src/views/template/style/components/list/1.vue

<template>
  <div class="listNewsBox">
    <div class="listNewsTitle">
      <div class="listNewsStyleBorder">新闻列表标题</div>
    </div>
    <ul class="listNewsUl">
      <li>
        <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
        <div>11-29</div>
      </li>
      <li>
        <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
        <div>11-29</div>
      </li>
      <li>
        <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
        <div>11-29</div>
      </li>
      <li>
        <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
        <div>11-29</div>
      </li>
      <li>
        <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
        <div>11-29</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    
  },
  data() {
    return {
      
    };
  },
  methods: {
    
  },
  mounted() {

  },
};
</script>

<style scoped lang="less">
  .listNewsBox {
    position: relative;
    .listNewsTitle {
      color: #19499F;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #D9D9D9;
      .listNewsStyleBorder {
        border-bottom: 2px solid #19499F;
        padding-bottom: 18px;
        padding-top: 18px;
      }
    }
    .listNewsUl {
      padding: 0;
      li {
        list-style-type: none;
        height: 20px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        a {
          display: block;
          //background: url('../../../../assets/template/component/listyle.png') no-repeat left center;
          box-sizing: border-box;
          padding-left: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          flex: 1;
          font-size: 16px;
        }
        div {
          color: #999;
          width: 50px;
        }
      }
    }
  }
</style>