talk_appAmin/pages/common/navbar/index.vue

64 lines
1.4 KiB
Vue

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