teaching-uniapp/pages/activityPage/activityPage.vue

<template>
  <view class="activity">
    <statusBar :item="navBarData"></statusBar>
    <viewX-Case class="mid">
      <template #title>
        <view class="title three-font">直播活动</view>
      </template>
      <template #lookMore>
        <view class="lookMore fz-font"> 查看更多 </view>
      </template>
      <template #activeBlock>
        <view
          class="activeData"
          v-for="(item, index) in liveList"
          :key="index"
          @click="gotoAnnoun(index)"
        >
          <!-- <image src="http://43.139.158.220:5007/img/static/activity/bg1.png" mode="aspectFill"></image> -->
          <image :src="liveList[index].img" mode="aspectFill"></image>

          <view class="liveBroadcast">
            <view class="title">
              <view class="tag bqZ-font">类型</view>
              <text three-font>{{ item.className }}</text>
            </view>

            <view class="operate">
              <view class="left">
                <view class="img">
                  <image
                    :src="liveList[index].imgName"
                    mode="aspectFill"
                  ></image>
                </view>
                <view class="user fwb-font">{{ item.name }}</view>
              </view>
              <view class="collection">
                <!-- <view class="" style="display: flex;margin-right: 10rpx;align-items: center;"> -->
                <view class="img">
                  <image
                    src="http://43.139.158.220:5007/img/static/yym/Vector (Stroke) (2).png"
                    mode="aspectFill"
                  ></image>
                </view>
                <text class="fz-font">收藏</text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </viewX-Case>

    <viewX-Case style="margin-top: 10px">
      <template #title>
        <view class="title three-font">常规教研活动</view>
      </template>
      <template #lookMore>
        <view class="lookMore fz-font" @click="lookMore">查看更多</view>
      </template>
      <template #activeBlock>
        <!-- <activity-case v-for="i in 10" :key="i"></activity-case> -->
        <teaching-case
          v-for="(item, index) in activeList"
          :item="actData"
          :key="index"
          :activeList="item"
          :indexId="index"
        ></teaching-case>
      </template>
    </viewX-Case>

    <!-- 		<uni-fab ref="fab" 
		:pattern="pattern" 
		:horizontal="horizontal" 
		:vertical="vertical"
		:direction="direction"
		buttonColor="#0056a8"
		@fabClick="fabClick" /> -->
    <view class="" style="height: 30rpx; width: 100%"> </view>
    <view class="qiu" @click="fabClick">
      <image src="/static/yym/jia.png" mode="aspectFill"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navBarData: {
        title: "活动", //导航栏标题
        btn: 0, //是否显示返回按钮 0不显示  1 显示
      },
      actData: {
        btn: 1,
      },
      title: "uni-fab",
      liveList: [
        {
          img: "http://43.139.158.220:5007/img/static/img/img1.png",
          className: "丽湖职教双创教育国际虚拟教研室2023年常规教研活动安排",
          imgName: "http://43.139.158.220:5007/img/static/activity/Name1.png",
          name: "李芳",
        },
        {
          img: "http://43.139.158.220:5007/img/static/img/img2.png",
          className: "创业融资实务",
          className:
            "赛创融合、协同育人—高职院校双创大赛赛事组织| 丽湖职教双创教育国际虚拟教研室常规教研活动第3期顺利举",
          name: "郑秀",
        },
        {
          img: "http://43.139.158.220:5007/img/static/img/img3.png",
          className:
            "产教融合情境下的双创通识课程建设 | 丽湖职教双创教育国际虚拟教研室常规教研活动第2期顺利举行",
          imgName: "http://43.139.158.220:5007/img/static/activity/Name3.png",
          name: "杨哲旗",
        },
        {
          img: "http://43.139.158.220:5007/img/static/img/img4.png",
          className:
            "打造双创“金课” | 丽湖职教双创教育国际虚拟教研室常规教研活动第1期顺利举行",
          imgName: "http://43.139.158.220:5007/img/static/activity/Name2.png",
          name: "杨广",
        },
      ],
      activeList: [
        {
          img: "http://43.139.158.220:5007/img/static/img/img1.png",
          count: "17",
          className: "丽湖职教双创教育国际虚拟教研室2023年常规教研活动安排",
          intro:
            "丽湖职教双创教育国际虚拟教研室为立足全国，辐射海外的国际化教研室，围绕创新创业教育的人才培养与课程建设开展深度研究。教研室以贯彻落实立德树人根本任务，通过加强跨专业、跨校、跨地域的教研交流，推动高校协同打造国际化的精品教学资",
        },
        {
          img: "http://43.139.158.220:5007/img/static/img/img2.png",
          count: "6",
          className:
            "赛创融合、协同育人—高职院校双创大赛赛事组织| 丽湖职教双创教育国际虚拟教研室常规教研活动第3期顺利举",
          intro:
            " 为全面落实双创教育“以赛促教、以赛促学、以赛促创”，提升学校双创大赛的组织效果和参赛成绩，促进更多教育成果落地，实现赛创融合育人的目标，丽湖职教双创教育国际虚拟教研室于4月26日组织举办了第3期线上教研活动，活动主题为“赛",
        },
        {
          img: "http://43.139.158.220:5007/img/static/img/img3.png",
          count: "1",
          className:
            "产教融合情境下的双创通识课程建设 | 丽湖职教双创教育国际虚拟教研室常规教研活动第2期顺利举行",
          intro:
            "【图片】为提升职业院校双创课程建设水平，促进双创课程的改革与发展，丽湖职教双创教育国际虚拟教研室于3月29日组织举办了以“产教融合情境下的双创通识课程建设”为主题的第2期线上教研活动，来自全国各职业院校的60多位教师参会。本",
        },
        {
          img: "http://43.139.158.220:5007/img/static/img/img4.png",
          count: "0",
          className:
            "打造双创“金课” | 丽湖职教双创教育国际虚拟教研室常规教研活动第1期顺利举行",
          intro:
            "为推动高职院校双创课程建设，打造更多的双创精品课程和金课，丽湖职教双创教育国际虚拟教研室于2月22日组织举办了以“如何打造高职双创金课”为主题的第1期教研活动，来自全国各高职院校的80多位教师参会。本次活动由",
        },
      ],
    };
  },
  methods: {
    lookMore() {
      const value = uni.getStorageSync("login");
      if (value == 0) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
      } else {
        uni.navigateTo({
          url: "/pages/activityList/activityList",
        });
      }
    },
    fabClick() {
      const value = uni.getStorageSync("login");
      if (value == 0) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
      } else {
        uni.navigateTo({
          url: "/pages/publish/publish",
        });
      }
    },
    gotoAnnoun(index) {
      const value = uni.getStorageSync("login");
      if (value == 0) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
      } else {
        const urls = [
          "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1183",
          "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1211",
          "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1210",
          "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1209",
        ];
        if (index >= 0 && index < urls.length) {
          const url = urls[index];
          uni.navigateTo({
            url: "/pages/skipone/skipone?url=" + encodeURIComponent(url),
          });
        }
      }
    },
    onChange: function (e) {
      this.old.x = e.detail.x;
      this.old.y = e.detail.y;
    },
  },
};
</script>

