From 7cc0e05f3c549a516449135cf674d78a6a94ee93 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期日, 28 四月 2024 15:55:45 +0800
Subject: [PATCH] style:修改数据中心适配
---
src/views/system/data-manage/index.vue | 73 ++++++++++--------------------------
1 files changed, 21 insertions(+), 52 deletions(-)
diff --git a/src/views/system/data-manage/index.vue b/src/views/system/data-manage/index.vue
index c4268bc..b0382be 100644
--- a/src/views/system/data-manage/index.vue
+++ b/src/views/system/data-manage/index.vue
@@ -7,20 +7,10 @@
</el-col>
</el-row>
- <el-row type="flex" justify="center">
- <el-col :span="6" v-for="(item, index) in videoData" :key="index">
+ <el-row :gutter="20">
+ <el-col :xl="4" :lg="4" :md="6" :sm="6" :xs="12" v-for="(item, index) in videoData" :key="index"
+ :style="item.name == '' ? 'display:none' : ''" class="col-margin">
<el-link @click="handleDetail(item)">
- <el-card style="width:150px;height: 150px;text-align: center;">
- <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
- <div>{{ item.name }}</div>
- </el-card>
- </el-link>
- </el-col>
- </el-row>
- <br/>
- <el-row type="flex" justify="center">
- <el-col :span="6" v-for="(item, index) in videoData2" :key="index">
- <el-link @click="handleDetail(item)" :style="item.name == '' ? 'display:none' : ''">
<el-card style="width:150px;height: 150px;text-align: center;">
<i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
<div>{{ item.name }}</div>
@@ -37,20 +27,10 @@
</el-col>
</el-row>
- <el-row type="flex">
- <el-col :span="6" v-for="(item, index) in carData" :key="index">
+ <el-row :gutter="20">
+ <el-col :xl="4" :lg="4" :md="6" :sm="6" :xs="12" v-for="(item, index) in carData" :key="index"
+ :style="item.name == '' ? 'display:none' : ''" class="col-margin">
<el-link @click="handleDetail(item)">
- <el-card style="width:150px;height: 150px;text-align: center;">
- <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
- <div>{{ item.name }}</div>
- </el-card>
- </el-link>
- </el-col>
- </el-row>
- <br/>
- <el-row type="flex" justify="center">
- <el-col :span="6" v-for="(item, index) in carData2" :key="index">
- <el-link @click="handleDetail(item)" :style="item.name == '' ? 'display:none' : ''">
<el-card style="width:150px;height: 150px;text-align: center;">
<i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
<div>{{ item.name }}</div>
@@ -67,8 +47,9 @@
</el-col>
</el-row>
- <el-row type="flex" justify="center">
- <el-col :span="6" v-for="(item, index) in faceData" :key="index">
+ <el-row :gutter="20">
+ <el-col :xl="4" :lg="4" :md="6" :sm="6" :xs="12" v-for="(item, index) in faceData" :key="index"
+ :style="item.name == '' ? 'display:none' : ''" class="col-margin">
<el-link @click="handleDetail(item)">
<el-card style="width:150px;height: 150px;text-align: center;">
<i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
@@ -77,19 +58,8 @@
</el-link>
</el-col>
</el-row>
- <br/>
- <el-row type="flex" justify="center">
- <el-col :span="6" v-for="(item, index) in faceData2" :key="index">
- <el-link @click="handleDetail(item)" :style="item.name == '' ? 'display:none' : ''">
- <el-card style="width:150px;height: 150px;text-align: center;">
- <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
- <div>{{ item.name }}</div>
- </el-card>
- </el-link>
- </el-col>
- </el-row>
</div>
-
+
<div class="container">
<el-row type="flex" justify="center">
<el-col :span="24">
@@ -97,9 +67,10 @@
</el-col>
</el-row>
- <el-row type="flex" justify="center">
- <el-col :span="6" v-for="(item, index) in equipment" :key="index">
- <el-link @click="handleDetail(item)" :style="item.name == '' ? 'display:none' : ''">
+ <el-row :gutter="20">
+ <el-col :xl="4" :lg="4" :md="6" :sm="6" :xs="12" v-for="(item, index) in equipment" :key="index"
+ :style="item.name == '' ? 'display:none' : ''" class="col-margin">
+ <el-link @click="handleDetail(item)">
<el-card style="width:150px;height: 150px;text-align: center;">
<i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
<div>{{ item.name }}</div>
@@ -107,9 +78,9 @@
</el-link>
</el-col>
</el-row>
- <br/>
+ <br />
</div>
- <br/><br/><br/><br/>
+ <br /><br /><br /><br />
</div>
</template>
@@ -124,8 +95,6 @@
{ name: '褰曞儚鍙敤', icon: 'el-icon-turn-off', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
{ name: '瑙嗛鏍囨敞', icon: 'el-icon-place', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
{ name: '閲嶇偣鎸囨尌鍥惧儚鍦ㄧ嚎鐜�', icon: 'el-icon-film', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
- ],
- videoData2: [
{ name: '瑙嗛鍥惧儚璧勬簮瀹夊叏绠＄悊', icon: 'el-icon-house', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
{ name: '瑙嗛鍥惧儚璐ㄩ噺', icon: 'el-icon-set-up', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
{ name: '', icon: 'el-icon-connection', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
@@ -139,9 +108,7 @@
{ name: '鑱旂綉鍗″彛璁惧鐩綍涓�鑷寸巼', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
{ name: '杞﹁締鍗″彛淇℃伅閲囬泦鍑嗙‘鐜�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
{ name: '杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁瀹屾暣鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
- { name: '杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁鍑嗙‘鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }
- ],
- carData2: [
+ { name: '杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁鍑嗙‘鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
{ name: '杞﹁締鍗″彛璁惧鏃堕挓鍑嗙‘鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
{ name: '杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁涓婁紶鍙婃椂鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
{ name: '杞﹁締鍗″彛璁惧url鍙敤鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
@@ -156,8 +123,6 @@
{ name: '浜鸿劯鍗″彛淇℃伅閲囬泦鍑嗙‘鐜�', icon: 'el-icon-timer', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
{ name: '璁惧鎶撴媿鍥剧墖鍚堟牸鎬�', icon: 'el-icon-money', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
{ name: '璁惧鎶撴媿鍥剧墖鏃堕挓鍑嗙‘鎬�', icon: 'el-icon-data-analysis', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
- ],
- faceData2: [
{ name: '鎶撴媿浜鸿劯鏁版嵁涓婁紶鍙婃椂鎬�', icon: 'el-icon-thumb', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
{ name: '浜鸿劯鍗″彛璁惧鎶撴媿鏁版嵁澶у浘鍙敤鎬�', icon: 'el-icon-pie-chart', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
{ name: '', icon: 'el-icon-data-line', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
@@ -193,4 +158,8 @@
width: 90%;
margin: 10px auto;
}
+
+.col-margin {
+ margin-bottom: 20px;
+}
</style>
--
Gitblit v1.8.0