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 |