完成详情 页面 静态

components/SharePopup/SharePopup.vue

@@ -1,16 +1,18 @@
 <template>
-  <view class="share-modal" v-if="visible">
+  <view class="share-modal" v-show="visible">
     <view class="modal-overlay" @click="handleClose"></view>
-    <view class="modal-content">
-      <view class="share-options">
-        <view v-for="option in shareOptions" :key="option.id" class="share-item" @click="handleShare(option.id)">
-          <view class="share-icon">
-            <image :src="option.icon" :alt="option.title" mode="aspectFit"></image>
+    <transition name="fade-up">
+      <view v-if="visible" class="modal-content">
+        <view class="share-options">
+          <view v-for="option in shareOptions" :key="option.id" class="share-item" @click="handleShare(option.id)">
+            <view class="share-icon">
+              <image :src="option.icon" :alt="option.title" mode="aspectFit"></image>
+            </view>
+            <text class="option-title">{{ option.title }}</text>
           </view>
-          <text class="option-title">{{ option.title }}</text>
         </view>
       </view>
-    </view>
+    </transition>
   </view>
 </template>
 
@@ -330,6 +332,19 @@ export default {
   padding: 16px;
 }
 
+/* 弹出动画 */
+.fade-up-enter-active, .fade-up-leave-active {
+  transition: all 0.3s cubic-bezier(.55,0,.1,1);
+}
+.fade-up-enter, .fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(100%);
+}
+.fade-up-leave, .fade-up-enter-to {
+  opacity: 1;
+  transform: translateY(0);
+}
+
 .share-options {
   display: flex;
   flex-wrap: wrap;

components/VideoPlayer/VideoPlayer.vue

@@ -184,6 +184,7 @@ export default {
     },
     // 视频错误事件
     onError(e) {
+      console.log('VideoPlayer onError called:', e);
       this.$emit('error', e)
     },
     // 加载进度事件
@@ -204,4 +205,4 @@ export default {
     height: 100%;
   }
 }
-</style> 
+</style>

pages.json

@@ -402,7 +402,30 @@
 				"navigationBarTitleText" : "",
 				"navigationStyle": "custom"
 			}
-		} 
+		},
+		{
+			"path" : "pages/crowdFunding/crowdFunding",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/crowdFunding/crowdfundingDetails",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/crowdFunding/discussionArea",
+			"style" : 
+			{
+				"navigationBarTitleText" : "讨论区"
+			}
+		}
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/crowdFunding/components/CrowdFundingItem/CrowdFundingItem.vue

@@ -0,0 +1,68 @@
+<template>
+  <view class="grid-item" @click="handleClick">
+    <image :src="item.imageUrl" class="item-image"></image>
+    <view class="item-title">{{ item.title }}</view>
+    <view class="item-info">
+      <text class="item-price">已筹 ¥{{ item.raisedAmount }}万</text>
+      <text class="item-supporters">支持者 {{ item.supporters }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'CrowdFundingItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click', this.item.id);
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.grid-item {
+  background: #fff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+  margin-bottom: 8rpx;
+  .item-image {
+    width: 100%;
+    height: 220rpx;
+    display: block;
+    object-fit: cover;
+    border-top-left-radius: 20rpx;
+    border-top-right-radius: 20rpx;
+  }
+  .item-title {
+    font-size: 26rpx;
+    color: #222;
+    padding: 12rpx 12rpx 0 12rpx;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .item-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 12rpx 12rpx 12rpx;
+    font-size: 22rpx;
+    .item-price {
+      color: #ff5000;
+      font-weight: bold;
+    }
+    .item-supporters {
+      color: #999;
+    }
+  }
+}
+</style> 

pages/crowdFunding/crowdFunding.vue

