<template>
  <div id="LeftBox1">
    <div class="TianQiList" v-for="(item, index) in TianQiData" :key="index">
      <span class="TianQiListDate">{{ item.date }}</span>
      <img :src="item.imgs" class="TianQiListImg" alt="" />
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from "vue";
import {getImageUrlForPublic} from '/src/utils/util.js'
export default {
  name: "LeftBox1",
  setup() {
    // 天气
    const Alldata=reactive({
      TianQiData :[
      {
        date: "17日",
        imgs: getImageUrlForPublic('oneMapTianqi1'),
      },
      {
        date: "18日",
        imgs: getImageUrlForPublic('oneMapTianqi2'),
      },
      {
        date: "19日",
        imgs: getImageUrlForPublic('oneMapTianqi3'),
      },
      {
        date: "20日",
        imgs: getImageUrlForPublic('oneMapTianqi4'),
      },
    ]
    })
    onMounted(() => {});
    return { ...toRefs(Alldata)};
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
#LeftBox1 {
  width: 100%;
  height: 100%;
}
.TianQiList {
  width: 25%;
  height: 100%;
  text-align: center;
  float: left;

  .TianQiListDate {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: inline-block;
  }

  .TianQiListImg {
    width: 50px;
    height: auto;
    margin: 0 auto;
  }
}
</style>