congzc 1 год назад
Родитель
Сommit
c4578781c4
3 измененных файлов: 146 добавлений и 13 удалений
  1. Двоичные данные
      src/assets/icon/more.png
  2. Двоичные данные
      src/assets/icon/play.png
  3. +146
    -13
      src/pages/home/index.vue

Двоичные данные
src/assets/icon/more.png Просмотреть файл

До После
Ширина: 8  |  Высота: 33  |  Размер: 255 B

Двоичные данные
src/assets/icon/play.png Просмотреть файл

До После
Ширина: 72  |  Высота: 72  |  Размер: 1.7 KiB

+ 146
- 13
src/pages/home/index.vue Просмотреть файл

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


Загрузка…
Отмена
Сохранить