<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>