<template>
<view class="content">
    		<!-- 顶部导航栏 -->
		<u-navbar leftText="" title="" :placeholder="true" :safeAreaInsetTop="true"  :bgColor="bgColor">
            <image src="../static/images/icon/tu2-4.png" class="img1" slot="center"></image>
		    <view class="img1BOX" slot="left">
				<image src="../static/images/icon/tu2-4.png" class="img1"></image>
				<image src="../static/images/icon/tu2-5.png" class="img2"></image>
				<view class="qiehuanBox">
					<u-tabs lineColor="#B3D7FF" lineWidth="50" lineHeight="8" 
					:activeStyle="{ fontWeight: '600rpx',fontSize:'40rpx',color: '#000000'}" 
					:inactiveStyle="{fontWeight: '400rpx',fontSize:'36rpx',color: '#999999'}"
					:list="list1" @click="clickList1"></u-tabs>
				</view> 
		    </view>
		</u-navbar>
</view>
</template>

<script setup>
import {
	ref,
	reactive,
	toRefs,
	getCurrentInstance
} from 'vue';
const list1 = ref([{
    name: '关注',
}, {
    name: '推荐',
}])
const bgColor = ref('rgba(170, 0, 0, 0)');

const clickList1 = () => {
    console.log(111);
}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		.img1BOX{
			width:200rpx;
			display: flex;
			align-content: center;
			.img1{
		width: 41rpx;
		height: 46rpx;
		margin-right: 28rpx;
	}

	.img2{
		width: 46rpx;
		height: 46rpx;
	}
			.qiehuanBox{
				margin-left: 130rpx;
				display: flex;
				align-content: center;
				justify-content: center;
			}
		}
	}
</style>