@@ -0,0 +1,312 @@
+	<template>
+		<view class="crowd-funding-page">
+			<!-- 头部导航 -->
+			<page-navbar>
+				<template #navLeft>
+					<view class="nav-left" @click="goBack">
+						<image src="/static/icon/arrow-left.png" class="back-icon"></image>
+					</view>
+				</template>
+				<template #navCenter>
+					<view class="nav-title">众筹</view>
+				</template>
+				<template #navRight>
+					<view class="nav-right">
+						<image src="/static/icon/star.png" class="action-icon"></image>
+						<image src="/static/icon/avatar-placeholder.png" class="avatar-icon"></image>
+					</view>
+				</template>
+			</page-navbar>
+
+			<!-- 搜索框 -->
+			<view class="search-bar-container">
+				<view class="search-input-wrapper">
+					<image src="/static/icon/search-gray.png" class="search-icon"></image>
+					<input type="text" placeholder="搜索你感兴趣的内容" class="search-input" />
+				</view>
+			</view>
+
+			<!-- Banner -->
+			<view class="banner-section">
+				<swiper class="banner-swiper" :autoplay="true" :circular="true" :interval="5000" :indicator-dots="true" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
+					<swiper-item v-for="(item, index) in bannerList" :key="index">
+						<image :src="item.image" class="banner-image" mode="aspectFill"></image>
+					</swiper-item>
+				</swiper>
+			</view>
+
+			<!-- Tab导航 -->
+			<view class="tabs-section">
+				<scroll-view scroll-x class="tabs-scroll-view" :show-scrollbar="false" :scroll-into-view="'tab-' +( currentTab -1)" scroll-with-animation>
+					<view class="tabs-wrapper">
+						<view v-for="(tab, index) in tabs" :key="index" :id="'tab-' + index" :class="['tab-item', currentTab === index ? 'active' : '']" @click="switchTab(index)">
+							<image v-if="tab.icon" :src="tab.icon" class="tab-icon"></image>
+							{{ tab.name }}
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+
+			<!-- 内容区域 -->
+			<scroll-view scroll-y class="content-scroll">
+				<view class="items-grid">
+					<CrowdFundingItem
+						v-for="(item, index) in itemList"
+						:key="index"
+						:item="item"
+						@click="goToDetail"
+					/>
+				</view>
+			</scroll-view>
+
+		</view>
+	</template>
+
+	<script>
+	import pageNavbar from '@/components/page-navbar/page-navbar.vue'; 
+	import CrowdFundingItem from './components/CrowdFundingItem/CrowdFundingItem.vue';
+
+	export default {
+		components: {
+			pageNavbar,
+			CrowdFundingItem
+		},
+		data() {
+			return {
+				bannerList: [
+					{ image: '/static/placeholder/banner-crowdfunding.png' } // Placeholder banner
+				],
+				tabs: [
+					{ name: '全部', icon: '' },
+					{ name: '创意', icon: '/static/icon/creative-star.png' }, // Placeholder icon
+					{ name: '潮玩', icon: '/static/icon/toy-bear.png' }, // Placeholder icon
+					{ name: '出版', icon: '' },
+					{ name: '桌游', icon: '' },
+					{ name: '桌游', icon: '' },
+					{ name: '桌游', icon: '' },
+					{ name: '桌游', icon: '' },
+					{ name: '桌游', icon: '' },
+					{ name: '桌游', icon: '' },
+					{ name: '卡片', icon: '' }
+				],
+				currentTab: 0, // 默认选中"创意"
+				itemList: [
+					{
+						id: 1,
+						imageUrl: '/static/placeholder/item1.png',
+						title: '糖指数100%12分BJD可动人偶盲盒',
+						raisedAmount: '769.8',
+						supporters: 3788
+					},
+					{
+						id: 2,
+						imageUrl: '/static/placeholder/item2.png',
+						title: '糖指数100%12分BJD可动人偶盲盒',
+						raisedAmount: '769.8',
+						supporters: 3788
+					},
+					{
+						id: 3,
+						imageUrl: '/static/placeholder/item3.png',
+						title: '糖指数100%12分BJD可动人偶盲盒',
+						raisedAmount: '769.8',
+						supporters: 3788
+					},
+					{
+						id: 4,
+						imageUrl: '/static/placeholder/item4.png',
+						title: '糖指数100%12分BJD可动人偶盲盒',
+						raisedAmount: '769.8',
+						supporters: 3788
+					}
+				]
+			};
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack();
+			},
+			switchTab(index) {
+				this.currentTab = index;
+				// 在这里可以根据选择的tab加载不同的数据
+				console.log('Switched to tab:', this.tabs[index].name);
+			},
+			goToDetail(id) {
+				console.log('Go to detail page for item ID:', id);
+				// uni.navigateTo({ url: '/pages/crowdFunding/detail?id=' + id });
+			}
+		}
+	};
+	</script>
+
+	<style lang="scss" scoped>
+	.crowd-funding-page {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		background: #f6f7fb;
+	}
+
+	.page-navbar {
+		background: #fff;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
+		.nav-title {
+			font-size: 36rpx;
+			font-weight: bold;
+			color: #222;
+			letter-spacing: 2rpx;
+		}
+		.nav-right {
+			display: flex;
+			align-items: center;
+			.action-icon {
+				width: 48rpx;
+				height: 48rpx;
+				margin-right: 16rpx;
+				background: #fffbe6;
+				border-radius: 50%;
+				padding: 8rpx;
+			}
+			.avatar-icon {
+				width: 56rpx;
+				height: 56rpx;
+				border-radius: 50%;
+				border: 2rpx solid #fff;
+				box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
+			}
+		}
+	}
+
+	.search-bar-container {
+		margin: 18rpx 24rpx 0 24rpx;
+		background: #fff;
+		border-radius: 32rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
+		padding: 0 24rpx;
+		height: 64rpx;
+		display: flex;
+		align-items: center;
+		.search-input-wrapper {
+			display: flex;
+			align-items: center;
+			.search-icon {
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 10rpx;
+			}
+			.search-input {
+				font-size: 28rpx;
+				color: #999;
+				line-height: 64rpx;
+			}
+		}
+	}
+
+	.banner-section {
+		margin: 16rpx 24rpx 0 24rpx;
+		border-radius: 24rpx;
+		overflow: hidden;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
+		background: #fff;
+		.banner-swiper {
+			height: 180rpx;
+			.banner-image {
+				width: 100%;
+				height: 100%;
+				display: block;
+				object-fit: cover;
+			}
+		}
+	}
+
+	.tabs-section {
+		background: #fff;
+		border-bottom: 1rpx solid #eee;
+		margin-top: 12rpx;
+		.tabs-scroll-view {
+			width: 100%;
+			.tabs-wrapper {
+				display: flex;
+				align-items: center;
+				padding-left: 12rpx;
+			}
+		}
+		.tab-item {
+			display: flex;
+			align-items: center;
+			font-size: 28rpx;
+			color: #666;
+			padding: 8rpx 28rpx;
+			margin-right: 8rpx;
+			border-radius: 32rpx;
+			font-weight: 500;
+			background: transparent;
+			transition: background 0.2s, color 0.2s;
+			.tab-icon {
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 8rpx;
+			}
+			&.active {
+				font-weight: bold;
+				color: #fff;
+				background: #222;
+				.tab-icon {
+					filter: brightness(1.5) saturate(2);
+				}
+			}
+		}
+	}
+
+	.content-scroll {
+		flex: 1;
+		overflow-y: auto;
+		padding-bottom: 24rpx;
+	}
+
+	.items-grid {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 24rpx;
+		padding: 16rpx 24rpx 0 24rpx;
+		.grid-item {
+			background: #fff;
+			border-radius: 20rpx;
+			overflow: hidden;
+			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+			margin-bottom: 8rpx;
+			.item-image {
+				width: 100%;
+				height: 220rpx;
+				display: block;
+				object-fit: cover;
+				border-top-left-radius: 20rpx;
+				border-top-right-radius: 20rpx;
+			}
+			.item-title {
+				font-size: 26rpx;
+				color: #222;
+				padding: 12rpx 12rpx 0 12rpx;
+				font-weight: 500;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+			.item-info {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 0 12rpx 12rpx 12rpx;
+				font-size: 22rpx;
+				.item-price {
+					color: #ff5000;
+					font-weight: bold;
+				}
+				.item-supporters {
+					color: #999;
+				}
+			}
+		}
+	}
+	</style>
+	

pages/crowdFunding/crowdfundingDetails.vue

@@ -0,0 +1,791 @@
+<template>
+	<view class="crowdfunding-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>
+		<!-- 顶部视频图片混合轮播 -->
+		<swiper class="top-swiper" indicator-dots circular>
+			<swiper-item v-for="(item, idx) in mediaList" :key="idx">
+				<view v-if="item.type === 'video'" class="video-wrapper">
+					<video class="swiper-video" :src="item.src" :poster="item.poster" controls autoplay
+						@ended="videoPlaying = false"></video>
+				</view>
+				<image v-else class="swiper-img" :src="item.src" mode="aspectFill" />
+			</swiper-item>
+		</swiper>
+
+		<view class="content">
+			<!-- 项目信息 -->
+			<view class="section project-card">
+				<view class="project-title">【Woh】灯塔 塔罗牌 治愈风泛传特系</view>
+				<view class="progress-bar-wrap"> 
+					<uv-line-progress height="8rpx" :showText="false" :percentage="85.45" inactiveColor="#F0F0F0"
+						activeColor="#ACF934"></uv-line-progress> 
+					<view class="progress-percent">85.45%</view>
+				</view>
+				<view class="project-stats">
+					<view class="stat-block">
+						<view class="stat-main amountOfMoney">￥70,808.00</view>
+						<view class="stat-sub">357人支持</view>
+					</view>
+					<view class="stat-block">
+						<view class="stat-main">31天</view>
+						<view class="stat-sub">剩余时间</view>
+					</view>
+					<view class="stat-block">
+						<view class="stat-main">￥20,000</view>
+						<view class="stat-sub">众筹目标</view>
+					</view>
+				</view>
+			</view>
+
+
+			<!-- 项目更新 -->
+			<view class="section project-update">
+				<view class="project-update-left">
+					<view class="project-update-left-title">
+						<view>·2次更新</view>
+						<view style="color: #999;">2025.5.23 16:23</view>
+					</view>
+					<view class="project-update-left-content">
+						<view>附赠精品灯塔牌包装，附赠精品灯塔牌包装</view>
+						<view class="image">
+							<image src="@/static/crowdFunding/crowdfundingDetails-poster.png" />
+						</view>
+					</view>
+				</view>
+				<view class="project-update-right scale-tap">
+					<view>历史更新</view>
+					<image src="@/static/crowdFunding/updateDetails.png"></image>
+
+				</view>
+			</view>
+
+			<view class="section comment">
+				<view class="comment-title">
+					<view>项目讨论(10)</view>
+					<view class="comment-more">查看更多 <image src="@/static/crowdFunding/right.png"></image>
+					</view>
+				</view>
+				<view class="comment-content">
+					<block v-for="(item, idx) in commentList" :key="idx">
+						<view class="comment-item">
+							<image class="comment-avatar" :src="item.avatar"></image>
+							<view class="comment-item-main">
+								<view class="comment-item-content">{{ item.content }}</view>
+							</view>
+							<view class="comment-item-like">
+								<image class="like-icon"
+									:src="item.liked ? '/static/icon/icon-18.png' : '/static/icon/icon-19.png'"></image>
+								<text class="like-num">{{ item.likeNum }}</text>
+							</view>
+						</view>
+					</block>
+				</view>
+			</view>
+
+			<!-- 塔罗牌介绍 -->
+			<view class="section poster">
+				<view class="initiator-bar">
+					<image class="initiator-avatar" :src="initiator.avatar" />
+					<view class="initiator-info">
+						<text class="initiator-name">{{ initiator.name }}</text>
+						<text class="initiator-tag">发起人</text>
+					</view>
+					<view class="initiator-service-btn  blick-btn-animation">
+						<image class="service-icon" src="@/static/crowdFunding/service.png" />
+						<text>客服</text>
+					</view>
+				</view>
+				<image class="intro-img" src="@/static/crowdFunding/crowdfundingDetails-poster.png" mode="widthFix" />
+				 
+			</view>
+
+
+
+			<!-- 风险说明 -->
+			<view class="section risk-section">
+				<view class="risk-row">
+					<view class="risk-title">退款政策</view>
+					<view class="risk-more  ">查看更多 <image src="@/static/crowdFunding/right.png" class="risk-more-icon" /></view>
+				</view>
+				<view class="risk-desc">众筹结束前最后1个小时无法申请退款</view>
+				<view class="risk-row risk-row-border">
+					<view class="risk-title">风险提示</view>
+				</view>
+				<view class="risk-content">
+					<view>1. 您参与众筹是支持将创意变为现实的过程，而不是直接的商品交易，因此存在一定风险。请您根据自己的判断选择，支持众筹项目。</view>
+					<view>2. 众筹存在于发起人与支持者之间，摩点作为第三方平台，提供网络空间、技术支持等服务。众筹的回报产品和承诺由发起人负责。</view>
+				</view>
+			</view>
+		</view>
+		<view class="bottom-bar-reserveASeat"></view>
+		<view class="bottom-bar">
+			<view class="bottom-bar-left">
+				<view class="bar-btn">
+					<image v-if="true" src="@/static/crowdFunding/collect.png" class=" scale-tap bar-icon" />
+					<image v-else src="@/static/crowdFunding/collect-active.png" class=" scale-tap bar-icon" />
+					<view class="bar-text">收藏</view>
+				</view>
+				<view class="bar-btn">
+					<image v-if="true" src="@/static/crowdFunding/like.png" class=" scale-tap bar-icon" />
+					<image v-else src="@/static/crowdFunding/like-active.png" class=" scale-tap bar-icon" />
+					<view class="bar-text">看好</view>
+				</view>
+			</view>
+			<button class="buy-btn blick-btn-animation">立即购买支持</button>
+		</view>
+		<image src="@/static/crowdFunding/backToTop.png" class="back-top scale-tap" v-show="navBgOpacity > 0.9" @click="scrollToTop"></image>
+
+		<!-- 分享弹窗 -->
+		<SharePopup :visible="showShare" :userId="userId" :share-title="shareTitle" :share-desc="shareDesc" :share-img="shareImg" view="crowdfundingDetails" @close="showShare = false" />
+	</view>
+</template>
+
+<script>
+
+import VideoPlayer from "@/components/VideoPlayer/VideoPlayer.vue";
+import SharePopup from "@/components/SharePopup/SharePopup.vue";
+export default {
+	components: {
+		VideoPlayer,
+		SharePopup
+	},
+	data() {
+		return {
+			mediaList: [
+				// { type: 'video', src: 'https://media.w3.org/2010/05/sintel/trailer.mp4', poster: 'https://www.w3schools.com/html/pic_trulli.jpg' },
+				{ type: 'image', src: '../../static/crowdFunding/top-img.png' },
+				{ type: 'image', src: 'https://img.alicdn.com/imgextra/i3/2200704180017/O1CN01Qw6QwF1w6Qw6QwF1w6QwF_!!2200704180017.jpg' }
+			],
+			videoPlaying: false,
+			currentMediaIndex: 0,
+			commentList: [
+				{
+					avatar: '/static/crowdFunding/top-img.png',
+					content: '还是希望签名能签在书上，还是希望签名能签在书上还是希望签名能签在书上还是希望签名能签在书上，还是希望签名能签在书上还是希望签名能签在书上',
+					likeNum: 12,
+					liked: false
+				},
+				{
+					avatar: '/static/crowdFunding/top-img.png',
+					content: '还是希望签名能签在书上',
+					likeNum: 12,
+					liked: true
+				}
+			],
+			navBgOpacity: 0,
+			swiperHeight: 0,
+			initiator: {
+				avatar: '/static/crowdFunding/top-img.png',
+				name: '也许时间是一种解药'
+			},
+			showShare: false,
+			shareTitle: '【Woh】灯塔 塔罗牌 治愈风泛传特系',
+			shareDesc: '快来支持这个有趣的众筹项目吧！',
+			shareImg: require('@/static/crowdFunding/top-img.png'),
+			userId: 0, // 可根据实际登录用户赋值
+		}
+	},
+	computed: {
+		navBgStyle() {
+			return {
+				background: `rgba(255,255,255,${this.navBgOpacity})`,
+				transition: 'background 0.3s'
+			}
+		}
+	},
+	methods: {
+		// 返回上一页
+		goBack() {
+			uni.navigateBack({
+				delta: 1,
+			});
+		},
+		scrollToTop() {
+			uni.pageScrollTo({
+				scrollTop: 0,
+				duration: 300
+			});
+		},
+		playVideo(idx) {
+			this.currentMediaIndex = idx;
+			this.videoPlaying = true;
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			// 动态获取轮播图高度
+			uni.createSelectorQuery().in(this).select('.top-swiper').boundingClientRect(rect => {
+				if (rect) {
+					this.swiperHeight = rect.height;
+				}
+			}).exec();
+		});
+	},
+	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 lang="scss" scoped>
+.crowdfunding-details {
+
+	/* 自定义导航栏样式 */
+	.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;
+		padding-top: var(--status-bar-height);
+		position: fixed;
+		top: 0;
+		z-index: 100;
+		padding: 12rpx 24rpx;
+		background: transparent;
+		transition: background 0.3s;
+
+		image {
+			width: 64rpx;
+			height: 64rpx;
+		}
+	}
+
+	.top-swiper {
+		width: 100vw;
+		height: 100vw;
+		overflow: hidden;
+
+		.video-wrapper {
+			position: relative;
+			width: 100%;
+			height: 400rpx;
+
+			.swiper-img,
+			.swiper-video {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+
+			.custom-play-btn {
+				position: absolute;
+				left: 30rpx;
+				bottom: 30rpx;
+				width: 80rpx;
+				height: 80rpx;
+				background: rgba(0, 0, 0, 0.4);
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				.play-icon {
+					width: 48rpx;
+					height: 48rpx;
+				}
+			}
+		}
+
+		.swiper-img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover; 
+		}
+	}
+
+	.content {
+		background: #f2f6f2;
+		padding: 20rpx;
+
+		.section {
+			background: #fff;
+			border-radius: 12rpx;
+			padding: 16rpx;
+			padding-bottom: 20rpx;
+			margin: 12rpx 0;
+
+			.section-title {
+				font-size: 28rpx;
+				font-family: 'PingFang SC-Medium';
+				margin-bottom: 6rpx;
+			}
+
+			.section-content {
+				color: #333;
+				font-size: 24rpx;
+				line-height: 1.8;
+			}
+
+			.intro-img {
+				width: 100%;
+				margin: 0;
+				padding: 0; 
+				margin-bottom: -10rpx;
+			}
+		}
+
+		.project-card {
+			padding-bottom: 15rpx;
+
+			.project-title {
+				font-size: 36rpx;
+				color: 1f1f1f;
+				font-family: "PingFang SC-Bold";
+				font-weight: 400;
+			}
+
+			.progress-bar-wrap {
+				display: flex;
+				align-items: center;
+				font-size: 20rpx;
+				color: #1F1F1F;
+				padding-top: 30rpx;
+				padding-bottom: 14rpx;
+
+				.progress-percent {
+					padding-left: 12rpx;
+				}
+			}
+
+			.project-stats {
+				display: flex;
+				justify-content: space-between;
+				padding-top: 0;
+
+				.stat-block {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					text-align: center;
+					justify-content: center;
+					color: #1F1F1F;
+
+					&:first-child {
+						align-items: flex-start;
+					}
+
+					&:last-child {
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						text-align: center;
+						justify-content: center;
+						color: #1F1F1F;
+
+						&:first-child {
+							align-items: flex-start;
+						}
+
+						&:last-child {
+							align-items: flex-end;
+						}
+
+						.stat-main {
+							font-size: 28rpx;
+
+							&.amountOfMoney {
+								font-size: 32rpx;
+								font-family: "PingFang SC-Bold";
+							}
+						}
+
+						.stat-sub {
+							font-size: 20rpx;
+						}
+					}
+				}
+			}
+		}
+
+		.project-update {
+			background: transparent;
+			height: 166rpx;
+			display: flex;
+			width: 100%;
+			justify-content: space-between;
+			padding: 0;
+
+			>view {
+				border-radius: 12rpx;
+				background: #fff;
+				flex-shrink: 0;
+			}
+
+			.project-update-left {
+				width: 590rpx;
+				height: 100%;
+				padding: 16rpx;
+
+				.project-update-left-title {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					font-size: 22rpx;
+				}
+
+				.project-update-left-content {
+					display: flex;
+					align-items: center;
+					margin-top: 8rpx;
+
+					>view {
+						font-size: 24rpx;
+						font-weight: 400;
+						font-family: "PingFang SC-Bold";
+					}
+
+					.image {
+						width: 180rpx;
+						height: 78rpx;
+						overflow: hidden;
+						margin-left: 26rpx;
+						border-radius: 8rpx;
+
+						image {
+							overflow: hidden;
+							width: 100%;
+						}
+					}
+				}
+
+			}
+
+			.project-update-right {
+				width: 108rpx;
+				height: 100%;
+				font-size: 22rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+
+				image {
+					margin-top: 12rpx;
+					width: 28rpx;
+					height: 28rpx;
+				}
+			}
+		}
+		.poster{
+			padding: 0;
+			padding-top: 16rpx;
+		}
+	}
+
+	.comment {
+		border-radius: 12rpx;
+		background: #fff;
+		margin-top: 24rpx;
+		padding: 0 0 16rpx 0;
+
+		.comment-title {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 26rpx;
+			color: #333;
+			padding: 18rpx 20rpx 0 20rpx;
+
+			.comment-more {
+				color: #999;
+				font-size: 22rpx;
+				display: flex;
+				align-items: center;
+
+				image {
+					width: 20rpx;
+					height: 20rpx;
+					margin-left: 4rpx;
+				}
+			}
+		}
+
+		.comment-content {
+			padding: 0 20rpx;
+
+			.comment-item {
+				display: flex;
+				align-items: flex-start;
+				padding: 18rpx 0 0 0;
+				border-bottom: 1rpx solid #f5f5f5;
+
+				&:last-child {
+					border-bottom: none;
+				}
+
+				.comment-avatar {
+					width: 48rpx;
+					height: 48rpx;
+					border-radius: 50%;
+					margin-right: 16rpx;
+					flex-shrink: 0;
+				}
+
+				.comment-item-main {
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+
+					.comment-item-content {
+						color: #1f1f1f;
+						font-size: 24rpx;
+						line-height: 1.7;
+						margin-bottom: 8rpx;
+						display: -webkit-box;
+						-webkit-line-clamp: 2;
+						-webkit-box-orient: vertical;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						word-break: break-all;
+					}
+				}
+
+				.comment-item-like {
+					display: flex;
+					align-items: center;
+					margin-left: 36rpx;
+
+					.like-icon {
+						width: 28rpx;
+						height: 28rpx;
+						margin-right: 4rpx;
+					}
+
+					.like-num {
+						font-size: 22rpx;
+						color: #888;
+					}
+				}
+			}
+		}
+	}
+
+	.bottom-bar-reserveASeat {
+		width: 100%;
+		height: calc(12rpx + 88rpx + var(--window-bottom) + 30rpx);
+	}
+
+	.bottom-bar {
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 999;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background: #fff;
+		padding: 14rpx 40rpx;
+		padding-bottom: calc(14rpx + var(--window-bottom));
+		box-sizing: border-box;
+
+		.bottom-bar-left {
+			display: flex;
+			align-items: center;
+			gap: 32rpx;
+
+			.bar-btn {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				width: 80rpx;
+				height: 80rpx;
+				border-radius: 12rpx;
+
+				.bar-icon {
+					width: 48rpx;
+					height: 48rpx;
+					margin-bottom: 4rpx;
+				}
+
+				.bar-text {
+					font-size: 20rpx;
+					color: #1f1f1f;
+					font-family: "PingFang SC";
+				}
+			}
+		}
+
+
+		.buy-btn {
+			width: 500rpx;
+			height: 88rpx;
+			background: #1f1f1f;
+			color: #ACF934;
+			font-size: 32rpx;
+			border-radius: 80rpx;
+			border: none;
+			font-weight: bold;
+			text-align: center;
+			line-height: 80rpx;
+			margin-left: 24rpx;
+		}
+
+	}
+}
+
+.back-top {
+	position: fixed;
+	bottom: calc(126rpx + var(--window-bottom));
+	right: 16rpx;
+	width: 82rpx;
+	height: 82rpx;
+}
+
+.initiator-bar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background: #fff;
+	border-radius: 10rpx;
+	padding: 18rpx 24rpx 18rpx 18rpx;
+	margin: 0;
+
+	.initiator-avatar {
+		width: 64rpx;
+		height: 64rpx;
+		border-radius: 50%;
+		margin-right: 18rpx;
+		flex-shrink: 0;
+	}
+
+	.initiator-info {
+		display: flex;
+		align-items: center;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.initiator-name {
+		font-size: 30rpx;
+		color: #222;
+		font-weight: bold;
+		margin-right: 12rpx;
+		max-width: 260rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.initiator-tag {
+		background: #1a1a1a;
+		color: #b6ff4b;
+		font-size: 20rpx;
+		border-radius: 8rpx;
+		padding: 2rpx 12rpx;
+		margin-left: 2rpx;
+	}
+
+	.initiator-service-btn {
+		display: flex;
+		align-items: center;
+		background: #1a1a1a;
+		color: #b6ff4b;
+		font-size: 28rpx;
+		border-radius: 128rpx;
+		padding: 0 24rpx 0 12rpx;
+		height: 56rpx;
+		margin-left: 18rpx;
+		font-weight: bold;
+	}
+
+	.service-icon {
+		width: 32rpx;
+		height: 32rpx;
+		margin-right: 8rpx;
+	}
+}
+
+.scale-tap {
+	transition: transform 0.15s;
+}
+
+.scale-tap:active {
+	transform: scale(0.92);
+}
+
+.risk-section {
+	background: #fff;
+	border-radius: 12rpx; 
+	margin: 24rpx 0 0 0;
+	padding: 0 0 18rpx 0;
+	position: relative;
+	overflow: hidden;
+	
+	.risk-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 18rpx 24rpx 0 0rpx;
+		font-size: 28rpx;
+		color: #1f1f1f;
+		background: #fff;
+		&.risk-row-border {
+			border-top: 1rpx solid #f2f2f2;
+			margin-top: 18rpx;
+			padding-top: 18rpx;
+		}
+	}
+	
+	.risk-title {
+		font-size: 28rpx;
+		color: #1f1f1f;
+		font-family: 'PingFang SC-Bold';
+		font-weight: 400;
+	 
+	}
+	
+	.risk-more {
+		color: #1f1f1f;
+		font-size: 24rpx;
+		display: flex;
+		align-items: center;
+		font-weight: 400;
+		font-family: 'PingFang SC-Bold';
+		.risk-more-icon {
+			width: 24rpx;
+			height: 24rpx;
+			margin-left: 4rpx;
+			margin-top: 4rpx;
+		}
+	}
+	
+	.risk-desc {
+		font-size: 24rpx;
+		color: #999;
+		padding: 8rpx 24rpx 0 0;
+		font-family: 'PingFang SC-Regular';
+	}
+	
+	.risk-content {
+		font-size: 24rpx;
+		color: #999;
+		padding: 12rpx 24rpx 0 0;
+		font-family: 'PingFang SC-Regular';
+		line-height: 1.7;
+		> view {
+			margin-bottom: 6rpx;
+		}
+	}
+}
+</style>

