dragon
/
dragon-web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

故障管理 样式修正

master
张海宁 2023-12-05 13:58:35 +08:00
parent fdcb84d55b
commit c9d0fd62a4
1 changed files with 40 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/views/fault/faultList.vue
View File

@ -1,16 +1,15 @@
<template> <template>
<div> <div>
<ul v-if="mm"> <ul v-if="mm" class="card-list">
<li v-for="item in list" :key="item.id"> <li v-for="item in list" :key="item.id" class="card-item">
<!-- 这里填充卡片的内容 -->
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<i class="el-icon-user"></i> <i class="el-icon-user"></i>
<span style="color: #1ab394">{{ item.code }}</span> <span class="code">{{ item.code }}</span>
</div> </div>
<div class="card-content"> <div class="card-content">
<p style="color: #7a6df0">故障码描述：{{ item.name}}</p> <p class="name">故障码描述：{{ item.name }}</p>
<p style="color: #13ce66">可用状态：{{ item.status }}</p> <p class="status">可用状态：{{ item.status }}</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<el-button @click="doEdit(item.id)">编辑信息</el-button> <el-button @click="doEdit(item.id)">编辑信息</el-button>
@ -19,15 +18,12 @@
</div> </div>
</li> </li>
</ul> </ul>
<ul v-else> <ul v-else class="list">
<li v-for="item in list" :key="item.id"> <li v-for="item in list" :key="item.id" class="list-item">
<!-- 这里填充列表的内容 --> <span>ID: {{ item.id }}</span>
<div class="list-item"> <span>Code: {{ item.code }}</span>
<span>ID: {{ item.id }}</span> <span>Name: {{ item.name }}</span>
<span>Code: {{ item.code }}</span> <span>Status: {{ item.status }}</span>
<span>Name: {{ item.name }}</span>
<span>Status: {{ item.status }}</span>
</div>
</li> </li>
</ul> </ul>
<button @click="faultCodeQuery">查询</button> <button @click="faultCodeQuery">查询</button>
@ -54,6 +50,12 @@ export default {
this.list = res.data; this.list = res.data;
}); });
}, },
doEdit(id) {
// 编辑角色逻辑
},
doDelete(id) {
// 删除角色逻辑
}
}, },
created() { created() {
this.faultCodeQuery(); this.faultCodeQuery();
@ -63,14 +65,15 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
/* 样式设置 */ /* 样式设置 */
ul { .card-list,
.list {
list-style: none; list-style: none;
padding: 0; padding: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
li { .card-item {
flex: 0 0 25%; /* 每行显示4个卡片 */ flex: 0 0 25%; /* 每行显示4个卡片 */
margin: 10px; margin: 10px;
} }
@ -80,6 +83,7 @@ li {
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
transition: background-color 0.3s; /* 添加过渡效果 */
} }
.card-header { .card-header {
@ -95,4 +99,23 @@ li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.code {
color: #1ab394;
}
.name {
color: #7a6df0;
}
.status {
color: #13ce66;
}
.list-item {
/* 列表项样式 */
}
.card:hover {
background-color: #f0f0f0; /* 鼠标悬浮时的背景色 */
}
</style> </style>