2024.5.6

<template>
<view class="index-header">
<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
<view class="cu-bar fixed" :style="style" :class="bgColor">

<view class="action" @tap="SwitchTab(1)">
<text class="cuIcon-playfill"></text>
</view>

<view class="content-1" :style="[{top:StatusBar + 'px'}]">
<view class="action">
<view class="item"
:class="SwitchCur == 1 ? 'selected' : null "
@tap.stop="SwitchTab(1)">关注</view>
<view class="item"
:class="SwitchCur == 2 ? 'selected' : null "
@tap.stop="SwitchTab(2)">
<text>推荐</text>
</view>
</view>
</view>

<view class="right" @tap="SwitchTab(2)">
<text class="cuIcon-search"></text>
</view>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
StatusBar: this.StatusBar,
CustomBar: this.CustomBar,
SwitchCur: 2
};
},
name: 'index-header',
computed: {
style() {
var StatusBar= this.StatusBar;
var CustomBar= this.CustomBar;
var bgImage = this.bgImage;
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
if (this.bgImage) {
style = `${style}background-image:url(${bgImage});`;
}
return style
}
},
props: {
bgColor: {
type: String,
default: ''
},
isBack: {
type: [Boolean, String],
default: false
}
},
methods: {
SwitchTab(val) {
this.SwitchCur = val;
// console.log( this.SwitchCur );
this.$emit('headerSwitch',val);
}
}
}
</script>

<style lang="less">
.cu-custom{
.bg-index-header{
background-color: rgba(255,255,255,0);
}
.action{
.cuIcon-playfill{
background-color: rgba(255,255,255,0.5);
border-radius: 50upx;
padding: 18upx;
color: #FFFFFF;
}
}

.right{
padding-right: 30upx;
.cuIcon-search{
background-color: rgba(255,255,255,0.5);
border-radius: 50upx;
padding: 18upx;
color: #FFFFFF;
}
}
.content-1{
.action{
border-radius: 80upx;
background-color: rgba(255,255,255,0.2);
.item{
border-radius: 80upx;
padding: 12upx 30upx;
margin: 0 5upx;
color: #FFFFFF;
}
.selected{
background-color: rgba(255,255,255,0.5);
}
}
}
}

</style>