<template>
  <div class="tabsCalendarMainNewsBox">
    <el-tabs v-model="activeName">
      <el-tab-pane label="市场资讯" name="sczx">
        <ul class="newsListBox">
          <li class="newsCalendarBox">
            <div class="CalendarItemBox">
              <div class="Calendar">
                <div class="CalendarDay">3</div>
                <div class="CalendarMonth">2024-12</div>
              </div>
              <div class="CalendarNewsTitle">
                <div class="CalendarTitle">商务部：牢牢把握产业振兴，在抓好农产品冷链物流等方面采取更多务实举措</div>
                <div class="newsContent">会议总结了前一阶段工作情况，研究商务服务乡村振兴重点工作和定点帮扶工作计划，部署下一步工作。 </div>
              </div>
            </div>
          </li>
          <li class="newsItemBox">
            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
            <div>11-29</div>
          </li>
          <li class="newsItemBox">
            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
            <div>11-29</div>
          </li>
          <li class="newsItemBox">
            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
            <div>11-29</div>
          </li>
          <li class="newsItemBox">
            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
            <div>11-29</div>
          </li>
          <li class="newsItemBox">
            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
            <div>11-29</div>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="市场行情" name="schq"></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: {
    
  },
  data() {
    return {
      activeName:"sczx"
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  mounted() {

  },
};
</script>

<style scoped lang="less">
  .tabsCalendarMainNewsBox {
    width: 100%;
    position: relative;
    .newsListBox {
      padding-left: 0;
      .newsCalendarBox {
        list-style-type: none;
        margin-bottom: 20px;
        width: 100%;
        .CalendarItemBox {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          .Calendar {
            width: 100px;
            height: 100px;
            background: #EAF3FF;
            box-sizing: border-box;
            padding: 10px 10px 0 10px;
            margin-right: 25px;
            .CalendarDay {
              font-size: 38px;
              color: #19499F;
              text-align: center;
              padding-bottom: 10px;
              border-bottom: 1px solid #19499F;
            }
            .CalendarMonth {
              font-size: 16px;
              color: #19499F;
              text-align: center;
              padding-top: 10px;
            }
          }
          .CalendarNewsTitle {
            flex: 1;
            .CalendarTitle {
              font-size: 18px;
              color: #333;
            }
            .newsContent {
              font-size: 16px;
              color: #999999;
              padding-top: 10px;
            }
          }
        }
      }
      .newsItemBox {
        list-style-type: none;
        height: 20px;
        margin-bottom: 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;
        }
      }
    }
  }
</style>

