页面

2025-05-12 21:23:37 +08:00
parent ab626be4b4
commit 033cb649f8
52 changed files with 9183 additions and 6 deletions
--- a/components/topNavigation/topNavigation.vue
+++ b/components/topNavigation/topNavigation.vue
@@ -0,0 +1,92 @@
+<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>
+    <image @click="Search" src="../../static/Searching.png" class="filter-icon" />
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: "Hello",
+      Select: true,
+    };
+  },
+  onLoad() {
+    // 页面加载时执行
+  },
+  methods: {
+    RealTimePk() {
+      this.Select = true;
+      this.$emit("RealTimePk");//触发实时PK事件
+    },
+    MakeAppointmentPK() {
+      this.Select = false;
+      this.$emit("MakeAppointmentPK");//触发预约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: 93rpx;
+  height: 50rpx;
+  background: #ffffff;
+  border-radius: 4rpx;
+  font-size: 23rpx;
+  color: #3b3b3b;
+  text-align: center;
+  line-height: 50rpx;
+}
+.filter-icon {
+  width: 33rpx;
+  height: 33rpx;
+}
+.RealTime {
+  margin: 0 39rpx 0 41rpx;
+}
+.MakeAppointment {
+  margin-right: 233rpx;
+}
+.Screening {
+  margin-right: 20rpx;
+}
+.Selectcss {
+  width: 146rpx;
+  height: 39rpx;
+  font-size: 42rpx;
+  color: #0e1011;
+}
+.NoSelectcss {
+  width: 108rpx;
+  height: 29rpx;
+  font-size: 31rpx;
+  color: #727a7b;
+}
+</style>