index.vue

<template>
  <!-- 冬奥会倒计时组件 -->
  <div
    class="wo-timeout flex"
    v-if="endDays > 0"
    :style="{'margin': margin,}"
    >
    <div class="logo flex">
      <div class="img">
        <img
          src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/9462ce53-792c-4607-ab7c-1875bed2d3ba.png"
          alt=""
        />
      </div>
      <div class="img">
        <img
          src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/92ba7c1a-2ab9-4ff9-9ed4-aba4e219ca58.png"
          alt=""
        />
      </div>
    </div>
    <div class="endTime">距北京2022年冬奥会还有 {{ endDays }} 天</div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "wo-timeout",
  props: {
    render: {
      type: Boolean,
      default: false,
    },
    datas: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {};
  },
  components: {},
  computed: {
    horizontalMargin() {
      return this.datas.componentData.horizontalMargin;
    },
    verticalMargin() {
      return this.datas.componentData.verticalMargin;
    },
    endTime() {
      return this.datas.componentData.endTime;
    },
    endDays() {
      let year = new Date().getFullYear();
      let month = (new Date().getMonth() + 1) < 10 ? '0'+(new Date().getMonth() + 1):(new Date().getMonth() + 1);
      let day = new Date().getDate() < 10 ?'0'+new Date().getDate():new Date().getDate();
      let today = `${year}/${month}/${day} 00:00:00`;
      // console.log(today,'------------58')
      // let ts = new Date(this.endTime).getTime() - new Date(today).getTime(); //计算剩余的毫秒数
      let ts = new Date(this.endTime).getTime() - new Date().getTime(); //计算剩余的毫秒数
      console.log(ts,'------60----ts')
      ts = parseInt(ts / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
      console.log(ts,'----------------------59')
      return ts;
    },
    margin(){
      return `${this.verticalMargin}px ${this.horizontalMargin}px`
    },
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.wo-timeout {
  background: linear-gradient(44deg, #ffffff 73%, rgba(77,215,252,0.8902) 100%);
  height: 40px;
  border-radius: 40px;
  overflow: hidden;
  padding: 0 16px;
  align-items: center;
  .logo {
    align-items: center;
    .img {
      flex-shrink: 0;
      width: 26px;
      height: 29px;
      background: #fff;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .img:not(:first-child) {
      margin-left: 6px;
    }
  }
  .endTime {
    margin-left: 16px;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    font-family: PingFangSC-Medium, PingFang SC;
  }
}
</style>