fix: resolve responsive layout issues

This commit is contained in:
likui628 2024-07-14 11:17:40 +08:00
parent 31fd19f17a
commit 3a7b5c2965
2 changed files with 4 additions and 4 deletions

View File

@ -211,12 +211,12 @@ const trendItems: WorkbenchTrendItem[] = [
<template #description> 今日晴20 - 32 </template>
</WorkbenchHeader>
<div class="mt-5 flex">
<div class="mr-4 w-full md:w-3/5">
<div class="mt-5 flex flex-col lg:flex-row">
<div class="mr-4 w-full lg:w-3/5">
<WorkbenchProject :items="projectItems" title="项目" />
<WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
</div>
<div class="w-full md:w-2/5">
<div class="w-full lg:w-2/5">
<WorkbenchQuickNav :items="quickNavItems" title="快捷导航" />
<WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
<AnalysisChartCard class="mt-5" title="访问来源">

View File

@ -36,7 +36,7 @@ withDefaults(defineProps<Props>(), {
'border-b-0': index < 3,
'pb-4': index > 2,
}"
class="border-border group w-1/3 cursor-pointer border-b border-r border-t p-4 transition-all hover:shadow-xl"
class="border-border group w-full cursor-pointer border-b border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
>
<div class="flex items-center">
<VbenIcon