大屏页面初始化

screen-vue/src/views/desktop/components/Note.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="table-container">
+    <div class="main-card">
+      <div class="title-section">
+        <h1 class="title">便签信息</h1>
+      </div>
+      <div class="divider"></div>
+      <div class="content-section">
+        <div class="table-wrapper">
+          <el-table
+            :data="tableData"
+            border
+            :header-cell-style="{ background: '#f5f7fa' }"
+            style="width: 100%;"
+            height="100%"
+            v-loading="loading"
+          >
+            <el-table-column
+              prop="name"
+              label="姓名"
+              width="120"
+              fixed="left"
+            />
+            <el-table-column
+              prop="age"
+              label="年龄"
+              width="80"
+            />
+            <el-table-column
+              prop="gender"
+              label="性别"
+              width="80"
+            />
+            <el-table-column
+              prop="phone"
+              label="手机号"
+              width="150"
+            />
+            <el-table-column
+              prop="email"
+              label="邮箱"
+              width="200"
+            />
+            <el-table-column
+              prop="address"
+              label="地址"
+              width="250"
+            />
+            <el-table-column
+              prop="company"
+              label="公司"
+              width="180"
+            />
+            <el-table-column
+              prop="position"
+              label="职位"
+              width="150"
+            />
+            <el-table-column
+              prop="salary"
+              label="薪资"
+              width="120"
+            />
+            <el-table-column
+              prop="entryDate"
+              label="入职日期"
+              width="150"
+              fixed="right"
+            />
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { ElTable, ElTableColumn, ElLoading } from 'element-plus'
+
+// 生成模拟数据
+const generateTableData = () => {
+  const data = []
+  const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十']
+  const genders = ['男', '女']
+  const positions = ['前端开发', '后端开发', '产品经理', 'UI设计', '测试工程师', '运维工程师']
+  const companies = ['科技有限公司', '网络科技公司', '信息技术公司', '数据服务公司']
+  
+  for (let i = 1; i <= 50; i++) {
+    data.push({
+      id: i,
+      name: names[Math.floor(Math.random() * names.length)] + i,
+      age: Math.floor(Math.random() * 30) + 20,
+      gender: genders[Math.floor(Math.random() * genders.length)],
+      phone: `13${Math.floor(Math.random() * 900000000) + 100000000}`,
+      email: `user${i}@example.com`,
+      address: `北京市朝阳区某某街道${Math.floor(Math.random() * 100)}号`,
+      company: Math.floor(Math.random() * 10) + '号' + companies[Math.floor(Math.random() * companies.length)],
+      position: positions[Math.floor(Math.random() * positions.length)],
+      salary: `${Math.floor(Math.random() * 30) + 10}k`,
+      entryDate: `202${Math.floor(Math.random() * 5) + 1}-${Math.floor(Math.random() * 12) + 1}-${Math.floor(Math.random() * 28) + 1}`
+    })
+  }
+  return data
+}
+
+const tableData = ref([])
+const loading = ref(true)
+
+onMounted(() => {
+  // 模拟接口请求延迟
+  setTimeout(() => {
+    tableData.value = generateTableData()
+    loading.value = false
+  }, 500)
+})
+</script>
+
+<style scoped>
+.table-container {
+  width: 100%;
+  height: 100%;
+  padding: 2px;
+  margin: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+}
+
+.main-card {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.title-section {
+  width: 100%;
+  height: 36px;
+  padding: 0 12px;
+  box-sizing: border-box;
+  background-color: #f9fafb;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  border-radius: 4px 4px 0 0;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  margin: 0;
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  background-color: #e5e7eb;
+}
+
+.content-section {
+  flex: 1;
+  width: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+
+.table-wrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+/* 表格滚动条样式优化 */
+:deep(.el-table__body-wrapper) {
+  overflow: auto;
+}
+
+:deep(.el-table__body-wrapper::-webkit-scrollbar) {
+  display: block;
+  height: 6px;
+  width: 6px;
+}
+
+:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
+  background: #dcdfe6;
+  border-radius: 3px;
+}
+
+:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
+  background: #c0c4cc;
+}
+
+/* 固定表头样式优化 */
+:deep(.el-table__fixed-left) {
+  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
+}
+
+:deep(.el-table__fixed-right) {
+  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.05);
+}
+
+:deep(.el-table th) {
+  font-weight: 600;
+  color: #303133;
+}
+</style>