first commit

components/VoiceCard.vue

@@ -0,0 +1,70 @@
+<template>
+	<view class="card voice-card">
+		<view class="card-header flex-row-sb mb-lg">
+			<view class="title">通话使用</view>
+			<view class="date-range-selector" @tap="$emit('openDatePicker')">
+				<text>{{ dateRangeText }}</text>
+				<text class="ml-10">▼</text>
+			</view>
+		</view>
+		<view class="voice-stats flex-row-sb">
+			<view class="stat-item flex-col-center">
+				<view class="caption mb-xs">总通话</view>
+				<view class="stat-value-container">
+					<text class="stat-value">{{ voiceStats.totalVoice }}</text>
+					<text class="stat-unit">分钟</text>
+				</view>
+			</view>
+			<view class="stat-item flex-col-center">
+				<view class="caption mb-xs">已使用</view>
+				<view class="stat-value-container">
+					<text class="stat-value">{{ voiceStats.usedVoice }}</text>
+					<text class="stat-unit">分钟</text>
+				</view>
+			</view>
+			<view class="stat-item flex-col-center">
+				<view class="caption mb-xs">剩余</view>
+				<view class="stat-value-container">
+					<text class="stat-value">{{ voiceStats.remainingVoice }}</text>
+					<text class="stat-unit">分钟</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	defineProps({
+		voiceStats: { type: Object, default: () => ({ totalVoice: 0, usedVoice: 0, remainingVoice: 0 }) },
+		dateRangeText: { type: String, default: '' }
+	});
+
+	defineEmits(['openDatePicker']);
+</script>
+
+<style scoped lang="scss">
+	.voice-card {
+		.date-range-selector {
+			display: flex;
+			align-items: center;
+			padding: 8rpx 20rpx;
+			background: var(--gray-100);
+			border-radius: var(--radius-small);
+			cursor: pointer;
+			font-size: 22rpx;
+			color: var(--text-primary);
+			max-width: 360rpx;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			&:active { opacity: 0.7; }
+		}
+		.voice-stats {
+			background: var(--gray-100);
+			border-radius: var(--radius-small);
+			padding: 20rpx;
+			.stat-item { flex: 1; }
+		}
+	}
+	.ml-10 { margin-left: 10rpx; }
+</style>