shop-applet/components/WaterfallsFlowItemSupply/WaterfallsFlowItems.vue

121 lines
1.9 KiB
Vue
Raw Permalink Normal View History

2023-11-04 09:32:32 +08:00
<template>
<view class="wf-item-page">
<view class='pictrue'>
<!-- <image :src="item.image[0]" mode="widthFix" class="item-img" /> -->
<image :src="item.image[0]" mode="aspectFill" class="item-img"></image>
<!-- <easy-loadimage mode="widthFix" :image-src="item.image[0]"></easy-loadimage> -->
</view>
<view class="goods_item_img" v-if="item.video_link.length>0">
<image src="@/static/images/sp.png" mode="aspectFit"></image>
</view>
<view class="title">{{item.title}}</view>
<view class="item-info">
<image :src="(item.author && item.author.avatar) || '/static/images/f.png'" mode="aspectFit"
class="info-avatar" />
<view class="info-nickname">{{ item.author.nickname }}</view>
</view>
</view>
</template>
<script>
import {
string
} from '../../plugin/clipboard/clipboard'
export default {
props: {
item: {
type: Object,
require: true
},
heightx: {
type: string,
require: true
}
},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.wf-item-page {
background: #fff;
overflow: hidden;
border-radius: 5px;
position: relative;
}
.pictrue {
width: 100% !important;
height: 345rpx;
image{
width: 100% ;
height: 345rpx;
}
}
.item-info {
display: flex;
align-items: center;
padding: 5px;
}
.goods_item_img {
position: absolute;
top: 20rpx;
right: 18rpx;
width: 52rpx;
height: 52rpx;
z-index: 1 !important;
image {
width: 100%;
height: 100%;
}
}
.title {
font-size: 30rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
margin: 12px 0;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding: 0 5px;
}
.info-avatar {
width: 49rpx;
height: 49rpx;
border-radius: 50%;
margin-right: 5px;
}
.info-nickname {
font-size: 12px;
color: #333;
}
</style>