<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" v-for="(v, i) in newsList" :key="i" @click="toDetails(v.videopic)"> <div class="art_context" > <div class="art_title">{{ v.titleName }}</div> <div class="art_bot"> <div class="redSticky" v-if="v.liul > 1000">置顶</div> <div class="greyTime">发布于2022.7.4</div> <div class="greyFont">浏览量 {{v.liul}}</div> </div> </div> <div class="art_pic"> <img :src="v.imgpic" /> </div> </div> </div> <div class="imgPic" @click="toChoose"> <img src="@/assets/changeSchool.png" /> </div> <tabbar4 active="fruit"></tabbar4> </div> </template> <script> import Tabbar4 from "@/component/Tabbar4"; export default { components: { Tabbar4 }, data() { return { tabsName: 1, list1: [ { titleName: "假日红色研学——酱文化篇", liul: 2022, imgpic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/300d6414-1639-4bb8-89b1-3a916dab4359.png", videopic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/0676ee97-d5bc-4d6a-ae9b-4f942fcdd213.mp4", }, { titleName: "假日红色研学——消防篇", liul: 1120, imgpic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/93314705-ca4e-43a0-b2cd-4ccf8aa9d850.png", videopic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/f997a748-4575-4759-9834-e6a34612bc14.mp4", }, { titleName: "假日红色研学——兰亭篇", liul: 320, imgpic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/dbe041a4-3c60-411f-afa8-557c18210d06.png", videopic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/7850890c-f8d1-4e1d-bfc7-3cd5c6f69e81.mp4", }, { titleName: "假日红色研学——非遗篇", liul: 113, imgpic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/f058b51e-48ee-4f11-b571-a0c85c3ab9ce.png", videopic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/6e8f66b5-d44c-4ca7-aaf9-c82eec23532f.mp4", }, { titleName: "假日红色研学——黄酒小镇篇", liul: 365, imgpic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/1b0b852e-97bd-4faf-9034-159bae23bf88.png", videopic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/2d1ef3db-4003-4722-a4a2-853d54a284da.mp4", }, { titleName: "假日红色研学——景岳堂篇", liul: 154, imgpic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/75b8a162-1b35-4478-b286-d38e59b25c88.png", videopic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/9de14f1c-c996-475c-b839-8d438ca4ec2b.mp4", }, { titleName: "假日红色研学——鲁迅故里篇", liul: 702, imgpic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/b3cca4ff-6304-4591-8b35-959034316d11.png", videopic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/e06b10f0-4596-44d2-a937-5b038ede70da.mp4", }, { titleName: "假日红色研学——青藤书屋篇", liul: 483, imgpic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/d014be8f-e30c-4122-ab98-5d7853b8b525.png", videopic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/a68075df-4c33-482a-8be3-b921cf3da7a4.mp4", }, { titleName: "假日红色研学——棠棣篇", liul: 78, imgpic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/9664fc60-22ec-44ec-80a1-cb8177963436.png", videopic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/cb82b2ed-1f80-48e5-9c39-ef2b0a388aa4.mp4", }, { titleName: "假日红色研学——周恩来祖居篇", liul: 35, imgpic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/24c53642-5191-453a-949c-3bef03e6ec4e.png", videopic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/d623f9a2-4e70-4fe0-ba52-7703af38248a.mp4", }, { titleName: "假日红色研学——宝业篇", liul: 68, imgpic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/1819f0fd-a4cf-44ce-b832-545fe0c571f3.png", videopic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/a24a2a12-4771-4b84-b1b5-1612bb200da4.mp4", }, ], list2: [ { titleName: "红馆听老兵爷爷讲故事", liul: 1684, imgpic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/c722b105-9e17-4cc9-8cfd-2c98af72f9ec.png", videopic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/84a71b3e-3f43-425b-bea3-0a75bbffed1d.mp4", }, { titleName: "雏鹰小队红色研学", liul: 450, imgpic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/95cf5713-194f-49ba-8487-7625e2a705fe.png", videopic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/43fb6927-e059-4f59-a3c9-0b1b70d2f10a.mp4", }, { titleName: "英才素质拓展训练营", liul: 655, imgpic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/59876663-e69f-4f54-abd4-901687192a94.png", videopic: "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/6ac9d056-8d59-4bbc-ac99-d44f35557c03.mp4", }, ], newsList: [], }; }, computed: { schoolName() { return this.$route.query.schoolName; }, }, watch: { schoolName: { handler: function (v, k) { if (v == "柯桥区中国轻纺城小学") { this.newsList = JSON.parse(JSON.stringify(this.list2)); } else { this.newsList = JSON.parse(JSON.stringify(this.list1)); } }, immediate: true, }, }, methods: { //详情新闻 toDetails(v) { console.log(this.schoolName); window.open(v); // this.$router.push({ name: "pageDetails" }); }, //选择 toChoose() { this.$router.push({ name: "chooseSchoolOne" }); }, }, }; </script> <style lang="scss" scoped> .cardBox { padding: 2vw 0; box-sizing: border-box; .contextBox { margin-bottom: 140px; .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; img { width: 100%; height: 100%; } } } } .imgPic { position: fixed; right: 2vw; bottom: 40vw; width: 26vw; height: 26vw; img { width: 100%; height: 100%; } } } </style>