ylrz_his_scrm_companyUI/src/components/H5/h5-countdown.vue

<template>
  <div :class="config.classText.join(' ')">
      <div class="countdown2-box"
           :style="{ backgroundImage: config.bgImage && config.bgImage !== '#' ? `url(${config.bgImage})` : '' }"
      >
        距结束<span id="days" :style="{background: config.mainColor}">{{ config.days }}</span>天
        <span id="hours" :style="{background: config.mainColor}">{{ config.hours }}</span>时
        <span id="minutes" :style="{background: config.mainColor}">{{ config.minutes }}</span>分
        <span id="seconds" :style="{background: config.mainColor}">{{ config.seconds }}</span>秒
      </div>
  </div>
</template>

<script>

export default {
  name: 'h5-countdown',
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          days: 'x',
          hours: 'x',
          minutes: 'x',
          seconds: 'x',
          classText: ['active'],
          bgImage: '#',
          mainColor:''
        }
      }
    }
  },
  watch:{
    'config.bgImage':{
      handler(val){
        console.info('bgImage change:',val)
      },
      deep:true
    }
  },
  created() {
    console.info('h5-text loaded:', this.config)
  }
}
</script>
<style src="./css/base.css"></style>
<style lang="scss" scoped>
p {
  white-space: pre-line;
}

.active {
  border-color: #02ff9b;
}

.countdown2-box {
  background: url('#') no-repeat center;
  background-size: 100%;
  width: 100%;
  height: 54px;
  line-height: 54px;
  color: #515A6E;
  font-size: 14px;
  text-align: center;
}

.countdown2-box span {
  display: inline-block;
  color: #fff;
  width: 22px;
  line-height: 20px;
  text-align: center;
  height: 20px;
  border-radius: 3px;
  margin: 7px;
  background: #FF5A29;
}
</style>