chore: 构建目录
This commit is contained in:
陈淳
@@ -1,199 +0,0 @@
|
||||
<template>
|
||||
<div style="width: 1200px">
|
||||
<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"
|
||||
/>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" v-for="i in discussList">
|
||||
<DisscussCard :discuss="i" />
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-empty
|
||||
v-show="discussList.length <= 0"
|
||||
description="推荐位置，空空如也"
|
||||
/>
|
||||
</el-col>
|
||||
</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">
|
||||
<InfoCard :items="items" header="本月排行" text="更多">
|
||||
<template #item="temp">
|
||||
<AvatarInfo>
|
||||
<template #bottom> 本月积分：290 </template>
|
||||
</AvatarInfo>
|
||||
</template>
|
||||
</InfoCard>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<InfoCard :items="items" header="推荐好友" text="更多">
|
||||
<template #item="temp">
|
||||
<AvatarInfo />
|
||||
</template>
|
||||
</InfoCard>
|
||||
</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.vue";
|
||||
|
||||
import { access } from "@/apis/accessApi.js";
|
||||
import { getList } from "@/apis/plateApi.js";
|
||||
import { getList as bannerGetList } from "@/apis/bannerApi.js";
|
||||
import { getList as discussGetList } from "@/apis/discussApi.js";
|
||||
import { getWeek } from "@/apis/accessApi.js";
|
||||
|
||||
var plateList = ref([]);
|
||||
var discussList = ref([]);
|
||||
var bannerList = ref([]);
|
||||
const weekList = 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 discussGetList(query);
|
||||
discussList.value = discussData.items;
|
||||
const { data: bannerData } = await bannerGetList();
|
||||
bannerList.value = bannerData.items;
|
||||
const { data: weekData } = await getWeek();
|
||||
weekList.value = weekData;
|
||||
});
|
||||
|
||||
// 访问统计
|
||||
const statisOptions = computed(() => {
|
||||
return {
|
||||
xAxis: {
|
||||
data: weekList.value.map((item) => item.creationTime),
|
||||
},
|
||||
series: {
|
||||
data: weekList.value.map((item) => item.number),
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.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>
|
||||
@@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div class="v-chart" ref="statis"></div>
|
||||
</template>
|
||||
|
||||
<script setup name="VisitsLineChart">
|
||||
import { ref, defineEmits, defineProps, defineExpose } from "vue";
|
||||
import useEcharts from "@/hooks/useEcharts";
|
||||
import { statisticsEcharts } from "../hooks/echartsConfig";
|
||||
const props = defineProps({
|
||||
option: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
const emits = defineEmits([
|
||||
"chart-click", // 点击chart
|
||||
]);
|
||||
|
||||
let statis = ref(null);
|
||||
const { resize } = useEcharts(statis, emits, props, statisticsEcharts);
|
||||
defineExpose({
|
||||
resize,
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.v-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,81 +0,0 @@
|
||||
export const statisticsEcharts = {
|
||||
grid: {
|
||||
top: "10%",
|
||||
left: "4%",
|
||||
right: "4%",
|
||||
bottom: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: "category",
|
||||
data: [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitNumber: 4,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#DDD",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#333",
|
||||
},
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: {
|
||||
name: "访问量",
|
||||
type: "line",
|
||||
data: [],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 5,
|
||||
color: {
|
||||
type: "linear",
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#a0cfff", // 浅蓝色，0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#0047AB", // 深蓝色，100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(72,216,191, 0.3)",
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#fff",
|
||||
borderWidth: 10,
|
||||
borderColor: "#A9F387",
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user