mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-09 13:53:38 +08:00
perf: 优化页面样式
This commit is contained in:
xiaoxian521
@@ -2,41 +2,20 @@
|
||||
import dayjs from "dayjs";
|
||||
import axios from "axios";
|
||||
import MdEditor from "md-editor-v3";
|
||||
import VueDanmaku from "vue3-danmaku";
|
||||
import Bar from "./components/Bar.vue";
|
||||
import Pie from "./components/Pie.vue";
|
||||
import Line from "./components/Line.vue";
|
||||
import TypeIt from "@/components/ReTypeit";
|
||||
import { ref, computed, markRaw } from "vue";
|
||||
import Github from "./components/Github.vue";
|
||||
import { openLink, randomColor } from "@pureadmin/utils";
|
||||
import { randomColor } from "@pureadmin/utils";
|
||||
import { useRenderFlicker } from "@/components/ReFlicker";
|
||||
import { ref, computed, markRaw, onMounted, onUnmounted } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "Welcome"
|
||||
});
|
||||
|
||||
const danmus = [
|
||||
"太好用了吧",
|
||||
"so easy",
|
||||
"效率大大提高呀",
|
||||
"还有精简版，还分国际化和非国际化，Perfect 😘",
|
||||
"好多组件呀，爱啦爱啦 ❤️",
|
||||
"精简版开发体验也太赞了吧 🙀",
|
||||
"pure-admin-table 真方便呀",
|
||||
"哇塞，pure-admin-utils 好多常用、易用的工具呀",
|
||||
"我要 star 这个项目，爱啦爱啦",
|
||||
"免费、开源做到这个程度，真不错 👍",
|
||||
"文档简单易懂，上手真快",
|
||||
"呀！还有免费的教学视频呢，我要去学习一下咯",
|
||||
"稳定、可靠，未来可期呀，加油！",
|
||||
"太卷了，太卷了，慢点让我跟上 😄"
|
||||
];
|
||||
|
||||
let timer = 0;
|
||||
const list = ref();
|
||||
const danmaku = ref();
|
||||
const date: Date = new Date();
|
||||
const loading = ref<boolean>(true);
|
||||
const titleClass = computed(() => {
|
||||
return ["text-base", "font-medium"];
|
||||
@@ -46,23 +25,6 @@ setTimeout(() => {
|
||||
loading.value = !loading.value;
|
||||
}, 800);
|
||||
|
||||
const greetings = computed(() => {
|
||||
if (date.getHours() >= 0 && date.getHours() < 12) {
|
||||
return "上午阳光明媚，祝你薪水翻倍🌞！";
|
||||
} else if (date.getHours() >= 12 && date.getHours() < 18) {
|
||||
return "下午小风娇好，愿你青春不老😃！";
|
||||
} else {
|
||||
return "折一根天使羽毛，愿拂去您的疲惫烦恼忧伤🌛！";
|
||||
}
|
||||
});
|
||||
|
||||
function resizeHandler() {
|
||||
if (timer) clearTimeout(timer);
|
||||
timer = window.setTimeout(() => {
|
||||
danmaku.value.resize();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
axios
|
||||
.get("https://api.github.com/repos/pure-admin/vue-pure-admin/releases")
|
||||
.then(res => {
|
||||
@@ -78,42 +40,18 @@ axios
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
window.onresize = () => resizeHandler();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.onresize = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="welcome">
|
||||
<el-card class="top-content dark:border-none">
|
||||
<div class="left-mark select-none">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/44761321?v=4"
|
||||
title="直达仓库地址"
|
||||
@click="openLink('https://github.com/pure-admin/vue-pure-admin')"
|
||||
/>
|
||||
<TypeIt
|
||||
:className="'type-it0'"
|
||||
:values="[greetings]"
|
||||
:cursor="false"
|
||||
:speed="60"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-row :gutter="24" style="margin: 20px">
|
||||
<div>
|
||||
<el-row :gutter="24">
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
style="margin-bottom: 20px"
|
||||
class="mb-[18px]"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
@@ -127,66 +65,7 @@ onUnmounted(() => {
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-card style="height: 410px">
|
||||
<template #header>
|
||||
<a
|
||||
:class="titleClass"
|
||||
href="https://github.com/xiaoxian521"
|
||||
target="_black"
|
||||
>
|
||||
<TypeIt
|
||||
:className="'type-it1'"
|
||||
:values="['GitHub信息']"
|
||||
:cursor="false"
|
||||
:speed="120"
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
<template #default>
|
||||
<Github />
|
||||
<vue-danmaku
|
||||
ref="danmaku"
|
||||
loop
|
||||
useSlot
|
||||
isSuspend
|
||||
randomChannel
|
||||
:debounce="1200"
|
||||
:danmus="danmus"
|
||||
style="width: 100%; height: 80px"
|
||||
>
|
||||
<template v-slot:dm="{ danmu }">
|
||||
<p :style="{ color: randomColor({ type: 'hex' }) as string }">
|
||||
{{ danmu }}
|
||||
</p>
|
||||
</template>
|
||||
</vue-danmaku>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
style="margin-bottom: 20px"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 200
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-card style="height: 410px">
|
||||
<el-card shadow="never" style="height: 347px">
|
||||
<template #header>
|
||||
<a
|
||||
:class="titleClass"
|
||||
@@ -225,9 +104,9 @@ onUnmounted(() => {
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="12"
|
||||
:lg="8"
|
||||
:xl="8"
|
||||
style="margin-bottom: 20px"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb-[18px]"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
@@ -237,20 +116,20 @@ onUnmounted(() => {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 400
|
||||
delay: 200
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-card>
|
||||
<el-card shadow="never" style="height: 347px">
|
||||
<template #header>
|
||||
<a
|
||||
:class="titleClass"
|
||||
href="https://github.com/pure-admin/vue-pure-admin"
|
||||
href="https://github.com/xiaoxian521"
|
||||
target="_black"
|
||||
>
|
||||
<TypeIt
|
||||
:className="'type-it3'"
|
||||
:values="['GitHub饼图信息']"
|
||||
:className="'type-it1'"
|
||||
:values="['GitHub信息']"
|
||||
:cursor="false"
|
||||
:speed="120"
|
||||
/>
|
||||
@@ -258,7 +137,7 @@ onUnmounted(() => {
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
<template #default>
|
||||
<Pie />
|
||||
<Github />
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
@@ -270,7 +149,7 @@ onUnmounted(() => {
|
||||
:md="12"
|
||||
:lg="8"
|
||||
:xl="8"
|
||||
style="margin-bottom: 20px"
|
||||
class="mb-[18px]"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
@@ -284,7 +163,7 @@ onUnmounted(() => {
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<a
|
||||
:class="titleClass"
|
||||
@@ -310,10 +189,10 @@ onUnmounted(() => {
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:md="12"
|
||||
:lg="8"
|
||||
:xl="8"
|
||||
style="margin-bottom: 20px"
|
||||
class="mb-[18px]"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
@@ -327,7 +206,50 @@ onUnmounted(() => {
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<a
|
||||
:class="titleClass"
|
||||
href="https://github.com/pure-admin/vue-pure-admin"
|
||||
target="_black"
|
||||
>
|
||||
<TypeIt
|
||||
:className="'type-it3'"
|
||||
:values="['GitHub饼图信息']"
|
||||
:cursor="false"
|
||||
:speed="120"
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
<template #default>
|
||||
<Pie />
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:lg="8"
|
||||
:xl="8"
|
||||
class="mb-[18px]"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 400
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<a
|
||||
:class="titleClass"
|
||||
@@ -359,36 +281,6 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
height: 100%;
|
||||
|
||||
.top-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
background: var(--el-bg-color);
|
||||
|
||||
.left-mark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
margin: 20px 20px 0 20px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user