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