teaching-uniapp/pages/hdxx/hdxx.vue

<template>
  <view class="hdxx">
    <statusBar :item="navBarData"></statusBar>
    <view class="content" @click="gotoInform">
      <view class="text">
        <view class="header">
          <view class="disC three-font">
            活动开始提醒
            <text class="sj fwb-font">13:28</text>
          </view>
        </view>
        <view class="main">
          <view class="fwb-font">
            <text class="btn-font" style="color: #0056a8"
              >“丽湖职教双创教育国际虚拟教研室·常规教研活动第9期”</text
            >
            活动现在已经在我们的平台上正式上
            线，欢迎您点击浏览和积极参加。不要错过这个令
            人兴奋的机会，我们期待着与您一同度过难忘的时
            光。点击活动名称进入活动详情哦！
          </view>
        </view>
      </view>
    </view>

    <!-- <view class="content">
			<view class="text">
				<view class="header">
					<view>
						活动发布成功
						<view class="sj">13:28</view>
					</view>
				</view>
				<view class="main">
					<view>
						恭喜！您已成功完成
						<view>“XXXX讲座”</view>
						活动报名。您的参与信息已经成功提交，您现在是我们活动的一部分，我们非常期待与您共度美好时光。
						<view style="text-indent: 2em" >
							以下是一些额外信息，以确保您充分了解您的参与：
						</view>  
					</view>
					<view class="custom-list">
						<view class="list-item">活动名称：[活动名称]</view>
						<view class="list-item">日期：[活动日期]</view>
						<view class="list-item">时间：[活动时间]</view>
						<view class="list-item">地点：[活动地点]</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="text">
				<view class="header">
					<view>
						活动已结束
						<view class="sj">13:28</view>
					</view>
				</view>
				<view class="main">
					<view>
						<view>“XXXX讲座”</view>
						活动已圆满结束，我们要对您的热情参与表示由衷的感谢。您的支持和参与使这次活动变得特别而难忘。
						再次感谢您的参与，我们期待将来再次与您共享更多精彩的活动。敬请期待未来的活动通知！
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="text">
				<view class="header">
					<view>
						活动开始提醒
						<view class="sj">13:28</view>
					</view>
				</view>
				<view class="main">
					<view>
						<view>“XXXX讲座”</view>
						活动快开始啦！准备好迎接精彩时刻了吗？不要错过这个令人兴奋的机会，我们期待着与您一同度过难忘的时光。请确保您已经做好了所有必要的准备，包括查看活动时间、地点和其他重要信息。
					</view>
				</view>
			</view>
		</view> -->
    <!-- 		<view class="content">
			<view class="text">
				<view class="header">
					<view class="disC three-font">
						成功加入教研室
						<text class="sj fwb-font">13:28</text>
					</view>
				</view>
				<view class="main">
					<view style="text-indent: 0em">
						尊敬的
						<text>XXX</text>
					</view>

					<view>
						我们很高兴通知您，您已成功加入
						<text class="btn-font" style="color: #0056a8;">[教研室名称]</text>
						！欢迎加入我们的团队，我们期待与您一同合作并共同追求卓越教育。
					</view>
				</view>
			</view>
		</view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      navBarData: {
        title: "活动消息",
        btn: 1,
      },
    };
  },
  methods: {
    gotoInform() {
      // const web = this.classList[this.current];
      const url =
        "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1234";
      uni.navigateTo({
        url: "/pages/skipone/skipone?url=" + encodeURIComponent(url),
      });
    },
  },
};
</script>

<style lang="scss">
.hdxx {
  padding-bottom: 80rpx;
}

.content {
  padding: 10px;
  margin: 10px;
  background-color: white;
  border-radius: 8px;

  // margin-top: 5px;
  .disC {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  .text {
    .header {
      view {
        color: black;
        // font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

        .sj {
          color: #999999;
          // font-size: 13px;
          font-weight: 500;
        }
      }
    }

    .main {
      color: #999999;

      view {
        font-weight: 400;
        // font-size: 14px;
        text-indent: 2em;

        view {
          color: #0056a8;
          font-weight: 600;
        }
      }

      .custom-list {
        padding-left: 5px;
        padding-top: 3px;
      }

      .custom-list .list-item::before {
        content: "• ";
      }
    }
  }
}
</style>