Compare commits
	
		
			20 Commits 
		
	
	
	| Author | SHA1 | Date | 
|---|---|---|
|  | 340d0f760f | 10 months ago | 
|  | d5e35e6dbb | 10 months ago | 
|  | 1a8a62f598 | 10 months ago | 
|  | 0880661727 | 11 months ago | 
|  | 40fe59faa6 | 11 months ago | 
|  | ebc04b1900 | 11 months ago | 
|  | ff93bccef4 | 11 months ago | 
|  | 7f46b731a0 | 11 months ago | 
|  | cec3c6a31b | 11 months ago | 
|  | a301977d29 | 11 months ago | 
|  | a2e0a686d7 | 11 months ago | 
|  | 20726d5c26 | 11 months ago | 
|  | a37e4403af | 11 months ago | 
|  | ca790b11ab | 11 months ago | 
|  | 71e268b51f | 11 months ago | 
|  | d8d79bacc6 | 11 months ago | 
|  | 5a1e37bc96 | 11 months ago | 
|  | 6a7d31e1c0 | 11 months ago | 
|  | 2462ade3fc | 11 months ago | 
|  | 557c93d81c | 11 months ago | 
| @ -0,0 +1,141 @@ | ||||
| <template> | ||||
|     <view class="myimgDV"> | ||||
|         <view v-if="imgPicList.length>0" class='receiveimage flex justify'> | ||||
|             <block v-for="(item,ind) in imgPicList" :key="ind"> | ||||
|                 <image class="imgitem" :style="{width:imgwidth,height:imgheight}" :class="imgboxtype==0?'onepic':imgboxtype==1?'doublepic':imgboxtype==2?'triplepic':''" | ||||
|                  :src="item" :mode="imgboxtype==0?'widthFix':imgboxtype==1?'aspectFill':imgboxtype==2?'aspectFill':''" @click="previewpic(item,imgPicList)"></image> | ||||
|                 <!-- {width:(imgboxtype==0?'':imgwidth),height:(imgboxtype==0?'':imgwidth),padding:(imgboxtype==0?'':imgpad)} --> | ||||
|             </block> | ||||
|         </view> | ||||
|     </view> | ||||
| </template> | ||||
| 
 | ||||
| <script> | ||||
|     export default { | ||||
| 		name:"community_image_box", | ||||
|         data() { | ||||
|             return { | ||||
|                 imgPicList: [], | ||||
|                 imgboxtype: 0, | ||||
|                 imgwidth: 0, | ||||
|                 imgpad: 0, | ||||
|                 imgheight: '' | ||||
|             } | ||||
|         }, | ||||
|         props: { | ||||
|             imgList: { | ||||
|                 type: Array | ||||
|             }, | ||||
|             num: { | ||||
|                 type: Number, | ||||
|                 default: 0 | ||||
|             }, | ||||
|             pad: { | ||||
|                 type: Number, | ||||
|                 default: 0 | ||||
|             } | ||||
|         }, | ||||
|         methods: { | ||||
|             // 图片预览 | ||||
|             previewpic(cind, clist) { | ||||
|                 console.log(cind, clist); | ||||
|                 uni.previewImage({ | ||||
|                     urls: clist, | ||||
|                     current: cind, | ||||
|                     indicator: 'default' | ||||
|                 }); | ||||
|             }, | ||||
|             getheight() { | ||||
| 				console.log('imgboxtype:',this.imgboxtype) | ||||
|                 let that = this; | ||||
|                 const query = uni.createSelectorQuery().in(that) | ||||
|                 query.select('.imgitem').boundingClientRect() | ||||
|                 query.exec((res)=>{ | ||||
|                     console.log(res[0].width) | ||||
|                     if (that.num == 1) { | ||||
|                         that.imgheight = '100%'; | ||||
|                     } else if (that.num == 2 || that.num == 4) { | ||||
|                         that.imgheight = (res[0].width).toFixed(2) + 'px'; | ||||
|                     } else { | ||||
|                         that.imgheight = (res[0].width).toFixed(2) + 'px'; | ||||
|                     } | ||||
|                 }) | ||||
| 
 | ||||
|                 // const query = uni.createSelectorQuery().in(this).select('.imgitem'); | ||||
|                 // uni.createSelectorQuery().select('.imgitem').boundingClientRect(res => { | ||||
|                 //     console.log('reac', res) | ||||
|                 //     if (this.num == 1) { | ||||
|                 //         this.imgheight = '100%'; | ||||
|                 //     } else if (this.num == 2 || this.num == 4) { | ||||
|                 //         this.imgheight = (res.width).toFixed(2) + 'px'; | ||||
|                 //     } else { | ||||
|                 //         this.imgheight = (res.width).toFixed(2) + 'px'; | ||||
|                 //     } | ||||
|                 // }).exec() | ||||
| 				 | ||||
|             } | ||||
|         }, | ||||
|         mounted() { | ||||
|             // let this = this; | ||||
|             this.imgPicList = this.imgList; | ||||
| 			console.log('num:'+this.num) | ||||
|             if (this.num == 1) { | ||||
|                 this.imgboxtype = 0; | ||||
|                 this.imgwidth = 100 + '%'; | ||||
|             } else if (this.num == 2 || this.num == 4) { | ||||
|                 this.imgboxtype = 1; | ||||
|                 this.imgwidth = 49 + '%'; | ||||
|             } else if (this.num == 3 || this.num > 4) { | ||||
|                 this.imgboxtype = 2; | ||||
|                 this.imgwidth = 32 + '%'; | ||||
|             } | ||||
|             this.$nextTick(function() { | ||||
|                 this.getheight(); | ||||
|             }) | ||||
|         } | ||||
|     } | ||||
| </script> | ||||
| 
 | ||||
| <style lang="scss"> | ||||
|     .myimgDV { | ||||
|         .flex { | ||||
|             display: flex; | ||||
|         } | ||||
|         .justify { | ||||
|             justify-content: space-between; | ||||
|         } | ||||
|         .receiveimage { | ||||
|             margin-top: 28rpx; | ||||
|             display: flex; | ||||
|             flex-wrap: wrap; | ||||
|             width: 100%; | ||||
|             .onepic { | ||||
|                 width: 100%; | ||||
|                 // height: 188rpx; | ||||
|                 // height: auto; | ||||
|                 margin-bottom: 28rpx; | ||||
|                 &:nth-child(3n) { | ||||
|                     margin-right: 0; | ||||
|                 } | ||||
|             } | ||||
|             .doublepic { | ||||
|                 // width: 340rpx; | ||||
|                 // height: 340rpx; | ||||
|                 margin-right: 12rpx; | ||||
|                 margin-bottom: 12rpx; | ||||
|                 &:nth-child(2n) { | ||||
|                     margin-right: 0; | ||||
|                 } | ||||
|             } | ||||
|             .triplepic { | ||||
|                 // width: 222rpx; | ||||
|                 // height: 222rpx; | ||||
|                 margin-right: 12rpx; | ||||
|                 margin-bottom: 12rpx; | ||||
|                 &:nth-child(3n) { | ||||
|                     margin-right: 0; | ||||
|                 } | ||||
|             } | ||||
|         } | ||||
|     } | ||||
| </style> | ||||
| @ -1,17 +1,190 @@ | ||||
| <template> | ||||
|   <view> | ||||
| 
 | ||||
|   <view class="community_box"> | ||||
| 	  <!-- 头部信息 --> | ||||
| 	  <view class="top_box"> | ||||
| 		  <!-- 头像 --> | ||||
| 		  <view class="dog_image_box" @click="toPersonCenter"> | ||||
| 			  <image class="dog_image" src="../../../../static/homepages/community/community/pictures/dog_image.png" mode="widthFix"></image> | ||||
| 		  </view> | ||||
| 		  <view class="words_box"> | ||||
| 			  <!-- 标题 --> | ||||
| 			  <view class="title_box">fit journey社区</view> | ||||
| 			  <view class="tip_word_box">搜索他人的健康秘诀</view> | ||||
| 		  </view> | ||||
| 		  <view class="add_image_box"> | ||||
| 			  <image  | ||||
| 				class="add_image"  | ||||
| 				src="../../../../static/homepages/community/community/pictures/add_image.png"  | ||||
| 				mode="widthFix" | ||||
| 				@click="toAddPostPage" | ||||
| 			></image> | ||||
| 		  </view> | ||||
| 	  </view> | ||||
| 	  <view class="line_box"></view> | ||||
| 	  <!-- 帖子 --> | ||||
| 	  <view class="post_body"> | ||||
| 		  <scroll-view class="post_scroll_box" scroll-y="true"> | ||||
| 			  <view class="post_box" v-for="(item, index) in posts" :key="index"> | ||||
| 			  	<view class="post_top_box"> | ||||
| 			  		<view class="post_avatar_box"> | ||||
| 			  			<image class="post_avatar" :src=item.avatar mode="widthFix"></image> | ||||
| 			  		</view> | ||||
| 			  		<view class="post_info"> | ||||
| 			  			<view class="post_name">{{item.name}}</view> | ||||
| 			  			<view class="post_date">{{item.date}}</view> | ||||
| 			  		</view> | ||||
| 			  	</view> | ||||
| 			  	<view class="post_word_box">{{item.word}}</view> | ||||
| 			  	<view class="post_images_box"> | ||||
| 			  		<community_image_box class="post_images" :imgList='item.imgList' :num='item.imgList.length'></community_image_box> | ||||
| 			  	</view> | ||||
| 			  	<view class="post_bottom_box"> | ||||
| 			  		<view class="comments_box"> | ||||
| 			  			<image class="chat_icon" src="../../../../static/homepages/community/community/pictures/chat_icon.png" mode="widthFix"></image> | ||||
| 			  			<view class="comments_num">{{item.comments_num}}</view> | ||||
| 			  		</view> | ||||
| 			  		<view class="like_box"> | ||||
| 			  			<image | ||||
| 							class="love_icon"  | ||||
| 							:src=getLikeImage(index) | ||||
| 							mode="widthFix" | ||||
| 							@click="likeClick(index)" | ||||
| 						></image> | ||||
| 			  			<view class="like_num">{{item.like_num}}</view> | ||||
| 			  		</view> | ||||
| 			  	</view> | ||||
| 			  </view> | ||||
| 		  </scroll-view> | ||||
| 	  </view> | ||||
|   </view> | ||||
|   <!-- 底部导航栏 --> | ||||
|   <tarbar_community class="tarbar_box"></tarbar_community> | ||||
| </template> | ||||
| 
 | ||||
