commit
20726d5c26
@ -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>
|
||||
|
After Width: | Height: | Size: 438 B |
|
After Width: | Height: | Size: 620 B |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,196 @@
|
||||
.community_box{
|
||||
padding: 5vh 5vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
.top_box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 10vh;
|
||||
// border-bottom: 1.48205px solid #000000;
|
||||
.dog_image_box{
|
||||
// height: 8vh;
|
||||
// width: 8vh;
|
||||
height: 110rpx;
|
||||
width: 110rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #D9D9D9;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.dog_image{
|
||||
width: 85rpx;
|
||||
}
|
||||
}
|
||||
.words_box{
|
||||
height: 100%;
|
||||
width: 60%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.title_box{
|
||||
width: fit-content;
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 3vh;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
letter-spacing: -0.604677px;
|
||||
color: #000000;
|
||||
}
|
||||
.tip_word_box{
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 2vh;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
letter-spacing: -0.604677px;
|
||||
color: #CCB8B8;
|
||||
}
|
||||
}
|
||||
.add_image_box{
|
||||
// height: 8vh;
|
||||
// width: 8vh;
|
||||
height: 110rpx;
|
||||
width: 110rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #D9D9D9;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.add_image{
|
||||
width: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 分割线
|
||||
.line_box{
|
||||
width: 70%;
|
||||
border-bottom: 1.48205px solid #000000;
|
||||
position: absolute;
|
||||
top: 17vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.post_body{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 20vh;
|
||||
width: 90%;
|
||||
.post_scroll_box{
|
||||
height: 69vh;
|
||||
}
|
||||
.post_box{
|
||||
background-color: #E6EEFA;
|
||||
border-radius: 30px;
|
||||
padding: 2vh 2vh;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 5vh;
|
||||
width: 100%;
|
||||
// height: 55vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// height:900rpx;
|
||||
position: relative;
|
||||
.post_top_box{
|
||||
display: flex;
|
||||
.post_avatar_box{
|
||||
width: 5vh;
|
||||
height: 5vh;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 2vh;
|
||||
.post_avatar{
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
.post_info{
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 2vh;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.post_word_box{
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 2vh;
|
||||
color: #000000;
|
||||
margin-top: 2.5vh;
|
||||
}
|
||||
.post_images_box{
|
||||
width: 100%;
|
||||
height:70%;
|
||||
.post_images{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.post_bottom_box{
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
padding: 0% 6%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(2px);
|
||||
/* Note: backdrop-filter has minimal browser support */
|
||||
border-radius: 0px 0px 30px 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
.comments_box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
// width: 10%;
|
||||
.chat_icon{
|
||||
width: 3.2vh;
|
||||
}
|
||||
.comments_num{
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 2vh;
|
||||
text-align: center;
|
||||
letter-spacing: -0.604677px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
.like_box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
margin-left: 4%;
|
||||
// width: 10%;
|
||||
.love_icon{
|
||||
width: 3.2vh;
|
||||
}
|
||||
.like_num{
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 2vh;
|
||||
text-align: center;
|
||||
letter-spacing: -0.604677px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
{
|
||||
"hash": "48f6c93b",
|
||||
"configHash": "badd50c8",
|
||||
"hash": "70943268",
|
||||
"configHash": "c265b382",
|
||||
"lockfileHash": "e3b0c442",
|
||||
"browserHash": "debd2ea0",
|
||||
"browserHash": "d782de90",
|
||||
"optimized": {},
|
||||
"chunks": {}
|
||||
}
|
||||
Loading…
Reference in new issue