124 lines
2.4 KiB
Vue
124 lines
2.4 KiB
Vue
<template>
|
||
<div>
|
||
<ul v-if="mm" class="card-list">
|
||
<li v-for="item in list" :key="item.id" class="card-item">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<i class="el-icon-loading" style="color: rgba(60,52,182,0.63)"></i>
|
||
<span class="code">{{ item.code }}</span>
|
||
</div>
|
||
<div class="card-content">
|
||
<p class="name">故障码描述：{{ item.name }}</p>
|
||
<p class="status">可用状态：{{ item.status }}</p>
|
||
</div>
|
||
<div class="card-footer">
|
||
<el-button @click="doEdit(item.id)">编辑信息</el-button>
|
||
<el-button @click="doDelete(item.id)">删除信息</el-button>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<ul v-else class="list">
|
||
<li v-for="item in list" :key="item.id" class="list-item">
|
||
<span>ID: {{ item.id }}</span>
|
||
<span>Code: {{ item.code }}</span>
|
||
<span>Name: {{ item.name }}</span>
|
||
<span>Status: {{ item.status }}</span>
|
||
</li>
|
||
</ul>
|
||
<button @click="faultCodeQuery">查询</button>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { qFaultCode } from "@/api/fault";
|
||
import Layout from "@/layout/index.vue";
|
||
|
||
export default {
|
||
name: "Fault",
|
||
components: { Layout },
|
||
data() {
|
||
return {
|
||
mm: true, // 默认为卡片风格，为false时切换成列表风格
|
||
list: []
|
||
};
|
||
},
|
||
methods: {
|
||
// 故障码查询
|
||
faultCodeQuery() {
|
||
qFaultCode().then(res => {
|
||
this.list = res.data;
|
||
});
|
||
},
|
||
doEdit(id) {
|
||
// 编辑角色逻辑
|
||
},
|
||
doDelete(id) {
|
||
// 删除角色逻辑
|
||
}
|
||
},
|
||
created() {
|
||
this.faultCodeQuery();
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/* 样式设置 */
|
||
.card-list,
|
||
.list {
|
||
list-style: none;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.card-item {
|
||
flex: 0 0 25%; /* 每行显示4个卡片 */
|
||
margin: 10px;
|
||
|
||
}
|
||
|
||
.card {
|
||
border: 1px solid #e55e5e;
|
||
border-radius: 5px;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
transition: background-color 0.3s; /* 添加过渡效果 */
|
||
background-color: #550c81;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-content {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.card-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.code {
|
||
color: #9771e0;
|
||
}
|
||
|
||
.name {
|
||
color: #fd6c00;
|
||
}
|
||
|
||
.status {
|
||
color: #00ff6d;
|
||
}
|
||
|
||
.list-item {
|
||
/* 列表项样式 */
|
||
}
|
||
.card:hover {
|
||
background-color: #0005c0; /* 鼠标悬浮时的背景色 */
|
||
}
|
||
</style>
|