jingheng_H5/pagesA/themes/haiNaBaiXian/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"
    >
      <view class="bofang-box">
        <text class="iconfont icon-bofang"></text>
      </view>
      <image
        class="themes-live-bg"
        :src="item.coverimg"
        mode="aspectFill"
      ></image>
      <view class="themes-live__content position-a">
        <view class="themes-live__note">
          <themes-vip
            v-if="shopNotice.length != 0"
            :shopNotice="shopNotice"
            :noticeIcon="shopData.noticeIcon"
          ></themes-vip>
        </view>
        <view class="live-an-t flex al-item-center j-between">
          <view class="live-an-t-l-r">{{
            formatSeconds(Number(item.video_duration)) || "00:00"
          }}</view>
          <view class="live-an-t-l flex j-between">
            <text class="heng1"></text>
            <text class="heng2"></text>
            <text class="heng3"></text>
          </view>
        </view>
        <view class="goods flex al-item-center position-a" v-if="item.hasOwnProperty('goods')">
          <image
            class="goods-img"
            :src="item.goods.propic"
            mode="aspectFill"
          ></image>
          <view class="goods-bd flex1 overflow-hd flex flex-colum j-between">
            <text class="goods-title text-overflow-line">{{ item.goods.proname }}</text>
            <view class="goods-bot flex al-item-center">
              <view class="goods-price">
                ¥<text class="goods-price__num font-w">{{
                item.goods.prosell_price
              }}</text>
              </view>
              <view class="goods-more"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import themesVip from "./themes-vip.vue";
export default {
  components: {
    themesVip
  },
  props: {
    shopVideo: {
      type: Array,
      default: function() {
        return [];
      },
    },
    noticeIcon: {
      type: String,
      default: '',
    },
    shopNotice: {
      type: Array,
      default: function() {
        return [];
      },
    },
  },
  data() {
    return {
      shopData:{},
    };
  },
  mounted() {
    uni.getStorage({
      key: "header_data",
      success: function(res){
          this.shopData = res.data;
      },
    })
  },
  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;
  .bofang-box {
    top: 50%;
    left: 50%;
    width: 66rpx;
    height: 66rpx;
    position: absolute;
    background: rgba($color: #000000, $alpha: 0.5);
    transform: translateX(-50%) translateY(-70%);
    border-radius: 50%;
  }
  .icon-bofang {
    position: absolute;
    color: #FFF;
    font-size: 30rpx;
    left: 50%;
    top: 50%;
    transform: translateX(-45%) translateY(-50%);
  }

  .themes-live-bg {
    width: 100%;
    height: 400rpx;
    border-radius: 12rpx;
    vertical-align: middle;
  }
  .themes-live__content {
    top: 22rpx;
    left: 16rpx;
    bottom: 16rpx;
  }
  .live-an-t {
    margin-top: 10rpx;
    display: inline-flex;
    align-items: center;
    background: linear-gradient(to right, #ff841a 0%, #ff640a 100%);
    padding: 0 6rpx;
    border-radius: 4rpx;

    .live-an-t-l {
     align-items: flex-end;
      height: 30rpx;
      padding: 6rpx 0;

      .heng1,
      .heng2,
      .heng3 {
        display: block;
        width: 4rpx;
        border-radius: 4rpx;
        margin-right: 3rpx;
        background-color: #fff;
      }
      .heng1 {
        height: 18rpx;
        animation: hengos .8s linear infinite;
      }
      .heng2 {
        height: 8rpx;
        animation: hengts .8s linear  infinite;
      }
      .heng3 {
        height: 18rpx;
        animation: henghs .8s linear .2s infinite;
        margin-right: 0;
      }
    }
    .live-an-t-l-r {
      font-size: 20rpx;
      color: #FFFFFF;
      line-height: 30rpx;
      margin-right: 4rpx;
    }
  }

  .goods {
    width: 360rpx;
    height: 138rpx;
    padding: 12rpx 12rpx 8rpx 12rpx;
    box-sizing: border-box;
    border-radius: 12rpx;
    background-color: #fff;
    left: 0;
    bottom: 0;

    &-img {
      width: 118rpx;
      height: 118rpx;
      flex-shrink: 0;
      border-radius: 10rpx;
    }

    &-bd {
      padding-left: 12rpx;
      color: #333333;
    }
    &-title {
      font-size: 26rpx;
      line-height: 36rpx;
      min-height: 72rpx;
    }
  
    &-bot {
      justify-content: space-between;
    }
    &-price {
      font-size: 22rpx;
      font-weight: 500;
      color: #333333;
      line-height: 32rpx;
      &__num {
        margin-left: 4rpx;
        font-size: 30rpx;
        line-height: 44rpx;
      }
    }
    &-more {
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      background: linear-gradient(323deg, #5487D7 0%, #269DD1 100%);
      position: relative;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 12rpx;
        height: 12rpx;
        border-top: 1rpx solid #FFFFFF;
        border-right: 1rpx solid #FFFFFF;
        transform: rotate(45deg) translateY(-72%);
      }
    }
  }
}

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