congzc пре 1 година
родитељ
комит
c4578781c4
3 измењених фајлова са 146 додато и 13 уклоњено
  1. BIN
      src/assets/icon/more.png
  2. BIN
      src/assets/icon/play.png
  3. +146
    -13
      src/pages/home/index.vue

BIN
src/assets/icon/more.png Прегледај датотеку

Before After
Width: 8  |  Height: 33  |  Size: 255 B

BIN
src/assets/icon/play.png Прегледај датотеку

Before After
Width: 72  |  Height: 72  |  Size: 1.7 KiB

+ 146
- 13
src/pages/home/index.vue Прегледај датотеку

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


Loading…
Откажи
Сачувај