deming/components/index/video-item/index.vue

97 lines
2.1 KiB
Vue
Raw Normal View History

2020-06-02 08:47:57 +08:00
<template>
<view class="video-item">
<image class="head">
</image>
2020-06-02 15:37:01 +08:00
<view class="title" v-if="!isguanzhu">这是标题这是标题这是标题</view>
2020-06-02 09:16:41 +08:00
<view class="jianjie">这是简介这是简介这是简介</view>
2020-06-02 08:47:57 +08:00
<view class="user">
<view>
<image></image>
2020-06-02 09:16:41 +08:00
<text>这是名字</text>
2020-06-02 08:47:57 +08:00
</view>
<image></image>
</view>
</view>
</template>
<style lang="scss" scoped>
.video-item{
margin-top: 20rpx;
width: 335rpx;
2020-06-02 09:16:41 +08:00
box-shadow:0 3rpx 7rpx 0 rgba(153, 153, 153, 0.35);
padding-bottom: 20rpx;
border-radius: 20rpx;
overflow: hidden;
2020-06-02 08:47:57 +08:00
.head{
width: 100%;
height: 334rpx;
}
.title{
2020-06-02 09:16:41 +08:00
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;
2020-06-02 08:47:57 +08:00
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;
2020-06-02 09:16:41 +08:00
2020-06-02 08:47:57 +08:00
}
.user{
2020-06-02 09:16:41 +08:00
display: flex;
justify-content: space-between;
align-items: center;
margin:0 auto;
margin-top: 20rpx;
width: 307rpx;
2020-06-02 08:47:57 +08:00
>view{
display: flex;
align-items: center;
>image{
width: 38rpx;
height: 38rpx;
2020-06-02 09:16:41 +08:00
border-radius: 50%;
2020-06-02 08:47:57 +08:00
}
>text{
font-size: 20rpx;
color:#333;
2020-06-02 09:16:41 +08:00
margin-left: 9rpx;
2020-06-02 08:47:57 +08:00
}
}
>image{
width: 37rpx;
height: 8rpx;
}
}
}
</style>
<script>
export default {
name:"index-item",
data(){
return {
}
2020-06-02 15:37:01 +08:00
},
props:["isguanzhu"]
2020-06-02 08:47:57 +08:00
}
</script>