<script setup lang="ts">
import {getListTable} from "@/api/modules/inedx";
import {useFileType} from "@/utils/filesType";
definePage({
name
: 'home',
layout
: "tabbar",
style
: {
navigationBarTitleText
: '推荐',
navigationStyle
: 'custom',
disableScroll
: true
},
})
const {getFileType} = useFileType()
const classifyList = ref<any>([])
// 获取分类数据
const getClassifyList = async () => {
useGlobalLoading().loading('加载中...')
const res = await getListTable().finally(() => {
useGlobalLoading().close()
});
classifyList.value = res.data
console.log(classifyList.value)
useGlobalLoading().close()
}
const chunkFiles = (arr, size) => {
if (!arr || !Array.isArray(arr)) return [];
const chunks = [];
for (let i = 0; i < arr.length; i += size) {
chunks.push(arr.slice(i, i + size));
}
return chunks;
}
onMounted(() => {
getClassifyList()
})
</script>
<template>
<v
iew class="index
-page
-container">
<wd
-navbar fixed
custom
-style="background
-color
: transparent !important; height
: 100rpx !important;"
safeAreaInsetTop>
<template #left>
<v
iew class="title
-box pl4">
<text class="title
-text"></text>
</v
iew>
</template>
</wd
-navbar>
<v
iew class="container">
<scroll
-v
iew
:scroll
-y="true" class="list
-box">
<v
iew class="top
-box">
<v
iew class="top">
<v
iew class="top
-icon
-box">
<wd
-icon name="add" size="18px"></wd
-icon>
</v
iew>
<text class="top
-text">AI修图</text>
</v
iew>
</v
iew>
<v
iew class="video" v
-for="item in classifyList"
:key="item?.id" v
-show="item.files.length > 0">
<wd
-card custom
-class="list
-item">
<template #title>
<v
iew class="list
-text" @click="useGlobalToast().success(item.name)">
<text class="text
-title">{{ item?.name }}</text>
<v
iew class="title
-tip">
<wd
-icon name="arrow
-right" size="22px"></wd
-icon>
</v
iew>
</v
iew>
</template>
<scroll
-v
iew
:scroll
-x="true"
:show
-scrollbar="false" class="files
-package
-scroll">
<v
iew class="files
-box">
<!
-- 大号
-->
<v
iew v
-if="item.style == '1'" v
-for="(file, index) in item?.files"
:key="index + '
-1'"
class="files
-item
-large">
<image v
-if="'image' == getFileType(file.ossUrl)"
:src="file?.ossUrl"
mode="scaleToFill" class="list
-image
-large"/>
<video v
-else
:src="file?.ossUrl"
:controls="false"
:autoplay="true"
:loop="true"
object-fit="fill"
:show
-bottom
-progress="false" class="list
-video
-large"
muted/>
</v
iew>
<!
-- 格子
-->
<v
iew v
-else
-if="item.style == '2'" v
-for="(file, index) in item?.files"
:key="index + '
-2'" class="files
-item
-cell">
<v
iew v
-for="(group, groupIndex) in chunkFiles(item?.files,
5)"
:key="groupIndex" class="card
-horizontal
-group">
<!
-- 左侧大项
-->
<v
iew v
-if="group[0]" class="left
-large
-item">
<image v
-if="getFileType(group[0].ossUrl) === 'image'"
:src="group[0].ossUrl" mode="scaleToFill"
class="list
-image
-left
-large"/>
<video v
-else
:src="group[0].ossUrl"
:controls="false"
:autoplay="true"
:loop="true"
object-fit="fill"
:show
-bottom
-progress="false"
class="list
-video
-left
-large"
:muted="true"/>
</v
iew>
<!
-- 右侧四个小项：改为 上2下2 的 2x2 网格
-->
<v
iew class="right
-grid
-2x2">
<v
iew v
-for="(subFile, subIdx) in group.slice(1,
5)"
:key="subIdx" class="right
-grid
-item">
<image v
-if="getFileType(subFile.ossUrl) === 'image'"
:src="subFile.ossUrl" mode="aspectFill"
class="list
-image
-right
-small"/>
<video v
-else
:src="subFile.ossUrl"
:controls="false"
:autoplay="true"
:loop="true"
object-fit="
cover"
:show
-bottom
-progress="false" class="list
-video
-right
-small"
:muted="true"/>
</v
iew>
</v
iew>
</v
iew>
</v
iew>
<!
-- 默认样式(小号)
-->
<v
iew v
-else v
-for="(file, index) in item?.files"
:key="index" class="files
-item">
<image v
-if="'image' == getFileType(file.ossUrl)"
:src="file?.ossUrl"
mode="scaleToFill" class="list
-image"/>
<video v
-else
:src="file?.ossUrl"
:controls="false"
:autoplay="true"
:loop="true"
object-fit="fill"
:show
-bottom
-progress="false" class="list
-video" muted/>
</v
iew>
</v
iew>
</scroll
-v
iew>
</wd
-card>
</v
iew>
</scroll
-v
iew>
<!
-- 底部占位，防止内容被 tabbar 遮挡
-->
<!
-- <v
iew class="safe
-area
-placeholder"></v
iew>
-->
</v
iew>
</v
iew>
</template>
<style scoped lang="scss">
.index
-page
-container {
height
: 100vh; /* 确保根容器占满视口 */
display
: flex;
flex
-direction
: column;
overflow
: hidden;
}
.container {
display
: flex;
flex
: 1;
padding
-top
: calc(100rpx +
54px);
box
-sizing
: border
-box;
flex
-direction
: column;
margin
-bottom
: 190rpx;
}
.top
-box {
height
: 180rpx;
width
: 100%;
display
: inline
-flex;
align
-items
: center;
justify
-content
: center;
margin
: 10rpx 0 20rpx 0;
}
.top {
height
: 100%;
width
: 93%;
border
-radius
: 20rpx;
border
: rgba(89, 22
5, 2
55, 0.77) solid 2rpx;
display
: flex;
flex
-direction
: column;
align
-items
: center;
justify
-content
: center;
}
.top
-icon
-box {
height
: 80rpx;
width
: 80rpx;
border
-radius
: 30%;
display
: flex;
align
-items
: center;
justify
-content
: center;
margin
-bottom
: 10rpx;
background
-color
: rgba(181, 89, 2
55, 0.
53);
}
.top
-text {
font
-weight
: 500;
}
.list
-box {
width
: 100%;
margin
-top
: 30rpx;
/* 占据剩余空间，使 scroll
-v
iew 内部可滚动 */
flex
: 1;
/* 防止溢出 */
height
: 0;
overflow
-y
: auto;
:deep() {
.wd
-card {
margin
: 0 !important;
}
.list
-item {
background
: transparent !important;
.wd
-card__title
-content {
padding
: 16rpx 0 !important;
}
}
}
}
.list
-text {
display
: flex;
flex
-direction
: row;
justify
-content
: space
-between;
align
-items
: center;
}
.text
-title {
font
-size
: 32rpx;
font
-weight
: 600;
}
/* 占位元素：匹配 tabbar 高度 */
.safe
-area
-placeholder {
height
: 180rpx; /* 根据你的 tabbar 实际高度调整 */
}
/* 如果是 iPhoneX 等有底部安全区的设备，也可以额外
兼容 */
/* 使用 env(safe
-area
-inset
-bottom) 更智能 */
.safe
-area
-placeholder
::after {
content
: '';
display
: block;
height
: env(safe
-area
-inset
-bottom, 0px); /* 安全区延伸 */
background
-color
: transparent;
}
.files
-package
-scroll {
white
-space
: nowrap; /* 关键：防止子项换行 */
width
: 100%;
}
.files
-box {
display
: inline
-flex;
flex
-direction
: row;
height
: 100%;
width
: 100%;
}
/** 默认 */
.files
-item {
height
: 320rpx;
margin
-right
: 1
5rpx;
}
.list
-image {
height
: 100%;
width
: 220rpx;
border
-radius
: 23rpx;
}
.list
-video {
height
: 100%;
width
: 220rpx;
border
-radius
: 23rpx;
}
/** 大号 */
.files
-item
-large {
height
: 420rpx;
margin
-right
: 1
5rpx;
}
.list
-image
-large {
height
: 100%;
width
: 300rpx;
border
-radius
: 23rpx;
}
.list
-video
-large {
height
: 100%;
width
: 300rpx;
border
-radius
: 23rpx;
}
/** 格子 */
.files
-item
-cell {
height
: 520rpx;
margin
-right
: 1
5rpx;
}
/* 每个横向卡片：左1右4 的固定宽度容器 */
.card
-horizontal
-group {
display
: flex;
width
: 90vw; /* 控制每个组的宽度，可根据设计调整 */
height
: 100%;
overflow
: hidden;
flex
-shrink
: 0; /* 防止压缩 */
}
/* 左侧大图/视频 */
.left
-large
-item {
flex
: 2;
margin
-right
: 10rpx;
}
.list
-image
-left
-large,
.list
-video
-left
-large {
width
: 100%;
height
: 100%;
border
-radius
: 23rpx;
}
/* 右侧 2x2 网格：上面两个，下面两个 */
.right
-grid
-2x2 {
flex
: 2;
display
: grid;
grid
-template
-columns
: 1fr 1fr; /* 两列等宽 */
grid
-template
-rows
: 1fr 1fr; /* 两行等高 */
gap
: 1
5rpx; /* 单元格间距 */
}
/* 每个小格子 */
.right
-grid
-item {
overflow
: hidden;
border
-radius
: 23rpx;
}
.list
-image
-right
-small,
.list
-video
-right
-small {
width
: 100%;
height
: 100%;
object-fit: cover;
}
</style>
怎么把格子的内容循环显示不是重复显示，不要重复向下循环
本文探讨了object-fit属性在IE浏览器中的兼容性问题，并提供了一种使用绝对定位和transform来实现类似效果的替代方案。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
