Compare commits
	
		
			No commits in common. 'master' and 'master' have entirely different histories. 
		
	
	
		
	| @ -1,141 +0,0 @@ | |||||||
| <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,190 +1,17 @@ | |||||||
| <template> | <template> | ||||||
|   <view class="community_box"> |   <view> | ||||||
| 	  <!-- 头部信息 --> | 
 | ||||||
| 	  <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> |   </view> | ||||||
|   <!-- 底部导航栏 --> |  | ||||||
|   <tarbar_community class="tarbar_box"></tarbar_community> |  | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script> | <script> | ||||||
| import Community from "@/components/swiper/community.vue"; |  | ||||||
| import community_image_box from "../../../../components/community_image_box/community_image_box.vue"; |  | ||||||
| export default { | export default { | ||||||
|   components: {Community, community_image_box}, |  | ||||||
|   data() { |   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> | </script> | ||||||
| 
 | 
 | ||||||
| <style lang="scss"> | <style lang="scss"> | ||||||
| 	@import "@/static/homepages/community/community/scss/community.scss"; | 
 | ||||||
| </style> | </style> | ||||||
|  | |||||||
| @ -1,229 +1,17 @@ | |||||||
| <template> | <template> | ||||||
|   <view class="person_center_box"> |   <view> | ||||||
| 	<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> |   </view> | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script> | <script> | ||||||
| import community_image_box from "../../../../components/community_image_box/community_image_box.vue"; |  | ||||||
| export default { | export default { | ||||||
| 	components: {community_image_box}, |   data() { | ||||||
| 	data() { |     return {}; | ||||||
| 		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> | </script> | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss"> | ||||||
| @import "../../../../static/homepages/community/personal_center/scss/personal_center.scss" | 
 | ||||||
| </style> | </style> | ||||||
|  | |||||||
| @ -1,198 +1,96 @@ | |||||||
| <template> | <template> | ||||||
| 	<view> | 	<view> | ||||||
| 		<image class="background" src="@/static/homepages/homes/ai_recognize_plan/pictures/background.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 class="back_button" src="/static/homepages/homes/ai_recognize_plan/pictures/button.png"></image> | ||||||
| 		<image v-if="planImage" class="plan-image" :src="planImage"></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> | ||||||
| 
 |  | ||||||
|   <!--   生成成功的弹窗 --> |  | ||||||
|   <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> | </template> | ||||||
| 
 | 
 | ||||||
| <script> | <script> | ||||||
| 	export default { | 	export default { | ||||||
| 		data() { | 		data() { | ||||||
| 			return { | 			return { | ||||||
| 				planImage: null ,// 用于存储图片的本地路径 | 				planImage: null // 用于存储图片的本地路径 | ||||||
|         is_create_success : -1,//-1表示显示 正数表示显示 |  | ||||||
|         token: uni.getStorageSync("access_token"), |  | ||||||
|         result:"" |  | ||||||
| 			}; | 			}; | ||||||
| 		}, | 		}, | ||||||
| 		methods: { | 		methods: { | ||||||
|       go_back_to_home() { | 			generate() { | ||||||
|         uni.navigateTo({ | 				uni.request({ | ||||||
|           url: '/pages/homepages/homes/home/home' | 					url: app.globalData.fit_journey_ai_address+`/ai/plan`, // 请替换为实际的后端接口URL | ||||||
|         }); | 					method: 'GET', | ||||||
|       }, | 					success: (res) => { | ||||||
|       generate() { | 						if (res.data && res.data.base64) { | ||||||
|         uni.showToast({ | 							this.saveBase64Image(res.data.base64); | ||||||
|           title: '正在生成...', | 						} | ||||||
|           icon: 'loading', | 					} | ||||||
|           duration: 15000, // Toast 显示时间为 2 秒 | 				}); | ||||||
|         }); | 			}, | ||||||
|         //向后端发送请求生成结果 | 			saveBase64Image(base64Data) { | ||||||
|         const app= getApp(); | 				// 创建文件系统对象 | ||||||
|         uni.request({ | 				plus.io.resolveLocalFileSystemURL(plus.io.convertLocalFileSystemURL('_doc/'), (entry) => { | ||||||
|           url: app.globalData.fit_journey_ai_address + '/exercise_plan/ai/recipe/generate', | 					// 生成文件名 | ||||||
|           method: 'POST', | 					const fileName = `_doc/${new Date().getTime()}.png`; | ||||||
|           header: { | 					// 创建文件 | ||||||
|             'content-type': 'application/x-www-form-urlencoded', | 					entry.getFile(fileName, {create: true}, (fileEntry) => { | ||||||
|             'Authorization':this.token | 						// 将base64转换为Blob对象 | ||||||
|           }, | 						const arr = base64Data.split(','); | ||||||
|           data: { | 						const mime = arr[0].match(/:(.*?);/)[1]; | ||||||
|           }, | 						const bstr = atob(arr[1]); | ||||||
|           success: (res) => { | 						let n = bstr.length; | ||||||
|             if(res.data.code===200){ | 						const u8arr = new Uint8Array(n); | ||||||
|               console.log("请求成功!请求数据是", res); | 						while (n--) { | ||||||
|               this.result = res.data.data; | 							u8arr[n] = bstr.charCodeAt(n); | ||||||
|             }else { | 						} | ||||||
|               uni.showToast({ | 						const blob = new Blob([u8arr], {type: mime}); | ||||||
|                 title:"AI生成失败", | 						// 写入文件 | ||||||
|                 icon: 'none', | 						fileEntry.createWriter((fileWriter) => { | ||||||
|                 duration: 2000 | 							fileWriter.write(blob); | ||||||
|               }) | 							// 更新图片路径 | ||||||
|               this.result = res.data.msg; | 							this.planImage = plus.io.convertLocalFileSystemURL(fileName); | ||||||
|             } | 						}, (e) => { | ||||||
| 
 | 							console.log("Write file failed: " + e.message); | ||||||
|           }, | 						}); | ||||||
|           error: (res) => { | 					}, (e) => { | ||||||
|             console.log("请求失败!请求数据是", res); | 						console.log("Get file failed: " + e.message); | ||||||
|           } | 					}); | ||||||
|         }); | 				}, (e) => { | ||||||
|         //延迟显示结果 | 					console.log("Resolve file system failed: " + e.message); | ||||||
|         setTimeout(() => { | 				}); | ||||||
|           this.is_create_success = 1; | 			} | ||||||
|         }, 15000); |  | ||||||
|       }, |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
|       go_back(){ |  | ||||||
|         this.is_create_success = -1; |  | ||||||
| 
 |  | ||||||
|       } |  | ||||||
| 
 |  | ||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <style lang="scss"> | <style lang="scss"> | ||||||
| .background { | 	.background { | ||||||
|   position: absolute; | 		position: absolute; | ||||||
|   width: 102%; | 		width: 100%; | ||||||
|   height: 102%; | 		height: 100%; | ||||||
| 
 | 		top: 0%; | ||||||
|   left: -1%; | 		left: 0%; | ||||||
| } | 	} | ||||||
| .back_button { | 	.back_button { | ||||||
|   position: absolute; | 		position: absolute; | ||||||
|   width: 3%; | 		width: 3%; | ||||||
|   height: 3%; | 		height: 3%; | ||||||
|   top: 4%; | 		top: 4%; | ||||||
|   left: 7%; | 		left: 7%; | ||||||
| } | 	} | ||||||
| .generate_button { | 	.generate_button { | ||||||
|   position: absolute; | 		position: absolute; | ||||||
|   width: 90%; | 		width: 70%; | ||||||
|   height: 12%; | 		height: 12%; | ||||||
|   top: 87%; | 		top: 85%; | ||||||
|   left: 5%; | 		left: 14%; | ||||||
| } | 	} | ||||||
| .plan-image { | 	.plan-image { | ||||||
|   position: absolute; | 		position: absolute; | ||||||
|   width: 80%; // 根据实际需要调整宽度 | 		width: 80%; // 根据实际需要调整宽度 | ||||||
|   height: auto; // 高度自适应 | 		height: auto; // 高度自适应 | ||||||
|   top: 50%; // 根据实际需要调整垂直位置 | 		top: 50%; // 根据实际需要调整垂直位置 | ||||||
|   left: 50%; // 水平居中 | 		left: 50%; // 水平居中 | ||||||
|   transform: translate(-50%, -50%); // 使用transform进行居中 | 		transform: translate(-50%, -50%); // 使用transform进行居中 | ||||||
|   z-index: 10; // 确保图片显示在最顶层 | 		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> | </style> | ||||||
| @ -0,0 +1,17 @@ | |||||||
|  | <template> | ||||||
|  |   <view> | ||||||
|  | 
 | ||||||
|  |   </view> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script> | ||||||
|  | export default { | ||||||
|  |   data() { | ||||||
|  |     return {}; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style lang="scss"> | ||||||
|  | 
 | ||||||
|  | </style> | ||||||
| @ -0,0 +1,17 @@ | |||||||
|  | <template> | ||||||
|  |   <view> | ||||||
|  | 
 | ||||||
|  |   </view> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script> | ||||||
|  | export default { | ||||||
|  |   data() { | ||||||
|  |     return {}; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style lang="scss"> | ||||||
|  | 
 | ||||||
|  | </style> | ||||||
| @ -1,189 +0,0 @@ | |||||||
| <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> |  | ||||||
| @ -0,0 +1,17 @@ | |||||||
|  | <template> | ||||||
|  |   <view> | ||||||
|  | 
 | ||||||
|  |   </view> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script> | ||||||
|  | export default { | ||||||
|  |   data() { | ||||||
|  |     return {}; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style lang="scss"> | ||||||
|  | 
 | ||||||
|  | </style> | ||||||
| @ -1,206 +1,17 @@ | |||||||
| <template> | <template> | ||||||
| <view class="background"> |   <view> | ||||||
|     <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> |   </view> | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script> | <script> | ||||||
| export default { | export default { | ||||||
|   data() { |   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> | </script> | ||||||
| 
 | 
 | ||||||
| <style lang="scss"> | <style lang="scss"> | ||||||
| .background{ | 
 | ||||||
| 	background-image: url("@/static/homepages/user/basic_information/img.png"); | </style> | ||||||
| 	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> |  | ||||||
|  | |||||||
| @ -0,0 +1,17 @@ | |||||||
|  | <template> | ||||||
|  |   <view> | ||||||
|  | 
 | ||||||
|  |   </view> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script> | ||||||
|  | export default { | ||||||
|  |   data() { | ||||||
|  |     return {}; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style lang="scss"> | ||||||
|  | 
 | ||||||
|  | </style> | ||||||
| Before Width: | Height: | Size: 8.3 KiB | 
| Before Width: | Height: | Size: 1.1 KiB | 
| @ -1,169 +0,0 @@ | |||||||
| .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; |  | ||||||
| 			            } |  | ||||||
| 			        } |  | ||||||
| 			    } |  | ||||||
| 			} |  | ||||||
| 		} |  | ||||||
| 	} |  | ||||||
| } |  | ||||||
| Before Width: | Height: | Size: 438 B | 
| Before Width: | Height: | Size: 620 B | 
| Before Width: | Height: | Size: 44 KiB | 
| Before Width: | Height: | Size: 1.9 KiB | 
| Before Width: | Height: | Size: 2.2 KiB | 
| @ -1,196 +0,0 @@ | |||||||
| .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); |  | ||||||
| 					} |  | ||||||
| 				} |  | ||||||
| 			} |  | ||||||
| 		} |  | ||||||
| 	} |  | ||||||
| } |  | ||||||
| Before Width: | Height: | Size: 1.1 KiB | 
| Before Width: | Height: | Size: 761 KiB | 
| @ -1,308 +0,0 @@ | |||||||
| .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); |  | ||||||
| 							} |  | ||||||
| 						} |  | ||||||
| 					} |  | ||||||
| 				} |  | ||||||
| 			} |  | ||||||
| 		} |  | ||||||
| 	} |  | ||||||
| } |  | ||||||
| Before Width: | Height: | Size: 139 KiB | 
| Before Width: | Height: | Size: 158 KiB | 
| Before Width: | Height: | Size: 191 KiB | 
| Before Width: | Height: | Size: 112 KiB | 
| Before Width: | Height: | Size: 181 KiB | 
| Before Width: | Height: | Size: 93 KiB | 
| Before Width: | Height: | Size: 150 KiB | 
| Before Width: | Height: | Size: 354 KiB | 
| Before Width: | Height: | Size: 100 KiB | 
| Before Width: | Height: | Size: 54 KiB | 
| Before Width: | Height: | Size: 1.1 KiB | 
| Before Width: | Height: | Size: 67 KiB | 
| Before Width: | Height: | Size: 104 KiB | 
| Before Width: | Height: | Size: 66 KiB | 
| Before Width: | Height: | Size: 3.8 KiB | 
| Before Width: | Height: | Size: 113 KiB | 
| @ -1,133 +0,0 @@ | |||||||
| 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 { |  | ||||||
|     '主食类': ['米饭', '馒头', '面条', '包子', '饺子', '油条', '面包', '粥'], |  | ||||||
|     '肉类': ['猪肉', '牛肉', '鸡肉', '鸭肉', '羊肉', '鱼肉', '虾', '蛋'], |  | ||||||
|     '蔬菜类': ['西红柿', '黄瓜', '胡萝卜', '白菜', '菠菜', '生菜', '茄子', '土豆', '青椒'], |  | ||||||
|     '水果类': ['苹果', '香蕉', '橙子', '葡萄', '西瓜', '梨', '草莓', '柚子'], |  | ||||||
|     '饮品类': ['牛奶', '豆浆', '可乐', '果汁', '咖啡', '奶茶'], |  | ||||||
|     '常见菜品': ['西红柿炒鸡蛋', '宫保鸡丁', '鱼香肉丝', '红烧肉', '糖醋里脊', '麻婆豆腐'], |  | ||||||
|     '零食类': ['薯片', '巧克力', '饼干', '爆米花', '坚果', '冰淇淋', '蛋糕'], |  | ||||||
|     '快餐类': ['汉堡', '披萨', '炸薯条', '炸鸡翅', '热狗'] |  | ||||||
|   } |  | ||||||
| } |  | ||||||
| @ -1 +0,0 @@ | |||||||
| . |  | ||||||
| Before Width: | Height: | Size: 1.1 KiB | 
| Before Width: | Height: | Size: 128 KiB | 
| @ -1,111 +0,0 @@ | |||||||
| .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%; |  | ||||||
| } |  | ||||||
| Before Width: | Height: | Size: 64 KiB | 
| Before Width: | Height: | Size: 2.1 MiB | 
| Before Width: | Height: | Size: 6.5 KiB | 
| Before Width: | Height: | Size: 3.2 KiB | 
| Before Width: | Height: | Size: 16 KiB | 
| Before Width: | Height: | Size: 153 KiB | 
| Before Width: | Height: | Size: 11 KiB | 
| Before Width: | Height: | Size: 171 KiB | 
| Before Width: | Height: | Size: 46 KiB | 
| Before Width: | Height: | Size: 159 KiB |