故障管理 样式修正

src/views/fault/faultList.vue

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