|
|
@@ -192,7 +192,7 @@ onActivated(()=>{
|
|
|
@listOnload="onLoad"
|
|
|
>
|
|
|
<div class="flex list-wrap">
|
|
|
- <div class="video-item" v-for="item in listState.list" :key="item.community_video_id">
|
|
|
+ <div class="flex video-item" v-for="item in listState.list" :key="item.community_video_id">
|
|
|
<el-popover
|
|
|
:width="200"
|
|
|
trigger="click"
|
|
|
@@ -205,6 +205,7 @@ onActivated(()=>{
|
|
|
</template>
|
|
|
</el-popover>
|
|
|
<div class="title">{{item.title}}</div>
|
|
|
+ <div>
|
|
|
<video
|
|
|
:src="item.video_url"
|
|
|
controls
|
|
|
@@ -217,7 +218,10 @@ onActivated(()=>{
|
|
|
></video>
|
|
|
<div v-else class="poster-img" :style="'background-image:url('+item.cover_img_url+')'" @click="handelClickPlay(item)"></div>
|
|
|
<div class="time">发布时间：{{item.publish_time}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="last-add-item"></div>
|
|
|
+ <div class="last-add-item"></div>
|
|
|
</div>
|
|
|
</SelfList>
|
|
|
</div>
|
|
|
@@ -302,20 +306,24 @@ onActivated(()=>{
|
|
|
|
|
|
.list-wrap{
|
|
|
padding-top: 150px;
|
|
|
- border-left: 1px solid #E2E2E2;
|
|
|
- border-right: 1px solid #E2E2E2;
|
|
|
+ // border-left: 1px solid #E2E2E2;
|
|
|
+ // border-right: 1px solid #E2E2E2;
|
|
|
+ justify-content: center;
|
|
|
flex-wrap: wrap;
|
|
|
.video-item{
|
|
|
- width: 50%;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 410px;
|
|
|
padding: 30px;
|
|
|
- border-bottom: 1px solid #E2E2E2;
|
|
|
+ border: 1px solid #E2E2E2;
|
|
|
position: relative;
|
|
|
- &:nth-of-type(odd){
|
|
|
- border-right: 1px solid #E2E2E2;
|
|
|
- }
|
|
|
+ // &:nth-of-type(odd){
|
|
|
+ // border-right: 1px solid #E2E2E2;
|
|
|
+ // }
|
|
|
.title{
|
|
|
font-size: 16px;
|
|
|
color: #666;
|
|
|
+ padding-right: 26px;
|
|
|
}
|
|
|
video{
|
|
|
width: 100%;
|
|
|
@@ -348,6 +356,10 @@ onActivated(()=>{
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
+ .last-add-item{
|
|
|
+ width: 410px;
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
