64 lines
1.4 KiB
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>
|