<template>
        <div class="weather">
            <div>
              <marquee behavior="" direction="" scrollamount="3">
                <div class="item" v-for="(item, index) in list" :key="index">
                  <img :src="require(`../assets/image/real-time-${item.formula}.png`)
                    " alt="" />
                  <span>{{ item.environmentDataId }} : </span>
                  <span>{{
                    item.environmentData + getTypeList(item.formula)
                  }}</span>
                </div>
              </marquee>
            </div>
          </div>
</template>
<script>
export default {
      props:{
           list: {
                type: Array,
                default:[]
            },
    },
      computed: {
          typeList() {
    return this.$store.state.typeList.map(item => {
      return {
        ...item,
        label: this.$t(`types.${item.value}`) // 假设你为每个value创建了对应的翻译key
      }
    })
  }
      },
  data(){
      return {}
  },
  mounted(){},
  methods:{
        // 数据单位
    getTypeList(val) {
      var store = this.$store.state;
      let typeList1 = [];
      typeList1 = this.typeList.filter((item) => {
        return item.value == val;
      });
      return typeList1[0].unit;
    },

  },

}
</script>
<style lang="scss">
       .weather {
          width: 3.84rem;
          height: 0.34rem;

          >div {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 0 0.1rem;
            background: rgba(14, 91, 165, 0.1);
            border: 0.01rem solid rgba(97, 152, 209, 0.65);
            line-height: 0.34rem;
            font-size: 0.16rem;
            font-family: MicrosoftYaHei;
            font-weight: 400;
            color: #ffffff;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            marquee {
              width: 100%;
              height: 100%;

              .item {
                height: 100%;
                margin-right: 0.1rem;
                display: inline-block;

                >img {
                  width: 0.3rem;
                  height: 0.3rem;
                  position: relative;
                  top: 0.01rem;
                  margin-right: 0.05rem;
                }

                >span {
                  font-size: 0.16rem;
                  font-weight: 400;
                  color: #fff;
                  font-family: Microsoft YaHei;
                  position: relative;
                  top: -0.08rem;
                }
              }
            }
          }
        }
</style>
