MoeNovaClient/pages/crowdFunding/projectUpdateDetails.vue

<template>
  <view class="project-update-details">
    <view
      class="custom-navbar"
      :style="navBgStyle"
    >
      <view
        class="navbar-left scale-tap"
        @click="goBack"
      >
        <image
          src="@/static/crowdFunding/back.png"
          mode="widthFix"
        ></image>
      </view>
      <view
        class="navbar-center one-omit"
        style="max-width: 70vw"
        :style="{ opacity: navBgOpacity }"
      >
        【Woh】灯塔 塔罗牌 治愈风泛伟特系伟特系伟特系
      </view>
      <view
        class="navbar-right scale-tap"
        @click="showShare = true"
      >
        <image
          src="@/static/crowdFunding/share.png"
          mode="widthFix"
        ></image>
      </view>
    </view>
    <image
      class="top-img"
      src="@/static/crowdFunding/top-img.png"
      mode="widthFix"
    ></image>
    <view class="update-info">
      <view class="update-title-row">
        <text class="update-title">· 第2次更新</text>
        <text class="update-time">2025.5.23 16:23</text>
      </view>
      <view class="update-user-row">
        <image
          class="user-avatar"
          src="@/static/home/avator.png"
        ></image>
        <text class="user-nickname">也许时间是一种解药</text>
      </view>
    </view>
	<view class="content">
		<uv-parse :content="content" :selectable="true"></uv-parse>
	</view>
  </view>
</template>

<script> 
export default { 
  data() {
    return {
      navBgOpacity: 0,
      showShare: false,
      content: `<section data-role="paragraph" class="_135editor" style="">
	<p style="border-width: 0px; border-radius: 10px;text-align:center;" align="center">
		<span style="font-size: 20px; border-width: 0px; border-radius: 10px;"><strong style="border-width: 0px; border-radius: 10px;">追加解锁档位和关于地址修改邮费退补的提示</strong></span>&nbsp;
	</p>
	<p style="border-width: 0px; border-radius: 10px;text-align:center;" align="center">
		<br style="border-width: 0px; border-radius: 10px;"/>
	</p>
	<p style="border-width: 0px; border-radius: 10px;text-align:center;" align="center">
		<br style="border-width: 0px; border-radius: 10px;"/>
	</p>
	<p style="border-width: 0px; border-radius: 10px;" >
		感谢大家的热情,我们在半天的时间内达到了68万的 金额。
	</p>
	<p style="border-width: 0px; border-radius: 10px;">
		<br style="border-width: 0px; border-radius: 10px;"/>
	</p>
	<p style="border-width: 0px; border-radius: 10px;">
		&nbsp;为了回应大家的支持,我们决定增加以下
	</p>
	<p style="border-width: 0px; border-radius: 10px;">
		解锁档位:&nbsp;
	</p>
	<p style="border-width: 0px; border-radius: 10px;">
		<br style="border-width: 0px; border-radius: 10px;"/>
	</p>
	<p style="border-width: 0px; border-radius: 10px;">
		350,000:正式开启《三相奇谈官方艺术设定集》制作企划!&lt;已经解锁&gt;&nbsp;
	</p>
	<p style="border-width: 0px; border-radius: 10px;">
		<br style="border-width: 0px; border-radius: 10px;"/>
	</p>
	<p style="border-width: 0px; border-radius: 10px;">
		·500,000:为60元以上档位额外追加表情包贴纸·第 二弹!&lt;已经解锁&gt;&nbsp;
	</p>
	<p style="border-width: 0px; border-radius: 10px;">
		·650,000:为所有档位追加3张角色明信片!&lt;已经解锁&gt;&nbsp;
	</p>
	<p style="border-width: 0px; border-radius: 10px;">
		·800,000:为100元以上档位追加局部彩窗亚克力挂饰一个!&nbsp;
	</p>
	<p style="border-width: 0px; border-radius: 10px;">
		<span style="caret-color: red; border-width: 0px; border-radius: 10px;">·900,000:为所有档位追加角色纪念徽章,根据投票选出角色并全新绘制!</span>
	</p>
</section>`,
    };
  },
  computed: {
    navBgStyle() {
      return {
        background: `rgba(255,255,255,${this.navBgOpacity})`,
        transition: "background 0.3s",
      };
    },
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
  },
  onPageScroll(e) {
    const threshold = this.swiperHeight || uni.upx2px(400); // 优先用实际高度
    let opacity = 0;
    if (e.scrollTop > 0) {
      opacity = Math.min(e.scrollTop / threshold, 1);
    }
    this.navBgOpacity = opacity;
  },
};
</script>

<style scoped lang="scss">
.project-update-details {
  min-height: 100vh;
  padding-bottom: 20vh;

  /* 自定义导航栏样式 */
  .custom-navbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: calc(90rpx + var(--status-bar-height));
    padding: 0 20rpx;
    position: fixed;
    top: 0;
    z-index: 100;
    padding: 12rpx 24rpx;
    padding-top: calc(var(--status-bar-height) + 12rpx);
    background: transparent;
    transition: background 0.3s;

    image {
      width: 64rpx;
      height: 64rpx;
    }
  }

  .top-img {
    width: 100%;
  }

  .update-info {
    background: #fff;
    padding: 32rpx 32rpx 0 32rpx;
    .update-title-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;
      .update-title {
        font-size: 26rpx;
        color: #222;
      }
      .update-time {
        font-size: 24rpx;
        color: #bdbdbd;
      }
    }
    .update-user-row {
      display: flex;
      align-items: center;
      .user-avatar {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        margin-right: 16rpx;
      }
      .user-nickname {
        font-size: 26rpx;
        color: #222;
        font-weight: 500;
      }
    }
  }
  .content{
	padding: 42rpx 28rpx;
  }
}
</style>