jingheng_H5/pagesA/themes/default/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"
    >
		<image class="bofang" :src="event_rul + '/static/images/bl/bofang-ic.png'" mode="widthFix"></image>
      
      <image
        class="themes-live-bg"
        :src="item.coverimg"
        mode="aspectFill"
      ></image>
	  <view class="notice position-a">
	  	<swiper
	  	  class="swiper-box"
	  	  vertical="true"
	  	  autoplay="true"
	  	  circular="true"
	  	  :indicator-dots="false"
	  	  :auto-play="true"
	  	>
	  	  <swiper-item
	  	    class="swiper-item"
	  	    v-for="(item2, idx) in shopNotice"
	  	    :key="idx"
	  	    @click="goto"
	  	    :data-url="item2.hrefurl"
	  	  >
	  	    <view class="new-cnt">
	  	      <image class="notice-icon" :src="noticeIcon ? noticeIcon:event_rul + '/static/images/df-laba.png'"></image>
	  	      <view class="notice-txt">{{item2.title}}</view>
	  	    </view>
	  	  </swiper-item>
	  	</swiper>
	  </view>
      <view class="live-an-t flex al-item-center j-between position-a">
		<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="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-tx">{{ item.goods.proname }}</text>
         <view class="tx1 flex al-item-center j-between">
			<view class="flex" style="align-items: baseline;">
				<text>¥</text>
				<text class="tx2 font-w">
				  {{item.goods.prosell_price}}
				</text>
			</view>
			<view class="r-btn border-rius-r text-center">
				<text class="iconfont icon-arrow-right"></text>
			</view>
		  </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	var app = getApp();
export default {
  props: {
    shopVideo: {
      type: Array,
      default: function() {
        return [];
      },
    },
	shopNotice: {
	  type: Array,
	  default: function() {
        return [];
      },
	},
	noticeIcon: {
	  type: String,
	  default: '',
	},
  },
  data() {
    return {
		event_rul: app.globalData.event_url,
	};
  },
  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;
  .bofang {
    position: absolute;
    width: 66rpx;
	height: 66rpx;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-70%);
  }

  .themes-live-bg {
    width: 100%;
    height: 400rpx;
    border-radius: 12rpx;
    vertical-align: middle;
  }
  .notice {
	  min-width: 250rpx;
	  height: 48rpx;
	  padding: 4rpx 2;
	  left: 16rpx;
	  top: 20rpx;
	  background-color: rgba(0, 0, 0, 0.4);
	  border-radius: 200rpx;
	  .swiper-box,.swiper-item {
	    // width: 100%;
	    height: 100%;
	  }
     .swiper-box {
		 .swiper-item {
			 
		 }
		 .new-cnt {
		   height: 100%;
		   display: flex;
		   align-items: center;
		   margin: 0 4rpx;
		   .notice-icon {
		     width: 40rpx;
		     height: 40rpx;
		     flex-shrink: 0;
		     margin-right: 12rpx;
		   }
		   .notice-txt {
		     flex: 1;
		     color: #fff;
			 font-size: 24rpx;
		     overflow: hidden;
		     white-space: nowrap;
		     text-overflow: ellipsis;
		   }
		 }
	 }
  }
  .live-an-t {
    // width: 102rpx;
    padding: 4rpx 12rpx;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 8rpx;
    color: #fff;
    left: 16rpx;
    top: 90rpx;
    z-index: 3;

    .live-an-t-l {
      width: 20rpx;
      height: 18rpx;
      margin-left: 4rpx;
      align-items: flex-end;

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

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

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

    .tx-bx {
      min-height: 108rpx;
      padding-left: 16rpx;
      .tx-tl {
        font-size: 24rpx;
      }
      .tx1 {
        padding-top: 6rpx;
        font-size: 20rpx;
      }
      .tx2 {
        font-size: 28rpx;
      }
	  
	  .r-btn {
		  width: 30rpx;
		  height: 30rpx;
		  line-height: 30rpx;
		  background: linear-gradient(153deg, #00AE68 0%, #096742 100%);
		  .icon-arrow-right {
			  font-size: 30rpx;
			  color: #fff;
		  }
	  }
    }
  }
}

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