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

<<<<<<< Updated upstream
      <div class="art_card_pic" v-for="(v, i) in newsList" :key="i" @click="toDetails(v.videopic)">
        <div class="art_context" >
=======
      <div
        class="art_card_pic"
        v-for="(v, i) in newsList"
        :key="i"
        @click="toDetails(v.videopic)"
      >
        <div class="art_context">
>>>>>>> Stashed changes
          <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>
<<<<<<< Updated upstream
            <div class="greyFont">浏览量 {{v.liul}}</div>
=======
            <div class="greyFont">浏览量 {{ v.liul }}</div>
>>>>>>> Stashed changes
          </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";
<<<<<<< Updated upstream
export default {
=======

export default {
  dataList: [
    {
      titleName: "红馆听老兵爷爷讲故事",
      liul: 2022,
      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: 1120,
      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: 1120,
      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",
    },
  ],
>>>>>>> Stashed changes
  components: { Tabbar4 },
  data() {
    return {
      tabsName: 1,
<<<<<<< Updated upstream
      newsList: [
=======
      list1: [
>>>>>>> Stashed changes
        {
          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: 68,
          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",
        },
      ],
<<<<<<< Updated upstream
    };
  },
  methods: {
    //详情新闻
    toDetails(v) {
      // sessionStorage.setItem('videopic',v)
      window.open(v)
=======
      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);
>>>>>>> Stashed changes
      // 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>