Files
peiwan-uniapp/pages/tabbar/components/home/friend/stickyBox.vue
2025-01-21 01:46:34 +08:00

109 lines
1.8 KiB
Vue

<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>