| <script> | ||||
| import Community from "@/components/swiper/community.vue"; | ||||
| import community_image_box from "../../../../components/community_image_box/community_image_box.vue"; | ||||
| export default { | ||||
|   components: {Community, community_image_box}, | ||||
|   data() { | ||||
|     return {}; | ||||
|     return { | ||||
| 		posts:[ | ||||
| 			{ | ||||
| 				avatar:'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 				name:'cat', | ||||
| 				date:'2024年9月31日', | ||||
| 				word:'今天去海边锻炼看见的,真是太美了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊', | ||||
| 				imgList:[ | ||||
| 					'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 				], | ||||
| 				comments_num:1, | ||||
| 				like_num:100, | ||||
| 				islike:false, | ||||
| 			}, | ||||
| 			{ | ||||
| 				avatar:'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 				name:'puppy', | ||||
| 				date:'2024年11月13日', | ||||
| 				word:'今天去海边锻炼看见的,真是太美了', | ||||
| 				imgList:[ | ||||
| 					'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 				], | ||||
| 				comments_num:12, | ||||
| 				like_num:17, | ||||
| 				islike:false, | ||||
| 			}, | ||||
| 			{ | ||||
| 				avatar:'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 				name:'cat', | ||||
| 				date:'2024年10月13日', | ||||
| 				word:'今天去海边锻炼看见的', | ||||
| 				imgList:[ | ||||
| 					'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 				], | ||||
| 				comments_num:10, | ||||
| 				like_num:100, | ||||
| 				islike:false, | ||||
| 			}, | ||||
| 			{ | ||||
| 				avatar:'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 				name:'cat', | ||||
| 				date:'2024年1月13日', | ||||
| 				word:'今天去锻炼', | ||||
| 				imgList:[ | ||||
| 					'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 				], | ||||
| 				comments_num:10, | ||||
| 				like_num:100, | ||||
| 				islike:false, | ||||
| 			}, | ||||
| 		], | ||||
| 	}; | ||||
|   }, | ||||
|   mounted(){ | ||||
| 	this.getAllPost() | ||||
|   }, | ||||
|   computed:{ | ||||
| 	likeImages() { | ||||
| 	    return this.posts.map((post, index) => ({ | ||||
| 	        index, | ||||
| 	        image: post.islike ? '../../../../static/homepages/community/community/pictures/red_love_image.png' : '../../../../static/homepages/community/community/pictures/love_image.png' | ||||
| 	    })); | ||||
| 	} | ||||
|   }, | ||||
|   methods:{ | ||||
| 	  getLikeImage(index) { | ||||
| 		  //TODO:获取点赞的图片 | ||||
| 	        const item = this.likeImages.find(item => item.index === index); | ||||
| 	        return item ? item.image : ''; | ||||
| 		}, | ||||
| 	  getAllPost(){ | ||||
| 		  //TODO:获取所有的帖子 | ||||
| 		  const app = getApp() | ||||
| 		  uni.request({ | ||||
| 		  	url:app.globalData.fit_journey_community_address + '/post/getAll', | ||||
| 			method:"GET", | ||||
| 			success:(res) => { | ||||
| 				console.log('getAllPost') | ||||
| 				console.log(res) | ||||
| 			}, | ||||
| 			fail: (err) => { | ||||
| 				console.log('getAllPost fail') | ||||
| 				console.log(err.log) | ||||
| 			}, | ||||
| 		  }) | ||||
| 	  }, | ||||
| 	  likeClick(index){ | ||||
| 		  //TODO:点赞 | ||||
| 		  if (this.posts[index].islike){ | ||||
| 			  this.posts[index].islike = false | ||||
| 			  this.posts[index].like_num-- | ||||
| 		  } | ||||
| 		  else{ | ||||
| 			  this.posts[index].islike = true | ||||
| 			  this.posts[index].like_num++ | ||||
| 		  } | ||||
| 	  }, | ||||
| 	  toAddPostPage(){ | ||||
| 		  //TODO:转到发布帖子界面 | ||||
| 		  uni.navigateTo({ | ||||
| 		  	url:'/pages/homepages/community/add_post/add_post' | ||||
| 		  }) | ||||
| 	  }, | ||||
| 		toPersonCenter(){ | ||||
| 			uni.navigateTo({ | ||||
| 				url:'/pages/homepages/community/personal_center/personal_center' | ||||
| 			}) | ||||
| 		} | ||||
|   } | ||||
| } | ||||
| </script> | ||||
| 
 | ||||
| <style lang="scss"> | ||||
| 
 | ||||
| 	@import "@/static/homepages/community/community/scss/community.scss"; | ||||
| </style> | ||||
|  | ||||
| @ -1,17 +1,229 @@ | ||||
| <template> | ||||
|   <view> | ||||
| 
 | ||||
|   <view class="person_center_box"> | ||||
| 	<view class="person_center_top"> | ||||
| 		<view class="return_box"> | ||||
| 			<image  | ||||
| 				class="return_image"  | ||||
| 				src="../../../../static/homepages/community/personal_center/pictures/left_arrow.png"  | ||||
| 				mode="widthFix" | ||||
| 			></image> | ||||
| 		</view> | ||||
| 	</view> | ||||
| 	<view class="person_center_body"> | ||||
| 		<view class="info_box"> | ||||
| 			<view class="height_box"> | ||||
| 				<view class="height_data">{{height}}cm</view> | ||||
| 				<view class="height_words">身高</view> | ||||
| 			</view> | ||||
| 			<image class="avatar_box" src="" mode="widthFix"></image> | ||||
| 			<view class="weight_box"> | ||||
| 				<view class="weight_data">{{weight}}kg</view> | ||||
| 				<view class="weight_words">体重</view> | ||||
| 			</view> | ||||
| 			<view class="name_box">{{name}}</view> | ||||
| 			<view class="tip_box">{{tip}}</view> | ||||
| 		</view> | ||||
| 		<view class="btns_box"> | ||||
| 			<button class="changeInfoBtn">个人中心修改信息</button> | ||||
| 			<button class="addPostBtn" @click="toAddPostPage">去发布帖子</button> | ||||
| 		</view> | ||||
| 		<view class="posts_box"> | ||||
| 			<view class="post_nav_box"> | ||||
| 				<view class="toMypost_box post_nav"> | ||||
| 					<view class="toMypost" @click="myPostClick">我的帖子</view> | ||||
| 					<view class="bottom_line" v-if="isMyPost"></view> | ||||
| 				</view> | ||||
| 				<view class="toLikepost_box post_nav"> | ||||
| 					<view class="toLikepost" @click="likePostClick">我的点赞</view> | ||||
| 					<view class="bottom_line" v-if="!isMyPost"></view> | ||||
| 				</view> | ||||
| 			</view> | ||||
| 			<view class="posts"> | ||||
| 				<view class="post_box" v-for="(item, index) in posts" :key="index"> | ||||
| 					<view class="post_top_box"> | ||||
| 						<view class="post_avatar_box"> | ||||
| 							<image class="post_avatar" :src=item.avatar mode="widthFix"></image> | ||||
| 						</view> | ||||
| 						<view class="post_info"> | ||||
| 							<view class="post_name">{{item.name}}</view> | ||||
| 							<view class="post_date">{{item.date}}</view> | ||||
| 						</view> | ||||
| 					</view> | ||||
| 					<view class="post_word_box">{{item.word}}</view> | ||||
| 					<view class="post_images_box"> | ||||
| 						<community_image_box class="post_images" :imgList='item.imgList' :num='item.imgList.length'></community_image_box> | ||||
| 					</view> | ||||
| 					<view class="post_bottom_box"> | ||||
| 						<view class="comments_box"> | ||||
| 							<image class="chat_icon" src="../../../../static/homepages/community/community/pictures/chat_icon.png" mode="widthFix"></image> | ||||
| 							<view class="comments_num">{{item.comments_num}}</view> | ||||
| 						</view> | ||||
| 						<view class="like_box"> | ||||
| 							<image | ||||
| 								class="love_icon" | ||||
| 								:src=getLikeImage(index) | ||||
| 								mode="widthFix" | ||||
| 								@click="likeClick(index)" | ||||
| 							></image>					 | ||||
| 							<view class="like_num">{{item.like_num}}</view> | ||||
| 						</view> | ||||
| 					</view> | ||||
| 				</view> | ||||
| 			</view> | ||||
| 		</view> | ||||
| 	</view> | ||||
|   </view> | ||||
| </template> | ||||
| 
 | ||||
| <script> | ||||
| import community_image_box from "../../../../components/community_image_box/community_image_box.vue"; | ||||
| export default { | ||||
|   data() { | ||||
|     return {}; | ||||
|   } | ||||
| 	components: {community_image_box}, | ||||
| 	data() { | ||||
| 		return { | ||||
| 			name:'puppy', | ||||
| 			height:187, | ||||
| 			weight:71, | ||||
| 			tip:'这是一条个性签名', | ||||
| 			isMyPost:true, | ||||
| 			likePosts:[ | ||||
| 				{ | ||||
| 					avatar:'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					name:'cat', | ||||
| 					date:'2024年9月31日', | ||||
| 					word:'这是我喜欢的帖子', | ||||
| 					imgList:[ | ||||
| 						'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 						'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 						'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 						'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					], | ||||
| 					comments_num:1, | ||||
| 					like_num:100, | ||||
| 					islike:false, | ||||
| 				}, | ||||
| 			], | ||||
| 			myPosts:[ | ||||
| 				{ | ||||
| 					avatar:'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					name:'cat', | ||||
| 					date:'2024年9月31日', | ||||
| 					word:'今天去海边锻炼看见的,真是太美了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊', | ||||
| 					imgList:[ | ||||
| 						'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 						'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 						'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 						'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					], | ||||
| 					comments_num:1, | ||||
| 					like_num:100, | ||||
| 					islike:false, | ||||
| 				}, | ||||
| 				{ | ||||
| 					avatar:'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					name:'puppy', | ||||
| 					date:'2024年11月13日', | ||||
| 					word:'今天去海边锻炼看见的,真是太美了', | ||||
| 					imgList:[ | ||||
| 						'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 						'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 						'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					], | ||||
| 					comments_num:12, | ||||
| 					like_num:17, | ||||
| 					islike:false, | ||||
| 				}, | ||||
| 				{ | ||||
| 					avatar:'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					name:'cat', | ||||
| 					date:'2024年10月13日', | ||||
| 					word:'今天去海边锻炼看见的', | ||||
| 					imgList:[ | ||||
| 						'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 						'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					], | ||||
| 					comments_num:10, | ||||
| 					like_num:100, | ||||
| 					islike:false, | ||||
| 				}, | ||||
| 				{ | ||||
| 					avatar:'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					name:'cat', | ||||
| 					date:'2024年1月13日', | ||||
| 					word:'今天去锻炼', | ||||
| 					imgList:[ | ||||
| 						'../../../../static/homepages/community/community/pictures/dog_image.png', | ||||
| 					], | ||||
| 					comments_num:10, | ||||
| 					like_num:100, | ||||
| 					islike:false, | ||||
| 				}, | ||||
| 			], | ||||
| 			posts:[], | ||||
| 		}; | ||||
| 	}, | ||||
| 	mounted(){ | ||||
| 		this.getAllPost() | ||||
| 		this.posts = this.myPosts | ||||
| 	}, | ||||
| 	computed:{ | ||||
| 		likeImages() { | ||||
| 		    return this.posts.map((post, index) => ({ | ||||
| 		        index, | ||||
| 		        image: post.islike ? '../../../../static/homepages/community/community/pictures/red_love_image.png' : '../../../../static/homepages/community/community/pictures/love_image.png' | ||||
| 		    })); | ||||
| 		} | ||||
| 	}, | ||||
| 	methods:{ | ||||
| 		myPostClick(){ | ||||
| 			this.isMyPost = true | ||||
| 			this.posts = this.myPosts | ||||
| 		}, | ||||
| 		likePostClick(){ | ||||
| 			this.isMyPost = false | ||||
| 			this.posts = this.likePosts | ||||
| 		}, | ||||
| 		getLikeImage(index) { | ||||
| 				  //TODO:获取点赞的图片 | ||||
| 			const item = this.likeImages.find(item => item.index === index); | ||||
| 			return item ? item.image : ''; | ||||
| 		}, | ||||
| 		getAllPost(){ | ||||
| 			//TODO:获取所有的帖子 | ||||
| 			const app = getApp() | ||||
| 			uni.request({ | ||||
| 			url:app.globalData.fit_journey_community_address + '/post/getAll', | ||||
| 			method:"GET", | ||||
| 			success:(res) => { | ||||
| 				console.log('getAllPost') | ||||
| 				console.log(res) | ||||
| 			}, | ||||
| 			fail: (err) => { | ||||
| 				console.log('getAllPost fail') | ||||
| 				console.log(err.log) | ||||
| 			}, | ||||
| 			}) | ||||
| 		}, | ||||
| 		likeClick(index){ | ||||
| 			//TODO:点赞 | ||||
| 			if (this.posts[index].islike){ | ||||
| 			  this.posts[index].islike = false | ||||
| 			  this.posts[index].like_num-- | ||||
| 			} | ||||
| 			else{ | ||||
| 				this.posts[index].islike = true | ||||
| 				this.posts[index].like_num++ | ||||
| 			} | ||||
| 		}, | ||||
| 		toAddPostPage(){ | ||||
| 			uni.navigateTo({ | ||||
| 				url:'/pages/homepages/community/add_post/add_post' | ||||
| 			}) | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
| </script> | ||||
| 
 | ||||
| <style lang="scss"> | ||||
| 
 | ||||
| <style lang="scss" scoped> | ||||
| @import "../../../../static/homepages/community/personal_center/scss/personal_center.scss" | ||||
| </style> | ||||
|  | ||||
| @ -1,96 +1,198 @@ | ||||
| <template> | ||||
| 	<view> | ||||
| 		<image class="background" src="/static/homepages/homes/ai_recognize_plan/pictures/background.png"></image> | ||||
| 		<image class="back_button" src="/static/homepages/homes/ai_recognize_plan/pictures/button.png"></image> | ||||
| 		<image class="background" src="@/static/homepages/homes/ai_recognize_plan/pictures/background.png"></image> | ||||
| 		<image class="back_button" @click="go_back_to_home" src="@/static/homepages/homes/ai_recognize_plan/pictures/button.png"></image> | ||||
| 		<image v-if="planImage" class="plan-image" :src="planImage"></image> | ||||
| 		<image class="generate_button" @click="generate()" src="/static/homepages/homes/ai_recognize_plan/pictures/generate.png"></image> | ||||
| 		<image class="generate_button" @click="generate()" src="@/static/homepages/homes/ai_recognize_plan/pictures/generate.png"></image> | ||||
| 	</view> | ||||
| 
 | ||||
|   <!--   生成成功的弹窗 --> | ||||
|   <view class="create_fail" v-if="is_create_success===1"> | ||||
|     <text class="ai_create_text">AI生成的结果是</text> | ||||
|     <view class="result_area"> | ||||
|       <text class="result">{{ result }}</text> | ||||
|     </view> | ||||
|     <image class="go_back" @click="go_back" src="@/static/homepages/homes/ai_recognize_recipe/pictures/go_back_button.png"></image> | ||||
|   </view> | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| </template> | ||||
| 
 | ||||
| <script> | ||||
| 	export default { | ||||
| 		data() { | ||||
| 			return { | ||||
| 				planImage: null // 用于存储图片的本地路径 | ||||
| 				planImage: null ,// 用于存储图片的本地路径 | ||||
|         is_create_success : -1,//-1表示显示 正数表示显示 | ||||
|         token: uni.getStorageSync("access_token"), | ||||
|         result:"" | ||||
| 			}; | ||||
| 		}, | ||||
| 		methods: { | ||||
| 			generate() { | ||||
| 				uni.request({ | ||||
| 					url: app.globalData.fit_journey_ai_address+`/ai/plan`, // 请替换为实际的后端接口URL | ||||
| 					method: 'GET', | ||||
| 					success: (res) => { | ||||
| 						if (res.data && res.data.base64) { | ||||
| 							this.saveBase64Image(res.data.base64); | ||||
| 						} | ||||
| 					} | ||||
| 				}); | ||||
| 			}, | ||||
| 			saveBase64Image(base64Data) { | ||||
| 				// 创建文件系统对象 | ||||
| 				plus.io.resolveLocalFileSystemURL(plus.io.convertLocalFileSystemURL('_doc/'), (entry) => { | ||||
| 					// 生成文件名 | ||||
| 					const fileName = `_doc/${new Date().getTime()}.png`; | ||||
| 					// 创建文件 | ||||
| 					entry.getFile(fileName, {create: true}, (fileEntry) => { | ||||
| 						// 将base64转换为Blob对象 | ||||
| 						const arr = base64Data.split(','); | ||||
| 						const mime = arr[0].match(/:(.*?);/)[1]; | ||||
| 						const bstr = atob(arr[1]); | ||||
| 						let n = bstr.length; | ||||
| 						const u8arr = new Uint8Array(n); | ||||
| 						while (n--) { | ||||
| 							u8arr[n] = bstr.charCodeAt(n); | ||||
| 						} | ||||
| 						const blob = new Blob([u8arr], {type: mime}); | ||||
| 						// 写入文件 | ||||
| 						fileEntry.createWriter((fileWriter) => { | ||||
| 							fileWriter.write(blob); | ||||
| 							// 更新图片路径 | ||||
| 							this.planImage = plus.io.convertLocalFileSystemURL(fileName); | ||||
| 						}, (e) => { | ||||
| 							console.log("Write file failed: " + e.message); | ||||
| 						}); | ||||
| 					}, (e) => { | ||||
| 						console.log("Get file failed: " + e.message); | ||||
| 					}); | ||||
| 				}, (e) => { | ||||
| 					console.log("Resolve file system failed: " + e.message); | ||||
| 				}); | ||||
| 			} | ||||
|       go_back_to_home() { | ||||
|         uni.navigateTo({ | ||||
|           url: '/pages/homepages/homes/home/home' | ||||
|         }); | ||||
|       }, | ||||
|       generate() { | ||||
|         uni.showToast({ | ||||
|           title: '正在生成...', | ||||
|           icon: 'loading', | ||||
|           duration: 15000, // Toast 显示时间为 2 秒 | ||||
|         }); | ||||
|         //向后端发送请求生成结果 | ||||
|         const app= getApp(); | ||||
|         uni.request({ | ||||
|           url: app.globalData.fit_journey_ai_address + '/exercise_plan/ai/recipe/generate', | ||||
|           method: 'POST', | ||||
|           header: { | ||||
|             'content-type': 'application/x-www-form-urlencoded', | ||||
|             'Authorization':this.token | ||||
|           }, | ||||
|           data: { | ||||
|           }, | ||||
|           success: (res) => { | ||||
|             if(res.data.code===200){ | ||||
|               console.log("请求成功!请求数据是", res); | ||||
|               this.result = res.data.data; | ||||
|             }else { | ||||
|               uni.showToast({ | ||||
|                 title:"AI生成失败", | ||||
|                 icon: 'none', | ||||
|                 duration: 2000 | ||||
|               }) | ||||
|               this.result = res.data.msg; | ||||
|             } | ||||
| 
 | ||||
|           }, | ||||
|           error: (res) => { | ||||
|             console.log("请求失败!请求数据是", res); | ||||
|           } | ||||
|         }); | ||||
|         //延迟显示结果 | ||||
|         setTimeout(() => { | ||||
|           this.is_create_success = 1; | ||||
|         }, 15000); | ||||
|       }, | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
|       go_back(){ | ||||
|         this.is_create_success = -1; | ||||
| 
 | ||||
|       } | ||||
| 
 | ||||
| 		} | ||||
| 	} | ||||
| </script> | ||||
| 
 | ||||
| <style lang="scss"> | ||||
| 	.background { | ||||
| 		position: absolute; | ||||
| 		width: 100%; | ||||
| 		height: 100%; | ||||
| 		top: 0%; | ||||
| 		left: 0%; | ||||
| 	} | ||||
| 	.back_button { | ||||
| 		position: absolute; | ||||
| 		width: 3%; | ||||
| 		height: 3%; | ||||
| 		top: 4%; | ||||
| 		left: 7%; | ||||
| 	} | ||||
| 	.generate_button { | ||||
| 		position: absolute; | ||||
| 		width: 70%; | ||||
| 		height: 12%; | ||||
| 		top: 85%; | ||||
| 		left: 14%; | ||||
| 	} | ||||
| 	.plan-image { | ||||
| 		position: absolute; | ||||
| 		width: 80%; // 根据实际需要调整宽度 | ||||
| 		height: auto; // 高度自适应 | ||||
| 		top: 50%; // 根据实际需要调整垂直位置 | ||||
| 		left: 50%; // 水平居中 | ||||
| 		transform: translate(-50%, -50%); // 使用transform进行居中 | ||||
| 		z-index: 10; // 确保图片显示在最顶层 | ||||
| 	} | ||||
| .background { | ||||
|   position: absolute; | ||||
|   width: 102%; | ||||
|   height: 102%; | ||||
| 
 | ||||
|   left: -1%; | ||||
| } | ||||
| .back_button { | ||||
|   position: absolute; | ||||
|   width: 3%; | ||||
|   height: 3%; | ||||
|   top: 4%; | ||||
|   left: 7%; | ||||
| } | ||||
| .generate_button { | ||||
|   position: absolute; | ||||
|   width: 90%; | ||||
|   height: 12%; | ||||
|   top: 87%; | ||||
|   left: 5%; | ||||
| } | ||||
| .plan-image { | ||||
|   position: absolute; | ||||
|   width: 80%; // 根据实际需要调整宽度 | ||||
|   height: auto; // 高度自适应 | ||||
|   top: 50%; // 根据实际需要调整垂直位置 | ||||
|   left: 50%; // 水平居中 | ||||
|   transform: translate(-50%, -50%); // 使用transform进行居中 | ||||
|   z-index: 10; // 确保图片显示在最顶层 | ||||
| } | ||||
| 
 | ||||
| .create_fail{ | ||||
|   position: absolute; | ||||
|   height: 80%; | ||||
|   width: 90%; | ||||
|   top: 7%; | ||||
|   left: 5%; | ||||
|   border-radius: 20px; | ||||
|   background-color: #b694d1; | ||||
|   z-index: 1; | ||||
|   .ai_create_text{ | ||||
|     position: absolute; | ||||
|     width: 100%; | ||||
|     height: 10%; | ||||
|     top: 5%; | ||||
|     left: 0; | ||||
|     font-weight: bold; | ||||
|     font-size: 20px; | ||||
|     text-align: center; | ||||
|     color: #ffffff; | ||||
|   } | ||||
|   .go_back{ | ||||
|     position: absolute; | ||||
|     width: 80%; | ||||
|     height: 13%; | ||||
|     top: 88.5%; | ||||
|     left: 10%; | ||||
|   } | ||||
|   .result_area{ | ||||
|     position: absolute; | ||||
|     width: 80%; | ||||
|     height: 75%; | ||||
|     top: 12%; | ||||
|     left: 10%; | ||||
|     border-radius: 20px; | ||||
|     background-color: #cec1e4; | ||||
|     color: #000000; | ||||
|     .result{ | ||||
|       position: relative; | ||||
|       left: 2%; | ||||
|       font-size: 16px; /* 设置文字大小 */ | ||||
|       font-weight: bold; /* 文字加粗 */ | ||||
|       line-height: 1.5; /* 行间距 */ | ||||
|       padding: 10px; /* 添加内边距,使文字不贴边 */ | ||||
|       word-break: break-word; /* 长单词换行 */ | ||||
|     } | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| </style> | ||||
| @ -1,17 +0,0 @@ | ||||
| <template> | ||||
|   <view> | ||||
| 
 | ||||
|   </view> | ||||
| </template> | ||||
| 
 | ||||
| <script> | ||||
| export default { | ||||
|   data() { | ||||
|     return {}; | ||||
|   } | ||||
| } | ||||
| </script> | ||||
| 
 | ||||
| <style lang="scss"> | ||||
| 
 | ||||
| </style> | ||||
| @ -1,17 +0,0 @@ | ||||
| <template> | ||||
|   <view> | ||||
| 
 | ||||
|   </view> | ||||
| </template> | ||||
| 
 | ||||
| <script> | ||||
| export default { | ||||
|   data() { | ||||
|     return {}; | ||||
|   } | ||||
| } | ||||
| </script> | ||||
| 
 | ||||
| <style lang="scss"> | ||||
| 
 | ||||
| </style> | ||||
| @ -0,0 +1,189 @@ | ||||
| <template> | ||||
|   <view class="background"> | ||||
|     <image class="go_back_button" @click="go_back" src="@/static/homepages/homes/knowledge_dictionary/pictures/go_back_button.png" ></image> | ||||
|     <input> </input> | ||||
|     <image class="search_button" @click="search" src="@/static/homepages/homes/knowledge_dictionary/pictures/search_button.png"></image> | ||||
| 
 | ||||
| 
 | ||||
|     <image class="strawberry_image" @click="go_to_strawberry" src="@/static/homepages/homes/knowledge_dictionary/pictures/strawberry.png"></image> | ||||
|     <image class="peach_image" @click="go_to_peach"  src="@/static/homepages/homes/knowledge_dictionary/pictures/peach.png"></image> | ||||
|     <image class="carrot_image" @click="go_to_carrot"   src="@/static/homepages/homes/knowledge_dictionary/pictures/carrot.png"></image> | ||||
|     <image class="pineapple_image"   @click="go_to_pineapple"  src="@/static/homepages/homes/knowledge_dictionary/pictures/pineapple.png"></image> | ||||
|     <image class="orange_image"  @click="go_to_orange"  src="@/static/homepages/homes/knowledge_dictionary/pictures/orange.png"></image> | ||||
|     <image class="banana_image"   @click="go_to_banana"   src="@/static/homepages/homes/knowledge_dictionary/pictures/banana.png"></image> | ||||
| 
 | ||||
|   </view> | ||||
| </template> | ||||
| 
 | ||||
| <script> | ||||
| export default { | ||||
|   data() { | ||||
|     return { | ||||
|       url :""//用传递后端的url | ||||
|     }; | ||||
|   }, | ||||
|   methods:{ | ||||
|     search(){ | ||||
| 
 | ||||
|       //和后端对接进行搜索 后端返回跳转界面的URL | ||||
|       uni.showToast({ | ||||
|         title: '搜索成功!', | ||||
|         icon: 'none', | ||||
|         duration: 2000 | ||||
|       }) | ||||
|        uni.showToast({ | ||||
|          title: '搜索失败,知识库知识有限哦~', | ||||
|          icon: 'none', | ||||
|          duration: 2000 | ||||
|        }) | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
|     }, | ||||
|     go_back(){ | ||||
|       uni.navigateTo({ | ||||
|         url: '/pages/homepages/homes/home/home' | ||||
|       }) | ||||
|       uni.showToast({ | ||||
|         title: '正在返回主页面', | ||||
|         icon: 'none', | ||||
|         duration: 2000 | ||||
|       }) | ||||
|     }, | ||||
|     go_to_strawberry(){ | ||||
|       uni.navigateTo({ | ||||
|         url: '/pages/homepages/homes/dictionary/strawberry/strawberry' | ||||
|       }) | ||||
|       uni.showToast({ | ||||
|         title: '正在前往草莓知识页面', | ||||
|         icon: 'none', | ||||
|         duration: 2000 | ||||
|       }) | ||||
|     }, | ||||
|     go_to_peach(){ | ||||
|       uni.navigateTo({ | ||||
|         url: '/pages/homepages/homes/dictionary/pear/pear' | ||||
|       }) | ||||
|       uni.showToast({ | ||||
|         title: '正在前往桃子知识页面', | ||||
|         icon: 'none', | ||||
|         duration: 2000 | ||||
|       }) | ||||
|     }, | ||||
|     go_to_carrot(){ | ||||
|       uni.navigateTo({ | ||||
|         url: '/pages/homepages/homes/dictionary/carrot/carrot' | ||||
|       }) | ||||
|       uni.showToast({ | ||||
|         title: '正在前往胡萝卜知识页面', | ||||
|         icon: 'none', | ||||
|         duration: 2000 | ||||
|       }) | ||||
|     }, | ||||
|     go_to_pineapple(){ | ||||
|       uni.navigateTo({ | ||||
|         url: '/pages/homepages/homes/dictionary/pineapple/pineapple' | ||||
|       }) | ||||
|       uni.showToast({ | ||||
|         title: '正在前往菠萝知识页面', | ||||
|         icon: 'none', | ||||
|         duration: 2000 | ||||
|       }) | ||||
|     }, | ||||
|     go_to_orange(){ | ||||
|       uni.navigateTo({ | ||||
|         url: '/pages/homepages/homes/dictionary/orange/orange' | ||||
|       }) | ||||
|       uni.showToast({ | ||||
|         title: '正在前往橙子知识页面', | ||||
|         icon: 'none', | ||||
|         duration: 2000 | ||||
|       }) | ||||
|     }, | ||||
|     go_to_banana(){ | ||||
|       uni.navigateTo({ | ||||
|         url: '/pages/homepages/homes/dictionary/banana/banana' | ||||
|       }) | ||||
|       uni.showToast({ | ||||
|         title: '正在前往香蕉知识页面', | ||||
|         icon: 'none', | ||||
|         duration: 2000 | ||||
|       }) | ||||
|     }, | ||||
|   } | ||||
| } | ||||
| </script> | ||||
| 
 | ||||
| <style lang="scss"> | ||||
| .background{ | ||||
|   background-image: url("@/static/homepages/homes/knowledge_dictionary/pictures/background.png"); | ||||
|   background-size: cover; | ||||
|   background-position: center; | ||||
|   height: 101vh; | ||||
|   display: flex; | ||||
|   flex-direction: column; /* 纵向排列 */ | ||||
|   align-items: center; /* 水平居中 */ | ||||
|   justify-content: flex-end; /* 使内容向底部对齐 */ | ||||
|   position: relative; | ||||
| } | ||||
| .go_back_button{ | ||||
|   position: absolute; | ||||
|   height: 8%; | ||||
|   width: 15%; | ||||
|   top: 5%; | ||||
|   left: 5%; | ||||
| } | ||||
| .search_button{ | ||||
|   position: absolute; | ||||
|   height: 5%; | ||||
|   width: 10%; | ||||
|   top: 43.5%; | ||||
|   left: 83%; | ||||
| } | ||||
| 
 | ||||
| .strawberry_image{ | ||||
|   position: absolute; | ||||
|   height: 15%; | ||||
|   width: 30%; | ||||
|   top: 60%; | ||||
|   left: 2%; | ||||
| } | ||||
| 
 | ||||
| .peach_image{ | ||||
|   position: absolute; | ||||
|   height: 15%; | ||||
|   width: 30%; | ||||
|   top: 60%; | ||||
|   left: 34%; | ||||
| } | ||||
| .carrot_image{ | ||||
|   position: absolute; | ||||
|   height: 15%; | ||||
|   width: 30%; | ||||
|   top: 60%; | ||||
|   left: 67%; | ||||
| } | ||||
| .pineapple_image{ | ||||
|   position: absolute; | ||||
|   height: 15%; | ||||
|   width: 30%; | ||||
|   top: 78%; | ||||
|   left: 1%; | ||||
| } | ||||
| 
 | ||||
| .orange_image{ | ||||
|   position: absolute; | ||||
|   height: 15%; | ||||
|   width: 30%; | ||||
|   top: 78%; | ||||
|   left: 34%; | ||||
| } | ||||
| 
 | ||||
| .banana_image{ | ||||
|   position: absolute; | ||||
|   height: 15%; | ||||
|   width: 30%; | ||||
|   top: 78%; | ||||
|   left: 67%; | ||||
| } | ||||
| </style> | ||||
| @ -1,17 +0,0 @@ | ||||
| <template> | ||||
|   <view> | ||||
| 
 | ||||
|   </view> | ||||
| </template> | ||||
| 
 | ||||
| <script> | ||||
| export default { | ||||
|   data() { | ||||
|     return {}; | ||||
|   } | ||||
| } | ||||
| </script> | ||||
| 
 | ||||
| <style lang="scss"> | ||||
| 
 | ||||
| </style> | ||||
| @ -1,17 +1,206 @@ | ||||
| <template> | ||||
|   <view> | ||||
| 
 | ||||
| <view class="background"> | ||||
|     <view class="user_head"> | ||||
|       <image class="head" src="/static/homepages/user/basic_information/head.png"></image> | ||||
| 	  <image class="head_pic" src="/static/homepages/user/basic_information/head_pic.png"></image> | ||||
|       <image class="head_but" @click="change_head()" src="/static/homepages/user/basic_information/but.png"></image> | ||||
|     </view> | ||||
| 	<view class="self_back"> | ||||
| 		<view class="name"> | ||||
| 		  <image class="user_name_but" @click="change_name()" src="/static/homepages/user/basic_information/but.png"></image> | ||||
| 		  <input v-if="n_writeable===true" class="name_text" v-model="name"></input> | ||||
| 		  <view v-else class="w_name">{{name}}</view> | ||||
| 		</view> | ||||
| 		<view class="self"> | ||||
| 		  <image class="self_but" @click="change_self()" src="/static/homepages/user/basic_information/but.png"></image> | ||||
| 		  <textarea v-if="s_writeable===true" v-model="selftext" class="self_write"></textarea> | ||||
| 		  <view v-else class="self_read">{{selftext}}</view> | ||||
| 		</view> | ||||
| 		<image class="button" @click="save_change()" src="/static/homepages/user/basic_information/button.png"></image> | ||||
| 	</view> | ||||
|   </view> | ||||
| </template> | ||||
| 
 | ||||
| <script> | ||||
| export default { | ||||
|   data() { | ||||
|     return {}; | ||||
|     return { | ||||
| 		name:'puppy', | ||||
| 		selftext:'您的个人简介', | ||||
| 		n_writeable:false, | ||||
| 		s_writeable:false, | ||||
| 	}; | ||||
|   }, | ||||
|   methods:{ | ||||
| 	change_self(){ | ||||
| 		console.log('selftext:', this.selftext); | ||||
| 		this.s_writeable=true; | ||||
| 	}, | ||||
| 	change_name(){ | ||||
| 		console.log('name:', this.name); | ||||
| 		this.n_writeable=true; | ||||
| 	}, | ||||
| 
 | ||||
|     navigateTo(page) { | ||||
|       uni.navigateTo({ | ||||
|         url: page | ||||
|       }); | ||||
|     }, | ||||
| 	save_change() | ||||
| 	{ | ||||
| 		console.log('name:', this.name); | ||||
| 		console.log('selftext:', this.selftext); | ||||
| 		const NAME=this.name; | ||||
| 		this.n_writeable=false; | ||||
| 		this.s_writeable=false; | ||||
| 		this.navigateTo(`/pages/homepages/user/user/user?user_name=${NAME}`); | ||||
| 	}, | ||||
|   } | ||||
| } | ||||
| </script> | ||||
| 
 | ||||
| <style lang="scss"> | ||||
| 
 | ||||
| </style> | ||||
| .background{ | ||||
| 	background-image: url("@/static/homepages/user/basic_information/img.png"); | ||||
| 	background-size: cover; | ||||
| 	background-position: center; | ||||
| 	height: 100vh; | ||||
| 	display: flex; | ||||
| 	align-items: center; | ||||
| 	justify-content: center; | ||||
| 	overflow: hidden; | ||||
| 	position: relative; | ||||
| } | ||||
| .self_back{ | ||||
| 	background-image: url("@/static/homepages/user/basic_information/back.png"); | ||||
| 	background-size: cover; | ||||
| 	flex:1; | ||||
| 	height: 80vh; | ||||
| 	width: 57.3vh; | ||||
| 	position: absolute; | ||||
| 	bottom:-7% | ||||
| } | ||||
| .name{ | ||||
| 	background-image: url("/static/homepages/user/basic_information/user_name.png"); | ||||
| 	background-size: cover; | ||||
| 	background-position: center; | ||||
| 	height: 30vh; | ||||
| 	flex:1; | ||||
| 	align-items: center; | ||||
| 	position: absolute; | ||||
| 	height: 10.1vh; | ||||
| 	width: 45vh; | ||||
| 	right: 10.5%; | ||||
| 	bottom: 71%; | ||||
| } | ||||
| .self{ | ||||
| 	background-image: url("/static/homepages/user/basic_information/self_back.png"); | ||||
| 	background-size: cover; | ||||
| 	background-position: center; | ||||
| 	height: 20vh; | ||||
| 	flex:1; | ||||
| 	align-items: center; | ||||
| 	position: absolute; | ||||
| 	width: 45vh; | ||||
| 	right: 10.5%; | ||||
| 	bottom: 23%; | ||||
| } | ||||
| .user_head{ | ||||
| 	background-image: url("/static/homepages/user/basic_information/user_back.png"); | ||||
| 	background-size: cover; | ||||
| 	flex:1; | ||||
| 	height: 30vh; | ||||
| 	width: 57.3vh; | ||||
| 	position: absolute; | ||||
| 	bottom:70% | ||||
| } | ||||
| .head{ | ||||
| 	position: absolute; | ||||
| 	height: 55%; | ||||
| 	width: 30%; | ||||
| 	opacity: 1; | ||||
| 	right: 34%; /* 距右边 10% */ | ||||
| 	bottom: -20%;  | ||||
| 	z-index: 1; | ||||
| } | ||||
| .head_pic{ | ||||
| 	position: absolute; | ||||
| 	height: 50%; | ||||
| 	width: 25%; | ||||
| 	opacity: 1; | ||||
| 	right: 36.7%; /* 距右边 10% */ | ||||
| 	bottom: -10%;  | ||||
| 	z-index: 1; | ||||
| } | ||||
| .head_but{ | ||||
| 	position: absolute; | ||||
| 	height: 14%; | ||||
| 	width: 7%; | ||||
| 	opacity: 1; | ||||
| 	right: 34%; /* 距右边 10% */ | ||||
| 	bottom: -17%;  | ||||
| 	z-index: 1; | ||||
| } | ||||
| .user_name_but{ | ||||
| 	position: absolute; | ||||
| 	height: 47%; | ||||
| 	width: 10%; | ||||
| 	opacity: 1; | ||||
| 	right: 3%; /* 距右边 10% */ | ||||
| 	bottom: 30%;  | ||||
| } | ||||
| .name_text{ | ||||
| 	position: absolute; | ||||
| 	font-size: 1.4em;  | ||||
| 	text-align: center; | ||||
| 	width: 65%; | ||||
| 	height: 40%; | ||||
| 	top: 24%; | ||||
| 	left: 20%; | ||||
| 	color:#000000; | ||||
| } | ||||
| .w_name{ | ||||
| 	position: absolute; | ||||
| 	font-size: 1.4em;  | ||||
| 	text-align: center; | ||||
| 	width: 65%; | ||||
| 	height: 40%; | ||||
| 	top: 26%; | ||||
| 	left: 20%; | ||||
| 	color:#000000; | ||||
| } | ||||
| .self_but{ | ||||
| 	position: absolute; | ||||
| 	height: 13%; | ||||
| 	width: 10%; | ||||
| 	opacity: 1; | ||||
| 	right: 3%; /* 距右边 10% */ | ||||
| 	bottom: 3%;  | ||||
| } | ||||
| .self_write{ | ||||
| 	position: absolute; | ||||
| 	font-size: 1.4em;  | ||||
| 	width: 70%; | ||||
| 	height: 80%; | ||||
| 	top: 4%; | ||||
| 	right: 10%; | ||||
| 	color:#000000; | ||||
| } | ||||
| .self_read{ | ||||
| 	position: absolute; | ||||
| 	font-size: 1.4em;  | ||||
| 	width: 70%; | ||||
| 	height: 80%; | ||||
| 	top: 4%; | ||||
| 	right: 10%; | ||||
| 	color:#000000; | ||||
| } | ||||
| .button{ | ||||
| 	position: absolute; | ||||
| 	height: 10%; | ||||
| 	width: 37%; | ||||
| 	opacity: 1; | ||||
| 	right: 31%; /* 距右边 10% */ | ||||
| 	bottom: 11%;  | ||||
| } | ||||
| </style> | ||||
| @ -1,17 +0,0 @@ | ||||
| <template> | ||||
|   <view> | ||||
| 
 | ||||
|   </view> | ||||
| </template> | ||||
| 
 | ||||
| <script> | ||||
| export default { | ||||
|   data() { | ||||
|     return {}; | ||||
|   } | ||||
| } | ||||
| </script> | ||||
| 
 | ||||
| <style lang="scss"> | ||||
| 
 | ||||
| </style> | ||||
| After Width: | Height: | Size: 8.3 KiB | 
| After Width: | Height: | Size: 1.1 KiB | 
| @ -0,0 +1,169 @@ | ||||
| .add_post_box{ | ||||
| 	height: 100vh; | ||||
| 	width: 100vw; | ||||
| 	position: relative; | ||||
| 	.addpost_top_box{ | ||||
| 		display: flex; | ||||
| 		align-items: center; | ||||
| 		// background-color: #55aaff; | ||||
| 		height: 10vh; | ||||
| 		width: 100%; | ||||
| 		position: absolute; | ||||
| 		top: 5%; | ||||
| 		.return_box{ | ||||
| 			display: flex; | ||||
| 			justify-content: center; | ||||
| 			align-items: center; | ||||
| 			background-color: #E6EEFA; | ||||
| 			height: 5.5vh; | ||||
| 			width: 5.5vh; | ||||
| 			border-radius: 50%; | ||||
| 			position: absolute; | ||||
| 			left: 5vw; | ||||
| 			.return_image{ | ||||
| 				width: 3vh; | ||||
| 			} | ||||
| 		} | ||||
| 		.title_box{ | ||||
| 			font-family: 'Poppins'; | ||||
| 			font-style: normal; | ||||
| 			font-weight: 550; | ||||
| 			font-size: 2.8vh; | ||||
| 			width: fit-content; | ||||
| 			// line-height: 33px; | ||||
| 			/* or 92% */ | ||||
| 			text-align: center; | ||||
| 			letter-spacing: -0.604677px; | ||||
| 			color: #000000; | ||||
| 			position: absolute; | ||||
| 			left: 50%; | ||||
| 			transform: translateX(-50%); | ||||
| 		} | ||||
| 		.publish_btn{ | ||||
| 			position: absolute; | ||||
| 			right: 5vw; | ||||
| 			display: flex; | ||||
| 			justify-content: center; | ||||
| 			align-items: center; | ||||
| 			background: #5790DF; | ||||
| 			box-shadow: 0px 14.8205px 29.641px rgba(87, 144, 223, 0.5); | ||||
| 			border-radius: 20px; | ||||
| 			padding: 1vh 2vh; | ||||
| 			font-family: 'Poppins'; | ||||
| 			font-style: normal; | ||||
| 			font-weight: 500; | ||||
| 			font-size: 1.5vh; | ||||
| 			text-align: center; | ||||
| 			letter-spacing: -0.604677px; | ||||
| 			color: #FFFFFF; | ||||
| 		} | ||||
| 	} | ||||
| 	.addpost_tip_box{ | ||||
| 		position: absolute; | ||||
| 		top: 15vh; | ||||
| 		left: 50%; | ||||
| 		transform: translateX(-50%); | ||||
| 		width: 80%; | ||||
| 		text-align: center; | ||||
| 		font-family: 'Poppins'; | ||||
| 		font-style: normal; | ||||
| 		font-weight: 600; | ||||
| 		font-size: 1.9vh; | ||||
| 		letter-spacing: -0.604677px; | ||||
| 		color: #CCB8B8; | ||||
| 		padding-bottom: 1vh; | ||||
| 		border-bottom: 1px solid #000000; | ||||
| 	} | ||||
| 	.addpost_box{ | ||||
| 		position: absolute; | ||||
| 		left: 50%; | ||||
| 		transform: translateX(-50%); | ||||
| 		top: 25vh; | ||||
| 		width: 90%; | ||||
| 		.post_box{ | ||||
| 			background-color: #B2CBF0; | ||||
| 			border-radius: 30px; | ||||
| 			padding: 5vh 2vh; | ||||
| 			box-sizing: border-box; | ||||
| 			margin-bottom: 5vh; | ||||
| 			width: 100%; | ||||
| 			display: flex; | ||||
| 			flex-direction: column; | ||||
| 			position: relative; | ||||
| 		} | ||||
| 		.post_top_box{ | ||||
| 			display: flex; | ||||
| 			.post_avatar_box{ | ||||
| 				width: 5vh; | ||||
| 				height: 5vh; | ||||
| 				border-radius: 50%; | ||||
| 				background-color: #fff; | ||||
| 				display: flex; | ||||
| 				justify-content: center; | ||||
| 				align-items: center; | ||||
| 				margin-right: 2vh; | ||||
| 				.post_avatar{ | ||||
| 					width: 80%; | ||||
| 				} | ||||
| 			} | ||||
| 			.post_info{ | ||||
| 				font-family: 'Poppins'; | ||||
| 				font-style: normal; | ||||
| 				font-weight: 700; | ||||
| 				font-size: 2vh; | ||||
| 				color: #000000; | ||||
| 				display: flex; | ||||
| 				flex-direction: column; | ||||
| 				justify-content: center; | ||||
| 			} | ||||
| 		} | ||||
| 		.post_word_box{ | ||||
| 			font-family: 'Poppins'; | ||||
| 			font-style: normal; | ||||
| 			font-weight: 700; | ||||
| 			font-size: 2vh; | ||||
| 			color: #000000; | ||||
| 			margin-top: 2.5vh; | ||||
| 			background-color: #E6EEFA; | ||||
| 			border-radius: 8px; | ||||
| 			box-sizing: border-box; | ||||
| 			padding: 1.5vh 1.5vh; | ||||
| 			height: 5.5vh; | ||||
| 			width:100%; | ||||
| 			letter-spacing: 1px; | ||||
| 		} | ||||
| 		.post_images_box{ | ||||
| 			width: 100%; | ||||
| 			height:70%; | ||||
| 			// .post_images{ | ||||
| 			// 	width: 100%; | ||||
| 			// 	height: 100%; | ||||
| 			// } | ||||
| 			.myimgDV { | ||||
| 				width: 100%; | ||||
| 				height: 100%; | ||||
| 			    .flex { | ||||
| 			        display: flex; | ||||
| 			    } | ||||
| 			    .justify { | ||||
| 			        justify-content: space-between; | ||||
| 			    } | ||||
| 			    .receiveimage { | ||||
| 			        margin-top: 28rpx; | ||||
| 			        display: flex; | ||||
| 			        flex-wrap: wrap; | ||||
| 			        width: 100%; | ||||
| 			        .doublepic { | ||||
| 						// height: 100%; | ||||
| 						width: 49%; | ||||
| 			            margin-right: 12rpx; | ||||
| 			            margin-bottom: 12rpx; | ||||
| 			            &:nth-child(2n) { | ||||
| 			                margin-right: 0; | ||||
| 			            } | ||||
| 			        } | ||||
| 			    } | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
| After Width: | Height: | Size: 438 B | 
| After Width: | Height: | Size: 620 B | 
| After Width: | Height: | Size: 44 KiB | 
| After Width: | Height: | Size: 1.9 KiB | 
| After Width: | Height: | Size: 2.2 KiB | 
| @ -0,0 +1,196 @@ | ||||
| .community_box{ | ||||
| 	padding: 5vh 5vw; | ||||
| 	display: flex; | ||||
| 	flex-direction: column; | ||||
| 	position: relative; | ||||
| 	.top_box{ | ||||
| 		display: flex; | ||||
| 		justify-content: space-between; | ||||
| 		align-items: center; | ||||
| 		height: 10vh; | ||||
| 		// border-bottom: 1.48205px solid #000000; | ||||
| 		.dog_image_box{ | ||||
| 			// height: 8vh; | ||||
| 			// width: 8vh; | ||||
| 			height: 110rpx; | ||||
| 			width: 110rpx; | ||||
| 			border-radius: 50%; | ||||
| 			background-color: #D9D9D9; | ||||
| 			display: flex; | ||||
| 			justify-content: center; | ||||
| 			align-items: center; | ||||
| 			.dog_image{ | ||||
| 				width: 85rpx; | ||||
| 			} | ||||
| 		} | ||||
| 		.words_box{ | ||||
| 			height: 100%; | ||||
| 			width: 60%; | ||||
| 			display: flex; | ||||
| 			flex-direction: column; | ||||
| 			justify-content: space-around; | ||||
| 			align-items: center; | ||||
| 			.title_box{ | ||||
| 				width: fit-content; | ||||
| 				font-family: 'Poppins'; | ||||
| 				font-style: normal; | ||||
| 				font-weight: 600; | ||||
| 				font-size: 3vh; | ||||
| 				line-height: 33px; | ||||
| 				text-align: center; | ||||
| 				letter-spacing: -0.604677px; | ||||
| 				color: #000000; | ||||
| 			} | ||||
| 			.tip_word_box{ | ||||
| 				font-family: 'Poppins'; | ||||
| 				font-style: normal; | ||||
| 				font-weight: 600; | ||||
| 				font-size: 2vh; | ||||
| 				line-height: 33px; | ||||
| 				text-align: center; | ||||
| 				letter-spacing: -0.604677px; | ||||
| 				color: #CCB8B8; | ||||
| 			} | ||||
| 		} | ||||
| 		.add_image_box{ | ||||
| 			// height: 8vh; | ||||
| 			// width: 8vh; | ||||
| 			height: 110rpx; | ||||
| 			width: 110rpx; | ||||
| 			border-radius: 50%; | ||||
| 			background-color: #D9D9D9; | ||||
| 			display: flex; | ||||
| 			justify-content: center; | ||||
| 			align-items: center; | ||||
| 			.add_image{ | ||||
| 				width: 50rpx; | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| 	// 分割线 | ||||
| 	.line_box{ | ||||
| 		width: 70%; | ||||
| 		border-bottom: 1.48205px solid #000000; | ||||
| 		position: absolute; | ||||
| 		top: 17vh; | ||||
| 		left: 50%; | ||||
| 		transform: translateX(-50%); | ||||
| 	} | ||||
| 	.post_body{ | ||||
| 		position: absolute; | ||||
| 		left: 50%; | ||||
| 		transform: translateX(-50%); | ||||
| 		top: 20vh; | ||||
| 		width: 90%; | ||||
| 		.post_scroll_box{ | ||||
| 			height: 69vh; | ||||
| 		} | ||||
| 		.post_box{ | ||||
| 			background-color: #E6EEFA; | ||||
| 			border-radius: 30px; | ||||
| 			padding: 2vh 2vh; | ||||
| 			box-sizing: border-box; | ||||
| 			margin-bottom: 5vh; | ||||
| 			width: 100%; | ||||
| 			// height: 55vh; | ||||
| 			display: flex; | ||||
| 			flex-direction: column; | ||||
| 			// height:900rpx; | ||||
| 			position: relative; | ||||
| 			.post_top_box{ | ||||
| 				display: flex; | ||||
| 				.post_avatar_box{ | ||||
| 					width: 5vh; | ||||
| 					height: 5vh; | ||||
| 					border-radius: 50%; | ||||
| 					background-color: #fff; | ||||
| 					display: flex; | ||||
| 					justify-content: center; | ||||
| 					align-items: center; | ||||
| 					margin-right: 2vh; | ||||
| 					.post_avatar{ | ||||
| 						width: 80%; | ||||
| 					} | ||||
| 				} | ||||
| 				.post_info{ | ||||
| 					font-family: 'Poppins'; | ||||
| 					font-style: normal; | ||||
| 					font-weight: 700; | ||||
| 					font-size: 2vh; | ||||
| 					color: #000000; | ||||
| 					display: flex; | ||||
| 					flex-direction: column; | ||||
| 					justify-content: center; | ||||
| 				} | ||||
| 			} | ||||
| 			.post_word_box{ | ||||
| 				font-family: 'Poppins'; | ||||
| 				font-style: normal; | ||||
| 				font-weight: 700; | ||||
| 				font-size: 2vh; | ||||
| 				color: #000000; | ||||
| 				margin-top: 2.5vh; | ||||
| 			} | ||||
| 			.post_images_box{ | ||||
| 				width: 100%; | ||||
| 				height:70%; | ||||
| 				.post_images{ | ||||
| 					width: 100%; | ||||
| 					height: 100%; | ||||
| 				} | ||||
| 			} | ||||
| 			.post_bottom_box{ | ||||
| 				position: absolute; | ||||
| 				bottom: 0%; | ||||
| 				width: 100%; | ||||
| 				height: 10%; | ||||
| 				padding: 0% 6%; | ||||
| 				box-sizing: border-box; | ||||
| 				display: flex; | ||||
| 				background: rgba(0, 0, 0, 0.3); | ||||
| 				backdrop-filter: blur(2px); | ||||
| 				/* Note: backdrop-filter has minimal browser support */ | ||||
| 				border-radius: 0px 0px 30px 30px; | ||||
| 				left: 50%; | ||||
| 				transform: translateX(-50%); | ||||
| 				.comments_box{ | ||||
| 					display: flex; | ||||
| 					align-items: center; | ||||
| 					height: 100%; | ||||
| 					// width: 10%; | ||||
| 					.chat_icon{ | ||||
| 						width: 3.2vh; | ||||
| 					} | ||||
| 					.comments_num{ | ||||
| 						font-family: 'Poppins'; | ||||
| 						font-style: normal; | ||||
| 						font-weight: 600; | ||||
| 						font-size: 2vh; | ||||
| 						text-align: center; | ||||
| 						letter-spacing: -0.604677px; | ||||
| 						color: rgba(255, 255, 255, 0.8); | ||||
| 					} | ||||
| 				} | ||||
| 				.like_box{ | ||||
| 					display: flex; | ||||
| 					align-items: center; | ||||
| 					height: 100%; | ||||
| 					margin-left: 4%; | ||||
| 					// width: 10%; | ||||
| 					.love_icon{ | ||||
| 						width: 3.2vh; | ||||
| 					} | ||||
| 					.like_num{ | ||||
| 						font-family: 'Poppins'; | ||||
| 						font-style: normal; | ||||
| 						font-weight: 600; | ||||
| 						font-size: 2vh; | ||||
| 						text-align: center; | ||||
| 						letter-spacing: -0.604677px; | ||||
| 						color: rgba(255, 255, 255, 0.8); | ||||
| 					} | ||||
| 				} | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
| After Width: | Height: | Size: 1.1 KiB | 
| After Width: | Height: | Size: 761 KiB | 
| @ -0,0 +1,308 @@ | ||||
| .person_center_box{ | ||||
| 	height: 100vh; | ||||
| 	width: 100vw; | ||||
| 	position: relative; | ||||
| 	.person_center_top{ | ||||
| 		height: 25vh; | ||||
| 		background-image: url("@/static/homepages/community/personal_center/pictures/top_background.png"); | ||||
| 		background-size: cover; | ||||
| 		background-position: center; | ||||
| 		.return_box{ | ||||
| 			display: flex; | ||||
| 			justify-content: center; | ||||
| 			align-items: center; | ||||
| 			background-color: #E6EEFA; | ||||
| 			height: 5.5vh; | ||||
| 			width: 5.5vh; | ||||
| 			border-radius: 50%; | ||||
| 			position: absolute; | ||||
| 			left: 5vw; | ||||
| 			top: 2vh; | ||||
| 			.return_image{ | ||||
| 				width: 3vh; | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| 	.person_center_body{ | ||||
| 		box-sizing: border-box; | ||||
| 		position: absolute; | ||||
| 		width: 100vw; | ||||
| 		height: 82vh; | ||||
| 		top: 18vh; | ||||
| 		background: #E6EEFA; | ||||
| 		border-radius: 50px 50px 0px 0px; | ||||
| 		.info_box{ | ||||
| 			width: 100vw; | ||||
| 			height: 20vh; | ||||
| 			position: relative; | ||||
| 			// background-color: #fff; | ||||
| 			.height_box{ | ||||
| 				width: fit-content; | ||||
| 				position: absolute; | ||||
| 				top: 20%; | ||||
| 				left: 19vw; | ||||
| 				.height_data{ | ||||
| 					font-family: 'Poppins'; | ||||
| 					font-style: normal; | ||||
| 					font-weight: 700; | ||||
| 					font-size: 2vh; | ||||
| 					text-align: center; | ||||
| 					letter-spacing: -0.604677px; | ||||
| 					color: #000000; | ||||
| 					margin-bottom: 0.5vh; | ||||
| 				} | ||||
| 				.height_words{ | ||||
| 					font-family: 'Poppins'; | ||||
| 					font-style: normal; | ||||
| 					font-weight: 400; | ||||
| 					font-size: 1.8vh; | ||||
| 					text-align: center; | ||||
| 					letter-spacing: -0.604677px; | ||||
| 					color: #000000; | ||||
| 				} | ||||
| 			} | ||||
| 			.weight_box{ | ||||
| 				width: fit-content; | ||||
| 				position: absolute; | ||||
| 				top: 20%; | ||||
| 				right: 19vw; | ||||
| 				.weight_data{ | ||||
| 					font-family: 'Poppins'; | ||||
| 					font-style: normal; | ||||
| 					font-weight: 700; | ||||
| 					font-size: 2vh; | ||||
| 					text-align: center; | ||||
| 					letter-spacing: -0.604677px; | ||||
| 					color: #000000; | ||||
| 					margin-bottom: 0.5vh; | ||||
| 				} | ||||
| 				.weight_words{ | ||||
| 					font-family: 'Poppins'; | ||||
| 					font-style: normal; | ||||
| 					font-weight: 400; | ||||
| 					font-size: 1.8vh; | ||||
| 					text-align: center; | ||||
| 					letter-spacing: -0.604677px; | ||||
| 					color: #000000; | ||||
| 				} | ||||
| 			} | ||||
| 			.avatar_box{ | ||||
| 				background-color: #fff; | ||||
| 				width: 12vh; | ||||
| 				height: 12vh; | ||||
| 				border-radius: 50%; | ||||
| 				position: absolute; | ||||
| 				left: 50%; | ||||
| 				top: 0%; | ||||
| 				transform: translate(-50%, -50%); | ||||
| 			} | ||||
| 			.name_box{ | ||||
| 				position: absolute; | ||||
| 				left: 50%; | ||||
| 				top: 52%; | ||||
| 				transform: translateX(-50%); | ||||
| 				font-family: 'Poppins'; | ||||
| 				font-style: normal; | ||||
| 				font-weight: 700; | ||||
| 				font-size: 2.1vh; | ||||
| 				text-align: center; | ||||
| 				letter-spacing: -0.604677px; | ||||
| 				color: #000000; | ||||
| 			} | ||||
| 			.tip_box{ | ||||
| 				position: absolute; | ||||
| 				left: 50%; | ||||
| 				top: 70%; | ||||
| 				width: 100vw; | ||||
| 				transform: translateX(-50%); | ||||
| 				font-family: 'Poppins'; | ||||
| 				font-style: normal; | ||||
| 				font-weight: 400; | ||||
| 				font-size: 1.8vh; | ||||
| 				text-align: center; | ||||
| 				letter-spacing: -0.604677px; | ||||
| 				color: #6C7A9C; | ||||
| 			} | ||||
| 		} | ||||
| 		.btns_box{ | ||||
| 			display: flex; | ||||
| 			height: 5vh; | ||||
| 			.changeInfoBtn{ | ||||
| 				display: flex; | ||||
| 				flex-direction: row; | ||||
| 				justify-content: center; | ||||
| 				align-items: center; | ||||
| 				width: 35vw; | ||||
| 				font-size: 1.6vh; | ||||
| 				background: #fff; | ||||
| 				box-shadow: 0px 14.8205px 29.641px rgba(0, 0, 0, 0.25); | ||||
| 				border-radius: 29.641px; | ||||
| 			} | ||||
| 			.addPostBtn{ | ||||
| 				display: flex; | ||||
| 				flex-direction: row; | ||||
| 				justify-content: center; | ||||
| 				align-items: center; | ||||
| 				width: 35vw; | ||||
| 				font-size: 1.6vh; | ||||
| 				background: #fff; | ||||
| 				box-shadow: 0px 14.8205px 29.641px rgba(0, 0, 0, 0.25); | ||||
| 				border-radius: 29.641px; | ||||
| 			} | ||||
| 		} | ||||
| 		.posts_box{ | ||||
| 			margin-top: 4vh; | ||||
| 			height: 52vh; | ||||
| 			width: 100vw; | ||||
| 			position: relative; | ||||
| 			.post_nav_box{ | ||||
| 				width: 100%; | ||||
| 				display: flex; | ||||
| 				justify-content: center; | ||||
| 				.post_nav{ | ||||
| 					display: flex; | ||||
| 					flex-direction: column; | ||||
| 					justify-content: flex-end; | ||||
| 					align-items: center; | ||||
| 					width: 20vw; | ||||
| 					height: 3vh; | ||||
| 					margin: 0vh 2vw; | ||||
| 					position: relative; | ||||
| 					.toMypost{ | ||||
| 						position: absolute; | ||||
| 						top: 0%; | ||||
| 					} | ||||
| 					.toLikepost{ | ||||
| 						position: absolute; | ||||
| 						top: 0%; | ||||
| 					} | ||||
| 					.bottom_line{ | ||||
| 						margin-top: 6px; | ||||
| 						height: 1px; | ||||
| 						width: 5vw; | ||||
| 						border-bottom:2px solid #000000 ; | ||||
| 						background: #6C7A9C; | ||||
| 						border-radius: 2.9641px; | ||||
| 					} | ||||
| 				} | ||||
| 			} | ||||
| 			.posts{ | ||||
| 				background-color: #fff; | ||||
| 				border-radius: 50px 50px 0px 0px; | ||||
| 				box-sizing: border-box; | ||||
| 				margin-top: 2vh; | ||||
| 				display: flex; | ||||
| 				flex-direction: column; | ||||
| 				height: 49vh; | ||||
| 				padding: 0vw 3vw 0vw 3vw; | ||||
| 				position: relative; | ||||
| 				.post_box{ | ||||
| 					background-color: #E6EEFA; | ||||
| 					border-radius: 30px; | ||||
| 					padding: 2vh 2vh; | ||||
| 					box-sizing: border-box; | ||||
| 					margin-bottom: 5vh; | ||||
| 					width: 100%; | ||||
| 					display: flex; | ||||
| 					flex-direction: column; | ||||
| 					position: relative; | ||||
| 					margin-top: 3vh; | ||||
| 					.post_top_box{ | ||||
| 						display: flex; | ||||
| 						.post_avatar_box{ | ||||
| 							width: 5vh; | ||||
| 							height: 5vh; | ||||
| 							border-radius: 50%; | ||||
| 							background-color: #fff; | ||||
| 							display: flex; | ||||
| 							justify-content: center; | ||||
| 							align-items: center; | ||||
| 							margin-right: 2vh; | ||||
| 							.post_avatar{ | ||||
| 								width: 80%; | ||||
| 							} | ||||
| 						} | ||||
| 						.post_info{ | ||||
| 							font-family: 'Poppins'; | ||||
| 							font-style: normal; | ||||
| 							font-weight: 700; | ||||
| 							font-size: 2vh; | ||||
| 							color: #000000; | ||||
| 							display: flex; | ||||
| 							flex-direction: column; | ||||
| 							justify-content: center; | ||||
| 						} | ||||
| 					} | ||||
| 					.post_word_box{ | ||||
| 						font-family: 'Poppins'; | ||||
| 						font-style: normal; | ||||
| 						font-weight: 700; | ||||
| 						font-size: 2vh; | ||||
| 						color: #000000; | ||||
| 						margin-top: 2.5vh; | ||||
| 					} | ||||
| 					.post_images_box{ | ||||
| 						width: 100%; | ||||
| 						height:70%; | ||||
| 						.post_images{ | ||||
| 							width: 100%; | ||||
| 							height: 100%; | ||||
| 						} | ||||
| 					} | ||||
| 					.post_bottom_box{ | ||||
| 						position: absolute; | ||||
| 						bottom: 0%; | ||||
| 						width: 100%; | ||||
| 						height: 10%; | ||||
| 						padding: 0% 6%; | ||||
| 						box-sizing: border-box; | ||||
| 						display: flex; | ||||
| 						background: rgba(0, 0, 0, 0.3); | ||||
| 						backdrop-filter: blur(2px); | ||||
| 						/* Note: backdrop-filter has minimal browser support */ | ||||
| 						border-radius: 0px 0px 30px 30px; | ||||
| 						left: 50%; | ||||
| 						transform: translateX(-50%); | ||||
| 						.comments_box{ | ||||
| 							display: flex; | ||||
| 							align-items: center; | ||||
| 							height: 100%; | ||||
| 							// width: 10%; | ||||
| 							.chat_icon{ | ||||
| 								width: 3.2vh; | ||||
| 							} | ||||
| 							.comments_num{ | ||||
| 								font-family: 'Poppins'; | ||||
| 								font-style: normal; | ||||
| 								font-weight: 600; | ||||
| 								font-size: 2vh; | ||||
| 								text-align: center; | ||||
| 								letter-spacing: -0.604677px; | ||||
| 								color: rgba(255, 255, 255, 0.8); | ||||
| 							} | ||||
| 						} | ||||
| 						.like_box{ | ||||
| 							display: flex; | ||||
| 							align-items: center; | ||||
| 							height: 100%; | ||||
| 							margin-left: 4%; | ||||
| 							// width: 10%; | ||||
| 							.love_icon{ | ||||
| 								width: 3.2vh; | ||||
| 							} | ||||
| 							.like_num{ | ||||
| 								font-family: 'Poppins'; | ||||
| 								font-style: normal; | ||||
| 								font-weight: 600; | ||||
| 								font-size: 2vh; | ||||
| 								text-align: center; | ||||
| 								letter-spacing: -0.604677px; | ||||
| 								color: rgba(255, 255, 255, 0.8); | ||||
| 							} | ||||
| 						} | ||||
| 					} | ||||
| 				} | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
| After Width: | Height: | Size: 139 KiB | 
| After Width: | Height: | Size: 158 KiB | 
| After Width: | Height: | Size: 191 KiB | 
| After Width: | Height: | Size: 112 KiB | 
| After Width: | Height: | Size: 181 KiB | 
| After Width: | Height: | Size: 93 KiB | 
| After Width: | Height: | Size: 150 KiB | 
| After Width: | Height: | Size: 354 KiB | 
| After Width: | Height: | Size: 100 KiB | 
| After Width: | Height: | Size: 54 KiB | 
| After Width: | Height: | Size: 1.1 KiB | 
| After Width: | Height: | Size: 67 KiB | 
| After Width: | Height: | Size: 104 KiB | 
| After Width: | Height: | Size: 66 KiB | 
| After Width: | Height: | Size: 3.8 KiB | 
| After Width: | Height: | Size: 113 KiB | 
| @ -0,0 +1,133 @@ | ||||
| export const foodCaloriesDB = { | ||||
|   // 主食类
 | ||||
|   '米饭': 116, | ||||
|   '馒头': 223, | ||||
|   '面条': 110, | ||||
|   '包子': 200, | ||||
|   '饺子': 220, | ||||
|   '油条': 389, | ||||
|   '面包': 265, | ||||
|   '粥': 50, | ||||
|   '炒面': 260, | ||||
|   '炒饭': 290, | ||||
| 
 | ||||
|   // 肉类
 | ||||
|   '猪肉': 143, | ||||
|   '牛肉': 106, | ||||
|   '鸡肉': 167, | ||||
|   '鸭肉': 240, | ||||
|   '羊肉': 203, | ||||
|   '鱼肉': 100, | ||||
|   '虾': 85, | ||||
|   '蛋': 155, | ||||
| 
 | ||||
|   // 蔬菜类
 | ||||
|   '西红柿': 20, | ||||
|   '黄瓜': 16, | ||||
|   '胡萝卜': 36, | ||||
|   '白菜': 20, | ||||
|   '菠菜': 23, | ||||
|   '生菜': 15, | ||||
|   '茄子': 24, | ||||
|   '土豆': 81, | ||||
|   '青椒': 20, | ||||
| 
 | ||||
|   // 水果类
 | ||||
|   '苹果': 52, | ||||
|   '香蕉': 89, | ||||
|   '橙子': 47, | ||||
|   '葡萄': 69, | ||||
|   '西瓜': 32, | ||||
|   '梨': 51, | ||||
|   '草莓': 32, | ||||
|   '柚子': 39, | ||||
| 
 | ||||
|   // 饮品类
 | ||||
|   '牛奶': 79, | ||||
|   '豆浆': 31, | ||||
|   '可乐': 42, | ||||
|   '果汁': 54, | ||||
|   '咖啡': 1, | ||||
|   '奶茶': 150, | ||||
| 
 | ||||
|   // 常见菜品
 | ||||
|   '西红柿炒鸡蛋': 100, | ||||
|   '宫保鸡丁': 260, | ||||
|   '鱼香肉丝': 195, | ||||
|   '红烧肉': 425, | ||||
|   '糖醋里脊': 290, | ||||
|   '麻婆豆腐': 174, | ||||
|   '青椒炒肉': 180, | ||||
|   '回锅肉': 327, | ||||
|   '蒜蓉炒菜心': 45, | ||||
|   '炒青菜': 30, | ||||
|   '土豆炖牛肉': 215, | ||||
|   '红烧排骨': 289, | ||||
|   '清炒白菜': 35, | ||||
|   '炸鸡': 260, | ||||
|   '水煮鱼': 180, | ||||
|   '酸菜鱼': 168, | ||||
|    | ||||
|   // 零食类
 | ||||
|   '薯片': 536, | ||||
|   '巧克力': 546, | ||||
|   '饼干': 435, | ||||
|   '爆米花': 382, | ||||
|   '坚果': 607, | ||||
|   '冰淇淋': 267, | ||||
|   '蛋糕': 257, | ||||
| 
 | ||||
|   // 快餐类
 | ||||
|   '汉堡': 295, | ||||
|   '披萨': 266, | ||||
|   '炸薯条': 312, | ||||
|   '炸鸡翅': 246, | ||||
|   '热狗': 290 | ||||
| } | ||||
| 
 | ||||
| // 模糊搜索函数
 | ||||
| export const searchFood = (keyword) => { | ||||
|   keyword = keyword.toLowerCase() | ||||
|   const results = [] | ||||
|    | ||||
|   for (const [food, calories] of Object.entries(foodCaloriesDB)) { | ||||
|     if (food.toLowerCase().includes(keyword)) { | ||||
|       results.push({ | ||||
|         name: food, | ||||
|         calories: calories | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
|    | ||||
|   return results | ||||
| } | ||||
| 
 | ||||
| // 获取单个食物的卡路里
 | ||||
| export const getFoodCalories = (foodName) => { | ||||
|   // 直接匹配
 | ||||
|   if (foodCaloriesDB[foodName]) { | ||||
|     return foodCaloriesDB[foodName] | ||||
|   } | ||||
|    | ||||
|   // 模糊匹配
 | ||||
|   const results = searchFood(foodName) | ||||
|   if (results.length > 0) { | ||||
|     return results[0].calories | ||||
|   } | ||||
|    | ||||
|   return null | ||||
| } | ||||
| 
 | ||||
| // 获取食物分类列表
 | ||||
| export const getFoodCategories = () => { | ||||
|   return { | ||||
|     '主食类': ['米饭', '馒头', '面条', '包子', '饺子', '油条', '面包', '粥'], | ||||
|     '肉类': ['猪肉', '牛肉', '鸡肉', '鸭肉', '羊肉', '鱼肉', '虾', '蛋'], | ||||
|     '蔬菜类': ['西红柿', '黄瓜', '胡萝卜', '白菜', '菠菜', '生菜', '茄子', '土豆', '青椒'], | ||||
|     '水果类': ['苹果', '香蕉', '橙子', '葡萄', '西瓜', '梨', '草莓', '柚子'], | ||||
|     '饮品类': ['牛奶', '豆浆', '可乐', '果汁', '咖啡', '奶茶'], | ||||
|     '常见菜品': ['西红柿炒鸡蛋', '宫保鸡丁', '鱼香肉丝', '红烧肉', '糖醋里脊', '麻婆豆腐'], | ||||
|     '零食类': ['薯片', '巧克力', '饼干', '爆米花', '坚果', '冰淇淋', '蛋糕'], | ||||
|     '快餐类': ['汉堡', '披萨', '炸薯条', '炸鸡翅', '热狗'] | ||||
|   } | ||||
| } | ||||
| @ -0,0 +1 @@ | ||||
| . | ||||
| After Width: | Height: | Size: 1.1 KiB | 
| After Width: | Height: | Size: 128 KiB | 
| @ -0,0 +1,111 @@ | ||||
| .background { | ||||
|   position: fixed; | ||||
|   width: 100%; | ||||
|   height: 75%; | ||||
|   top: 4%; | ||||
|   z-index: -3; | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| #chat_scroll{ | ||||
| 	position: absolute; | ||||
| 	width: 100%; | ||||
| 	top: 12%; | ||||
| 	height: 65vh; | ||||
| 	padding: 10px; | ||||
| } | ||||
| 
 | ||||
| .chat { | ||||
|   position: absolute; | ||||
|   width: 100%; | ||||
|   // top: 12%; | ||||
|   height: 100%; | ||||
|   // z-index: -1; | ||||
|   // padding: 10px; | ||||
|   // overflow-y: auto; | ||||
|   // -webkit-overflow-scrolling: touch; | ||||
|   display: flex; | ||||
|   flex-direction: column;  /* 消息从上往下显示 */ | ||||
| 
 | ||||
| } | ||||
| .chat_area { | ||||
|   margin-bottom: 10px; | ||||
|   padding: 10px; | ||||
|   max-width: 75%; | ||||
|   word-wrap: break-word; | ||||
|   display: flex; | ||||
|   flex-direction: row;  /* 头像和消息水平排列 */ | ||||
|   align-items: center;  /* 内容垂直居中 */ | ||||
| } | ||||
| .user_message { | ||||
|   /*background-color: #7879F1; */ | ||||
|   color: white; | ||||
|   margin-top: 2%;  /* 让用户的消息气泡靠右 */ | ||||
|   margin-right: 5%;  /* AI消息靠左 */ | ||||
|   margin-left: auto;  /* 让AI的消息气泡靠右 */ | ||||
|   text-align: left; | ||||
|   word-break: break-word;  /* 自动换行 */ | ||||
| } | ||||
| .ai_message { | ||||
|   /*background-color: #e5e5ea;*/ | ||||
|   color: black; | ||||
|   margin-left: 2%;  /* 用户消息靠右 */ | ||||
|   margin-right: auto;  /* 让用户的消息气泡靠左 */ | ||||
|   text-align: left; | ||||
|   word-break: break-word;  /* 自动换行 */ | ||||
| } | ||||
| .avatar_container { | ||||
|   right: 10%; | ||||
|   height: 100%; | ||||
|   padding-top: 30rpx; | ||||
| } | ||||
| .ai_avatar_container { | ||||
|   margin-right: 10px;  /* AI头像与气泡的间距 */ | ||||
| } | ||||
| .user_avatar_container { | ||||
|   margin-left: 10px;  /* 用户头像与气泡的间距 */ | ||||
| } | ||||
| .ai_avatar, .user_avatar { | ||||
|   right: 5%; | ||||
|   width: 40px;  /* 头像的大小 */ | ||||
|   height: 40px;  /* 头像的大小 */ | ||||
|   border-radius: 50%;  /* 头像圆形 */ | ||||
| } | ||||
| .message_content { | ||||
|   max-width: 80%;  /* 限制消息气泡的最大宽度 */ | ||||
| } | ||||
| .user_message_content{ | ||||
| 	background-color: #7879F1; | ||||
| 	border-radius: 15px; | ||||
| } | ||||
| .ai_message_content{ | ||||
| 	background-color: #e5e5ea; | ||||
| 	border-radius: 15px; | ||||
| } | ||||
| .input_box { | ||||
|   position: fixed; | ||||
|   width: 100%; | ||||
|   height: 9%; | ||||
|   top: 79%; | ||||
| } | ||||
| .input_box_background { | ||||
|   position: absolute; | ||||
|   width: 98%; | ||||
|   height: 90%; | ||||
|   left: 1%; | ||||
|   top: 5%; | ||||
| } | ||||
| .input_words { | ||||
|   position: absolute; | ||||
|   width: 70%; | ||||
|   height: 80%; | ||||
|   left: 5%; | ||||
|   top: 10%; | ||||
| } | ||||
| .send_button { | ||||
|   position: absolute; | ||||
|   width: 12%; | ||||
|   height: 70%; | ||||
|   left: 84%; | ||||
|   top: 15%; | ||||
| } | ||||
| After Width: | Height: | Size: 64 KiB | 
| After Width: | Height: | Size: 2.1 MiB | 
| After Width: | Height: | Size: 6.5 KiB | 
| After Width: | Height: | Size: 3.2 KiB | 
| After Width: | Height: | Size: 16 KiB | 
| After Width: | Height: | Size: 153 KiB | 
| After Width: | Height: | Size: 11 KiB | 
| After Width: | Height: | Size: 171 KiB | 
| After Width: | Height: | Size: 46 KiB | 
| After Width: | Height: | Size: 159 KiB |