jingheng_H5/pagesA/themes/hongFuQiTian/components/themes-live.vue

<template>
  <view class="themes-live position-r">
    <view
      v-for="(item, index) in shopVideo"
      :key="index"
      @click="goto"
      :data-url="'/activity/shortvideo/detail?id=' + item.videoId"
    >
      <text class="iconfont icon-bofang"></text>
      <image
        class="themes-live-bg"
        :src="item.coverimg"
        mode="aspectFill"
      ></image>
      <view class="live-an-t flex al-item-center j-between position-a">
        <view class="live-an-t-l flex j-between">
          <text class="heng1"></text>
          <text class="heng2"></text>
          <text class="heng3"></text>
        </view>
        <view class="live-an-t-l-r">{{
          formatSeconds(Number(item.video_duration)) || "00:00"
        }}</view>
      </view>
      <view class="live-s-t position-a flex al-item-center" v-if="item.hasOwnProperty('goods')">
        <image
          class="s-t-img"
          :src="item.goods.propic"
          mode="aspectFill"
        ></image>
        <view class="tx-bx flex1 overflow-hd flex flex-colum j-between">
          <text class="tx-tl text-overflow-line">{{ item.goods.proname }}</text>
          <text class="tx1 flex"
            >¥<text class="tx2 font-w">{{
              item.goods.prosell_price
            }}</text></text
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    shopVideo: {
      type: Array,
      default: function() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    formatSeconds(time){
				let newTime,hour,minite,seconds;
				if(time >= 3600){
				hour = parseInt(time/3600) < 10 ? '0' + parseInt(time/3600) : parseInt(time/3600);
				minite = parseInt(time%3600/60) < 10 ? '0' + parseInt(time%3600/60):parseInt(time%3600/60);
				seconds = time%3600%60 < 10 ? '0' + Math.round(time%3600%60) : Math.round(time%3600%60);
				newTime = hour + ':' + minite + ':' + seconds;
				}else if(time >= 60 && time < 3600){
				minite = parseInt(time/60) < 10 ? '0' + parseInt(time/60) : parseInt(time/60);
				seconds = time%60 < 10 ? '0' + Math.round(time%60) : Math.round(time%60);
				newTime = minite + ':' + seconds;  
				}else if(time < 60 ){
				seconds = time < 10 ? '0' + Math.round(time) : Math.round(time);
				newTime = '00:'+ seconds;
				}
				return newTime;
			},
  },
};
</script>

<style lang="scss" scoped>
.themes-live {
  margin-top: 30rpx;
  .icon-bofang {
    position: absolute;
    font-size: 130rpx;
    left: 50%;
    top: 50%;
    color: rgba(255, 255, 255, 0.6);
    transform: translateX(-50%) translateY(-70%);
  }

  .themes-live-bg {
    width: 100%;
    height: 400rpx;
    border-radius: 12rpx;
    vertical-align: middle;
  }

  .live-an-t {
    // width: 102rpx;
    padding: 4rpx 12rpx;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8rpx;
    color: #fff;
    left: 30rpx;
    top: 30rpx;
    z-index: 3;

    .live-an-t-l {
      width: 24rpx;
      height: 24rpx;
      margin-right: 16rpx;
      align-items: flex-end;

      .heng1,
      .heng2,
      .heng3 {
        width: 4rpx;
        border-radius: 6rpx;
        background-color: #fff;
      }
      .heng1 {
        height: 24rpx;
        animation: hengos 0.8s linear infinite;
      }
      .heng2 {
        height: 10rpx;
        animation: hengts 0.8s linear infinite;
      }
      .heng3 {
        height: 24rpx;
        animation: henghs 0.8s linear 0.2s infinite;
      }
    }
    .live-an-t-r {
      font-size: 24rpx;
    }
  }

  .live-s-t {
    width: 308rpx;
    height: 120rpx;
    padding: 6rpx 16rpx;
    border-radius: 12rpx;
    background-color: #fff;
    left: 15rpx;
    bottom: 15rpx;
    z-index: 3;

    .s-t-img {
      width: 86rpx;
      height: 86rpx;
      border-radius: 12rpx;
    }

    .tx-bx {
      min-height: 43px;
      padding-left: 16rpx;
      .tx-tl {
        font-size: 24rpx;
      }
      .tx1 {
        padding-top: 6rpx;
        font-size: 20rpx;
      }
      .tx2 {
        font-size: 28rpx;
      }
    }
  }
}

@keyframes hengos {
  0% {
    height: 24rpx;
  }
  50% {
    height: 10rpx;
  }
  100% {
    height: 24rpx;
  }
}
@keyframes hengts {
  0% {
    height: 10rpx;
  }
  50% {
    height: 24rpx;
  }
  100% {
    height: 10rpx;
  }
}
@keyframes henghs {
  0% {
    height: 24rpx;
  }
  50% {
    height: 10rpx;
  }
  100% {
    height: 24rpx;
  }
}
</style>