xx_sw_dp/src/views/weatherHome/components/rpList.vue

<template>
  <div class="rainfall-partition">
    <div v-for="(value, key) in dataObj" class="rp-list" @click="upSwitch(key, value)">
      <div class="rp-title">
        <div>
          {{ key }}
        </div>
        <div><span v-if="value.rain * 1 !== 0">{{ value.rain }}mm</span><span v-else>暂无降雨</span></div>
      </div>
      <div class="rp-box">
        <div>
          <progressBar :width="(value.rain / maxBox) * 100 ? (value.rain / maxBox) * 100 : 0" :iconType="3"
            :backgroundColorBox="'rgba(255, 255, 255, 0.1)'"
            :backgroundColorInner="'linear-gradient(270deg, #06C7ED 0%, rgba(55,145,255,0.76) 100%)'" />
        </div>

      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import progressBar from '../../../components/progressBar/index.vue';
import { defineEmits } from 'vue';
import { any, number } from 'vue-types';
const emit = defineEmits(['alertSome']);
function upSwitch(key, value) {
  emit('subIsSwitch');
  if (key) {
    let obj = {};
    obj.value = value;
    obj.key = key;
    emit('activeRainfallData', obj);
  }
}
const props = defineProps({
  dataObj: { type: Object, default: {} },
  maxBox: { type: any, default: 0 },
});
</script>
<style lang="less" scoped>
.rainfall-partition {
  // height: 24vh;
  height: 210px;
  overflow-y: auto;
  // margin: 0 10px;
  padding-bottom: 5px
}

.rp-list {
  margin-top: 7px;
  cursor: pointer;
}

.rp-title {
  color: rgba(255, 255, 255, 0.87);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.rp-box {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-left: 10px;
  color: #fff;
  div:nth-child(1) {
    width: 310px;
  }

  div:nth-child(2) {
    margin-top: -8px;
    color: #ffffff;
    font-size: 16px;
    margin-right: 10px;
  }
}
</style>