|  | @@ -1,184 +1,278 @@
 | 
	
		
			
				|  |  |  <template>
 | 
	
		
			
				|  |  | -    <div class="dzCard">
 | 
	
		
			
				|  |  | -        <div class="gas-box">
 | 
	
		
			
				|  |  | -            <div class="gas-item">
 | 
	
		
			
				|  |  | -                <div class="detail-box">
 | 
	
		
			
				|  |  | -                    <div class="detail-container">
 | 
	
		
			
				|  |  | -                        <div class="detail-item" v-for="(item, index) in infoData.dataOn" :key="index">
 | 
	
		
			
				|  |  | -                            <div class="item-box">
 | 
	
		
			
				|  |  | -                                <div class="item-box-label">{{ titleLeft.address }}</div>
 | 
	
		
			
				|  |  | -                                <div class="item-box-val">{{ item.value1 || '-' }}</div>
 | 
	
		
			
				|  |  | -                            </div>
 | 
	
		
			
				|  |  | -                            <div class="item-box">
 | 
	
		
			
				|  |  | -                                <div class="item-box-label">{{ titleLeft.gradewarn }}</div>
 | 
	
		
			
				|  |  | -                                <div class="item-box-val">{{ item.warnLevel || '-' }}</div>
 | 
	
		
			
				|  |  | -                            </div>
 | 
	
		
			
				|  |  | -                            <div class="item-box">
 | 
	
		
			
				|  |  | -                                <div class="item-box-label">{{ titleLeft.smoke }}</div>
 | 
	
		
			
				|  |  | -                                <div class="item-box-val">{{ item.smokeJd || '-' }}</div>
 | 
	
		
			
				|  |  | -                            </div>
 | 
	
		
			
				|  |  | -                        </div>
 | 
	
		
			
				|  |  | -                    </div>
 | 
	
		
			
				|  |  | -                </div>
 | 
	
		
			
				|  |  | +  <div :class="props.deviceType == 'fireWarnInfo' ? 'dzCard1' : 'dzCard'">
 | 
	
		
			
				|  |  | +    <div class="gas-box">
 | 
	
		
			
				|  |  | +      <div class="gas-item">
 | 
	
		
			
				|  |  | +        <div class="detail-box">
 | 
	
		
			
				|  |  | +          <div class="detail-container">
 | 
	
		
			
				|  |  | +            <div class="detail-item" v-for="(item, index) in infoData.dataOn" :key="index">
 | 
	
		
			
				|  |  | +              <div class="item-box">
 | 
	
		
			
				|  |  | +                <div class="item-box-label">{{ titleLeft.address }}</div>
 | 
	
		
			
				|  |  | +                <div class="item-box-val">{{ item.value1 || '-' }}</div>
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  | +              <div class="item-box">
 | 
	
		
			
				|  |  | +                <div class="item-box-label">{{ titleLeft.gradewarn }}</div>
 | 
	
		
			
				|  |  | +                <div class="item-box-val">{{ item.warnLevel || '-' }}</div>
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  | +              <div class="item-box">
 | 
	
		
			
				|  |  | +                <div class="item-box-label">{{ titleLeft.smoke }}</div>
 | 
	
		
			
				|  |  | +                <div class="item-box-val">{{ item.smokeJd || '-' }}</div>
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  |              </div>
 | 
	
		
			
				|  |  | -            <div class="gas-item">
 | 
	
		
			
				|  |  | -                <div class="detail-box">
 | 
	
		
			
				|  |  | -                    <div class="detail-container">
 | 
	
		
			
				|  |  | -                        <div class="detail-item">
 | 
	
		
			
				|  |  | -                            <div class="item-box1">
 | 
	
		
			
				|  |  | -                                <div class="item-box-label">{{ titleRight.temp }}</div>
 | 
	
		
			
				|  |  | -                                <div class="item-box-val1">{{ infoData.tempVal }}</div>
 | 
	
		
			
				|  |  | -                            </div>
 | 
	
		
			
				|  |  | -                            <div class="item-box1">
 | 
	
		
			
				|  |  | -                                <div class="item-box-label">{{ titleRight.smokeing }}</div>
 | 
	
		
			
				|  |  | -                                <div class="item-box-val1">{{ infoData.smokeVal }}</div>
 | 
	
		
			
				|  |  | -                            </div>
 | 
	
		
			
				|  |  | -                            <div class="item-box1">
 | 
	
		
			
				|  |  | -                                <div class="item-box-label">{{ titleRight.fire }}</div>
 | 
	
		
			
				|  |  | -                                <div class="item-box-val1">{{ infoData.fireVal }}</div>
 | 
	
		
			
				|  |  | -                            </div>
 | 
	
		
			
				|  |  | -                            <div class="item-box1">
 | 
	
		
			
				|  |  | -                                <div class="item-box-label">{{ titleRight.comax }}</div>
 | 
	
		
			
				|  |  | -                                <div class="item-box-val1">{{ infoData.coVal }}</div>
 | 
	
		
			
				|  |  | -                            </div>
 | 
	
		
			
				|  |  | -                        </div>
 | 
	
		
			
				|  |  | -                    </div>
 | 
	
		
			
				|  |  | -                </div>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +      <div class="gas-item">
 | 
	
		
			
				|  |  | +        <div class="detail-box">
 | 
	
		
			
				|  |  | +          <div class="detail-container">
 | 
	
		
			
				|  |  | +            <div class="detail-item">
 | 
	
		
			
				|  |  | +              <div class="item-box1">
 | 
	
		
			
				|  |  | +                <div class="item-box-label">{{ titleRight.temp }}</div>
 | 
	
		
			
				|  |  | +                <div class="item-box-val1">{{ infoData.tempVal }}</div>
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  | +              <div class="item-box1">
 | 
	
		
			
				|  |  | +                <div class="item-box-label">{{ titleRight.smokeing }}</div>
 | 
	
		
			
				|  |  | +                <div class="item-box-val1">{{ infoData.smokeVal }}</div>
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  | +              <div class="item-box1">
 | 
	
		
			
				|  |  | +                <div class="item-box-label">{{ titleRight.fire }}</div>
 | 
	
		
			
				|  |  | +                <div class="item-box-val1">{{ infoData.fireVal }}</div>
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  | +              <div class="item-box1">
 | 
	
		
			
				|  |  | +                <div class="item-box-label">{{ titleRight.comax }}</div>
 | 
	
		
			
				|  |  | +                <div class="item-box-val1">{{ infoData.coVal }}</div>
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  |              </div>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  |          </div>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  |      </div>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  |  </template>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  <script lang="ts" setup>
 | 
	
		
			
				|  |  | -import { ref, reactive, watch } from 'vue'
 | 
	
		
			
				|  |  | +import { ref, reactive, watch } from 'vue';
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  let props = defineProps({
 | 
	
		
			
				|  |  | -    titleLeft: {
 | 
	
		
			
				|  |  | -        type: Object,
 | 
	
		
			
				|  |  | -        default: () => {
 | 
	
		
			
				|  |  | -            return {}
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | +  titleLeft: {
 | 
	
		
			
				|  |  | +    type: Object,
 | 
	
		
			
				|  |  | +    default: () => {
 | 
	
		
			
				|  |  | +      return {};
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | -    titleRight: {
 | 
	
		
			
				|  |  | -        type: Object,
 | 
	
		
			
				|  |  | -        default: () => {
 | 
	
		
			
				|  |  | -            return {}
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  titleRight: {
 | 
	
		
			
				|  |  | +    type: Object,
 | 
	
		
			
				|  |  | +    default: () => {
 | 
	
		
			
				|  |  | +      return {};
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | -    paramData: {
 | 
	
		
			
				|  |  | -        type: Object,
 | 
	
		
			
				|  |  | -        default: () => {
 | 
	
		
			
				|  |  | -            return {}
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -})
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  paramData: {
 | 
	
		
			
				|  |  | +    type: Object,
 | 
	
		
			
				|  |  | +    default: () => {
 | 
	
		
			
				|  |  | +      return {};
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  deviceType: {
 | 
	
		
			
				|  |  | +    type: String,
 | 
	
		
			
				|  |  | +    default: '',
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +});
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -let infoData = reactive({})
 | 
	
		
			
				|  |  | +let infoData = reactive({});
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -watch(() => props.paramData, (newV, oldV) => {
 | 
	
		
			
				|  |  | -    infoData = Object.assign({}, newV)
 | 
	
		
			
				|  |  | -}, { immediate: true })
 | 
	
		
			
				|  |  | +watch(
 | 
	
		
			
				|  |  | +  () => props.paramData,
 | 
	
		
			
				|  |  | +  (newV, oldV) => {
 | 
	
		
			
				|  |  | +    infoData = Object.assign({}, newV);
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  { immediate: true }
 | 
	
		
			
				|  |  | +);
 | 
	
		
			
				|  |  |  </script>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  <style lang="less" scoped>
 | 
	
		
			
				|  |  |  @import '/@/design/theme.less';
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  @{theme-deepblue} {
 | 
	
		
			
				|  |  | -    .dzCard {
 | 
	
		
			
				|  |  | -        --image-model_gas_item: url('@/assets/images/themify/deepblue/home-container/configurable/900.png');
 | 
	
		
			
				|  |  | -        --image-model_gas_item1: url('@/assets/images/themify/deepblue/home-container/configurable/1100.png');
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | +  .dzCard {
 | 
	
		
			
				|  |  | +    --image-model_gas_item: url('@/assets/images/themify/deepblue/home-container/configurable/900.png');
 | 
	
		
			
				|  |  | +    --image-model_gas_item1: url('@/assets/images/themify/deepblue/home-container/configurable/1100.png');
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  .dzCard {
 | 
	
		
			
				|  |  | -    --image-model_gas_item: url('@/assets/images/home-green/900.png');
 | 
	
		
			
				|  |  | -    --image-model_gas_item1: url('@/assets/images/home-green/1100.png');
 | 
	
		
			
				|  |  | -    width: 100%;
 | 
	
		
			
				|  |  | -    height: 72%;
 | 
	
		
			
				|  |  | -    position: absolute;
 | 
	
		
			
				|  |  | -    left: 0;
 | 
	
		
			
				|  |  | -    top: 86px;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    .gas-box {
 | 
	
		
			
				|  |  | -        display: flex;
 | 
	
		
			
				|  |  | -        justify-content: center;
 | 
	
		
			
				|  |  | +  --image-model_gas_item: url('@/assets/images/home-green/900.png');
 | 
	
		
			
				|  |  | +  --image-model_gas_item1: url('@/assets/images/home-green/1100.png');
 | 
	
		
			
				|  |  | +  --image-model_fire_item: url('@/assets/images/home-warn/4-2.png');
 | 
	
		
			
				|  |  | +  width: 100%;
 | 
	
		
			
				|  |  | +  height: 72%;
 | 
	
		
			
				|  |  | +  position: absolute;
 | 
	
		
			
				|  |  | +  left: 0;
 | 
	
		
			
				|  |  | +  top: 86px;
 | 
	
		
			
				|  |  | +  .gas-box {
 | 
	
		
			
				|  |  | +    display: flex;
 | 
	
		
			
				|  |  | +    justify-content: center;
 | 
	
		
			
				|  |  | +    height: 100%;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    .gas-item {
 | 
	
		
			
				|  |  | +      position: relative;
 | 
	
		
			
				|  |  | +      width: 50%;
 | 
	
		
			
				|  |  | +      height: 100%;
 | 
	
		
			
				|  |  | +      margin: 0px 5px;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      &:nth-child(1) {
 | 
	
		
			
				|  |  | +        background: var(--image-model_gas_item) no-repeat;
 | 
	
		
			
				|  |  | +        background-size: 100% 100%;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      &:nth-child(2) {
 | 
	
		
			
				|  |  | +        background: var(--image-model_gas_item1) no-repeat;
 | 
	
		
			
				|  |  | +        background-size: 100% 100%;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      .detail-box {
 | 
	
		
			
				|  |  | +        position: relative;
 | 
	
		
			
				|  |  | +        height: 100%;
 | 
	
		
			
				|  |  | +        padding-top: 68px;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .detail-container {
 | 
	
		
			
				|  |  | +          height: 100%;
 | 
	
		
			
				|  |  | +          overflow-y: auto;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          .detail-item {
 | 
	
		
			
				|  |  | +            width: 100%;
 | 
	
		
			
				|  |  | +            height: 100%;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            .item-box {
 | 
	
		
			
				|  |  | +              width: 100%;
 | 
	
		
			
				|  |  | +              padding: 0px 10px;
 | 
	
		
			
				|  |  | +              height: 60px;
 | 
	
		
			
				|  |  | +              display: flex;
 | 
	
		
			
				|  |  | +              justify-content: space-between;
 | 
	
		
			
				|  |  | +              align-items: center;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            .item-box1 {
 | 
	
		
			
				|  |  | +              width: 100%;
 | 
	
		
			
				|  |  | +              padding: 0px 10px;
 | 
	
		
			
				|  |  | +              height: 42px;
 | 
	
		
			
				|  |  | +              display: flex;
 | 
	
		
			
				|  |  | +              justify-content: space-between;
 | 
	
		
			
				|  |  | +              align-items: center;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            .item-box-label {
 | 
	
		
			
				|  |  | +              flex-shrink: 0;
 | 
	
		
			
				|  |  | +              width: 60px;
 | 
	
		
			
				|  |  | +              font-size: 12px;
 | 
	
		
			
				|  |  | +              text-align: left;
 | 
	
		
			
				|  |  | +              margin-right: 10px;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            .item-box-val {
 | 
	
		
			
				|  |  | +              text-align: right;
 | 
	
		
			
				|  |  | +              color: #b9ffe5;
 | 
	
		
			
				|  |  | +              font-family: 'douyuFont';
 | 
	
		
			
				|  |  | +              font-size: 12px;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            .item-box-val1 {
 | 
	
		
			
				|  |  | +              text-align: right;
 | 
	
		
			
				|  |  | +              color: #b9f1ff;
 | 
	
		
			
				|  |  | +              font-family: 'douyuFont';
 | 
	
		
			
				|  |  | +              font-size: 12px;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.dzCard1 {
 | 
	
		
			
				|  |  | +  --image-model_gas_item: url('@/assets/images/home-green/900.png');
 | 
	
		
			
				|  |  | +  --image-model_gas_item1: url('@/assets/images/home-green/1100.png');
 | 
	
		
			
				|  |  | +  --image-model_fire_item: url('@/assets/images/home-warn/4-2.png');
 | 
	
		
			
				|  |  | +  width: 100%;
 | 
	
		
			
				|  |  | +  height: 72%;
 | 
	
		
			
				|  |  | +  position: absolute;
 | 
	
		
			
				|  |  | +  left: 0;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  .gas-box {
 | 
	
		
			
				|  |  | +    display: flex;
 | 
	
		
			
				|  |  | +    justify-content: center;
 | 
	
		
			
				|  |  | +    height: 100%;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    .gas-item {
 | 
	
		
			
				|  |  | +      position: relative;
 | 
	
		
			
				|  |  | +      width: 50%;
 | 
	
		
			
				|  |  | +      height: 100%;
 | 
	
		
			
				|  |  | +      margin: 0px 5px;
 | 
	
		
			
				|  |  | +      &:nth-child(1) {
 | 
	
		
			
				|  |  | +        background: var(--image-model_fire_item) no-repeat;
 | 
	
		
			
				|  |  | +        background-size: 100% 100%;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      &:nth-child(2) {
 | 
	
		
			
				|  |  | +        background: var(--image-model_fire_item) no-repeat;
 | 
	
		
			
				|  |  | +        background-size: 100% 100%;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      .detail-box {
 | 
	
		
			
				|  |  | +        position: relative;
 | 
	
		
			
				|  |  |          height: 100%;
 | 
	
		
			
				|  |  | +        padding-top: 15px;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .detail-container {
 | 
	
		
			
				|  |  | +          height: 100%;
 | 
	
		
			
				|  |  | +          overflow-y: hidden;
 | 
	
		
			
				|  |  | +          &:hover {
 | 
	
		
			
				|  |  | +            overflow-y: auto;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        .gas-item {
 | 
	
		
			
				|  |  | -            position: relative;
 | 
	
		
			
				|  |  | -            width: 50%;
 | 
	
		
			
				|  |  | +          .detail-item {
 | 
	
		
			
				|  |  | +            width: 100%;
 | 
	
		
			
				|  |  |              height: 100%;
 | 
	
		
			
				|  |  | -            margin: 0px 5px;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -            &:nth-child(1) {
 | 
	
		
			
				|  |  | -                background: var(--image-model_gas_item) no-repeat;
 | 
	
		
			
				|  |  | -                background-size: 100% 100%;
 | 
	
		
			
				|  |  | +            .item-box {
 | 
	
		
			
				|  |  | +              width: 100%;
 | 
	
		
			
				|  |  | +              padding: 0px 10px;
 | 
	
		
			
				|  |  | +              height: 60px;
 | 
	
		
			
				|  |  | +              display: flex;
 | 
	
		
			
				|  |  | +              justify-content: space-between;
 | 
	
		
			
				|  |  | +              align-items: center;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            .item-box1 {
 | 
	
		
			
				|  |  | +              width: 100%;
 | 
	
		
			
				|  |  | +              padding: 0px 10px;
 | 
	
		
			
				|  |  | +              height: 42px;
 | 
	
		
			
				|  |  | +              display: flex;
 | 
	
		
			
				|  |  | +              justify-content: space-between;
 | 
	
		
			
				|  |  | +              align-items: center;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            .item-box-label {
 | 
	
		
			
				|  |  | +              flex-shrink: 0;
 | 
	
		
			
				|  |  | +              width: 60px;
 | 
	
		
			
				|  |  | +              font-size: 12px;
 | 
	
		
			
				|  |  | +              text-align: left;
 | 
	
		
			
				|  |  | +              margin-right: 10px;
 | 
	
		
			
				|  |  |              }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -            &:nth-child(2) {
 | 
	
		
			
				|  |  | -                background: var(--image-model_gas_item1) no-repeat;
 | 
	
		
			
				|  |  | -                background-size: 100% 100%;
 | 
	
		
			
				|  |  | +            .item-box-val {
 | 
	
		
			
				|  |  | +              text-align: right;
 | 
	
		
			
				|  |  | +              color: #c0fbff;
 | 
	
		
			
				|  |  | +              font-family: 'douyuFont';
 | 
	
		
			
				|  |  | +              font-size: 12px;
 | 
	
		
			
				|  |  |              }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -            .detail-box {
 | 
	
		
			
				|  |  | -                position: relative;
 | 
	
		
			
				|  |  | -                height: 100%;
 | 
	
		
			
				|  |  | -                padding-top: 68px;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                .detail-container {
 | 
	
		
			
				|  |  | -                    height: 100%;
 | 
	
		
			
				|  |  | -                    overflow-y: auto;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                    .detail-item {
 | 
	
		
			
				|  |  | -                        width: 100%;
 | 
	
		
			
				|  |  | -                        height: 100%;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        .item-box {
 | 
	
		
			
				|  |  | -                            width: 100%;
 | 
	
		
			
				|  |  | -                            padding: 0px 10px;
 | 
	
		
			
				|  |  | -                            height: 60px;
 | 
	
		
			
				|  |  | -                            display: flex;
 | 
	
		
			
				|  |  | -                            justify-content: space-between;
 | 
	
		
			
				|  |  | -                            align-items: center;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        .item-box1 {
 | 
	
		
			
				|  |  | -                            width: 100%;
 | 
	
		
			
				|  |  | -                            padding: 0px 10px;
 | 
	
		
			
				|  |  | -                            height: 42px;
 | 
	
		
			
				|  |  | -                            display: flex;
 | 
	
		
			
				|  |  | -                            justify-content: space-between;
 | 
	
		
			
				|  |  | -                            align-items: center;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        .item-box-label {
 | 
	
		
			
				|  |  | -                            flex-shrink: 0;
 | 
	
		
			
				|  |  | -                            width: 60px;
 | 
	
		
			
				|  |  | -                            font-size: 12px;
 | 
	
		
			
				|  |  | -                            text-align: left;
 | 
	
		
			
				|  |  | -                            margin-right: 10px;
 | 
	
		
			
				|  |  | -                        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        .item-box-val {
 | 
	
		
			
				|  |  | -                            text-align: right;
 | 
	
		
			
				|  |  | -                            color: #b9ffe5;
 | 
	
		
			
				|  |  | -                            font-family: 'douyuFont';
 | 
	
		
			
				|  |  | -                            font-size: 12px;
 | 
	
		
			
				|  |  | -                        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        .item-box-val1 {
 | 
	
		
			
				|  |  | -                            text-align: right;
 | 
	
		
			
				|  |  | -                            color: #b9f1ff;
 | 
	
		
			
				|  |  | -                            font-family: 'douyuFont';
 | 
	
		
			
				|  |  | -                            font-size: 12px;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                        }
 | 
	
		
			
				|  |  | -                    }
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | +            .item-box-val1 {
 | 
	
		
			
				|  |  | +              text-align: right;
 | 
	
		
			
				|  |  | +              color: #53f696;
 | 
	
		
			
				|  |  | +              font-family: 'douyuFont';
 | 
	
		
			
				|  |  | +              font-size: 12px;
 | 
	
		
			
				|  |  |              }
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  </style>
 |