diff --git a/src/assets/icon/more.png b/src/assets/icon/more.png new file mode 100644 index 0000000..f6d155f Binary files /dev/null and b/src/assets/icon/more.png differ diff --git a/src/assets/icon/play.png b/src/assets/icon/play.png new file mode 100644 index 0000000..d21048f Binary files /dev/null and b/src/assets/icon/play.png differ diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index 2219b77..89d57a3 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -31,11 +31,21 @@ > - + - 风格名称 - 生成时间 + 风格名称 + + 生成时间 + + + + + @@ -47,7 +57,34 @@ - + + + + + + + + 视频名称 + 生成时间 + + + + + + + + + + + @@ -145,7 +182,7 @@ const tabList = ref([ { name: "我的邀请", id: 3 }, { name: "消费记录", id: 4 }, ]); -const showListActive = ref(3); +const showListActive = ref(1); function clickTabHandle(e) { showListActive.value = e.id; } @@ -232,35 +269,131 @@ function clickTabHandle(e) { // 风格列表 .showStyleList { - margin-top: 20rpx; - width: 750rpx; + flex: 1; + overflow: hidden; + margin-top: 30rpx; + width: 690rpx; .showListItem { + margin-top: 10rpx; .top { display: flex; justify-content: space-between; padding: 0 30rpx; + margin-bottom: 20rpx; + .name { + font-weight: 900; + } + .time { + display: inline-block; + font-size: 22rpx; + font-weight: 100; + line-height: 33rpx; + text { + margin-right: 50rpx; + } + .moreBox { + display: inline-block; + width: 8rpx; + height: 33rpx; + image { + vertical-align: top; + width: 100%; + } + } + } } .imgListBox { white-space: nowrap; display: flex; justify-content: space-between; flex-wrap: nowrap; - height: 250rpx; + height: 200rpx; .item { - width: 240rpx; - height: 240rpx; - margin-right: 20rpx; + width: 150rpx; + height: 200rpx; + border-radius: 30rpx; + margin-right: 30rpx; display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 flex-direction: column; align-items: center; .cover { - width: 240rpx; - height: 240rpx; + width: 150rpx; + height: 200rpx; + border-radius: 30rpx; } } } } } +// 视频列表 +.showVideoList { + flex: 1; + overflow: hidden; + margin-top: 30rpx; + width: 690rpx; + padding: 15rpx; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + word-break: keep-all; + .showListItem { + position: relative; + display: inline-block; + width: 330rpx; + height: 440rpx; + background-color: #000; + margin-bottom: 25rpx; + border-radius: 25rpx; + overflow: hidden; + .showImg { + position: absolute; + top: 0; + z-index: 1; + width: 100%; + } + .videoInfo { + position: absolute; + bottom: 0; + width: 100%; + height: 100rpx; + padding: 10rpx 20rpx; + background-color: red; + z-index: 2; + .name { + font-weight: 900; + margin-bottom: 10rpx; + } + .time { + font-size: 22rpx; + font-weight: 100; + } + } + .playIcon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 2; + image { + width: 72rpx; + height: 72rpx; + } + } + .moreBox { + position: absolute; + top: 23rpx; + right: 26rpx; + width: 8rpx; + height: 33rpx; + image { + width: 100%; + } + } + } + .showListItem:nth-child(odd) { + margin-right: 30rpx; + } +} // 邀请列表 .InviteBox { width: 100%;