pages/crowdFunding/discussionArea.vue

@@ -0,0 +1,366 @@
+<template>
+	<view class="discussion-page">
+
+
+
+		<!-- 项目卡片 -->
+		<view class="project-card">
+			<image class="project-img" src="@/static/crowdFunding/top-img.png" />
+			<view class="project-info">
+				<view class="project-title two-omit">【Woh】灯塔 塔罗牌 治愈风泛伟特系伟特系伟特系</view>
+			</view>
+		</view>
+		<view class="tabs">
+			<view class="tab-item" @click="checkTab(item.id)" v-for="(item, index) in cate" :key="index">
+
+				<view class="tab" :class="{ active: tab === item.id }">
+					<text class="left">{{ item.name }}</text>
+					<view class="line"></view>
+				</view>
+			</view> 
+		</view>
+		 
+
+
+		<!-- tab内容 -->
+		<view v-if="tab === 1" class="update-list">
+			<block v-for="(item, idx) in updateList" :key="idx">
+				<view class="update-item">
+					<view class="update-title">第{{ item.index }}次更新</view>
+					<view class="update-content">{{ item.content }}</view>
+					<view class="update-user">
+						<image class="avatar" :src="item.avatar" />
+						<text class="nickname">{{ item.nickname }}</text>
+					</view>
+					<image class="update-img" :src="'../../static/crowdFunding/top-img.png'" mode="widthFix" />
+					<view class="update-footer">
+						<text class="update-time">{{ item.time }}</text>
+						<view class="update-like">
+							<image :src="item.liked ? '/static/icon/icon-18.png' : '/static/icon/icon-19.png'"
+								class="like-icon" />
+							<text class="like-num">{{ item.likeNum }}</text>
+						</view>
+					</view>
+				</view>
+			</block>
+		</view>
+		<view v-else class="comment-list">
+			<block v-for="(item, idx) in commentList" :key="idx">
+				<view class="comment-item">
+					<image class="avatar" :src="item.avatar" />
+					<view class="comment-main">
+						<view class="comment-content">{{ item.content }}</view>
+						<view class="comment-footer">
+							<text class="nickname">{{ item.nickname }}</text>
+							<text class="comment-time">{{ item.time }}</text>
+						</view>
+					</view>
+					<view class="comment-like">
+						<image :src="item.liked ? '/static/icon/icon-18.png' : '/static/icon/icon-19.png'"
+							class="like-icon" />
+						<text class="like-num">{{ item.likeNum }}</text>
+					</view>
+				</view>
+			</block>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			tab: 1,
+			updateList: [
+				{
+					index: 2,
+					content: '附赠精品灯塔牌包装，附赠精品灯塔牌包装',
+					avatar: '/static/crowdFunding/top-img.png',
+					nickname: '也许时间是一种解药',
+					img: 'https://img.zcool.cn/community/01b6b95d5b2e2fa801216518a7e7e7.jpg',
+					time: '2025.5.23 16:23',
+					likeNum: 12,
+					liked: false
+				},
+				{
+					index: 1,
+					content: '附赠精品灯塔牌包装，附赠精品灯塔牌包装',
+					avatar: '/static/crowdFunding/top-img.png',
+					nickname: '也许时间是一种解药',
+					img: 'https://img.zcool.cn/community/01b6b95d5b2e2fa801216518a7e7e7.jpg',
+					time: '2025.5.23 16:23',
+					likeNum: 12,
+					liked: false
+				}
+			],
+			commentList: [
+				{
+					avatar: '../../static/crowdFunding/top-img.png',
+					content: '还是希望签名能签在书上，还是希望签名能签在书上还是希望签名能签在书上还是希望签名能签在书上，还是希望签名能签在书上还是希望签名能签在书上',
+					nickname: '也许时间是一种解药',
+					time: '2025.5.23 16:23',
+					likeNum: 12,
+					liked: false
+				},
+				{
+					avatar: '../../static/crowdFunding/top-img.png',
+					content: '还是希望签名能签在书上',
+					nickname: '也许时间是一种解药',
+					time: '2025.5.23 16:23',
+					likeNum: 12,
+					liked: true
+				}
+			],
+			cate: [
+				{
+					name: "项目更新",
+					id: 1,
+				},
+				{
+					name: "项目讨论",
+					id: 2,
+				},
+			],
+		}
+	},
+	methods: {
+		checkTab(tab) {
+			this.tab = tab;
+		},
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.discussion-page {
+	min-height: 100vh;
+	background: #f2f6f2;
+	padding-bottom: 40rpx;
+
+	.project-card {
+		display: flex;
+		align-items: center;
+		background: #fff;
+		width: 100vw;
+		height: 184rpx;
+		border-bottom: 1px solid #F2F6F2;
+		padding: 28rpx;
+		.project-img {
+			width: 128rpx;
+			height: 128rpx;
+			border-radius: 6rpx;
+			margin-right: 16rpx;
+		}
+
+		.project-title {
+			font-size: 28rpx;
+			font-weight: bold;
+			color: #222;
+			max-width: 500rpx;
+			overflow: hidden;
+			text-overflow: ellipsis; 
+			line-height: 2;
+		}
+	}
+
+	.tabs {
+		display: flex;
+		height: 72rpx;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		background: #fff;
+		margin-bottom: 6rpx;
+		.tab-item {
+			width: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.tab {
+				position: relative;
+				//   width: 96rpx;
+				width: 130rpx;
+				height: 48rpx;
+				font-size: 32rpx;
+				font-family: "PingFang SC-Bold";
+				color: #999;
+				font-weight: 400;
+				transition: all .5s;
+
+				::after {
+					content: "";
+					position: absolute;
+					right: -15rpx;
+					top: 0;
+					width: 96rpx;
+					height: 48rpx;
+					background-image: url("../../static/me/wd_img_qiehuan.png");
+					background-size: auto 100%;
+					background-repeat: no-repeat;
+					opacity: 0;
+				}
+
+				&.active {
+					color: #1f1f1f;
+
+					text {
+						font-family: "PingFang SC-Bold";
+					}
+
+					::after {
+						opacity: 0.7;
+					}
+				}
+			}
+		}
+
+	}
+
+	.update-list {
+		padding: 0 24rpx;
+
+		.update-item {
+			background: #fff;
+			border-radius: 16rpx;
+			margin-bottom: 24rpx;
+			padding: 18rpx 20rpx 12rpx 20rpx;
+
+			.update-title {
+				font-size: 24rpx;
+				color: #999;
+				margin-bottom: 8rpx;
+			}
+
+			.update-content {
+				font-size: 28rpx;
+				color: #222;
+				margin-bottom: 12rpx;
+			}
+
+			.update-user {
+				display: flex;
+				align-items: center;
+				margin-bottom: 12rpx;
+
+				.avatar {
+					width: 36rpx;
+					height: 36rpx;
+					border-radius: 50%;
+					margin-right: 8rpx;
+				}
+
+				.nickname {
+					font-size: 22rpx;
+					color: #999;
+				}
+			}
+
+			.update-img {
+				width: 100%;
+				height: 160rpx;
+				border-radius: 12rpx;
+				object-fit: cover;
+				margin-bottom: 10rpx;
+			}
+
+			.update-footer {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				.update-time {
+					font-size: 22rpx;
+					color: #999;
+				}
+
+				.update-like {
+					display: flex;
+					align-items: center;
+
+					.like-icon {
+						width: 28rpx;
+						height: 28rpx;
+						margin-right: 4rpx;
+					}
+
+					.like-num {
+						font-size: 22rpx;
+						color: #888;
+					}
+				}
+			}
+		}
+	}
+
+	.comment-list {
+		padding: 0 24rpx;
+
+		.comment-item {
+			display: flex;
+			align-items: flex-start;
+			background: #fff;
+			border-radius: 16rpx;
+			margin-bottom: 24rpx;
+			padding: 18rpx 20rpx 12rpx 20rpx;
+
+			.avatar {
+				width: 36rpx;
+				height: 36rpx;
+				border-radius: 50%;
+				margin-right: 12rpx;
+			}
+
+			.comment-main {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+
+				.comment-content {
+					font-size: 28rpx;
+					color: #222;
+					margin-bottom: 10rpx;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					-webkit-box-orient: vertical;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+
+				.comment-footer {
+					display: flex;
+					align-items: center;
+
+					.nickname {
+						font-size: 22rpx;
+						color: #999;
+						margin-right: 16rpx;
+					}
+
+					.comment-time {
+						font-size: 22rpx;
+						color: #999;
+					}
+				}
+			}
+
+			.comment-like {
+				display: flex;
+				align-items: center;
+				margin-left: 16rpx;
+
+				.like-icon {
+					width: 28rpx;
+					height: 28rpx;
+					margin-right: 4rpx;
+				}
+
+				.like-num {
+					font-size: 22rpx;
+					color: #888;
+				}
+			}
+		}
+	}
+}
+</style>

pages/makedetail/intelligentMusicProduction.vue

@@ -16,8 +16,11 @@
 
 			<!-- <view class="navbar-reserveASeat"> </view>  -->
 			<!-- 聊天内容区 -->
-			<scroll-view class="chat-content" :scroll-into-view="toView" scroll-y scroll-with-animation="true"
+			<!-- <scroll-view class="chat-content" :scroll-into-view="toView" scroll-y scroll-with-animation="true"
 				:style="{ height: stateType === 3 ? 'calc(100% - 180rpx)' : `calc(100% - ${370 + textareaHeight}rpx)` }"
+				@scroll="onChatScroll"> -->
+			<scroll-view class="chat-content" :scroll-into-view="toView" scroll-y scroll-with-animation="true"
+				:style="{ height:  `calc(100% - ${370 + textareaHeight}rpx)` }"
 				@scroll="onChatScroll">
 				<template v-if="messages && messages.length > 0">
 					<!-- <scroll-view class="chat-content" scroll-y> -->
@@ -243,7 +246,7 @@ export default {
 					}
 					var type = data && data.type || '';
 					var content = data && data.content || '';
-
+					
 					// type = error,
 					// content=no_cate(首次分类没有设置)
 					// content="歌词不合规，请重新输入"|"歌词中有违规禁词，请修改！"

uni_modules/uv-line-progress/changelog.md

@@ -0,0 +1,7 @@
+## 1.0.2（2023-06-20）
+1. 适配height参数携带单位
+## 1.0.1（2023-05-16）
+1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
+2. 优化部分功能
+## 1.0.0（2023-05-10）
+uv-line-progress 线形进度条

uni_modules/uv-line-progress/components/uv-line-progress/props.js

@@ -0,0 +1,29 @@
+export default {
+	props: {
+		// 激活部分的颜色
+		activeColor: {
+			type: String,
+			default: '#19be6b'
+		},
+		inactiveColor: {
+			type: String,
+			default: '#ececec'
+		},
+		// 进度百分比，数值
+		percentage: {
+			type: [String, Number],
+			default: 0
+		},
+		// 是否在进度条内部显示百分比的值
+		showText: {
+			type: Boolean,
+			default: true
+		},
+		// 进度条的高度，单位px
+		height: {
+			type: [String, Number],
+			default: 12
+		},
+		...uni.$uv?.props?.lineProgress
+	}
+}

uni_modules/uv-line-progress/components/uv-line-progress/uv-line-progress.vue

@@ -0,0 +1,146 @@
+<template>
+	<view
+	    class="uv-line-progress"
+	    :style="[$uv.addStyle(customStyle)]"
+	>
+		<view
+		    class="uv-line-progress__background"
+		    ref="uv-line-progress__background"
+		    :style="[{
+				backgroundColor: inactiveColor,
+				height: $uv.addUnit($uv.getPx(height))
+			}]"
+		>
+		</view>
+		<view
+		    class="uv-line-progress__line"
+		    :style="[progressStyle]"
+		> 
+			<slot>
+				<text v-if="showText && percentage >= 10" class="uv-line-progress__text">{{innserPercentage + '%'}}</text>
+			</slot> 
+		</view>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
+	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
+	import props from './props.js';
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * lineProgress 线型进度条
+	 * @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
+	 * @tutorial https://www.uvui.cn/components/lineProgress.html
+	 * @property {String}			activeColor		激活部分的颜色 ( 默认 '#19be6b' )
+	 * @property {String}			inactiveColor	背景色 ( 默认 '#ececec' )
+	 * @property {String | Number}	percentage		进度百分比，数值 ( 默认 0 )
+	 * @property {Boolean}			showText		是否在进度条内部显示百分比的值 ( 默认 true )
+	 * @property {String | Number}	height			进度条的高度，单位px ( 默认 12 )
+	 * 
+	 * @example <uv-line-progress :percent="70" :show-percent="true"></uv-line-progress>
+	 */
+	export default {
+		name: "uv-line-progress",
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				lineWidth: 0,
+			}
+		},
+		watch: {
+			percentage(n) {
+				this.resizeProgressWidth()
+			}
+		},
+		computed: {
+			progressStyle() { 
+				let style = {}
+				style.width = this.lineWidth
+				style.backgroundColor = this.activeColor
+				style.height = this.$uv.addUnit(this.$uv.getPx(this.height))
+				return style
+			},
+			innserPercentage() {
+				// 控制范围在0-100之间
+				return this.$uv.range(0, 100, this.percentage)
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				this.$uv.sleep(20).then(() => {
+					this.resizeProgressWidth()
+				})
+			},
+			getProgressWidth() {
+				// #ifndef APP-NVUE
+				return this.$uvGetRect('.uv-line-progress__background')
+				// #endif
+
+				// #ifdef APP-NVUE
+				// 返回一个promise
+				return new Promise(resolve => {
+					dom.getComponentRect(this.$refs['uv-line-progress__background'], (res) => {
+						resolve(res.size)
+					})
+				})
+				// #endif
+			},
+			resizeProgressWidth() {
+				this.getProgressWidth().then(size => {
+					const {
+						width
+					} = size
+					// 通过设置的percentage值，计算其所占总长度的百分比
+					this.lineWidth = width * this.innserPercentage / 100 + 'px'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
+
+	.uv-line-progress {
+		align-items: stretch;
+		position: relative;
+		@include flex(row);
+		flex: 1;
+		overflow: hidden;
+		border-radius: 100px;
+
+		&__background {
+			background-color: #ececec;
+			border-radius: 100px;
+			flex: 1;
+		}
+
+		&__line {
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			align-items: center;
+			@include flex(row);
+			color: #ffffff;
+			border-radius: 100px;
+			transition: width 0.5s ease;
+			justify-content: flex-end;
+		}
+
+		&__text {
+			font-size: 10px;
+			align-items: center;
+			text-align: right;
+			color: #FFFFFF;
+			margin-right: 5px;
+			transform: scale(0.9);
+		}
+	}
+</style>

uni_modules/uv-line-progress/package.json

@@ -0,0 +1,87 @@
+{
+  "id": "uv-line-progress",
+  "displayName": "uv-line-progress 线形进度条  全面兼容小程序、nvue、vue2、vue3等多端",
+  "version": "1.0.2",
+  "description": "uv-line-progress 该组件展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。",
+  "keywords": [
+    "uv-line-progress",
+    "uvui",
+    "uv-ui",
+    "progress",
+    "进度条"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+    	"ads": "无",
+    	"data": "插件不采集任何数据",
+    	"permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uv-ui-tools"
+		],
+    "encrypt": [],
+    "platforms": {
+			"cloud": {
+				"tcb": "y",
+				"aliyun": "y"
+			},
+			"client": {
+				"Vue": {
+					"vue2": "y",
+					"vue3": "y"
+				},
+				"App": {
+					"app-vue": "y",
+					"app-nvue": "y"
+				},
+				"H5-mobile": {
+					"Safari": "y",
+					"Android Browser": "y",
+					"微信浏览器(Android)": "y",
+					"QQ浏览器(Android)": "y"
+				},
+				"H5-pc": {
+					"Chrome": "y",
+					"IE": "y",
+					"Edge": "y",
+					"Firefox": "y",
+					"Safari": "y"
+				},
+				"小程序": {
+					"微信": "y",
+					"阿里": "y",
+					"百度": "y",
+					"字节跳动": "y",
+					"QQ": "y",
+					"钉钉": "u",
+					"快手": "u",
+					"飞书": "u",
+					"京东": "u"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+				}
+			}
+		}
+  }
+}

uni_modules/uv-line-progress/readme.md

@@ -0,0 +1,11 @@
+## LineProgress 线形进度条
+
+> **组件名：uv-line-progress**
+
+展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
+
+### <a href="https://www.uvui.cn/components/lineProgress.html" target="_blank">查看文档</a>
+
+### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+#### 如使用过程中有任何问题，或者您对uv-ui有一些好的建议，欢迎加入 uv-ui 交流群：<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>