diff --git a/App.vue b/App.vue index 241ac51..a4e7d78 100644 --- a/App.vue +++ b/App.vue @@ -24,7 +24,6 @@ import ai_recongize_plan from './components/ai_recongize_plan/ai_recongize_plan. import ai_recongize_hot from './components/ai_recongize_hot/ai_recongize_hot.vue'; import ai_recongize_recipe from './components/ai_recongize_recipe/ai_recongize_recipe.vue'; - export default { globalData: { // 定义后端数据库地址信息 diff --git a/components/community_image_box/community_image_box.vue b/components/community_image_box/community_image_box.vue new file mode 100644 index 0000000..37d3e7f --- /dev/null +++ b/components/community_image_box/community_image_box.vue @@ -0,0 +1,141 @@ +<template> + <view class="myimgDV"> + <view v-if="imgPicList.length>0" class='receiveimage flex justify'> + <block v-for="(item,ind) in imgPicList" :key="ind"> + <image class="imgitem" :style="{width:imgwidth,height:imgheight}" :class="imgboxtype==0?'onepic':imgboxtype==1?'doublepic':imgboxtype==2?'triplepic':''" + :src="item" :mode="imgboxtype==0?'widthFix':imgboxtype==1?'aspectFill':imgboxtype==2?'aspectFill':''" @click="previewpic(item,imgPicList)"></image> + <!-- {width:(imgboxtype==0?'':imgwidth),height:(imgboxtype==0?'':imgwidth),padding:(imgboxtype==0?'':imgpad)} --> + </block> + </view> + </view> +</template> + +<script> + export default { + name:"community_image_box", + data() { + return { + imgPicList: [], + imgboxtype: 0, + imgwidth: 0, + imgpad: 0, + imgheight: '' + } + }, + props: { + imgList: { + type: Array + }, + num: { + type: Number, + default: 0 + }, + pad: { + type: Number, + default: 0 + } + }, + methods: { + // 图片预览 + previewpic(cind, clist) { + console.log(cind, clist); + uni.previewImage({ + urls: clist, + current: cind, + indicator: 'default' + }); + }, + getheight() { + console.log('imgboxtype:',this.imgboxtype) + let that = this; + const query = uni.createSelectorQuery().in(that) + query.select('.imgitem').boundingClientRect() + query.exec((res)=>{ + console.log(res[0].width) + if (that.num == 1) { + that.imgheight = '100%'; + } else if (that.num == 2 || that.num == 4) { + that.imgheight = (res[0].width).toFixed(2) + 'px'; + } else { + that.imgheight = (res[0].width).toFixed(2) + 'px'; + } + }) + + // const query = uni.createSelectorQuery().in(this).select('.imgitem'); + // uni.createSelectorQuery().select('.imgitem').boundingClientRect(res => { + // console.log('reac', res) + // if (this.num == 1) { + // this.imgheight = '100%'; + // } else if (this.num == 2 || this.num == 4) { + // this.imgheight = (res.width).toFixed(2) + 'px'; + // } else { + // this.imgheight = (res.width).toFixed(2) + 'px'; + // } + // }).exec() + + } + }, + mounted() { + // let this = this; + this.imgPicList = this.imgList; + console.log('num:'+this.num) + if (this.num == 1) { + this.imgboxtype = 0; + this.imgwidth = 100 + '%'; + } else if (this.num == 2 || this.num == 4) { + this.imgboxtype = 1; + this.imgwidth = 49 + '%'; + } else if (this.num == 3 || this.num > 4) { + this.imgboxtype = 2; + this.imgwidth = 32 + '%'; + } + this.$nextTick(function() { + this.getheight(); + }) + } + } +</script> + +<style lang="scss"> + .myimgDV { + .flex { + display: flex; + } + .justify { + justify-content: space-between; + } + .receiveimage { + margin-top: 28rpx; + display: flex; + flex-wrap: wrap; + width: 100%; + .onepic { + width: 100%; + // height: 188rpx; + // height: auto; + margin-bottom: 28rpx; + &:nth-child(3n) { + margin-right: 0; + } + } + .doublepic { + // width: 340rpx; + // height: 340rpx; + margin-right: 12rpx; + margin-bottom: 12rpx; + &:nth-child(2n) { + margin-right: 0; + } + } + .triplepic { + // width: 222rpx; + // height: 222rpx; + margin-right: 12rpx; + margin-bottom: 12rpx; + &:nth-child(3n) { + margin-right: 0; + } + } + } + } +</style> \ No newline at end of file diff --git a/pages/homepages/community/community/community.vue b/pages/homepages/community/community/community.vue index 1b71a83..f08d0f4 100644 --- a/pages/homepages/community/community/community.vue +++ b/pages/homepages/community/community/community.vue @@ -1,20 +1,91 @@ <template> - <view> - <tarbar_community></tarbar_community> + <view class="community_box"> + <!-- 头部信息 --> + <view class="top_box"> + <!-- 头像 --> + <view class="dog_image_box"> + <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"></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="../../../../static/homepages/community/community/pictures/dog_image.png" mode="widthFix"></image> + </view> + <view class="post_info"> + <view class="post_name">puppy</view> + <view class="post_date">2024年11月13日</view> + </view> + </view> + <view class="post_word_box">今天去海边锻炼看见的,真是太美了</view> + <view class="post_images_box"> + <community_image_box class="post_images" :imgList='imgList' :num='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">10</view> + </view> + <view class="like_box"> + <image class="love_icon" src="../../../../static/homepages/community/community/pictures/love_image.png" mode="widthFix"></image> + <view class="like_num">122</view> + </view> + </view> + </view> + </scroll-view> + </view> </view> + <!-- 底部导航栏 --> + <tarbar_community class="tarbar_box"></tarbar_community> </template> <script> import Community from "@/components/swiper/community.vue"; - +import community_image_box from "../../../../components/community_image_box/community_image_box.vue"; export default { - components: {Community}, + components: {Community, community_image_box}, data() { - return {}; + return { + posts:[ + { + content:'' + }, + { + content:'' + }, + { + content:'' + }, + { + content:'' + }, + ], + 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', + ] + }; + }, + onLoad() { + } } </script> <style lang="scss"> - + @import "@/static/homepages/community/community/scss/community.scss" </style> diff --git a/static/homepages/community/community/pictures/add_image.png b/static/homepages/community/community/pictures/add_image.png new file mode 100644 index 0000000..e77a787 Binary files /dev/null and b/static/homepages/community/community/pictures/add_image.png differ diff --git a/static/homepages/community/community/pictures/chat_icon.png b/static/homepages/community/community/pictures/chat_icon.png new file mode 100644 index 0000000..7554bed Binary files /dev/null and b/static/homepages/community/community/pictures/chat_icon.png differ diff --git a/static/homepages/community/community/pictures/dog_image.png b/static/homepages/community/community/pictures/dog_image.png new file mode 100644 index 0000000..ce0bdfc Binary files /dev/null and b/static/homepages/community/community/pictures/dog_image.png differ diff --git a/static/homepages/community/community/pictures/love_image.png b/static/homepages/community/community/pictures/love_image.png new file mode 100644 index 0000000..3d372e9 Binary files /dev/null and b/static/homepages/community/community/pictures/love_image.png differ diff --git a/static/homepages/community/community/scss/community.scss b/static/homepages/community/community/scss/community.scss new file mode 100644 index 0000000..0a25913 --- /dev/null +++ b/static/homepages/community/community/scss/community.scss @@ -0,0 +1,194 @@ +.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; + 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); + } + } + } + } + } +} \ No newline at end of file diff --git a/unpackage/dist/cache/.vite/deps/_metadata.json b/unpackage/dist/cache/.vite/deps/_metadata.json index 71bef9f..bca37d4 100644 --- a/unpackage/dist/cache/.vite/deps/_metadata.json +++ b/unpackage/dist/cache/.vite/deps/_metadata.json @@ -1,8 +1,8 @@ { - "hash": "0aaf698d", - "configHash": "cc60d382", - "lockfileHash": "22a0e42d", - "browserHash": "89d9bfb2", + "hash": "70943268", + "configHash": "c265b382", + "lockfileHash": "e3b0c442", + "browserHash": "d782de90", "optimized": {}, "chunks": {} } \ No newline at end of file