lcoco/pages/circle/index.vue

<template>
	<view class="circle-box">
		<view class="circle-title" :style="[{ 'margin-top': statusBarH + 'px'}]">
			<view class="title-left">
				<view class="title-text sys-height-44 sys-color-gray-9 sys-weight-400" @click="setTitleTag(0)"
					:class="{'title-text-default':tagNum===0}">好友</view>
				<view class="title-text sys-height-44 sys-color-gray-9 sys-weight-400" @click="setTitleTag(1)"
					:class="{'title-text-default':tagNum===1}">附近</view>
				<view class="title-text sys-height-44 sys-color-gray-9 sys-weight-400" @click="setTitleTag(2)"
					:class="{'title-text-default':tagNum===2}">推荐</view>
			</view>
			<view class="title-right">
				<view class="title-icon">
					<image class="title-img" src="/static/img/circle/Group-100345@2x.png"></image>
				</view>
				<view class="title-icon">
					<image class="title-img" src="/static/img/circle/Group-100344@2x.png"></image>
				</view>
			</view>
		</view>

		<view class="circle-content">
			<scroll-view :scroll-y="true" :style="{'height':'calc(100vh - '+navHeight+'rpx - var(--window-bottom))'}">
				<my-praise :tagNum="tagNum"></my-praise>
			</scroll-view>
		</view>
		
		<view class="circle-add sys-background-yellow">
			<image class="circle-add-img" src="/static/img/circle/cancel-icon-2@2x.png"></image>
		</view>
	</view>
</template>

<script>
	import EnNav from "@/components/en-utils/en-nav/en-nav";
	import MyPraise from "@/pages/my/model/my-praise";
	export default {
		components: {
			MyPraise,
			EnNav
		},
		data() {
			return {
				statusBarH: 0,
				tagNum: 0,
				navHeight: 44
			}
		},
		methods: {
			setTitleTag(num) {
				if (num !== this.tagNum) {
					this.tagNum = num
				}
			}
		},
		created() {
			uni.getSystemInfo({
				success: (e) => {
					this.statusBarH = e.statusBarHeight
					this.navHeight = (50 + this.statusBarH) * 2
					//e.safeArea.bottom  底部安全距离
				}
			})

		}
	}
</script>

<style scoped lang="scss">
	.circle-box {
		.circle-title {
			display: flex;
			justify-content: space-between;
			padding: 22rpx 36rpx;

			.title-left {
				display: flex;
				justify-content: flex-start;

				.title-text {
					font-size: 32rpx;
					margin-right: 56rpx;
				}

				.title-text-default {
					font-weight: 600;
					color: #141414;
				}

			}

			.title-right {
				display: flex;
				justify-content: flex-end;

				.title-img {
					width: 44rpx;
					height: 44rpx;
					margin-left: 40rpx;
				}
			}

		}

		.circle-content {
			// padding: 0 32rpx;

			.circle-item {
				margin-top: 32rpx;
				margin-bottom: 8rpx;
				display: flex;
				justify-content: space-between;

				.item-left {
					width: 80rpx;
					height: 80rpx;
					position: relative;

					.item-head {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}

					.item-auth {
						width: 18rpx;
						height: 18rpx;
						position: absolute;
						bottom: 0;
						right: 8rpx;
						z-index: 10;
					}

				}

				.item-right {
					padding-left: 20rpx;
					width: calc(100vw - 144rpx);

					.circle-top-data {
						display: flex;
						justify-content: space-between;

						.circle-top-left {
							.circle-top-left-title {
								display: flex;
								justify-content: flex-start;
								align-items: center;

								.left-title-text {
									font-size: 32rpx;
									margin-right: 8rpx;
								}

								.left-title-vip-img {
									height: 28rpx;
								}
							}

							.left-title-time {
								margin-top: 8rpx;
								line-height: 34rpx;
								font-size: 24rpx;
							}
						}

						.circle-top-right {
							height: 40rpx;
							border-radius: 200rpx;
							border: 2rpx solid #141414;
							padding: 8rpx 16rpx;
							display: flex;
							justify-content: space-between;

							.circle-top-right-img {
								width: 40rpx;
								height: 40rpx;
								margin-right: 8rpx;
							}

							.circle-top-right-text {
								font-size: 28rpx;
								line-height: 40rpx;
							}
						}
					}
				}

			}
		}

		.circle-add {
			position: fixed;
			bottom: 162rpx;
			// bottom: 64rpx;
			right: 28rpx;
			border-radius: 50%;
			width: 88rpx;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.circle-add-img {
				width: 40rpx;
				height: 40rpx;
			}
		}

	}
</style>