Эх сурвалжийг харах

feat: 首页响应式布局

luoyali 10 сар өмнө
parent
commit
ac3c9a416e

+ 13 - 5
src/views/dashboard/index.vue

@@ -1,6 +1,8 @@
 <template>
 	<el-scrollbar ref="dashboardRef" class="dashboard-container column-page-wrap">
-		<el-card class="info-wrap">
+		<el-row :gutter="24">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <el-card class="info-wrap">
 			<img class="logo" src="@/assets/images/logo.png" />
 			<div class="desc-wrap">
 				<div class="header">早安,Admin, 开始您一天的工作吧</div>
@@ -21,8 +23,12 @@
 				</div>
 			</div>
 		</el-card>
+      </el-col>
+    </el-row>
+
+
 		<el-row :gutter="12">
-			<el-col :span="16">
+			<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
 				<el-card class="box-card">
 					<template #header>
 						<div class="common_title">
@@ -42,7 +48,7 @@
 					</el-row>
 				</el-card>
 			</el-col>
-			<el-col :span="8">
+			<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
         <el-carousel style="margin-top: 12px;border-radius: 8px;" height="288px">
           <el-carousel-item>
             <img class="banner-img" src="@/assets/images/banner_01.webp" alt=""/>
@@ -53,8 +59,10 @@
         </el-carousel>
 			</el-col>
 		</el-row>
+
+
 		<el-row :gutter="12">
-			<el-col :span="16">
+			<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
 				<el-card class="box-card">
 					<template #header>
 						<div class="common_title">
@@ -64,7 +72,7 @@
 					<LeTable class="local_table" v-bind="tableOpts"></LeTable>
 				</el-card>
 			</el-col>
-			<el-col :span="8">
+		  <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
         <!-- Echarts 图表 -->
         <el-row :gutter="12">
           <el-col :span="24" class="card-panel__col">