<!-- 
    filename: CityItem.vue
    author: liubin
    date: 2024-04-17 09:55:12
    description: 
-->

<template>
  <div class="city-item inner-shadow">
    <CityName :value="location" />
    <CityValue :value="value + ''" :period="period" />
  </div>
</template>

<script>
import CityNameVue from "./CityName.vue";
import CityValueVue from "./CityValue.vue";
import GradientTextVue from "../gradient/GradientText.vue";

export default {
  name: "CityItem",
  components: {
    GradientTextVue,
    CityName: CityNameVue,
    CityValue: CityValueVue,
  },
  props: {
    location: {
      type: String,
      default: "",
    },
    value: {
      type: Number,
      default: 0,
    },
    period: {
      type: String,
      default: "日",
    },
  },
  data() {
    return {};
  },
  computed: {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.city-item {
  display: flex;
}

.inner-shadow {
  box-shadow: inset 0 0 12px 2px #fff3;
  border-radius: 4px;
}
</style>
