| @@ -31,11 +31,21 @@ | |||
| > | |||
| </view> | |||
| <!-- 显示风格列表内容 --> | |||
| <view v-show="showListActive == 1" class="showStyleList"> | |||
| <scroll-view | |||
| :scroll-y="true" | |||
| v-show="showListActive == 1" | |||
| class="showStyleList" | |||
| > | |||
| <view v-for="item in 7" :key="item" class="showListItem"> | |||
| <view class="top"> | |||
| <text>风格名称</text> | |||
| <text>生成时间</text> | |||
| <text class="name">风格名称</text> | |||
| <view class="time"> | |||
| <text>生成时间</text> | |||
| <!-- 更多 --> | |||
| <view class="moreBox"> | |||
| <image src="../../assets/icon/more.png" mode="widthFix" /> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <scroll-view :scroll-x="true" class="imgListBox"> | |||
| <view v-for="item in 6" :key="item" class="item"> | |||
| @@ -47,7 +57,34 @@ | |||
| </view> | |||
| </scroll-view> | |||
| </view> | |||
| </view> | |||
| </scroll-view> | |||
| <!-- 显示视频列表内容 --> | |||
| <scroll-view | |||
| :scroll-y="true" | |||
| v-show="showListActive == 2" | |||
| class="showVideoList" | |||
| > | |||
| <view v-for="item in 7" :key="item" class="showListItem"> | |||
| <image | |||
| class="showImg" | |||
| src="../../assets/img/avatar.png" | |||
| mode="aspectFit" | |||
| /> | |||
| <view class="videoInfo"> | |||
| <view class="name">视频名称</view> | |||
| <view class="time">生成时间</view> | |||
| </view> | |||
| <!-- 播放按钮 --> | |||
| <view class="playIcon"> | |||
| <image src="../../assets/icon/play.png" mode="aspectFit" /> | |||
| </view> | |||
| <!-- 更多 --> | |||
| <view class="moreBox"> | |||
| <image src="../../assets/icon/more.png" mode="widthFix" /> | |||
| </view> | |||
| </view> | |||
| </scroll-view> | |||
| <!-- 显示邀请列表内容 --> | |||
| <view class="InviteBox" v-show="showListActive == 3"> | |||
| <scroll-view :scroll-y="true" class="showInviteList"> | |||
| @@ -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%; | |||