<template>
  <div class="cardBox">
    <van-tabs v-model="tabsName">
      <van-tab title="红色教育"></van-tab>
      <van-tab title="劳动教育"></van-tab>
      <van-tab title="课外实践"></van-tab>
      <van-tab title="研学旅行"></van-tab>
    </van-tabs>

    <div class="contextBox">
      <div class="art_card" @click="toDetails">
        <div class="art_title">庆祝中国共产主义青年团成立100年大会</div>
        <div class="art_bot">
          <div class="redSticky">置顶</div>
          <div class="greyTime">发布于2022.5.10</div>
          <div class="greyFont">浏览量 2022</div>
        </div>
      </div>

      <div class="art_card_pic">
        <div class="art_context">
          <div class="art_title">不忘初心 砥砺前行</div>
          <div class="art_bot">
            <div class="redSticky">置顶</div>
            <div class="greyTime">发布于2022.5.10</div>
            <div class="greyFont">浏览量 2022</div>
          </div>
        </div>
        <div class="art_pic"></div>
      </div>
    </div>

    <tabbar active="fruit"></tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/c_Tabbar.vue'
export default {
  components: { Tabbar },
  data() {
    return {
      tabsName: 1,
    };
  },
  methods: {
    //详情新闻
    toDetails() {
      this.$router.push({ name: "pageDetails" });
    },
  },

};
</script>

<style lang="scss" scoped>
.cardBox {
  padding: 2vw 0;
  box-sizing: border-box;

  .contextBox {
    .art_card {
      padding: 28px;
      box-sizing: border-box;

      .art_title {
        width: 100%;
        font-size: 34px;
        font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; //限制行数
        overflow: hidden; //超出部分隐藏
        text-overflow: ellipsis; //用一个省略号代替超出的内容
      }

      .art_bot {
        padding-top: 22px;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .redSticky {
          color: #ff4444;
          font-size: 24px;
          padding: 2px;
          box-sizing: border-box;
          border: 1px solid #ff4444;
        }

        .greyTime {
          color: #999;
          font-size: 24px;
          margin: 0 20px;
        }

        .greyFont {
          color: #999;
          font-size: 24px;
        }
      }
    }
    .art_card_pic {
      padding: 28px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .art_context {
        height: 180px;
        display: flex;
        align-content: space-between;
        flex-wrap: wrap;

        .art_title {
          width: 100%;
          font-size: 34px;
          font-weight: bold;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; //限制行数
          overflow: hidden; //超出部分隐藏
          text-overflow: ellipsis; //用一个省略号代替超出的内容
        }

        .art_bot {
          padding-top: 22px;
          box-sizing: border-box;
          display: flex;
          align-items: center;

          .redSticky {
            color: #ff4444;
            font-size: 24px;
            padding: 2px;
            box-sizing: border-box;
            border: 1px solid #ff4444;
          }

          .greyTime {
            color: #999;
            font-size: 24px;
            margin: 0 20px;
          }

          .greyFont {
            color: #999;
            font-size: 24px;
          }
        }
      }
      .art_pic {
        width: 180px;
        height: 180px;
        flex-shrink: 0;
        background-color: #ff4444;
      }
    }
  }
}
</style>