tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ 首页手机端显示适配调整

Browse Source
This commit is contained in:
Ray.Hao
2025-04-26 09:25:42 +08:00
parent f3576d51f2
commit 5ede0ceb9d
1 changed files with 73 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/views/dashboard/index.vue
View File

@@ -4,28 +4,29 @@
<github-corner class="github-corner" />
<el-card shadow="never" class="mt-2">
<el-row class="h-80px">
<el-col :span="18" :xs="24">
<div class="flex-x-start">
<img
class="w80px h80px rounded-full"
:src="userStore.userInfo.avatar + '?imageView2/1/w/80/h/80'"
/>
<div class="ml-5">
<p>{{ greetings }}</p>
<p class="text-sm text-gray">今日天气晴朗，气温在15℃至25℃之间，东南风。</p>
</div>
<div class="flex flex-wrap">
<!-- 左侧问候语区域 -->
<div class="flex-1 flex items-start">
<img
class="w80px h80px rounded-full"
:src="userStore.userInfo.avatar + '?imageView2/1/w/80/h/80'"
/>
<div class="ml-5">
<p>{{ greetings }}</p>
<p class="text-sm text-gray">今日天气晴朗，气温在15℃至25℃之间，东南风。</p>
</div>
</el-col>
</div>
<el-col :span="6" :xs="24">
<el-row class="h-80px flex-y-center" :gutter="10">
<el-col :span="10">
<div class="font-bold color-#ff9a2e text-sm flex-y-center">
<!-- 右侧图标区域 - PC端 -->
<div class="hidden sm:block">
<div class="flex items-end space-x-6">
<!-- 仓库 -->
<div>
<div class="font-bold color-#ff9a2e text-sm flex items-center">
<el-icon class="mr-2px"><Folder /></el-icon>
仓库
</div>
<div class="mt-3">
<div class="mt-3 whitespace-nowrap">
<el-link href="https://gitee.com/youlaiorg/vue3-element-admin" target="_blank">
<div class="i-svg:gitee text-lg color-#F76560" />
</el-link>
@@ -38,14 +39,15 @@
<div class="i-svg:gitcode text-lg color-#FF9A2E" />
</el-link>
</div>
</el-col>
</div>
<el-col :span="10">
<div class="font-bold color-#4080ff text-sm flex-y-center">
<!-- 文档 -->
<div>
<div class="font-bold color-#4080ff text-sm flex items-center">
<el-icon class="mr-2px"><Document /></el-icon>
文档
</div>
<div class="mt-3">
<div class="mt-3 whitespace-nowrap">
<el-link href="https://juejin.cn/post/7228990409909108793" target="_blank">
<div class="i-svg:juejin text-lg" />
</el-link>
@@ -61,29 +63,62 @@
<div class="i-svg:cnblogs text-lg" />
</el-link>
</div>
</el-col>
</div>
<el-col :span="4">
<div class="font-bold color-#f76560 text-sm flex-y-center">
<!-- 视频 -->
<div>
<div class="font-bold color-#f76560 text-sm flex items-center">
<el-icon class="mr-2px"><VideoCamera /></el-icon>
视频
</div>
<div class="mt-3">
<div class="mt-3 whitespace-nowrap">
<el-link href="https://www.bilibili.com/video/BV1eFUuYyEFj" target="_blank">
<div class="i-svg:bilibili text-lg" />
</el-link>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</div>
</div>
<!-- 移动端图标区域 -->
<div class="w-full sm:hidden mt-3">
<div class="flex justify-end space-x-4 overflow-x-auto">
<!-- 仓库图标 -->
<el-link href="https://gitee.com/youlaiorg/vue3-element-admin" target="_blank">
<div class="i-svg:gitee text-lg color-#F76560" />
</el-link>
<el-link href="https://github.com/youlaitech/vue3-element-admin" target="_blank">
<div class="i-svg:github text-lg color-#4080FF" />
</el-link>
<el-link href="https://gitcode.com/youlai/vue3-element-admin" target="_blank">
<div class="i-svg:gitcode text-lg color-#FF9A2E" />
</el-link>
<!-- 文档图标 -->
<el-link href="https://juejin.cn/post/7228990409909108793" target="_blank">
<div class="i-svg:juejin text-lg" />
</el-link>
<el-link href="https://youlai.blog.csdn.net/article/details/130191394" target="_blank">
<div class="i-svg:csdn text-lg" />
</el-link>
<el-link href="https://www.cnblogs.com/haoxianrui/p/17331952.html" target="_blank">
<div class="i-svg:cnblogs text-lg" />
</el-link>
<!-- 视频图标 -->
<el-link href="https://www.bilibili.com/video/BV1eFUuYyEFj" target="_blank">
<div class="i-svg:bilibili text-lg" />
</el-link>
</div>
</div>
</div>
</el-card>
<!-- 数据统计 -->
<el-row :gutter="10" class="mt-5">
<!-- 在线用户数量 -->
<el-col :span="8">
<el-card shadow="never">
<el-col :span="8" :xs="24" class="mb-xs-3">
<el-card shadow="never" class="h-full flex flex-col">
<template #header>
<div class="flex-x-between">
<span class="text-gray">在线用户</span>
@@ -91,7 +126,7 @@
</div>
</template>
<div class="flex-x-between mt-2">
<div class="flex-x-between mt-2 flex-1">
<div class="flex-y-center">
<span class="text-lg transition-all duration-300 hover:scale-110">
{{ onlineUserCount }}
@@ -116,7 +151,7 @@
</el-col>
<!-- 访客数(UV) -->
<el-col :span="8">
<el-col :span="8" :xs="24" class="mb-xs-3">
<el-skeleton :loading="visitStatsLoading" :rows="5" animated>
<template #template>
<el-card>
@@ -138,7 +173,7 @@
</el-card>
</template>
<template v-if="!visitStatsLoading">
<el-card shadow="never">
<el-card shadow="never" class="h-full flex flex-col">
<template #header>
<div class="flex-x-between">
<span class="text-gray">访客数(UV)</span>
@@ -146,7 +181,7 @@
</div>
</template>
<div class="flex-x-between mt-2">
<div class="flex-x-between mt-2 flex-1">
<div class="flex-y-center">
<span class="text-lg">{{ Math.round(transitionUvCount) }}</span>
<span
@@ -176,7 +211,7 @@
</el-col>
<!-- 浏览量(PV) -->
<el-col :span="8">
<el-col :span="8" :xs="24">
<el-skeleton :loading="visitStatsLoading" :rows="5" animated>
<template #template>
<el-card>
@@ -198,7 +233,7 @@
</el-card>
</template>
<template v-if="!visitStatsLoading">
<el-card shadow="never">
<el-card shadow="never" class="h-full flex flex-col">
<template #header>
<div class="flex-x-between">
<span class="text-gray">浏览量(PV)</span>
@@ -206,7 +241,7 @@
</div>
</template>
<div class="flex-x-between mt-2">
<div class="flex-x-between mt-2 flex-1">
<div class="flex-y-center">
<span class="text-lg">{{ Math.round(transitionPvCount) }}</span>
<span