新增 客服页面

App.vue

@@ -400,4 +400,11 @@ uni-modal {
     height: 200%;
   }
 }
+.scale-tap {
+	transition: transform 0.15s;
+}
+
+.scale-tap:active {
+	transform: scale(0.92);
+}
 </style>

components/ActionSheet/ActionSheet.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="action-sheet-container" v-if="visible" @click="handleMaskClick">
     <view class="action-sheet-mask" @touchmove.stop.prevent></view>
-    <view class="action-sheet" :class="{ 'action-sheet-show': animationShow }" @touchmove.stop.prevent>
+    <view class="action-sheet" :class="{ 'action-sheet-show': animationShow }" @click.stop>
       <view class="action-sheet-title" v-if="title">{{ title }}</view>
       <view class="action-sheet-items">
         <slot>
@@ -11,7 +11,7 @@
             <text class="action-sheet-item-text">{{ item.text }}</text>
           </view>
         </slot>
-      </view>
+      </view> 
       <view class="action-sheet-cancel" v-if="false" @click.stop="handleCancel">{{ cancelText }}</view>
       <view class="action-sheet-line"></view>
     </view>

components/CommentSection/CommentSection.vue

@@ -91,6 +91,13 @@ export default {
 	created() {
 		this.loadCommentData();
 		this.getInfoData()
+		console.log('myInfo',this.myInfo);
+		console.log('articleInfo',this.articleInfo);
+		console.log('articleId',this.articleId);
+		console.log('type',this.type);
+		console.log('find',this.find);
+		console.log('author',this.author);
+		
 	},
 	onMounted() {
 

components/SharePopup/SharePopup.vue

@@ -44,9 +44,13 @@ export default {
     view: {
       type: String,
       default: ''
+    },
+    isReportContent: {
+      type: Boolean,
+      default: false
     }
   },
-  
+
   data() {
     return {
       shareOptions: [
@@ -61,7 +65,7 @@ export default {
     }
   },
   computed: {
-    shareUrl() { 
+    shareUrl() {
       const urlParams = {
         userId: this.userId,
         action: this.view,
@@ -73,9 +77,9 @@ export default {
     }
   },
   created() {
-    uni.$emit('check_login', () => { 
+    uni.$emit('check_login', () => {
       this.from_id = getApp().globalData.user_id
-    }) 
+    })
   },
   methods: {
     handleClose() {
@@ -209,7 +213,7 @@ export default {
         type: 0,
         title: this.shareTitle,
         summary: this.shareDesc,
-        imageUrl: this.shareImg  || this.$icon,
+        imageUrl: this.shareImg || this.$icon,
         href: this.shareUrl,
         success: () => {
           uni.showToast({
@@ -233,7 +237,7 @@ export default {
           wx.updateTimelineShareData({
             title: this.shareTitle,
             link: this.shareUrl,
-            imgUrl: this.shareImg  || this.$icon,
+            imgUrl: this.shareImg || this.$icon,
             success: () => {
               uni.showToast({
                 title: '分享成功',
@@ -267,11 +271,11 @@ export default {
     handleReport() {
       // 实现举报功能
       uni.$emit('check_login', () => {
-				uni.navigateTo({
-					url: '/pages/my/feedback'
-				})
-			})
-      
+        uni.navigateTo({
+          url: '/pages/my/feedback?isReportContent=' + this.isReportContent
+        })
+      })
+
     },
     qqShare() {
       // #ifdef APP-PLUS
@@ -280,7 +284,7 @@ export default {
         type: 0,
         title: this.shareTitle,
         summary: this.shareDesc,
-        imageUrl: this.shareImg  || this.$icon,
+        imageUrl: this.shareImg || this.$icon,
         href: this.shareUrl,
         success: () => {
           uni.showToast({
@@ -303,7 +307,8 @@ export default {
 </script>
 
 <style scoped>
-.share-modal {
+.share-modal
+{
   position: fixed;
   left: 0;
   right: 0;
@@ -312,7 +317,8 @@ export default {
   z-index: 1000;
 }
 
-.modal-overlay {
+.modal-overlay
+{
   position: absolute;
   left: 0;
   right: 0;
@@ -321,7 +327,8 @@ export default {
   background-color: rgba(0, 0, 0, 0.4);
 }
 
-.modal-content {
+.modal-content
+{
   position: absolute;
   left: 0;
   right: 0;
@@ -333,25 +340,32 @@ export default {
 }
 
 /* 弹出动画 */
-.fade-up-enter-active, .fade-up-leave-active {
-  transition: all 0.3s cubic-bezier(.55,0,.1,1);
+.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 {
+
+.fade-up-enter, .fade-up-leave-to
+{
   opacity: 0;
   transform: translateY(100%);
 }
-.fade-up-leave, .fade-up-enter-to {
+
+.fade-up-leave, .fade-up-enter-to
+{
   opacity: 1;
   transform: translateY(0);
 }
 
-.share-options {
+.share-options
+{
   display: flex;
   flex-wrap: wrap;
   padding: 8px 16px;
 }
 
-.share-item {
+.share-item
+{
   width: 25%;
   display: flex;
   flex-direction: column;
@@ -360,7 +374,8 @@ export default {
   padding: 8px 0;
 }
 
-.share-icon {
+.share-icon
+{
   width: 44px;
   height: 44px;
   display: flex;
@@ -368,12 +383,14 @@ export default {
   align-items: center;
 }
 
-.share-icon image {
+.share-icon image
+{
   width: 100%;
   height: 100%;
 }
 
-.option-title {
+.option-title
+{
   font-size: 13px;
   color: #333333;
   text-align: center;

components/dropDownSelection/ActionSheet.vue

@@ -0,0 +1,230 @@
+<template>
+  <view class="action-sheet-container" v-if="visible" @click="handleMaskClick">
+    <view class="action-sheet-mask" @touchmove.stop.prevent></view>
+    <view class="action-sheet" :class="{ 'action-sheet-show': animationShow }" @click.stop>
+      <view class="action-sheet-title" v-if="title">{{ title }}</view>
+      <view class="action-sheet-items">
+        <view class="action-sheet-item" v-for="(item, index) in items" :key="index"
+          :class="{ 'action-sheet-item-danger': item.danger }" @click.stop="handleItemClick(index, item)">
+          <text class="action-sheet-item-text">{{ item.text }}</text>
+          <image class="action-sheet-radio-img" :src="selectedIndex === index ? checkedImg : uncheckedImg"
+            mode="widthFix" />
+        </view>
+      </view>
+      <view class="action-sheet-confirm-btn" @click="handleConfirm">确认</view>
+      <image class="action-sheet-confirm-img" src="@/static/icon/wd_icon_guanbi.png" @click="handleMaskClick" />
+      <view class="action-sheet-line"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ActionSheet',
+  props: {
+    // 标题
+    title: {
+      type: String,
+      default: ''
+    },
+    // 选项列表，格式：[{text: '选项1', icon: 'fa-share-alt', danger: false}, ...]
+    items: {
+      type: Array,
+      default: () => []
+    },
+    // 取消按钮文字
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+    // 点击遮罩是否关闭
+    maskClosable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      animationShow: false,
+      selectedIndex: null,
+      checkedImg: require('@/static/icon/wd_icon_gouxuan05.png'),    // 选中图片
+      uncheckedImg: require('@/static/icon/wd_icon_gouxuan04.png') // 未选中图片
+    }
+  },
+  methods: {
+    // 显示ActionSheet
+    show() {
+      this.visible = true;
+      setTimeout(() => {
+        this.animationShow = true;
+      }, 10);
+    },
+
+    // 隐藏ActionSheet
+    hide() {
+      this.animationShow = false;
+      setTimeout(() => {
+        this.visible = false;
+      }, 300); // 动画持续时间
+    },
+
+    // 处理选项点击
+    handleItemClick(index, item) {
+      this.selectedIndex = index;
+    },
+
+    // 处理确认按钮点击
+    handleConfirm() {
+      if (this.selectedIndex !== null) {
+        this.$emit('select', this.selectedIndex, this.items[this.selectedIndex]);
+        this.hide();
+      }
+    },
+
+    // 处理遮罩点击
+    handleMaskClick() {
+      if (this.maskClosable) {
+        this.$emit('cancel');
+        this.hide();
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.action-sheet-container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+
+
+  .action-sheet-mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .action-sheet {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transform: translateY(100%);
+    transition: transform 0.3s ease;
+    background: #F2F6F2;
+    border-radius: 24rpx 24rpx 0 0;
+    overflow: hidden;
+    padding: 0rpx 32rpx 32rpx 32rpx;
+    padding-bottom: 70rpx;
+
+    &.action-sheet-show {
+      transform: translateY(0);
+    }
+
+    .action-sheet-title {
+      padding: 24rpx 0 32rpx 0;
+      text-align: center;
+      font-size: 32rpx;
+      color: #222;
+      background-color: transparent;
+      font-weight: bold;
+      border-bottom: none;
+    }
+
+    .action-sheet-items {
+
+      .action-sheet-item {
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        height: 90rpx;
+        font-size: 32rpx;
+        color: #333;
+        border-radius: 16rpx;
+        margin-bottom: 20rpx;
+        box-sizing: border-box;
+        justify-content: space-between;
+        padding: 24rpx 28rpx;
+
+        &:active {
+          background-color: #f2f2f2;
+        }
+
+        &.action-sheet-item-danger {
+          color: #ff5151;
+          margin-top: 16rpx;
+          border-radius: 20rpx;
+        }
+
+        .action-sheet-item-text {
+          font-size: 32rpx;
+        }
+
+        &:first-child {
+          border-top-right-radius: 20rpx;
+          border-top-left-radius: 20rpx;
+        }
+
+        &:nth-child(2) {
+          border-bottom-right-radius: 20rpx;
+          border-bottom-left-radius: 20rpx;
+        }
+
+        &:last-child {
+          border-bottom-right-radius: 20rpx;
+          border-bottom-left-radius: 20rpx;
+        }
+      }
+    }
+
+    .action-sheet-confirm-btn {
+      height: 90rpx;
+      line-height: 90rpx;
+      background: #111;
+      color: #A6E22E;
+      border-radius: 45rpx;
+      text-align: center;
+      font-size: 36rpx;
+      font-weight: bold;
+      letter-spacing: 4rpx;
+      width: 90%;
+      margin: 0 auto;
+      margin-top: 40rpx;
+    }
+
+    .action-sheet-line {
+      position: absolute;
+      bottom: 4rpx;
+      left: 50%;
+      transform: translateX(-50%); 
+      width: 268rpx;
+      height: 10rpx;
+      background: #000000;
+      border-radius: 200rpx;
+    }
+  }
+}
+
+.action-sheet-radio-img {
+  width: 36rpx;
+  height: 36rpx;
+  margin-left: 24rpx;
+}
+
+.action-sheet-confirm-img {
+  width: 38rpx;
+  height: 38rpx;
+  position: absolute;
+  right: 28rpx;
+  top: 24rpx;
+  border-radius: 50%;
+}
+</style>

pages.json

@@ -425,6 +425,14 @@
 			{
 				"navigationBarTitleText" : "讨论区"
 			}
+		},
+		{
+			"path" : "pages/crowdFunding/customerService",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {

pages/crowdFunding/crowdfundingDetails.vue

@@ -6,7 +6,7 @@
 			</view>
 			<view class="navbar-center one-omit" style="max-width: 70vw; " :style="{ opacity: navBgOpacity }">
 				【Woh】灯塔 塔罗牌 治愈风泛伟特系伟特系伟特系
-			</view>
+			</view> 
 			<view class="navbar-right scale-tap" @click="showShare = true">
 				<image src="@/static/crowdFunding/share.png" mode="widthFix"></image>
 			</view>
@@ -62,17 +62,17 @@
 						</view>
 					</view>
 				</view>
-				<view class="project-update-right scale-tap">
+				<view class="project-update-right scale-tap" @click="goPage('/pages/crowdFunding/discussionArea?tags=update')">
 					<view>历史更新</view>
 					<image src="@/static/crowdFunding/updateDetails.png"></image>
 
 				</view>
 			</view>
 
-			<view class="section comment">
+			<view class="section comment scale-tap">
 				<view class="comment-title">
 					<view>项目讨论(10)</view>
-					<view class="comment-more">查看更多 <image src="@/static/crowdFunding/right.png"></image>
+					<view class="comment-more" @click="goPage('/pages/crowdFunding/discussionArea?tags=comment')">查看更多 <image src="@/static/crowdFunding/right.png"></image>
 					</view>
 				</view>
 				<view class="comment-content">
@@ -100,7 +100,7 @@
 						<text class="initiator-name">{{ initiator.name }}</text>
 						<text class="initiator-tag">发起人</text>
 					</view>
-					<view class="initiator-service-btn  blick-btn-animation">
+					<view class="initiator-service-btn  blick-btn-animation" @click="goPage('/pages/crowdFunding/customerService')">
 						<image class="service-icon" src="@/static/crowdFunding/service.png" />
 						<text>客服</text>
 					</view>
@@ -146,10 +146,10 @@
 		<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" />
+		<SharePopup :visible="showShare" :userId="userId" :share-title="shareTitle" :share-desc="shareDesc" :share-img="shareImg" view="crowdfundingDetails" @close="showShare = false" :isReportContent="true" />
 	</view>
 </template>
-
+   
 <script>
 
 import VideoPlayer from "@/components/VideoPlayer/VideoPlayer.vue";
@@ -219,6 +219,11 @@ export default {
 		playVideo(idx) {
 			this.currentMediaIndex = idx;
 			this.videoPlaying = true;
+		},
+		goPage(url) { 
+			uni.navigateTo({
+				url: url
+			});
 		}
 	},
 	mounted() {
@@ -255,11 +260,11 @@ export default {
 		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;
+		padding-top:calc( var(--status-bar-height) + 12rpx);
 		background: transparent;
 		transition: background 0.3s;
 
@@ -708,7 +713,7 @@ export default {
 		margin-left: 18rpx;
 		font-weight: bold;
 	}
-
+	
 	.service-icon {
 		width: 32rpx;
 		height: 32rpx;

pages/crowdFunding/customerService.vue

@@ -0,0 +1,704 @@
+<template>
+	<view class="customer-service-page">
+		<!-- 顶部栏 -->
+		<!-- 顶部导航栏 -->
+		<view class="custom-navbar">
+			<view class="navbar-left">
+				<text class="fa fa-angle-left" @click="goBack"></text>
+				<view class="navbar-title one-omit">
+					时间是一种解药时间是一种解药时间是一种解药时间是一种解药时间是一种解药
+				</view>
+			</view>
+
+			<view class="navbar-right" @click="showActionSheet">
+				<image src="@/static/icon/more2.png" style="width: 64rpx;height: 64rpx;  margin-top: 15rpx;"
+					mode="widthFix"></image>
+			</view>
+		</view>
+
+
+		<!-- 聊天内容区 -->
+		<scroll-view class="cs-chat-list" :scroll-y="true" :scroll-with-animation="true"
+			:scroll-into-view="scrollToView"
+			:style="{ paddingBottom: (keyboardHeight ? keyboardHeight + 100 : 100) + 'rpx' }">
+			<view v-for="(msg, idx) in chatList" :key="msg.id">
+				<view v-if="shouldShowTime(idx)" class="cs-time-bar">
+					<view class="cs-time-inner">{{ formatTime(msg.time) }}</view>
+				</view>
+				<template v-if="msg.type === 'orderCard'">
+					<view class="cs-msg-order-card">
+						<image class="order-card-img" :src="msg.order.img" mode="aspectFill" />
+						<view class="order-card-info">
+							<view class="order-card-title">{{ msg.order.title }}</view>
+							<view class="order-card-row">
+								<text class="order-card-label">订单编号</text>
+								<text class="order-card-value">{{ msg.order.orderNo }}</text>
+							</view>
+							<view class="order-card-row">
+								<text class="order-card-label">下单时间</text>
+								<text class="order-card-value">{{ msg.order.orderTime }}</text>
+							</view>
+							<view class="order-card-btn-box">
+								<button class="order-card-btn">查看详情</button>
+							</view>
+						</view>
+						<image class="order-card-avatar" :src="msg.avatar" />
+					</view>
+				</template>
+				<template v-else>
+					<view :id="'msg-' + msg.id"
+						:class="['cs-msg-item', msg.type === 'user' ? 'cs-msg-self' : 'cs-msg-other']">
+						<image class="cs-avatar" :src="msg.avatar" />
+						<view class="cs-msg-bubble">{{ msg.content }}</view>
+					</view>
+				</template>
+			</view>
+			<view :id="'bottom-anchor'"></view>
+			<view v-if="adShow" :style="{ height: orderCardHeight + 'rpx' }"></view>
+		</scroll-view>
+
+		<!-- 底部输入栏 -->
+		<view class="cs-input-bar" :style="{ bottom: keyboardHeight + 'rpx' }">
+			<!-- 广告条 -->
+			<view class="order-card" v-if="adShow">
+				<view class="order-card-header">
+					<image class="order-card-img" src="/static/crowdFunding/top-img.png" mode="aspectFill" />
+					<view class="order-card-info">
+						<view class="order-card-title one-omit">【Woh】灯塔 塔罗牌 治愈风泛伟特系</view>
+						<view class="order-card-btn-box">
+							<button class="order-card-btn" @click="sendOrderCardMsg()">发给客服</button></view>
+					</view> 
+					<image class="order-card-close" @click="closeOrderCard" src="@/static/icon/wd_icon_guanbi.png"   mode="widthFix"></image>
+				</view>
+				<view class="order-card-row">
+					<text class="order-card-label">订单编号</text>
+					<text class="order-card-value">12201544521215415415415</text>
+				</view>
+				<view class="order-card-row">
+					<text class="order-card-label">下单时间</text>
+					<text class="order-card-value">2025-05-27 09:35:30</text>
+				</view>
+			</view>
+
+			<view class="cs-input-area">
+				<textarea
+					class="cs-textarea"
+					v-model="inputValue"
+					placeholder="在这里输入新消息"
+					:focus="inputFocused"
+					:adjust-position="false"
+					@focus="onInputFocus"
+					@blur="onInputBlur"
+					@keyboardheightchange="onKeyboardHeightChange"
+					maxlength="300"
+					auto-height
+					:style="{ 'max-height': '120rpx', 'overflow-y': 'auto' }"
+				></textarea>
+				<view class="emoji-trigger" @tap="toggleEmojiPanel">
+					<text class="fa fa-smile-o"></text>
+				</view>
+				<view class="send_btn" @tap="sendMsg">发送</view>
+			</view>
+		 
+		</view>
+
+		<view class="emoji-panel" :class="{ show: showEmojiPanel }" v-if="showEmojiPanel">
+			<view class="emoji-grid">
+				<view class="emoji-item" v-for="(emoji, index) in emojiList" :key="index" @tap="selectEmoji(emoji)">
+					{{ emoji }}
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			chatList: [
+				{ id: 1, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:01' },
+				{ id: 2, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:05' },
+				{ id: 3, content: '你好请问可以怎么帮助你', type: 'user', avatar: '/static/makedetail/characterProfilePicture.png', time: '2025-05-21 20:10' }, { id: 4, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'user', avatar: '/static/makedetail/characterProfilePicture.png', time: '2025-05-21 20:10' },
+				{ id: 5, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:01' },
+				{ id: 6, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:05' },
+				 { id: 7, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:01' },
+				{ id: 8, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:05' },
+				{ id:9, content: '你好请问可以怎么帮助你', type: 'user', avatar: '/static/makedetail/characterProfilePicture.png', time: '2025-05-21 21:10' }, { id: 13, content: '你好请问可以怎么帮助你', type: 'user', avatar: '/static/makedetail/characterProfilePicture.png', time: '2025-05-21 20:10' },
+				{ id: 10, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:01' },
+				{ id: 11, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 23:05' }
+			],
+			inputValue: '',
+			pollTimer: null,
+			scrollToView: 'bottom-anchor',
+			adShow: true,
+			keyboardHeight: 0,
+			inputFocused: false,
+			orderCardHeight: 260, // rpx，实际高度可根据广告条内容微调
+			showEmojiPanel: false,
+			emojiList: [
+				'😀','😁','😂','🤣','😃','😄','😅','😆','😉','😊','😋','😎','😍','😘','🥰','😗','😙','😚','🙂','🤗',
+				'🤩','🤔','🤨','😐','😑','😶','🙄','😏','😣','😥','😮','🤐','😯','😪','😫','🥱','😴','😌','😛','😜',
+				'😝','🤤','😒','😓','😔','😕','🙃','🤑','😲','☹️','🙁','😖','😞','😟','😤','😢','😭','😦','😧','😨',
+				'😩','🤯','😬','😰','😱','🥵','🥶','😳','🤪','😵','😡','😠','🤬','😷','🤒','🤕','🤢','🤮','🥴','😇',
+				'🥳','🥺','🤠','😈','👿','👹','👺','💀','👻','👽','🤖','💩','😺','😸','😹','😻','😼','😽','🙀','😿',
+				'😾','🙈','🙉','🙊','💋','💌','💘','💝','💖','💗','💓','💞','💕','💟','❣️','💔','❤️','🧡','💛','💚',
+				'💙','💜','🤎','🖤','🤍','💯','💢','💥','💫','💦','💨','🕳️','💣','💬','👋','🤚','🖐️','✋','🖖','👌',
+				'🤏','✌️','🤞','🤟','🤘','🤙','👈','👉','👆','🖕','👇','☝️','👍','👎','✊','👊','🤛','🤜','👏','🙌',
+				'👐','🤲','🙏','✍️','💅','🤳','💪','🦾','🦵','🦶','👂','👃','🧠','🦷','🦴','👀','👁️','👅','👄'
+			],
+		}
+	},
+	onShow() {
+		this.startPolling();
+	},
+	onHide() {
+		this.clearPolling();
+	},
+	onUnload() {
+		this.clearPolling();
+	},
+	methods: {
+		goBack() {
+			uni.navigateBack();
+		},
+		// 轮询获取消息
+		startPolling() {
+			this.clearPolling();
+			this.pollTimer = setInterval(this.fetchMessages, 30000);
+			this.fetchMessages();
+		},
+		clearPolling() {
+			if (this.pollTimer) {
+				clearInterval(this.pollTimer);
+				this.pollTimer = null;
+			}
+		},
+		fetchMessages() {
+			// TODO: 替换为实际接口获取消息的接口
+			// uni.request({ ... })
+			// 假设新消息加入chatList
+			// this.chatList.push(...)
+			// 滚动到底部
+			this.$nextTick(() => {
+				this.scrollToView = 'bottom-anchor';
+			});
+		},
+		sendMsg() {
+			if (!this.inputValue.trim()) return;
+			this.chatList.push({
+				id: Date.now(),
+				content: this.inputValue,
+				type: 'user',
+				avatar: '/static/avatar/cs2.png'
+			});
+			this.inputValue = '';
+			this.$nextTick(() => {
+				this.scrollToView = 'bottom-anchor';
+			});
+			// TODO: 发送消息到后端接口
+		},
+		closeOrderCard() {
+			this.adShow = false;
+		},
+		shouldShowTime(idx) {
+			if (idx === 0) return true;
+			// 找到上一个显示时间条的消息
+			let lastShowIdx = -1;
+			for (let i = idx - 1; i >= 0; i--) {
+				if (this.shouldShowTime(i)) {
+					lastShowIdx = i;
+					break;
+				}
+			}
+			if (lastShowIdx === -1) return true;
+			const curTime = new Date(this.chatList[idx].time.replace(/-/g, '/')).getTime();
+			const lastTime = new Date(this.chatList[lastShowIdx].time.replace(/-/g, '/')).getTime();
+			// 20分钟 = 20*60*1000 毫秒
+			return (curTime - lastTime) > 20 * 60 * 1000;
+		},
+		formatTime(timeStr) {
+			// 例：'2025-05-21 20:01' => '05月21日 20:01'
+			if (!timeStr) return '';
+			const d = new Date(timeStr.replace(/-/g, '/'));
+			const MM = String(d.getMonth() + 1).padStart(2, '0');
+			const DD = String(d.getDate()).padStart(2, '0');
+			const hhmm = timeStr.slice(11, 16);
+			return `${MM}月${DD}日 ${hhmm}`;
+		},
+		onInputFocus(e) {
+			this.inputFocused = true;
+
+		},
+		onInputBlur(e) {
+			this.inputFocused = false;
+			this.keyboardHeight = 0;
+		},
+		px2rpx(px) {
+			// 以750设计稿为例，1rpx = 屏幕宽度/750
+			const screenWidth = uni.getSystemInfoSync().windowWidth;
+			return px * 750 / screenWidth;
+		},
+		onKeyboardHeightChange(e) {
+			let pxHeight = e.detail ? e.detail.height : (e.height || 0);
+			// #ifdef H5 || APP-PLUS
+			this.keyboardHeight = this.px2rpx(pxHeight);
+			// #endif
+			// #ifdef MP-WEIXIN
+			this.keyboardHeight = pxHeight; // 小程序下直接用rpx
+			// #endif
+		},
+		toggleEmojiPanel() {
+			this.inputFocused = false;
+			setTimeout(() => {
+				this.showEmojiPanel = !this.showEmojiPanel;
+			}, 100);
+		},
+		selectEmoji(emoji) {
+			this.inputValue += emoji;
+			this.showEmojiPanel = false;
+		},
+		sendOrderCardMsg() {
+			this.chatList.push({
+				id: Date.now(),
+				type: 'orderCard',
+				avatar: '/static/makedetail/characterProfilePicture.png', // 用户头像
+				order: {
+					img: '/static/crowdFunding/top-img.png',
+					title: '【Woh】灯塔 塔罗牌 治愈风泛伟特系',
+					orderNo: '12201544521215415415415',
+					orderTime: '2025-05-27 09:35:30'
+				},
+				time: this.getNowTime()
+			});
+			this.$nextTick(() => {
+				this.scrollToView = 'bottom-anchor';
+			});
+		},
+		getNowTime() {
+			const d = new Date();
+			const pad = n => n < 10 ? '0' + n : n;
+			return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+		},
+		}
+	}
+</script>
+
+<style lang="scss">
+.customer-service-page {
+	min-height: 100vh;
+	background: #f2f6f2;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+
+
+	.custom-navbar {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		height: 90rpx;
+		padding: 0 20rpx;
+		padding-top: var(--status-bar-height);
+		background-color: #ffffff;
+		position: sticky;
+		top: 0;
+		height: calc(90rpx + var(--status-bar-height));
+		z-index: 100;
+
+		.navbar-left {
+			height: 80rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.fa-angle-left {
+				font-size: 48rpx;
+				color: #333;
+			}
+
+			.navbar-title {
+				max-width: 450rpx;
+				font-family: 'PingFang SC-Bold';
+				font-weight: 400;
+				font-size: 32rpx;
+				color: #1f1f1f;
+				padding-left: 20rpx;
+			}
+		}
+
+
+		.navbar-right {
+			width: 80rpx;
+			height: 80rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			.fa-ellipsis-h {
+				font-size: 36rpx;
+				color: #333;
+			}
+		}
+	}
+
+
+
+
+
+
+	.cs-chat-list {
+		flex: 1;
+		padding: 24rpx 0 0 0;
+		overflow-y: auto;
+		background: #f6f7f9;
+
+		.cs-msg-item {
+			display: flex;
+			align-items: flex-end;
+			margin-bottom: 18rpx;
+			padding: 0 24rpx;
+
+			&.cs-msg-other {
+				flex-direction: row;
+
+				.cs-avatar {
+					margin-right: 12rpx;
+				}
+
+				.cs-msg-bubble {
+					background: #fff;
+					color: #1f1f1f;
+					border-top-left-radius: 0;
+					border-top-right-radius: 12rpx;
+					border-bottom-left-radius: 12rpx;
+					border-bottom-right-radius: 12rpx;
+				}
+			}
+
+			&.cs-msg-self {
+				flex-direction: row-reverse;
+
+				.cs-avatar {
+					margin-left: 12rpx;
+				}
+
+				.cs-msg-bubble {
+					background: #e6f6d9;
+					color: #1f1f1f;
+					border-top-right-radius: 0;
+					border-top-left-radius: 12rpx;
+					border-bottom-left-radius: 12rpx;
+					border-bottom-right-radius: 12rpx;
+				}
+			}
+
+			.cs-avatar {
+				width: 64rpx;
+				height: 64rpx;
+				border-radius: 50%;
+			}
+
+			.cs-msg-bubble {
+				max-width: 70vw;
+				min-height: 40rpx;
+				font-size: 28rpx;
+				padding: 18rpx 24rpx;
+				word-break: break-all;
+				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+				margin-bottom: 2rpx;
+				display: flex;
+				align-items: center;
+			}
+		}
+
+		.cs-time-bar {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin: 18rpx 0 12rpx 0;
+
+			.cs-time-inner {
+				background: #fff;
+				color: #b2b2b2;
+				font-size: 24rpx;
+				border-radius: 16rpx;
+				padding: 8rpx 24rpx;
+				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+				display: inline-block;
+			}
+		}
+	}
+
+	.order-card {
+		background: #fff;
+		border-radius: 20rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+		padding: 24rpx 24rpx 18rpx 24rpx;
+		margin: 24rpx;
+		position: absolute;
+		top: -280rpx;
+		font-size: 28rpx;
+		width: 670rpx;
+		.order-card-header {
+			display: flex;
+			align-items: flex-start;
+			position: relative;
+
+			.order-card-img {
+				width: 100rpx;
+				height: 100rpx;
+				border-radius: 12rpx;
+				margin-right: 18rpx;
+				flex-shrink: 0;
+			}
+
+			.order-card-info {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				justify-content: flex-start;
+			
+				.order-card-title {
+					font-size: 30rpx;
+					color: #1f1f1f;
+					font-weight: 500;
+					margin-bottom: 18rpx;
+					margin-top: 2rpx;
+					line-height: 1.3;
+					max-width: 450rpx;
+				}
+
+				.order-card-btn-box {
+					display: flex;
+					align-items: center;
+					justify-content: flex-end;
+					
+					.order-card-btn {
+						font-family: 'PingFang SC-Bold';
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #ACF934;
+						background: #1F1F1F;
+						border-radius: 128rpx;
+						padding: 8rpx 14rpx;
+						line-height: 1.2;
+						margin: 0;
+					}
+				}
+			}
+
+			.order-card-close {
+				position: absolute;
+				right: -10rpx;
+				top:-10rpx;
+				font-size: 36rpx;
+				color: #1f1f1f;
+				background: #fff;
+				border-radius: 50%;
+				width: 34rpx;
+				height: 34rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				z-index: 2;
+			}
+		}
+
+		.order-card-row {
+			display: flex;
+			align-items: center;
+			margin-top: 12rpx;
+
+			.order-card-label {
+				color: #b2b2b2;
+				font-size: 26rpx;
+				width: 140rpx;
+				flex-shrink: 0;
+			}
+
+			.order-card-value {
+				color: #1f1f1f;
+				font-size: 26rpx;
+				margin-left: 12rpx;
+				word-break: break-all;
+			}
+		}
+	}
+
+	.cs-input-bar {
+		display: flex;
+		align-items: center;
+		background: #fff;
+		padding: 12rpx 16rpx;
+		border-top: 1rpx solid #ededed;
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 10;
+
+		.cs-input-area {
+			display: flex;
+			align-items: flex-end;
+			background: #fff;
+			border-radius: 32rpx;
+			padding: 8rpx 12rpx;
+			flex: 1;
+
+			.cs-textarea {
+				flex: 1;
+				min-height: 64rpx;
+				max-height: 120rpx;
+				overflow-y: auto;
+				border: none;
+				font-size: 28rpx;
+				background: #f6f7f9;
+				border-radius: 24rpx;
+				padding: 12rpx 20rpx;
+				resize: none;
+			}
+
+			.emoji-trigger {
+				margin: 0 12rpx;
+				font-size: 36rpx;
+				color: #999;
+				display: flex;
+				align-items: center;
+			}
+
+			.send_btn {
+				background: #A6E22E;
+				color: #fff;
+				border-radius: 32rpx;
+				font-size: 28rpx;
+				padding: 0 32rpx;
+				height: 64rpx;
+				line-height: 64rpx;
+				margin-left: 8rpx;
+			}
+		}
+	}
+
+	.emoji-panel {
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		max-height: 50vh;
+		width: 100vw;
+		background: #fff;
+		padding: 12rpx 0 0 0;
+		border-top: 1rpx solid #ededed;
+		z-index: 1000;
+		box-shadow: 0 -4rpx 24rpx rgba(0,0,0,0.08);
+		overflow-y: auto;
+		transform: translateY(100%);
+		transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
+		border-top: 20rpx solid #fff;
+		&.show {
+			transform: translateY(0);
+		}
+		.emoji-grid {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+			padding-bottom: 24rpx;
+			.emoji-item {
+				width: 60rpx;
+				height: 60rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 36rpx;
+				color: #333;
+				margin: 8rpx;
+				border-radius: 8rpx; 
+				padding: 8rpx;
+			}
+		}
+	}
+
+	.cs-msg-order-card {
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		background: #fff;
+		border-radius: 20rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
+		padding: 24rpx 24rpx 18rpx 24rpx;
+		margin: 24rpx 0 0 0;
+		width: 600rpx;
+		min-height: 160rpx;
+		.order-card-img {
+			width: 100rpx;
+			height: 100rpx;
+			border-radius: 12rpx;
+			margin-right: 18rpx;
+			flex-shrink: 0;
+		}
+		.order-card-info {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-start;
+			.order-card-title {
+				font-size: 30rpx;
+				color: #1f1f1f;
+				font-weight: 500;
+				margin-bottom: 18rpx;
+				margin-top: 2rpx;
+				line-height: 1.3;
+				max-width: 350rpx;
+				word-break: break-all;
+			}
+			.order-card-btn-box {
+				display: flex;
+				align-items: center;
+				justify-content: flex-end;
+				margin-top: 12rpx;
+				.order-card-btn {
+					font-family: 'PingFang SC-Bold';
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #1F1F1F;
+					background: #ACF934;
+					border-radius: 128rpx;
+					padding: 8rpx 24rpx;
+					line-height: 1.2;
+					margin: 0;
+				}
+			}
+		}
+		.order-card-row {
+			display: flex;
+			align-items: center;
+			margin-top: 8rpx;
+			.order-card-label {
+				color: #b2b2b2;
+				font-size: 26rpx;
+				width: 140rpx;
+				flex-shrink: 0;
+			}
+			.order-card-value {
+				color: #1f1f1f;
+				font-size: 26rpx;
+				margin-left: 12rpx;
+				word-break: break-all;
+			}
+		}
+		.order-card-avatar {
+			position: absolute;
+			top: -32rpx;
+			right: -32rpx;
+			width: 64rpx;
+			height: 64rpx;
+			border-radius: 50%;
+			box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
+			background: #fff;
+		}
+	}
+}
+</style>

pages/crowdFunding/discussionArea.vue

@@ -17,9 +17,9 @@
 					<text class="left">{{ item.name }}</text>
 					<view class="line"></view>
 				</view>
-			</view> 
+			</view>
 		</view>
-		 
+
 
 
 		<!-- tab内容 -->
@@ -44,25 +44,12 @@
 				</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>
+		<!-- 评论区域 -->
+		<CommentSection v-else-if="  articleInfo.title" class="comment" ref="commentSection"
+			:myInfo="myInfo"  :articleId="arcID" @totalNumberOfComments="totalNumberOfComments"
+			:articleInfo="articleInfo" :author="author" find="work">
+		</CommentSection>
+
 	</view>
 </template>
 
@@ -121,11 +108,71 @@ export default {
 					id: 2,
 				},
 			],
+			myInfo: {
+				"user_id": 1349,
+				"user_name": "??????????????????????????????",
+				"user_avatar": "http://e.zhichao.art/upload/2025-04/0a7d9b922ac8307a6f988d17b3dd7805_new.jpg"
+			},
+			articleInfo: {
+				"id": 574,
+				"task_type": 1,
+				"queue_id": 0,
+				"article_id": 0,
+				"sso_id": 1458,
+				"images": "http://c.zhichao.art/upload/2025-05/9cc4c00bab5ae9be6486d95c31d2d720_new.jpg",
+				"content": "非常喜欢这个手办图片",
+				"lyrics": "",
+				"result_audio": "",
+				"title": "这个手办感觉不错呀",
+				"style": "",
+				"num_like": 12,
+				"num_comment": 0,
+				"num_view": 84,
+				"city": "",
+				"tdate": "2025-05-26",
+				"reason": "",
+				"can_comment": 1,
+				"can_view_comment": 1,
+				"create_time": "2025-05-26 12:02:22",
+				"status": 1,
+				"video_url": "",
+				"video_width": 1080,
+				"video_height": 1920,
+				"nickname": "",
+				"age": 0,
+				"avator": "",
+				"author": "",
+				"xinzuo": "",
+				"sex": 0,
+				"dtime": "",
+				"is_like": 0,
+				"is_vip": 0,
+				"userID": 0,
+				"like_count": 0,
+				"sms_id": 0
+			},
+			articleId: 574,
+			arcID: 574,
+			type: 'work',
+			find: 'work',
+			author: {
+				"id": 1458,
+				"nickname": "时光慢递员∞",
+				"avator": "https://c.zhichao.art/upload/plat/10000000062.jpg",
+				"is_attention": 0
+			}
+		}
+	},
+	onLoad(options) {
+		if (options.tags) {
+			this.tab = options.tags === 'update' ? 1 : options.tags === 'comment' ? 2 : 1;
 		}
 	},
 	methods: {
 		checkTab(tab) {
 			this.tab = tab;
+		}, totalNumberOfComments(tableTotal) {
+			this.tableTotal = tableTotal;
 		},
 	}
 }
@@ -145,6 +192,7 @@ export default {
 		height: 184rpx;
 		border-bottom: 1px solid #F2F6F2;
 		padding: 28rpx;
+
 		.project-img {
 			width: 128rpx;
 			height: 128rpx;
@@ -158,7 +206,7 @@ export default {
 			color: #222;
 			max-width: 500rpx;
 			overflow: hidden;
-			text-overflow: ellipsis; 
+			text-overflow: ellipsis;
 			line-height: 2;
 		}
 	}
@@ -171,6 +219,7 @@ export default {
 		width: 100%;
 		background: #fff;
 		margin-bottom: 6rpx;
+
 		.tab-item {
 			width: 50%;
 			display: flex;
@@ -293,74 +342,10 @@ export default {
 		}
 	}
 
-	.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;
-				}
-			}
-		}
+	.comment {
+		background: #fff;
+		border-top-left-radius: 32rpx;
+		border-top-right-radius: 32rpx;
 	}
 }
 </style>

pages/my/feedback.vue

@@ -4,6 +4,18 @@
 			<template slot="center"> </template>
 		</PageHeader> -->
 		<view class="feedback-container">
+			<!-- 举报内容 -->
+			 <view class="report-content scale-tap" v-if="isReportContent" @click="openReportSheet">
+				 <view class="report-title">
+					举报内容 
+				 </view>
+				 <view>
+					<text v-if="selectedReportIndex !== null" style="color:#1f1f1f;margin-left:16rpx;">
+						{{ reportItems[selectedReportIndex].text }}
+					</text>
+					 <image  class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
+				 </view>
+			 </view>
 			<!-- 问题描述区域 -->
 			<view class="description-area">
 				<view class="title">问题描述</view>
@@ -30,25 +42,55 @@
 				</view>
 
 			</view>
-
+		 
 			<!-- 提交按钮 -->
 			<view class="submit-btn" @tap="submitFeedback">
 				确认提交
 			</view>
 		</view>
+		<ActionSheet
+		  ref="actionSheet"
+		  :title="'举报内容'"
+		  :items="reportItems"
+		  @select="onReportSelect"
+		/>
 	</view>
 </template>
 
 <script>
+import ActionSheet from '@/components/dropDownSelection/ActionSheet.vue';
 export default {
+	components: {
+		ActionSheet
+	},
 	data() {
 		return {
 			content: '',
 			imgList: [],
-			skey: getApp().globalData.skey || ''
+			skey: getApp().globalData.skey || '',
+			reportItems: [
+				{ text: '售后问题' },
+				{ text: '其他问题' }
+			],
+			selectedReportIndex: null,
+			isReportContent:false
 		}
 	},
+	onLoad(e) {
+		if (e&&e.isReportContent) {
+			this.isReportContent = e.isReportContent === 'true'?true:false;
+		}
+
+	},
 	methods: {
+		openReportSheet() {
+			this.$refs.actionSheet.show();
+		},
+		onReportSelect(index, item) {
+			this.selectedReportIndex = index;
+			console.log('选择的标签',index,item,item.text);
+			
+		},
 		// 上传图片
 		upload() {
 			if (this.imgList.length >= 5) {
@@ -177,7 +219,23 @@ export default {
 
 .feedback-container {
 	padding: 30rpx;
-
+	.report-content{
+		display: flex;
+		padding: 26rpx 40rpx 22rpx 24rpx;
+		background: #fff;
+		border-radius: 20rpx;
+		margin-bottom: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 32rpx;
+			color: #333;
+			margin-bottom: 20rpx;
+		image{
+			width: 28rpx;
+			height: 28rpx;
+		}
+	}
 	.description-area {
 		background: #fff;
 		border-radius: 16rpx;