From bfb10b42c5fb6bc9f751f88f9351bfc19c6380a4 Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期二, 16 七月 2024 14:57:50 +0800
Subject: [PATCH] 样式调整
---
src/views/system/data-manage/index.vue | 391 ++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 322 insertions(+), 69 deletions(-)
diff --git a/src/views/system/data-manage/index.vue b/src/views/system/data-manage/index.vue
index 616165a..7544896 100644
--- a/src/views/system/data-manage/index.vue
+++ b/src/views/system/data-manage/index.vue
@@ -3,16 +3,35 @@
<div class="container">
<el-row type="flex" justify="center">
<el-col :span="24">
- <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">瑙嗛杩愯鐩戞帶</h3>
+ <h3
+ style="
+ color: rgb(104, 104, 103);
+ padding-top: 20px;
+ padding-bottom: 20px;
+ "
+ >
+ 瑙嗛杩愯鐩戞帶
+ </h3>
</el-col>
</el-row>
<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, index)">
- <el-card style="width:150px;height: 150px;text-align: center;">
- <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
+ <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, index)" style="width: 100%">
+ <el-card
+ style="min-width: 150px;width:100%; height: 150px; text-align: center"
+ >
+ <i style="font-size: 40px; padding: 15px" :class="item.icon"></i>
<div>{{ item.name }}</div>
</el-card>
</el-link>
@@ -23,16 +42,33 @@
<div class="container">
<el-row type="flex" justify="center">
<el-col :span="24">
- <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">杞﹁締杩愯鐩戞帶</h3>
+ <h3
+ style="
+ color: rgb(104, 104, 103);
+ padding-top: 20px;
+ padding-bottom: 20px;
+ "
+ >
+ 杞﹁締杩愯鐩戞帶
+ </h3>
</el-col>
</el-row>
<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, index)">
- <el-card style="width:150px;height: 150px;text-align: center;">
- <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
+ <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, index)" style="width: 100%">
+ <el-card style="min-width: 150px;width:100%; height: 150px; text-align: center">
+ <i style="font-size: 40px; padding: 15px" :class="item.icon"></i>
<div>{{ item.name }}</div>
</el-card>
</el-link>
@@ -43,16 +79,33 @@
<div class="container">
<el-row type="flex" justify="center">
<el-col :span="24">
- <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">浜鸿劯杩愯鐩戞帶</h3>
+ <h3
+ style="
+ color: rgb(104, 104, 103);
+ padding-top: 20px;
+ padding-bottom: 20px;
+ "
+ >
+ 浜鸿劯杩愯鐩戞帶
+ </h3>
</el-col>
</el-row>
<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, index)">
- <el-card style="width:150px;height: 150px;text-align: center;">
- <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
+ <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, index)" style="width: 100%">
+ <el-card style="min-width: 150px;width:100%; height: 150px; text-align: center">
+ <i style="font-size: 40px; padding: 15px" :class="item.icon"></i>
<div>{{ item.name }}</div>
</el-card>
</el-link>
@@ -63,16 +116,33 @@
<div class="container">
<el-row type="flex" justify="center">
<el-col :span="24">
- <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">璧勪骇绠＄悊</h3>
+ <h3
+ style="
+ color: rgb(104, 104, 103);
+ padding-top: 20px;
+ padding-bottom: 20px;
+ "
+ >
+ 璧勪骇绠＄悊
+ </h3>
</el-col>
</el-row>
<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, index)">
- <el-card style="width:150px;height: 150px;text-align: center;">
- <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
+ <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, index)" style="width: 100%">
+ <el-card style="min-width: 150px;width:100%; height: 150px; text-align: center">
+ <i style="font-size: 40px; padding: 15px" :class="item.icon"></i>
<div>{{ item.name }}</div>
</el-card>
</el-link>
@@ -89,55 +159,235 @@
data() {
return {
videoData: [
- { name: '骞冲彴鍦ㄧ嚎', icon: 'el-icon-connection', description: '鎻忚堪淇℃伅', type: '1' },
- { name: '涓�鏈轰竴妗�', icon: 'el-icon-folder', description: '鎻忚堪淇℃伅', type: '1' },
- { name: '鐐逛綅鍦ㄧ嚎', icon: 'el-icon-search', description: '鎻忚堪淇℃伅', type: '1' },
- { name: '褰曞儚鍙敤', icon: 'el-icon-turn-off', description: '鎻忚堪淇℃伅', type: '1' },
- { name: '瑙嗛鏍囨敞', icon: 'el-icon-place', description: '鎻忚堪淇℃伅', type: '1' },
- { name: '閲嶇偣鎸囨尌鍥惧儚鍦ㄧ嚎鐜�', icon: 'el-icon-film', description: '鎻忚堪淇℃伅', type: '1' },
- { name: '瑙嗛鍥惧儚璧勬簮瀹夊叏绠＄悊', icon: 'el-icon-house', description: '鎻忚堪淇℃伅', type: '1' },
- { name: '瑙嗛鍥惧儚璐ㄩ噺', icon: 'el-icon-set-up', description: '鎻忚堪淇℃伅', type: '1' },
- { name: '', icon: 'el-icon-connection', description: '鎻忚堪淇℃伅', type: '1' },
- { name: '', icon: 'el-icon-connection', description: '鎻忚堪淇℃伅', type: '1' },
- { name: '', icon: 'el-icon-connection', description: '鎻忚堪淇℃伅', type: '1' },
- { name: '', icon: 'el-icon-connection', description: '鎻忚堪淇℃伅', type: '1' }
+ {
+ name: "骞冲彴鍦ㄧ嚎",
+ icon: "el-icon-connection",
+ description: "鎻忚堪淇℃伅",
+ type: "1",
+ },
+ {
+ name: "涓�鏈轰竴妗�",
+ icon: "el-icon-folder",
+ description: "鎻忚堪淇℃伅",
+ type: "1",
+ },
+ {
+ name: "鐐逛綅鍦ㄧ嚎",
+ icon: "el-icon-search",
+ description: "鎻忚堪淇℃伅",
+ type: "1",
+ },
+ {
+ name: "褰曞儚鍙敤",
+ icon: "el-icon-turn-off",
+ description: "鎻忚堪淇℃伅",
+ type: "1",
+ },
+ {
+ name: "瑙嗛鏍囨敞",
+ icon: "el-icon-place",
+ description: "鎻忚堪淇℃伅",
+ type: "1",
+ },
+ {
+ name: "閲嶇偣鎸囨尌鍥惧儚鍦ㄧ嚎鐜�",
+ icon: "el-icon-film",
+ description: "鎻忚堪淇℃伅",
+ type: "1",
+ },
+ {
+ name: "瑙嗛鍥惧儚璧勬簮瀹夊叏绠＄悊",
+ icon: "el-icon-house",
+ description: "鎻忚堪淇℃伅",
+ type: "1",
+ },
+ {
+ name: "瑙嗛鍥惧儚璐ㄩ噺",
+ icon: "el-icon-set-up",
+ description: "鎻忚堪淇℃伅",
+ type: "1",
+ },
+ {
+ name: "",
+ icon: "el-icon-connection",
+ description: "鎻忚堪淇℃伅",
+ type: "1",
+ },
+ {
+ name: "",
+ icon: "el-icon-connection",
+ description: "鎻忚堪淇℃伅",
+ type: "1",
+ },
+ {
+ name: "",
+ icon: "el-icon-connection",
+ description: "鎻忚堪淇℃伅",
+ type: "1",
+ },
+ {
+ name: "",
+ icon: "el-icon-connection",
+ description: "鎻忚堪淇℃伅",
+ type: "1",
+ },
],
carData: [
- { name: '瑙嗗浘搴撳鎺ョǔ瀹氭��', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', type: '2' },
- { name: '鐐逛綅鍦ㄧ嚎鐜�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', type: '2' },
- { name: '鑱旂綉鍗″彛璁惧鐩綍涓�鑷寸巼', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', type: '2' },
- { name: '杞﹁締鍗″彛淇℃伅閲囬泦鍑嗙‘鐜�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', type: '2' },
- { name: '杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁瀹屾暣鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', type: '2' },
- { name: '杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁鍑嗙‘鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', type: '2' },
- { name: '杞﹁締鍗″彛璁惧鏃堕挓鍑嗙‘鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', type: '2' },
- { name: '杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁涓婁紶鍙婃椂鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', type: '2' },
- { name: '杞﹁締鍗″彛璁惧url鍙敤鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', type: '2' },
- { name: '杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁澶у浘鍙敤鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', type: '2' },
- { name: '', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', type: '2' },
- { name: '', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', type: '2' }
+ {
+ name: "瑙嗗浘搴撳鎺ョǔ瀹氭��",
+ icon: "el-icon-truck",
+ description: "鎻忚堪淇℃伅",
+ type: "2",
+ },
+ {
+ name: "鐐逛綅鍦ㄧ嚎鐜�",
+ icon: "el-icon-truck",
+ description: "鎻忚堪淇℃伅",
+ type: "2",
+ },
+ {
+ name: "鑱旂綉鍗″彛璁惧鐩綍涓�鑷寸巼",
+ icon: "el-icon-truck",
+ description: "鎻忚堪淇℃伅",
+ type: "2",
+ },
+ {
+ name: "杞﹁締鍗″彛淇℃伅閲囬泦鍑嗙‘鐜�",
+ icon: "el-icon-truck",
+ description: "鎻忚堪淇℃伅",
+ type: "2",
+ },
+ {
+ name: "杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁瀹屾暣鎬�",
+ icon: "el-icon-truck",
+ description: "鎻忚堪淇℃伅",
+ type: "2",
+ },
+ {
+ name: "杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁鍑嗙‘鎬�",
+ icon: "el-icon-truck",
+ description: "鎻忚堪淇℃伅",
+ type: "2",
+ },
+ {
+ name: "杞﹁締鍗″彛璁惧鏃堕挓鍑嗙‘鎬�",
+ icon: "el-icon-truck",
+ description: "鎻忚堪淇℃伅",
+ type: "2",
+ },
+ {
+ name: "杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁涓婁紶鍙婃椂鎬�",
+ icon: "el-icon-truck",
+ description: "鎻忚堪淇℃伅",
+ type: "2",
+ },
+ {
+ name: "杞﹁締鍗″彛璁惧url鍙敤鎬�",
+ icon: "el-icon-truck",
+ description: "鎻忚堪淇℃伅",
+ type: "2",
+ },
+ {
+ name: "杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁澶у浘鍙敤鎬�",
+ icon: "el-icon-truck",
+ description: "鎻忚堪淇℃伅",
+ type: "2",
+ },
+ { name: "", icon: "el-icon-truck", description: "鎻忚堪淇℃伅", type: "2" },
+ { name: "", icon: "el-icon-truck", description: "鎻忚堪淇℃伅", type: "2" },
],
faceData: [
- { name: '瑙嗗浘搴撳鎺ョǔ瀹氭��', icon: 'el-icon-alarm-clock', description: '鎻忚堪淇℃伅', type: '3' },
- { name: '鐐逛綅鍦ㄧ嚎鐜�', icon: 'el-icon-user', description: '鎻忚堪淇℃伅', type: '3' },
- { name: '鐩綍涓�鑷寸巼', icon: 'el-icon-data-line', description: '鎻忚堪淇℃伅', type: '3' },
- { name: '浜鸿劯鍗″彛淇℃伅閲囬泦鍑嗙‘鐜�', icon: 'el-icon-timer', description: '鎻忚堪淇℃伅', type: '3' },
- { name: '璁惧鎶撴媿鍥剧墖鍚堟牸鎬�', icon: 'el-icon-money', description: '鎻忚堪淇℃伅', type: '3' },
- { name: '璁惧鎶撴媿鍥剧墖鏃堕挓鍑嗙‘鎬�', icon: 'el-icon-data-analysis', description: '鎻忚堪淇℃伅', type: '3' },
- { name: '鎶撴媿浜鸿劯鏁版嵁涓婁紶鍙婃椂鎬�', icon: 'el-icon-thumb', description: '鎻忚堪淇℃伅', type: '3' },
- { name: '浜鸿劯鍗″彛璁惧鎶撴媿鏁版嵁澶у浘鍙敤鎬�', icon: 'el-icon-pie-chart', description: '鎻忚堪淇℃伅', type: '3' },
- { name: '', icon: 'el-icon-data-line', description: '鎻忚堪淇℃伅', type: '3' },
- { name: '', icon: 'el-icon-timer', description: '鎻忚堪淇℃伅', type: '3' },
- { name: '', icon: 'el-icon-money', description: '鎻忚堪淇℃伅', type: '3' },
- { name: '', icon: 'el-icon-data-analysis', description: '鎻忚堪淇℃伅', type: '3' },
+ {
+ name: "瑙嗗浘搴撳鎺ョǔ瀹氭��",
+ icon: "el-icon-alarm-clock",
+ description: "鎻忚堪淇℃伅",
+ type: "3",
+ },
+ {
+ name: "鐐逛綅鍦ㄧ嚎鐜�",
+ icon: "el-icon-user",
+ description: "鎻忚堪淇℃伅",
+ type: "3",
+ },
+ {
+ name: "鐩綍涓�鑷寸巼",
+ icon: "el-icon-data-line",
+ description: "鎻忚堪淇℃伅",
+ type: "3",
+ },
+ {
+ name: "浜鸿劯鍗″彛淇℃伅閲囬泦鍑嗙‘鐜�",
+ icon: "el-icon-timer",
+ description: "鎻忚堪淇℃伅",
+ type: "3",
+ },
+ {
+ name: "璁惧鎶撴媿鍥剧墖鍚堟牸鎬�",
+ icon: "el-icon-money",
+ description: "鎻忚堪淇℃伅",
+ type: "3",
+ },
+ {
+ name: "璁惧鎶撴媿鍥剧墖鏃堕挓鍑嗙‘鎬�",
+ icon: "el-icon-data-analysis",
+ description: "鎻忚堪淇℃伅",
+ type: "3",
+ },
+ {
+ name: "鎶撴媿浜鸿劯鏁版嵁涓婁紶鍙婃椂鎬�",
+ icon: "el-icon-thumb",
+ description: "鎻忚堪淇℃伅",
+ type: "3",
+ },
+ {
+ name: "浜鸿劯鍗″彛璁惧鎶撴媿鏁版嵁澶у浘鍙敤鎬�",
+ icon: "el-icon-pie-chart",
+ description: "鎻忚堪淇℃伅",
+ type: "3",
+ },
+ {
+ name: "",
+ icon: "el-icon-data-line",
+ description: "鎻忚堪淇℃伅",
+ type: "3",
+ },
+ { name: "", icon: "el-icon-timer", description: "鎻忚堪淇℃伅", type: "3" },
+ { name: "", icon: "el-icon-money", description: "鎻忚堪淇℃伅", type: "3" },
+ {
+ name: "",
+ icon: "el-icon-data-analysis",
+ description: "鎻忚堪淇℃伅",
+ type: "3",
+ },
],
equipment: [
- { name: '璧勪骇绠＄悊', icon: 'el-icon-wallet', description: '鎻忚堪淇℃伅', type: '4' },
- { name: '', icon: 'el-icon-pie-chart', description: '鎻忚堪淇℃伅', type: '4' },
- { name: '', icon: 'el-icon-data-line', description: '鎻忚堪淇℃伅', type: '4' },
- { name: '', icon: 'el-icon-timer', description: '鎻忚堪淇℃伅', type: '4' },
- { name: '', icon: 'el-icon-money', description: '鎻忚堪淇℃伅', type: '4' },
- { name: '', icon: 'el-icon-data-analysis', description: '鎻忚堪淇℃伅', type: '4' },
- ]
+ {
+ name: "璧勪骇绠＄悊",
+ icon: "el-icon-wallet",
+ description: "鎻忚堪淇℃伅",
+ type: "4",
+ },
+ {
+ name: "",
+ icon: "el-icon-pie-chart",
+ description: "鎻忚堪淇℃伅",
+ type: "4",
+ },
+ {
+ name: "",
+ icon: "el-icon-data-line",
+ description: "鎻忚堪淇℃伅",
+ type: "4",
+ },
+ { name: "", icon: "el-icon-timer", description: "鎻忚堪淇℃伅", type: "4" },
+ { name: "", icon: "el-icon-money", description: "鎻忚堪淇℃伅", type: "4" },
+ {
+ name: "",
+ icon: "el-icon-data-analysis",
+ description: "鎻忚堪淇℃伅",
+ type: "4",
+ },
+ ],
};
},
methods: {
@@ -145,8 +395,8 @@
this.$router.push({
path: `/data-manage/data-detail/index/1/1?type=${item.type}&index=${index}`,
});
- }
- }
+ },
+ },
};
</script>
@@ -159,4 +409,7 @@
.col-margin {
margin-bottom: 20px;
}
+::v-deep .el-link--inner{
+ width: 100% !important;
+}
</style>
--
Gitblit v1.8.0