update

src/views/workstuff/message/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="app-container"><!--从这一层开始嵌入页面-->
+
+    <el-card>
+      <el-form label-width="50px">
+        <div class="search">
+          <el-form-item label="关键字">
+            <el-input placeholder="请输入关键字"></el-input>
+          </el-form-item>
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+          <el-button icon="el-icon-refresh-left">重置</el-button>
+        </div><!--search 搜索-->
+      </el-form><!--el-form-->
+    </el-card><!--el-card-->
+
+    <el-card>
+      <div class="operate">
+        <el-button type="primary" icon="el-icon-check">全部标记已读</el-button>
+      </div><!--operate 操作按钮-->
+      <el-table :data="tableData" style="width: 100%" height="529">
+        <el-table-column prop="prop1" label="消息内容"></el-table-column>
+        <el-table-column prop="prop2" label="接收时间"></el-table-column>
+        <el-table-column prop="prop3" label="消息状态">
+          <template slot-scope="scope">
+            <span :class="getClassName(scope.row.prop3)">{{ scope.row.prop3 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" >
+          <el-button type="text" icon="el-icon-check">标记已读</el-button>
+        </el-table-column>
+      </el-table><!--el-table-->
+      <el-pagination  :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
+    </el-card><!--el-card-->
+
+  </div><!--app-container-->
+</template>
+
+<script>
+  export default {
+    name: 'message',
+    data() {
+      return {
+        tableData: [
+          {
+            prop1: '网络资源信息名称1 已过期',
+            prop2: '2024/02/09 12:00',
+            prop3: '未读',
+          },
+          {
+            prop1: '网络资源信息名称2 已过期',
+            prop2: '2024/02/09 12:00',
+            prop3: '已读',
+          },
+          {
+            prop1: '网络资源信息名称3 已过期',
+            prop2: '2024/02/09 12:00',
+            prop3: '未读',
+          },
+          {
+            prop1: '网络资源信息名称4 已过期',
+            prop2: '2024/02/09 12:00',
+            prop3: '已读',
+          },
+          {
+            prop1: '网络资源信息名称5 已过期',
+            prop2: '2024/02/09 12:00',
+            prop3: '未读',
+          }
+        ],
+      }
+    },
+    methods: {
+      getClassName(prop3) {
+        // 根据不同的文本内容返回不同的类名
+        if (prop3 === '已读') {
+          return 'green';
+        } else if (prop3 === '未读') {
+          return 'red';
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>