<style lang="scss">
.activity {
  .qiu {
    width: 90rpx;
    height: 90rpx;
    position: fixed;
    z-index: 19;
    right: 30rpx;
    bottom: 10vh;
    border-radius: 50%;
    background-color: rgba(0, 86, 168, 1);
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      position: absolute;

      width: 36rpx;
      height: 36rpx;
    }
  }

  .mid {
    // margin:20px 0;
    .activeData {
      width: 460rpx;
      display: inline-block;
      margin-right: 20px;

      image {
        width: 100%;
        height: 120px;
        border-radius: 10px;
        margin-bottom: 10px;
      }

      .liveBroadcast {
        flex: 1;
        width: 460rpx;
        display: flex;
        flex-direction: column;
        align-content: flex-end;

        .title {
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;

          .tag {
            // border: 1px #00b2b6 solid;
            // // font-size: 12px;
            // width: 64rpx;
            // height: 38rpx;
            // display: flex;
            // white-space: nowrap;
            // justify-content: center;
            // align-items: center;
            // // padding: 2px 4px;
            // padding: 1rpx 4rpx;
            // border-radius: 3px;
            // margin-right: 10rpx;
            // color: #00b2b6;
            border: 1px #00b2b6 solid;
            font-size: 20rpx;
            width: 64rpx;
            display: flex;
            height: 34rpx;
            white-space: nowrap;
            justify-content: center;
            align-items: center;
            // padding: 4px 12px 4px 12px;
            border-radius: 5rpx;
            margin-right: 10rpx;
            color: #00b2b6;
          }

          text {
            // display: -webkit-box;//对象作为弹性伸缩盒子模型显示
            // overflow: hidden;//溢出隐藏
            // -webkit-box-orient: vertical;//设置伸缩盒子对象的子元素的排列方式
            // -webkit-line-clamp: 2;//设置 块元素包含的文本行数
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .operate {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20rpx 0;
          color: #666666;

          // margin-bottom: 20rpx;
          // padding-bottom: 20rpx;
          .left {
            display: flex;
            align-items: center;

            .img {
              width: 48rpx;
              height: 48rpx;
              margin-right: 10rpx;

              image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }

            .user {
            }
          }

          .collection {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 88rpx;
            height: 32rpx;
            position: relative;

            .img {
              position: absolute;
              left: 0;
              top: 6rpx;
              transform: translate(-130%, 0);
            }

            image {
              width: 27rpx;
              height: 25rpx;
              display: block;
            }

            // float: right;
            // font-size: 14px;
            // padding-top: 10px;
          }
        }
      }
    }

    .activeData:nth-child(1) {
      margin-left: 15px;
    }
  }

  .title {
    font-weight: bold;
    // color: #999999;
  }

  .lookMore {
    color: #666666;
    // font-size: 14px;
  }
}
</style>