<template>
  <view
    class="dataItem"
    
    @click="navGetVideo"
  >
    <view
      class="dataItem-header"
    >
      <u--image
        :fade="true"
        :lazy-load="true"
        height="484rpx"
        width="348rpx"
        :src="data.cover"
        duration="50"
        mode="aspectFill"
      />
      <view
        v-if="data.history === 1"
        class="trace flex-center"
      >
        <text class="trace-text">
          你正在追
        </text>
      </view>
      <view class="bottomRight-number">
        <text class="bottomRight-number-text">
          {{ data.new || 0 }}集全 
        </text>
      </view>
    </view>
    <view class="dataItem-bottom px-10 py-16">
      <text class="dataItem-bottom-title mb-16 text-one">
        {{ data.name || '-' }}
      </text>
      <view
        class="flex-row "
        style="align-items: center;"
      >
        <image
          src="@/static/icon/pursue.png"
          class="chase mr-8"
          mode="aspectFit"
        />
        <view class="flex-1">
          <view class="remake text-one">
            {{ data.description || '-' }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
	props:{
		data:{
			type:Object,
			default:()=>{
				return {};
			}
		},
		
	},
	data() {
		return {};
	},
	methods:{
		navGetVideo(){
			uni.navigateTo({
				url:`/pages/video/index?sid=${this.data.id}`
			});
		}
	}
};
</script>

<style lang="scss">
.dataItem {
	width: 348rpx;
	height: 620rpx;
	background: #ffffff;
	border-radius: 10rpx;
	overflow: hidden;
	.dataItem-header {
		position: relative;
		height: 484rpx;
		width: 348rpx;
	}
	.dataItem-bottom-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #1a1a1a;
	}
	.chase {
		width: 78rpx;
		height: 30rpx;
		
	}
	.chase_text {
		font-size: 20rpx;
		color: #ff779e;
	}
	.remake {
		font-size: 24rpx;
		color: #666666;
	}
	.trace {
		position: absolute;
		top: 0;
		left: 0;
		width: 116rpx;
		height: 48rpx;
		background: linear-gradient(134deg, #ffa077 0%, #ff5722 100%);
		border-radius: 10rpx 0px 10rpx 0px;
		.trace-text {
			font-size: 22rpx;
			color: #ffffff;
		}
	}
	.bottomRight-number {
		padding: 20rpx 10rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		.bottomRight-number-text {
			font-size: 24rpx;
			color: #ffffff;
			text-shadow: 0px 0px 4rpx rgba(0,0,0,0.25);
		}
	}
	.update {
		position: absolute;
		top: 0;
		right: 0;
		width: 88rpx;
		height: 48rpx;
		background: linear-gradient(134deg, #ffde88 0%, #ffa24d 100%);
		border-radius: 0px 10rpx 0px 10rpx;
		.update-text {
			font-size: 22rpx;
			color: #563a0f;
			
		}
	}
}
</style>
