<template>
  <Box title="气象数据">
    <div class="pl-23px py-23px">
      <div class="grid grid-cols-3 gap-20px">
        <div v-for="item in 6" :key="item">
          <div class="text-11px text-white">空气温度</div>
          <div
            class="mt-11px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
          >
            <span class="text-18px font-bold">18.12</span>
            <span class="text-11px ml-4px">℃</span>
          </div>
        </div>
      </div>
    </div>
  </Box>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import Box from './Box.vue'

  export default defineComponent({
    components: {
      Box,
    },
    setup() {
      return {}
    },
  })
</script>

<style scoped></style>
