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

<template>
  <div class="tabsNewsBox">
    <editBtn :id="id" :sort="sort" :type="2" :size="5"/>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="地方动态" name="first">
        <ul class="newsListBox">
          <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>
      </el-tab-pane>
      <el-tab-pane label="农资市场" name="second"></el-tab-pane>
      <el-tab-pane label="农产市场" name="third"></el-tab-pane>
      <el-tab-pane label="农村市场" name="fourth"></el-tab-pane>
    </el-tabs>
  </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">
  .tabsNewsBox {
    .newsListBox {
      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>