| @@ -31,11 +31,21 @@ | |||||
| > | > | ||||
| </view> | </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 v-for="item in 7" :key="item" class="showListItem"> | ||||
| <view class="top"> | <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> | </view> | ||||
| <scroll-view :scroll-x="true" class="imgListBox"> | <scroll-view :scroll-x="true" class="imgListBox"> | ||||
| <view v-for="item in 6" :key="item" class="item"> | <view v-for="item in 6" :key="item" class="item"> | ||||
| @@ -47,7 +57,34 @@ | |||||
| </view> | </view> | ||||
| </scroll-view> | </scroll-view> | ||||
| </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"> | <view class="InviteBox" v-show="showListActive == 3"> | ||||
| <scroll-view :scroll-y="true" class="showInviteList"> | <scroll-view :scroll-y="true" class="showInviteList"> | ||||
| @@ -145,7 +182,7 @@ const tabList = ref([ | |||||
| { name: "我的邀请", id: 3 }, | { name: "我的邀请", id: 3 }, | ||||
| { name: "消费记录", id: 4 }, | { name: "消费记录", id: 4 }, | ||||
| ]); | ]); | ||||
| const showListActive = ref(3); | |||||
| const showListActive = ref(1); | |||||
| function clickTabHandle(e) { | function clickTabHandle(e) { | ||||
| showListActive.value = e.id; | showListActive.value = e.id; | ||||
| } | } | ||||
| @@ -232,35 +269,131 @@ function clickTabHandle(e) { | |||||
| // 风格列表 | // 风格列表 | ||||
| .showStyleList { | .showStyleList { | ||||
| margin-top: 20rpx; | |||||
| width: 750rpx; | |||||
| flex: 1; | |||||
| overflow: hidden; | |||||
| margin-top: 30rpx; | |||||
| width: 690rpx; | |||||
| .showListItem { | .showListItem { | ||||
| margin-top: 10rpx; | |||||
| .top { | .top { | ||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| padding: 0 30rpx; | 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 { | .imgListBox { | ||||
| white-space: nowrap; | white-space: nowrap; | ||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| flex-wrap: nowrap; | flex-wrap: nowrap; | ||||
| height: 250rpx; | |||||
| height: 200rpx; | |||||
| .item { | .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 均可 | display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 | ||||
| flex-direction: column; | flex-direction: column; | ||||
| align-items: center; | align-items: center; | ||||
| .cover { | .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 { | .InviteBox { | ||||
| width: 100%; | width: 100%; | ||||