265 lines
7.5 KiB
Vue
265 lines
7.5 KiB
Vue
<template>
|
||
<div class="home-box">
|
||
<el-row :gutter="20" class="top-div">
|
||
<el-col :span="17">
|
||
<div class="scrollbar">
|
||
<ScrollbarInfo />
|
||
</div>
|
||
<el-row class="left-div">
|
||
<el-col
|
||
:span="8"
|
||
v-for="i in plateList"
|
||
class="plate"
|
||
:style="{
|
||
'padding-left': i % 3 == 1 ? 0 : 0.2 + 'rem',
|
||
'padding-right': i % 3 == 0 ? 0 : 0.2 + 'rem',
|
||
}"
|
||
>
|
||
<PlateCard
|
||
:name="i.name"
|
||
:introduction="i.introduction"
|
||
:id="i.id"
|
||
:isPublish="i.isDisableCreateDiscuss"
|
||
/>
|
||
</el-col>
|
||
<template v-if="discussList.length > 0">
|
||
<el-col :span="24" v-for="i in discussList">
|
||
<DisscussCard :discuss="i" />
|
||
</el-col>
|
||
</template>
|
||
<template v-else>
|
||
<Skeleton :isBorder="true" />
|
||
</template>
|
||
</el-row>
|
||
</el-col>
|
||
|
||
<el-col :span="7">
|
||
<el-row class="right-div">
|
||
<el-col :span="24">
|
||
<el-carousel trigger="click" height="150px">
|
||
<el-carousel-item v-for="item in bannerList">
|
||
<div class="carousel-font" :style="{ color: item.color }">
|
||
{{ item.name }}
|
||
</div>
|
||
<el-image
|
||
style="width: 100%; height: 100%"
|
||
:src="item.logo"
|
||
fit="cover"
|
||
/>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</el-col>
|
||
|
||
<el-col :span="24">
|
||
<InfoCard header="访问统计" class="VisitsLineChart" text="详情">
|
||
<template #content>
|
||
<VisitsLineChart :option="statisOptions" class="statisChart" />
|
||
</template>
|
||
</InfoCard>
|
||
</el-col>
|
||
|
||
<el-col :span="24">
|
||
<InfoCard header="简介" text="详情">
|
||
<template #content>
|
||
<div class="introduce">
|
||
没有什么能够阻挡，人类对代码<span style="color: #1890ff"
|
||
>优雅</span
|
||
>的追求
|
||
</div>
|
||
</template>
|
||
</InfoCard>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<template v-if="pointList.length > 0">
|
||
<InfoCard
|
||
:items="pointList"
|
||
header="本月排行"
|
||
text="更多"
|
||
height="400"
|
||
>
|
||
<template #item="temp">
|
||
<PointsRanking :pointsData="temp" />
|
||
</template>
|
||
</InfoCard>
|
||
</template>
|
||
<template v-else>
|
||
<InfoCard header="本月排行" text="更多">
|
||
<template #content> <Skeleton /></template>
|
||
</InfoCard>
|
||
</template>
|
||
</el-col>
|
||
|
||
<el-col :span="24">
|
||
<template v-if="friendList.length > 0">
|
||
<InfoCard
|
||
:items="friendList"
|
||
header="推荐好友"
|
||
text="更多"
|
||
height="400"
|
||
>
|
||
<template #item="temp">
|
||
<RecommendFriend :friendData="temp" />
|
||
</template>
|
||
</InfoCard>
|
||
</template>
|
||
<template v-else>
|
||
<InfoCard header="推荐好友" text="更多">
|
||
<template #content> <Skeleton /></template>
|
||
</InfoCard>
|
||
</template>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<template v-if="themeList.length > 0">
|
||
<InfoCard
|
||
:items="themeList"
|
||
header="推荐主题"
|
||
text="更多"
|
||
height="400"
|
||
>
|
||
<template #item="temp">
|
||
<ThemeData :themeData="temp" />
|
||
</template>
|
||
</InfoCard>
|
||
</template>
|
||
<template v-else>
|
||
<InfoCard header="推荐主题" text="更多">
|
||
<template #content> <Skeleton /></template>
|
||
</InfoCard>
|
||
</template>
|
||
</el-col>
|
||
|
||
<el-col :span="24" style="background: transparent">
|
||
<BottomInfo />
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, ref, reactive, computed } from "vue";
|
||
import DisscussCard from "@/components/DisscussCard.vue";
|
||
import InfoCard from "@/components/InfoCard.vue";
|
||
import PlateCard from "@/components/PlateCard.vue";
|
||
import ScrollbarInfo from "@/components/ScrollbarInfo.vue";
|
||
import AvatarInfo from "@/components/AvatarInfo.vue";
|
||
import BottomInfo from "@/components/BottomInfo.vue";
|
||
import VisitsLineChart from "./components/VisitsLineChart/index.vue";
|
||
import { access } from "@/apis/accessApi.js";
|
||
import { getList } from "@/apis/plateApi.js";
|
||
import { getList as bannerGetList } from "@/apis/bannerApi.js";
|
||
import { getHomeDiscuss } from "@/apis/discussApi.js";
|
||
import { getWeek } from "@/apis/accessApi.js";
|
||
import {
|
||
getRecommendedTopic,
|
||
getRecommendedFriend,
|
||
getRankingPoints,
|
||
} from "@/apis/analyseApi.js";
|
||
import PointsRanking from "./components/PointsRanking/index.vue";
|
||
import RecommendFriend from "./components/RecommendFriend/index.vue";
|
||
import ThemeData from "./components/RecommendTheme/index.vue";
|
||
import Skeleton from "@/components/Skeleton/index.vue";
|
||
|
||
const plateList = ref([]);
|
||
const discussList = ref([]);
|
||
const bannerList = ref([]);
|
||
const weekList = ref([]);
|
||
const pointList = ref([]);
|
||
const friendList = ref([]);
|
||
const themeList = ref([]);
|
||
|
||
const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
|
||
//主题查询参数
|
||
const query = reactive({
|
||
skipCount: 1,
|
||
maxResultCount: 10,
|
||
isTop: true,
|
||
});
|
||
|
||
//初始化
|
||
onMounted(async () => {
|
||
access();
|
||
const { data: plateData } = await getList();
|
||
plateList.value = plateData.items;
|
||
const { data: discussData } = await getHomeDiscuss();
|
||
discussList.value = discussData;
|
||
const { data: bannerData } = await bannerGetList();
|
||
bannerList.value = bannerData.items;
|
||
const { data: weekData } = await getWeek();
|
||
weekList.value = weekData;
|
||
const { data: pointData } = await getRankingPoints();
|
||
pointList.value = pointData;
|
||
const { data: friendData } = await getRecommendedFriend();
|
||
friendList.value = friendData;
|
||
const { data: themeData } = await getRecommendedTopic();
|
||
themeList.value = themeData;
|
||
});
|
||
|
||
const weekXAxis = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
|
||
// 访问统计
|
||
const statisOptions = computed(() => {
|
||
return {
|
||
xAxis: {
|
||
data: weekList.value.map((item, index) => {
|
||
return weekXAxis.filter((v, vIndex) => {
|
||
return vIndex === index;
|
||
})[0];
|
||
}),
|
||
},
|
||
series: {
|
||
data: weekList.value.map((item) => item.number),
|
||
},
|
||
};
|
||
});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.home-box {
|
||
width: 1300px;
|
||
height: 100%;
|
||
.introduce {
|
||
color: rgba(0, 0, 0, 0.45);
|
||
font-size: small;
|
||
}
|
||
|
||
.plate {
|
||
background: transparent !important;
|
||
}
|
||
|
||
.left-div .el-col {
|
||
background-color: #ffffff;
|
||
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.right-div .el-col {
|
||
background-color: #ffffff;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.carousel-font {
|
||
position: absolute;
|
||
z-index: 1;
|
||
top: 10%;
|
||
left: 10%;
|
||
}
|
||
|
||
.top-div {
|
||
padding-top: 0.5rem;
|
||
}
|
||
|
||
.scrollbar {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.VisitsLineChart >>> .el-card__body {
|
||
padding: 0.5rem;
|
||
}
|
||
|
||
.statisChart {
|
||
width: 100%;
|
||
height: 300px;
|
||
}
|
||
}
|
||
</style>
|