teaching-uniapp/pages/index/index.vue

<template>
  <view class="content">
    <statusBar :item="navBarData"></statusBar>
    <view class="top">
      <!-- <image src="http://43.139.158.220:5007/img/static/logo.png" mode="aspectFill"></image> -->
      <image
        src="http://43.139.158.220:5007/img/static/yym/Rectangle25.png"
        mode="aspectFill"
        @click="gotoHome"
      >
      </image>
    </view>

    <viewX-Case class="mid">
      <template #title>
        <view class="title three-font">专题教研活动</view>
      </template>
      <template #lookMore>
        <view class="lookMore fz-font" @click="gotoActivity">查看更多</view>
      </template>
      <template #activeBlock>
        <view
          class="activeData"
          @click="gotoActivityDetail(index)"
          v-for="(item, index) in activeList"
          :key="index"
        >
          <image :src="item.img" mode="aspectFill"></image>
          <view class="activeTit sBtn-font" style="font-weight: bold">
            {{ item.className }}
          </view>
          <view class="numData">
            <view class="proNum bqZ-font">{{ item.count }} 人报名</view>
            <view class="price num-font">
              <text class="fz-font">￥</text>299</view
            >
          </view>
          <button class="btn sBtn-font" @click.stop="gotoHd(index)">
            立即报名
          </button>
        </view>
      </template>
    </viewX-Case>

    <viewX-Case>
      <template #title>
        <view class="title three-font">推荐课程</view>
      </template>
      <template #lookMore>
        <view class="lookMore fz-font" @click="teachmore">查看更多</view>
      </template>
      <template #teaching>
        <teaching-case
          v-for="(item, index) in classList"
          :key="index"
          :classList="item"
          :indexId="index"
        ></teaching-case>
      </template>
    </viewX-Case>
    <view class="" style="height: 30rpx; width: 100%"> </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
      navBarData: {
        title: "首页", //导航栏标题
        btn: 0, //是否显示返回按钮 0不显示  1 显示
      },
      activeList: [
        {
          img: "http://43.139.158.220:5007/img/static/img/1695656271245-image.png",
          count: "3842",
          className:
            "丽湖职教双创教育国际虚拟教研室启动大会暨双创教育国际论坛圆满举行",
          intro:
            "丽湖职教双创教育国际虚拟教研室为立足全国，辐射海外的国际化教研室，围绕创新创业教育的人才培养与课程建设开展深度研究。教研室以贯彻落实立德树人根本任务，通过加强跨专业、跨校、跨地域的教研交流，推动高校协同打造国际化的精品教学资",
        },
        {
          img: "http://43.139.158.220:5007/img/static/img/img1.png",
          count: "3842",
          className: "丽湖职教双创教育国际虚拟教研室2023年常规教研活动安排",
          intro:
            "为深入贯彻落实立德树人根本任务，提升教师教学育人能力，增强教师将现代信息技术与教育教学深度融合的能力，加强跨专业、跨校、跨地域的双创教研交流，推动职教创新创业教育改革纵深发展，由深圳职业技术学院创新创业学院、联合国教科文组织...",
        },
        {
          img: "http://43.139.158.220:5007/img/static/img/img3.png",
          count: "3842",
          className:
            "【图片】为提升职业院校双创课程建设水平，促进双创课程的改革与发展，丽湖职教双创教育国际虚拟教研室于3月29日组织举办了以“产教融合情境下的双创通识课程建设”为主题的第2期线上教研活动，来自全国各职业院校的60多位教师参会。本",
        },
      ],
      classList: [
        {
          img: "http://43.139.158.220:5007/img/static/img/jiaoxueship.jpg",
          className: "教学视频",
          intro: "课程简介：丽湖职教双创教育国际虚拟教研室教学视频",
        },
        {
          img: "http://43.139.158.220:5007/img/static/img/jiaoxuedagang.jpg",
          className: "教学大纲",
          intro: "课程简介：丽湖职教双创教育国际虚拟教研室教学大纲",
        },
        {
          img: "http://43.139.158.220:5007/img/static/img/peiyangfangan.jpg",
          className: "培养方案",
          intro: "课程简介：丽湖职教双创教育国际虚拟教研室培养方案",
        },
        {
          img: "http://43.139.158.220:5007/img/static/img/xitishiti.jpg",
          className: "习题试题",
          intro: "课程简介：丽湖职教双创教育国际虚拟教研室习题试题",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    teachmore() {
      const value = uni.getStorageSync("login");
      if (value == 0) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
      } else {
        uni.navigateTo({
          url: "/pages/teachingList/teachingList",
        });
      }
    },
    gotoTeDetail() {
      const value = uni.getStorageSync("login");
      if (value == 0) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
      } else {
        uni.navigateTo({
          url: "/pages/teachingDetail/teachingDetail",
        });
      }
    },
    gotoActivity() {
      const value = uni.getStorageSync("login");
      if (value == 0) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
      } else {
        uni.navigateTo({
          url: "/pages/activityList/activityList",
        });
      }
    },
    gotoActivityDetail(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/1181",
          "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1183",
          "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1210",
        ];
        if (index >= 0 && index < urls.length) {
          const url = urls[index];
          uni.navigateTo({
            url: "/pages/skipone/skipone?url=" + encodeURIComponent(url),
          });
        }
      }
    },
    gotoHd(index) {
      const value = uni.getStorageSync("login");
      if (value == 0) {
        console.log(11);
        uni.navigateTo({
          url: "/pages/login/login",
        });
      } else {
        const urls = [
          "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1181",
          "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1183",
          "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1210",
        ];
        if (index >= 0 && index < urls.length) {
          const url = urls[index];
          uni.navigateTo({
            url: "/pages/skipone/skipone?url=" + encodeURIComponent(url),
          });
        }
      }
    },
    gotoHome() {
      // const web = this.classList[this.current];
      const url = "https://mp.weixin.qq.com/s/QZEGcvBn3aW7aHirMFLBQA";
      uni.navigateTo({
        url: "/pages/skipone/skipone?url=" + encodeURIComponent(url),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  // background-color: ;
  // background-color: #f0f2f5;
  .top {
    width: 750rpx;
    height: 288rpx;
    display: flex;
    margin-bottom: 20rpx;
    align-items: center;
    background-color: #fff;
    justify-content: center;

    image {
      height: 246rpx;
      width: 690rpx;
      border-radius: 12rpx;
    }
  }

  .mid {
    margin: 10px 0;
    height: 498rpx;

    .activeData {
      width: 290rpx;
      display: inline-block;
      padding-right: 20rpx;

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

      .activeTit {
        // font-weight: 600;
        height: 64rpx;
        white-space: normal;
        /*隐藏溢出*/
        /*当文本溢出包含元素时显示省略符号来代表被修剪的文本*/
        /*规定段落中的文本不进行换行*/
        letter-spacing: 2rpx;
        display: -webkit-box;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /*设置 需要显示的行数*/
      }

      .numData {
        display: flex;
        justify-content: space-between;
        align-items: baseline;

        // padding: 10rpx 0;
        .proNum {
          color: #999999;
          // font-size: 14px;
        }

        .price {
          color: #f68717;
          // font-size: 18px;
        }
      }

      .btn {
        border: none;
        padding: 0;
        float: left;
        text-align: center;
        // padding: 8px 24px 8px 24px;
        background-color: #3081e8;
        color: #fff;
        border-radius: 100rpx;
        width: 144rpx;
        height: 48rpx;
        line-height: 48rpx;
        letter-spacing: 1px;
        margin-bottom: 30rpx;
      }
    }

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

  .title {
    font-weight: bold;
  }

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