bookingNavlist.vue
1.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<template>
<view class="booking_container">
<view class="nav_title">
<view class="nav_item" v-for="(item, index) in navList" :key="index" @click="current = index">
<text class="ballName" :class="{ ballActive: current === index}">{{ item.ballName }}</text>
<text class="booking" :class="{ bookingActive: current === index}">订场</text>
</view>
</view>
<ArenaCard v-for="item in navList" :key="item.id" />
</view>
</template>
<script>
import ArenaCard from './arenaCard.vue'
export default {
components: { ArenaCard },
data(){
return {
current: 0,
navList: [
{ ballName: '羽毛球', id: 1 },
{ ballName: '篮球', id: 2 },
{ ballName: '网球', id: 3 },
{ ballName: '足球', id: 4 },
{ ballName: '兵乓球', id: 5 },
]
}
}
}
</script>
<style lang="scss" scoped>
.booking_container{
margin-top: 30rpx;
.nav_title{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28rpx;
overflow-x: scroll;
flex-wrap: nowrap;
.nav_item{
display: flex;
flex-direction: column;
align-items: center;
width: 25%;
height: 100rpx;
flex-shrink: 0;
.ballName{
color: #333333;
font-size: 32rpx;
line-height: 44rpx;
&.ballActive{
background: linear-gradient(180deg, $uni-color-primary 0%, #FFD400 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 400;
}
}
.booking{
color: #666666;
font-size: 24rpx;
margin-top: 8rpx;
&.bookingActive{
padding: 6rpx 24rpx;
color: #fff;
background: linear-gradient( 270deg, $uni-color-primary 0%, #FCD723 100%);
}
}
}
}
}
</style>