guessing-miniprogram-fortend/src/components/quiz/item.vue

36 lines
978 B
Vue

<template>
<view class="text-sm">
<view class="p-3">
<view>{{ data.game_day }} {{ data.game_name }}</view>
<view class="grid grid-cols-2 mt-2">
<view class="grid grid-cols-3 mr-20rpx">
<view>{{ data.game_home_field }}</view>
<view class="text-center">VS</view>
<view class="text-right">{{ data.game_away }}</view>
</view >
<view class="grid grid-cols-2 ml-40rpx">
<view>{{ data.score }}</view>
<view :style="{ color: currentStatus.color }" class="text-right">{{
currentStatus.label
}}</view>
</view>
</view>
</view>
<up-line color="#EEEEEE"></up-line>
</view>
</template>
<script setup>
import { computed } from 'vue'
import { status } from './status'
const props = defineProps({
data: {
type: Object,
default: () => {},
},
})
const currentStatus = computed(() =>
status.find((e) => e.value == props.data.status)
)
</script>