50 lines
841 B
Plaintext
50 lines
841 B
Plaintext
<template>
|
|
<view class="tabs">
|
|
<view
|
|
v-for="it in items"
|
|
:key="it.value"
|
|
class="tab"
|
|
:class="value === it.value ? 'on' : ''"
|
|
@click="pick(it.value)"
|
|
>
|
|
<text>{{ it.label }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="uts">
|
|
export default {
|
|
props: {
|
|
value: { type: String, default: '30d' },
|
|
items: { type: Array, default: () => [] }
|
|
},
|
|
methods: {
|
|
pick(v: string) {
|
|
this.$emit('change', v)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.tabs {
|
|
display: flex;
|
|
background: rgba(17, 17, 17, 0.04);
|
|
border-radius: 999rpx;
|
|
padding: 6rpx;
|
|
}
|
|
|
|
.tab {
|
|
padding: 10rpx 16rpx;
|
|
border-radius: 999rpx;
|
|
color: rgba(17, 17, 17, 0.65);
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.tab.on {
|
|
color: #fff;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #ff4d4f 0%, #ff7a45 100%);
|
|
}
|
|
</style>
|