登录注册/数据分析

components/analytics/PeriodTabs.uvue

@@ -0,0 +1,49 @@
+<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>