xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:新增骨架屏组件以及接入首页的骨架屏

Browse Source
This commit is contained in:
Xwen
2023-12-26 22:46:42 +08:00
parent 124f1151db
commit 15d31dbcbf
2 changed files with 82 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
Yi.Bbs.Vue3/src/components/Skeleton/index.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<el-col :span="24">
<el-card shadow="never" class="card-box"> <el-skeleton /> </el-card>
</el-col>
</template>
<script setup>
import { ref, defineProps } from "vue";
const props = defineProps({
isBorder: {
type: Boolean,
default: false,
},
});
</script>
<style lang="scss">
.card-box {
--el-card-border-color: v-bind(isBorder ? "#e4e7ed": "transparent");
}
</style>

101
Yi.Bbs.Vue3/src/views/home/Index.vue
View File

@@ -22,16 +22,14 @@
:isPublish="i.isDisableCreateDiscuss" :isPublish="i.isDisableCreateDiscuss"
/> />
</el-col> </el-col>
<template v-if="discussList.length > 0">
<el-col :span="24" v-for="i in discussList"> <el-col :span="24" v-for="i in discussList">
<DisscussCard :discuss="i" /> <DisscussCard :discuss="i" />
</el-col> </el-col>
<el-col :span="24"> </template>
<el-empty <template v-else>
v-show="discussList.length <= 0" <Skeleton :isBorder="true" />
description="推荐位置，空空如也" </template>
/>
</el-col>
</el-row> </el-row>
</el-col> </el-col>
@@ -71,43 +69,63 @@
</template> </template>
</InfoCard> </InfoCard>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<InfoCard <template v-if="pointList.length > 0">
:items="pointList" <InfoCard
header="本月排行" :items="pointList"
text="更多" header="本月排行"
height="400" text="更多"
> height="400"
<template #item="temp"> >
<PointsRanking :pointsData="temp" /> <template #item="temp">
</template> <PointsRanking :pointsData="temp" />
</InfoCard> </template>
</InfoCard>
</template>
<template v-else>
<InfoCard header="本月排行" text="更多">
<template #content> <Skeleton /></template>
</InfoCard>
</template>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<InfoCard <template v-if="friendList.length > 0">
:items="friendList" <InfoCard
header="推荐好友" :items="friendList"
text="更多" header="推荐好友"
height="400" text="更多"
> height="400"
<template #item="temp"> >
<RecommendFriend :friendData="temp" /> <template #item="temp">
</template> <RecommendFriend :friendData="temp" />
</InfoCard> </template>
</InfoCard>
</template>
<template v-else>
<InfoCard header="推荐好友" text="更多">
<template #content> <Skeleton /></template>
</InfoCard>
</template>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<InfoCard <template v-if="themeList.length > 0">
:items="themeList" <InfoCard
header="推荐主题" :items="themeList"
text="更多" header="推荐主题"
height="400" text="更多"
> height="400"
<template #item="temp"> >
<ThemeData :themeData="temp" /> <template #item="temp">
</template> <ThemeData :themeData="temp" />
</InfoCard> </template>
</InfoCard>
</template>
<template v-else>
<InfoCard header="推荐主题" text="更多">
<template #content> <Skeleton /></template>
</InfoCard>
</template>
</el-col> </el-col>
<el-col :span="24" style="background: transparent"> <el-col :span="24" style="background: transparent">
@@ -141,6 +159,7 @@ import {
import PointsRanking from "./components/PointsRanking/index.vue"; import PointsRanking from "./components/PointsRanking/index.vue";
import RecommendFriend from "./components/RecommendFriend/index.vue"; import RecommendFriend from "./components/RecommendFriend/index.vue";
import ThemeData from "./components/RecommendTheme/index.vue"; import ThemeData from "./components/RecommendTheme/index.vue";
import Skeleton from "@/components/Skeleton/index.vue";
const plateList = ref([]); const plateList = ref([]);
const discussList = ref([]); const discussList = ref([]);