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%;