e-video - 视频列表副本.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <view>
  3. <view class="videoList">
  4. <view class="title">{{videoList[0].title}}</view>
  5. <view class="list">
  6. <view class="item" v-for="item in videoList" :key="item.id">
  7. <view class="name">{{item.videoName}}</view>
  8. <view class="icon" @click="detail(item.videoUrl,item.videoName)">
  9. <uni-icons type="videocam" size="24" color="#009FE8"></uni-icons>
  10. </view>
  11. </view>
  12. </view>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. props:[
  19. "videoList"
  20. ],
  21. data() {
  22. return {
  23. };
  24. },
  25. methods:{
  26. detail(path,name){
  27. console.log(path)
  28. uni.navigateTo({
  29. url:"../../index/record/record-video/record-video?name=" + name + "&url=" + path
  30. })
  31. }
  32. }
  33. }
  34. </script>
  35. <style lang="scss">
  36. .videoList{
  37. .title{
  38. line-height: 30px;
  39. border-left: 4px solid #009FE8;
  40. border-radius: 4px;
  41. padding-left: 10px;
  42. margin-bottom: 10px;
  43. }.list{
  44. .item{
  45. padding: 20rpx 25rpx;
  46. border-bottom: 1rpx solid #f4f4f4;
  47. display: flex;
  48. justify-content: space-between;
  49. .name{
  50. white-space: nowrap;
  51. overflow: hidden;
  52. text-overflow:ellipsis;
  53. }
  54. .icon{
  55. padding-left: 50rpx;
  56. }
  57. }
  58. }
  59. }
  60. </style>