twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-09 13:53:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: standard code format

Browse Source
This commit is contained in:
xiaoxian521
2022-05-14 09:59:02 +08:00
parent 2214ce7911
commit 1cf82eb7a4
29 changed files with 85 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
src/views/welcome/index.vue Normal file
View File

@@ -0,0 +1,249 @@
<script setup lang="ts">
import { ReGithub, ReInfinite, RePie, ReLine, ReBar } from "./components";
import { ref, computed } from "vue";
import avatars from "/@/assets/avatars.jpg";
const date: Date = new Date();
let loading = ref<boolean>(true);
setTimeout(() => {
loading.value = !loading.value;
}, 800);
let greetings = computed(() => {
if (date.getHours() >= 0 && date.getHours() < 12) {
return "上午阳光明媚，祝你薪水翻倍🌞！";
} else if (date.getHours() >= 12 && date.getHours() < 18) {
return "下午小风娇好，愿你青春不老😃！";
} else {
return "折一根天使羽毛，愿拂去您的疲惫烦恼忧伤🌛！";
}
});
const openDepot = (): void => {
window.open("https://github.com/xiaoxian521/vue-pure-admin");
};
</script>
<template>
<div class="welcome">
<el-card class="top-content">
<div class="left-mark">
<img :src="avatars" title="直达仓库地址" @click="openDepot" />
<span>{{ greetings }}</span>
</div>
</el-card>
<el-row :gutter="24" style="margin: 20px">
<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: 360px">
<template #header>
<span style="font-size: 16px; font-weight: 500">GitHub信息</span>
</template>
<el-skeleton animated :rows="7" :loading="loading">
<template #default>
<ReGithub />
</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: 360px">
<template #header>
<span style="font-size: 16px; font-weight: 500"
>GitHub滚动信息</span
>
</template>
<el-skeleton animated :rows="7" :loading="loading">
<template #default>
<ReInfinite />
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col
:xs="24"
:sm="24"
:md="12"
:lg="8"
:xl="8"
style="margin-bottom: 20px"
v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 400
}
}"
>
<el-card>
<template #header>
<span style="font-size: 16px; font-weight: 500"
>GitHub饼图信息</span
>
</template>
<el-skeleton animated :rows="7" :loading="loading">
<template #default>
<RePie />
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col
:xs="24"
:sm="24"
:md="12"
:lg="8"
:xl="8"
style="margin-bottom: 20px"
v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 400
}
}"
>
<el-card>
<template #header>
<span style="font-size: 16px; font-weight: 500"
>GitHub折线图信息</span
>
</template>
<el-skeleton animated :rows="7" :loading="loading">
<template #default>
<ReLine />
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col
:xs="24"
:sm="24"
:md="24"
:lg="8"
:xl="8"
style="margin-bottom: 20px"
v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 400
}
}"
>
<el-card>
<template #header>
<span style="font-size: 16px; font-weight: 500"
>GitHub柱状图信息</span
>
</template>
<el-skeleton animated :rows="7" :loading="loading">
<template #default>
<ReBar />
</template>
</el-skeleton>
</el-card>
</el-col>
</el-row>
</div>
</template>
<style module scoped>
.size {
height: 335px;
}
</style>
<style lang="scss" scoped>
.main-content {
margin: 0 !important;
}
.welcome {
height: 100%;
.top-content {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
background: #fff;
.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;
}
}
}
}
</style>