deming/components/index/video-item/index.vue
2020-06-02 15:37:01 +08:00

97 lines
2.1 KiB
Vue

<template>
<view class="video-item">
<image class="head">
</image>
<view class="title" v-if="!isguanzhu">这是标题这是标题这是标题</view>
<view class="jianjie">这是简介这是简介这是简介</view>
<view class="user">
<view>
<image></image>
<text>这是名字</text>
</view>
<image></image>
</view>
</view>
</template>
<style lang="scss" scoped>
.video-item{
margin-top: 20rpx;
width: 335rpx;
box-shadow:0 3rpx 7rpx 0 rgba(153, 153, 153, 0.35);
padding-bottom: 20rpx;
border-radius: 20rpx;
overflow: hidden;
.head{
width: 100%;
height: 334rpx;
}
.title{
margin:0 auto;
margin-top: 20rpx;
font-size: 22rpx;
color: #333;
font-weight: 500;
line-height: 30rpx;
width: 307rpx;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.jianjie{
margin:0 auto;
margin-top: 20rpx;
font-size: 22rpx;
color: #666;
line-height: 30rpx;
width: 307rpx;
margin-left: 18rpx;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.user{
display: flex;
justify-content: space-between;
align-items: center;
margin:0 auto;
margin-top: 20rpx;
width: 307rpx;
>view{
display: flex;
align-items: center;
>image{
width: 38rpx;
height: 38rpx;
border-radius: 50%;
}
>text{
font-size: 20rpx;
color:#333;
margin-left: 9rpx;
}
}
>image{
width: 37rpx;
height: 8rpx;
}
}
}
</style>
<script>
export default {
name:"index-item",
data(){
return {
}
},
props:["isguanzhu"]
}
</script>