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

<template>
  <div class="listNewsBox">
    <editBtn :id="id" :sort="sort" :type="1" :size="5"/>
    <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>
import editBtn from '../../../public/editBtn.vue'
export default {
  components: {
    editBtn
  },
  props: {
    id:{
      type:Number,
      default:0
    },
    sort:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
      activeName:"first"
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  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>