150 lines
2.6 KiB
Vue
150 lines
2.6 KiB
Vue
<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>
|