discounts-minapp/pages/activity/detail.vue

<template>
  <view class="content">
    <view class="title">贵州大学 新生欢迎活动隆重举行！</view>
    <view class="msg-type">
      <view> 活动消息 2024-03-18 13:30 </view>
      <view v-if="inOpter"> 阅读4886 </view>
    </view>
    <view class="msg-cover">
      <image
        style="height: 300rpx"
        
        src="https://oss.dev.zonelife.cn/static/guida/img/act/15519395654249311.jpg"
      ></image>
    </view>
    <view class="main-content">
      <rich-text :nodes="content"> </rich-text>
    </view>
    <view v-if="inOpter" class="btn-box"> 报名 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inOpter: false,
      content: `
      ✨ 活动亮点 ✨<br/><br/>            
      ➡️ 多元文化交流<br/><br/>
      ➡️ 舞蹈、音乐、戏剧等精彩表演<br/><br/>
      ➡️ 手工艺展示，感受创意之美<br/><br/>
      ➡️ 丰富多彩的文化角落，让你环游世界<br/><br/>
      🔸 主要活动安排 🔸<br/><br/>
      🎶 9:30 - 开幕式暨舞蹈表演<br/><br/>
      🎭 11:00 - 戏剧表演《XXXX》<br/><br/>
      🎨 14:00 - 手工艺DIY工作坊<br/><br/>
      🌍 每个展区都是一次文化冒险！<br/><br/>
      🌟 特别活动 🌟<br/><br/>
      🍜 美食区域：品尝全球美味小吃<br/><br/>
      🎤 卡拉OK角落：释放你的音乐天赋<br/><br/>
      🌸 花艺摄影墙：与花儿合影留念<br/><br/>
      📢 欢迎所有同学参与，展现你的才华！<br/><br/>
      💬 分享你对文化的独特见解，一起创造不同寻常的校园盛会！<br/><br/>
      🎈欢迎新同学融入贵州大学大家庭，让我们一起度过难忘的时光！🌈
    `,
    };
  },
  created() {
    const random = Math.random();
    if (random > 0.5) {
      this.inOpter = true;
    }
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20rpx;
  .title {
    font-size: 40rpx;
  }
  .msg-type {
    display: flex;
    justify-content: space-between;
    font-size: 30rpx;
    color: #999;
    margin: 10rpx 0;
  }
  .msg-cover {
    margin: 20rpx 0;
    image {
      width: 100%;
      height: 350rpx;
    }
  }
  .main-content {
    color: #999;
    font-size: 35rpx;
  }
  .btn-box {
    position: fixed;
    bottom: 30px;
    width: 95%;
    height: 80rpx;
    background-color: #202020;
    color: white;
    text-align: center;
    line-height: 80rpx;
    font-size: 40rpx;
    border-radius: 50px;
  }
}
</style>