93 lines
1.7 KiB
Vue
93 lines
1.7 KiB
Vue
<template>
|
|
<view class="topNavigation">
|
|
<view
|
|
@click="RealTimePk"
|
|
:class="{ Selectcss: Select, NoSelectcss: !Select }"
|
|
class="RealTime"
|
|
>PK大厅</view
|
|
>
|
|
<view
|
|
@click="MakeAppointmentPK"
|
|
:class="{ Selectcss: !Select, NoSelectcss: Select }"
|
|
class="MakeAppointment"
|
|
>今日PK</view
|
|
>
|
|
<view @click="screening" class="Screening">筛选</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: "Hello",
|
|
Select: true,//是否选中实时PK/今日PK false/大厅 true
|
|
};
|
|
},
|
|
onLoad() {
|
|
// 页面加载时执行
|
|
},
|
|
methods: {
|
|
MakeAppointmentPK() {//点击今日PK
|
|
this.Select = false;
|
|
this.$emit("MakeAppointmentPK");
|
|
},
|
|
RealTimePk() {//点击PK大厅
|
|
this.Select = true;
|
|
this.$emit("RealTimePk");//触发实时PK事件
|
|
},
|
|
screening() {
|
|
this.$emit("screening");//触发筛选事件
|
|
},
|
|
Search() {
|
|
this.$emit("Search");//触发搜索事件
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.topNavigation {
|
|
width: 100%;
|
|
height: 114.5rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.Screening {
|
|
width: 120rpx;
|
|
height: 50rpx;
|
|
background: #5bced1;
|
|
font-size: 23rpx;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
border-radius: 15rpx;
|
|
}
|
|
.filter-icon {
|
|
width: 33rpx;
|
|
height: 33rpx;
|
|
}
|
|
.RealTime {
|
|
margin: 0 39rpx 0 41rpx;
|
|
}
|
|
.MakeAppointment {
|
|
margin-right: 270rpx;
|
|
}
|
|
.Screening {
|
|
margin-right: 20rpx;
|
|
}
|
|
.Selectcss {
|
|
width: 146rpx;
|
|
height: 39rpx;
|
|
font-size: 42rpx;
|
|
color: #0e1011;
|
|
font-weight: 600;
|
|
}
|
|
.NoSelectcss {
|
|
font-weight: 600;
|
|
height: 29rpx;
|
|
color: #727a7b;
|
|
}
|
|
</style>
|