项目初始化

pages/tabbar/components/home/friend/stickyBox.vue

@@ -0,0 +1,109 @@
+<template>
+	<view>
+		<view class="tag-box">
+			<view class="title">
+				<view class="icon">
+					<u-icon name="account-fill" size="20" color="#aaa"></u-icon>
+				</view>
+				<text class="text">更多用户</text>
+			</view>
+			<view class="sticky-box">
+				<view class="btn-tag" @click="searchTab">
+					<text class="text">筛选</text>
+					<u-icon name="shaixuan" custom-prefix="iconfont" size="20" color="#aaa"></u-icon>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import sheep from '@/sheep';
+	import { showAuthModal } from '@/sheep/hooks/useModal';
+	import $store from '@/sheep/store';
+	export default {
+		components: {
+			
+		},
+		props: {
+			scrollTop: {
+				type: Number,
+				default: 0,
+			},
+			stickyTop: {
+				type: Number,
+				default: uni.upx2px(80),
+			},
+		},
+		data() {
+			return {
+				
+			}
+		},
+		computed: {
+			
+		},
+		methods: {
+			searchTab() {
+				const isLogin = sheep.$store('user').isLogin;
+				if(!isLogin) {
+					showAuthModal();
+					return;
+				}
+				$store('modal').$patch((state) => {
+					state.search = true;
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.tag-box {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 15px;
+		background-color: #fafafa;
+		height: 100rpx;
+		
+		.title {
+			font-size: 28rpx;
+			font-weight: bold;
+			display: flex;
+			
+			.icon {
+				background-color: #ddd;
+				width: 36rpx;
+				height: 36rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border-radius: 100%;
+			}
+			
+			.text {
+				margin-left: 4px;
+			}
+		}
+		
+		.sticky-box {
+			display: flex;
+			
+			.btn-tag {
+				background-color: #fff;
+				border-radius: 40px;
+				margin-left: 5px;
+				padding: 0px 10px;
+				display: flex;
+				align-items: center;
+				font-size: 24rpx;
+				height: 48rpx;
+				
+				.text {
+					margin-right: 3px;
+				}
+			}
+		}
+	}
+</style>